refactor some styling

7 files changed, 127 insertions, 124 deletions

diff --git a/server/src/routes/ui/layout.rs b/server/src/routes/ui/layout.rs
index 92da3f6..32d67da 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()), id="admin"] { "Administration" } " "
+                                a.admin[href=uri!(r_admin_dashboard())] { "Administration" } " "
                             }
-                            a[href=uri!(r_account_settings()), id="settings"] { "Settings" } " "
-                            a[href=uri!(r_account_logout()), id="logout"] { "Log out" }
+                            a.settings[href=uri!(r_account_settings())] { "Settings" } " "
+                            a.logout[href=uri!(r_account_logout())] { "Log out" }
                         } else {
-                            a[href=uri!(r_account_register())] { "Register" } " "
-                            a[href=uri!(r_account_login()), id="login"] { "Log in" }
+                            a.register[href=uri!(r_account_register())] { "Register" } " "
+                            a.login[href=uri!(r_account_login())] { "Log in" }
                         }
                     }
                 }
diff --git a/server/src/routes/ui/style.rs b/server/src/routes/ui/style.rs
index 19283e1..7756a2f 100644
--- a/server/src/routes/ui/style.rs
+++ b/server/src/routes/ui/style.rs
@@ -43,7 +43,9 @@ fn css_bundle() -> String {
         "js-player.css",
         "js-transition.css",
         "forms.css",
-        "themes.css"
+        "props.css",
+        "themes.css",
+        "navbar.css"
     )
 }
 
diff --git a/web/style/layout.css b/web/style/layout.css
index 9a2f4c2..5b19114 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -53,22 +53,6 @@ h1 {
     color: var(--font-highlight);
 }
 
-nav {
-    user-select: none;
-    z-index: 90;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    padding: 1em;
-    width: calc(100vw - 2em);
-    height: 2em;
-    backdrop-filter: blur(6px);
-    background-color: var(--c-nav);
-
-    display: flex;
-    align-items: center;
-}
-
 code {
     font-family: monospace !important;
 }
@@ -77,41 +61,6 @@ code {
     color: grey;
 }
 
-nav a {
-    border: 0px solid transparent;
-    border-radius: 5px;
-    padding: 0.5em;
-    text-decoration: none;
-    color: var(--font);
-    background-image: linear-gradient(transparent, transparent),
-        linear-gradient(var(--accent-light), var(--accent-light));
-    background-size: 100% 2px, 0 2px;
-    background-position: 100% 100%, 0 100%;
-    background-repeat: no-repeat;
-    transition: background-size 0.15s linear;
-    cursor: pointer;
-}
-nav a:hover {
-    background-color: var(--c-nav-hover);
-    background-size: 0 2px, 100% 2px;
-}
-
-nav h1 {
-    margin: 0px;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    font-size: 1.5em;
-    display: inline;
-}
-nav .account {
-    margin-left: auto;
-}
-nav .account .username {
-    color: var(--accent-light);
-    font-weight: bold;
-    margin-right: 1em;
-}
-
 #main {
     display: block;
     margin-top: var(--bar-height);
@@ -143,26 +92,6 @@ footer p {
     font-size: 0.8em;
 }
 
-#admin::before {
-    content: "admin_panel_settings";
-}
-
-#settings::before {
-    content: "settings";
-}
-
-#logout::before {
-    content: "logout";
-}
-
-#login::before {
-    content: "login";
-}
-
-#back::before {
-    content: "arrow_back";
-}
-
 *::before,
 .icon {
     font-family: "Material Icons";
diff --git a/web/style/navbar.css b/web/style/navbar.css
new file mode 100644
index 0000000..e85ce1c
--- /dev/null
+++ b/web/style/navbar.css
@@ -0,0 +1,72 @@
+
+nav {
+    user-select: none;
+    z-index: 90;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    padding: 1em;
+    width: calc(100vw - 2em);
+    height: 2em;
+    backdrop-filter: blur(6px);
+    background-color: var(--c-nav);
+
+    display: flex;
+    align-items: center;
+}
+
+nav a {
+    border: 0px solid transparent;
+    border-radius: 5px;
+    padding: 0.5em;
+    text-decoration: none;
+    color: var(--font);
+    background-image: linear-gradient(transparent, transparent),
+        linear-gradient(var(--accent-light), var(--accent-light));
+    background-size: 100% 2px, 0 2px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 0.15s linear;
+    cursor: pointer;
+}
+
+nav a:hover {
+    background-color: var(--c-nav-hover);
+    background-size: 0 2px, 100% 2px;
+}
+
+nav h1 {
+    margin: 0px;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    font-size: 1.5em;
+    display: inline;
+}
+nav .account {
+    margin-left: auto;
+}
+nav .account .username {
+    color: var(--accent-light);
+    font-weight: bold;
+    margin-right: 1em;
+}
+
+nav .admin::before {
+    content: "admin_panel_settings";
+}
+
+nav .settings::before {
+    content: "settings";
+}
+
+nav .logout::before {
+    content: "logout";
+}
+
+nav .login::before {
+    content: "login";
+}
+
+nav .back::before {
+    content: "arrow_back";
+}
diff --git a/web/style/nodecard.css b/web/style/nodecard.css
index 8dacbf8..2753083 100644
--- a/web/style/nodecard.css
+++ b/web/style/nodecard.css
@@ -18,21 +18,6 @@
     display: block;
 }
 
-.dirup {
-    width: 100%;
-    font-size: large;
-    display: block;
-    text-align: center;
-    background-color: var(--background-light);
-    border-radius: 0.2em;
-    padding: 0.6em;
-    margin: 0.2em;
-    transition: filter 0.22s;
-}
-.dirup:hover {
-    filter: brightness(120%);
-}
-
 .node.card {
     padding: 1em;
 }
diff --git a/web/style/nodepage.css b/web/style/nodepage.css
index c1d6796..91cdccc 100644
--- a/web/style/nodepage.css
+++ b/web/style/nodepage.css
@@ -71,36 +71,17 @@
     content: "undo";
 }*/
 
-.props p {
-    margin: 0.4em;
-    font-size: small;
-    font-weight: bolder;
-    display: inline-block;
-    padding: 0.2em;
-    background: var(--background-prop);
-    border-radius: 4px;
-}
-.props p.federation {
-    background: rgba(22, 101, 133, 0.603);
-}
-.props p.federation::before {
-    content: "link";
-}
-.props p.watched {
-    background: rgba(75, 175, 44, 0.644);
-}
-.props p.watched::before {
-    content: "check";
-}
-.props p.progress {
-    background: rgba(156, 89, 35, 0.63);
-}
-.props p.progress::before {
-    content: "pending";
-}
-.props p.rating {
-    background: rgba(138, 156, 35, 0.63);
-}
-.props p.rating::before {
-    content: "stars";
+.dirup {
+    width: 100%;
+    font-size: large;
+    display: block;
+    text-align: center;
+    background-color: var(--background-light);
+    border-radius: 0.2em;
+    padding: 0.6em;
+    margin: 0.2em;
+    transition: filter 0.22s;
 }
+.dirup:hover {
+    filter: brightness(120%);
+}
\ No newline at end of file
diff --git a/web/style/props.css b/web/style/props.css
new file mode 100644
index 0000000..5f314e3
--- /dev/null
+++ b/web/style/props.css
@@ -0,0 +1,34 @@
+
+.props p {
+    margin: 0.4em;
+    font-size: small;
+    font-weight: bolder;
+    display: inline-block;
+    padding: 0.2em;
+    background: var(--background-prop);
+    border-radius: 4px;
+}
+.props p.federation {
+    background: rgba(22, 101, 133, 0.603);
+}
+.props p.federation::before {
+    content: "link";
+}
+.props p.watched {
+    background: rgba(75, 175, 44, 0.644);
+}
+.props p.watched::before {
+    content: "check";
+}
+.props p.progress {
+    background: rgba(156, 89, 35, 0.63);
+}
+.props p.progress::before {
+    content: "pending";
+}
+.props p.rating {
+    background: rgba(138, 156, 35, 0.63);
+}
+.props p.rating::before {
+    content: "stars";
+}