sidebar refactor

front/js/svelte/records/Edit.svelte

@@ -156,9 +156,7 @@
     <EditHeader {schema} {record} {isCreateMode} {graph} bind:activeContentTab/>
 
     {#if !["_graph", "_info"].includes(activeContentTab) && isWritable}
-        <div class="shadow-lg "
-             style="position:fixed;bottom:0;left:0px;width:100%;background: rgb(206, 223, 210);z-index:1050"
-        >
+        <div class="shadow-lg record-status-bar">
             <div
                     class="d-flex mt-3 mb-3  align-items-center justify-content-center"
             >

front/sass/_nav.scss

@@ -40,32 +40,32 @@
 }
 
 .accordion-button:not(.collapsed) {
-  background: rgba(11, 93, 30, 0.2) !important;
+  background: rgba(var(--lucent-bg), 0.2) !important;
   font-weight: bold;
 }
 
 .accordion .list-group-item {
   margin-left: 20px;
-  border-left: 2px solid rgba(11, 93, 30, 0.2);
+  border-left: 2px solid rgba(var(--lucent-bg-dark), 0.2);
   border-top: none;
   border-bottom: none;
 }
 
 .accordion .list-group-item:hover {
-  background: rgba(11, 93, 30, 0.1) !important;
+  background: rgba(var(--lucent-bg-dark), 0.1) !important;
 }
 
 .accordion .list-group-item.active {
-  border-left: 2px solid rgba(11, 93, 30, 0.8);
+  border-left: 2px solid rgba(var(--lucent-bg-dark), 0.8);
   border-top: none;
   border-bottom: none;
-  background: rgba(11, 93, 30, 0.1) !important;
+  background: rgba(var(--lucent-bg-dark), 0.1) !important;
   color: var(--bs-primary);
 }
 
 .sidebar-logo{
   padding: 5px 20px;
-  border-bottom:  1px solid rgba(11, 93, 30, 0.2);
+  border-bottom:  1px solid rgba(var(--lucent-bg-dark), 0.2);
 }
 .sidebar-logo a{
   text-decoration: none;

front/sass/_record-status-bar.scss

@@ -0,0 +1,8 @@
+.record-status-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0px;
+  width: 100%;
+  background: rgb(var(--lucent-bg-dark)); // old 206, 223, 210
+  z-index: 1050;
+}

front/sass/app.scss

@@ -3,86 +3,21 @@
 /* SCSS HEX */
 $green-crayola: #0dab76ff;
 $green-pigment: #139a43ff;
-$lincoln-green: #0b5d1eff;
+$lincoln-green: #3e5d8f;
 $forest-green-traditional: #053b06ff;
 $black: #000000ff;
 
-/* SCSS Gradient */
-$gradient-top: linear-gradient(
-    0deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-right: linear-gradient(
-    90deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-bottom: linear-gradient(
-    180deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-left: linear-gradient(
-    270deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-top-right: linear-gradient(
-    45deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-bottom-right: linear-gradient(
-    135deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-top-left: linear-gradient(
-    225deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-bottom-left: linear-gradient(
-    315deg,
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
-$gradient-radial: radial-gradient(
-    #0dab76ff,
-    #139a43ff,
-    #0b5d1eff,
-    #053b06ff,
-    #000000ff
-);
+:root {
+    /* #f0f0f0 in decimal RGB */
+    --lucent-bg:216, 223, 233; //old 11, 93, 30
+    --lucent-bg-dark:34, 44, 60; //old 11, 93, 30
+}
+
 
 $primary: $lincoln-green;
 $table-striped-bg-factor: 0.03;
-$dropdown-bg: rgb(206, 223, 210);
+$dropdown-bg: rgb(var(--lucent-bg)); //rgb(206, 223, 210)
+
 
 @import "../node_modules/bootstrap/scss/bootstrap";
 @import "./sidebar";
@@ -96,6 +31,9 @@ $dropdown-bg: rgb(206, 223, 210);
 @import "./nav";
 @import "./files";
 @import "./revisions";
+@import "./record-status-bar";
+
+
 
 body {
     background-color: rgba(11, 93, 30, 0.04);