AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

organizing css

Browse source
This commit is contained in:
Stewart Allen 2026-02-23 11:06:47 -05:00
commit 67ed8a4d2c
1 changed files with 199 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

317
web/kiri/index.css
View file

@ -209,136 +209,187 @@ details[open] summary::after {
} }
/** dark conversion */ /** dark conversion */
:root[data-theme="dark"] #alert-border:hover { :root[data-theme="dark"] {
/* global alerts / labels */
#alert-border:hover {
background-color: rgba(255,255,255,0.7); background-color: rgba(255,255,255,0.7);
} }
:root[data-theme="dark"] #mesh-info label, #mesh-info label,
:root[data-theme="dark"] #mesh-info span, #mesh-info span,
:root[data-theme="dark"] #oplist div .del { #oplist div .del {
color: #aaa; color: #aaa;
} }
:root[data-theme="dark"] #oplist div:hover .del { /* shared panels */
color: #333 !important; .mod-top, .mod-end {
}
:root[data-theme="dark"] .mod-top, :root[data-theme="dark"] .mod-end {
background-color: var(--blue-00); background-color: var(--blue-00);
} }
:root[data-theme="dark"] .pop-sep, .pop-sep,
:root[data-theme="dark"] .set-sep .set-sep {
{
background-color: #555 !important; background-color: #555 !important;
} }
:root[data-theme="dark"] #render-tools .pop, .t-body {
:root[data-theme="dark"] #render-tools svg, border: 1px solid #555;
:root[data-theme="dark"] .pop-tics > div, }
:root[data-theme="dark"] #menubar.content, #render-tools .pop,
:root[data-theme="dark"] #app-name, #render-tools svg,
:root[data-theme="dark"] .set2-group, .pop-tics > div,
:root[data-theme="dark"] .set2-group .var-row, #menubar.content,
:root[data-theme="dark"] .set2-sep, #app-name,
:root[data-theme="dark"] .var-row, .set2-group,
:root[data-theme="dark"] #layers .var-row, .set2-group .var-row,
:root[data-theme="dark"] #slider-zero, .set2-sep,
:root[data-theme="dark"] #slider-max, .var-row,
:root[data-theme="dark"] .mdialog, #layers .var-row,
:root[data-theme="dark"] .t-body, #slider-zero,
:root[data-theme="dark"] .cam-pop-op, #slider-max,
:root[data-theme="dark"] .mod-print, .mdialog,
:root[data-theme="dark"] .mod-print .header label .t-body,
{ .cam-pop-op,
.mod-print,
.mod-print .header label {
background-color: #282828; background-color: #282828;
color: white; color: white;
} }
:root[data-theme="dark"] #dev-list:hover { /* borders + emphasis */
#dev-list:hover {
background-color: var(--blue-1); background-color: var(--blue-1);
} }
:root[data-theme="dark"] #render-tools .pop, #render-tools .pop,
:root[data-theme="dark"] #render-tools svg, #render-tools svg,
:root[data-theme="dark"] .cam-pop-op { .cam-pop-op {
border-color: #555; border-color: #555;
} }
:root[data-theme="dark"] .btn-sel, .btn-sel,
:root[data-theme="dark"] .txt-sel button { .txt-sel button {
/* color: #fff; */ /* color: #fff; */
background-color: var(--blue-1); background-color: var(--blue-1);
} }
:root[data-theme="dark"] .t-body, /* lists / rows */
:root[data-theme="dark"] .set2-group .var-row:hover, .set2-group .var-row:hover,
:root[data-theme="dark"] .var-row:hover .var-row:hover {
{
border-right: 3px solid var(--blue-3); border-right: 3px solid var(--blue-3);
background-color: var(--blue-1) !important; background-color: var(--blue-1) !important;
} }
:root[data-theme="dark"] #slider-line { #slider-line {
background-color: #444; background-color: #444;
} }
:root[data-theme="dark"] .set-header { .set-header {
background-color: var(--blue-00); background-color: var(--blue-00);
} }
:root[data-theme="dark"] #oplist > div, #oplist > div,
:root[data-theme="dark"] .opdiv .opdiv {
{
background-color: #333; background-color: #333;
border: 1px solid #888; border: 1px solid #888;
} }
:root[data-theme="dark"] #oplist > div:hover, #oplist > div:hover,
:root[data-theme="dark"] #op-add:hover { #op-add:hover {
background-color: var(--blue-1); background-color: var(--blue-1);
} }
:root[data-theme="dark"] #oplist div:hover .del { #oplist div:hover .del {
color: #777; color: #777 !important;
} }
:root[data-theme="dark"] #menubar.content > div:hover { /* menu states */
#menubar.content > div:hover {
background-color: var(--blue-1); background-color: var(--blue-1);
} }
:root[data-theme="dark"] .top-menu label { .top-menu label {
color: var(--dark-menu-text) color: var(--dark-menu-text)
} }
:root[data-theme="dark"] #render-tools svg:hover { #render-tools svg:hover {
background-color: var(--blue-1); background-color: var(--blue-1);
border-color: var(--blue-3); border-color: var(--blue-3);
} }
:root[data-theme="dark"] .top-menu > span:hover { .top-menu > span:hover {
background-color: var(--blue-1); background-color: var(--blue-1);
} }
:root[data-theme="dark"] .top-menu > span:hover label, .top-menu > span:hover label,
:root[data-theme="dark"] .top-menu > span:hover svg .top-menu > span:hover svg {
{
color: var(--dark-menu-text) !important; color: var(--dark-menu-text) !important;
} }
:root[data-theme="dark"] .top-menu > span.selected, .top-menu > span.selected,
:root[data-theme="dark"] .top-menu > span.selected svg, .top-menu > span.selected svg,
:root[data-theme="dark"] .top-menu-drop div.selected .top-menu-drop div.selected {
{
background-color: var(--blue-1); background-color: var(--blue-1);
color: #fff; color: #fff;
} }
:root[data-theme="dark"] #slider-hold { /* status + side widgets */
#slider-hold {
background-color: var(--blue-0); background-color: var(--blue-0);
} }
:root[data-theme="dark"] #stats { #stats {
color: #888; color: #888;
} }
:root[data-theme="dark"] #rnfo { #rnfo {
color: #aaa; color: #aaa;
border: 1px solid rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.25);
background-color: rgba(0,0,0,0.75); background-color: rgba(0,0,0,0.75);
} }
:root[data-theme="dark"] #rnfo label { #rnfo label {
color: #ada; color: #ada;
} }
:root[data-theme="dark"] #slider-hold .handle { #slider-hold .handle {
background-color: #999; background-color: #999;
} }
:root[data-theme="dark"] #speedbar label { #speedbar label {
color: black; color: black;
} }
:root[data-theme="dark"] .widopt { .widopt {
background-color: #222; background-color: #222;
} }
:root[data-theme="dark"] #camops summary { #camops summary {
background-color: var(--blue-0); background-color: var(--blue-0);
} }
/* overlays */
#wassup {
background-color: rgba(0,255,0,0.2);
}
.blurb p:first-child,
.blurb p:last-child {
color: #fff;
}
#curtain {
color: white;
background-color: black;
}
/* dialogs + print */
#op-add-list > div:hover {
color: black;
background-color: var(--blue-2) !important;
}
.mod-x {
border-color: #555;
background-color: rgba(0,0,0,0.15);
}
#mod-help a:hover {
color: #333;
}
.mod-print .box {
background-color: rgba(0,0,0,0.15);
border-color: #555;
}
.mod-print button {
background-color: #555;
border-color: #777;
}
/* layer controls */
#layer-animate button {
border: 1px solid #555;
background-color: #444;
}
#layer-animate button:hover {
background-color: var(--main-color);
}
#layer-animate button svg {
color: #ddd;
}
#layer-animate label {
border: 1px solid #555;
background-color: #444;
}
#layer-animate input {
border: 1px solid #444;
}
}
/* top menu bar, drop menus */ /* top menu bar, drop menus */
#app-name { #app-name {
@ -346,16 +397,23 @@ details[open] summary::after {
text-transform: capitalize; text-transform: capitalize;
font-family: sans-serif; font-family: sans-serif;
z-index: 15; z-index: 15;
height: 36px; color: var(--appname-blue);
font-weight: bold;
align-self: center;
justify-self: stretch;
height: 100%;
} }
.top-menu { .top-menu {
display: flex; display: flex;
gap: 0px; gap: 0px;
align-items: center;
white-space: nowrap; white-space: nowrap;
align-items: stretch; align-items: stretch;
} }
.top-menu > span { .top-menu > span {
position: relative;
display: flex;
gap: 5px;
align-items: center;
padding: 5px 9px 5px 9px; padding: 5px 9px 5px 9px;
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
@ -374,12 +432,6 @@ details[open] summary::after {
.top-menu svg { .top-menu svg {
color: var(--blue-1); color: var(--blue-1);
} }
.top-menu > span {
position: relative;
display: flex;
gap: 5px;
align-items: center;
}
.top-menu > span:hover label { .top-menu > span:hover label {
color: #000; color: #000;
} }
@ -426,10 +478,11 @@ details[open] summary::after {
} }
#menubar.content { #menubar.content {
gap: 2px;
display: flex; display: flex;
align-items: center;
flex-direction: column; flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 2px;
background-color: #fff; background-color: #fff;
border-top: 1px dashed var(--blue-2); border-top: 1px dashed var(--blue-2);
border-left: 1px solid var(--blue-2); border-left: 1px solid var(--blue-2);
@ -438,29 +491,18 @@ details[open] summary::after {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
#menubar.content {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 2px;
}
#menubar.content > div { #menubar.content > div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#menubar.content > div > label {
text-align: left;
flex-grow: 1;
}
#menubar.content > div > span {
text-align: right;
}
#menubar.content > div > span { #menubar.content > div > span {
padding: 2px 7px 2px 7px; padding: 2px 7px 2px 7px;
padding-left: 10px; padding-left: 10px;
text-align: center; text-align: center;
} }
#menubar.content > div > label { #menubar.content > div > label {
text-align: left;
flex-grow: 1;
padding: 2px 7px 2px 7px; padding: 2px 7px 2px 7px;
justify-self: stretch; justify-self: stretch;
align-self: stretch; align-self: stretch;
@ -470,14 +512,6 @@ details[open] summary::after {
background-color: var(--blue-4); background-color: var(--blue-4);
} }
#app-name {
color: var(--appname-blue);
font-weight: bold;
align-self: center;
justify-self: stretch;
height: 100%;
}
#app,div { #app,div {
display: flex; display: flex;
padding: 0; padding: 0;
@ -696,9 +730,6 @@ details[open] summary::after {
border-top: 5px solid rgba(0,255,100,0.5); border-top: 5px solid rgba(0,255,100,0.5);
border-bottom: 5px solid rgba(0,255,100,0.5); border-bottom: 5px solid rgba(0,255,100,0.5);
} }
:root[data-theme="dark"] #wassup {
background-color: rgba(0,255,0,0.2);
}
.blurb { .blurb {
max-width: 200px; max-width: 200px;
align-items: flex-end; align-items: flex-end;
@ -711,9 +742,6 @@ details[open] summary::after {
.blurb p { .blurb p {
margin: 0; margin: 0;
} }
:root[data-theme="dark"] .blurb p:first-child, :root[data-theme="dark"] .blurb p:last-child {
color: #fff;
}
.blurb p:first-child, .blurb p:last-child { .blurb p:first-child, .blurb p:last-child {
color: #000; color: #000;
} }
@ -733,10 +761,6 @@ details[open] summary::after {
z-index: 1000; z-index: 1000;
} }
:root[data-theme="dark"] #curtain {
color: white;
background-color: black;
}
#tracker { #tracker {
top: 0; top: 0;
@ -864,12 +888,12 @@ details[open] summary::after {
#panel-right { #panel-right {
overflow: unset; overflow: unset;
} }
/* #panel-right { #ws-widgets, #camops, #fdm-ranges {
direction: rtl; padding: 0 4px 0 4px;
}
#camops {
padding-bottom: 2px;
} }
#panel-right * {
direction: ltr;
} */
#panel-left { #panel-left {
padding-right: 5px; padding-right: 5px;
} }
@ -911,8 +935,6 @@ details[open] summary::after {
} }
#top-sep { #top-sep {
display: none; display: none;
}
#top-sep {
z-index: 14; z-index: 14;
height: 1px; height: 1px;
min-height: 1px; min-height: 1px;
@ -1203,7 +1225,6 @@ details[open] summary::after {
} }
#camops { #camops {
display: flex; display: flex;
padding: 0 0 0 0;
} }
#oplist { #oplist {
max-height: calc(70vh - 200px); max-height: calc(70vh - 200px);
@ -1382,10 +1403,6 @@ details[open] summary::after {
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
} }
:root[data-theme="dark"] #op-add-list > div:hover {
color: black;
background-color: var(--blue-2) !important;
}
#op-add-list > div:hover { #op-add-list > div:hover {
background-color: var(--blue-4); background-color: var(--blue-4);
} }
@ -1518,10 +1535,6 @@ details[open] summary::after {
#tool-cols { #tool-cols {
max-height: 350px; max-height: 350px;
} }
:root[data-theme="dark"] .mod-x {
border-color: #555;
background-color: rgba(0,0,0,0.15);
}
.mod-x { .mod-x {
border-radius: 5px; border-radius: 5px;
border: 2px solid rgba(255,255,255,0.5); border: 2px solid rgba(255,255,255,0.5);
@ -1578,9 +1591,6 @@ details[open] summary::after {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
:root[data-theme="dark"] #mod-help a:hover {
color: #333;
}
#mod-help a:hover { #mod-help a:hover {
background-color: #eee; background-color: #eee;
} }
@ -1618,10 +1628,6 @@ details[open] summary::after {
font-weight: normal; font-weight: normal;
padding-top: 5px; padding-top: 5px;
} }
:root[data-theme="dark"] .mod-print .box {
background-color: rgba(0,0,0,0.15);
border-color: #555;
}
.mod-print .box { .mod-print .box {
background-color: rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.5);
border: 1px solid #bbb; border: 1px solid #bbb;
@ -1657,10 +1663,6 @@ details[open] summary::after {
font-weight: bold; font-weight: bold;
padding-right: 10px; padding-right: 10px;
} }
:root[data-theme="dark"] .mod-print button {
background-color: #555;
border-color: #777;
}
.mod-print button { .mod-print button {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -1976,23 +1978,6 @@ details[open] summary::after {
color: #335; color: #335;
} }
:root[data-theme="dark"] #layer-animate button {
border: 1px solid #555;
background-color: #444;
}
:root[data-theme="dark"] #layer-animate button:hover {
background-color: var(--main-color);
}
:root[data-theme="dark"] #layer-animate button svg {
color: #ddd;
}
:root[data-theme="dark"] #layer-animate label {
border: 1px solid #555;
background-color: #444;
}
:root[data-theme="dark"] #layer-animate input {
border: 1px solid #444;
}
#layer-animate { #layer-animate {
pointer-events: all; pointer-events: all;
position: absolute; position: absolute;
@ -2029,34 +2014,6 @@ details[open] summary::after {
border-radius: 4px; border-radius: 4px;
} }
/* #layer-toolpos {
position: absolute;
right: 3px;
bottom: 3px;
z-index: 201;
}
#layer-toolpos label, #layer-toolpos input {
display: inline-flex;
height: 30px;
border-radius: 3px;
border: 1px solid #ccc;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: #ddd;
}
#layer-toolpos label {
width: 30px;
padding: 1px 1px 1px 1px;
margin: 1px 1px 2px 6px;
}
#layer-toolpos input {
background-color: #eee;
font-family: monospace;
padding: 1px 4px 1px 4px;
margin: 1px 1px 2px 1px;
} */
#layer-slider { #layer-slider {
position: absolute; position: absolute;
font-size: smaller; font-size: smaller;