Handle streaming PGNs, like from Lichess (although this might break non-streaming...

[remoteglot] / www / css / remoteglot.css

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index 543a5b62122fbe5e73ae3abc4421618ce63185fd..a2e221fd0847b5c5a0ba1694fe4c9a4bff49b11b 100644 (file)
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -1,30 +1,56 @@
-body {
+html {
+       color-scheme: light dark;
        font-family: sans-serif;
+       background: white;
+       color: black;
+}
+h1 {
+       margin-top: 0em;
 }
 h3 {
        margin-top: 1em;
        margin-bottom: 0;
 }
-.window {
-       position: absolute;    
-       width: 0px;
-       height: 0px;
-       opacity: 0.0; 
+#scorecontainer {
+       font-size: x-large;
+       margin-top: 0;
+       display: grid;
+       grid-template-columns: max-content 1fr;
+       gap: 12px;
+}
+#score {
+       grid-column: 1;
+}
+#scoresparkcontainer {
+       grid-column: 2;
+       overflow: hidden;
+       height: 0.85em;
+       margin-top: 0.15em;
+       width: 100%;
+}
+#sparklinehover {
+       position: absolute;
+       display: none;
+       background-color: rgba(0, 0, 0, 0.6);
+       color: white;
+       font-size: 10px;
+       white-space: nowrap;
+       padding: 5px;
+       border: 1px solid white;
+       z-index: 10000;
+}
+#pvcontainer {
+       clear: left;
+       margin-top: 1em;
 }
 .c1 {
        opacity: 0.75;
 }
-.l1arrow {
-       opacity: 1.0;
-}
 .hidden {
        display: none;
 }
-.vir path {
-       opacity: 0.0;
-}
-.vir path.l1arrow {
-       opacity: 1.0;
+#news {
+       font-size: smaller;
 }
 #credits {
        font-size: smaller;
@@ -35,6 +61,11 @@ td {
 p {
        margin-top: 0;
 }
+#sortbyscoreholder {
+       font-size: smaller;
+       margin: 0;
+       font-style: italic;
+}
 #refutationlines {
        font-size: smaller;
 }
@@ -57,16 +88,151 @@ p {
 .black-3c85d.nonuglyhighlight {
        background-color: #9ab6a6;
 }
-#board {
-       display: block;
-       float: left;
+#boardcontainer {
        width: 400px;
-       height: 400px;
        margin-right: 1em;
        margin-bottom: 1em;
+       float: left;
+}
+#board {
+       display: block;
+       width: 100%;
+       padding: 0;
+       transform: translate(0,0);  /* Make it a containing block. */
+}
+#hiddenboard {
+       display: none;
+}
+#bottompanel {
+       display: block;
+       width: calc(100% + 4px);
+       font-size: smaller;
+       margin-top: 0.5em;
+       margin-bottom: 0;
+}
+#numviewers {
+       width: auto;
+       text-align: center;
+}
+#whiteinfo {
+       float: left;
+       text-align: left;
+       min-width: 20%;
+}
+#blackinfo {
+       float: right;
+       text-align: right;
+       min-width: 20%;
+       margin-right: 5px;
+}
+#whiteimbalance img, #blackimbalance img {
+       vertical-align: text-top;
+}
+#whiteimbalance {
+       margin-left: 5px;
+}
+#blackimbalance {
+       margin-right: 5px;
+}
+.running-clock {
+       font-weight: bold;
 }
 #analysis {
        display: block;
        min-width: 400px;
        overflow: hidden;
 }
+
+/* If the board is too wide for the screen, shrink it to fit,
+ * and then put the analysis below. */
+@media all and (max-width: 400px) {
+       #boardcontainer {
+               width: 100%;
+               float: none;
+       }
+       #analysis {
+               min-width: 0;
+       }
+}
+
+/* If there is almost space for the analysis, shrink the board a bit, too. */
+@media all and (min-width: 500px) and (max-width: 810px) {
+       #boardcontainer {
+               float: left;
+               width: 50%;
+       }
+       #analysis {
+               min-width: 0;
+       }
+}
+a.move {
+       color: black;
+       text-decoration: none;
+}
+a.move.highlight {
+       color: red;
+       font-weight: bold;
+}
+a.move:hover {
+       font-weight: bold;
+       text-decoration: underline;
+}
+
+#linenav {
+       display: none;
+}
+
+#games {
+       font-size: smaller;
+       margin-bottom: 0.5em;
+}
+.game {
+       padding: 0.25em 1em 0.25em 1em;
+       margin: 0;
+       background: #eee;
+       border-right: 1px solid #bbb;
+}
+.game:last-of-type {
+       border-right: none;
+}
+
+.pv, #pv, #history {  /* Mute move colors a bit. */
+       color: #555;
+}
+
+.imbalance-inverted-piece {
+       display: none;
+       filter: invert(1);
+}
+
+.imbalance-piece, .imbalance-inverted-piece {
+       width: 15px;
+       height: 15px;
+}
+
+@media (prefers-color-scheme: dark) {
+
+:root {
+       background: black;
+       color: #eee;
+}
+.pv, #pv, #history {  /* Mute move colors a bit. */
+       color: #bbb;
+}
+#numviewers {
+       color: #bbb;
+}
+a.move, a.move:link {
+       color: #eee;
+}
+a:link {
+       color: rgb(128,128,238);
+}
+.imbalance-piece {
+       display: none;
+}
+.imbalance-inverted-piece {
+       display: initial;
+}
+
+}