diff --git a/css/Flags/Dark.css b/css/Flags/Dark.css index 2bf2bbd..da1bcda 100644 --- a/css/Flags/Dark.css +++ b/css/Flags/Dark.css @@ -6,6 +6,6 @@ body.dark { --hover: #FFF1; } -body.dark #theme-switcher .icon::after { +body.dark #theme-switcher i::after { content: "dark_mode" } diff --git a/css/PageManager.css b/css/PageManager.css index cc7acda..83b373d 100644 --- a/css/PageManager.css +++ b/css/PageManager.css @@ -41,7 +41,7 @@ transition: background .2s; } -.back .icon { +.back i { margin: 4px; width: 56px; height: 56px; @@ -50,11 +50,11 @@ transition: background .2s; } -.back .icon:hover { +.back i:hover { background: var(--hover); } -.back .icon:after { +.back i:after { content: "chevron_left"; position: absolute; top: 50%; @@ -68,7 +68,7 @@ margin: 20px 20px 16px; } -.header .icon { +.header i { margin-top: 1px; margin-right: 10px; } diff --git a/css/Pages/Home.css b/css/Pages/Home.css index 4960a4e..1086be4 100644 --- a/css/Pages/Home.css +++ b/css/Pages/Home.css @@ -12,7 +12,7 @@ object-fit: cover; } -#theme-switcher .icon::after { +#theme-switcher i::after { content: "light_mode" } diff --git a/css/Pages/Services.css b/css/Pages/Services.css index 6cbd496..c80121a 100644 --- a/css/Pages/Services.css +++ b/css/Pages/Services.css @@ -22,7 +22,7 @@ background: var(--hover); } -.box .icon { +.box i { font-size: 24px; padding: 20px; background: hsl(var(--color), 100%, 89%); diff --git a/css/Pages/Settings.css b/css/Pages/Settings.css index 7710512..52521e7 100644 --- a/css/Pages/Settings.css +++ b/css/Pages/Settings.css @@ -15,7 +15,7 @@ transition: background .4s; } -.setting .icon { +.setting i { margin-right: 14px; font-size: 28px; } diff --git a/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css b/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css index cb87c5a..d67358c 100644 --- a/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css +++ b/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.css @@ -5,7 +5,7 @@ src: url(MaterialSymbolsRounded.woff2) format('woff2'); } -.icon { +i { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; @@ -17,6 +17,7 @@ white-space: nowrap; word-wrap: normal; direction: ltr; + display: inline-block; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } diff --git a/index.html b/index.html index 259b7b4..69f20bc 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,8 @@
+ +
@@ -19,33 +21,41 @@
-
+
Theme
-
apps
+ apps
Services
-
-
more
-
More
+
+ settings +
Settings
+ +
-
+
-
apps
+ apps
Services
-
-
+ + +
+
+
+ settings +
Settings
+
WARNING: due to blocked cookies, all settings will be lost after page reload
diff --git a/js/UI/Main/Main.js b/js/UI/Main/Main.js index 784a701..208da28 100644 --- a/js/UI/Main/Main.js +++ b/js/UI/Main/Main.js @@ -9,6 +9,7 @@ export default class Main { init() { document.title = this.config.get("name") + document.getElementById("favicon").href = this.config.get("icon") this.initBackgrounds() } diff --git a/js/UI/Settings/Settings.js b/js/UI/Settings/Settings.js index 40dfcd9..a24e9a6 100644 --- a/js/UI/Settings/Settings.js +++ b/js/UI/Settings/Settings.js @@ -43,7 +43,7 @@ export default class Settings { let item = document.createElement("div") item.classList.add("setting") item.innerHTML = ` -
${icon}
+ ${icon}
${name}
${desc}