make index panel background darker, move inline flexbox styling out of browse.html (scss!), make add dir dialog use small content width

viewer/static/css/main.scss

@@ -6,7 +6,7 @@
 $primary: hsl(163, 100%, 49%);
 $link: hsl(163, 100%, 49%);
 $link-hover: findDarkColor($link);
-$body-background-color: $black-bis;
+$body-background-color: hsl(0, 0%, 9%);
 $code-background: $grey-darker;
 $code: $link;
 
@@ -94,3 +94,28 @@ html, body {
     color: $link;
   }
 }
+
+.panel {
+  background: darken($body-background-color, 2.5%);
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-content: stretch;
+  align-items: flex-start;
+
+  div {
+    align-self: auto;
+  }
+
+  div:nth-child(1) {
+    flex: 1 1 auto;
+  }
+
+  div:nth-child(2), div:nth-child(3) {
+    flex: 0 1 auto;
+  }
+}

viewer/templates/browse.html

@@ -2,32 +2,7 @@
 {% block head %}
     {{ block.super }}
     <style>
-        .flex-container {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            justify-content: flex-end;
-            align-content: stretch;
-            align-items: flex-start;
-        }
 
-        .flex-container div:nth-child(1) {
-            order: 0;
-            flex: 1 1 auto;
-            align-self: auto;
-        }
-
-        .flex-container div:nth-child(2) {
-            order: 1;
-            flex: 0 1 auto;
-            align-self: auto;
-        }
-
-        .flex-container div:nth-child(3) {
-            order: 2;
-            flex: 0 1 auto;
-            align-self: auto;
-        }
 
         .file-count {
             font-weight: 400; font-style: italic; font-size: 70%;
@@ -96,7 +71,7 @@
                         </a>
                         <span class="media-filename">
                             <a href="{% url 'file' directory.id file.filename %}">
-                                {{ file.filename }}
+                                /{{ file.filename }}
                             </a>
                         </span>
                         <span class="media-resolution">

viewer/views.py

@@ -57,7 +57,8 @@ def file(request, directory_id, file):
 
 
 def add(request):
-    context = {'title': 'Add New Directory'}
+    context = {'title': 'Add New Directory',
+               'content_column_size': 'is-half'}
     if 'path' in request.GET.keys():
         context['path_prefill'] = request.GET['path']
     return render(request, 'add.html', context)