All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m31s
79 lines
1.2 KiB
CSS
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%;
|
|
}
|
|
} |