Template:Protractor-LLB/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
m (alignment of guidelines) |
||
Line 28: | Line 28: | ||
width: 100%; | width: 100%; | ||
position: absolute; | position: absolute; | ||
left: | left: 1px; | ||
border: 1em dotted; | border: 1em dotted; | ||
border-width: 1em 0; | border-width: 1em 0; |
Latest revision as of 08:08, 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;
}
/* --- Ball --- */
.ball {
z-index: 2;
border-radius: 50%;
}
/* --- Guidelines --- */
.guide-line {
font-size: 1px;
z-index: 0;
height: 0;
width: 100%;
position: absolute;
left: 1px;
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;
}
}
*/