Added ability to tag media

1 files changed, 54 insertions, 13 deletions

diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css
index 2b007f8..969c531 100644
--- a/wwwroot/styles/global.css
+++ b/wwwroot/styles/global.css
@@ -1,24 +1,36 @@
 :root {
-    --col-accent-pri: #0aa;
-    --col-bg:         #222;
-    --col-dialog-bg:  #333;
-    --col-navbar-bg:  var(--col-accent-pri);
-    --col-button-pri: var(--col-accent-pri);
-    --col-button-sec: #555;
+    --col-accent-pri:      #0aa;
+    --col-accent-pri-hl:   #0cc;
+    --col-bg:              #222;
+    --col-dialog-bg:       #333;
+    --col-navbar-bg:       var(--col-accent-pri);
+    --col-button-pri:      var(--col-accent-pri);
+    --col-button-pri-hl:   var(--col-accent-pri-hl);
+    --col-button-sec:      #555;
+    --col-button-sec-hl:   #777;
+    --col-scrollbar:       #666666;
+    --col-scrollbar-hover: #aaaaaa;
 }
 
 body {
-    margin:      0;
-    background:  var(--col-bg);
-    color:       white;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode';
+    background:     var(--col-bg);
+    color:          white;
+    display:        flex;
+    flex-direction: column;
+    font-family:    'Trebuchet MS', 'Lucida Sans Unicode';
+    margin:         0;
+    overflow:       hidden;
 }
 
 a {
-    color:           white;
+    color:           var(--col-accent-pri);
     text-decoration: none;
 }
 
+a:hover {
+    filter: brightness(1.5);
+}
+
 button, input[type=submit] {
     color:         white;
     background:    var(--col-button-pri);
@@ -28,18 +40,29 @@ button, input[type=submit] {
     height:        30px;
     margin:        10px 5px 0 5px;
     padding:       0 9px 0 9px;
+    user-select:   none;
 }
 
 button.secondary {
     background: var(--col-button-sec);
 }
 
+button.secondary:hover {
+    background: var(--col-button-sec-hl);
+}
+
+button.secondary:active {
+    background: white;
+    color:      var(--col-button-sec);
+}
+
 button:hover, input[type=submit]:hover {
-    filter: grayscale(0.9) brightness(2.5);
+    background: var(--col-button-pri-hl);
 }
 
 button:active, input[type=submit]:active {
-    filter: grayscale(0.9) brightness(3.5);
+    background: white;
+    color:      var(--col-button-pri);
 }
 
 input {
@@ -100,3 +123,21 @@ div.dialog.visible {
     opacity:    1;
     visibility: visible;
 }
+
+::-webkit-scrollbar {
+    width:  10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background:    var(--col-scrollbar);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--col-scrollbar-hover);
+}
+
+::-webkit-scrollbar-corner {
+    opacity: 0;
+}