lexgui 0.6.1 → 0.6.3

package/build/lexgui.css

@@ -875,6 +875,10 @@ a svg, svg path {
 /* Generic Popover */
 
 .lexpopover {
+    background-color: var(--global-color-primary);
+    border-radius: 0.5rem;
+    border: 1px solid #7a797c4f;
+    padding: 0.25rem;
     position: fixed;
     left: 0px;
     top: 0px;
@@ -1542,11 +1546,8 @@ a svg, svg path {
     width: 256px;
     display: flex;
     flex-direction: column;
-    padding: 0.2rem;
-    border-radius: 0.5rem;
-    border: 1px solid #7a797c4f;
-    padding: 0.5rem;
     gap: 0.5rem;
+    padding: 0.25rem;
 }
 
 .lexcolorpicker input.lextext {
@@ -1668,7 +1669,6 @@ a svg, svg path {
     font-weight: 500;
     display: grid;
     transition: 0.1s linear;
-    padding: 0.3rem;
 }
 
 /* Colors */
@@ -1676,8 +1676,9 @@ a svg, svg path {
 .lexbutton.secondary { --button-color: var(--global-color-secondary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary);  }
 .lexbutton.accent { --button-color: var(--global-color-accent); --border-color: var(--global-color-quaternary); color: #fefefe;  }
 .lexbutton.contrast { --button-color: var(--global-text-primary); --border-color: var(--global-color-quaternary); color: var(--global-color-primary);  }
-.lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }
+.lexbutton.success { --button-color: var(--global-color-success); --border-color: #013101; color: var(--border-color);  }
 .lexbutton.error { --button-color: var(--global-color-error); --border-color: #310108; color: var(--border-color);  }
+.lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }
 
 /* Few Sizes */
 .lexbutton.xs { width: 35%; margin: 0 auto; }
@@ -1771,7 +1772,7 @@ a svg, svg path {
 
 .lexcombobuttons .lexbutton.combo {
     display: flex;
-    padding: 0.45em 1.25em;
+    padding: 0.35em 1em;
     transition: 0.2s;
     --button-color: var(--global-color-tertiary);
 }
@@ -1814,11 +1815,6 @@ a svg, svg path {
     background-color: var(--global-color-primary);
 }
 
-.lexselect .lexfilter a {
-    font-size: var(--global-font-size-sm);
-    padding-inline: 4px;
-}
-
 .lexselect ul .lexlistitem {
     font-size: var(--global-font-size-sm);
 }
@@ -1983,8 +1979,9 @@ dialog .lexselect .lexselectoptions {
 :root[data-theme="light"] .lexcheckbox.secondary { --checkbox-fg-color: var(--global-text-tertiary); }
 .lexcheckbox.accent { --checkbox-bg-color: var(--global-color-accent); }
 .lexcheckbox.contrast { --checkbox-bg-color: var(--global-text-primary); --checkbox-fg-color: var(--global-color-primary); }
-.lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
+.lexcheckbox.success { --checkbox-bg-color: var(--global-color-success); }
 .lexcheckbox.error { --checkbox-bg-color: var(--global-color-error); }
+.lexcheckbox.warning { --checkbox-bg-color: var(--global-color-warning); }
 
 
 .lexcheckbox:before {
@@ -2071,8 +2068,9 @@ dialog .lexselect .lexselectoptions {
 .lextoggle.secondary { --toggle-bg-color: var(--global-color-tertiary); }
 .lextoggle.accent { --toggle-bg-color: var(--global-color-accent); }
 .lextoggle.contrast { --toggle-bg-color: var(--global-text-primary); }
-.lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }
+.lextoggle.success { --toggle-bg-color: var(--global-color-success);  }
 .lextoggle.error { --toggle-bg-color: var(--global-color-error);  }
+.lextoggle.warning { --toggle-bg-color: var(--global-color-warning); }
 
 .lextoggle > * {
     z-index: 1;
@@ -2212,6 +2210,7 @@ dialog .lexselect .lexselectoptions {
     padding: 0.1em;
     padding-inline: 1.4em;
     gap: 0.65em;
+    align-items: center;
 }
 
 .lexradiogroup .lexradiogroupitem span {
@@ -2223,9 +2222,6 @@ dialog .lexselect .lexselectoptions {
     height: 16px;
     min-width: 16px !important;
     min-height: 16px !important;
-    padding: 0;
-    margin: auto 0;
-    border-radius: 8px;
     background-color: var(--global-intense-background);
     border: 1px solid var(--global-text-tertiary) !important;
 }
@@ -2257,8 +2253,9 @@ dialog .lexselect .lexselectoptions {
 .lexradiogroup.secondary .lexradiogroupitem button.checked span { background-color: var(--global-color-accent-light); }
 .lexradiogroup.accent .lexradiogroupitem button.checked span { background-color: var(--global-color-accent); }
 .lexradiogroup.contrast .lexradiogroupitem button.checked span { background-color: var(--global-text-primary); }
-.lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
+.lexradiogroup.success .lexradiogroupitem button.checked span { background-color: var(--global-color-success); }
 .lexradiogroup.error .lexradiogroupitem button.checked span { background-color: var(--global-color-error); }
+.lexradiogroup.warning .lexradiogroupitem button.checked span { background-color: var(--global-color-warning); }
 
 /* Vector Widgets */
 
@@ -2280,6 +2277,7 @@ dialog .lexselect .lexselectoptions {
     margin-right: 2px;
     background-color: var(--global-color-tertiary);
     transition: 0.1s linear;
+    cursor: text;
 }
 
 .lexvector .vecbox:hover {
@@ -2291,7 +2289,8 @@ dialog .lexselect .lexselectoptions {
     font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
     z-index: 11;
-    margin-right: 0.25rem
+    margin-right: 0.25rem;
+    pointer-events: none;
 }
 
 .lexvector .vecbox:has(input:focus) {
@@ -2482,8 +2481,9 @@ input[type=number] {
 .lexrangeslider.secondary { color: var(--global-color-secondary); --range-thumb-color: var(--global-text-secondary); }
 .lexrangeslider.accent { color: var(--global-color-accent); }
 .lexrangeslider.contrast { color: var(--global-text-primary); }
-.lexrangeslider.warning { color: var(--global-color-warning); }
+.lexrangeslider.success { color: var(--global-color-success); }
 .lexrangeslider.error { color: var(--global-color-error); }
+.lexrangeslider.warning { color: var(--global-color-warning); }
 
 .lexrangeslider.left {
     --range-dir: -1;
@@ -2890,8 +2890,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexbadge.secondary { --badge-color: var(--global-color-secondary); color: var(--global-text-primary); }
 .lexbadge.accent { --badge-color: var(--global-color-accent); }
 .lexbadge.contrast { --badge-color: var(--global-text-primary); color: var(--global-color-primary); }
-.lexbadge.warning { --badge-color: var(--global-color-warning); color: #793205; }
+.lexbadge.success { --badge-color: var(--global-color-success); color: #013101; }
 .lexbadge.error { --badge-color: var(--global-color-error); color: #310108; }
+.lexbadge.warning { --badge-color: var(--global-color-warning); color: #793205; }
 /* Styles */
 .lexbadge.outline {
     color: var(--badge-color, var(--global-text-primary));
@@ -4510,21 +4511,21 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 ul.lexassetscontent {
-    height: 100%;
+    /* height: 100%; */
     -webkit-text-size-adjust: 100%;
     padding: 0 1em;
     margin: 0;
     font-size: var(--global-font-size);
     color: #AAA;
     position: relative;
-    box-sizing: border-box;
     overflow: auto;
 }
 
 .lexassetscontent.list {
-    display: table-cell;
-    columns: 3 256px;
     width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    column-gap: 0.5rem;
 }
 
 .lexassetscontent li {
@@ -4536,7 +4537,6 @@ ul.lexassetscontent {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    box-sizing: border-box;
     width: 10em;
     height: 11.4em;
     display: inline-block;
@@ -4647,7 +4647,6 @@ ul.lexassetscontent {
     color: var(--global-text-primary);
     cursor: pointer;
     text-align: center;
-    box-sizing: border-box;
     display: block;
     padding: 0.1em;
     overflow: hidden;
@@ -4669,7 +4668,6 @@ ul.lexassetscontent {
 .lexassetscontent li .lexassetinfo {
     -webkit-text-size-adjust: 100%;
     color: #999;
-    box-sizing: border-box;
     position: absolute;
     overflow: hidden;
     text-align: left;
@@ -4712,12 +4710,9 @@ ul.lexassetscontent {
 
 .lexassetscontent li img {
     -webkit-text-size-adjust: 100%;
-    font-family: 'Arial';
-    font-size: var(--global-font-size);
     cursor: pointer;
     text-align: center;
     color: white;
-    box-sizing: border-box;
     border: 0;
     max-width: 10em;
     max-height: 10em;
@@ -4729,7 +4724,6 @@ ul.lexassetscontent {
 
 .lexassetscontent.list img {
     width: unset;
-    height: 2em;
     object-fit: contain;
     float: left;
     z-index: 1;