lexgui 0.1.44 → 0.1.45

package/build/lexgui.css

@@ -16,7 +16,9 @@
     --global-font-size-big: 14px;
     --global-color-primary: light-dark(#f9f9f9, #1c1c1c);
     --global-color-secondary: light-dark(#ececec, #2c2c2c);
-    --global-color-terciary: light-dark(#dadada, #444);
+    --global-color-terciary: light-dark(#e0e0e0, #444);
+    --global-color-quaternary: light-dark(#c8c8c8, #555);
+    --global-color-quinary: light-dark(#b0b0b0, #666);
     --global-selected: #2d69da;
     --global-selected-light: #0d99ff;
     --global-selected-dark: #304b86;
@@ -38,6 +40,10 @@
     --graphnode-background: 17, 17, 17;
 }
 
+:root[data-theme="light"] {
+    color-scheme: light;
+}
+
 /* Some global colors */
 .orange {
     color: orange
@@ -276,6 +282,105 @@ body.noevents * {
     color: #f5f5f5;
 }
 
+/* Footer */
+
+.lexfooter {
+    min-height: 96px;
+    background-color: var(--global-color-primary);
+    padding: 15px;
+    width: 100%;
+    font-size: .875rem;
+    line-height: 1.25rem;
+}
+
+.lexfooter .wrapper {
+    width: calc(100% - 30px);
+}
+
+.lexfooter .columns {
+    display: grid;
+    text-align: center;
+}
+
+.lexfooter ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 12px;
+}
+
+.lexfooter ul li {
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.lexfooter a {
+    text-decoration: none;
+    color: var(--global-text-secondary);
+    transition: all 0.15s ease-in-out;
+}
+
+.lexfooter .credits-and-socials {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr 1fr;
+    padding-inline: 36px;
+}
+
+.lexfooter p {
+    font-size: var(--global-font-size);
+}
+
+.lexfooter .social {
+    text-align: right;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+@media (max-width: 768px) {
+    .lexfooter .credits-and-socials {
+        display: block;
+        text-align: center;
+    }
+
+    .lexfooter .social {
+        text-align: center;
+    }
+}
+
+.lexfooter .social svg {
+    max-width: 28px;
+    max-height: 28px;
+    transition: all .2s ease-in-out;
+    fill: var(--global-text-secondary);
+}
+
+.lexfooter .social a {
+    max-width: 28px;
+    max-height: 28px;
+    color: var(--global-text-secondary);
+    margin-right: 6px;
+    vertical-align: -webkit-baseline-middle;
+    vertical-align: middle;
+}
+
+.lexfooter .social a a {
+    font-size: 24px;
+}
+
+.lexfooter a:hover {
+    color: var(--global-selected-light);
+}
+
+.lexfooter svg:hover {
+    fill: var(--global-selected-light);
+}
+
+.lexfooter hr {
+    border: none;
+    border-top: 1px solid #2c2c2c;
+}
+
 /* Dialogs and alerts */
 
 .lexdialog {
@@ -434,7 +539,7 @@ body.noevents * {
     opacity: 0;
 }
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
     .lexdialog {
         box-shadow: 0px 2px 6px #30303083;
     }
@@ -596,13 +701,13 @@ body.noevents * {
     transform: rotate(180deg);
 }
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
     .lexbranchtitle {
         color: var(--global-text-secondary);
         background-color: var(--global-color-secondary);
         text-shadow: 0px 1px 6px #afafaf7c;
     }
-    
+
     .lexbranch.closed .lexbranchtitle {
         background-color: inherit;
     }
@@ -734,6 +839,14 @@ body.noevents * {
     padding: 5px;
 }
 
+.lexwidget .lextext input:focus {
+    border: 2px solid var(--global-selected);
+}
+
+.lexwidget .lextext input:invalid:focus {
+    border: 2px solid var(--global-color-error);
+}
+
 .lexwidget .lextext div {
     color: var(--global-text-secondary);
     padding-left: 6px;
@@ -749,10 +862,6 @@ body.noevents * {
     margin-right: 16px;
 }
 
-.lexwidget .lextext input:focus {
-    border: 2px solid var(--global-selected);
-}
-
 .lexwidget .inputicon {
     padding: 6px;
     font-size: 10px;
@@ -792,12 +901,6 @@ body.noevents * {
     color: var(--global-text-terciary);
 }
 
-@media (prefers-color-scheme: light) {
-    .lexwidget .lextext {
-        border: 1px solid var(--global-color-terciary) !important;
-    }
-}
-
 .lexseparator {
     border-bottom: 1px solid var(--global-button-color);
     margin: 5px 0 5px 10px;
@@ -812,6 +915,17 @@ body.noevents * {
     margin: 5px 0 5px 4px;
 }
 
+:root[data-theme="light"] {
+    .lexwidget .lextext {
+        border: 1px solid var(--global-color-terciary) !important;
+    }
+
+    .lexbranch .lexseparator {
+        border-top: 1px solid #e7e7e7;
+        border-bottom: 1px solid #c1c1c1;
+    }
+}
+
 .lexfilter input {
     font-family: var(--global-font);
 }
@@ -867,9 +981,10 @@ body.noevents * {
 .lexbutton {
     display: grid;
     align-content: center;
-    background-color: var(--global-button-color);
+    --button-color: var(--global-button-color);
+    background-color: var(--button-color);
     border-radius: 6px;
-    border: none;
+    border: 1px solid transparent;
     margin-top: 2px;
     min-height: 22px !important;
     color: var(--global-text-primary);
@@ -880,8 +995,19 @@ body.noevents * {
     cursor: pointer;
     font-family: var(--global-font);
     transition: 0.1s linear;
+    padding: 0.25rem;
 }
 
+/* Colors */
+.lexbutton.primary { --button-color: var(--global-selected); }
+.lexbutton.secondary { --button-color: var(--global-selected-light);  }
+.lexbutton.accent { --button-color: var(--global-color-accent);  }
+.lexbutton.warning { --button-color: var(--global-color-warning);  }
+.lexbutton.error { --button-color: var(--global-color-error);  }
+/* Few Sizes */
+.lexbutton.xs { width: 25% !important; margin: 0 auto; }
+.lexbutton.sm { width: 45% !important; margin: 0 auto; }
+
 .lexbutton span:has(.lexbadge) {
     display: inline-flex;
     flex-wrap: nowrap;
@@ -891,10 +1017,6 @@ body.noevents * {
     gap: 0.4rem;
 }
 
-.lexbutton.accept {
-    background-color: var(--global-selected);
-}
-
 .lexbutton.foldback {
     padding: 11px 10px;
     padding-bottom: 14px;
@@ -914,23 +1036,18 @@ body.noevents * {
 }
 
 .lexbutton:hover {
-    background-color: var(--global-button-color-hovered);
+    background-color: color-mix(in srgb, var(--button-color), #000 7%);
     color: var(--global-text-primary);
 }
 
-.lexbutton.accept:hover {
-    background-color: #3b6790;
-}
-
 .lexbutton:active:not(.lexbutton.combo) {
-    background-color: var(--global-color-terciary);
+    background-color: color-mix(in srgb, var(--button-color), #ffffff 4%);
     color: var(--global-text-secondary);
     transform: scale(0.99);
 }
 
 .lexbutton.selected {
     background: #3c4145;
-    outline: 1px solid #8c9bc7;
     color: #DDD;
 }
 
@@ -939,29 +1056,28 @@ body.noevents * {
     margin-top: 0px;
 }
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
     .lexbutton {
         background-color: var(--global-button-color);
         color: var(--global-text-primary);
         border: 1px solid var(--global-color-terciary) !important;
     }
-    
+
     .lexbutton.accept {
         background-color: var(--global-selected);
     }
-    
+
     .lexbutton:hover {
         background-color: var(--global-button-color-hovered);
         color: var(--global-text-primary);
     }
-    
+
     .lexbutton.accept:hover {
         background-color: #3b6790;
     }
-    
+
     .lexbutton.selected {
         background: #3c4145;
-        outline: 1px solid #8c9bc7;
         color: #DDD;
     }
 }
@@ -1073,16 +1189,25 @@ body.noevents * {
     padding: 0px;
     transform: translateY(-4px);
     z-index: 10;
+    margin: 0;
     margin-top: 5px;
     width: 100%;
     box-shadow: 0 0px 12px rgba(0, 0, 0, 0.788);
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
     max-height: -webkit-fill-available;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
+.lexdropdown ul.place-above {
+    max-height: unset;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
 .lexdropdown .lexdropdownitem {
     width: 100%;
     cursor: pointer;
@@ -1126,7 +1251,7 @@ body.noevents * {
     margin-top: 8px;
 }
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
 
     .lexdropdown .lexfilter {
         background-color: var(--global-color-primary);
@@ -1222,9 +1347,10 @@ body.noevents * {
 /* Toggle Widget */
 
 .lextoggle {
-    /* --toggle-color: var(--global-selected); */
-    border: 1px solid currentColor;
-    color: var(--global-text-secondary);
+    --toggle-color: var(--global-button-color);
+    border: 1px solid transparent;
+    color: #f9f9f9;
+    background-color: var(--global-color-quaternary);
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1233,9 +1359,9 @@ body.noevents * {
     -webkit-user-select: none;
     user-select: none;
     border-radius: 12px;
-    padding: 0.16rem;
-    width: 2rem;
-    height: 1.22rem;
+    padding: 3px;
+    width: 36px;
+    height: 22px;
     flex-shrink: 0;
     grid-template-columns: 0fr 1fr 1fr;
     place-content: center;
@@ -1244,12 +1370,16 @@ body.noevents * {
     position: relative
 }
 
+.lextoggle.outline {
+    border: 1px solid transparent;
+}
+
 /* Colors */
-.lextoggle.primary { --toggle-color: var(--global-selected); color: var(--toggle-color); }
-.lextoggle.secondary { --toggle-color: var(--global-selected-light); color: var(--toggle-color);  }
-.lextoggle.accent { --toggle-color: var(--global-color-accent); color: var(--toggle-color);  }
-.lextoggle.warning { --toggle-color: var(--global-color-warning); color: var(--toggle-color);  }
-.lextoggle.error { --toggle-color: var(--global-color-error); color: var(--toggle-color);  }
+.lextoggle.primary { --toggle-color: var(--global-selected); }
+.lextoggle.secondary { --toggle-color: var(--global-selected-light);  }
+.lextoggle.accent { --toggle-color: var(--global-color-accent);  }
+.lextoggle.warning { --toggle-color: var(--global-color-warning);  }
+.lextoggle.error { --toggle-color: var(--global-color-error);  }
 
 .lextoggle > * {
     z-index: 1;
@@ -1266,7 +1396,7 @@ body.noevents * {
     transition: opacity .2s,rotate .4s
 }
 
-.lextoggle>:focus {
+.lextoggle > :focus {
     outline-style: none
 }
 
@@ -1311,8 +1441,15 @@ body.noevents * {
 }
 
 .lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked) {
-    background-color: #1f1f1f;
-    grid-template-columns: 1fr 1fr 0fr
+    border: 1px solid var(--global-color-secondary);
+    background-color: var(--toggle-color);
+    grid-template-columns: 1fr 1fr 0fr;
+}
+
+.lextoggle.outline:checked, .lextoggle.outline[aria-checked=true], .lextoggle.outline:has(>input:checked) {
+    color: var(--toggle-color);
+    border: 1px solid currentColor;
+    background-color: var(--global-color-primary);
 }
 
 :is(.lextoggle:checked, .lextoggle[aria-checked=true], .lextoggle:has(>input:checked)):before {
@@ -1859,29 +1996,6 @@ input[type="range"] {
 
 /* File Input */
 
-/* .lexfileinput {
-    cursor: pointer;
-    border: 1px solid #0000;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: #121212;
-    vertical-align: middle;
-    webkit-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    width: clamp(3rem,20rem,100%);
-    height: var(--size);
-    border-color: var(--input-color);
-    --size: calc(var(--size-field,.25rem)*10);
-    --input-color: color-mix(in oklab,#121212 20%,#0000);
-    border-radius: 8px;
-    align-items: center;
-    padding-inline-end:.75rem;font-size: .875rem;
-    line-height: 2;
-    display: inline-flex
-} */
-
 .lexfileinput::file-selector-button {
     align-content: center;
     background-color: var(--global-button-color);
@@ -1924,7 +2038,7 @@ input[type="range"] {
 }
 
 .lexprogress span {
-    width: 5%;
+    width: 10%;
 }
 
 .lexprogressbar {
@@ -1935,15 +2049,19 @@ input[type="range"] {
     -webkit-transition: .2s;
     transition: opacity .2s;
     margin-top: 2px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .lexprogressbar.editable:hover {
-    cursor: grab;
+    cursor: pointer;
 }
 
-.lexprogressbar.editable:active {
+/* .lexprogressbar.editable.grabbing {
     cursor: grabbing;
-}
+} */
 
 /* The gray background in Chrome, etc. */
 .lexprogressbar::-webkit-meter-bar {
@@ -2194,8 +2312,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-top: 10px;
     margin-bottom: 8px;
     border-radius: 6px;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-inline: 4px;
 }
 
 .lexmenubar .lexmenubuttons.center {
@@ -2210,7 +2327,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubar .lexmenubutton {
-    display: flex;
+    /* display: flex; */
     justify-content: center;
     padding: 8px;
     padding-top: 0.6em;
@@ -2506,6 +2623,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     justify-content: center;
     background: none;
     color: var(--global-text-secondary);
+    height: 100%;
 }
 
 .lexoverlaybuttons .lexbutton span {
@@ -2513,7 +2631,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexoverlaybuttons .lexbutton a {
-    line-height: 12px;
+    line-height: 10px;
     font-size: var(--global-font-size-big);
 }
 
@@ -2522,7 +2640,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 4px;
 }
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
     .lexoverlaybuttons .lexbutton img {
         filter: invert(1);
     }
@@ -2565,7 +2683,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background: none;
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
-    height: 100%;
 }
 
 .lexoverlaybuttonscontainer.vertical .lexoverlaygroup {
@@ -2593,7 +2710,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexoverlaybuttons .lexwidget:last-child {
-  margin-right: 0px;
+    margin-right: 0px;
 }
 
 /* Area Tabs */
@@ -2777,7 +2894,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexlayer {
-    background-color: var(--global-color-primary);
+    --layer-color: var(--global-color-primary);
+    background-color: var(--layer-color);
     color: var(--global-text-primary);
     text-align: center;
     line-height: 19px;
@@ -2789,16 +2907,17 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexlayer.selected {
-    background: light-dark(var(--global-selected-light), var(--global-selected));
-    color: white;
+    --layer-color: light-dark(var(--global-selected-light), var(--global-selected));
+    color: #fff;
 }
 
 .lexlayer:hover {
-    background-color: #497baad4;
+    background-color: color-mix(in srgb, var(--layer-color), #000 7%);
 }
 
 .lexlayer:active {
-    background-color: #497baab3;
+    background-color: color-mix(in srgb, var(--layer-color), #ffffff 4%);
+    transform: scale(0.99);
 }
 
 /* List Widget */
@@ -2886,36 +3005,63 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lextags {
     display: inline-flex;
     flex-wrap: wrap;
-    justify-content: center;
     line-height: 12px;
+    background-color: light-dark(var(--global-color-terciary), var(--global-button-color));
+    border-radius: 8px;
+    padding: 4px;
 }
 
 .lextags input {
-    width: 100%;
-    margin-bottom: 0.5em;
-    text-align: center;
+    width: 60%;
 }
 
 .lextags .lextag {
     padding: 6px;
     background-color: var(--global-color-primary);
     margin: 2px;
-    border-radius: 12px;
+    border-radius: 6px;
     min-width: 16px;
     justify-content: center;
     color: var(--global-text-primary);
     display: inherit;
     font-size: var(--global-font-size);
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
 }
 
-.lextags .lextag:hover {
-    background-color: var(--global-selected);
-    color: #f5f5f5;
+.lextags .lextag a:hover {
+    color: light-dark(var(--global-text-terciary), var(--global-text-secondary));
     cursor: pointer;
 }
 
-.lextags .lextag:hover::after {
-    content: "⊗";
+/* Counter Widget */
+
+.lexcounter {
+    display: flex;
+    margin: 0 auto;
+}
+
+.lexcounterbox {
+    display: grid;
+    text-align: -webkit-center;
+    text-align: center;
+    margin-left: 16px;
+    margin-right: 16px;
+}
+
+.lexcounterbox .lexcountervalue {
+    width: 100%;
+    font-size: 32px;
+    font-weight: 700;
+
+}
+
+.lexcounterbox .lexcounterlabel {
+    width: 100%;
+    margin-top: -22px;
+    color: var(--global-text-secondary);
 }
 
 /* Custom Widgets Widget */
@@ -3056,7 +3202,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-top: 8px;
 }
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
 
     .lexknob .knobcircle {
         background: rgb(182, 182, 182);
@@ -3090,6 +3236,54 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     }
 }
 
+/* Icon swap */
+
+.swap {
+    cursor: pointer;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    place-content: center;
+    display: inline-grid;
+    position: relative;
+}
+
+.swap input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+}
+
+.swap > * {
+    grid-row-start: 1;
+    grid-column-start: 1;
+    transition-property: transform,rotate,opacity;
+    transition-duration: .2s;
+    transition-timing-function: cubic-bezier(0,0,.2,1);
+}
+
+.swap .swap-on,.swap .swap-indeterminate,.swap input:indeterminate~.swap-on,.swap input:is(:checked,:indeterminate)~.swap-off {
+    opacity: 0;
+}
+
+.swap input:checked~.swap-on,.swap input:indeterminate~.swap-indeterminate {
+    opacity: 1;
+}
+
+.swap .swap-on,.swap .swap-indeterminate, .swap input:indeterminate~.swap-on {
+    rotate: 45deg;
+}
+
+.swap input:is(:checked,:indeterminate)~.swap-on, .swap.swap-active .swap-on {
+    rotate: none;
+}
+
+.swap input:is(:checked,:indeterminate)~.swap-off, .swap.swap-active .swap-off {
+    rotate: -45deg;
+}
+
 /** Timeline */
 
 .lextimeline {
@@ -4048,7 +4242,7 @@ pre .line-gutter {
 
 .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
-@media (prefers-color-scheme: light) {
+:root[data-theme="light"] {
     .lexcodeeditor pre.active-line {
         background-color: #c5c4c4ab;
     }