lewisdale.dev/src/css/exceptions/color-scheme-picker.css
Lewis Dale b0e9634302
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m31s
Mini redesign
2024-10-10 20:07:48 +01:00

79 lines
1.2 KiB
CSS

.color-scheme {
border: 0;
padding: 0;
display: flex;
gap: var(--space-size-3xs);
flex-direction: column;
max-width: 25rem;
margin-left: auto;
text-align: right;
legend {
position:absolute;
clip:rect(0 0 0 0);
}
input[name="color-scheme"] {
position:absolute;
clip:rect(0 0 0 0);
}
label {
cursor: pointer;
&:has(:not(:checked)) {
color: var(--color-disabled);
}
&:has(:focus-visible) {
outline: 1px solid var(--color-primary);
outline-offset: 4px;
border-radius: 5%;
}
&::before {
font-family: "font awesome 6 free";
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;
-webkit-font-smoothing: antialiased;
font-size: var(--text-size-s);
}
&:has([value="dark"]) {
&::before {
content: "\f186";
}
}
&:has([value="light"]) {
&::before {
content: "\f185";
}
}
&:has([value="system"]) {
&::before {
content: "\f390";
}
}
&:has(:checked)::before {
text-shadow: var(--color-decoration) 1px 0 10px;
}
}
}
@media only screen and (max-width: 1280px) {
.color-scheme {
margin-right: 0;
margin-left: auto;
padding: 0 var(--space-size-l);
width: 100%;
}
}