diff --git a/web/kiri/index.css b/web/kiri/index.css
index 581ca3c2..b942e56d 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -244,201 +244,155 @@ details[open] summary::after {
}
/** dark conversion */
-.dark button[disabled] {
- color: #888;
-}
-.dark input[disabled] {
- border-color: #666;
- background-color: #444;
- color: #888;
-}
-.dark input,
-.dark select,
-.dark option
-{
- border-color: #888;
- background-color: #333;
- color: #fff;
-}
-.dark option:checked {
- background-color: var(--blue-1);
-}
-.dark hr {
- border-color: #555;
-}
-.dark textarea {
- background-color: #333;
- color: #fff;
-}
-.dark button {
- color: #fff;
- background-color: #555;
- border: 1px solid #777;
-}
-.dark button:not([disabled]):hover {
- background-color: var(--blue-2);
- color: black;
-}
-.dark #alert-border:hover {
+:root[data-theme="dark"] #alert-border:hover {
background-color: rgba(255,255,255,0.7);
}
-.dark #mesh-info label,
-.dark #mode-info label
+:root[data-theme="dark"] #mesh-info label,
+:root[data-theme="dark"] #mode-info label
{
color: #fff;
border-color: #888;
background-color: var(--blue-0);
}
-.dark #mesh-info span,
-.dark #mode-info span
+:root[data-theme="dark"] #mesh-info span,
+:root[data-theme="dark"] #mode-info span
{
color: #fff;
border-color: #888;
background-color: #333;
}
-.dark #oplist div .del {
+:root[data-theme="dark"] #oplist div .del {
color: #aaa;
}
-.dark #oplist div:hover .del {
+:root[data-theme="dark"] #oplist div:hover .del {
color: #333 !important;
}
-.dark .mod-top, .dark .mod-end {
+:root[data-theme="dark"] .mod-top, :root[data-theme="dark"] .mod-end {
background-color: var(--blue-00);
}
-.dark .pop-sep,
-.dark .set-sep
+:root[data-theme="dark"] .pop-sep,
+:root[data-theme="dark"] .set-sep
{
background-color: #555 !important;
}
-.dark #render-tools .pop,
-.dark #render-tools svg,
-.dark .pop-tics > div,
-.dark #menubar.content,
-.dark #app-name,
-.dark .set2-group,
-.dark .set2-group .var-row,
-.dark .set2-sep,
-.dark .var-row,
-.dark #layers .var-row,
-.dark #slider-zero,
-.dark #slider-max,
-.dark .mdialog,
-.dark .t-body,
-.dark .cam-pop-op,
-.dark .mod-print,
-.dark .mod-print .header label
+:root[data-theme="dark"] #render-tools .pop,
+:root[data-theme="dark"] #render-tools svg,
+:root[data-theme="dark"] .pop-tics > div,
+:root[data-theme="dark"] #menubar.content,
+:root[data-theme="dark"] #app-name,
+:root[data-theme="dark"] .set2-group,
+:root[data-theme="dark"] .set2-group .var-row,
+:root[data-theme="dark"] .set2-sep,
+:root[data-theme="dark"] .var-row,
+:root[data-theme="dark"] #layers .var-row,
+:root[data-theme="dark"] #slider-zero,
+:root[data-theme="dark"] #slider-max,
+:root[data-theme="dark"] .mdialog,
+:root[data-theme="dark"] .t-body,
+:root[data-theme="dark"] .cam-pop-op,
+:root[data-theme="dark"] .mod-print,
+:root[data-theme="dark"] .mod-print .header label
{
background-color: #282828;
color: white;
}
-.dark #dev-list:hover {
+:root[data-theme="dark"] #dev-list:hover {
background-color: var(--blue-1);
}
-.dark #render-tools .pop,
-.dark #render-tools svg,
-.dark .cam-pop-op {
+:root[data-theme="dark"] #render-tools .pop,
+:root[data-theme="dark"] #render-tools svg,
+:root[data-theme="dark"] .cam-pop-op {
border-color: #555;
}
-.dark .btn-sel,
-.dark .txt-sel button {
+:root[data-theme="dark"] .btn-sel,
+:root[data-theme="dark"] .txt-sel button {
/* color: #fff; */
background-color: var(--blue-1);
}
-.dark #dialog {
- background-color: rgba(60,60,60,0.85);
- border-top: 8px solid rgba(100,100,100,1);
- border-bottom: 7px solid rgba(100,100,100,1);
-}
-.dark #modal, .dark #dialog {
- color: #fff !important;
-}
-.dark #modal select, .dark #dialog select {
- color: #fff !important;
-}
-.dark .t-body,
-.dark .set2-group {
+:root[data-theme="dark"] .t-body,
+:root[data-theme="dark"] .set2-group {
border: 1px solid #444 !important;
}
-.dark .set2-group .var-row:hover,
-.dark .var-row:hover
+:root[data-theme="dark"] .set2-group .var-row:hover,
+:root[data-theme="dark"] .var-row:hover
{
border-right: 3px solid var(--blue-3);
background-color: var(--blue-1) !important;
}
-.dark #slider-line {
+:root[data-theme="dark"] #slider-line {
background-color: #444;
}
-.dark .set-header {
+:root[data-theme="dark"] .set-header {
background-color: var(--blue-00);
}
-.dark #oplist > div,
-.dark .opdiv
+:root[data-theme="dark"] #oplist > div,
+:root[data-theme="dark"] .opdiv
{
background-color: #333;
border: 1px solid #888;
}
-.dark #oplist > div:hover,
-.dark #op-add:hover {
+:root[data-theme="dark"] #oplist > div:hover,
+:root[data-theme="dark"] #op-add:hover {
background-color: var(--blue-1);
}
-.dark #oplist div:hover .del {
+:root[data-theme="dark"] #oplist div:hover .del {
color: #777;
}
-.dark #menubar.content > div:hover {
+:root[data-theme="dark"] #menubar.content > div:hover {
background-color: var(--blue-1);
}
-.dark .top-menu label {
+:root[data-theme="dark"] .top-menu label {
color: var(--dark-menu-text)
}
-.dark #render-tools svg:hover {
+:root[data-theme="dark"] #render-tools svg:hover {
background-color: var(--blue-1);
border-color: var(--blue-3);
}
-.dark .top-menu > span:hover {
+:root[data-theme="dark"] .top-menu > span:hover {
background-color: var(--blue-1);
}
-.dark .top-menu > span:hover label,
-.dark .top-menu > span:hover svg
+:root[data-theme="dark"] .top-menu > span:hover label,
+:root[data-theme="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
+:root[data-theme="dark"] .top-menu > span.selected,
+:root[data-theme="dark"] .top-menu > span.selected svg,
+:root[data-theme="dark"] .top-menu-drop div.selected
{
background-color: var(--blue-1);
color: #fff;
}
-.dark #slider-hold {
+:root[data-theme="dark"] #slider-hold {
background-color: var(--blue-0);
}
-.dark #stats {
+:root[data-theme="dark"] #stats {
color: #888;
}
-.dark #rnfo {
+:root[data-theme="dark"] #rnfo {
color: #aaa;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgba(0,0,0,0.75);
}
-.dark #rnfo label {
+:root[data-theme="dark"] #rnfo label {
color: #ada;
}
-.dark #slider-center {
+:root[data-theme="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 {
+:root[data-theme="dark"] #slider-hold .handle {
background-color: #999;
}
-.dark #speedbar label {
+:root[data-theme="dark"] #speedbar label {
color: black;
}
-.dark .widopt {
+:root[data-theme="dark"] .widopt {
background-color: #222;
}
-.dark #camops summary {
+:root[data-theme="dark"] #camops summary {
background-color: var(--blue-0);
}
@@ -798,7 +752,7 @@ details[open] summary::after {
border-top: 5px solid rgba(0,255,100,0.5);
border-bottom: 5px solid rgba(0,255,100,0.5);
}
-.dark #wassup {
+:root[data-theme="dark"] #wassup {
background-color: rgba(0,255,0,0.2);
}
.blurb {
@@ -813,7 +767,7 @@ details[open] summary::after {
.blurb p {
margin: 0;
}
-.dark .blurb p:first-child, .dark .blurb p:last-child {
+: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 {
@@ -835,7 +789,7 @@ details[open] summary::after {
z-index: 1000;
}
-.dark #curtain {
+:root[data-theme="dark"] #curtain {
color: white;
background-color: black;
}
@@ -1534,7 +1488,7 @@ details[open] summary::after {
border-radius: 3px;
text-align: center;
}
-.dark #op-add-list > div:hover {
+:root[data-theme="dark"] #op-add-list > div:hover {
color: black;
background-color: var(--blue-2) !important;
}
@@ -1672,7 +1626,7 @@ details[open] summary::after {
#tool-cols {
max-height: 350px;
}
-.dark .mod-x {
+:root[data-theme="dark"] .mod-x {
border-color: #555;
background-color: rgba(0,0,0,0.15);
}
@@ -1732,7 +1686,7 @@ details[open] summary::after {
align-items: center;
justify-content: flex-start;
}
-.dark #mod-help a:hover {
+:root[data-theme="dark"] #mod-help a:hover {
color: #333;
}
#mod-help a:hover {
@@ -1772,7 +1726,7 @@ details[open] summary::after {
font-weight: normal;
padding-top: 5px;
}
-.dark .mod-print .box {
+:root[data-theme="dark"] .mod-print .box {
background-color: rgba(0,0,0,0.15);
border-color: #555;
}
@@ -1811,7 +1765,7 @@ details[open] summary::after {
font-weight: bold;
padding-right: 10px;
}
-.dark .mod-print button {
+:root[data-theme="dark"] .mod-print button {
background-color: #555;
border-color: #777;
}
@@ -2130,21 +2084,21 @@ details[open] summary::after {
color: #335;
}
-.dark #layer-animate button {
+:root[data-theme="dark"] #layer-animate button {
border: 1px solid #555;
background-color: #444;
}
-.dark #layer-animate button:hover {
+:root[data-theme="dark"] #layer-animate button:hover {
background-color: var(--main-color);
}
-.dark #layer-animate button svg {
+:root[data-theme="dark"] #layer-animate button svg {
color: #ddd;
}
-.dark #layer-animate label {
+:root[data-theme="dark"] #layer-animate label {
border: 1px solid #555;
background-color: #444;
}
-.dark #layer-animate input {
+:root[data-theme="dark"] #layer-animate input {
border: 1px solid #444;
}
#layer-animate {
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 06c7656d..11cab06a 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -36,6 +36,7 @@
+
diff --git a/web/moto/palette.css b/web/moto/palette.css
index 3b431ba7..aad9111e 100644
--- a/web/moto/palette.css
+++ b/web/moto/palette.css
@@ -11,6 +11,29 @@
--menu-hover-bg: rgba(0,0,0,0.1);
--menu-active-bg: rgba(90,159,212,0.22);
--border-gray: rgba(128,128,128,0.5);
+ --ui-text: #222;
+ --ui-text-muted: #888;
+ --ui-border: #bbb;
+ --ui-border-strong: #777;
+ --ui-hr: #ddd;
+ --ui-input-bg: #f8f8ff;
+ --ui-input-fg: #222;
+ --ui-input-disabled-bg: #ddd;
+ --ui-input-disabled-fg: #000;
+ --ui-select-bg: rgba(255,255,255,0.5);
+ --ui-option-selected-bg: var(--appname-blue);
+ --ui-textarea-bg: #fff;
+ --ui-textarea-fg: #222;
+ --ui-button-bg: #eee;
+ --ui-button-fg: #222;
+ --ui-button-border: #ccc;
+ --ui-button-hover-bg: #5a9fd4;
+ --ui-button-hover-fg: #fff;
+ --ui-button-disabled-fg: #999;
+ --ui-dialog-bg: rgba(255,255,255,0.85);
+ --ui-dialog-fg: #222;
+ --ui-dialog-border-top: rgba(180,180,180,1);
+ --ui-dialog-border-bottom: rgba(180,180,180,1);
}
:root.dark,
@@ -22,4 +45,27 @@
--menu-hover-bg: rgba(0,0,0,0.4);
--menu-active-bg: rgba(90,159,212,0.32);
--border-gray: rgba(128,128,128,0.5);
+ --ui-text: #fff;
+ --ui-text-muted: #888;
+ --ui-border: #888;
+ --ui-border-strong: #666;
+ --ui-hr: #555;
+ --ui-input-bg: #333;
+ --ui-input-fg: #fff;
+ --ui-input-disabled-bg: #444;
+ --ui-input-disabled-fg: #888;
+ --ui-select-bg: #333;
+ --ui-option-selected-bg: var(--blue-1, #5a9fd4);
+ --ui-textarea-bg: #333;
+ --ui-textarea-fg: #fff;
+ --ui-button-bg: #555;
+ --ui-button-fg: #fff;
+ --ui-button-border: #777;
+ --ui-button-hover-bg: var(--blue-2, #7e99b7);
+ --ui-button-hover-fg: #000;
+ --ui-button-disabled-fg: #888;
+ --ui-dialog-bg: rgba(60,60,60,0.85);
+ --ui-dialog-fg: #fff;
+ --ui-dialog-border-top: rgba(100,100,100,1);
+ --ui-dialog-border-bottom: rgba(100,100,100,1);
}
diff --git a/web/moto/theme.css b/web/moto/theme.css
new file mode 100644
index 00000000..82b48c6e
--- /dev/null
+++ b/web/moto/theme.css
@@ -0,0 +1,67 @@
+/* Shared theme rules.
+ * Phase 1 scope: Kiri fundamentals only.
+ */
+
+:root[data-app="kiri"] {
+ color: var(--ui-text);
+}
+
+:root[data-app="kiri"] hr {
+ border-color: var(--ui-hr);
+}
+
+:root[data-app="kiri"] input,
+:root[data-app="kiri"] select,
+:root[data-app="kiri"] option {
+ border-color: var(--ui-border);
+ background-color: var(--ui-input-bg);
+ color: var(--ui-input-fg);
+}
+
+:root[data-app="kiri"] select {
+ background-color: var(--ui-select-bg);
+}
+
+:root[data-app="kiri"] option:checked {
+ background-color: var(--ui-option-selected-bg);
+}
+
+:root[data-app="kiri"] input[disabled] {
+ border-color: var(--ui-border-strong);
+ background-color: var(--ui-input-disabled-bg);
+ color: var(--ui-input-disabled-fg);
+}
+
+:root[data-app="kiri"] textarea {
+ background-color: var(--ui-textarea-bg);
+ color: var(--ui-textarea-fg);
+}
+
+:root[data-app="kiri"] button {
+ color: var(--ui-button-fg);
+ background-color: var(--ui-button-bg);
+ border-color: var(--ui-button-border);
+}
+
+:root[data-app="kiri"] button:not([disabled]):hover {
+ background-color: var(--ui-button-hover-bg);
+ color: var(--ui-button-hover-fg);
+}
+
+:root[data-app="kiri"] button[disabled] {
+ color: var(--ui-button-disabled-fg);
+}
+
+:root[data-app="kiri"] #dialog {
+ background-color: var(--ui-dialog-bg);
+ color: var(--ui-dialog-fg);
+ border-top-color: var(--ui-dialog-border-top);
+ border-bottom-color: var(--ui-dialog-border-bottom);
+}
+
+:root[data-app="kiri"] #modal,
+:root[data-app="kiri"] #dialog,
+:root[data-app="kiri"] #modal select,
+:root[data-app="kiri"] #dialog select {
+ color: var(--ui-dialog-fg) !important;
+}