Better imbalance pieces in dark mode.

[remoteglot] / www / css / remoteglot.css

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index e0f9444138a83842253f5b7ff9b10faaae9028c8..672e583d7032d80049b90cad9d112f923cb387f6 100644 (file)
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -1,4 +1,5 @@
-body {
+:root {
+       color-scheme: light dark;
        font-family: sans-serif;
        background: white;
        color: black;
@@ -24,10 +25,6 @@ h3 {
        margin-left: 0.5em;
        margin-right: 0.5em;
 }
-#lowdepthcontainer {
-       font-size: x-small;
-       margin-top: 0;
-}
 #pvcontainer {
        clear: left;
        margin-top: 1em;
@@ -202,13 +199,18 @@ a.move:hover {
        border-right: none;
 }
 
-.pv, #pv, #history, #lowdepth .depth {  /* Mute move colors a bit. */
+.pv, #pv, #history {  /* Mute move colors a bit. */
        color: #555;
 }
 
+.imbalance-inverted-piece {
+       display: none;
+       filter: invert(1);
+}
+
 @media (prefers-color-scheme: dark) {
 
-body {
+:root {
        background: black;
        color: #eee;
 }
@@ -224,5 +226,9 @@ a.move, a.move:link {
 a:link {
        color: rgb(128,128,238);
 }
-
+.imbalance-piece {
+       display: none;
+}
+.imbalance-inverted-piece {
+       display: initial;
 }