@silexlabs/silex 3.5.1-7 → 3.5.1-8

package/dist/client/css/admin.css

@@ -309,17 +309,23 @@ template {
   display: none;
 }
 
+/**
+ * SILEX VARIABLES
+ * Core configuration values for Silex
+ * Colors are now managed in theme-base.scss
+ * /!\ Some values duplicated in grapesjs/index.ts => keep in sync
+ */
 :root {
   --primaryColor: #333333;
-  --gjs-primary-color: #333333 !important;
   --secondaryColor: #ddd;
-  --gjs-secondary-color: #ddd !important;
   --tertiaryColor: #8873FE;
-  --gjs-tertiary-color: #8873FE !important;
   --quaternaryColor: #A291FF;
-  --gjs-quaternary-color: #A291FF !important;
   --darkerPrimaryColor: #292929;
   --lighterPrimaryColor: #575757;
+  --gjs-primary-color: #333333 !important;
+  --gjs-secondary-color: #ddd !important;
+  --gjs-tertiary-color: #8873FE !important;
+  --gjs-quaternary-color: #A291FF !important;
   --viewsPanelWidth: 25%;
   --viewsProjectPanelWidth: 13%;
   --footerHeight: 30px;
@@ -3934,6 +3940,251 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   color: #ffffff;
 }
 
+/* Theme system */
+/**
+ * THEME-BASE.SCSS
+ * Base theming system for Silex
+ *
+ * Philosophy:
+ * - Leverage GrapesJS variables as much as possible
+ * - Only introduce new variables when truly necessary
+ * - Provide semantic tokens for Silex-specific UI elements
+ * - Keep it minimal and maintainable
+ */
+:root {
+  --gjs-primary-color: #333333;
+  --gjs-secondary-color: #ddd;
+  --gjs-tertiary-color: #8873FE;
+  --gjs-quaternary-color: #A291FF;
+  --gjs-primary-darker: #292929;
+  --gjs-primary-lighter: #575757;
+  --silex-bg-main: var(--gjs-primary-color);
+  --silex-bg-darker: var(--gjs-primary-darker);
+  --silex-bg-lighter: var(--gjs-primary-lighter);
+  --silex-bg-surface: var(--gjs-primary-color);
+  --silex-text-primary: var(--gjs-secondary-color);
+  --silex-text-secondary: var(--gjs-font-color);
+  --silex-text-inverse: #ffffff;
+  --silex-border-color: var(--gjs-light-border);
+  --silex-border-color-strong: var(--gjs-primary-lighter);
+  --silex-shadow-color: rgba(0, 0, 0, 0.2);
+  --silex-shadow-sm: 0 0 5px var(--silex-shadow-color);
+  --silex-shadow-md: 0 0 10px var(--silex-shadow-color);
+  --silex-shadow-lg: 0 0 15px var(--silex-shadow-color);
+  --silex-hover-bg: var(--gjs-primary-darker);
+  --silex-active-bg: var(--gjs-primary-lighter);
+  --silex-focus-outline: var(--gjs-tertiary-color);
+  --silex-accent-primary: var(--gjs-tertiary-color);
+  --silex-accent-secondary: var(--gjs-quaternary-color);
+  --silex-status-info: var(--gjs-color-blue);
+  --silex-status-success: var(--gjs-color-green);
+  --silex-status-warning: var(--gjs-color-yellow);
+  --silex-status-error: var(--gjs-color-red);
+  --silex-button-bg: var(--gjs-primary-lighter);
+  --silex-button-hover-bg: var(--gjs-primary-darker);
+  --silex-input-bg: var(--gjs-primary-darker);
+  --silex-badge-bg: #c4c4c4;
+  --silex-badge-text: #3d3d3d;
+  --silex-top-bar-height: 40px;
+  --silex-project-bar-width: 35px;
+  --silex-footer-height: 30px;
+  --silex-transition-fast: 0.15s;
+  --silex-transition-medium: 0.3s;
+  --silex-font-family: Ubuntu, sans-serif;
+  --silex-z-dialog: 10;
+  --silex-z-loader: 11;
+}
+
+/**
+ * THEME-MODERN.SCSS
+ * Modern Dark Theme 2025 for Silex
+ *
+ * Design Philosophy:
+ * - Minimalisme structuré
+ * - Beaucoup d'espace visuel
+ * - Ombres très douces, jamais fortes
+ * - Pas de gradients visibles
+ * - Micro-interactions 150–200ms
+ * - Haute lisibilité
+ * - Harmonie avec les IDE modernes (VS Code, etc.)
+ *
+ * Palette (Solid & Modern):
+ * - Global background: #111111
+ * - Surfaces: #1A1A1A, #1D1D1D
+ * - Borders: #262626
+ * - Primary text: #E5E5E5
+ * - Secondary text: #A8A8A8
+ * - Accent: #8873FE (purple moderne)
+ */
+:root {
+  --primaryColor: #1A1A1A;
+  --gjs-primary-color: #1A1A1A !important;
+  --secondaryColor: #E5E5E5;
+  --gjs-secondary-color: #E5E5E5 !important;
+  --gjs-font-color: #E5E5E5 !important;
+  --gjs-font-color-active: #FFFFFF !important;
+  --tertiaryColor: #8873FE;
+  --gjs-tertiary-color: #8873FE !important;
+  --quaternaryColor: #7461E3;
+  --gjs-quaternary-color: #7461E3 !important;
+  --darkerPrimaryColor: #111111;
+  --lighterPrimaryColor: #1D1D1D;
+  --gjs-primary-darker: #111111;
+  --gjs-primary-lighter: #1D1D1D;
+  --gjs-main-color: #1A1A1A;
+  --gjs-main-dark-color: rgba(0, 0, 0, 0.3);
+  --gjs-secondary-dark-color: rgba(0, 0, 0, 0.15);
+  --gjs-main-light-color: rgba(255, 255, 255, 0.08);
+  --gjs-secondary-light-color: rgba(255, 255, 255, 0.5);
+  --gjs-soft-light-color: rgba(255, 255, 255, 0.02);
+  --gjs-color-blue: #6B8AFF;
+  --gjs-color-green: #5FD68F;
+  --gjs-color-yellow: #FFA94D;
+  --gjs-color-red: #FF6B6B;
+  --gjs-color-highlight: #8873FE;
+  --gjs-color-warn: #FFA94D;
+  --silex-bg-main: #1A1A1A;
+  --silex-bg-darker: #111111;
+  --silex-bg-lighter: #1D1D1D;
+  --silex-bg-surface: #1A1A1A;
+  --silex-text-primary: #E5E5E5;
+  --silex-text-secondary: #A8A8A8;
+  --silex-text-inverse: #FFFFFF;
+  --silex-border-color: rgba(255, 255, 255, 0.08);
+  --silex-border-color-strong: #262626;
+  --gjs-light-border: rgba(255, 255, 255, 0.08);
+  --silex-shadow-color: rgba(0, 0, 0, 0.4);
+  --silex-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --silex-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --silex-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --silex-hover-bg: #222222;
+  --silex-active-bg: #252525;
+  --silex-focus-outline: #8873FE;
+  --silex-accent-primary: #8873FE;
+  --silex-accent-secondary: #7461E3;
+  --silex-status-info: #6B8AFF;
+  --silex-status-success: #5FD68F;
+  --silex-status-warning: #FFA94D;
+  --silex-status-error: #FF6B6B;
+  --silex-button-bg: #252525;
+  --silex-button-hover-bg: #2D2D2D;
+  --silex-input-bg: #141414;
+  --silex-badge-bg: #2D2D2D;
+  --silex-badge-text: #E5E5E5;
+  --silex-transition-fast: 0.15s;
+  --silex-transition-medium: 0.2s;
+  --gjs-animation-duration: 0.18s;
+  --gjs-scrollbar-track: #1A1A1A;
+  --gjs-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --gjs-border-color: #262626;
+  --gjs-arrow-color: rgba(255, 255, 255, 0.5);
+  --gjs-dark-text-shadow: rgba(0, 0, 0, 0.4);
+}
+
+.gjs-editor-cont ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.gjs-editor-cont ::-webkit-scrollbar-track {
+  background: var(--gjs-scrollbar-track);
+}
+.gjs-editor-cont ::-webkit-scrollbar-thumb {
+  background: var(--gjs-scrollbar-thumb);
+  border-radius: 5px;
+}
+.gjs-editor-cont ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+button,
+.gjs-pn-btn,
+.silex-button,
+input,
+select,
+.gjs-block,
+.gjs-layer {
+  transition: all var(--silex-transition-fast) ease;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--silex-focus-outline);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+::selection {
+  background-color: rgba(136, 115, 254, 0.3);
+  color: #FFFFFF;
+}
+
+.gjs-pn-btn,
+.silex-button {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.gjs-pn-btn:hover,
+.silex-button:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+.gjs-pn-btn:active,
+.silex-button:active {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.gjs-pn-panel,
+.silex-dialog-inline {
+  backdrop-filter: blur(10px);
+}
+
+input[type=text],
+input[type=number],
+select,
+textarea {
+  border: 1px solid var(--silex-border-color-strong);
+  border-radius: 4px;
+}
+input[type=text]:hover,
+input[type=number]:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gjs-secondary-light-color);
+}
+input[type=text]:focus,
+input[type=number]:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--silex-accent-primary);
+  box-shadow: 0 0 0 3px rgba(136, 115, 254, 0.15);
+}
+
+.gjs-pn-panel,
+.project-bar__panel-header,
+.settings-header {
+  border-bottom-color: var(--silex-border-color-strong);
+}
+
+.gjs-block {
+  border: 1px solid var(--silex-border-color);
+  border-radius: 6px;
+  background: var(--silex-bg-lighter);
+}
+.gjs-block:hover {
+  border-color: var(--silex-accent-primary);
+  background: var(--silex-hover-bg);
+}
+
+.gjs-layer.gjs-selected {
+  background-color: var(--silex-active-bg);
+  border-left: 2px solid var(--silex-accent-primary);
+}
+.gjs-layer:hover {
+  background-color: var(--silex-hover-bg);
+}
+
+.gjs-toolbar {
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
 /* Silex styles imports */
 .silex-workspace {
   position: absolute;
@@ -3951,7 +4202,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .silex-workspace h2 {
   font-size: 18px;
-  background: #575757;
+  background: var(--silex-bg-lighter);
   border-radius: 8px 8px 0 0;
   padding: 8px;
   margin: 0;
@@ -3962,11 +4213,24 @@ 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 select,
+.silex-workspace input {
+  background-color: var(--silex-input-bg);
 }
-.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;
+.silex-workspace select.gjs-input-unit {
+  height: 100%;
+  background-color: transparent;
+}
+.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: var(--silex-text-primary);
 }
 
 .full-width {
@@ -4002,21 +4266,28 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   pointer-events: auto;
   overflow: hidden; /* settings scroll is on .settings-body */
   display: flex;
-  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+.settings-dialog .silex-bar .silex-list {
+  display: flex;
 }
 .settings-dialog .settings-content {
-  flex: 1;
   display: flex;
   flex-direction: column;
   background-color: var(--primaryColor);
-  overflow: hidden;
+  overflow: auto;
+  width: 920px;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
 }
 .settings-dialog .settings-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid var(--gjs-border-color, #ddd);
+  border-bottom: 1px solid var(--silex-border-color-strong);
 }
 .settings-dialog .settings-header h3 {
   margin: 0;
@@ -4046,36 +4317,23 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   flex-direction: column;
 }
 .settings-dialog .settings-body .silex-sidebar-dialog {
-  flex: 1;
-}
-.settings-dialog footer {
-  position: fixed;
-  z-index: 10;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding: 20px 0;
-}
-.settings-dialog form.silex-form {
-  padding-bottom: 100px;
+  flex-direction: column;
 }
 .settings-dialog form.silex-form textarea {
   min-height: 250px;
 }
 .settings-dialog .silex-form__element {
   padding: 10px 5px;
-  border: 1px solid #575757;
   margin: 10px 0;
   width: 98%;
 }
 .settings-dialog footer {
-  position: fixed;
   z-index: 10;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 20px 0;
-  background-color: #333333;
+  background-color: var(--silex-bg-main);
 }
 .settings-dialog footer > *:last-child {
   margin-right: 30px;
@@ -4100,28 +4358,26 @@ input.silex-button[type=button],
 input.silex-button[type=submit] {
   cursor: pointer;
   font-family: inherit;
-  color: #fff;
+  color: var(--silex-text-inverse);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #e9ebeb;
-  border-bottom-color: #e1e3e3;
+  border: 1px solid var(--silex-border-color);
   border-radius: 4px;
-  box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
-  background-color: #575757;
-  border-color: transparent;
+  box-shadow: var(--silex-shadow-sm);
+  background-color: var(--silex-button-bg);
   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;
+  box-shadow: 0 0 0 2px var(--silex-focus-outline);
 }
 button.silex-button:hover,
 input.silex-button[type=button]:hover,
 input.silex-button[type=submit]:hover {
-  background-color: #292929;
+  background-color: var(--silex-button-hover-bg);
 }
 
 .silex-button.disabled,
@@ -4131,11 +4387,11 @@ input.silex-button[type=submit]:hover {
 }
 
 .silex-button.silex-button--primary {
-  background-color: #575757;
+  background-color: var(--silex-button-bg);
 }
 
 .silex-button.silex-button--secondary {
-  background-color: #333333;
+  background-color: var(--silex-bg-main);
 }
 
 .silex-button--size {
@@ -4159,6 +4415,7 @@ input.silex-button[type=submit]:hover {
 .silex-sidebar-dialog,
 .silex-bar {
   display: flex;
+  align-items: start;
 }
 .silex-sidebar-dialog > *,
 .silex-bar > * {
@@ -4166,7 +4423,7 @@ input.silex-button[type=submit]:hover {
 }
 .silex-sidebar-dialog main,
 .silex-bar main {
-  width: 93%;
+  width: 99%;
 }
 
 ol.silex-list,
@@ -4178,12 +4435,12 @@ ul.silex-list {
 ol.silex-list > li,
 ul.silex-list > li {
   padding: 5px;
-  border-bottom: 1px solid #575757;
+  border-bottom: 1px solid var(--silex-border-color-strong);
   margin: 5px;
 }
 ol.silex-list fieldset,
 ul.silex-list fieldset {
-  border-color: #575757;
+  border-color: var(--silex-border-color-strong);
 }
 ol.silex-list h4,
 ul.silex-list h4 {
@@ -4192,8 +4449,8 @@ ul.silex-list h4 {
   padding-bottom: 2px;
   margin: 10px 5px;
   font-weight: normal;
-  color: #3d3d3d;
-  background-color: #c4c4c4;
+  color: var(--silex-badge-text);
+  background-color: var(--silex-badge-bg);
 }
 ol.silex-list .silex-list__item__body,
 ul.silex-list .silex-list__item__body {
@@ -4216,19 +4473,23 @@ ul.silex-list--menu > li {
   padding: 15px;
   margin: 0;
   border: 1px solid transparent;
-  border-bottom-color: #575757;
+  border-bottom-color: var(--silex-border-color-strong);
   text-align: center;
   cursor: pointer;
 }
 ol.silex-list--menu > li:first-child,
 ul.silex-list--menu > li:first-child {
-  border-top-color: #575757;
+  border-top-color: var(--silex-border-color-strong);
 }
-ol.silex-list--menu .active, ol.silex-list--menu > li:hover,
-ul.silex-list--menu .active,
+ol.silex-list--menu > li:hover,
 ul.silex-list--menu > li:hover {
-  color: #8873FE;
-  background-color: #292929;
+  color: var(--silex-accent-primary);
+  background-color: var(--silex-hover-bg);
+}
+ol.silex-list--menu .active,
+ul.silex-list--menu .active {
+  color: var(--silex-accent-primary);
+  background-color: var(--silex-hover-bg);
 }
 
 form.silex-form {
@@ -4237,13 +4498,17 @@ form.silex-form {
 }
 form.silex-form footer {
   text-align: right;
-  border-top: 1px solid #575757;
+  border-top: 1px solid var(--silex-border-color-strong);
   padding: 20px 0 10px;
   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: #292929;
-  color: #ddd;
+form.silex-form button,
+form.silex-form input,
+form.silex-form optgroup,
+form.silex-form select,
+form.silex-form textarea {
+  background-color: var(--silex-input-bg);
+  color: var(--silex-text-primary);
   padding: 5px;
   border: none;
 }
@@ -4257,9 +4522,6 @@ form.silex-form .silex-form__element {
   display: inline-flex;
   flex-direction: column;
 }
-form.silex-form .silex-form__group.col2 {
-  column-count: 2;
-}
 
 .silex-loader {
   position: absolute;
@@ -4319,37 +4581,37 @@ form.silex-form .silex-form__group.col2 {
   bottom: 0;
   left: 35px;
   right: var(--viewsPanelWidth);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--silex-shadow-sm);
   height: 30px;
 }
 
 .silex-main {
-  transition: opacity 0.15s 0.5s ease;
+  transition: opacity var(--silex-transition-fast) 0.5s ease;
 }
 
 .silex-dialog {
-  transition: opacity 0.15s ease;
+  transition: opacity var(--silex-transition-fast) ease;
 }
 
 .silex-dialog-hide {
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0.3s 1s ease;
+  transition: opacity var(--silex-transition-fast) ease, visibility var(--silex-transition-medium) 1s ease;
 }
 
 .silex-dialog-inline {
   position: absolute;
-  background-color: #333333;
-  z-index: 10;
+  background-color: var(--silex-bg-main);
+  z-index: var(--silex-z-dialog);
   border-radius: 3px;
-  border: 2px solid #575757;
-  box-shadow: 0 0 10px 0 #575757;
+  border: 2px solid var(--silex-border-color-strong);
+  box-shadow: var(--silex-shadow-md);
   display: flex;
   flex-direction: column;
 }
 .silex-dialog-inline header {
   padding: 10px;
-  border-bottom: 1px solid #575757;
+  border-bottom: 1px solid var(--silex-border-color-strong);
 }
 .silex-dialog-inline main {
   flex-grow: 1;
@@ -4360,63 +4622,67 @@ form.silex-form .silex-form__group.col2 {
 .silex-dialog-inline footer {
   padding: 10px;
   text-align: right;
-  border-top: 1px solid #575757;
+  border-top: 1px solid var(--silex-border-color-strong);
 }
 .silex-dialog-inline a {
-  color: #A291FF;
+  color: var(--silex-accent-secondary);
 }
 .silex-dialog-inline header > * {
   margin: 0;
 }
 
+details.silex-more,
 .silex-help {
   margin: 10px 0;
   padding: 10px;
-  border: 1px solid #575757;
+  border: 1px solid var(--silex-border-color-strong);
   border-radius: 3px;
-  background-color: #575757;
-  color: #ddd;
+  background-color: var(--silex-bg-lighter);
+  color: var(--silex-text-primary);
   font-size: small;
 }
+details.silex-more p,
 .silex-help p {
   margin: 0;
 }
+details.silex-more a,
 .silex-help a {
-  color: #A291FF;
+  color: var(--silex-accent-secondary);
+}
+details.silex-more label,
+.silex-help label {
+  background-color: var(--silex-bg-main);
 }
 
 :focus-visible {
-  outline: 2px solid #8873FE;
+  outline: 2px solid var(--silex-focus-outline);
   outline-offset: 2px;
 }
 
-.fonts-dialog .gjs-mdl-dialog {
-  width: 100%;
-  max-width: unset;
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.fonts-dialog .gjs-mdl-content {
-  flex: 1 1 auto;
+.fonts-dialog h2 {
+  font-weight: lighter;
+  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);
 }
 .fonts-dialog .silex-form__element {
   margin-bottom: 80px;
 }
-.fonts-dialog .silex-list li {
-  border-bottom: none;
-}
-.fonts-dialog h2 {
+.fonts-dialog .variants-toolbar .silex-button {
+  padding: 0 !important;
+  font-weight: normal;
+  background: none;
+  border: none;
+  font-size: small;
+  text-decoration: underline;
   border-radius: 0;
-  background-color: transparent;
 }
-.fonts-dialog footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 20px !important;
-  background-color: #333333;
+.fonts-dialog .silex-button {
+  background: none;
+  border: none;
+  font-weight: normal !important;
+  box-shadow: none;
 }
 
 .silex-squeeze-left .gjs-cv-canvas {
@@ -4442,13 +4708,13 @@ form.silex-form .silex-form__group.col2 {
   padding: 5px;
 }
 .gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn.gjs-pn-active {
-  background-color: #575757;
+  background-color: var(--silex-active-bg);
   width: 35px;
   box-shadow: none;
 }
 .gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn.project-bar__dirty {
-  background-color: #A291FF;
-  color: white;
+  background-color: var(--silex-accent-secondary);
+  color: var(--silex-text-inverse);
 }
 .gjs-pn-project-bar-panel .logo {
   background-image: url("../assets/logo-silex-small.png");
@@ -4458,15 +4724,14 @@ form.silex-form .silex-form__group.col2 {
   background-size: contain;
 }
 
-.viewsOptionsProjectPanel__size-btn::before {
-  content: "→";
-}
-
 .viewsOptionsProjectPanel__size-btn {
   z-index: 5;
   right: auto;
   left: 0;
 }
+.viewsOptionsProjectPanel__size-btn::before {
+  content: "→";
+}
 
 .gjs-block {
   width: 84px;
@@ -4477,7 +4742,7 @@ form.silex-form .silex-form__group.col2 {
   width: 13%;
   min-width: 150px;
   height: calc(100% - 40px - 30px);
-  background-color: #575757;
+  background-color: var(--silex-bg-lighter);
 }
 .gjs-pn-project-bar-container:not(.gjs-hidden) {
   display: flex;
@@ -4487,11 +4752,11 @@ form.silex-form .silex-form__group.col2 {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #333333;
+  background-color: var(--silex-bg-main);
   overflow: auto;
 }
 .gjs-pn-project-bar-container .project-bar__panel:not(.gjs-hidden) .gjs-layer {
-  background-color: #333333;
+  background-color: var(--silex-bg-main);
 }
 .gjs-pn-project-bar-container .project-bar__panel > *:not(header) {
   flex: 1;
@@ -4502,7 +4767,7 @@ form.silex-form .silex-form__group.col2 {
   justify-content: center;
   align-items: center;
   padding: 5px;
-  border-bottom: 1px solid #575757;
+  border-bottom: 1px solid var(--silex-border-color-strong);
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-title {
   flex: 1 1 auto;
@@ -4518,13 +4783,13 @@ form.silex-form .silex-form__group.col2 {
   cursor: pointer;
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button span {
-  background-color: #444;
+  background-color: var(--silex-bg-darker);
   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: #A291FF;
+  color: var(--silex-accent-secondary);
 }
 
 .page-panel-container .pages__wrapper {
@@ -4538,22 +4803,22 @@ form.silex-form .silex-form__group.col2 {
 }
 .page-panel-container .pages .pages__main {
   flex: 1;
-  background-color: #333333;
+  background-color: var(--silex-bg-main);
   min-height: 20vh;
 }
 .page-panel-container .pages .pages__page {
   display: flex;
   align-items: center;
-  background-color: #292929;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  background-color: var(--silex-bg-darker);
+  border-bottom: 1px solid var(--silex-border-color);
   cursor: cursor;
   transition: opacity 0.2s ease, background-color 0.2s ease;
 }
 .page-panel-container .pages .pages__page:hover {
-  background-color: #333333;
+  background-color: var(--silex-hover-bg);
 }
 .page-panel-container .pages .pages__page:hover .pages__page-name {
-  color: #A291FF;
+  color: var(--silex-accent-secondary);
 }
 .page-panel-container .pages .pages__page:active {
   cursor: grabbing;
@@ -4563,11 +4828,11 @@ form.silex-form .silex-form__group.col2 {
   cursor: grabbing !important;
 }
 .page-panel-container .pages .pages__page-selected {
-  background-color: #575757;
+  background-color: var(--silex-active-bg);
   cursor: default;
 }
 .page-panel-container .pages .pages__page-selected .pages__page-name {
-  color: #A291FF;
+  color: var(--silex-accent-secondary);
 }
 .page-panel-container .pages .pages__main.pages__single-page .pages__remove-btn {
   visibility: hidden;
@@ -4591,7 +4856,7 @@ form.silex-form .silex-form__group.col2 {
   font-size: 12px;
 }
 .page-panel-container .pages .pages__icon:hover {
-  color: #A291FF;
+  color: var(--silex-accent-secondary);
 }
 .page-panel-container .pages .pages__drag-handle {
   cursor: grab;
@@ -4604,6 +4869,7 @@ form.silex-form .silex-form__group.col2 {
 .page-panel-container .gjs-pn-buttons {
   flex-direction: column;
 }
+
 .gjs-website-meta {
   display: flex;
   align-items: center;
@@ -4613,8 +4879,8 @@ form.silex-form .silex-form__group.col2 {
   padding: 0 10px;
   line-height: 1;
   min-width: 100px;
-  border: 1px solid #575757;
-  background-color: #292929;
+  border: 1px solid var(--silex-border-color-strong);
+  background-color: var(--silex-bg-darker);
 }
 
 .grp-wrapper {
@@ -4696,51 +4962,51 @@ form.silex-form .silex-form__group.col2 {
 .fa-arrows::before {
   display: block;
   content: "" !important;
-  border: 2px solid #8873FE;
+  border: 2px solid var(--silex-accent-primary);
   width: 10px;
   height: 10px;
   margin: auto;
-  border-color: #ddd;
+  border-color: var(--silex-text-primary);
 }
 
 .fa-long-arrow-up::before {
   display: block;
   content: "" !important;
-  border: 2px solid #8873FE;
+  border: 2px solid var(--silex-accent-primary);
   width: 10px;
   height: 10px;
   margin: auto;
-  border-top-color: #ddd;
+  border-top-color: var(--silex-text-primary);
 }
 
 .fa-long-arrow-down::before {
   display: block;
   content: "" !important;
-  border: 2px solid #8873FE;
+  border: 2px solid var(--silex-accent-primary);
   width: 10px;
   height: 10px;
   margin: auto;
-  border-bottom-color: #ddd;
+  border-bottom-color: var(--silex-text-primary);
 }
 
 .fa-long-arrow-left::before {
   display: block;
   content: "" !important;
-  border: 2px solid #8873FE;
+  border: 2px solid var(--silex-accent-primary);
   width: 10px;
   height: 10px;
   margin: auto;
-  border-left-color: #ddd;
+  border-left-color: var(--silex-text-primary);
 }
 
 .fa-long-arrow-right::before {
   display: block;
   content: "" !important;
-  border: 2px solid #8873FE;
+  border: 2px solid var(--silex-accent-primary);
   width: 10px;
   height: 10px;
   margin: auto;
-  border-right-color: #ddd;
+  border-right-color: var(--silex-text-primary);
 }
 
 .gjs-radio-item-label:after {
@@ -4783,7 +5049,8 @@ form.silex-form .silex-form__group.col2 {
 }
 #publish-dialog .notice {
   margin: 10px 0;
-  background-color: rgba(255, 166, 0, 0.2);
+  background-color: var(--silex-status-warning);
+  opacity: 0.2;
   border-radius: 5px;
   padding: 10px;
 }
@@ -4793,13 +5060,13 @@ form.silex-form .silex-form__group.col2 {
   border: none;
   height: 5px;
   animation: pub-blink 0.33s infinite alternate;
-  background-color: #8873FE;
+  background-color: var(--silex-accent-primary);
 }
 #publish-dialog progress::-webkit-progress-bar {
-  background-color: #8873FE;
+  background-color: var(--silex-accent-primary);
 }
 #publish-dialog progress::-moz-progress-bar {
-  background-color: #8873FE;
+  background-color: var(--silex-accent-primary);
 }
 #publish-dialog header {
   display: flex;
@@ -4816,14 +5083,14 @@ form.silex-form .silex-form__group.col2 {
   margin-right: 5px;
 }
 #publish-dialog header button {
-  border: solid 2px #484848;
+  border: solid 2px var(--silex-border-color-strong);
   border-radius: 50px;
   padding: 4px 9px;
-  background-color: #444;
-  color: #ddd;
+  background-color: var(--silex-bg-darker);
+  color: var(--silex-text-primary);
 }
 #publish-dialog header .connector {
-  color: #A291FF;
+  color: var(--silex-accent-secondary);
 }
 #publish-dialog main {
   max-height: none;
@@ -4847,8 +5114,8 @@ form.silex-form .silex-form__group.col2 {
 }
 #publish-dialog main details {
   border-radius: 5px;
-  border: solid #222 2px;
-  background-color: #222;
+  border: solid var(--silex-border-color) 2px;
+  background-color: var(--silex-bg-darker);
   margin: 10px 0;
   padding: 10px;
   word-break: break-word;
@@ -4875,12 +5142,12 @@ form.silex-form .silex-form__group.col2 {
 }
 #publish-dialog main details .logs *:hover {
   transition: 200ms;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: var(--gjs-soft-light-color);
 }
 #publish-dialog main details:hover {
   transition: 200ms;
-  border-color: #575757;
-  background-color: #292929;
+  border-color: var(--silex-border-color-strong);
+  background-color: var(--silex-hover-bg);
 }
 #publish-dialog main details * {
   transition: 200ms;
@@ -4900,7 +5167,7 @@ form.silex-form .silex-form__group.col2 {
   filter: brightness(0.8);
 }
 #publish-dialog main .silex-button--primary {
-  background-color: #8873FE;
+  background-color: var(--silex-accent-primary);
 }
 
 .gjs-suggest {
@@ -4908,7 +5175,19 @@ form.silex-form .silex-form__group.col2 {
   overflow-y: scroll;
   overflow-x: hidden;
   padding-top: 7px;
-  border-bottom: solid #333333 7px;
+  border-bottom: solid var(--silex-bg-main) 7px;
+}
+
+:root {
+  --expression-input-dirty-background-color: transparent !important;
+  --expression-input-dirty-border-radius: 5px !important;
+  --expression-input-active-background-color: var(--gjs-main-light-color) !important;
+  --expression-input-active-color: var(--gjs-secondary-color) !important;
+  --expression-input-dirty-border-color: var(--expression-input-active-background-color) !important;
+}
+
+.property-container::part(property-container) {
+  padding: 0 !important;
 }
 
 #gjs {
@@ -4916,40 +5195,40 @@ form.silex-form .silex-form__group.col2 {
 }
 
 .gjs-one-bg {
-  background-color: #333333;
+  background-color: var(--gjs-primary-color);
 }
 .gjs-one-color {
-  color: #333333;
+  color: var(--gjs-primary-color);
 }
 .gjs-one-color-h:hover {
-  color: #333333;
+  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: #8873FE;
+  background-color: var(--gjs-tertiary-color);
 }
 .gjs-three-color {
-  color: #8873FE;
+  color: var(--gjs-tertiary-color);
 }
 .gjs-three-color-h:hover {
-  color: #8873FE;
+  color: var(--gjs-tertiary-color);
 }
 .gjs-four-bg {
-  background-color: #A291FF;
+  background-color: var(--gjs-quaternary-color);
 }
 .gjs-four-color {
-  color: #A291FF;
+  color: var(--gjs-quaternary-color);
 }
 .gjs-four-color-h:hover {
-  color: #A291FF;
+  color: var(--gjs-quaternary-color);
 }
 
 .gjs-cv-canvas,
@@ -4982,29 +5261,32 @@ form.silex-form .silex-form__group.col2 {
 }
 
 .gjs-mdl-header {
-  background-color: #333333;
-  color: #ddd;
+  background-color: var(--silex-bg-main);
+  color: var(--silex-text-primary);
   padding: 20px;
-  border-bottom: 1px solid #575757;
+  border-bottom: 1px solid var(--silex-border-color-strong);
 }
 .gjs-mdl-header .gjs-mdl-btn-close {
   top: 15px;
 }
 
 .gjs-toolbar {
-  background-color: #8873FE;
+  background-color: var(--silex-accent-primary);
 }
 
 .gjs-resizer-h {
-  border-color: #8873FE;
+  border-color: var(--silex-accent-primary);
 }
 
-.gjs-com-badge, .gjs-com-badge-red, .gjs-badge {
-  background-color: #8873FE;
+.gjs-com-badge,
+.gjs-com-badge-red,
+.gjs-badge {
+  background-color: var(--silex-accent-primary);
 }
 
-.gjs-cv-canvas .gjs-highlighter, .gjs-cv-canvas .gjs-highlighter-sel {
-  outline: 1px solid #8873FE;
+.gjs-cv-canvas .gjs-highlighter,
+.gjs-cv-canvas .gjs-highlighter-sel {
+  outline: 1px solid var(--silex-accent-primary);
 }
 
 .gjs-cv-canvas {
@@ -5030,9 +5312,9 @@ form.silex-form .silex-form__group.col2 {
 .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);
+  border-bottom: solid var(--silex-border-color-strong) 1px;
+  background-color: var(--silex-bg-main);
+  box-shadow: var(--silex-shadow-lg);
   z-index: 999;
 }
 
@@ -5194,6 +5476,480 @@ form.silex-form .silex-form__group.col2 {
   z-index: 999;
 }
 
+/**
+ * PANELS.SCSS
+ * Unified styling for all left-side panels (Blocks, Pages, Symbols, Layers)
+ * Ensures consistent look and behavior across all project panels
+ */
+.gjs-pn-project-bar-container .project-bar__panel .project-bar__panel-header {
+  background-color: var(--silex-bg-lighter);
+  border-bottom: 1px solid var(--silex-border-color-strong);
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+}
+.gjs-pn-project-bar-container .project-bar__panel .project-bar__panel-header .project-bar__panel-header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--silex-text-primary);
+  letter-spacing: 0.02em;
+}
+.gjs-pn-project-bar-container .project-bar__panel .project-bar__panel-header .project-bar__panel-header-button {
+  opacity: 0.7;
+  transition: opacity var(--silex-transition-fast);
+}
+.gjs-pn-project-bar-container .project-bar__panel .project-bar__panel-header .project-bar__panel-header-button:hover {
+  opacity: 1;
+  color: var(--silex-accent-primary);
+}
+.gjs-pn-project-bar-container .project-bar__panel > main, .gjs-pn-project-bar-container .project-bar__panel > .gjs-blocks-c, .gjs-pn-project-bar-container .project-bar__panel > *:not(header) {
+  background-color: var(--silex-bg-main);
+  padding: 8px;
+}
+
+.gjs-blocks-c .gjs-block-category {
+  margin-bottom: 8px;
+}
+.gjs-blocks-c .gjs-block-category .gjs-title {
+  padding: 8px 12px;
+  background-color: var(--silex-bg-lighter);
+  border: 1px solid var(--silex-border-color);
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--silex-text-secondary);
+  cursor: pointer;
+  transition: all var(--silex-transition-fast);
+}
+.gjs-blocks-c .gjs-block-category .gjs-title:hover {
+  background-color: var(--silex-hover-bg);
+  color: var(--silex-text-primary);
+  border-color: var(--silex-accent-primary);
+}
+.gjs-blocks-c .gjs-block-category .gjs-blocks-c {
+  padding: 8px 0;
+}
+.gjs-blocks-c .gjs-block {
+  margin: 6px;
+  padding: 12px;
+  background-color: var(--silex-bg-lighter);
+  border: 1px solid var(--silex-border-color);
+  border-radius: 6px;
+  transition: all var(--silex-transition-fast);
+  /* symbols */
+}
+.gjs-blocks-c .gjs-block:hover {
+  background-color: var(--silex-hover-bg);
+  border-color: var(--silex-accent-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+.gjs-blocks-c .gjs-block .gjs-block-label {
+  font-size: 11px;
+  color: var(--silex-text-secondary);
+  margin-top: 8px;
+}
+.gjs-blocks-c .gjs-block.symbols__symbol-selected {
+  border-color: var(--silex-accent-primary);
+}
+
+.page-panel-container .pages .pages__main {
+  padding: 4px;
+}
+.page-panel-container .pages .pages__page {
+  margin: 2px 0;
+  padding: 10px 12px;
+  border-radius: 4px;
+  background-color: var(--silex-bg-darker);
+  border: 1px solid transparent;
+}
+.page-panel-container .pages .pages__page:hover {
+  background-color: var(--silex-hover-bg);
+  border-color: var(--silex-border-color);
+}
+.page-panel-container .pages .pages__page.pages__page-selected {
+  background-color: var(--silex-active-bg);
+  border-color: var(--silex-accent-primary);
+  border-left-width: 3px;
+}
+.page-panel-container .pages .pages__page-name {
+  font-size: 13px;
+  color: var(--silex-text-primary);
+}
+.page-panel-container .pages .pages__icon {
+  opacity: 0.6;
+  transition: opacity var(--silex-transition-fast);
+}
+.page-panel-container .pages .pages__icon:hover {
+  opacity: 1;
+  color: var(--silex-accent-primary);
+}
+.page-panel-container .pages__collection-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--silex-border-color-strong);
+}
+.page-panel-container .pages__collection-section h3 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--silex-text-secondary);
+  margin-bottom: 8px;
+}
+
+.gjs-layer-wrapper .gjs-layer {
+  padding: 6px 8px;
+  margin: 1px 0;
+  border-radius: 3px;
+  transition: background-color var(--silex-transition-fast);
+}
+.gjs-layer-wrapper .gjs-layer:hover {
+  background-color: var(--silex-hover-bg);
+}
+.gjs-layer-wrapper .gjs-layer.gjs-selected {
+  background-color: var(--silex-active-bg);
+  border-left: 3px solid var(--silex-accent-primary);
+}
+.gjs-layer-wrapper .gjs-layer .gjs-layer-title {
+  font-size: 12px;
+  color: var(--silex-text-primary);
+}
+.gjs-layer-wrapper .gjs-layer .gjs-layer-count {
+  font-size: 10px;
+  color: var(--silex-text-secondary);
+}
+
+.symbols-panel .symbol-item {
+  padding: 10px 12px;
+  margin: 4px 0;
+  background-color: var(--silex-bg-lighter);
+  border: 1px solid var(--silex-border-color);
+  border-radius: 4px;
+  transition: all var(--silex-transition-fast);
+}
+.symbols-panel .symbol-item:hover {
+  background-color: var(--silex-hover-bg);
+  border-color: var(--silex-accent-primary);
+}
+.symbols-panel .symbol-item.selected {
+  background-color: var(--silex-active-bg);
+  border-color: var(--silex-accent-primary);
+  border-left-width: 3px;
+}
+
+.gjs-pn-project-bar-container .project-bar__panel ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.gjs-pn-project-bar-container .project-bar__panel ::-webkit-scrollbar-track {
+  background: var(--silex-bg-main);
+}
+.gjs-pn-project-bar-container .project-bar__panel ::-webkit-scrollbar-thumb {
+  background: var(--silex-border-color-strong);
+  border-radius: 4px;
+}
+.gjs-pn-project-bar-container .project-bar__panel ::-webkit-scrollbar-thumb:hover {
+  background: var(--silex-accent-secondary);
+}
+
+/**
+ * DIALOGS.SCSS
+ * Unified styling for all dialogs (Settings, Fonts, modals)
+ * Ensures consistent modern look across all popup interfaces
+ *
+ * Note: There is also a dialog.scss file for inline dialogs.
+ * This file handles modal/fullscreen dialogs.
+ */
+.gjs-mdl-dialog {
+  background-color: var(--silex-bg-main);
+  border: 1px solid var(--silex-border-color-strong);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+}
+
+.gjs-mdl-header {
+  background-color: var(--silex-bg-lighter);
+  color: var(--silex-text-primary);
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--silex-border-color-strong);
+  border-radius: 8px 8px 0 0;
+}
+.gjs-mdl-header .gjs-mdl-title {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+.gjs-mdl-header .gjs-mdl-btn-close {
+  color: var(--silex-text-secondary);
+  opacity: 0.7;
+  transition: all var(--silex-transition-fast);
+}
+.gjs-mdl-header .gjs-mdl-btn-close:hover {
+  opacity: 1;
+  color: var(--silex-accent-primary);
+  transform: scale(1.1);
+}
+
+.gjs-mdl-content {
+  background-color: var(--silex-bg-main);
+  padding: 24px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.gjs-mdl-content::-webkit-scrollbar {
+  width: 10px;
+}
+.gjs-mdl-content::-webkit-scrollbar-track {
+  background: var(--silex-bg-darker);
+}
+.gjs-mdl-content::-webkit-scrollbar-thumb {
+  background: var(--silex-border-color-strong);
+  border-radius: 5px;
+}
+.gjs-mdl-content::-webkit-scrollbar-thumb:hover {
+  background: var(--silex-accent-secondary);
+}
+
+.gjs-mdl-dialog-fonts .gjs-mdl-content,
+.fonts-dialog .gjs-mdl-content {
+  min-height: 400px;
+  max-height: 70vh;
+}
+.gjs-mdl-dialog-fonts::after,
+.fonts-dialog::after {
+  content: "";
+  display: block;
+  height: 60px;
+  background-color: var(--silex-bg-lighter);
+  border-top: 1px solid var(--silex-border-color-strong);
+}
+
+.gjs-fonts-c .font-item,
+[class*=fonts] .font-item {
+  padding: 12px 16px;
+  margin: 6px 0;
+  background-color: var(--silex-bg-lighter);
+  border: 1px solid var(--silex-border-color);
+  border-radius: 6px;
+  transition: all var(--silex-transition-fast);
+}
+.gjs-fonts-c .font-item:hover,
+[class*=fonts] .font-item:hover {
+  background-color: var(--silex-hover-bg);
+  border-color: var(--silex-accent-primary);
+}
+.gjs-fonts-c .font-item .font-name,
+[class*=fonts] .font-item .font-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--silex-text-primary);
+  margin-bottom: 4px;
+}
+.gjs-fonts-c .font-item .font-preview,
+[class*=fonts] .font-item .font-preview {
+  font-size: 12px;
+  color: var(--silex-text-secondary);
+}
+
+.gjs-mdl-dialog input[type=text],
+.gjs-mdl-dialog input[type=email],
+.gjs-mdl-dialog input[type=url],
+.gjs-mdl-dialog input[type=number],
+.gjs-mdl-dialog select,
+.gjs-mdl-dialog textarea,
+.settings-dialog input[type=text],
+.settings-dialog input[type=email],
+.settings-dialog input[type=url],
+.settings-dialog input[type=number],
+.settings-dialog select,
+.settings-dialog textarea,
+.silex-dialog-inline input[type=text],
+.silex-dialog-inline input[type=email],
+.silex-dialog-inline input[type=url],
+.silex-dialog-inline input[type=number],
+.silex-dialog-inline select,
+.silex-dialog-inline textarea {
+  background-color: var(--silex-input-bg);
+  border: 1px solid var(--silex-border-color-strong);
+  color: var(--silex-text-primary);
+  padding: 10px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: all var(--silex-transition-fast);
+}
+.gjs-mdl-dialog input[type=text]:hover,
+.gjs-mdl-dialog input[type=email]:hover,
+.gjs-mdl-dialog input[type=url]:hover,
+.gjs-mdl-dialog input[type=number]:hover,
+.gjs-mdl-dialog select:hover,
+.gjs-mdl-dialog textarea:hover,
+.settings-dialog input[type=text]:hover,
+.settings-dialog input[type=email]:hover,
+.settings-dialog input[type=url]:hover,
+.settings-dialog input[type=number]:hover,
+.settings-dialog select:hover,
+.settings-dialog textarea:hover,
+.silex-dialog-inline input[type=text]:hover,
+.silex-dialog-inline input[type=email]:hover,
+.silex-dialog-inline input[type=url]:hover,
+.silex-dialog-inline input[type=number]:hover,
+.silex-dialog-inline select:hover,
+.silex-dialog-inline textarea:hover {
+  border-color: var(--gjs-secondary-light-color);
+}
+.gjs-mdl-dialog input[type=text]:focus,
+.gjs-mdl-dialog input[type=email]:focus,
+.gjs-mdl-dialog input[type=url]:focus,
+.gjs-mdl-dialog input[type=number]:focus,
+.gjs-mdl-dialog select:focus,
+.gjs-mdl-dialog textarea:focus,
+.settings-dialog input[type=text]:focus,
+.settings-dialog input[type=email]:focus,
+.settings-dialog input[type=url]:focus,
+.settings-dialog input[type=number]:focus,
+.settings-dialog select:focus,
+.settings-dialog textarea:focus,
+.silex-dialog-inline input[type=text]:focus,
+.silex-dialog-inline input[type=email]:focus,
+.silex-dialog-inline input[type=url]:focus,
+.silex-dialog-inline input[type=number]:focus,
+.silex-dialog-inline select:focus,
+.silex-dialog-inline textarea:focus {
+  border-color: var(--silex-accent-primary);
+  box-shadow: 0 0 0 3px rgba(136, 115, 254, 0.15);
+  outline: none;
+}
+.gjs-mdl-dialog input[type=text]::placeholder,
+.gjs-mdl-dialog input[type=email]::placeholder,
+.gjs-mdl-dialog input[type=url]::placeholder,
+.gjs-mdl-dialog input[type=number]::placeholder,
+.gjs-mdl-dialog select::placeholder,
+.gjs-mdl-dialog textarea::placeholder,
+.settings-dialog input[type=text]::placeholder,
+.settings-dialog input[type=email]::placeholder,
+.settings-dialog input[type=url]::placeholder,
+.settings-dialog input[type=number]::placeholder,
+.settings-dialog select::placeholder,
+.settings-dialog textarea::placeholder,
+.silex-dialog-inline input[type=text]::placeholder,
+.silex-dialog-inline input[type=email]::placeholder,
+.silex-dialog-inline input[type=url]::placeholder,
+.silex-dialog-inline input[type=number]::placeholder,
+.silex-dialog-inline select::placeholder,
+.silex-dialog-inline textarea::placeholder {
+  color: var(--silex-text-secondary);
+  opacity: 0.6;
+}
+.gjs-mdl-dialog label,
+.settings-dialog label,
+.silex-dialog-inline label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--silex-text-primary);
+  margin-bottom: 6px;
+  display: block;
+}
+.gjs-mdl-dialog .form-group,
+.settings-dialog .form-group,
+.silex-dialog-inline .form-group {
+  margin-bottom: 16px;
+}
+.gjs-mdl-dialog button,
+.gjs-mdl-dialog .silex-button,
+.settings-dialog button,
+.settings-dialog .silex-button,
+.silex-dialog-inline button,
+.silex-dialog-inline .silex-button {
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--silex-transition-fast);
+}
+.gjs-mdl-dialog button.primary, .gjs-mdl-dialog button.silex-button--primary,
+.gjs-mdl-dialog .silex-button.primary,
+.gjs-mdl-dialog .silex-button.silex-button--primary,
+.settings-dialog button.primary,
+.settings-dialog button.silex-button--primary,
+.settings-dialog .silex-button.primary,
+.settings-dialog .silex-button.silex-button--primary,
+.silex-dialog-inline button.primary,
+.silex-dialog-inline button.silex-button--primary,
+.silex-dialog-inline .silex-button.primary,
+.silex-dialog-inline .silex-button.silex-button--primary {
+  background-color: var(--silex-accent-primary);
+  color: var(--silex-bg-darker);
+  border: none;
+}
+.gjs-mdl-dialog button.primary:hover, .gjs-mdl-dialog button.silex-button--primary:hover,
+.gjs-mdl-dialog .silex-button.primary:hover,
+.gjs-mdl-dialog .silex-button.silex-button--primary:hover,
+.settings-dialog button.primary:hover,
+.settings-dialog button.silex-button--primary:hover,
+.settings-dialog .silex-button.primary:hover,
+.settings-dialog .silex-button.silex-button--primary:hover,
+.silex-dialog-inline button.primary:hover,
+.silex-dialog-inline button.silex-button--primary:hover,
+.silex-dialog-inline .silex-button.primary:hover,
+.silex-dialog-inline .silex-button.silex-button--primary:hover {
+  background-color: var(--silex-accent-secondary);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(136, 115, 254, 0.3);
+}
+.gjs-mdl-dialog button.secondary, .gjs-mdl-dialog button.silex-button--secondary,
+.gjs-mdl-dialog .silex-button.secondary,
+.gjs-mdl-dialog .silex-button.silex-button--secondary,
+.settings-dialog button.secondary,
+.settings-dialog button.silex-button--secondary,
+.settings-dialog .silex-button.secondary,
+.settings-dialog .silex-button.silex-button--secondary,
+.silex-dialog-inline button.secondary,
+.silex-dialog-inline button.silex-button--secondary,
+.silex-dialog-inline .silex-button.secondary,
+.silex-dialog-inline .silex-button.silex-button--secondary {
+  background-color: var(--silex-button-bg);
+  color: var(--silex-text-primary);
+  border: 1px solid var(--silex-border-color-strong);
+}
+.gjs-mdl-dialog button.secondary:hover, .gjs-mdl-dialog button.silex-button--secondary:hover,
+.gjs-mdl-dialog .silex-button.secondary:hover,
+.gjs-mdl-dialog .silex-button.silex-button--secondary:hover,
+.settings-dialog button.secondary:hover,
+.settings-dialog button.silex-button--secondary:hover,
+.settings-dialog .silex-button.secondary:hover,
+.settings-dialog .silex-button.silex-button--secondary:hover,
+.silex-dialog-inline button.secondary:hover,
+.silex-dialog-inline button.silex-button--secondary:hover,
+.silex-dialog-inline .silex-button.secondary:hover,
+.silex-dialog-inline .silex-button.silex-button--secondary:hover {
+  background-color: var(--silex-button-hover-bg);
+}
+
+.gjs-mdl-dialog {
+  animation: dialogFadeIn 0.2s ease;
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.gjs-mdl-container {
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+
 /* ubuntu-cyrillic-ext-400-normal */
 @font-face {
   font-family: "Ubuntu";