diff options
| -rw-r--r-- | server/src/routes/ui/layout.rs | 8 | ||||
| -rw-r--r-- | server/src/routes/ui/node.rs | 2 | ||||
| -rw-r--r-- | web/script/backbutton.ts | 2 | ||||
| -rw-r--r-- | web/style/layout.css | 29 | ||||
| -rw-r--r-- | web/style/themes.css | 29 |
5 files changed, 59 insertions, 11 deletions
diff --git a/server/src/routes/ui/layout.rs b/server/src/routes/ui/layout.rs index 3ba5e88..ae81cb6 100644 --- a/server/src/routes/ui/layout.rs +++ b/server/src/routes/ui/layout.rs @@ -47,13 +47,13 @@ markup::define! { @if let Some(session) = session { span { "Logged in as " } span.username { @session.user.display_name } " " @if session.user.admin { - a[href=uri!(r_admin_dashboard())] { "Administration" } " " + a[href=uri!(r_admin_dashboard()), id="admin", class="icon"] { "Administration" } " " } - a[href=uri!(r_account_settings())] { "Settings" } " " - a[href=uri!(r_account_logout())] { "Log out" } + a[href=uri!(r_account_settings()), id="settings", class="icon"] { "Settings" } " " + a[href=uri!(r_account_logout()), id="logout", class="icon"] { "Log out" } } else { a[href=uri!(r_account_register())] { "Register" } " " - a[href=uri!(r_account_login())] { "Log in" } + a[href=uri!(r_account_login()), id="login", class="icon"] { "Log in" } } } } diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs index c95f8eb..ed7b7e2 100644 --- a/server/src/routes/ui/node.rs +++ b/server/src/routes/ui/node.rs @@ -89,7 +89,7 @@ markup::define! { } @if !(matches!(node.kind, NodeKind::Collection | NodeKind::Channel)) { .cardhover.item { - a.play[href=&uri!(r_player(id, PlayerConfig::default()))] { "play_arrow" } + a.play[href=&uri!(r_player(id, PlayerConfig::default())), class="icon"] { "play_arrow" } @Props { node } } } 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 |