Template:Protractor-LLB/styles.css: Difference between revisions
Jump to navigation
Jump to search
(Modified protractor, added angles and guidelines, added colors) |
m (Added dark theme color if a solution is found for the media query) |
||
Line 74: | Line 74: | ||
border-color: #0cf; | border-color: #0cf; | ||
} | } | ||
/* | |||
@media (prefers-color-scheme: dark) { | |||
.protractor { | |||
border-color: #444; | |||
background-color: #222; | |||
} | |||
.guideline { | |||
border-color: #444; | |||
} | |||
.angle { | |||
border-color: #fff; | |||
} | |||
.bounce::after { | |||
background-color: #222; | |||
} | |||
} | |||
*/ |
Revision as of 07:11, 30 June 2024
.protractor {
/*
aspect-ratio: 1 / 1;
min-width: 150px; /* minimum that this is still okay to look at (should apply to parent too, but parent will scroll instead)
*/
width: 300px;
height: 300px;
border: 3px solid;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: clip;
}
/* --- Guidelines --- */
.guide-line {
font-size: 1px;
z-index: 0;
height: 0;
width: 100%;
position: absolute;
left: 0;
border: 1em dotted;
border-width: 1em 0;
opacity: 0.75;
transform-origin: 50% 0;
}
.guide-thin {
opacity: 0.35;
}
/* --- Angles --- */
.angle {
z-index: 1;
display: block;
width: 50%;
height: 1em;
position: absolute;
left: 50%;
transform-origin: 0 50%;
border: .2em solid;
border-left: 0;
border-right: 0;
}
.bounce::after {
z-index: 2;
content: "";
box-sizing: border-box;
border: 1px solid;
position: absolute;
height: calc(1em + .2em * 2);
width: calc(1em + 2px);
right: 0;
top: -.2em;
}
/* --- Colors --- */
.protractor {
border-color: #666;
background-color: #fafafa;
}
.guideline {
border-color: #666;
}
.angle {
border-color: #000;
}
.bounce::after {
background-color: #fafafa;
border-color: #0cf;
}
/*
@media (prefers-color-scheme: dark) {
.protractor {
border-color: #444;
background-color: #222;
}
.guideline {
border-color: #444;
}
.angle {
border-color: #fff;
}
.bounce::after {
background-color: #222;
}
}
*/