diff --git a/ui/experiments/editor.html b/ui/experiments/editor.html index a1b0ded0..6d1c8b6e 100755 --- a/ui/experiments/editor.html +++ b/ui/experiments/editor.html @@ -34,7 +34,8 @@ text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); } .panel button, -.panel details { +.panel details, +.panel .state { margin: 1px; border: solid 1px gray; border-radius: 4px; @@ -57,7 +58,8 @@ margin: 10px; } -.panel button:active { +.panel button:active, +.panel .state:active { background: silver; } @@ -123,15 +125,9 @@ /* Snapshots */ .panel .state { display: inline-block; - border: solid 1px gray; - border-radius: 4px; margin: 1px; padding-left: 5px; padding-right: 5px; - background: white; -} -.panel .state:active { - background: silver; } .panel .state.ui-draggable-dragging { box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4); @@ -148,6 +144,70 @@ } + +/* dark theme */ + +.dark .panel { + border: solid 2px #333; + background: black; + color: silver; +} +.dark .panel summary { + background: #333; +} +.dark .panel summary::-webkit-details-marker { + color: #555; +} +.dark .panel button, +.dark .panel .state, +.dark .panel details { + border: solid 1px #333; + /* needed for dragging */ + background: black; + color: #888; +} +.dark .panel details { + border: solid 1px #333; +} +.dark .panel details summary { + background: #333; + color: silver; +} +.dark .panel .state:active, +.dark .panel button:active { + background: #555; +} +.dark .panel .control .slider { + border: solid 1px #555; + background: black; +} +.dark .panel .control.at-default .slider { +} +.dark .panel .control .slider::-webkit-slider-thumb { + border: solid 2px #aaa; + background: black; +} +.dark .panel .control.at-default .slider::-webkit-slider-thumb { + border: solid 1px gray; + opacity: 0.5; +} +.dark .panel .control .value { + border: none; + background: transparent; + color: gray; +} +.dark .panel .control .reset:hover { + border: solid 1px #333; +} +.dark .panel hr { + border: none; + border-top: solid 1px #333; +} + + + + +