beenull/simple-note
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

used scoped variables in settings.css

Browse source
This commit is contained in:
westtle 2024-02-13 14:12:45 +07:00
parent c39d373f75
commit 091ac5a4c5
1 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
assets/styles/settings.css
View file

@ -7,7 +7,11 @@
:root[data-theme="dark"] .settings__svg-westtle--cat { fill: #000000; } :root[data-theme="dark"] .settings__svg-westtle--cat { fill: #000000; }
.settings { .settings {
color: hsl(var(--color-3)); --settings-color: var(--color-3);
--settings-background: var(--color-2);
--settings-interact: var(--color-1);
color: hsl(var(--settings-color));
max-height: 16.25rem; /* Height of .settings__buttons. Set it so people can interact with stuff directly below it. */ max-height: 16.25rem; /* Height of .settings__buttons. Set it so people can interact with stuff directly below it. */
transition: left cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s; transition: left cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
@ -23,9 +27,8 @@
/* Settings > Container For Buttons */ /* Settings > Container For Buttons */
.settings__buttons { .settings__buttons {
background-color: hsl(var(--color-2)); background-color: hsl(var(--settings-background));
border: 0.125rem solid; border: 0.125rem solid hsl(var(--settings-color));
border-color: currentColor;
border-left: none; border-left: none;
max-height: 100%; max-height: 100%;
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
@ -50,16 +53,16 @@
.settings__button:focus-visible { .settings__button:focus-visible {
--focus-offset: 0.125rem; --focus-offset: 0.125rem;
color: hsl(var(--color-1)); color: hsl(var(--settings-interact));
} }
@media (hover:hover) { @media (hover:hover) {
.settings__button:hover { color: hsl(var(--color-1)); } .settings__button:hover { color: hsla(var(--settings-interact)); }
} }
.settings__button--toggle-settings { .settings__button--toggle-settings {
background-color: hsl(var(--color-2)); background-color: hsl(var(--settings-background));
border: 0.125rem solid hsl(var(--color-3)); border: 0.125rem solid hsl(var(--settings-color));
border-left: none; border-left: none;
position: absolute; position: absolute;
@ -84,7 +87,7 @@
} }
.settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings { .settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings {
color: hsl(var(--color-1)); color: hsl(var(--settings-interact));
transform: rotate(180deg); transform: rotate(180deg);
} }