improve themes

GenieFramework · Nov 1, 2024 · ee80eec · ee80eec
1 parent 68c119b
commit ee80eec
Show file tree

Hide file tree

Showing 3 changed files with 695 additions and 631 deletions.
diff --git a/assets/css/stipplecore.css b/assets/css/stipplecore.css
@@ -92,6 +92,9 @@
   .st-gap-lg {  gap: var(--st-spacing-lg);  }
   .st-gap-xl {  gap: var(--st-spacing-xl);  }
 
+  .st-flex-row {  display: flex; flex-direction: row; }
+  .st-flex-col {  display: flex; flex-direction: column; }
+
 
 }
 

diff --git a/assets/css/theme-default-dark.css b/assets/css/theme-default-dark.css
@@ -82,6 +82,7 @@
   }
 
 
+
   /* **************************************************************** */
   /*                    VARIABLES IN THEME EDITOR                     */
   /* **************************************************************** */
@@ -179,88 +180,121 @@
   fieldset {
     border: none;
   }
-
-  .q-field--float.q-field--focused.q-field--standout .q-field__control, 
-  .q-input .q-field__native,
-  .q-select .q-field__native {
-    font-weight: var(--st-font-weight-bold);
+  .q-field {
+    font-size: 14px;
   }
+  .q-file .q-field__native{
 
-  .q-field--rounded.q-field--filled .q-field__control {
-    border-radius: 5px 5px 0 0;
-  }
-
-  .q-field--rounded.q-field--outlined .q-field__control,
-  .q-field--rounded.q-field--standout .q-field__control {
-    border-radius: 5px;
-    box-shadow: none;
-  }
-
-  .q-field--standout .text-white .q-field__label,
-  .q-field--standout .text-white .q-field__marginal,
-  .q-field--standout .text-white .q-field__native {
-    color: var(--q-color-white);
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  .q-field__input, .q-field__native, .q-field__prefix, .q-field__suffix {
+    color: var(--st-text-2);
   }
-
-  .q-field .q-field__control, .q-field .q-field__native, .q-field .q-field__marginal {
-    height: var( --st-component-height-md );
-    min-height: var( --st-component-height-md );
+  .q-field__control, .q-field--auto-height .q-field__control, .q-field__marginal {
+    height: 36px;
+    min-height: 36px;
     color: var(--st-text-2);
   }
 
   .q-field--auto-height.q-field--labeled .q-field__control-container {
-    padding-top: 0px;
+    padding-top: 0;
   }
 
-
-  .q-input .q-field__native, .q-select .q-field__native {
-    font-weight: normal;
-    font-size: 1em;
-  }
-
-  .q-field .q-field__control{
-    padding: 0 12px;
+  .q-field--auto-height .q-field__control, .q-field--auto-height .q-field__native {
+    min-height: 36px;
   }
 
-  .q-field .q-field__control:before {
-    border: solid 1px var(--st-color-field-border);
+ .q-field--labeled {
+    margin-top: 25px;
+ }
+
+ .q-field--labeled .q-field__native, .q-field--labeled .q-field__prefix, .q-field--labeled .q-field__suffix {
+    padding-top: unset;
+    padding-bottom: unset;
+ }
+
+ .q-field--float .q-field__label, .q-field__label {
+    color: var(--st-text-1);
+    transform: translateY(-210%) scale(1);
+    font-weight: 500;
+    left: -10px;
+ }
+
+ .q-field--labeled.q-field--standard .q-field__label, 
+ .q-field--labeled.q-field--borderless .q-field__label {
+    left: 0px;
+ }
+
+ .q-field--filled.q-field--rounded .q-field__control {
+    border-radius: 18px 18px 0 0;
+ }
+
+ .q-field .q-field__control:before {
+    border-color: var(--st-color-field-border);
   }
   .q-field.q-field--highlighted .q-field__control:after {
     border-color: var(--st-color-primary);
     border-width: 1px;
-    transform: scale3d(1, 1, 1);
   }
-
-  .q-select .q-field__control  {
-    padding-right: 0px;
+  .q-field--outlined .q-field__control:hover:before {
+    border-color: color-mix(in srgb, var(--st-color-primary), transparent 50%);
   }
 
-  .q-field .q-field__control:has(input[type="number"])
-  {
-    padding-right: 5px;
+
+  /*===================================================================
+                            PLOTLY
+  ================================================================== */
+  .plot-container.plotly svg.main-svg, 
+  .plot-container.plotly svg.main-svg g.infolayer g.legend rect.bg{
+    fill: none !important;
   }
-  .q-field:has(.q-field__label)
-  {
-    margin-top: 35px;
+  .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-bg{
+    fill: #00000030 !important;
   }
-
-  .q-field__label
-  {
-    font-size: var(--st-font-size-md);
+  .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-min,
+  .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-max{
+    fill: var(--st-dashboard-bg-1) !important;
+    fill-opacity: 0.8 !important;
   }
-
-  .q-field--labeled .q-field__native, .q-field--labeled .q-field__prefix, .q-field--labeled .q-field__suffix {
-    padding-top: 6px;
+  .plot-container.plotly div.modebar-container > div.modebar{
+
   }
-
-  .q-field--float .q-field__label, .q-field__control-container .q-field__label {
-    transform: translateY(-45px);
-    left: -10px;
-    font-size: var(--st-font-size-md);
-    font-weight: 500;
-    color: var(--st-text-1);
+  .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group{
+    background-color: var(--st-dashboard-bg-1) !important;
+  }
+  .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group > a.modebar-btn > svg.icon > path{
+    fill: color-mix(in srgb, var(--st-color-primary), transparent 80%) !important;
+  }
+  .plot-container.plotly div.modebar-container > div.modebar > div.modebar-group > a.modebar-btn:hover > svg.icon > path{
+    fill: var(--st-color-primary) !important;
+  }
+  .plot-container.plotly svg.main-svg g.infolayer g.rangeslider-container rect.rangeslider-mask-max{
+    fill: var(--st-dashboard-bg-1) !important;
+    fill-opacity: 0.8 !important;
+  }
+  .plot-container.plotly svg.main-svg g.treemaplayer g.slice path.surface, 
+  .plot-container.plotly svg.main-svg g.funnelarealayer g.slice path.surface{
+    stroke: var(--st-dashboard-bg-1) !important;
+  }
+  .plot-container.plotly text{
+    font-family: var(--st-font-family) !important;
   }
 
+  .plot-container.plotly svg.main-svg g.infolayer text{
+    fill: var(--st-text-1) !important;
+  }
+  .plot-container.plotly svg.main-svg g.cartesianlayer g.zerolinelayer path, 
+  .plot-container.plotly svg.main-svg g.cartesianlayer g.zerolinelayer path{
+    stroke: color-mix(in srgb, var(--st-color-neutral), transparent 0%) !important;
+  }
+  .plot-container.plotly svg.main-svg g.cartesianlayer g.gridlayer path{
+    stroke: color-mix(in srgb, var(--st-color-neutral), transparent 60%) !important;
+  }
+  .plot-container.plotly svg.main-svg g.cartesianlayer g.xtick text, 
+  .plot-container.plotly svg.main-svg g.cartesianlayer g.ytick text{
+    fill: var(--st-text-2) !important;
+  }
 
   /*===================================================================
                       Button, Badge, Banner, chip...
@@ -312,9 +346,7 @@
   /*===================================================================
                         MISC (File, Skeleton)
   ================================================================== */
-  .q-file .q-field__marginal {
-    padding-top: 27px;
-  }
+
   .q-skeleton {
     background: var(--st-skeleton);
   }
@@ -340,7 +372,7 @@
     width: 4px;
     opacity: 0.8;
   }
-  
+
   /*===================================================================
                           Menu, Item, Date, Time, Uploader, Card
   ================================================================== */
@@ -360,9 +392,7 @@
   }
 
 
-  .q-field__control {
-    border-radius: var( --st-border-radius-sm );
-  }
+
 
   /*===================================================================
                         Radio, Checkbox