better color styling of icons, text, borders, code tag, tag component, remove old unneeded styling code, move inline styling code out as needed, styling comments

inline styling is still very much present and needs to be uplifted out of there, but I'm still not sure of what to name everything. I wish I knew the best practices here. very frustrating that there's no one in the world who cares enough to let me consult for free

viewer/static/css/main.scss

@@ -3,13 +3,12 @@
 @import "./../../../bulma/sass/utilities/initial-variables";
 @import "./../../../bulma/sass/utilities/functions";
 
-$primary: hsl(172, 91%, 60%);
+$primary: hsl(163, 100%, 49%);
 $link: hsl(163, 100%, 49%);
 $link-hover: findDarkColor($link);
 $body-background-color: $black-bis;
-//$background: #0a556d;
+$code-background: $grey-darker;
-//$code-background: #bcf6ff;
+$code: $link;
-//$code: #033343;
 
 $card-header-color: $link;
 $panel-heading-background-color: $black-ter;
@@ -20,6 +19,12 @@ $text-strong: hsl(0, 0%, 90%);
 // Dark Mode
 $scheme-main: $black;
 $scheme-invert: $white;
+$border: rgba($link, 0.4);
+$navbar-item-hover-background-color: rgba(0, 0, 0, 0);
+$panel-block-color: lighten($link, 50);
+$panel-icon-color: $link;
+$card-footer-border-top: 1px solid transparentize($white, 0.7);
+
 
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
 @import "./../../../bulma/bulma.sass";
@@ -28,136 +33,64 @@ html, body {
   height: 100%
 }
 
-
+// Can't figure out how to color panel bottom border with variables
-//.panel {
-//  background-color: #0a556d;
-//
-//  .panel-heading {
-//    background-color: #17a0cd;
-//    color: white;
-//  }
-//}
-
-//.card {
-//  background-color: #0a556d;
-//  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;
+  border-bottom-color: rgba($link, 0.4);
-}
-
-.tag:not(body).is-info {
-  background-color: #37a0bf;
-}
-
-//.panel-block a {
-//  color: #ffffff;
-//}
-//
-//.panel-icon, .icon {
-//  color: #11a3cf;
-//
-//  a {
-//
-//  }
-//}
-
-.icon a {
-  /*color: inherit;*/
 }
 
 .navbar {
-  //background-color: #0c5167;
-  //color: white;
   font-family: 'Open Sans', sans-serif;
 
+  // Make navbar brand title stand out
   .navbar-brand .navbar-item {
-    //color: white;
     font-size: 150%;
-    font-weight: 700;
+    font-weight: 600;
-
-    &:focus, &:hover {
-      text-decoration: none;
-      //color: inherit;
-    }
   }
 }
 
-
-.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;
-}
-
-
-//a {
-//  color: #38c8f8;
-//
-//  &:hover {
-//    color: #a4e6ff;
-//  }
-//}
-
-.checkbox {
-  //color: white;
-}
-
-.checkbox:hover {
-  //color: #a4e6ff;
-}
-
-a.card-footer-item {
-  //color: #c9f2ff;
-}
-
-a.card-footer-item:hover {
-  //color: white;
-}
-
-.navbar-item, p, .label, .card-header-title {
-  //color: white;
-}
-
-//.media + .media {
-//  border-top-color: rgba(164, 230, 255, 0.5);
-//}
-
 #browse.card .card-content {
   padding: 0;
 }
 
-.content .media {
+.card .media {
-  padding: 0 0.5rem;
+  // Cancel out Bulma css
-}
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
 
-.card .media:not(:last-child) {
   margin: 0;
-  padding: 1rem 0;
+  padding: 1rem;
 }
 
+.panel-icon {
+  margin-right: 1em;
+}
+
+// Decrease tag size a bit
+.tag:not(body) {
+  font-size: 0.7rem;
+  line-height: 1.3;
+  padding: 0 0.6em;
+}
+
+// Vertically center all icons
 .icon {
   vertical-align: middle;
 }
 
-.delete-icon {
+.media {
-  text-align: right;
+  width: 100%;
-  float: right;
+
-  display: inline-block;
+  b, span, a, p {
+    padding: 0 3px;
+  }
+
+  .media-filename {
+    text-decoration: underline;
+    text-decoration-color: lighten($link, 15%);
+  }
+
+  .media-fileid {
+    color: $link;
+  }
 }

viewer/templates/browse.html

@@ -2,23 +2,6 @@
 {% block head %}
     {{ block.super }}
     <style>
-        .media {
-            width: 100%;
-        }
-
-        .media b, span, a, p {
-            padding: 0 3px;
-        }
-
-        .media .media-filename {
-            text-decoration: underline;
-            text-decoration-color: #3273dc;
-        }
-
-        .media .media-fileid {
-            color: #9ee8ff;
-        }
-
         .flex-container {
             display: flex;
             flex-direction: row;
@@ -46,10 +29,6 @@
             align-self: auto;
         }
 
-        .directory-info {
-            white-space: nowrap;
-        }
-
         .file-count {
             font-weight: 400; font-style: italic; font-size: 70%;
         }
@@ -64,14 +43,6 @@
             align-items: center;
             padding: 0 0.5rem;
         }
-
-        .card .icon a {
-            color: #c4edff;
-        }
-
-        .card .icon a:hover {
-            color: #ffffff;
-        }
     </style>
 {% endblock head %}
 {% block content %}

viewer/templates/delete.html

@@ -27,9 +27,8 @@
             <div class="content">
                 <p>
                     Are you sure you want to remove this directory from the file server?
-                    <br>
                     {% load humanize %}
-                    <a href="{% url 'browse' directory.id %}"><code>{{ directory.path }}</code></a> contains {{ num_files|intcomma }} files.
+                    <a href="{% url 'browse' directory.id %}"><code>{{ directory.path }}</code></a> contains <b class="has-text-primary">{{ num_files|intcomma }}</b> files.
                 </p>
             </div>
         </div>

viewer/templates/index.html

@@ -1,31 +1,17 @@
 {% extends 'base.html' %}
-{% block head %}
-    {{ block.super }}
-    <style>
-        .panel-icon {
-            margin-right: 1em;
-        }
-
-        .tag:not(body) {
-            font-size: 0.7rem;
-            line-height: 1.3;
-            padding: 0 0.6em;
-        }
-    </style>
-{% endblock head %}
 {% block content %}
     <div class="panel">
         <div class="panel-heading">Directories</div>
         {% if directories|length > 0 %}
             {% for served_directory in directories %}
-                <div class="panel-block">
+                <div class="panel-block is-flex">
-                    <span class="panel-icon">
+                    <span class="panel-icon is-align-self-flex-start">
                         <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
                     </span>
-                    <a href="{% url 'browse' served_directory.id %}">
+                    <a href="{% url 'browse' served_directory.id %}" class="is-align-self-flex-end">
                         {{ served_directory.path }}
                         {% if served_directory.regex %}
-                            <span class="tag is-info">Filtered</span>
+                            <span class="tag is-primary">Filtered</span>
                         {% endif %}
                     </a>
                     <a href="{% url 'delete' served_directory.id %}">