diff --git a/src/css/exceptions/color-scheme-picker.css b/src/css/exceptions/color-scheme-picker.css index 9e07fce..bad8631 100644 --- a/src/css/exceptions/color-scheme-picker.css +++ b/src/css/exceptions/color-scheme-picker.css @@ -28,35 +28,39 @@ header > * { color: var(--color-disabled); } + + &:has(:focus-visible) { outline: 1px solid var(--color-primary); outline-offset: 4px; border-radius: 5%; } - &:has([name="color-scheme"]) { + &::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 { - 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); + content: "\f186"; } + } - &:has([value="dark"]) { - &::before { - content: "\f186"; - } + &:has([value="light"]) { + &::before { + content: "\f185"; } + } - &:has([value="light"]) { - &::before { - content: "\f185"; - } - } - } + &:has(:checked)::before { + text-shadow: var(--color-decoration) 1px 0 10px; + } } } \ No newline at end of file diff --git a/src/css/globals.css b/src/css/globals.css index 6ee79d3..d0e138a 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -10,16 +10,18 @@ :root { --color-secondary: var(--color-neutral-100); --color-primary: var(--color-neutral-800); - --color-decoration: var(--color-amber-800); + --color-decoration: var(--color-yellow-400); --color-subtle: var(--color-zinc-500); + --color-disabled: var(--color-neutral-600); } } body[data-color-scheme="light"] { --color-secondary: var(--color-neutral-100); --color-primary: var(--color-neutral-800); - --color-decoration: var(--color-amber-800); + --color-decoration: var(--color-yellow-400); --color-subtle: var(--color-zinc-500); + --color-disabled: var(--color-neutral-600); } body[data-color-scheme="dark"] { @@ -27,6 +29,7 @@ body[data-color-scheme="dark"] { --color-secondary: var(--color-neutral-800); --color-decoration: var(--color-amber-200); --color-subtle: var(--color-zinc-400); + --color-disabled: var(--color-neutral-400); } body {