added different css file for settings
This commit is contained in:
westtle
parent
43e0098b70
commit
763b0340f8
3 changed files with 104 additions and 106 deletions
103
assets/styles/settings.css
Normal file
103
assets/styles/settings.css
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/* 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 {
|
||||
color: hsl(var(--color-3));
|
||||
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;
|
||||
|
||||
position: fixed;
|
||||
top: 1.125rem;
|
||||
bottom: 1.125rem;
|
||||
left: -2.625rem; /* Width of .settings__buttons */
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.settings[data-expanded="true"] { left: 0; }
|
||||
|
||||
/* Settings > Container For Buttons */
|
||||
|
||||
.settings__buttons {
|
||||
background-color: hsl(var(--color-2));
|
||||
border: 0.125rem solid;
|
||||
border-color: currentColor;
|
||||
border-left: none;
|
||||
max-height: 100%;
|
||||
padding: 0.75rem 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings[data-expanded="true"] .settings__buttons { overflow-y: auto; }
|
||||
|
||||
/* Settings > Individual Button */
|
||||
|
||||
.settings__buttons > * { margin-bottom: 1.125rem; }
|
||||
.settings__buttons > *:last-child { margin: 0; }
|
||||
|
||||
.settings__button {
|
||||
display: block;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
max-width: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: ease-in-out 0.11s;
|
||||
transition-property: color, opacity;
|
||||
}
|
||||
|
||||
.settings__button:focus-visible {
|
||||
--focus-offset: 0.125rem;
|
||||
|
||||
color: hsl(var(--color-1));
|
||||
}
|
||||
|
||||
@media (hover:hover) {
|
||||
.settings__button:hover { color: hsl(var(--color-1)); }
|
||||
}
|
||||
|
||||
.settings__button--toggle-settings {
|
||||
background-color: hsl(var(--color-2));
|
||||
border: 0.125rem solid hsl(var(--color-3));
|
||||
border-left: none;
|
||||
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.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%, 25%); }
|
||||
|
||||
/* Settings > SVG */
|
||||
|
||||
.settings__svg--toggle-settings {
|
||||
padding: 13.67%; /* Use padding on svg to make it smaller (Remember to set the padding below 50%). */
|
||||
transition: transform cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
|
||||
}
|
||||
|
||||
.settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings {
|
||||
color: hsl(var(--color-1));
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,115 +1,9 @@
|
|||
: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__svg-westtle--background,
|
||||
.settings__svg-westtle--cat { transition: fill ease-in-out 0.11s; }
|
||||
|
||||
body {
|
||||
color: hsl(var(--color-1));
|
||||
background-color: hsl(var(--color-2));
|
||||
min-height: 21.875rem;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
|
||||
.settings {
|
||||
color: hsl(var(--color-3));
|
||||
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;
|
||||
|
||||
position: fixed;
|
||||
top: 1.125rem;
|
||||
bottom: 1.125rem;
|
||||
left: -2.625rem; /* Width of .settings__buttons */
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.settings[data-expanded="true"] { left: 0; }
|
||||
/* .settings:has([aria-expanded="true"]) { left: 0; } */
|
||||
|
||||
/* Settings > Container For Buttons */
|
||||
|
||||
.settings__buttons {
|
||||
background-color: hsl(var(--color-2));
|
||||
border: 0.125rem solid;
|
||||
border-color: currentColor;
|
||||
border-left: none;
|
||||
max-height: 100%;
|
||||
padding: 0.75rem 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings[data-expanded="true"] .settings__buttons { overflow-y: auto; }
|
||||
|
||||
/* Settings > Individual Button */
|
||||
|
||||
.settings__buttons > * { margin-bottom: 1.125rem; }
|
||||
.settings__buttons > *:last-child { margin: 0; }
|
||||
|
||||
.settings__button {
|
||||
display: block;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
max-width: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: ease-in-out 0.11s;
|
||||
transition-property: color, opacity;
|
||||
}
|
||||
|
||||
.settings__button:focus-visible {
|
||||
--focus-offset: 0.125rem;
|
||||
|
||||
color: hsl(var(--color-1));
|
||||
}
|
||||
|
||||
@media (hover:hover) {
|
||||
.settings__button:hover { color: hsl(var(--color-1)); }
|
||||
}
|
||||
|
||||
.settings__button--toggle-settings {
|
||||
background-color: hsl(var(--color-2));
|
||||
border: 0.125rem solid hsl(var(--color-3));
|
||||
border-left: none;
|
||||
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.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%, 25%); }
|
||||
|
||||
/* Settings > SVG */
|
||||
|
||||
.settings__svg--toggle-settings {
|
||||
padding: 13.67%; /* Use padding on svg to make it smaller (Remember to set the padding below 50%). */
|
||||
transition: transform cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
|
||||
}
|
||||
|
||||
.settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings {
|
||||
color: hsl(var(--color-1));
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.settings__svg--westtle { border-radius: 0.1875rem; }
|
||||
|
||||
.settings__separator {
|
||||
display: block;
|
||||
border-bottom: 0.125rem solid;
|
||||
border-color: currentColor;
|
||||
border-radius: 6.1875rem;
|
||||
}
|
||||
|
||||
/* Simple Note */
|
||||
|
||||
.simple-note {
|
||||
width: 90%;
|
||||
max-width: 29.125rem;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
<link rel="manifest" href="./manifest.webmanifest">
|
||||
<link rel="stylesheet" type="text/css" href="./assets/styles/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="./assets/styles/global.css">
|
||||
<link rel="stylesheet" type="text/css" href="./assets/styles/settings.css">
|
||||
<link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
|
||||
</head>
|
||||
<body class="-flex-column -flex-grow">
|
||||
|
|
|
|||
Loading…
Reference in a new issue