significant expansion of scss styling, incl. new _dashboard.scss sheet & comprehensive primary btn theme synced w. user palette; changes to all other scss files; list.html & base.html retrofitted w. corresponding scss classes

src/static_src/scss/_base.scss

@@ -79,6 +79,11 @@ body {
             &.is-invalid ~ .invalid-feedback {
                 display: block;
             }
+
+            &:focus {
+                border-color: rgba(var(--terUser), 0.75);
+                box-shadow: 0 0 0.75rem rgba(var(--terUser), 0.5);
+            }
         }
 
         .invalid-feedback {

src/static_src/scss/_button-pad.scss

@@ -1,6 +1,10 @@
 .btn {
-    min-width: 2rem;
+    display: inline-flex;
-    min-height: 2rem;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 2rem;
+    height: 2rem;
     text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
     border: 0.15rem solid rgba(var(--priUser), 1);
     border-radius: 50%;
@@ -20,6 +24,72 @@
         border: 0.18rem solid rgba(var(--priUser), 1);
     }
 
+    &.btn-primary {
+        color: rgba(var(--quaUser), 1);
+        border-color: rgba(var(--quaUser), 1);
+        background-color: rgba(var(--quiUser), 1);
+        box-shadow:
+            0.1rem 0.1rem 0.12rem rgba(var(--quiUser), 0.25),
+            0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
+            0.25rem 0.25rem 0.25rem rgba(var(--quiUser), 0.12)
+        ;
+
+        &:hover {
+            text-shadow:
+                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
+                0 0 1rem rgba(var(--quaUser), 1)
+                ;
+            box-shadow:
+                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
+                0 0 0.5rem rgba(var(--quaUser), 0.12)
+            ;
+        }
+        
+        &:active {
+            border: 0.18rem solid rgba(var(--quaUser), 1);
+            text-shadow:
+                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
+                0 0 0.12rem rgba(var(--quaUser), 1)
+            ;
+            box-shadow:
+                -0.1rem -0.1rem 0.12rem rgba(var(--quiUser), 0.25),
+                -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
+                0 0 0.5rem rgba(var(--quaUser), 0.12)
+            ;
+        }
+    }
+
+    &.btn-xl {
+        width: 5rem;
+        height: 5rem;
+        font-size: 1.2rem;
+        border-width: 0.3rem;
+
+        &:hover {
+            text-shadow:
+                0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25),
+                0 0 0.5rem rgba(var(--quaUser), 1)
+                ;
+            box-shadow:
+                0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25),
+                0 0 0.5rem rgba(var(--quaUser), 22)
+            ;
+        }
+
+        &:active {
+            border-width: 0.25rem;
+            text-shadow:
+                -0.2rem -0.2rem 0.25rem rgba(0, 0, 0, 0.25),
+                0 0 0.24rem rgba(var(--quaUser), 1)
+            ;
+            box-shadow:
+                -0.2rem -0.2rem 0.24rem rgba(var(--quiUser), 0.25),
+                -0.2rem -0.2rem 0.24rem rgba(0, 0, 0, 0.25),
+                0 0 0.5rem rgba(var(--quaUser), 0.22)
+            ;
+            }
+    }
+
     &.btn-cancel {
         color: rgba(var(--priOr), 1);
         border-color: rgba(var(--priOr), 1);
@@ -32,18 +102,18 @@
 
         &:hover {
             text-shadow:
-                0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
+                0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25),
-                0 0 1rem rgba(var(--priOr), 1)
+                0 0 0.5rem rgba(var(--priOr), 1)
                 ;
             box-shadow:
-                0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
+                0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25),
                 0 0 0.5rem rgba(var(--priOr), 0.12)
             ;
         }
         
         &:active {
             text-shadow:
-                -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
+                -0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.25),
                 0 0 0.12rem rgba(var(--priOr), 1)
             ;
             box-shadow:

src/static_src/scss/_dashboard.scss

@@ -0,0 +1,21 @@
+#id_applets_container {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.5rem 0;
+
+    section {
+        border: 0.2rem solid rgba(var(--secUser), 0.5);
+        border-radius: 0.75rem;
+        padding: 1rem;
+    }
+}
+
+#id_dash_gear {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: rgba(var(--secUser), 0.6);
+}

src/static_src/scss/_palette-picker.scss

@@ -1,13 +1,21 @@
-.palette-picker {
+.palette {
     display: flex;
-    gap: 1rem;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    gap: 0.75rem;
+    padding-bottom: 0.5rem;
 }
 
-.palette-picker-item {
+.palette-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
+    flex: 0 0 calc(100% / 3);
+    scroll-snap-align: start;
 }
 
 .swatch {

src/static_src/scss/core.scss

@@ -1,6 +1,7 @@
 @import 'rootvars';
 @import 'base';
 @import 'button-pad';
+@import 'dashboard';
 @import 'palette-picker';
 
 

src/static_src/scss/rootvars.scss

@@ -8,7 +8,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    touch-action: none;
+    outline: none;
 }
 
 :root {

src/templates/apps/dashboard/list.html

@@ -41,7 +41,7 @@
                     </div>
                 {% endif %}
 
-                <button type="submit" class="btn btn-primary">Share</button>
+                <button type="submit" class="btn btn-primary btn-xl">Share</button>
             </form>
             <small>List shared with:
                 {% for user in list.shared_with.all %}

src/templates/core/base.html

@@ -28,7 +28,7 @@
                         <span class="navbar-text">Logged in as {{ user|display_name }}</span>
                         <form method="POST" action="{% url "logout" %}">
                             {% csrf_token %}
-                            <button id="id_logout" class="btn btn-outline-secondary" type="submit">
+                            <button id="id_logout" class="btn btn-primary btn-xl" type="submit">
                                 Log Out
                             </button>
                         </form>