@silexlabs/silex 3.0.1-alpha.0 → 3.0.1

package/dist/client/css/admin.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+/* Normalize css */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -307,7 +309,19 @@ template {
   display: none;
 }
 
-/* stylelint-disable */ /* BASICS */
+:root {
+  --primaryColor: #333333;
+  --secondaryColor: #ddd;
+  --tertiaryColor: #8873FE;
+  --quaternaryColor: #A291FF;
+  --darkerPrimaryColor: #292929;
+  --lighterPrimaryColor: #575757;
+  --viewsPanelWidth: 25%;
+  --viewsProjectPanelWidth: 13%;
+}
+
+/* stylelint-disable */
+/* BASICS */
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
@@ -375,20 +389,19 @@ template {
   z-index: 1;
 }
 
-.cm-fat-cursor .CodeMirror-line::selection,
-.cm-fat-cursor .CodeMirror-line > span::selection,
-.cm-fat-cursor .CodeMirror-line > span > span::selection {
-  background: transparent;
-}
-
-.cm-fat-cursor .CodeMirror-line::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
-  background: transparent;
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
 }
 
-.cm-fat-cursor {
-  caret-color: transparent;
+.cm-animate-fat-cursor {
+  width: auto;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
 }
 
 @-moz-keyframes blink {
@@ -577,7 +590,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
-  z-index: 0;
 }
 
 .CodeMirror-sizer {
@@ -970,7 +982,8 @@ License: MIT
   padding-top: 80%;
 }
 
-.sp-sat, .sp-val {
+.sp-sat,
+.sp-val {
   position: absolute;
   top: 0;
   left: 0;
@@ -1030,7 +1043,16 @@ License: MIT
 }
 
 /* Don't allow text selection */
-.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
+.sp-container,
+.sp-replacer,
+.sp-preview,
+.sp-dragger,
+.sp-slider,
+.sp-alpha,
+.sp-clear,
+.sp-alpha-handle,
+.sp-container.sp-dragging .sp-input,
+.sp-container button {
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   -o-user-select: none;
@@ -1063,8 +1085,8 @@ License: MIT
 
 /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
 .sp-sat {
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
-  background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fff), to(rgba(204, 154, 129, 0)));
+  background-image: -webkit-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
   background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
   background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
   background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
@@ -1132,7 +1154,8 @@ License: MIT
 }
 
 /* Clearfix hack */
-.sp-cf:before, .sp-cf:after {
+.sp-cf:before,
+.sp-cf:after {
   content: "";
   display: table;
 }
@@ -1184,12 +1207,17 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 */
 .sp-container {
   border-radius: 0;
-  background-color: #ECECEC;
-  border: solid 1px #f0c49B;
+  background-color: #ececec;
+  border: solid 1px #f0c49b;
   padding: 0;
 }
 
-.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
+.sp-container,
+.sp-container button,
+.sp-container input,
+.sp-color,
+.sp-hue,
+.sp-clear {
   font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -1201,7 +1229,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   margin-bottom: 3px;
 }
 
-.sp-color, .sp-hue, .sp-clear {
+.sp-color,
+.sp-hue,
+.sp-clear {
   border: solid 1px #666;
 }
 
@@ -1236,7 +1266,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   background: #fdd;
 }
 
-.sp-picker-container, .sp-palette-container {
+.sp-picker-container,
+.sp-palette-container {
   float: left;
   position: relative;
   padding: 10px;
@@ -1269,7 +1300,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   border: solid 2px transparent;
 }
 
-.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
+.sp-palette .sp-thumb-el:hover,
+.sp-palette .sp-thumb-el.sp-thumb-active {
   border-color: orange;
 }
 
@@ -1315,8 +1347,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   vertical-align: middle;
 }
 
-.sp-replacer:hover, .sp-replacer.sp-active {
-  border-color: #F0C49B;
+.sp-replacer:hover,
+.sp-replacer.sp-active {
+  border-color: #f0c49b;
   color: #111;
 }
 
@@ -1417,16 +1450,21 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   text-decoration: underline;
 }
 
-.sp-palette span:hover, .sp-palette span.sp-thumb-active {
+.sp-palette span:hover,
+.sp-palette span.sp-thumb-active {
   border-color: #000;
 }
 
-.sp-preview, .sp-alpha, .sp-thumb-el {
+.sp-preview,
+.sp-alpha,
+.sp-thumb-el {
   position: relative;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
 }
 
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
+.sp-preview-inner,
+.sp-alpha-inner,
+.sp-thumb-inner {
   display: block;
   position: absolute;
   top: 0;
@@ -1468,10 +1506,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 /* Color Helpers */
 /* Canvas */
 /* Components / Inputs */
-/* #d5d5d5 */
 /* b1b1b1 */
 /* #252525 */
-/* 303030 */
 /* Class manager */
 /* File uploader */
 /* Commands */
@@ -1491,70 +1527,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,
@@ -1576,7 +1612,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   filter: alpha(opacity=50);
 }
 
-.gjs-checker-bg, .gjs-field-colorp-c, .checker-bg, .gjs-sm-layer-preview {
+.gjs-checker-bg, .gjs-field-colorp-c,
+.checker-bg,
+.gjs-sm-layer-preview {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
 }
 
@@ -1605,7 +1643,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;
@@ -1635,7 +1673,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 {
@@ -1647,11 +1685,48 @@ 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;
@@ -1674,8 +1749,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%;
@@ -1689,7 +1764,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;
@@ -1702,6 +1777,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;
@@ -1715,9 +1804,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;
@@ -1876,18 +1966,21 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-cv-canvas {
-  background-color: rgba(0, 0, 0, 0.15);
   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 {
+  background-color: rgba(0, 0, 0, 0.15);
+}
 .gjs-cv-canvas.gjs-cui {
   width: 100%;
   height: 100%;
@@ -1903,6 +1996,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   width: 100%;
   height: 100%;
 }
+.gjs-cv-canvas__spots {
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+}
 .gjs-cv-canvas .gjs-ghost {
   display: none;
   pointer-events: none;
@@ -1916,20 +2014,21 @@ 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 {
+.gjs-cv-canvas #gjs-tools,
+.gjs-cv-canvas .gjs-tools {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -1938,6 +2037,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;
@@ -1960,7 +2062,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;
@@ -2012,11 +2114,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 {
@@ -2033,7 +2135,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;
@@ -2041,14 +2143,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;
@@ -2063,7 +2165,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;
@@ -2144,7 +2246,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /********* COMMANDS **********/
-.no-dots, .ui-resizable-handle {
+.no-dots,
+.ui-resizable-handle {
   border: none !important;
   margin: 0 !important;
   outline: none !important;
@@ -2156,9 +2259,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   box-sizing: border-box;
 }
 
-.gjs-com-badge, .gjs-badge {
+.gjs-com-badge,
+.gjs-badge {
   pointer-events: none;
-  background-color: #3b97e3;
+  background-color: var(--gjs-color-blue);
   color: #fff;
   padding: 2px 5px;
   position: absolute;
@@ -2169,7 +2273,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 .gjs-badge-warning {
-  background-color: #ffca6f;
+  background-color: var(--gjs-color-yellow);
 }
 
 .gjs-placeholder,
@@ -2186,13 +2290,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;
 }
@@ -2200,7 +2304,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;
 }
@@ -2208,7 +2312,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%;
@@ -2232,28 +2336,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;
@@ -2299,7 +2403,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;
@@ -2316,7 +2420,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,
@@ -2344,12 +2448,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;
@@ -2372,8 +2476,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;
@@ -2389,7 +2493,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 {
@@ -2397,19 +2501,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 {
@@ -2425,11 +2529,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;
@@ -2455,13 +2559,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;
@@ -2476,7 +2580,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 {
@@ -2492,7 +2596,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;
 }
 
@@ -2507,13 +2611,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;
 }
@@ -2541,41 +2645,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;
@@ -2583,15 +2687,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%;
@@ -2612,7 +2716,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;
@@ -2646,13 +2750,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);
@@ -2694,7 +2798,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;
@@ -2752,7 +2856,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,
@@ -2765,7 +2869,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,
@@ -2803,7 +2907,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,
@@ -2813,7 +2917,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,
@@ -2823,10 +2927,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;
@@ -2844,7 +2948,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 {
@@ -2878,13 +2982,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-------------------- */
@@ -2903,18 +3007,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);
@@ -2933,12 +3037,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 {
@@ -3054,12 +3158,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;
 }
 
@@ -3175,7 +3279,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;
@@ -3185,29 +3289,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;
 }
@@ -3215,17 +3330,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);
 }
@@ -3233,18 +3345,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 {
@@ -3258,13 +3375,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;
@@ -3276,22 +3392,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 {
@@ -3307,7 +3420,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,
@@ -3369,7 +3482,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 {
@@ -3394,8 +3507,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 {
@@ -3425,7 +3538,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);
@@ -3464,7 +3577,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;
 }
 
@@ -3520,7 +3633,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;
@@ -3571,7 +3684,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;
@@ -3583,11 +3696,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;
@@ -3603,7 +3716,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;
@@ -3611,8 +3724,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;
@@ -3620,13 +3733,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%;
 }
 
@@ -3645,7 +3758,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;
@@ -3657,7 +3770,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;
@@ -3669,7 +3782,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 {
@@ -3681,7 +3794,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;
@@ -3690,13 +3803,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 {
@@ -3704,33 +3817,38 @@ 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;
@@ -3738,49 +3856,54 @@ 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);
 }
 
@@ -3812,15 +3935,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   color: #ffffff;
 }
 
-:root {
-  --primaryColor: #444;
-  --secondaryColor: #ddd;
-  --tertiaryColor: #5e85a8;
-  --quaternaryColor: #7bc0ff;
-  --darkerPrimaryColor: #363636;
-  --lighterPrimaryColor: #575757;
-}
-
+/* Silex styles imports */
 .silex-workspace {
   position: absolute;
   top: 0;
@@ -3829,6 +3944,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   height: 100%;
   display: flex;
 }
+.silex-workspace body {
+  font-family: "Ubuntu", sans-serif;
+}
 .silex-workspace a {
   color: inherit;
 }
@@ -3845,20 +3963,48 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   font-size: 18px;
   font-weight: normal;
 }
+.silex-workspace select, .silex-workspace input {
+  background-color: #292929;
+}
+.silex-workspace .gjs-color-warn, .silex-workspace .gjs-sm-sector .gjs-sm-field input, .silex-workspace .gjs-clm-tags .gjs-sm-field input, .silex-workspace .gjs-sm-sector .gjs-clm-field input, .silex-workspace .gjs-clm-tags .gjs-clm-field input, .silex-workspace .gjs-sm-sector .gjs-sm-field select, .silex-workspace .gjs-clm-tags .gjs-sm-field select, .silex-workspace .gjs-sm-sector .gjs-clm-field select, .silex-workspace .gjs-clm-tags .gjs-clm-field select {
+  color: #ddd;
+}
 
 .full-width {
   width: 100%;
 }
 
+.silex-workspace .gjs-pn-viewsOptions {
+  z-index: 5;
+  right: 0;
+  left: auto;
+}
+.silex-workspace .gjs-pn-viewsOptions .viewsOptions__size-btn::before {
+  content: "←";
+}
+
+.silex-hidden {
+  /* do not really hide, because it breaks the code editor init in the site settings + for animation */
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
 .settings-dialog > div {
   max-width: none;
   width: 100%;
-  max-height: 100vh;
+  height: 100vh;
   overflow: auto;
 }
 .settings-dialog > div form.silex-form {
   padding-bottom: 100px;
 }
+.settings-dialog > div form.silex-form textarea {
+  min-height: 250px;
+}
 .settings-dialog > div .silex-form__element {
   padding: 10px 5px;
   border: 1px solid #575757;
@@ -3867,11 +4013,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .settings-dialog > div footer {
   position: fixed;
+  z-index: 10;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 20px 0;
-  background-color: #444;
+  background-color: #333333;
 }
 .settings-dialog > div footer > *:last-child {
   margin-right: 30px;
@@ -3881,6 +4028,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   padding: 0 15px;
   font-size: x-small;
 }
+.settings-dialog > div .CodeMirror {
+  min-height: 400px;
+  height: auto;
+}
 
 button.silex-button,
 input.silex-button[type=button],
@@ -3899,7 +4050,19 @@ input.silex-button[type=submit] {
   border-color: transparent;
   padding: 5px;
 }
+button.silex-button:focus,
+input.silex-button[type=button]:focus,
+input.silex-button[type=submit]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #8873FE;
+}
+button.silex-button:hover,
+input.silex-button[type=button]:hover,
+input.silex-button[type=submit]:hover {
+  background-color: #292929;
+}
 
+.silex-button.disabled,
 .silex-button[disabled] {
   opacity: 0.8;
   cursor: unset;
@@ -3910,11 +4073,12 @@ input.silex-button[type=submit] {
 }
 
 .silex-button.silex-button--secondary {
-  background-color: #444;
+  background-color: #333333;
 }
 
 .silex-button--size {
   max-height: 30px;
+  margin: 0 10px;
 }
 
 .silex-button--small {
@@ -3930,25 +4094,29 @@ input.silex-button[type=submit] {
   display: block;
 }
 
+.silex-sidebar-dialog,
 .silex-bar {
   display: flex;
 }
+.silex-sidebar-dialog > *,
 .silex-bar > * {
   margin: 5px;
 }
+.silex-sidebar-dialog main,
+.silex-bar main {
+  width: 100%;
+}
 
 ol.silex-list,
 ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #575757;
 }
 ol.silex-list > li,
 ul.silex-list > li {
   padding: 5px;
   border-bottom: 1px solid #575757;
-  background-color: #444;
   margin: 5px;
 }
 ol.silex-list fieldset,
@@ -3981,6 +4149,26 @@ ul.silex-list .silex-list__item__footer button {
   padding-top: 8px;
 }
 
+ol.silex-list--menu > li,
+ul.silex-list--menu > li {
+  padding: 15px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-bottom-color: #575757;
+  text-align: center;
+  cursor: pointer;
+}
+ol.silex-list--menu > li:first-child,
+ul.silex-list--menu > li:first-child {
+  border-top-color: #575757;
+}
+ol.silex-list--menu .active, ol.silex-list--menu > li:hover,
+ul.silex-list--menu .active,
+ul.silex-list--menu > li:hover {
+  color: #8873FE;
+  background-color: #292929;
+}
+
 form.silex-form {
   display: flex;
   flex-direction: column;
@@ -3992,7 +4180,7 @@ form.silex-form footer {
   margin: 20px 0 0;
 }
 form.silex-form button, form.silex-form input, form.silex-form optgroup, form.silex-form select, form.silex-form textarea {
-  background-color: #363636;
+  background-color: #292929;
   color: #ddd;
   padding: 5px;
   border: none;
@@ -4021,117 +4209,126 @@ form.silex-form .silex-form__group.col2 {
   color: #ddd;
   justify-content: center;
   align-items: center;
+  background-color: #333333;
+  z-index: 10;
+}
+
+.gjs-pn-footer {
+  bottom: 0;
+  left: 35px;
+  right: var(--viewsPanelWidth);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  height: 30px;
 }
 
 .silex-main {
-  transition: opacity 0.35s 0.5s ease;
+  transition: opacity 0.15s 0.5s ease;
 }
 
 .silex-dialog {
-  transition: opacity 0.35s ease;
+  transition: opacity 0.15s ease;
 }
 
 .silex-dialog-hide {
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.35s ease, visibility 0.5s 1s ease;
+  transition: opacity 0.15s ease, visibility 0.3s 1s ease;
 }
 
 .silex-dialog-inline {
   position: absolute;
-  background-color: #444;
+  background-color: #333333;
   z-index: 10;
   border-radius: 3px;
+  border: 2px solid #575757;
+  box-shadow: 0 0 10px 0 #575757;
   display: flex;
   flex-direction: column;
+}
+.silex-dialog-inline header {
   padding: 10px;
+  border-bottom: 1px solid #575757;
 }
 .silex-dialog-inline main {
   flex-grow: 1;
+  padding: 10px;
+  max-height: 50vh;
+  overflow-y: auto;
 }
 .silex-dialog-inline footer {
-  padding: 5px;
+  padding: 10px;
   text-align: right;
+  border-top: 1px solid #575757;
 }
 .silex-dialog-inline a {
-  color: #7bc0ff;
+  color: #A291FF;
 }
-
-#gjs {
-  flex: 1 1 auto;
+.silex-dialog-inline header > * {
+  margin: 0;
 }
 
-.gjs-one-bg {
-  background-color: #444;
-}
-.gjs-one-color {
-  color: #444;
-}
-.gjs-one-color-h:hover {
-  color: #444;
-}
-.gjs-two-bg {
-  background-color: #ddd;
-}
-.gjs-two-color {
+.silex-help {
+  margin: 10px 0;
+  padding: 10px;
+  border: 1px solid #575757;
+  border-radius: 3px;
+  background-color: #575757;
   color: #ddd;
+  font-size: small;
 }
-.gjs-two-color-h:hover {
-  color: #ddd;
+.silex-help p {
+  margin: 0;
 }
-.gjs-three-bg {
-  background-color: #5e85a8;
+.silex-help a {
+  color: #A291FF;
 }
-.gjs-three-color {
-  color: #5e85a8;
+
+:focus-visible {
+  outline: 2px solid #8873FE;
+  outline-offset: 2px;
 }
-.gjs-three-color-h:hover {
-  color: #5e85a8;
+
+.fonts-dialog .gjs-mdl-dialog {
+  width: 100%;
+  max-width: unset;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-.gjs-four-bg {
-  background-color: #7bc0ff;
+.fonts-dialog .gjs-mdl-content {
+  flex: 1 1 auto;
 }
-.gjs-four-color {
-  color: #7bc0ff;
+.fonts-dialog .silex-form__element {
+  margin-bottom: 80px;
 }
-.gjs-four-color-h:hover {
-  color: #7bc0ff;
+.fonts-dialog .silex-list li {
+  border-bottom: none;
 }
-
-.gjs-cv-canvas,
-.gjs-pn-panel,
-.gjs-pn-commands {
-  left: 35px;
+.fonts-dialog h2 {
+  border-radius: 0;
+  background-color: transparent;
 }
-
-.gjs-pn-project-bar-panel,
-.gjs-pn-views,
-.gjs-pn-options,
-.gjs-pn-views-container {
-  left: auto;
+.fonts-dialog footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px !important;
+  background-color: #333333;
 }
 
-.gjs-cv-canvas {
-  width: calc(85% - 35px);
+.silex-squeeze-left .gjs-cv-canvas {
+  left: calc(var(--viewsProjectPanelWidth) + 35px);
+  width: auto;
+  right: var(--viewsPanelWidth);
 }
 
-.gjs-pn-devices-c .gjs-device-label {
-  display: none;
-}
-
-iframe.enable-squeeze.gjs-frame {
-  transition: width 0.35s, height 0.35s, left 0.35s;
-}
-
-iframe.enable-squeeze.silex-squeeze-left {
-  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
-  left: var(--project-panel-width);
-  width: calc(100% - var(--project-panel-width));
-}
-
-.gjs-pn-project-bar-panel {
-  width: 35px;
-  padding: 0;
+.gjs-pn-project-bar-panel {
+  width: 35px;
+  padding: 0;
 }
 .gjs-pn-project-bar-panel .gjs-pn-buttons {
   flex-direction: column;
@@ -4142,7 +4339,7 @@ iframe.enable-squeeze.silex-squeeze-left {
   flex: 1;
 }
 .gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn {
-  margin: 5px 0 0;
+  margin: 5px 0 5px 0px;
   padding: 5px;
 }
 .gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn.gjs-pn-active {
@@ -4150,18 +4347,37 @@ iframe.enable-squeeze.silex-squeeze-left {
   width: 35px;
   box-shadow: none;
 }
+.gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn.project-bar__dirty {
+  background-color: #A291FF;
+  color: white;
+}
 .gjs-pn-project-bar-panel .logo {
   background-image: url("../assets/logo-silex-small.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
+  background-size: contain;
+}
+
+.viewsOptionsProjectPanel__size-btn::before {
+  content: "→";
+}
+
+.viewsOptionsProjectPanel__size-btn {
+  z-index: 5;
+  right: auto;
+  left: 0;
+}
+
+.gjs-block {
+  width: 84px;
 }
 
 .gjs-pn-project-bar-container {
   top: 40px;
   width: 13%;
   min-width: 150px;
-  height: calc(100% - 40px);
+  height: calc(100% - 40px - 30px);
   background-color: #575757;
 }
 .gjs-pn-project-bar-container:not(.gjs-hidden) {
@@ -4172,11 +4388,11 @@ iframe.enable-squeeze.silex-squeeze-left {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #444;
+  background-color: #333333;
   overflow: auto;
 }
 .gjs-pn-project-bar-container .project-bar__panel:not(.gjs-hidden) .gjs-layer {
-  background-color: #444;
+  background-color: #333333;
 }
 .gjs-pn-project-bar-container .project-bar__panel > *:not(header) {
   flex: 1;
@@ -4201,21 +4417,15 @@ iframe.enable-squeeze.silex-squeeze-left {
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button {
   cursor: pointer;
-  font-size: large;
-  font-weight: 400;
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button span {
-  position: relative;
-  left: -6px;
-  top: 6px;
-  font-weight: bolder;
   background-color: #444;
   border-radius: 100%;
   display: inline-block;
   line-height: 13px;
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button:hover {
-  color: #7bc0ff;
+  color: #A291FF;
 }
 
 .page-panel-container .pages__wrapper {
@@ -4228,28 +4438,28 @@ iframe.enable-squeeze.silex-squeeze-left {
 }
 .page-panel-container .pages .pages__main {
   flex: 1;
-  border: 1px solid #363636;
-  background-color: #444;
+  border: 1px solid #292929;
+  background-color: #333333;
 }
 .page-panel-container .pages .pages__page {
   display: flex;
   align-items: center;
-  background-color: #363636;
+  background-color: #292929;
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
   cursor: pointer;
 }
 .page-panel-container .pages .pages__page:hover {
-  background-color: #444;
+  background-color: #333333;
 }
 .page-panel-container .pages .pages__page:hover .pages__page-name {
-  color: #7bc0ff;
+  color: #A291FF;
 }
 .page-panel-container .pages .pages__page-selected {
   background-color: #575757;
   cursor: default;
 }
 .page-panel-container .pages .pages__page-selected .pages__page-name {
-  color: #7bc0ff;
+  color: #A291FF;
 }
 .page-panel-container .pages .pages__main.pages__single-page .pages__remove-btn {
   visibility: hidden;
@@ -4270,13 +4480,589 @@ iframe.enable-squeeze.silex-squeeze-left {
   cursor: pointer;
 }
 .page-panel-container .pages .pages__icon:hover {
-  color: #7bc0ff;
+  color: #A291FF;
 }
 .page-panel-container .gjs-pn-buttons {
   flex-direction: column;
 }
-/* Normalize css */
-/* Silex styles imports */
+.gjs-website-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 0 10px;
+  line-height: 1;
+  min-width: 100px;
+  border: 1px solid #575757;
+  background-color: #292929;
+}
+
+.grp-wrapper {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
+}
+
+.grp-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+}
+
+.grp-handler {
+  width: 4px;
+  margin-left: -2px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  height: 100%;
+}
+
+.grp-handler-close {
+  color: rgba(0, 0, 0, 0.4);
+  border-radius: 100%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+  background-color: #fff;
+  text-align: center;
+  width: 15px;
+  height: 15px;
+  margin-left: -5px;
+  line-height: 10px;
+  font-size: 21px;
+  cursor: pointer;
+}
+
+.grp-handler-close-c {
+  position: absolute;
+  top: -17px;
+}
+
+.grp-handler-drag {
+  background-color: rgba(0, 0, 0, 0.5);
+  cursor: col-resize;
+  width: 100%;
+  height: 100%;
+}
+
+.grp-handler-selected .grp-handler-drag {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.grp-handler-cp-c {
+  display: none;
+}
+
+.grp-handler-selected .grp-handler-cp-c {
+  display: block;
+}
+
+.grp-handler-cp-wrap {
+  width: 15px;
+  height: 15px;
+  margin-left: -8px;
+  border: 3px solid #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  border-radius: 100%;
+  cursor: pointer;
+}
+
+.grp-handler-cp-wrap input[type=color] {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.fa-arrows::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-color: #ddd;
+}
+
+.fa-long-arrow-up::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-top-color: #ddd;
+}
+
+.fa-long-arrow-down::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-bottom-color: #ddd;
+}
+
+.fa-long-arrow-left::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-left-color: #ddd;
+}
+
+.fa-long-arrow-right::before {
+  display: block;
+  content: "" !important;
+  border: 2px solid #8873FE;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+  border-right-color: #ddd;
+}
+
+.gjs-editor .gjs-notification {
+  max-height: initial;
+  text-align: left;
+}
+
+.gjs-editor .gjs-notification,
+.gjs-editor .gjs-notification .gjs-sm-header,
+.gjs-editor .gjs-notification .gjs-notification__item,
+.gjs-editor .gjs-notification .gjs-notification__group > details,
+.gjs-editor .gjs-notification .gjs-notification__group > details > ul,
+.gjs-editor .gjs-notification .gjs-notification__group > details > summary,
+.gjs-editor .gjs-notification .gjs-notification__group {
+  padding: 0;
+  margin: 0;
+}
+
+.gjs-editor .gjs-notification .gjs-notification__group,
+.gjs-editor .gjs-notification .gjs-notification__item {
+  margin: 10px 0;
+  padding: 10px 0;
+}
+
+.gjs-editor .gjs-notification .gjs-notification__group .gjs-notification__item {
+  margin-left: 10px;
+}
+
+@keyframes pub-blink {
+  from {
+    opacity: 0.25;
+  }
+  to {
+    opacity: 1;
+  }
+}
+#publish-dialog .notice {
+  margin: 10px 0;
+  background-color: rgba(255, 166, 0, 0.2);
+  border-radius: 5px;
+  padding: 10px;
+}
+#publish-dialog progress {
+  width: 100%;
+  border-radius: 50px;
+  border: none;
+  height: 5px;
+  animation: pub-blink 0.33s infinite alternate;
+  background-color: #8873FE;
+}
+#publish-dialog progress::-webkit-progress-bar {
+  background-color: #8873FE;
+}
+#publish-dialog progress::-moz-progress-bar {
+  background-color: #8873FE;
+}
+#publish-dialog header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 0.95rem;
+  transition: 200ms;
+}
+#publish-dialog header svg {
+  width: 1.4rem;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+#publish-dialog header button {
+  border: solid 2px #484848;
+  border-radius: 50px;
+  padding: 4px 9px;
+  background-color: #444;
+  color: #ddd;
+}
+#publish-dialog header .connector {
+  color: #A291FF;
+}
+#publish-dialog main {
+  max-height: none;
+}
+#publish-dialog main .buttons {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-row-gap: 0.5rem;
+  transition: 200ms;
+}
+#publish-dialog main svg {
+  height: 0.9rem;
+  margin-left: 5px;
+}
+#publish-dialog main h3 {
+  margin: 0;
+}
+#publish-dialog main p {
+  margin-top: 0;
+}
+#publish-dialog main details {
+  border-radius: 5px;
+  border: solid #222 2px;
+  background-color: #222;
+  margin: 10px 0;
+  padding: 10px;
+  word-break: break-word;
+  overflow-y: auto;
+  max-height: 200px;
+  position: relative;
+}
+#publish-dialog main details pre {
+  word-break: break-word;
+}
+#publish-dialog main details summary {
+  font-size: 0.95rem;
+  opacity: 0.7;
+}
+#publish-dialog main details .logs {
+  font-family: monospace;
+}
+#publish-dialog main details .logs * {
+  margin: 0;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-radius: 5px;
+  list-style: "-";
+}
+#publish-dialog main details .logs *:hover {
+  transition: 200ms;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+#publish-dialog main details:hover {
+  transition: 200ms;
+  border-color: #575757;
+  background-color: #292929;
+}
+#publish-dialog main details * {
+  transition: 200ms;
+}
+#publish-dialog main details[open] summary {
+  margin-bottom: 10px;
+}
+#publish-dialog main .silex-button {
+  padding: 10px;
+  width: 100%;
+  transition: 200ms;
+}
+#publish-dialog main .silex-button:hover {
+  filter: brightness(1.2);
+}
+#publish-dialog main .silex-button:active {
+  filter: brightness(0.8);
+}
+#publish-dialog main .silex-button--primary {
+  background-color: #8873FE;
+}
+
+.gjs-suggest {
+  max-height: 30vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-top: 7px;
+  border-bottom: solid #333333 7px;
+}
+
+#gjs {
+  flex: 1 1 auto;
+}
+
+.gjs-one-bg {
+  background-color: #333333;
+}
+.gjs-one-color {
+  color: #333333;
+}
+.gjs-one-color-h:hover {
+  color: #333333;
+}
+.gjs-two-bg {
+  background-color: #ddd;
+}
+.gjs-two-color {
+  color: #ddd;
+}
+.gjs-two-color-h:hover {
+  color: #ddd;
+}
+.gjs-three-bg {
+  background-color: #8873FE;
+}
+.gjs-three-color {
+  color: #8873FE;
+}
+.gjs-three-color-h:hover {
+  color: #8873FE;
+}
+.gjs-four-bg {
+  background-color: #A291FF;
+}
+.gjs-four-color {
+  color: #A291FF;
+}
+.gjs-four-color-h:hover {
+  color: #A291FF;
+}
+
+.gjs-cv-canvas,
+.gjs-pn-panel,
+.gjs-pn-commands {
+  left: 35px;
+}
+
+.gjs-pn-project-bar-panel,
+.gjs-pn-views,
+.gjs-pn-options,
+.gjs-pn-views-container {
+  left: auto;
+}
+
+.gjs-cv-canvas {
+  width: calc(100% - var(--viewsPanelWidth) - 35px);
+}
+
+.gjs-pn-devices-c {
+  display: flex;
+}
+.gjs-pn-devices-c .gjs-device-label {
+  display: none;
+}
+
+.gjs-editor {
+  font-family: "Ubuntu", sans-serif;
+  font-size: 0.75rem;
+}
+
+.gjs-mdl-header {
+  background-color: #333333;
+  color: #ddd;
+  padding: 20px;
+  border-bottom: 1px solid #575757;
+}
+.gjs-mdl-header .gjs-mdl-btn-close {
+  top: 15px;
+}
+
+.gjs-toolbar {
+  background-color: #8873FE;
+}
+
+.gjs-resizer-h {
+  border-color: #8873FE;
+}
+
+.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
+  background-color: #8873FE;
+}
+
+.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
+  outline: 1px solid #8873FE;
+}
+
+.gjs-pn-buttons {
+  justify-content: unset;
+}
+
+.gjs-pn-views-container, .gjs-pn-views {
+  width: var(--viewsPanelWidth);
+}
+
+.gjs-pn-project-bar-container {
+  width: var(--viewsProjectPanelWidth);
+}
+
+.gjs-pn-options {
+  right: var(--viewsPanelWidth);
+}
+
+.top-style-section {
+  position: sticky;
+  top: -1px; /* Fixes a visual gap on the top */
+  border-bottom: solid #575757 1px;
+  background-color: #333333;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3764705882);
+  z-index: 999;
+}
+
+.gjs-clm-label-sel {
+  opacity: 0.5;
+}
+
+.gjs-clm-sels-info {
+  padding: 7px 0;
+  margin: 0;
+  overflow-x: scroll;
+}
+
+.gjs-clm-sel-rule {
+  word-break: break-all;
+}
+
+#gjs-clm-tags-field.gjs-field {
+  margin: 0;
+}
+
+.gjs-clm-tags {
+  padding-top: 7px;
+  padding-bottom: 0;
+}
+
+#gjs-clm-up {
+  margin-top: 0;
+}
+
+/*
+*/
+.gjs-editor-cont .fa {
+  font-weight: 400;
+}
+
+.fa-square-o:before {
+  content: "\f0c8";
+}
+
+.fa-trash-o:before {
+  content: "\f1f8";
+}
+
+.fa-map-o:before {
+  content: "\f279";
+}
+
+.fa-youtube-play:before {
+  content: "\f04b";
+}
+
+/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
+.fa-chevron-right:before {
+  content: "\f054";
+}
+
+.fa-chevron-down:before {
+  content: "\f078";
+}
+
+.fa-cog:before {
+  font-weight: 900;
+}
+
+.fa-paint-brush:before {
+  font-weight: 900;
+}
+
+.fa-arrows-alt:before {
+  content: "\f065";
+  font-weight: 900;
+}
+
+.fa-caret-down:before {
+  content: "\f0d7";
+  font-weight: 900;
+}
+
+.fa-caret-right:before {
+  content: "\f0da";
+  font-weight: 900;
+}
+
+.fa-trash:before {
+  content: "\f2ed";
+  font-weight: 900;
+}
+
+.fa-list:before {
+  content: "\f03a";
+  font-weight: 900;
+}
+
+.fa-sign-out:before {
+  content: "\f08b";
+  font-weight: 900;
+}
+
+.fa-diamond:before {
+  content: "\f3a5";
+}
+
+/* ubuntu-cyrillic-ext-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-cyrillic-ext-400-normal.woff2) format("woff2"), url(./files/ubuntu-cyrillic-ext-400-normal.woff) format("woff");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* ubuntu-cyrillic-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-cyrillic-400-normal.woff2) format("woff2"), url(./files/ubuntu-cyrillic-400-normal.woff) format("woff");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* ubuntu-greek-ext-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-greek-ext-400-normal.woff2) format("woff2"), url(./files/ubuntu-greek-ext-400-normal.woff) format("woff");
+  unicode-range: U+1F00-1FFF;
+}
+/* ubuntu-greek-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-greek-400-normal.woff2) format("woff2"), url(./files/ubuntu-greek-400-normal.woff) format("woff");
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* ubuntu-latin-ext-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-latin-ext-400-normal.woff2) format("woff2"), url(./files/ubuntu-latin-ext-400-normal.woff) format("woff");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* ubuntu-latin-400-normal */
+@font-face {
+  font-family: "Ubuntu";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/ubuntu-latin-400-normal.woff2) format("woff2"), url(./files/ubuntu-latin-400-normal.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 .container-png::before {
   content: " ";
   background-image: url("../assets/container.png");