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

checkpoint dark mode refactor

Browse source
This commit is contained in:
Stewart Allen 2024-06-02 23:42:15 -04:00
commit 3598e5fe54
1 changed files with 115 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

184
web/kiri/index.css
View file

@ -17,7 +17,7 @@
--menu: #f0f0f0; --menu: #f0f0f0;
--menu-text: #222; --menu-text: #222;
--menu-border: #555; --menu-border: #555;
--dark-menu-text: #111; --dark-menu-text: #fff;
--menu-hover: #ddd; --menu-hover: #ddd;
--blue-0: rgb(48, 64, 82); --blue-0: rgb(48, 64, 82);
--blue-1: rgb(96,127,164); --blue-1: rgb(96,127,164);
@ -27,7 +27,7 @@
--blue-5: rgb(240, 243, 245); --blue-5: rgb(240, 243, 245);
--blue-6: rgb(247, 249, 250); --blue-6: rgb(247, 249, 250);
--slide-bg: rgba(190, 204, 219, 0.5); --slide-bg: rgba(190, 204, 219, 0.5);
--scroll-bg: rgba(221, 228, 234, 0.25); --scroll-bg: transparent;
} }
/* surface size configuration and font import */ /* surface size configuration and font import */
@ -94,6 +94,7 @@ button.yellow {
} }
button.yellow:hover { button.yellow:hover {
background-color: #eea; background-color: #eea;
} }
button { button {
display: flex; display: flex;
@ -199,6 +200,110 @@ th, tr, td, label {
font-size: larger; font-size: larger;
} }
/** dark conversion */
.dark input,
.dark textarea
{
border-color: #888;
background-color: #555;
color: #fff;
}
.dark button {
background-color: #777;
border: 1px solid #999;
}
.dark #progress {
background-color: #666;
}
.dark #top,
.dark #top .content,
.dark #app-name,
.dark .set2-group,
.dark .set2-group .var-row,
.dark .set2-sep,
.dark .var-row,
.dark .movable .body
.dark #slider-zero,
.dark #slider-max,
.dark .mdialog
{
background-color: #444;
color: white;
}
.dark .set2-group {
border: 1px solid #888 !important;
}
.dark .set2-group .var-row:hover,
.dark .var-row:hover
{
border-right: 3px solid var(--blue-3);
background-color: var(--blue-1) !important;
}
.dark #slider-line {
background-color: #444;
}
.dark .set-header {
background-color: var(--blue-0);
}
.dark #oplist > div,
.dark .opdiv
{
background-color: #777;
border: 1px solid #999;
}
.dark #oplist > div:hover,
.dark #op-add:hover {
background-color: var(--blue-1);
}
.dark #oplist div:hover .del {
color: #777;
}
.dark #top .content > div:hover {
background-color: var(--blue-1);
}
.dark .top-menu label {
color: var(--dark-menu-text)
}
.dark .top-menu > span:hover {
background-color: var(--blue-1);
}
.dark .top-menu > span:hover label,
.dark .top-menu > span:hover svg
{
color: var(--dark-menu-text) !important;
}
.dark .top-menu > span.selected,
.dark .top-menu > span.selected svg,
.dark .top-menu-drop div.selected
{
background-color: var(--blue-1);
color: #fff;
}
.dark #slider-hold {
background-color: var(--blue-0);
}
.dark #stats {
color: #888;
}
.dark #rnfo {
color: #aaa;
}
.dark #rnfo label {
color: #ada;
}
.dark #slider-center {
/* background-color: rgba(255,255,255,0.15); */
}
#slider-center {
/* background-color: rgba(255,255,255,0.5); */
}
.dark #slider-hold .handle {
background-color: #999;
}
.dark #speedbar label {
color: black;
}
/* top menu bar, drop menus */ /* top menu bar, drop menus */
#top, #app-name { #top, #app-name {
background-color: #fff; background-color: #fff;
@ -234,9 +339,6 @@ th, tr, td, label {
.top-menu label { .top-menu label {
color: #444; color: #444;
} }
.dark .top-menu label {
color: var(--dark-menu-text)
}
.top-menu svg { .top-menu svg {
color: var(--blue-1); color: var(--blue-1);
} }
@ -249,9 +351,6 @@ th, tr, td, label {
.top-menu > span:hover label { .top-menu > span:hover label {
color: #000; color: #000;
} }
.dark .top-menu > span:hover label {
color: var(--dark-menu-text) !important;
}
.top-menu > span:hover > svg { .top-menu > span:hover > svg {
color: black; color: black;
} }
@ -260,7 +359,9 @@ th, tr, td, label {
border-left: 1px solid var(--blue-2); border-left: 1px solid var(--blue-2);
border-right: 1px solid var(--blue-2); border-right: 1px solid var(--blue-2);
} }
.top-menu > span.selected, .top-menu-drop div.selected { .top-menu > span.selected,
.top-menu-drop div.selected
{
background-color: var(--blue-3); background-color: var(--blue-3);
} }
.top-menu > span:hover .top-menu-drop { .top-menu > span:hover .top-menu-drop {
@ -1040,7 +1141,6 @@ th, tr, td, label {
#camop_dialog textarea { #camop_dialog textarea {
border: 1px solid gray; border: 1px solid gray;
margin: 5px 1px 5px 1px; margin: 5px 1px 5px 1px;
background-color: #f4f4f4;
} }
#camop_dialog button, #camop_dialog label { #camop_dialog button, #camop_dialog label {
text-align: center; text-align: center;
@ -1137,9 +1237,6 @@ th, tr, td, label {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,0.25); color: rgba(0,0,0,0.25);
} }
.dark #oplist div:hover .del {
color: #777;
}
#oplist div:hover .del { #oplist div:hover .del {
color: #888; color: #888;
z-index: 10000; z-index: 10000;
@ -1221,14 +1318,12 @@ th, tr, td, label {
background-color: rgb(220,220,220); background-color: rgb(220,220,220);
border-top: 1px solid #888; border-top: 1px solid #888;
border-bottom: 1px solid #888; border-bottom: 1px solid #888;
/* border-radius: 3px; */
} }
#progbar { #progbar {
width: 0; width: 0;
text-align: left; text-align: left;
position: relative; position: relative;
background-color: rgb(255,90,90); background-color: rgb(255,90,90);
/* border-radius: 3px; */
} }
#progtxt { #progtxt {
display: none; display: none;
@ -1266,19 +1361,20 @@ th, tr, td, label {
top: 50%; top: 50%;
max-height: 80%; max-height: 80%;
} }
.mdialog { .mdialog {
display: none; display: none;
padding: 10px; padding: 10px;
min-height: 20px; min-height: 20px;
background-color: #fff; background-color: #fff;
} }
.mod-top { .mod-top {
height: 10px; height: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
background-color: var(--main-color); background-color: var(--main-color);
} }
#tool-cols { #tool-cols {
max-height: 350px; max-height: 350px;
} }
@ -1323,7 +1419,7 @@ th, tr, td, label {
#mod-tools .set-header { #mod-tools .set-header {
margin: 0; margin: 0;
} }
.devlist { /* .devlist {
background-color: #fdfdfd; background-color: #fdfdfd;
} }
.devlist button { .devlist button {
@ -1344,7 +1440,7 @@ th, tr, td, label {
.devlist button.selected { .devlist button.selected {
background-color: var(--highlight); background-color: var(--highlight);
border: 1px solid var(--highlight); border: 1px solid var(--highlight);
} } */
#mod-help svg { #mod-help svg {
width: 36px; width: 36px;
height: 36px; height: 36px;
@ -1657,9 +1753,7 @@ th, tr, td, label {
} }
.t-head { .t-head {
text-align: center;
font-weight: bold; font-weight: bold;
padding-bottom: 5px;
} }
.t-33 { .t-33 {
width: 33%; width: 33%;
@ -1705,7 +1799,7 @@ th, tr, td, label {
overflow: auto; overflow: auto;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
background-color: #f8f8f8; /* background-color: #f8f8f8; */
} }
#device-action button, #tool-action button { #device-action button, #tool-action button {
flex-direction: column; flex-direction: column;
@ -1822,15 +1916,6 @@ th, tr, td, label {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.dark #slider-center {
/* background-color: rgba(255,255,255,0.15); */
}
#slider-center {
/* background-color: rgba(255,255,255,0.5); */
}
.dark #slider-line {
background-color: #555;
}
#slider-line { #slider-line {
position: absolute; position: absolute;
left: 0; left: 0;
@ -1841,10 +1926,6 @@ th, tr, td, label {
max-height: 3px; max-height: 3px;
background-color: #bbb; background-color: #bbb;
} }
.dark #slider-zero, .dark #slider-max {
background-color: #555;
color: white;
}
#slider-zero { #slider-zero {
z-index: 10; z-index: 10;
background-color: #bbb; background-color: #bbb;
@ -1856,9 +1937,6 @@ th, tr, td, label {
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.dark #slider-hold {
background-color: var(--blue-0);
}
#slider-hold { #slider-hold {
background-color: var(--blue-3); background-color: var(--blue-3);
position: absolute; position: absolute;
@ -1869,9 +1947,6 @@ th, tr, td, label {
#slider-hold .slider-mobile { #slider-hold .slider-mobile {
width: 40px !important; width: 40px !important;
} }
.dark #slider-hold .handle {
background-color: #999;
}
#slider-hold .handle { #slider-hold .handle {
width: 15px; width: 15px;
height: 100%; height: 100%;
@ -1943,9 +2018,6 @@ th, tr, td, label {
right: 3px; right: 3px;
background-color: transparent; background-color: transparent;
} }
.dark #speedbar label {
color: black;
}
#speedbar label { #speedbar label {
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
@ -1971,9 +2043,6 @@ th, tr, td, label {
align-items: stretch; align-items: stretch;
text-transform: capitalize; text-transform: capitalize;
} }
.settings .set-group {
cursor: pointer;
}
.settings .set-header a { .settings .set-header a {
font-size: smaller; font-size: smaller;
} }
@ -2040,20 +2109,6 @@ th, tr, td, label {
margin-left: 5px; margin-left: 5px;
width: 100%; width: 100%;
} }
.set-group {
align-items: center;
flex-direction: column;
background-color: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,0.2);
border-radius: 3px;
padding: 8px 10px 8px 10px;
color: var(--fg-gray);
}
.set-group:hover {
background-color: #eee;
border: 1px solid #aaa;
color: #000;
}
.set-pop { .set-pop {
top: 50%; top: 50%;
left: calc(100% + 6px); left: calc(100% + 6px);
@ -2164,18 +2219,9 @@ th, tr, td, label {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
} }
.dark #stats {
color: #888;
}
#stats:hover #rnfo { #stats:hover #rnfo {
display: grid; display: grid;
} }
.dark #rnfo {
color: #aaa;
}
.dark #rnfo label {
color: #ada;
}
#rnfo { #rnfo {
display: none; display: none;
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;