Fix SVG positioning when we are scrolled.

[remoteglot] / www / css / remoteglot.css

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index fcd6e5759fd3bbbe5393a3e4e2454b7ab74e7601..a928985e8b2abc19fbeb22f480e3a3ba3bfdc9d4 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;
@@ -98,6 +99,7 @@ p {
        display: block;
        width: 100%;
        padding: 0;
+       transform: translate(0,0);  /* Make it a containing block. */
 }
 #hiddenboard {
        display: none;
@@ -202,9 +204,14 @@ a.move:hover {
        color: #555;
 }
 
+.imbalance-inverted-piece {
+       display: none;
+       filter: invert(1);
+}
+
 @media (prefers-color-scheme: dark) {
 
-body {
+:root {
        background: black;
        color: #eee;
 }
@@ -220,5 +227,11 @@ a.move, a.move:link {
 a:link {
        color: rgb(128,128,238);
 }
+.imbalance-piece {
+       display: none;
+}
+.imbalance-inverted-piece {
+       display: initial;
+}
 
 }