complete refactor of styling to dark theme with neon turquoise colors via bulma variables

viewer/static/css/main.scss

@@ -1,9 +1,25 @@
 @charset "utf-8";
 
-$body-background-color: #92e1ff;
+@import "./../../../bulma/sass/utilities/initial-variables";
-$background: #0a556d;
+@import "./../../../bulma/sass/utilities/functions";
-$code-background: #bcf6ff;
+
-$code: #033343;
+$primary: hsl(172, 91%, 60%);
+$link: hsl(163, 100%, 49%);
+$link-hover: findDarkColor($link);
+$body-background-color: $black-bis;
+//$background: #0a556d;
+//$code-background: #bcf6ff;
+//$code: #033343;
+
+$card-header-color: $link;
+$panel-heading-background-color: $black-ter;
+$panel-shadow: hsla(172, 91%, 60%, 0.02);
+$text: hsl(0, 0%, 70%);
+$text-strong: hsl(0, 0%, 90%);
+
+// Dark Mode
+$scheme-main: $black;
+$scheme-invert: $white;
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
 @import "./../../../bulma/bulma.sass";
@@ -13,14 +29,35 @@ html, body {
 }
 
 
-.panel {
+//.panel {
-  background-color: #0a556d;
+//  background-color: #0a556d;
+//
+//  .panel-heading {
+//    background-color: #17a0cd;
+//    color: white;
+//  }
+//}
 
-  .panel-heading {
+//.card {
-    background-color: #17a0cd;
+//  background-color: #0a556d;
-    color: white;
+//  color: white;
-  }
+//
-}
+//  .card-header {
+//    background-color: #17a0cd;
+//  }
+//
+//  .card-footer {
+//    border-top-color: rgba(207, 245, 255, 0.5);
+//
+//    .card-footer-item {
+//      background-color: #0c6988;
+//
+//      &:not(:last-child) {
+//        border-right-color: rgba(207, 245, 255, 0.5);
+//      }
+//    }
+//  }
+//}
 
 .panel-block:not(:last-child), .panel-tabs:not(:last-child) {
   border-bottom-color: #0b87ac;
@@ -30,35 +67,35 @@ html, body {
   background-color: #37a0bf;
 }
 
-.panel-block a {
+//.panel-block a {
-  color: #ffffff;
+//  color: #ffffff;
-}
+//}
-
+//
-.panel-icon, .icon {
+//.panel-icon, .icon {
-  color: #11a3cf;
+//  color: #11a3cf;
-
+//
-  a {
+//  a {
-
+//
-  }
+//  }
-}
+//}
 
 .icon a {
   /*color: inherit;*/
 }
 
 .navbar {
-  background-color: #0c5167;
+  //background-color: #0c5167;
-  color: white;
+  //color: white;
   font-family: 'Open Sans', sans-serif;
 
   .navbar-brand .navbar-item {
-    color: white;
+    //color: white;
     font-size: 150%;
     font-weight: 700;
 
     &:focus, &:hover {
       text-decoration: none;
-      color: inherit;
+      //color: inherit;
     }
   }
 }
@@ -66,62 +103,41 @@ html, body {
 
 .navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover {
   background-color: inherit;
-  color: inherit;
+  //color: inherit;
 }
 
 
-.card-header {
+//a {
-  background-color: #17a0cd;
+//  color: #38c8f8;
-}
+//
-
+//  &:hover {
-.card {
+//    color: #a4e6ff;
-  background-color: #0a556d;
+//  }
-  color: white;
+//}
-
-  .card-footer {
-    border-top-color: rgba(207, 245, 255, 0.5);
-
-    .card-footer-item {
-      background-color: #0c6988;
-
-      &:not(:last-child) {
-        border-right-color: rgba(207, 245, 255, 0.5);
-      }
-    }
-  }
-}
-
-a {
-  color: #38c8f8;
-
-  &:hover {
-    color: #a4e6ff;
-  }
-}
 
 .checkbox {
-  color: white;
+  //color: white;
 }
 
 .checkbox:hover {
-  color: #a4e6ff;
+  //color: #a4e6ff;
 }
 
 a.card-footer-item {
-  color: #c9f2ff;
+  //color: #c9f2ff;
 }
 
 a.card-footer-item:hover {
-  color: white;
+  //color: white;
 }
 
 .navbar-item, p, .label, .card-header-title {
-  color: white;
+  //color: white;
 }
 
-.media + .media {
+//.media + .media {
-  border-top-color: rgba(164, 230, 255, 0.5);
+//  border-top-color: rgba(164, 230, 255, 0.5);
-}
+//}
 
 #browse.card .card-content {
   padding: 0;
@@ -145,11 +161,3 @@ a.card-footer-item:hover {
   float: right;
   display: inline-block;
 }
-
-.delete-icon .icon {
-  color: #d63b3b;
-}
-
-.image-placeholder img {
-  background-color: #17a0cd;
-}

viewer/templates/add.html

@@ -2,9 +2,9 @@
 {% block content %}
     <div class="card">
         <header class="card-header">
-            <p class="card-header-title">
+            <h3 class="card-header-title">
                 Add New Directory
-            </p>
+            </h3>
         </header>
         <div class="card-content">
             <div class="content">

viewer/templates/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         {% block head %}
             <meta charset="utf-8">
@@ -12,9 +12,9 @@
     <body class="has-navbar-fixed-top">
         <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
             <div class="navbar-brand">
-                <a class="navbar-item" href="/">
+                <h1 class="navbar-item">
-                    Simple Viewer
+                    <a href="/">Simple Viewer</a>
-                </a>
+                </h1>
             </div>
             <div class="navbar-menu">
                 <div class="navbar-start">

viewer/templates/index.html

@@ -16,6 +16,7 @@
 {% block content %}
     <div class="panel">
         <div class="panel-heading">Directories</div>
+        {% if directories|length > 0 %}
             {% for served_directory in directories %}
                 <div class="panel-block">
                     <span class="panel-icon">
@@ -27,12 +28,19 @@
                             <span class="tag is-info">Filtered</span>
                         {% endif %}
                     </a>
-                <a href="{% url 'delete' served_directory.id %}" class="delete-icon">
+                    <a href="{% url 'delete' served_directory.id %}">
-                    <span class="icon">
+                        <span class="icon has-text-danger">
                             <i class="fas fa-times fa-lg" aria-hidden="true"></i>
                         </span>
                     </a>
                 </div>
             {% endfor %}
+        {% else %}
+            <div class="panel-block">
+                <p>
+                    No directories available.
+                </p>
+            </div>
+        {% endif %}
     </div>
 {% endblock content %}