lexgui 0.4.0 → 0.4.2

package/build/lexgui.css

@@ -1,9 +1,10 @@
+/* clean-css ignore:start */
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
-
 @font-face {
     font-family: "GoogleSans";
     src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GoogleSans.ttf");
 }
+/* clean-css ignore:end */
 
 :root {
     /* default color scheme */
@@ -217,9 +218,10 @@ canvas {
 dialog {
     transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete;
     animation: dialogHide 0.1s forwards;
-    &[open] {
-        animation: dialogShow 0.1s forwards;
-    }
+}
+
+dialog[open] {
+    animation: dialogShow 0.1s forwards;
 }
 
 dialog::backdrop {
@@ -328,6 +330,7 @@ body.noevents * {
     cursor: pointer;
     line-height: inherit !important;
     color: var(--global-text-secondary);
+    align-content: center;
 }
 
 .lexicon:hover {
@@ -336,6 +339,7 @@ body.noevents * {
 
 .lexicon:active {
     color: var(--global-text-secondary);
+    transform: scale(0.99);
 }
 
 .lexicon:hover svg, .lexicon:hover svg path {
@@ -402,6 +406,13 @@ body.noevents * {
     gap: 0.25rem;
     height: fit-content;
     margin: auto 0;
+    max-width: 512px;
+}
+
+.lextoast .lextoastcontent div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .lextoast .lextoastcontent .title {
@@ -797,6 +808,11 @@ body.noevents * {
     transition: opacity 0.2s;
 }
 
+/* Suppose any child will be a div.. */
+.lexdialog.pocket .lexdialogcontent:not(:has(div)) {
+    padding: 0px;
+}
+
 .lexdialog.pocket.minimized .lexdialogtitle {
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
@@ -831,18 +847,12 @@ body.noevents * {
     background: var(--global-blur-background);
 }
 
-:root[data-theme="light"] {
-    .lexdialog {
-        box-shadow: 0px 2px 6px #30303083;
-    }
-
-    .lexdialogtitle {
-        text-shadow: 0px 2px 2px #8d8d8d34;
-    }
+:root[data-theme="light"] .lexdialog {
+    box-shadow: 0px 2px 6px #30303083;
+}
 
-    .lexpopup {
-        background: var(--global-blur-background);
-    }
+:root[data-theme="light"] .lexdialogtitle {
+    text-shadow: 0px 2px 2px #8d8d8d34;
 }
 
 /* Generic */
@@ -930,6 +940,7 @@ body.noevents * {
     background-color: var(--global-color-secondary);
     text-shadow: 0px 1px 6px #5554547c;
     padding: 10px;
+    display: flex;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     cursor: pointer;
@@ -983,6 +994,8 @@ body.noevents * {
 
 .lexbranch .branchicon {
     font-size: var(--global-font-size);
+    margin-right: 12px;
+    align-content: center;
 }
 
 .lexbranch.first .lexbranchtitle {
@@ -996,24 +1009,23 @@ body.noevents * {
 .lexbranch .switch-branch-button {
     float: right;
     font-size: var(--global-font-size-sm);
-    margin: 8px 6px -4px 2px;
-    transition: 0.1s;
+    transition: transform 0.1s ease-out;
+    margin-left: auto;
+    align-content: center;
 }
 
 .lexbranch.closed .switch-branch-button {
     transform: rotate(180deg);
 }
 
-:root[data-theme="light"] {
-    .lexbranchtitle {
-        color: var(--global-text-secondary);
-        background-color: var(--global-color-secondary);
-        text-shadow: 0px 2px 2px #e0e0e03a;
-    }
+:root[data-theme="light"] .lexbranchtitle {
+    color: var(--global-text-secondary);
+    background-color: var(--global-color-secondary);
+    text-shadow: 0px 2px 2px #e0e0e03a;
+}
 
-    .lexbranch.closed .lexbranchtitle {
-        background-color: inherit;
-    }
+:root[data-theme="light"] .lexbranch.closed .lexbranchtitle {
+    background-color: inherit;
 }
 
 /* Widgets */
@@ -1049,7 +1061,7 @@ body.noevents * {
 }
 
 .lexwidget.nobranch {
-    padding-left: 12px;
+    width: calc(100% - 10px) !important;
 }
 
 .lexwidget.auto {
@@ -1223,15 +1235,13 @@ body.noevents * {
     margin: 5px 0 5px 4px;
 }
 
-:root[data-theme="light"] {
-    .lexwidget .lextext {
-        border: 1px solid var(--global-color-terciary) !important;
-    }
+: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;
-    }
+:root[data-theme="light"] .lexbranch .lexseparator {
+    border-top: 1px solid #e7e7e7;
+    border-bottom: 1px solid #c1c1c1;
 }
 
 .lextitle {
@@ -1302,16 +1312,14 @@ body.noevents * {
     padding: 0.35rem;
 }
 
-:root[data-theme="light"] {
-    .lexbutton {
-        --button-color: var(--global-button-color);
-        border: 1px solid var(--global-color-terciary);
-    }
+:root[data-theme="light"] .lexbutton {
+    --button-color: var(--global-button-color);
+    border: 1px solid var(--global-color-terciary);
+}
 
-    .lexbutton.selected {
-        background: #3c4145;
-        color: #DDD;
-    }
+:root[data-theme="light"] .lexbutton.selected {
+    background: #3c4145;
+    color: #DDD;
 }
 
 /* Colors */
@@ -1575,21 +1583,18 @@ body.noevents * {
     margin-top: 8px;
 }
 
-:root[data-theme="light"] {
-
-    .lexdropdown .lexfilter {
-        background-color: var(--global-color-primary);
-    }
+:root[data-theme="light"] .lexdropdown .lexfilter {
+    background-color: var(--global-color-primary);
+}
 
-    .lexdropdown ul {
-        background-color: var(--global-color-primary);
-        box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
-    }
+:root[data-theme="light"] .lexdropdown ul {
+    background-color: var(--global-color-primary);
+    box-shadow: 0 0px 6px rgba(175, 175, 175, 0.788);
+}
 
-    .lexdropdown .lexdropdownitem:hover {
-        background-color: var(--global-selected-light);
-        color: #fff;
-    }
+:root[data-theme="light"] .lexdropdown .lexdropdownitem:hover {
+    background-color: var(--global-selected-light);
+    color: #fff;
 }
 
 /* Check box */
@@ -1649,16 +1654,11 @@ body.noevents * {
 }
 
 .lexcheckboxcont {
-    font-weight: bold;
     display: inline-flex;
     gap: 8px;
     margin: 0 auto;
 }
 
-.lexcheckboxcont .checkboxtext {
-    font-weight: bold;
-}
-
 .lexcheckboxsubmenu {
     width: 100%;
     padding: 6px;
@@ -2319,7 +2319,7 @@ input[type=number] {
 
 .lextree {
     border-radius: 6px;
-    width: calc(100% - 6px);
+    width: 100%;
     min-height: 12px;
     margin: 0 auto;
     margin-top: 6px;
@@ -2373,6 +2373,9 @@ input[type=number] {
 .lextree ul {
     padding-bottom: 16px;
     padding-inline-start: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
 }
 
 .lextree input {
@@ -2389,8 +2392,8 @@ input[type=number] {
 .lextree .lextreeitem {
     list-style-type: none;
     align-items: center;
-    margin-bottom: 3px;
     line-height: 25px;
+    display: flex;
     cursor: pointer;
     outline: none;
     border-radius: 6px;
@@ -2400,6 +2403,13 @@ input[type=number] {
     user-select: none;
 }
 
+.lextree .lextreeitem div {
+    display: flex;
+    gap: 0.25rem;
+    margin-left: auto;
+    margin-right: 8px;
+}
+
 .lextree .lextreeitem img {
     width: 12px;
     height: 12px;
@@ -2412,6 +2422,7 @@ input[type=number] {
     width: 12px;
     height: 12px;
     margin-right: 6px;
+    font-size: var(--global-font-size-sm);
 }
 
 .lextree .lextreeitem.draggingover {
@@ -2428,35 +2439,13 @@ input[type=number] {
     background: light-dark(var(--global-selected-light), var(--global-selected));
 }
 
-.lextree .lextreeitem a {
-    margin-right: 6px;
-    margin-top: 4px;
-    font-size: var(--global-font-size-sm);
-}
-
 .lextree .lextreeitem a.hierarchy {
     margin-right: 6px;
     margin-top: 4px;
 }
 
-.lextree .lextreeitem a:hover {
-    color: var(--global-text-primary);
-}
-
-.lextree .lextreeitem a:active {
-    color: var(--global-button-color);
-    margin-top: 6px;
-}
-
-.lextree .lextreeitem.parent a {
-    font-size: var(--global-font-size-xs);
-}
-
-.lextree .lextreeitem .itemicon {
-    font-size: var(--global-font-size-sm) !important;
-    float: right;
-    margin-top: 7px;
-    margin-right: 8px;
+.lextree .lextreeitem .lexicon {
+    font-size: var(--global-font-size-sm);
 }
 
 .lextree .lextreeitem .itemicon:hover {
@@ -2667,11 +2656,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     opacity: 0;
 }
 
-:root[data-theme="light"] {
-    .lexmenubox {
-        background-color: #fffffff3;
-        box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
-    }
+:root[data-theme="light"] .lexmenubox {
+    background-color: #fffffff3;
+    box-shadow: 0px 6px 7px -3px #a7a7a7b7 !important;
 }
 
 .lexmenubox[data-submenu] {
@@ -2836,6 +2823,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 0px !important;
 }
 
+.lexmenubar .lexmenubutton.main a {
+    font-size: var(--global-font-size-xxl);
+}
+
 .lexmenubar .lexmenubutton.disabled a {
     color: light-dark(var(--global-color-terciary), var(--global-button-color));
     cursor: default;
@@ -3006,6 +2997,12 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-bottom: 0.4rem;
 }
 
+.lexsidebar .lextext {
+    transform: translate(0, 0);
+    opacity: 1;
+    transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
+}
+
 .lexsidebar .lexsidebargrouptitle {
     font-size: var(--global-font-size-sm);
     font-weight: 600;
@@ -3030,13 +3027,13 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     transition: transform 0.3s cubic-bezier(0,0,.2,1), opacity 0.1s cubic-bezier(0,0,.2,1), max-height 0.3s cubic-bezier(0,0,.2,1);
 }
 
-.lexsidebar.collapsing .lexsidebargrouptitle * {
+.lexsidebar.collapsing .lexsidebargrouptitle *, .lexsidebar.collapsing .lextext {
     max-height: 0px;
     transform: translate(0, -24px);
     opacity: 0;
 }
 
-.lexsidebar.collapsed .lexsidebargrouptitle * {
+.lexsidebar.collapsed .lexsidebargrouptitle *, .lexsidebar.collapsed .lextext {
     display: none;
 }
 
@@ -3107,6 +3104,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 16px;
     padding-inline: 16px;
     display: flex;
+    align-self: center;
     flex-direction: column;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -3116,6 +3114,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     border-left: 1px solid #5251514d;
 }
 
+.lexsidebar .lexsidebarsubentrycontainer:not(:has(div)) {
+    margin: 0px;
+}
+
 .lexsidebar.collapsing .lexsidebarsubentrycontainer {
     max-height: 0px;
     transform: translate(-8px, -8px);
@@ -3179,7 +3181,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: flex;
     border-radius: 8px;
     padding: 8px;
+    font-size: var(--global-font-size);
     cursor: pointer;
+    align-items: center;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -3200,17 +3204,24 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexavatar {
-    background-color: #000;
+    background-color: var(--global-intense-background);
+}
+
+.lexsidebar .lexavatar:has(svg) {
+    border: 1px solid #ffffff18;
 }
 
 .lexsidebar .lexsidebarfooter div, .lexsidebar .lexsidebarheader div {
-    width: calc(100% - 88px);
     height: 100%;
+    transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
+}
+
+.lexsidebar .lexsidebarfooter div.infodefault, .lexsidebar .lexsidebarheader div.infodefault {
+    width: calc(100% - 88px);
     padding-inline: 12px;
     justify-content: center;
     display: flex;
     flex-direction: column;
-    transition: width 0.3s cubic-bezier(0,0,.2,1), padding-inline 0.3s cubic-bezier(0,0,.2,1);
 }
 
 .lexsidebar .lexsidebarfooter div span, .lexsidebar .lexsidebarheader div span {
@@ -3232,6 +3243,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     align-content: center;
 }
 
+.lexsidebar .lexsidebarheader a.toggler {
+    margin-left: auto;
+}
+
 .lexsidebar .lexsidebarfooter svg, .lexsidebar .lexsidebarheader svg {
     place-self: center;
 }
@@ -3349,10 +3364,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-left: 4px;
 }
 
-:root[data-theme="light"] {
-    .lexoverlaybuttons .lexbutton img {
-        filter: invert(1);
-    }
+:root[data-theme="light"] .lexoverlaybuttons .lexbutton img {
+    filter: invert(1);
 }
 
 .lexoverlaybuttons .lexbutton.selected {
@@ -3888,10 +3901,8 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     gap: 8px;
 }
 
-:root[data-theme="light"] {
-    .lextable table {
-        box-shadow: none;
-    }
+:root[data-theme="light"] .lextable table {
+    box-shadow: none;
 }
 
 /* Custom Widgets Widget */
@@ -4032,38 +4043,35 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
     margin-top: 8px;
 }
 
-:root[data-theme="light"] {
-
-    .lexknob .knobcircle {
-        background: rgb(182, 182, 182);
-        background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(160, 160, 160, 1) 100%);
-        box-shadow: 0px 0px 8px 2px #a3a3a379;
-    }
+:root[data-theme="light"] .lexknob .knobcircle {
+    background: rgb(182, 182, 182);
+    background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgba(160, 160, 160, 1) 100%);
+    box-shadow: 0px 0px 8px 2px #a3a3a379;
+}
 
-    /* Arc Indicator */
-    .lexknob .knobcircle::before {
-        border: 2px solid rgba(255, 255, 255, 0.2);
-    }
+/* Arc Indicator */
+:root[data-theme="light"] .lexknob .knobcircle::before {
+    border: 2px solid rgba(255, 255, 255, 0.2);
+}
 
-    /* Tick Marks */
-    .lexknob.show-ticks .knobcircle::after {
-        background: repeating-conic-gradient(transparent 0deg,
-                rgba(50, 50, 50, 0.493) 1deg 3deg,
-                transparent 4deg calc(var(--knob-snap-mark) - 1deg));
-    }
+/* Tick Marks */
+:root[data-theme="light"] .lexknob.show-ticks .knobcircle::after {
+    background: repeating-conic-gradient(transparent 0deg,
+            rgba(50, 50, 50, 0.493) 1deg 3deg,
+            transparent 4deg calc(var(--knob-snap-mark) - 1deg));
+}
 
-    .lexknob .innerknobcircle {
-        background-color: rgb(182, 182, 182);
-    }
+:root[data-theme="light"] .lexknob .innerknobcircle {
+    background-color: rgb(182, 182, 182);
+}
 
-    .lexknob .knobmarker {
-        background-color: var(--global-selected-dark);
-        filter: brightness(1.5);
-    }
+:root[data-theme="light"] .lexknob .knobmarker {
+    background-color: var(--global-selected-dark);
+    filter: brightness(1.5);
+}
 
-    .lexknob.disabled .knobmarker {
-        background-color: var(--global-text-primary);
-    }
+:root[data-theme="light"] .lexknob.disabled .knobmarker {
+    background-color: var(--global-text-primary);
 }
 
 /* Icon swap */
@@ -4159,7 +4167,6 @@ thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td
 
 .lextimeline .lextree {
     margin: 0px !important;
-    width: 100%;
 }
 
 .lextimeline .lextree .lextreeitem {
@@ -5105,94 +5112,91 @@ ul.lexassetscontent {
 
 .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
-:root[data-theme="light"] {
-
-    .lexcodeeditor pre.active-line {
-        background-color: #c5c4c4ab;
-    }
-
-    .lexcodeeditor.disabled pre.active-line {
-        background: none;
-    }
-
-    .lexcodescrollbar div {
-        /* thumb */
-        background-color: #8383839d !important;
-    }
+:root[data-theme="light"] .lexcodeeditor pre.active-line {
+    background-color: #c5c4c4ab;
+}
 
-    .lexcodescrollbar div:hover {
-        /* thumb */
-        background-color: #5e5e5ea9 !important;
-    }
+:root[data-theme="light"] .lexcodeeditor.disabled pre.active-line {
+    background: none;
+}
 
-    .cm-str { color: #a15e3e; }   /* string */
-    .cm-std { color: #a753c0; }   /* statements & declarations */
-    .cm-kwd { color: #1967d2; }   /* keyword */
-    .cm-com { color: #188038; }   /* comment */
-
-    .cm-typ.javascript { color: #0b9484; }  /* type */
-    .cm-dec.javascript { color: #c5221f; }  /* decimal */
-    .cm-sym.javascript { color: #333333; }  /* symbol */
-    .cm-mtd.javascript { color: #539ac7 }   /* method */
-
-    .cm-typ.c { color: #0b9484; }   /* type */
-    .cm-bln.c { color: #333333; }   /* builtin */
-    .cm-dec.c { color: #c5221f; }   /* decimal */
-    .cm-sym.c { color: #333333; }   /* symbol */
-    .cm-mtd.c { color: #539ac7 }    /* method */
-    .cm-ppc.c { color: #626262 }    /* preprocessor */
-
-    .cm-typ.cpp { color: #0b9484; }   /* type */
-    .cm-bln.cpp { color: #333333; }   /* builtin */
-    .cm-dec.cpp { color: #c5221f; }   /* decimal */
-    .cm-sym.cpp { color: #333333; }   /* symbol */
-    .cm-mtd.cpp { color: #539ac7 }    /* method */
-    .cm-ppc.cpp { color: #626262 }    /* preprocessor */
-
-    .cm-sym.cmake { color: #a753c0; }  /* symbol */
-
-    .cm-kwd.css { color: #c49319; }   /* keyword */
-    .cm-typ.css { color: #539ac7; }   /* type */
-    .cm-bln.css { color: #2194ce; }   /* builtin */
-    .cm-dec.css { color: #c5221f; }   /* decimal */
-    .cm-sym.css { color: #a753c0; }   /* symbol */
-
-    .cm-dec.json { color: #c5221f; }  /* decimal */
-    .cm-sym.json { color: #a753c0; }  /* symbol */
-
-    .cm-typ.glsl { color: #0b9484; }  /* type */
-    .cm-dec.glsl { color: #c5221f; }  /* decimal */
-    .cm-mtd.glsl { color: #539ac7; }  /* method */
-    .cm-sym.glsl { color: #a753c0; }  /* symbol */
-
-    .cm-typ.wgsl { color: #0b9484; }  /* type */
-    .cm-dec.wgsl { color: #c5221f; }  /* decimal */
-    .cm-mtd.wgsl { color: #539ac7; }  /* method */
-    .cm-sym.wgsl { color: #a753c0; }  /* symbol */
-    .cm-ppc.wgsl { color: #626262; }  /* preprocessor */
-
-    .cm-typ.rust { color: #0b9484; }  /* type */
-    .cm-dec.rust { color: #c5221f; }  /* decimal */
-    .cm-sym.rust { color: #333333; }  /* symbol */
-    .cm-mtd.rust { color: #539ac7 }   /* method */
-
-    .cm-typ.python { color: #0b9484; }  /* type */
-    .cm-dec.python { color: #c5221f; }  /* decimal */
-    .cm-sym.python { color: #333333; }  /* symbol */
-    .cm-mtd.python { color: #539ac7 }   /* method */
-
-    .cm-dec.batch { color: #c5221f; }   /* decimal */
-    .cm-sym.batch { color: #a753c0; }   /* symbol */
-
-    .cm-bln.html { color: #539ac7; }    /* builtin */
-    .cm-sym.html { color: #696969; }    /* symbol */
-
-    .cm-bln.xml { color: #a1d2f0; }    /* builtin */
-    .cm-sym.xml { color: #929292; }    /* symbol */
-
-    .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
+:root[data-theme="light"] .lexcodescrollbar div {
+    /* thumb */
+    background-color: #8383839d !important;
 }
 
+:root[data-theme="light"] .lexcodescrollbar div:hover {
+    /* thumb */
+    background-color: #5e5e5ea9 !important;
+}
+
+:root[data-theme="light"] .cm-str { color: #a15e3e; }   /* string */
+:root[data-theme="light"] .cm-std { color: #a753c0; }   /* statements & declarations */
+:root[data-theme="light"] .cm-kwd { color: #1967d2; }   /* keyword */
+:root[data-theme="light"] .cm-com { color: #188038; }   /* comment */
+
+:root[data-theme="light"] .cm-typ.javascript { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.javascript { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.javascript { color: #333333; }  /* symbol */
+:root[data-theme="light"] .cm-mtd.javascript { color: #539ac7 }   /* method */
+
+:root[data-theme="light"] .cm-typ.c { color: #0b9484; }   /* type */
+:root[data-theme="light"] .cm-bln.c { color: #333333; }   /* builtin */
+:root[data-theme="light"] .cm-dec.c { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.c { color: #333333; }   /* symbol */
+:root[data-theme="light"] .cm-mtd.c { color: #539ac7 }    /* method */
+:root[data-theme="light"] .cm-ppc.c { color: #626262 }    /* preprocessor */
+
+:root[data-theme="light"] .cm-typ.cpp { color: #0b9484; }   /* type */
+:root[data-theme="light"] .cm-bln.cpp { color: #333333; }   /* builtin */
+:root[data-theme="light"] .cm-dec.cpp { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.cpp { color: #333333; }   /* symbol */
+:root[data-theme="light"] .cm-mtd.cpp { color: #539ac7 }    /* method */
+:root[data-theme="light"] .cm-ppc.cpp { color: #626262 }    /* preprocessor */
+
+:root[data-theme="light"] .cm-sym.cmake { color: #a753c0; }  /* symbol */
+
+:root[data-theme="light"] .cm-kwd.css { color: #c49319; }   /* keyword */
+:root[data-theme="light"] .cm-typ.css { color: #539ac7; }   /* type */
+:root[data-theme="light"] .cm-bln.css { color: #2194ce; }   /* builtin */
+:root[data-theme="light"] .cm-dec.css { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.css { color: #a753c0; }   /* symbol */
+
+:root[data-theme="light"] .cm-dec.json { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.json { color: #a753c0; }  /* symbol */
+
+:root[data-theme="light"] .cm-typ.glsl { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.glsl { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-mtd.glsl { color: #539ac7; }  /* method */
+:root[data-theme="light"] .cm-sym.glsl { color: #a753c0; }  /* symbol */
+
+:root[data-theme="light"] .cm-typ.wgsl { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.wgsl { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-mtd.wgsl { color: #539ac7; }  /* method */
+:root[data-theme="light"] .cm-sym.wgsl { color: #a753c0; }  /* symbol */
+:root[data-theme="light"] .cm-ppc.wgsl { color: #626262; }  /* preprocessor */
+
+:root[data-theme="light"] .cm-typ.rust { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.rust { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.rust { color: #333333; }  /* symbol */
+:root[data-theme="light"] .cm-mtd.rust { color: #539ac7 }   /* method */
+
+:root[data-theme="light"] .cm-typ.python { color: #0b9484; }  /* type */
+:root[data-theme="light"] .cm-dec.python { color: #c5221f; }  /* decimal */
+:root[data-theme="light"] .cm-sym.python { color: #333333; }  /* symbol */
+:root[data-theme="light"] .cm-mtd.python { color: #539ac7 }   /* method */
+
+:root[data-theme="light"] .cm-dec.batch { color: #c5221f; }   /* decimal */
+:root[data-theme="light"] .cm-sym.batch { color: #a753c0; }   /* symbol */
+
+:root[data-theme="light"] .cm-bln.html { color: #539ac7; }    /* builtin */
+:root[data-theme="light"] .cm-sym.html { color: #696969; }    /* symbol */
+
+:root[data-theme="light"] .cm-bln.xml { color: #a1d2f0; }    /* builtin */
+:root[data-theme="light"] .cm-sym.xml { color: #929292; }    /* symbol */
+
+:root[data-theme="light"] .cm-bln.markdown { color: #a1d2f0; }  /* builtin */
+
 /* Node Graph */
 
 .lexgraph {