admin dashboard early UI refresh

admin/static/admin.css

@@ -1,6 +1,71 @@
 @import url("/style/prideflag.css");
 @import url("/font/inter/inter.css");
 
+:root {
+    --bg-0: #101010;
+    --bg-1: #141414;
+    --bg-2: #181818;
+    --bg-3: #202020;
+
+    --fg-0: #b0b0b0;
+    --fg-1: #c0c0c0;
+    --fg-2: #d0d0d0;
+    --fg-3: #e0e0e0;
+
+    --col-shadow-0: #0002;
+    --col-shadow-1: #0004;
+    --col-shadow-2: #0006;
+    --col-highlight-0: #ffffff08;
+    --col-highlight-1: #fff1;
+    --col-highlight-2: #fff2;
+
+    --col-new: #b3ee5b;
+    --col-on-new: #1b2013;
+    --col-save: #6fd7ff;
+    --col-on-save: #283f48;
+    --col-delete: #ff7171;
+    --col-on-delete: #371919;
+
+    --col-warn: #ffe86a;
+    --col-on-warn: var(--bg-0);
+    --col-warn-hover: #ffec81;
+
+    --shadow-sm:
+    0 1px 2px var(--col-shadow-2),
+    inset 0 1px 1px var(--col-highlight-2);
+    --shadow-md:
+    0 2px 4px var(--col-shadow-1),
+    inset 0 2px 2px var(--col-highlight-1);
+    --shadow-lg:
+    0 4px 8px var(--col-shadow-0),
+    inset 0 4px 4px var(--col-highlight-0);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg-0: #e8e8e8;
+        --bg-1: #f0f0f0;
+        --bg-2: #f8f8f8;
+        --bg-3: #ffffff;
+
+        --fg-0: #606060;
+        --fg-1: #404040;
+        --fg-2: #303030;
+        --fg-3: #202020;
+
+        --col-shadow-0: #0002;
+        --col-shadow-1: #0004;
+        --col-shadow-2: #0008;
+        --col-highlight-0: #fff2;
+        --col-highlight-1: #fff4;
+        --col-highlight-2: #fff8;
+
+        --col-warn: #ffe86a;
+        --col-on-warn: var(--fg-3);
+        --col-warn-hover: #ffec81;
+    }
+}
+
 body {
     width: 100%;
     height: calc(100vh - 1em);
@@ -11,8 +76,12 @@ body {
     font-family: "Inter", sans-serif;
     font-size: 16px;
 
-    color: #303030;
-    background: #f0f0f0;
+    color: var(--fg-0);
+    background: var(--bg-0);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--fg-3);
 }
 
 nav {
@@ -22,40 +91,35 @@ nav {
     display: flex;
     flex-direction: row;
     justify-content: left;
-
-    background: #f8f8f8;
-    border-radius: 4px;
-    border: 1px solid #808080;
+    gap: .5em;
+    user-select: none;
 }
 nav .icon {
     height: 100%;
+    border-radius: 100%;
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
 }
-nav .title {
-    width: auto;
+nav .icon img {
+    width: 100%;
     height: 100%;
-
-    margin: 0 1em 0 0;
-
-    display: flex;
-
-    line-height: 2em;
-    text-decoration: none;
-
-    color: inherit;
 }
 .nav-item {
     width: auto;
     height: 100%;
-
-    margin: 0px;
     padding: 0 1em;
-
     display: flex;
 
+    color: var(--fg-2);
+    background: var(--bg-2);
+    border-radius: 10em;
+    box-shadow: var(--shadow-sm);
+
     line-height: 2em;
+    font-weight: 500;
 }
 .nav-item:hover {
-    background: #00000010;
+    background: var(--bg-1);
     text-decoration: none;
 }
 nav a {
@@ -77,9 +141,11 @@ a {
     text-decoration: none;
 }
 
+/*
 a:hover {
     text-decoration: underline;
 }
+*/
 
 a img.icon {
     height: .8em;
@@ -133,17 +199,14 @@ code {
 #error {
     margin: 0 0 1em 0;
     padding: 1em;
-    border-radius: 4px;
+    border-radius: 8px;
     background: #ffffff;
-    border: 1px solid #888;
 }
 #message {
     background: #a9dfff;
-    border-color: #599fdc;
 }
 #error {
     background: #ffa9b8;
-    border-color: #dc5959;
 }
 
 
@@ -152,52 +215,54 @@ a.delete:not(.button) {
     color: #d22828;
 }
 
-button, .button {
+.button, button {
     padding: .5em .8em;
     font-family: inherit;
     font-size: inherit;
-    border-radius: 4px;
-    border: 1px solid #a0a0a0;
-    background: #f0f0f0;
+
     color: inherit;
+    background: var(--bg-2);
+    border: none;
+    border-radius: 10em;
+    box-shadow: var(--shadow-sm);
+    font-weight: 500;
+    transition: background .1s ease-out, color .1s ease-out;
+
+    cursor: pointer;
+    user-select: none;
 }
 button:hover, .button:hover {
     background: #fff;
-    border-color: #d0d0d0;
 }
 button:active, .button:active {
     background: #d0d0d0;
-    border-color: #808080;
 }
 
-.button, button {
-    color: inherit;
-}
 .button.new, button.new {
-    background: #c4ff6a;
-    border-color: #84b141;
+    color: var(--col-on-new);
+    background: var(--col-new);
 }
 .button.save, button.save {
-    background: #6fd7ff;
-    border-color: #6f9eb0;
+    color: var(--col-on-save);
+    background: var(--col-save);
 }
 .button.delete, button.delete {
-    background: #ff7171;
-    border-color: #7d3535;
+    color: var(--col-on-delete);
+    background: var(--col-delete);
 }
 .button:hover, button:hover {
-    background: #fff;
-    border-color: #d0d0d0;
+    color: var(--bg-3);
+    background: var(--fg-3);
 }
 .button:active, button:active {
-    background: #d0d0d0;
-    border-color: #808080;
+    color: var(--bg-2);
+    background: var(--fg-0);
 }
 .button[disabled], button[disabled] {
-    background: #d0d0d0 !important;
-    border-color: #808080 !important;
+    color: var(--fg-0) !important;
+    background: var(--bg-3) !important;
     opacity: .5;
-    cursor: not-allowed !important;
+    cursor: default !important;
 }
 
 
@@ -217,7 +282,6 @@ form input {
     padding: .3rem .5rem;
     display: block;
     border-radius: 4px;
-    border: 1px solid #808080;
     font-size: inherit;
     font-family: inherit;
     color: inherit;