X-Git-Url: https://git.sesse.net/?p=remoteglot;a=blobdiff_plain;f=www%2Fcss%2Fremoteglot.css;h=09b6b089cee4884d7bbcff3eab857d37c4efafd4;hp=6009a24cd7b2d41cdf6203f5f7c91796f12274cb;hb=243c535dd2efc9d8126aa6c153292d8253239dd9;hpb=86873d4101b0bcd4e96ae79a975279c65d889619 diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css index 6009a24..09b6b08 100644 --- a/www/css/remoteglot.css +++ b/www/css/remoteglot.css @@ -1,10 +1,31 @@ body { font-family: sans-serif; } +h1 { + margin-top: 0em; +} h3 { margin-top: 1em; margin-bottom: 0; } +#scorecontainer { + font-size: x-large; + margin-top: 0; +} +#score { + float: left; +} +#scoresparkcontainer { + overflow: hidden; +} +#scorespark { + margin-left: 0.5em; + margin-right: 0.5em; +} +#pvcontainer { + clear: left; + margin-top: 1em; +} .window { position: absolute; width: 0px; @@ -26,6 +47,9 @@ h3 { .vir path.l1arrow { opacity: 1.0; } +#news { + font-size: smaller; +} #credits { font-size: smaller; } @@ -35,6 +59,11 @@ td { p { margin-top: 0; } +#sortbyscoreholder { + font-size: smaller; + margin: 0; + font-style: italic; +} #refutationlines { font-size: smaller; } @@ -57,14 +86,54 @@ p { .black-3c85d.nonuglyhighlight { background-color: #9ab6a6; } -#board { - display: block; - float: left; +#boardcontainer { width: 400px; margin-right: 1em; margin-bottom: 1em; + float: left; +} +#board { + display: block; + width: 100%; padding: 0; } +#hiddenboard { + display: none; +} +#bottompanel { + display: block; + width: 100%; + 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; @@ -74,7 +143,7 @@ p { /* 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) { - #board { + #boardcontainer { width: 100%; float: none; } @@ -85,7 +154,7 @@ p { /* If there is almost space for the analysis, shrink the board a bit, too. */ @media all and (min-width: 500px) and (max-width: 810px) { - #board { + #boardcontainer { float: left; width: 50%; } @@ -93,3 +162,36 @@ p { 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; +} +#lomonosov { + 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; +}