Added the ability to delete media items

1 files changed, 57 insertions, 18 deletions

diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css
index 4a76f87..2b007f8 100644
--- a/wwwroot/styles/global.css
+++ b/wwwroot/styles/global.css
@@ -1,6 +1,10 @@
 :root {
-    --col-bg: #222;
-    --col-navbar-bg: magenta;
+    --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;
 }
 
 body {
@@ -15,29 +19,42 @@ a {
     text-decoration: none;
 }
 
-input {
+button, input[type=submit] {
     color:         white;
-    box-sizing:    border-box;
-    border:        1px solid #aaa;
-    background:    rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-}
-
-button {
-    background:    #f0f;
+    background:    var(--col-button-pri);
     border-radius: 10px;
     border:        none;
     box-sizing:    border-box;
     height:        30px;
-    padding:       0 7px 0 7px;
+    margin:        10px 5px 0 5px;
+    padding:       0 9px 0 9px;
+}
+
+button.secondary {
+    background: var(--col-button-sec);
+}
+
+button:hover, input[type=submit]:hover {
+    filter: grayscale(0.9) brightness(2.5);
+}
+
+button:active, input[type=submit]:active {
+    filter: grayscale(0.9) brightness(3.5);
 }
 
-button:hover {
-    background: #f8f;
+input {
+    background:    rgba(0, 0, 0, 0);
+    border-radius: 5px;
+    border:        1px solid #aaa;
+    box-sizing:    border-box;
+    color:         white;
+    height:        25px !important;
+    margin-bottom: 10px;
 }
 
-button:active {
-    background: #fff;
+/* necessary for use inside flex containers */
+hr {
+    width: 100%;
 }
 
 table.data-table {
@@ -54,10 +71,32 @@ table.data-table > tbody > tr > td {
     padding: 4px;
 }
 
-table.data-table > tbody > tr:nth-child(2n):not(:last-child) {
+table.data-table > tbody > tr:nth-child(2n) {
     background: rgba(255, 255, 255, 0.2);
 }
 
 table.data-table > tbody > tr > td:not(:last-child) {
     border-right: 1px solid white;
-}
\ No newline at end of file
+}
+
+div.dialog {
+    background:     var(--col-dialog-bg);
+    border-radius:  20px;
+    box-shadow:     0px 5px 10px 10px rgb(0 0 0 / 25%);
+    display:        flex;
+    flex-direction: column;
+    left:           50%;
+    opacity:        0;
+    padding:        20px;
+    position:       absolute;
+    top:            50%;
+    transform:      translate(-50%, -50%);
+    transition:     visibility 0.1s, opacity 0.1s linear;
+    visibility:     hidden;
+    width:          450px;
+}
+
+div.dialog.visible {
+    opacity:    1;
+    visibility: visible;
+}