122 lines
No EOL
3.1 KiB
CSS
122 lines
No EOL
3.1 KiB
CSS
/*
|
|
--------
|
|
Settings
|
|
--------
|
|
*/
|
|
|
|
:root[data-theme="light"] .settings__svg--theme-sun { display: none; }
|
|
:root[data-theme="dark"] .settings__svg--theme-sun { display: block; }
|
|
:root[data-theme="dark"] .settings__svg--theme-moon { display: none; }
|
|
:root[data-theme="dark"] .settings__svg-westtle--background { fill: #ffffff; }
|
|
:root[data-theme="dark"] .settings__svg-westtle--cat { fill: #000000; }
|
|
|
|
.settings {
|
|
--settings-color: var(--color-3);
|
|
--settings-background: var(--color-2);
|
|
--settings-interact: var(--color-1);
|
|
|
|
color: hsl(var(--settings-color));
|
|
/*
|
|
Height of .settings__buttons.
|
|
Set it so people can interact with stuff directly below it.
|
|
*/
|
|
max-height: 16.25rem;
|
|
transition: left cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.26s;
|
|
|
|
position: fixed;
|
|
top: 1.125rem;
|
|
bottom: 1.125rem;
|
|
/*
|
|
Width of .settings__buttons.
|
|
*/
|
|
left: -2.75rem;
|
|
z-index: 99;
|
|
}
|
|
|
|
.settings[data-expanded="true"] { left: 0; }
|
|
|
|
/* Settings > Container For Buttons */
|
|
|
|
.settings__buttons {
|
|
background-color: hsl(var(--settings-background));
|
|
border: 0.125rem solid hsl(var(--settings-color));
|
|
border-left: none;
|
|
max-height: 100%;
|
|
padding: 0.1875rem 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings[data-expanded="true"] .settings__buttons { overflow-y: auto; }
|
|
|
|
/* Settings > Individual Button */
|
|
|
|
.settings__button {
|
|
display: block;
|
|
width: 2.625rem;
|
|
padding: 0.5625rem;
|
|
cursor: pointer;
|
|
transition: ease-in-out 0.11s;
|
|
transition-property: color, opacity;
|
|
}
|
|
|
|
.settings__button:focus-visible {
|
|
--focus-offset: -0.4375rem;
|
|
|
|
color: hsla(var(--settings-interact));
|
|
}
|
|
|
|
@media (hover:hover) {
|
|
.settings__button:hover { color: hsla(var(--settings-interact)); }
|
|
}
|
|
|
|
.settings__button--toggle-settings {
|
|
background-color: hsl(var(--settings-background));
|
|
border: 0.125rem solid hsl(var(--settings-color));
|
|
border-left: none;
|
|
width: 1.5rem;
|
|
padding: 0;
|
|
|
|
position: absolute;
|
|
left: 100%;
|
|
}
|
|
|
|
.settings__button--toggle-settings:focus-visible { --focus-offset: 0.125rem; }
|
|
|
|
.settings__button--westtle { opacity: 0.75; }
|
|
.settings__button--westtle:focus-visible { opacity: 1; }
|
|
|
|
@media (hover:hover) {
|
|
.settings__button--westtle:hover { opacity: 1; }
|
|
}
|
|
|
|
.settings__buttons,
|
|
.settings__button--toggle-settings { box-shadow: 0 0.0625rem 0.25rem hsl(0, 0%, 0%, 0.25); }
|
|
|
|
/* Settings > SVG */
|
|
|
|
.settings__svg--toggle-settings {
|
|
/*
|
|
Use padding on svg to make it smaller.
|
|
Remember to set the padding below 50%.
|
|
*/
|
|
padding: 13.67%;
|
|
transition: transform cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.26s;
|
|
}
|
|
|
|
.settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings {
|
|
color: hsla(var(--settings-interact));
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.settings__svg--westtle { border-radius: 0.1875rem; }
|
|
|
|
.settings__svg-westtle--background,
|
|
.settings__svg-westtle--cat { transition: fill ease-in-out 0.11s; }
|
|
|
|
.settings__separator {
|
|
display: block;
|
|
border-bottom: 0.125rem solid;
|
|
border-color: currentColor;
|
|
border-radius: 6.1875rem;
|
|
margin: 0.5625rem 0.5rem;
|
|
} |