@silexlabs/silex 3.0.0-alpha.149 → 3.0.0-alpha.151

package/dist/client/css/admin.css

@@ -1481,10 +1481,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 /* Color Helpers */
 /* Canvas */
 /* Components / Inputs */
-/* #d5d5d5 */
 /* b1b1b1 */
 /* #252525 */
-/* 303030 */
 /* Class manager */
 /* File uploader */
 /* Commands */
@@ -1504,70 +1502,70 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-one-bg {
-  background-color: #444;
+  background-color: var(--gjs-primary-color);
 }
 .gjs-one-color {
-  color: #444;
+  color: var(--gjs-primary-color);
 }
 .gjs-one-color-h:hover {
-  color: #444;
+  color: var(--gjs-primary-color);
 }
 .gjs-two-bg {
-  background-color: #ddd;
+  background-color: var(--gjs-secondary-color);
 }
 .gjs-two-color {
-  color: #ddd;
+  color: var(--gjs-secondary-color);
 }
 .gjs-two-color-h:hover {
-  color: #ddd;
+  color: var(--gjs-secondary-color);
 }
 .gjs-three-bg {
-  background-color: #804f7b;
+  background-color: var(--gjs-tertiary-color);
 }
 .gjs-three-color {
-  color: #804f7b;
+  color: var(--gjs-tertiary-color);
 }
 .gjs-three-color-h:hover {
-  color: #804f7b;
+  color: var(--gjs-tertiary-color);
 }
 .gjs-four-bg {
-  background-color: #d278c9;
+  background-color: var(--gjs-quaternary-color);
 }
 .gjs-four-color {
-  color: #d278c9;
+  color: var(--gjs-quaternary-color);
 }
 .gjs-four-color-h:hover {
-  color: #d278c9;
+  color: var(--gjs-quaternary-color);
 }
 .gjs-danger-bg {
-  background-color: #dd3636;
+  background-color: var(--gjs-color-red);
 }
 .gjs-danger-color {
-  color: #dd3636;
+  color: var(--gjs-color-red);
 }
 .gjs-danger-color-h:hover {
-  color: #dd3636;
+  color: var(--gjs-color-red);
 }
 
 .gjs-bg-main, .gjs-sm-colorp-c, .gjs-off-prv {
-  background-color: #444;
+  background-color: var(--gjs-main-color);
 }
 
 .gjs-color-main, .gjs-sm-stack #gjs-sm-add, .gjs-off-prv {
-  color: #ddd;
-  fill: #ddd;
+  color: var(--gjs-font-color);
+  fill: var(--gjs-font-color);
 }
 .gjs-color-active {
-  color: #f8f8f8;
-  fill: #f8f8f8;
+  color: var(--gjs-font-color-active);
+  fill: var(--gjs-font-color-active);
 }
 .gjs-color-warn {
-  color: #ffca6f;
-  fill: #ffca6f;
+  color: var(--gjs-color-warn);
+  fill: var(--gjs-color-warn);
 }
 .gjs-color-hl {
-  color: #71b7f1;
-  fill: #71b7f1;
+  color: var(--gjs-color-highlight);
+  fill: var(--gjs-color-highlight);
 }
 
 .gjs-invis-invis, .gjs-clm-tags #gjs-clm-new,
@@ -1618,7 +1616,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-drag-helper {
-  background-color: #3b97e3 !important;
+  background-color: var(--gjs-color-blue) !important;
   pointer-events: none !important;
   position: absolute !important;
   z-index: 10 !important;
@@ -1648,7 +1646,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-editor-cont ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--gjs-secondary-dark-color);
 }
 
 .gjs-editor-cont ::-webkit-scrollbar-thumb {
@@ -1660,11 +1658,47 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /********************* MAIN ************************/
+:root {
+  --gjs-main-color: #444;
+  --gjs-primary-color: #444;
+  --gjs-secondary-color: #ddd;
+  --gjs-tertiary-color: #804f7b;
+  --gjs-quaternary-color: #d278c9;
+  --gjs-font-color: #ddd;
+  --gjs-font-color-active: #f8f8f8;
+  --gjs-main-dark-color: rgba(0, 0, 0, 0.2);
+  --gjs-secondary-dark-color: rgba(0, 0, 0, 0.1);
+  --gjs-main-light-color: rgba(255, 255, 255, 0.1);
+  --gjs-secondary-light-color: rgba(255, 255, 255, 0.7);
+  --gjs-soft-light-color: rgba(255, 255, 255, 0.015);
+  --gjs-color-blue: #3b97e3;
+  --gjs-color-red: #dd3636;
+  --gjs-color-yellow: #ffca6f;
+  --gjs-color-green: #62c462;
+  --gjs-left-width: 15%;
+  --gjs-color-highlight: #71b7f1;
+  --gjs-color-warn: #ffca6f;
+  --gjs-handle-margin: -5px;
+  --gjs-light-border: rgba(255, 255, 255, 0.05);
+  --gjs-arrow-color: rgba(255, 255, 255, 0.7);
+  --gjs-dark-text-shadow: rgba(0, 0, 0, 0.2);
+  --gjs-color-input-padding: 22px;
+  --gjs-input-padding: 5px;
+  --gjs-padding-elem-classmanager: 5px 6px;
+  --gjs-upload-padding: 150px 10px;
+  --gjs-animation-duration: 0.2s;
+  --gjs-main-font: Helvetica, sans-serif;
+  --gjs-font-size: 0.75rem;
+  --gjs-placeholder-background-color: var(--gjs-color-green);
+  --gjs-canvas-top: 40px;
+  --gjs-flex-item-gap: 5px;
+}
+
 .clear {
   clear: both;
 }
 
-.no-select, .gjs-clm-tags #gjs-clm-close, .gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector-title, .gjs-com-no-select, .gjs-com-no-select img {
+.no-select, .gjs-clm-tags #gjs-clm-close, .gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector-title, .gjs-trait-category .gjs-title, .gjs-com-no-select, .gjs-com-no-select img {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
@@ -1687,8 +1721,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   filter: alpha(opacity=50);
 }
 .gjs-editor {
-  font-family: Helvetica, sans-serif;
-  font-size: 0.75rem;
+  font-family: var(--gjs-main-font);
+  font-size: var(--gjs-font-size);
   position: relative;
   box-sizing: border-box;
   height: 100%;
@@ -1702,7 +1736,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-traits-label {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--gjs-main-dark-color);
   font-weight: lighter;
   margin-bottom: 5px;
   padding: 10px;
@@ -1715,6 +1749,20 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-field-wrp {
   flex-grow: 1;
 }
+.gjs-traits-c, .gjs-traits-cs {
+  display: flex;
+  flex-direction: column;
+}
+.gjs-trait-categories {
+  display: flex;
+  flex-direction: column;
+}
+.gjs-trait-category {
+  width: 100%;
+}
+.gjs-trait-category .gjs-caret-icon {
+  margin-right: 5px;
+}
 
 .gjs-trt-header {
   font-weight: lighter;
@@ -1728,9 +1776,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   font-weight: lighter;
   align-items: center;
   text-align: left;
+  gap: 5px;
 }
 .gjs-trt-traits {
-  font-size: 0.75rem;
+  font-size: var(--gjs-font-size);
 }
 .gjs-trt-trait .gjs-label {
   text-align: left;
@@ -1890,14 +1939,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-cv-canvas {
   box-sizing: border-box;
-  width: 85%;
-  height: calc(100% - 40px);
+  width: calc(100% - var(--gjs-left-width));
+  height: calc(100% - var(--gjs-canvas-top));
   bottom: 0;
   overflow: hidden;
   z-index: 1;
   position: absolute;
   left: 0;
-  top: 40px;
+  top: var(--gjs-canvas-top);
+  /* Always place the tools above the highlighter */
   /* This simulate body behaviour */
 }
 .gjs-cv-canvas-bg {
@@ -1936,17 +1986,17 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-cv-canvas .gjs-highlighter,
 .gjs-cv-canvas .gjs-highlighter-sel {
   position: absolute;
-  outline: 1px solid #3b97e3;
+  outline: 1px solid var(--gjs-color-blue);
   outline-offset: -1px;
   pointer-events: none;
   width: 100%;
   height: 100%;
 }
 .gjs-cv-canvas .gjs-highlighter-warning {
-  outline: 3px solid #ffca6f;
+  outline: 3px solid var(--gjs-color-yellow);
 }
 .gjs-cv-canvas .gjs-highlighter-sel {
-  outline: 2px solid #3b97e3;
+  outline: 2px solid var(--gjs-color-blue);
   outline-offset: -2px;
 }
 .gjs-cv-canvas #gjs-tools, .gjs-cv-canvas .gjs-tools {
@@ -1958,6 +2008,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   outline: none;
   z-index: 1;
 }
+.gjs-cv-canvas #gjs-tools {
+  z-index: 2;
+}
 
 .gjs-cv-canvas * {
   box-sizing: border-box;
@@ -1980,7 +2033,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-toolbar {
   position: absolute;
-  background-color: #3b97e3;
+  background-color: var(--gjs-color-blue);
   white-space: nowrap;
   color: white;
   z-index: 10;
@@ -2032,11 +2085,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-resizer-h {
   pointer-events: all;
   position: absolute;
-  border: 3px solid #3b97e3;
+  border: 3px solid var(--gjs-color-blue);
   width: 10px;
   height: 10px;
   background-color: #fff;
-  margin: -5px;
+  margin: var(--gjs-handle-margin);
 }
 
 .gjs-resizer-h-tl {
@@ -2053,7 +2106,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-resizer-h-tc {
   top: 0;
-  margin: -5px auto;
+  margin: var(--gjs-handle-margin) auto;
   left: 0;
   right: 0;
   cursor: ns-resize;
@@ -2061,14 +2114,14 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-resizer-h-cl {
   left: 0;
-  margin: auto -5px;
+  margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
   cursor: ew-resize;
 }
 
 .gjs-resizer-h-cr {
-  margin: auto -5px;
+  margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
   right: 0;
@@ -2083,7 +2136,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-resizer-h-bc {
   bottom: 0;
-  margin: -5px auto;
+  margin: var(--gjs-handle-margin) auto;
   left: 0;
   right: 0;
   cursor: ns-resize;
@@ -2178,7 +2231,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-com-badge, .gjs-badge {
   pointer-events: none;
-  background-color: #3b97e3;
+  background-color: var(--gjs-color-blue);
   color: #fff;
   padding: 2px 5px;
   position: absolute;
@@ -2189,7 +2242,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-badge-warning {
-  background-color: #ffca6f;
+  background-color: var(--gjs-color-yellow);
 }
 
 .gjs-placeholder,
@@ -2206,13 +2259,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   border-style: solid !important;
   outline: none;
   box-sizing: border-box;
-  transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
+  transition: top var(--gjs-animation-duration), left var(--gjs-animation-duration), width var(--gjs-animation-duration), height var(--gjs-animation-duration);
 }
 
 .gjs-placeholder.horizontal,
 .gjs-com-placeholder.horizontal,
 .gjs-placeholder.horizontal {
-  border-color: transparent #62c462;
+  border-color: transparent var(--gjs-placeholder-background-color);
   border-width: 3px 5px;
   margin: -3px 0 0;
 }
@@ -2220,7 +2273,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-placeholder.vertical,
 .gjs-com-placeholder.vertical,
 .gjs-placeholder.vertical {
-  border-color: #62c462 transparent;
+  border-color: var(--gjs-placeholder-background-color) transparent;
   border-width: 5px 3px;
   margin: 0 0 0 -3px;
 }
@@ -2228,7 +2281,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-placeholder-int,
 .gjs-com-placeholder-int,
 .gjs-placeholder-int {
-  background-color: #62c462;
+  background-color: var(--gjs-placeholder-background-color);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   height: 100%;
   width: 100%;
@@ -2252,28 +2305,28 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 25px;
 }
 .gjs-pn-commands {
-  width: 85%;
+  width: calc(100% - var(--gjs-left-width));
   left: 0;
   top: 0;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px var(--gjs-main-dark-color);
 }
 .gjs-pn-options {
-  right: 15%;
+  right: var(--gjs-left-width);
   top: 0;
 }
 .gjs-pn-views {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 2px solid var(--gjs-main-dark-color);
   right: 0;
-  width: 15%;
+  width: var(--gjs-left-width);
   z-index: 4;
 }
 .gjs-pn-views-container {
   height: 100%;
   padding: 42px 0 0;
   right: 0;
-  width: 15%;
+  width: var(--gjs-left-width);
   overflow: auto;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px var(--gjs-main-dark-color);
 }
 .gjs-pn-buttons {
   align-items: center;
@@ -2319,7 +2372,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .gjs-select:-moz-focusring, .gjs-select select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
+  text-shadow: 0 0 0 var(--gjs-secondary-light-color);
 }
 .gjs-input:focus, .gjs-button:focus, .gjs-btn-prim:focus, .gjs-select:focus, .gjs-select select:focus {
   outline: none;
@@ -2336,7 +2389,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   box-sizing: border-box;
   width: 100%;
   position: relative;
-  padding: 5px;
+  padding: var(--gjs-input-padding);
   z-index: 1;
 }
 .gjs-field input:focus,
@@ -2364,12 +2417,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-sm-select option,
 .gjs-fields option,
 .gjs-sm-unit option {
-  background-color: #444;
-  color: #ddd;
+  background-color: var(--gjs-main-color);
+  color: var(--gjs-font-color);
 }
 
 .gjs-field {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--gjs-main-dark-color);
   border: none;
   box-shadow: none;
   border-radius: 2px;
@@ -2392,8 +2445,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   bottom: 0;
   top: 0;
   margin: auto;
-  right: 5px;
-  border-top: 4px solid rgba(255, 255, 255, 0.7);
+  right: var(--gjs-input-padding);
+  border-top: 4px solid var(--gjs-arrow-color);
   position: absolute;
   height: 0;
   width: 0;
@@ -2409,7 +2462,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 9px;
   z-index: 10;
   bottom: 0;
-  right: 3px;
+  right: calc(var(--gjs-input-padding) - 2px);
   top: 0;
 }
 .gjs-field-color, .gjs-field-radio {
@@ -2417,19 +2470,19 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-field-color input {
-  padding-right: 22px;
+  padding-right: var(--gjs-color-input-padding);
   box-sizing: border-box;
 }
 
 .gjs-field-colorp {
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid var(--gjs-main-dark-color);
   box-sizing: border-box;
   height: 100%;
   padding: 2px;
   position: absolute;
   right: 0;
   top: 0;
-  width: 22px;
+  width: var(--gjs-color-input-padding);
   z-index: 10;
 }
 .gjs-field-colorp .gjs-checker-bg, .gjs-field-colorp .gjs-field-colorp-c {
@@ -2445,11 +2498,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-field-color-picker {
-  background-color: #ddd;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 100%;
   width: 100%;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px var(--gjs-main-dark-color);
   border-radius: 1px;
   position: absolute;
   top: 0;
@@ -2475,13 +2528,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-radio-item {
   flex: 1 1 auto;
   text-align: center;
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid var(--gjs-dark-text-shadow);
 }
 .gjs-radio-item:first-child {
   border: none;
 }
 .gjs-radio-item:hover {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--gjs-main-dark-color);
 }
 .gjs-radio-item input {
   display: none;
@@ -2496,7 +2549,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-radio-item-label {
   cursor: pointer;
   display: block;
-  padding: 5px;
+  padding: var(--gjs-input-padding);
 }
 
 .gjs-field-units {
@@ -2512,7 +2565,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   right: 10px;
   top: 3px;
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--gjs-arrow-color);
   cursor: pointer;
 }
 
@@ -2527,13 +2580,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 0;
   border-left: 3px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid rgba(255, 255, 255, 0.7);
+  border-top: 4px solid var(--gjs-arrow-color);
   bottom: 4px;
   cursor: pointer;
 }
 
 .gjs-field-arrow-u {
-  border-bottom: 4px solid rgba(255, 255, 255, 0.7);
+  border-bottom: 4px solid var(--gjs-arrow-color);
   border-top: none;
   top: 4px;
 }
@@ -2561,41 +2614,41 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   margin-top: -4px;
   height: 10px;
   width: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--gjs-main-dark-color);
   border-radius: 100%;
-  background-color: #ddd;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
 }
 .gjs-field-range input::-moz-range-thumb {
   height: 10px;
   width: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--gjs-main-dark-color);
   border-radius: 100%;
-  background-color: #ddd;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
 }
 .gjs-field-range input::-ms-thumb {
   height: 10px;
   width: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--gjs-main-dark-color);
   border-radius: 100%;
-  background-color: #ddd;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
 }
 .gjs-field-range input::-moz-range-track {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--gjs-main-dark-color);
   border-radius: 1px;
   margin-top: 3px;
   height: 3px;
 }
 .gjs-field-range input::-webkit-slider-runnable-track {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--gjs-main-dark-color);
   border-radius: 1px;
   margin-top: 3px;
   height: 3px;
 }
 .gjs-field-range input::-ms-track {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--gjs-main-dark-color);
   border-radius: 1px;
   margin-top: 3px;
   height: 3px;
@@ -2603,15 +2656,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .gjs-btn-prim {
   color: inherit;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--gjs-main-light-color);
   border-radius: 2px;
   padding: 3px 6px;
-  padding: 5px;
+  padding: var(--gjs-input-padding);
   cursor: pointer;
   border: none;
 }
 .gjs-btn-prim:active {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--gjs-main-light-color);
 }
 .gjs-btn--full {
   width: 100%;
@@ -2632,7 +2685,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-add-trasp {
   background: none;
   border: none;
-  color: #ddd;
+  color: var(--gjs-font-color);
   cursor: pointer;
   font-size: 1em;
   border-radius: 2px;
@@ -2666,13 +2719,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /********* General **********/
-.gjs-category-open, .gjs-block-category.gjs-open, .gjs-sm-sector.gjs-sm-open {
+.gjs-category-open, .gjs-block-category.gjs-open, .gjs-sm-sector.gjs-sm-open, .gjs-trait-category.gjs-open {
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
 }
 
-.gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector-title {
+.gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector-title, .gjs-trait-category .gjs-title {
   font-weight: lighter;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--gjs-secondary-dark-color);
   letter-spacing: 1px;
   padding: 9px 10px 9px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
@@ -2714,7 +2767,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   transform: none;
 }
 .gjs-sm-properties {
-  font-size: 0.75rem;
+  font-size: var(--gjs-font-size);
   padding: 10px 5px;
   display: flex;
   flex-wrap: wrap;
@@ -2772,7 +2825,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .gjs-sm-field select:-moz-focusring, .gjs-clm-select select:-moz-focusring, .gjs-clm-field select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
+  text-shadow: 0 0 0 var(--gjs-secondary-light-color);
 }
 .gjs-sm-field input:focus, .gjs-clm-select input:focus, .gjs-clm-field input:focus,
 .gjs-sm-field select:focus,
@@ -2785,7 +2838,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   right: 10px;
   top: 3px;
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--gjs-secondary-light-color);
   cursor: pointer;
 }
 .gjs-sm-field .gjs-clm-sel-arrow, .gjs-clm-select .gjs-clm-sel-arrow, .gjs-clm-field .gjs-clm-sel-arrow,
@@ -2823,7 +2876,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   cursor: pointer;
 }
 .gjs-sm-field .gjs-sm-u-arrow, .gjs-clm-select .gjs-sm-u-arrow, .gjs-clm-field .gjs-sm-u-arrow {
-  border-bottom: 4px solid rgba(255, 255, 255, 0.7);
+  border-bottom: 4px solid var(--gjs-secondary-light-color);
   top: 4px;
 }
 .gjs-sm-field .gjs-clm-d-s-arrow, .gjs-clm-select .gjs-clm-d-s-arrow, .gjs-clm-field .gjs-clm-d-s-arrow,
@@ -2833,7 +2886,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-sm-field .gjs-sm-d-s-arrow,
 .gjs-clm-select .gjs-sm-d-s-arrow,
 .gjs-clm-field .gjs-sm-d-s-arrow {
-  border-top: 4px solid rgba(255, 255, 255, 0.7);
+  border-top: 4px solid var(--gjs-secondary-light-color);
   bottom: 4px;
 }
 .gjs-sm-field .gjs-clm-d-s-arrow, .gjs-clm-select .gjs-clm-d-s-arrow, .gjs-clm-field .gjs-clm-d-s-arrow,
@@ -2843,10 +2896,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   bottom: 7px;
 }
 .gjs-sm-field.gjs-sm-color, .gjs-sm-color.gjs-clm-field, .gjs-sm-field.gjs-sm-input, .gjs-sm-input.gjs-clm-field, .gjs-sm-field.gjs-sm-integer, .gjs-sm-integer.gjs-clm-field, .gjs-sm-field.gjs-sm-list, .gjs-sm-list.gjs-clm-field, .gjs-sm-field.gjs-sm-select, .gjs-clm-select, .gjs-sm-select.gjs-clm-field {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--gjs-main-dark-color);
   border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.7);
+  box-shadow: 1px 1px 0 var(--gjs-main-light-color);
+  color: var(--gjs-secondary-light-color);
   border-radius: 2px;
   box-sizing: border-box;
   padding: 0 5px;
@@ -2864,7 +2917,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   padding: 3px 0;
 }
 .gjs-sm-field.gjs-sm-composite, .gjs-sm-composite.gjs-clm-select, .gjs-sm-composite.gjs-clm-field {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--gjs-secondary-dark-color);
   border: 1px solid rgba(0, 0, 0, 0.25);
 }
 .gjs-sm-field.gjs-sm-list, .gjs-sm-list.gjs-clm-select, .gjs-sm-list.gjs-clm-field {
@@ -2898,13 +2951,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 /* ------------------END Field-------------------- */
 .gjs-sm-list .gjs-sm-el {
   float: left;
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: 1px solid var(--gjs-main-dark-color);
 }
 .gjs-sm-list .gjs-sm-el:first-child {
   border: none;
 }
 .gjs-sm-list .gjs-sm-el:hover {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--gjs-main-dark-color);
 }
 
 /* ------------------Property-------------------- */
@@ -2923,18 +2976,18 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 100%;
 }
 .gjs-sm-property .gjs-sm-btn {
-  background-color: rgba(33, 33, 33, 0.2);
+  background-color: color-mix(in srgb, var(--gjs-main-dark-color), white 13%);
   border-radius: 2px;
-  box-shadow: 1px 1px 0 rgba(5, 5, 5, 0.2), 1px 1px 0 rgba(43, 43, 43, 0.2) inset;
+  box-shadow: 1px 1px 0 color-mix(in srgb, var(--gjs-main-dark-color), white 2%), 1px 1px 0 color-mix(in srgb, var(--gjs-main-dark-color), white 17%) inset;
   padding: 5px;
   position: relative;
   text-align: center;
   height: auto;
   width: 100%;
   cursor: pointer;
-  color: #ddd;
+  color: var(--gjs-font-color);
   box-sizing: border-box;
-  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
+  text-shadow: -1px -1px 0 var(--gjs-main-dark-color);
   border: none;
   opacity: 0.85;
   filter: alpha(opacity=85);
@@ -2953,12 +3006,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-sm-preview-file {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--gjs-light-border);
   border-radius: 2px;
   margin-top: 5px;
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(252, 252, 252, 0.05);
+  border: 1px solid color-mix(in srgb, var(--gjs-light-border), black 1%);
   padding: 3px 20px;
 }
 .gjs-sm-preview-file-cnt {
@@ -3074,12 +3127,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-sm-color-picker {
-  background-color: #ddd;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 16px;
   width: 100%;
   margin-top: -16px;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px var(--gjs-main-dark-color);
   border-radius: 1px;
 }
 
@@ -3195,7 +3248,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-selected-parent {
-  border: 1px solid #ffca6f;
+  border: 1px solid var(--gjs-color-yellow);
 }
 .gjs-opac50 {
   opacity: 0.5;
@@ -3205,29 +3258,40 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   font-weight: lighter;
   text-align: left;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.1);
-  font-size: 0.75rem;
+  font-size: var(--gjs-font-size);
   display: grid;
 }
+.gjs-layer-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--gjs-main-dark-color);
+  background-color: var(--gjs-secondary-dark-color);
+  gap: var(--gjs-flex-item-gap);
+  cursor: pointer;
+}
+.gjs-layer-item-left, .gjs-layer-item-right {
+  display: flex;
+  align-items: center;
+  gap: var(--gjs-flex-item-gap);
+}
+.gjs-layer-item-left {
+  width: 100%;
+}
 .gjs-layer-hidden {
   opacity: 0.55;
   filter: alpha(opacity=55);
 }
-.gjs-layer-count {
-  position: absolute;
-  right: 27px;
-  top: 9px;
-}
 .gjs-layer-vis {
-  left: 0;
-  top: 0;
-  padding: 7px 5px 7px 10px;
-  position: absolute;
   box-sizing: content-box;
   cursor: pointer;
-  width: 13px;
   z-index: 1;
 }
+.gjs-layer-vis-on, .gjs-layer-vis-off {
+  display: flex;
+  width: 13px;
+}
 .gjs-layer-vis-off {
   display: none;
 }
@@ -3235,17 +3299,14 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   display: none;
 }
 .gjs-layer-vis.gjs-layer-off .gjs-layer-vis-off {
-  display: block;
+  display: flex;
 }
 .gjs-layer-caret {
   width: 15px;
-  padding: 2px;
   cursor: pointer;
-  position: absolute;
   box-sizing: content-box;
-  left: -15px;
-  top: 0;
   transform: rotate(90deg);
+  display: flex;
   opacity: 0.7;
   filter: alpha(opacity=70);
 }
@@ -3253,18 +3314,23 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   opacity: 1;
   filter: alpha(opacity=100);
 }
-.gjs-layer-caret.gjs-layer-open {
+.gjs-layer.open > .gjs-layer-item .gjs-layer-caret {
   transform: rotate(180deg);
 }
 .gjs-layer-title {
-  padding: 3px 10px 5px 30px;
+  padding: 0;
   display: flex;
   align-items: center;
+  background-color: transparent !important;
+  border-bottom: none;
 }
 .gjs-layer-title-inn {
   align-items: center;
   position: relative;
   display: flex;
+  gap: var(--gjs-flex-item-gap);
+}
+.gjs-layer-title-c {
   width: 100%;
 }
 .gjs-layer__icon {
@@ -3278,13 +3344,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   fill: currentColor;
 }
 .gjs-layer-name {
-  padding: 5px 0;
   display: inline-block;
   box-sizing: content-box;
   overflow: hidden;
   white-space: nowrap;
-  margin: 0 30px 0 5px;
   max-width: 170px;
+  height: auto;
 }
 .gjs-layer-name--no-edit {
   text-overflow: ellipsis;
@@ -3296,22 +3361,19 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   display: block;
 }
 .gjs-layer-no-chld > .gjs-layer-title-inn > .gjs-layer-caret {
-  display: none;
+  visibility: hidden;
 }
 .gjs-layer-move {
-  padding: 9px 7px;
-  position: absolute;
+  display: flex;
   width: 13px;
   box-sizing: content-box;
   cursor: move;
-  right: 0;
-  top: 0;
 }
-.gjs-layer.gjs-hovered .gjs-layer-title {
-  background-color: rgba(255, 255, 255, 0.015);
+.gjs-layer.gjs-hovered .gjs-layer-item {
+  background-color: var(--gjs-soft-light-color);
 }
-.gjs-layer.gjs-selected .gjs-layer-title {
-  background-color: rgba(255, 255, 255, 0.1);
+.gjs-layer.gjs-selected .gjs-layer-item {
+  background-color: var(--gjs-main-light-color);
 }
 
 .gjs-layers {
@@ -3327,7 +3389,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   padding: 1px;
 }
 .gjs-layers #gjs-placeholder #gjs-plh-int.gjs-insert {
-  background-color: #62c462;
+  background-color: var(--gjs-color-green);
 }
 
 #gjs-clm-add-tag,
@@ -3389,7 +3451,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-clm-tags {
-  font-size: 0.75rem;
+  font-size: var(--gjs-font-size);
   padding: 10px 5px;
 }
 .gjs-clm-tags #gjs-clm-sel {
@@ -3414,8 +3476,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   overflow: hidden;
 }
 .gjs-clm-tags #gjs-clm-new {
-  color: #ddd;
-  padding: 5px 6px;
+  color: var(--gjs-font-color);
+  padding: var(--gjs-padding-elem-classmanager);
   display: none;
 }
 .gjs-clm-tags #gjs-clm-close {
@@ -3445,7 +3507,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-mdl-container {
-  font-family: Helvetica, sans-serif;
+  font-family: var(--gjs-main-font);
   overflow-y: auto;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.5);
@@ -3484,7 +3546,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .gjs-mdl-header {
   position: relative;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--gjs-main-dark-color);
   padding: 15px 15px 7px;
 }
 
@@ -3540,7 +3602,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   position: relative;
   height: 70px;
   width: 30%;
-  background-color: #444;
+  background-color: var(--gjs-main-color);
   border-radius: 2px;
   float: left;
   overflow: hidden;
@@ -3591,7 +3653,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-am-asset {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid color-mix(in srgb, var(--gjs-main-dark-color), black 3%);
   padding: 5px;
   cursor: pointer;
   position: relative;
@@ -3603,11 +3665,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-am-highlight {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--gjs-main-light-color);
 }
 
 .gjs-am-assets-cont {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--gjs-secondary-dark-color);
   border-radius: 3px;
   box-sizing: border-box;
   padding: 10px;
@@ -3623,7 +3685,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   float: left;
 }
 .gjs-am-file-uploader > form {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--gjs-secondary-dark-color);
   border: 2px dashed;
   border-radius: 3px;
   position: relative;
@@ -3631,8 +3693,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   margin-bottom: 15px;
 }
 .gjs-am-file-uploader > form.gjs-am-hover {
-  border: 2px solid #62c462;
-  color: #75cb75; /*#7ee07e*/
+  border: 2px solid var(--gjs-color-green);
+  color: color-mix(in srgb, var(--gjs-color-green), white 5%);
 }
 .gjs-am-file-uploader > form.gjs-am-disabled {
   border-color: red;
@@ -3640,13 +3702,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .gjs-am-file-uploader > form #gjs-am-uploadFile {
   opacity: 0;
   filter: alpha(opacity=0);
-  padding: 150px 10px;
+  padding: var(--gjs-upload-padding);
   width: 100%;
   box-sizing: border-box;
 }
 .gjs-am-file-uploader #gjs-am-title {
   position: absolute;
-  padding: 150px 10px;
+  padding: var(--gjs-upload-padding);
   width: 100%;
 }
 
@@ -3665,7 +3727,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .gjs-cm-editor#gjs-cm-htmlmixed {
   padding-right: 10px;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: 1px solid var(--gjs-main-dark-color);
 }
 .gjs-cm-editor#gjs-cm-htmlmixed #gjs-cm-title {
   color: #a97d44;
@@ -3677,7 +3739,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   color: #ddca7e;
 }
 .gjs-cm-editor #gjs-cm-title {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--gjs-main-dark-color);
   font-size: 12px;
   padding: 5px 10px 3px;
   text-align: right;
@@ -3689,7 +3751,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   z-index: 10;
 }
 .gjs-rte-toolbar-ui {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--gjs-main-dark-color);
   border-radius: 3px;
 }
 .gjs-rte-actionbar {
@@ -3701,7 +3763,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   justify-content: center;
   padding: 5px;
   width: 25px;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: 1px solid var(--gjs-main-dark-color);
   text-align: center;
   cursor: pointer;
   outline: none;
@@ -3710,13 +3772,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   border-right: none;
 }
 .gjs-rte-action:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--gjs-main-light-color);
 }
 .gjs-rte-active {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--gjs-main-light-color);
 }
 .gjs-rte-disabled {
-  color: rgba(255, 255, 255, 0.1);
+  color: var(--gjs-main-light-color);
   cursor: not-allowed;
 }
 .gjs-rte-disabled:hover {
@@ -3724,33 +3786,34 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /********* Spectrum **********/
-.gjs-editor-cont .sp-hue, .gjs-editor-cont .sp-slider {
+.gjs-editor-sp {
+  border: 1px solid var(--gjs-main-dark-color);
+  box-shadow: 0 0 7px var(--gjs-main-dark-color);
+  border-radius: 3px;
+}
+
+.gjs-editor-sp .sp-hue, .gjs-editor-sp .sp-slider {
   cursor: row-resize;
 }
-.gjs-editor-cont .sp-color, .gjs-editor-cont .sp-dragger {
+.gjs-editor-sp .sp-color, .gjs-editor-sp .sp-dragger {
   cursor: crosshair;
 }
-.gjs-editor-cont .sp-alpha-inner, .gjs-editor-cont .sp-alpha-handle {
+.gjs-editor-sp .sp-alpha-inner, .gjs-editor-sp .sp-alpha-handle {
   cursor: col-resize;
 }
-.gjs-editor-cont .sp-hue {
+.gjs-editor-sp .sp-hue {
   left: 90%;
 }
-.gjs-editor-cont .sp-color {
+.gjs-editor-sp .sp-color {
   right: 15%;
 }
-.gjs-editor-cont .sp-container {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-.gjs-editor-cont .sp-picker-container {
+.gjs-editor-sp .sp-picker-container {
   border: none;
 }
-.gjs-editor-cont .colpick_dark .colpick_color {
-  outline: 1px solid rgba(0, 0, 0, 0.2);
+.gjs-editor-sp .colpick_dark .colpick_color {
+  outline: 1px solid var(--gjs-main-dark-color);
 }
-.gjs-editor-cont .sp-cancel, .gjs-editor-cont .sp-cancel:hover {
+.gjs-editor-sp .sp-cancel, .gjs-editor-sp .sp-cancel:hover {
   bottom: -8px;
   color: #777 !important;
   font-size: 25px;
@@ -3758,49 +3821,51 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   position: absolute;
   text-decoration: none;
 }
-.gjs-editor-cont .sp-alpha-handle {
+.gjs-editor-sp .sp-alpha-handle {
   background-color: #ccc;
   border: 1px solid #555;
   width: 4px;
 }
-.gjs-editor-cont .sp-color, .gjs-editor-cont .sp-hue {
+.gjs-editor-sp .sp-color, .gjs-editor-sp .sp-hue {
   border: 1px solid #333333;
 }
-.gjs-editor-cont .sp-slider {
+.gjs-editor-sp .sp-slider {
   background-color: #ccc;
   border: 1px solid #555;
   height: 3px;
   left: -4px;
   width: 22px;
 }
-.gjs-editor-cont .sp-dragger {
+.gjs-editor-sp .sp-dragger {
   background: transparent;
   box-shadow: 0 0 0 1px #111;
 }
-.gjs-editor-cont .sp-button-container {
+.gjs-editor-sp .sp-button-container {
   float: none;
   width: 100%;
   position: relative;
   text-align: right;
 }
-.gjs-editor-cont .sp-container button, .gjs-editor-cont .sp-container button:hover, .gjs-editor-cont .sp-container button:active {
-  background: rgba(0, 0, 0, 0.2);
-  border-color: rgba(0, 0, 0, 0.2);
-  color: #ddd;
+.gjs-editor-sp .sp-button-container .sp-choose,
+.gjs-editor-sp .sp-button-container .sp-choose:hover,
+.gjs-editor-sp .sp-button-container .sp-choose:active {
+  background: var(--gjs-main-dark-color);
+  border-color: var(--gjs-main-dark-color);
+  color: var(--gjs-font-color);
   text-shadow: none;
   box-shadow: none;
   padding: 3px 5px;
 }
-.gjs-editor-cont .sp-palette-container {
+.gjs-editor-sp .sp-palette-container {
   border: none;
   float: none;
   margin: 0;
   padding: 5px 10px 0;
 }
-.gjs-editor-cont .sp-palette .sp-thumb-el, .gjs-editor-cont .sp-palette .sp-thumb-el:hover {
+.gjs-editor-sp .sp-palette .sp-thumb-el, .gjs-editor-sp .sp-palette .sp-thumb-el:hover {
   border: 1px solid rgba(0, 0, 0, 0.9);
 }
-.gjs-editor-cont .sp-palette .sp-thumb-el:hover, .gjs-editor-cont .sp-palette .sp-thumb-el.sp-thumb-active {
+.gjs-editor-sp .sp-palette .sp-thumb-el:hover, .gjs-editor-sp .sp-palette .sp-thumb-el.sp-thumb-active {
   border-color: rgba(0, 0, 0, 0.9);
 }