Add more icons

3 files changed, 54 insertions, 6 deletions

diff --git a/web/script/backbutton.ts b/web/script/backbutton.ts
index c1225c0..79bc7bb 100644
--- a/web/script/backbutton.ts
+++ b/web/script/backbutton.ts
@@ -2,7 +2,7 @@ import { e } from "./jshelper/mod.ts";
 
 globalThis.addEventListener("DOMContentLoaded", () => {
     document.getElementsByTagName("nav").item(0)?.prepend(
-        e("a", "<- Back", { onclick() { history.back() } })
+        e("a", "Back", { id:"back", class:"icon", onclick() { history.back() } })
     )
 })
 
diff --git a/web/style/layout.css b/web/style/layout.css
index 1369cf5..9f2d51c 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -143,10 +143,35 @@ footer p {
     font-size: 0.8em;
 }
 
-.material-icons, .cardhover.item .play, .page.node .title .play::before {
-    content: "face";
+#admin::before {
+    content: "admin_panel_settings";
+}
+
+#settings::before {
+    content: "settings";
+}
+
+#logout::before {
+    content: "logout";
+}
+
+#login::before {
+    content: "login";
+}
+
+#back::before {
+    content: "arrow_back";
+}
+
+.icon::before {
+    margin-right: 0.2em;
+}
+
+.material-icons, .cardhover.item .play, .page.node .title .play::before, .icon::before {
     font-family: "Material Icons";
     line-height: 1;
+    font-size: 1.1em;
+    vertical-align: text-bottom;
     display: inline-block;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga";
diff --git a/web/style/themes.css b/web/style/themes.css
index 04f0278..dc6f32d 100644
--- a/web/style/themes.css
+++ b/web/style/themes.css
@@ -1,12 +1,12 @@
 body {
     --video-brackground: black;
+}
+body.theme-Dark {
     --accent-light: rgb(255, 163, 87);
     --accent-dark: rgb(199, 90, 0);
     --c-error: rgb(255, 117, 117);
     --c-warn: rgb(252, 255, 78);
     --c-success: rgb(117, 255, 117);
-}
-body.theme-Dark {
     --c-nav: #1c1c1c9a;
     --c-nav-hover: #ffffff10;
     --c-fade: black;
@@ -22,6 +22,11 @@ body.theme-Dark {
     --font-highlight: white;
 }
 body.theme-Light {
+    --accent-light: rgb(255, 163, 87);
+    --accent-dark: rgb(199, 90, 0);
+    --c-error: rgb(255, 117, 117);
+    --c-warn: rgb(252, 255, 78);
+    --c-success: rgb(117, 255, 117);
     --c-nav: #c4c4c4d7;
     --c-nav-hover: #ffffff10;
     --c-fade: white;
@@ -37,4 +42,22 @@ body.theme-Light {
     --font-highlight: rgb(0, 0, 0);
 }
 body.theme-Purple {
-}
+    --accent-light: rgb(191, 87, 255);
+    --accent-dark: rgb(143, 43, 205);
+    --c-error: rgb(255, 117, 117);
+    --c-warn: rgb(252, 255, 78);
+    --c-success: rgb(117, 255, 117);
+    --c-nav: #1c1c1c9a;
+    --c-nav-hover: #ffffff10;
+    --c-fade: black;
+    --overlay: #0005;
+    --overlay-hover: #0008;
+    --background-dark: #070707;
+    --background-light: #1c1c1c;
+    --background-very-light: #323232;
+    --background-disable: rgb(128, 128, 128);
+    --background-prop: #5a5a5a85;
+    --font: rgb(218, 218, 218);
+    --font-dark: rgb(122, 122, 122);
+    --font-highlight: white;
+}
\ No newline at end of file