87 lines
2.9 KiB
CSS
87 lines
2.9 KiB
CSS
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
font-family: Roboto, sans-serif;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
--background-color: light-dark(white, rgb(31, 33, 36));
|
|
--text-color: light-dark(black, white);
|
|
--error-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82));
|
|
--error-bg-color: light-dark(lightpink, rgb(75, 0, 0));
|
|
--error-hover-bg-color: light-dark(rgb(102, 0, 0), rgb(238, 153, 153));
|
|
--light-accent-color: light-dark(rgba(0,0,255,0.2), rgba(78, 186, 248, 0.377));
|
|
--accent-border-color: light-dark(blue, rgb(64, 185, 255));
|
|
--accent-opaque-color: light-dark(#ccccff, #305b73);
|
|
--separator-color: light-dark(lightgrey, rgb(44, 44, 44));
|
|
--inactive-bg-color: light-dark(#f7f7f7, rgb(29, 29, 29));
|
|
--inactive-fg-color: light-dark(grey, rgb(70, 70, 70));
|
|
--button-bg-color: light-dark(#fcfcfc, rgb(44, 50, 63));
|
|
--textbox-bg-color: light-dark(white, rgb(36, 41, 40));
|
|
--modal-backdrop-color: light-dark(rgba(200,200,200,0.7), rgba(23, 22, 32, 0.849));
|
|
--status-inactive-color: light-dark(grey, grey);
|
|
--status-ok-color: light-dark(forestgreen, forestgreen);
|
|
--or-state-bg-color: light-dark(#eee, #000000);
|
|
--and-state-bg-color: light-dark(white, rgb(46, 46, 46));
|
|
--rountangle-stroke-color: light-dark(black, #d4d4d4);
|
|
--active-state-bg-color: light-dark(rgb(255, 240, 214), rgb(53, 37, 18));
|
|
--active-state-border-color: light-dark(rgb(205, 133, 0), rgb(235, 124, 21));
|
|
--fired-transition-color: light-dark(rgb(160, 0, 168), rgb(160, 0, 168));
|
|
--firing-transition-color: light-dark(rgba(255, 128, 9, 1), rgba(255, 128, 9, 1));
|
|
--associated-color: light-dark(green, rgb(186, 245, 119));
|
|
--bottom-panel-bg-color: light-dark(rgb(255, 249, 235), rgb(24, 40, 70));
|
|
--summary-hover-bg-color: light-dark(#eee, #313131);
|
|
--internal-event-bg-color: light-dark(rgb(255, 218, 252), rgb(99, 27, 94));
|
|
--input-event-bg-color: light-dark(rgb(224, 247, 209), rgb(59, 95, 37));
|
|
--input-event-hover-bg-color: light-dark(rgb(195, 224, 176), rgb(59, 88, 40));
|
|
--input-event-active-bg-color: light-dark(rgb(176, 204, 158), rgb(77, 117, 53));
|
|
--output-event-bg-color: light-dark(rgb(230, 249, 255), rgb(28, 83, 104));
|
|
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
input {
|
|
background-color: var(--textbox-bg-color);
|
|
border: 1px solid var(--separator-color);
|
|
}
|
|
|
|
|
|
div#root {
|
|
height: 100%;
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: .12em .3em;
|
|
padding-bottom: 3px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: .9em;
|
|
line-height: 1;
|
|
border: 0.8px solid #aaa;
|
|
border-radius: 4px;
|
|
background: linear-gradient(#ebebeb, #fff);
|
|
box-shadow: inset 0 -1.5px 0 #aaa;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
color: black;
|
|
}
|
|
kbd:active { transform: translateY(1px); }
|
|
|
|
|
|
input {
|
|
/* border: solid blue 2px; */
|
|
accent-color: var(--accent-opaque-color);
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--light-accent-color);
|
|
}
|
|
|
|
label {
|
|
user-select: none;
|
|
}
|
|
|