more color standardization

2 files changed, 71 insertions, 73 deletions

diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index bdae3b9b1..3a36377f7 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -11,6 +11,8 @@ $medium-blue: #4476F7;
 $pink: "#E0217D";
 $yellow: "#F5D747";
 
+$drop-shadow: "#32323215";
+
 $antimodemenu-height: 36px;
 
 // fonts
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 1ba86232b..5d1c5f4eb 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,7 +1,4 @@
-$light-blue: #AEDDF8;
-$dark-blue: #5B9FDD;
-$light-background: #ececec;
-$dark-grey: #656565;
+@import "../global/globalCssVariables";
 
 .presBox-cont {
     cursor: auto;
@@ -10,7 +7,6 @@ $dark-grey: #656565;
     pointer-events: inherit;
     z-index: 2;
     font-family: Roboto;
-    box-shadow: #AAAAAA .2vw .2vw .4vw;
     width: 100%;
     min-width: 20px;
     height: 100%;
@@ -47,8 +43,8 @@ $dark-grey: #656565;
         align-items: center;
         height: 30px;
         width: 100%;
-        color: white;
-        background-color: #323232;
+        color: $white;
+        background-color: $dark-gray;
 
         .toolbar-button {
             cursor: pointer;
@@ -110,7 +106,7 @@ $dark-grey: #656565;
     }
 
     .toolbar-divider {
-        border-left: solid #ffffff70 0.5px;
+        border-left: solid $medium-gray 0.5px;
         height: 20px;
     }
 }
@@ -118,7 +114,7 @@ $dark-grey: #656565;
 .dropdown {
     font-size: 10;
     margin-left: 5px;
-    color: darkgrey;
+    color: $medium-gray;
     transition: 0.5s ease;
 }
 
@@ -174,7 +170,7 @@ $dark-grey: #656565;
 
     .ribbon-colorBox {
         cursor: pointer;
-        border: solid 1px black;
+        border: solid 1px $black;
         display: flex;
         margin-left: 5px;
         margin-top: 5px;
@@ -191,9 +187,9 @@ $dark-grey: #656565;
         font-size: 11;
         font-weight: 200;
         height: 20;
-        background-color: #ececec;
-        color: black;
-        border: solid 1px black;
+        background-color: $white;
+        color: $black;
+        border: solid 1px $black;
         display: flex;
         margin-left: 5px;
         margin-top: 5px;
@@ -220,11 +216,11 @@ $dark-grey: #656565;
             align-items: center;
             height: 100%;
             width: 100%;
-            background: black;
+            background: $black;
         }
 
         .ribbon-propertyUpDownItem:hover {
-            background: darkgrey;
+            background: $medium-gray;
             transform: scale(1.05);
         }
     }
@@ -239,7 +235,7 @@ $dark-grey: #656565;
 
         .multiThumb-slider {
             display: grid;
-            background-color: $light-background;
+            background-color: $white;
             height: 10px;
             border-radius: 10px;
             overflow: hidden;
@@ -257,8 +253,8 @@ $dark-grey: #656565;
                 -webkit-appearance: none;
                 height: 10px;
                 cursor: ew-resize;
-                background: $dark-blue;
-                box-shadow: -100vw 0 0 100vw $light-background;
+                background: $medium-blue;
+                box-shadow: -100vw 0 0 100vw $white;
             }
 
             .toolbar-slider.end::-webkit-slider-thumb {
@@ -267,7 +263,7 @@ $dark-grey: #656565;
                 -webkit-appearance: none;
                 height: 10px;
                 cursor: ew-resize;
-                background: $dark-blue;
+                background: $medium-blue;
                 box-shadow: -100vw 0 0 100vw $light-blue;
             }
         }
@@ -282,7 +278,7 @@ $dark-grey: #656565;
             height: 10px;
             border-radius: 10px;
             -webkit-appearance: none;
-            background-color: $light-background;
+            background-color: $white;
         }
 
         .toolbar-slider:focus {
@@ -301,7 +297,7 @@ $dark-grey: #656565;
             -webkit-appearance: none;
             height: 10px;
             cursor: ew-resize;
-            background: $dark-blue;
+            background: $medium-blue;
             box-shadow: -100vw 0 0 100vw $light-blue;
         }
 
@@ -318,7 +314,7 @@ $dark-grey: #656565;
             width: 15px;
             min-width: 15px;
             cursor: pointer;
-            background: $light-background;
+            background: $white;
         }
 
         .presBox-checkbox:focus {
@@ -326,7 +322,7 @@ $dark-grey: #656565;
         }
 
         .presBox-checkbox:hover {
-            background: #c0c0c0;
+            background: $light-gray;
         }
 
         .presBox-checkbox:checked {
@@ -381,9 +377,9 @@ $dark-grey: #656565;
         text-align: center;
         font-size: 16;
         width: 90%;
-        color: black;
+        color: $black;
         transform: translate(5%, 0px);
-        border-bottom: solid 2px darkgrey;
+        border-bottom: solid 2px $medium-gray;
     }
 
 
@@ -396,8 +392,8 @@ $dark-grey: #656565;
         justify-self: left;
         margin-top: 5px;
         padding-left: 10px;
-        background-color: $light-background;
-        border: solid 1px black;
+        background-color: $white;
+        border: solid 1px $black;
         min-width: 80px;
         max-width: 200px;
         width: 100%;
@@ -416,7 +412,7 @@ $dark-grey: #656565;
     }
 
     .ribbon-frameSelector {
-        border: black solid 1px;
+        border: $black solid 1px;
         width: 60px;
         height: 20px;
         margin-top: 5px;
@@ -433,12 +429,12 @@ $dark-grey: #656565;
             cursor: pointer;
             position: relative;
             height: 100%;
-            background: $light-background;
+            background: $white;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
-            color: black;
+            color: $black;
         }
 
         .numKeyframe {
@@ -446,7 +442,7 @@ $dark-grey: #656565;
             font-size: 10;
             font-weight: 600;
             position: relative;
-            color: black;
+            color: $black;
             display: flex;
             width: 100%;
             height: 100%;
@@ -489,7 +485,7 @@ $dark-grey: #656565;
             padding-left: 10;
             padding-right: 10;
             border-radius: 10px;
-            background-color: #979797;
+            background-color: $medium-gray;
         }
 
         .ribbon-final-button:hover {
@@ -508,13 +504,13 @@ $dark-grey: #656565;
             align-items: center;
             margin-bottom: 5px;
             height: 25px;
-            color: lightgrey;
+            color: $light-gray;
             width: 100%;
             max-width: 120;
             padding-left: 10;
             padding-right: 10;
             border-radius: 10px;
-            background-color: black;
+            background-color: $black;
         }
 
         .ribbon-final-button-hidden:hover {
@@ -525,15 +521,15 @@ $dark-grey: #656565;
         .ribbon-frameList {
             width: calc(100% - 5px);
             height: 50px;
-            background-color: #ececec;
-            border: 1px solid #9f9f9f;
+            background-color: $white;
+            border: 1px solid $medium-gray;
             grid-template-rows: max-content;
 
             .frameList-header {
                 display: grid;
                 width: 100%;
                 height: 20px;
-                background-color: #9f9f9f;
+                background-color: $medium-gray;
 
                 .frameList-headerButtons {
                     display: flex;
@@ -588,7 +584,7 @@ $dark-grey: #656565;
         font-size: 10.5;
         font-weight: 300;
         height: 20;
-        background-color: #979797;
+        background-color: $medium-gray;
         color: white;
         display: flex;
         margin-top: 5px;
@@ -607,8 +603,8 @@ $dark-grey: #656565;
         transition: all 0.4s;
         font-weight: 400;
         opacity: 1;
-        color: white;
-        background-color: black;
+        color: $white;
+        background-color: $black;
     }
 
     .ribbon-toggle {
@@ -616,10 +612,10 @@ $dark-grey: #656565;
         font-size: 10.5;
         font-weight: 200;
         height: 20;
-        background-color: $light-background;
+        background-color: $white;
         border: solid 1px rgba(0, 0, 0, 0.5);
         display: flex;
-        color: black;
+        color: $black;
         margin-top: 5px;
         margin-bottom: 5px;
         border-radius: 5px;
@@ -660,13 +656,13 @@ $dark-grey: #656565;
         position: relative;
         font-size: 13;
         padding-bottom: 10px;
-        border-bottom: solid 1px $dark-grey;
+        border-bottom: solid 1px $dark-gray;
 
         .presBox-dropdown:hover {
-            border: solid 1px $dark-blue;
+            border: solid 1px $medium-blue;
 
             .presBox-dropdownIcon {
-                color: $dark-blue;
+                color: $medium-blue;
             }
         }
 
@@ -675,12 +671,12 @@ $dark-grey: #656565;
             display: grid;
             grid-template-columns: auto 20%;
             position: relative;
-            border: solid 1px black;
-            background-color: $light-background;
+            border: solid 1px $black;
+            background-color: $light-gray;
             border-radius: 5px;
             font-size: 10;
             height: 25;
-            color: black;
+            color: $black;
             padding-left: 5px;
             align-items: center;
             margin-top: 5px;
@@ -744,7 +740,7 @@ $dark-grey: #656565;
     height: 100px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border: solid 1px black;
+    border: solid 1px $black;
     // overflow: auto; 
 
     ::-webkit-scrollbar {
@@ -794,7 +790,7 @@ $dark-grey: #656565;
     cursor: pointer;
     position: relative;
     text-align: center;
-    border-left: solid 1px darkgrey;
+    border-left: solid 1px $medium-gray;
     width: 20%;
     height: 100%;
     display: flex;
@@ -825,7 +821,7 @@ $dark-grey: #656565;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
     z-index: 200;
     background-color: white;
-    color: black;
+    color: $black;
     position: absolute;
     overflow: hidden;
 }
@@ -841,12 +837,12 @@ $dark-grey: #656565;
     align-items: center;
     justify-content: center;
     transform: translate(0px, -1px);
-    background-color: $light-background;
+    background-color: $white;
     width: 40px;
     height: 15px;
     align-self: center;
     justify-self: center;
-    border: solid 1px black;
+    border: solid 1px $black;
     border-top: 0px;
     border-bottom-right-radius: 7px;
     border-bottom-left-radius: 7px;
@@ -855,15 +851,15 @@ $dark-grey: #656565;
 .layout-container {
     padding: 5px;
     display: grid;
-    background-color: $light-background;
+    background-color: $white;
     grid-template-columns: repeat(auto-fit, minmax(90px, 100px));
     width: 100%;
-    border: solid 1px black;
+    border: solid 1px $black;
     min-width: 100px;
     overflow: hidden;
 
     .layout:hover {
-        border: solid 2px #5c9edd;
+        border: solid 2px $medium-blue;
     }
 
     .layout {
@@ -878,7 +874,7 @@ $dark-grey: #656565;
         width: 90px;
         overflow: hidden;
         background-color: white;
-        border: solid darkgrey 1px;
+        border: solid $medium-gray 1px;
         display: grid;
         grid-template-rows: auto;
         align-items: center;
@@ -893,7 +889,7 @@ $dark-grey: #656565;
             height: 13;
             font-size: 12;
             display: flex;
-            background-color: #f1efec;
+            background-color: #white;
         }
 
         .subtitle {
@@ -906,7 +902,7 @@ $dark-grey: #656565;
             height: 13;
             font-size: 9;
             display: flex;
-            background-color: #f1efec;
+            background-color: $white;
         }
 
         .content {
@@ -919,7 +915,7 @@ $dark-grey: #656565;
             height: 13;
             font-size: 10;
             display: flex;
-            background-color: #f1efec;
+            background-color: $white;
             height: 33;
             text-align: left;
             font-size: 8px;
@@ -960,8 +956,8 @@ $dark-grey: #656565;
 
 
     select {
-        background: #323232;
-        color: white;
+        background: $dark-gray;
+        color: $white;
     }
 
     .presBox-button {
@@ -975,8 +971,8 @@ $dark-grey: #656565;
         text-align: center;
         letter-spacing: normal;
         width: inherit;
-        background: #323232;
-        color: white;
+        background: $dark-gray;
+        color: $white;
     }
 
     .presBox-button.active {
@@ -984,7 +980,7 @@ $dark-grey: #656565;
     }
 
     .presBox-button.active:hover {
-        background-color: #233163;
+        background-color: $medium-blue;
     }
 
     .presBox-button.edit {
@@ -1053,8 +1049,8 @@ $dark-grey: #656565;
             font-size: 100;
             display: flex;
             align-items: center;
-            background: #323232;
-            color: white;
+            background: $dark-gray;
+            color: $white;
         }
 
         .presBox-viewPicker {
@@ -1086,7 +1082,7 @@ $dark-grey: #656565;
     top: 10;
     opacity: 0.1;
     transition: all 0.4s;
-    color: white;
+    color: $white;
 }
 
 .miniPres:hover {
@@ -1094,8 +1090,8 @@ $dark-grey: #656565;
 }
 
 .presPanelOverlay {
-    background-color: #323232;
-    color: white;
+    background-color: $dark-gray;
+    color: $white;
     border-radius: 5px;
     grid-template-rows: 100%;
     height: 25;
@@ -1129,7 +1125,7 @@ $dark-grey: #656565;
     .presPanel-divider {
         width: 0.5px;
         height: 80%;
-        border-right: solid 1px #5a5a5a;
+        border-right: solid 1px $medium-gray;
     }
 
     .presPanel-button-frame {
@@ -1161,12 +1157,12 @@ $dark-grey: #656565;
     }
 
     .presPanel-button:hover {
-        background-color: #5a5a5a;
+        background-color: $medium-gray;
         transform: scale(1.2);
     }
 
     .presPanel-button-text:hover {
-        background-color: #5a5a5a;
+        background-color: $medium-gray;
     }