start theme based css
This commit is contained in:
Stewart Allen
parent
53c8aa6e4c
commit
fde009c52b
4 changed files with 189 additions and 121 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
<link rel="apple-touch-icon" href="/icon/kirimoto.png">
|
||||
<link rel="stylesheet" type="text/css" href="/moto/palette.css">
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<link rel="stylesheet" type="text/css" href="/moto/theme.css">
|
||||
<link rel="stylesheet" type="text/css" href="/moto/menubar.css">
|
||||
<link href="manifest.json" rel="manifest">
|
||||
<link href="/font/css/all.min.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
67
web/moto/theme.css
Normal file
67
web/moto/theme.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue