From 763b0340f8cb180a882b19bc2c0706d6c097c808 Mon Sep 17 00:00:00 2001
From: westtle <103447524+westtle@users.noreply.github.com>
Date: Sun, 11 Feb 2024 21:34:53 +0700
Subject: [PATCH] added different css file for settings
---
assets/styles/settings.css | 103 +++++++++++++++++++++++++++++++++++
assets/styles/style.css | 106 -------------------------------------
index.html | 1 +
3 files changed, 104 insertions(+), 106 deletions(-)
create mode 100644 assets/styles/settings.css
diff --git a/assets/styles/settings.css b/assets/styles/settings.css
new file mode 100644
index 0000000..4a459cb
--- /dev/null
+++ b/assets/styles/settings.css
@@ -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;
+}
\ No newline at end of file
diff --git a/assets/styles/style.css b/assets/styles/style.css
index 4d3d595..6920d55 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -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;
diff --git a/index.html b/index.html
index b7e50cd..81a0e0b 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
+