@mideind/netskrafl-react 1.0.0-beta.2 → 1.0.0-beta.4

package/src/css/skrafl-explo.css

@@ -1,44 +1,60 @@
 /*
 
-   Skrafl-explo.css
+  Skrafl-explo.css
 
-   Explo theme template for netskrafl.is
+  Explo theme template for netskrafl.is
 
-   Copyright © 2025 Miðeind ehf.
-   Author: Vilhjalmur Thorsteinsson
+  Copyright © 2025 Miðeind ehf.
+  Author: Vilhjalmur Thorsteinsson
 
-   The Creative Commons Attribution-NonCommercial 4.0
-   International Public License (CC-BY-NC 4.0) applies to this software.
-   For further information, see https://github.com/mideind/Netskrafl
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
 
+*/
+/*
 */
 div.netskrafl-container {
-  --container-bg-color: #f8f8f8;
+  --logo-primary: #C94314;
+  --logo-secondary: #FFAA88;
+  --logo-accent: #F17736;
+  --svarkur-primary: #066960;
+  --svarkur-secondary: #0a574f;
+  --svarkur-accent: #008b7c;
+  --malfridur-primary: #FF7C24;
+  --malfridur-secondary: #ffb400;
+  --malfridur-accent: #0788C0;
+  --malfridur-green: #09814A;
   --dark-bg-color: #222222;
+  --light-shadow: #666666;
+  --blank-tile: #999999;
+  --middle-shadow: #cccccc;
+  --container-bg-color: #f8f8f8;
   --light-header-color: #eaf5f7;
-  --header-hover-color: #59b2c0;
+  --header-color: hsl(from var(--malfridur-accent) h 50% 60%);
+  --header-hover-color: hsl(from var(--malfridur-accent) h 50% 70%);
+  --humangrad-color: hsl(from var(--malfridur-accent) h 55% 65%);
+  --stats-foreground: hsl(from var(--malfridur-accent) h 45% 45%);
   --link-hover-color: #006db8;
-  --double-word-color: #f8D992;
-  --triple-word-color: #F9B32D;
-  --double-letter-color: #9ED5DA;
-  --triple-letter-color: #21A4B6;
-  --tile-background: #F9E5E6;
+  --double-word-color: hsl(from var(--malfridur-secondary) h 85% 80%); /* #f8D992; */
+  --triple-word-color: hsl(from var(--malfridur-secondary) h 90% 55%); /* #F9B32D; */
+  --double-letter-color: hsl(from var(--svarkur-accent) h 55% 65%); /* #9ED5DA; */
+  --triple-letter-color: hsl(from var(--svarkur-secondary) h 70% 40%); /* #21A4B6; */
+  --chat-background: hsl(from var(--malfridur-secondary) h 65% 92%);
+  --ok-button: var(--malfridur-green);
+  --cancel-button: hsl(from var(--logo-primary) h 70% 45%); /* #B6676D; */
+  --human-color: hsl(from var(--svarkur-secondary) h s 35%); /* #208C9F; */
+  --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%); /* #fff1d0; */
+  --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%); /* #ffc559; */
+  --tile-background: hsl(from var(--logo-secondary) h 70% 92%);
   --board-background: #E4EAF0;
   --tab-background: #f3f3f6;
   --header-background: #dde1e4;
-  --ok-button: #72a55f;
-  --cancel-button: #B6676D;
-  --two-letter-background: #D8E3D2;
+  --two-letter-background:  hsl(from var(--malfridur-green) h 20% 90%);
   --dark-shadow: rgba(0, 0, 0, 0.5);
-  --light-shadow: #666666;
   --rack-shadow: #afb7cad0;
   --focus-border: var(--triple-word-color);
   --light-background: #B9D9DC;
-  --stats-foreground: #197d8b;
-  --human-color: #208C9F;
-  --blank-tile: #999999;
-  --list-header-background: #fff1d0;
-  --list-header-bottom: #ffc559;
   --primary-font: 'Lato', 'Open Sans', 'Arial', sans-serif;
   --number-font: 'Open Sans', 'Lato', 'Arial', sans-serif;
 }
@@ -197,36 +213,22 @@ p a img {
 .ui-widget-header a {
   color: var(--light-header-color);
 }
-.ui-state-default,
-.ui-widget-content .ui-state-default {
-  background-color: #afb8bf;
+.ui-state-default {
+  background-color: var(--header-color);
   font-weight: bold;
-  color: #ffffff;
-}
-.ui-widget-header .ui-state-default {
-  background-color: #a9d0d6;
-  font-weight: bold;
-  color: #ffffff;
+  color: white;
 }
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
-  color: #ffffff;
+  color: white;
   text-decoration: none;
 }
 .ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus {
+.ui-state-focus {
   background-color: var(--header-hover-color);
   font-weight: bold;
-  color: #ffffff;
-}
-.ui-widget-header .ui-state-hover,
-.ui-widget-header .ui-state-focus {
-  background-color: var(--header-hover-color);
-  font-weight: bold;
-  color: #ffffff;
+  color: white;
 }
 .ui-state-hover a,
 .ui-state-hover a:hover,
@@ -236,49 +238,30 @@ p a img {
 .ui-state-focus a:hover,
 .ui-state-focus a:link,
 .ui-state-focus a:visited {
-  color: var(--link-hover-color);
-  text-decoration: none;
-}
-.ui-widget-header .ui-state-hover a,
-.ui-widget-header .ui-state-hover a:hover,
-.ui-widget-header .ui-state-hover a:link,
-.ui-widget-header .ui-state-hover a:visited,
-.ui-widget-header .ui-state-focus a,
-.ui-widget-header .ui-state-focus a:hover,
-.ui-widget-header .ui-state-focus a:link,
-.ui-widget-header .ui-state-focus a:visited {
-  color: #ffffff;
-  /* Pantone 300 U */
-  /* #026890; */
+  color: white;
   text-decoration: none;
 }
-.ui-widget-header .ui-state-focus a:focus {
+.ui-state-focus a:focus {
   outline: 0;
 }
 .ui-state-active,
 .ui-widget-content .ui-state-active {
   background-color: var(--container-bg-color);
   font-weight: bold;
-  color: #000000;
-  /* #ffffff; */
+  color: black;
+  /* white; */
 }
 .ui-widget-header .ui-state-active {
   background-color: var(--container-bg-color);
   font-weight: bold;
-  color: #000000;
-  /* #ffffff; */
+  color: black;
+  /* white; */
 }
 .ui-state-active a,
 .ui-state-active a:link,
+.ui-state-active a:hover,
 .ui-state-active a:visited {
-  color: var(--container-bg-color);
-  text-decoration: none;
-}
-.ui-widget-header .ui-state-active a,
-.ui-widget-header .ui-state-active a:link,
-.ui-widget-header .ui-state-active a:hover,
-.ui-widget-header .ui-state-active a:visited {
-  color: #000000;
+  color: black;
   text-decoration: none;
 }
 .ui-corner-all,
@@ -360,6 +343,11 @@ div.logo {
 div.logo:hover {
   animation: expand 0.4s;
 }
+div.netskrafl-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 div.rightcol {
   position: relative;
   width: 362px;
@@ -623,7 +611,7 @@ div.tile.dragging {
     becomes a child of the document body element when dragging, and
     the style variables are not in scope at the body level. */
   box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
-  border-color: #72a55f;
+  border-color: var(--ok-button);
   border-radius: 5px;
   border-width: 3px;
   border-style: solid;
@@ -640,7 +628,7 @@ div.tile.dragging {
   box-sizing: content-box;
 }
 div.tile.dragging.no-drop {
-  border-color: #B6676D;
+  border-color: var(--cancel-button);
 }
 .board td {
   min-width: 21px;
@@ -739,7 +727,7 @@ div.word-check {
   line-height: 42px;
   visibility: hidden;
   border: 1.5px solid;
-  border-radius: 4px;
+  border-radius: 5px;
 }
 div.score {
   display: none;
@@ -756,7 +744,7 @@ div.score {
   line-height: 42px;
   color: var(--blank-tile);
   border: 1.5px solid;
-  border-radius: 4px;
+  border-radius: 5px;
   border-color: var(--blank-tile);
 }
 .standard-button {
@@ -935,7 +923,7 @@ div.scramblebtn {
   cursor: pointer;
   width: 33px;
   height: 26px;
-  background-color: var(--double-letter-color);
+  background-color: var(--malfridur-accent);
   display: none;
 }
 div.rack-left div.scramblebtn {
@@ -963,8 +951,8 @@ div.buttons .glyphicon {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
 }
@@ -980,8 +968,8 @@ div.submitresign {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   color: var(--cancel-button);
@@ -1000,14 +988,14 @@ div.submitexchange {
   top: 0;
   left: 93px;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   color: var(--ok-button);
 }
 div.submitexchange.disabled {
-  color: #888888;
+  color: var(--blank-tile);
 }
 div.submitpass {
   text-align: center;
@@ -1021,8 +1009,8 @@ div.submitpass {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: #fcfcfc;
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   color: var(--triple-word-color);
@@ -1040,8 +1028,8 @@ div.challenge {
   position: absolute;
   top: 0;
   padding-top: 8px;
-  background-color: var(--container-bg-color);
-  border: 1.5px solid #dddddd;
+  background-color: var(--tab-background);
+  border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
   left: 279px;
@@ -1126,7 +1114,7 @@ div.robot-btn {
   position: absolute;
   margin-left: 0px;
   margin-right: 2px;
-  padding-top: 3px;
+  padding-top: 4px;
   height: 30px;
   min-height: 30px;
   line-height: 22px;
@@ -1146,9 +1134,9 @@ div.gamestats div.robot-btn {
 div.player-btn {
   display: block;
   position: absolute;
-  margin-left: 2px;
-  margin-right: 2px;
-  padding-top: 3px;
+  margin-left: 4px;
+  margin-right: 4px;
+  padding-top: 4px;
   height: 30px;
   min-height: 30px;
   line-height: 22px;
@@ -1396,7 +1384,7 @@ div.right-tab#tab-games {
 }
 div.right-tab#tab-chat {
   left: 301px;
-  background-color: #F7F0DE;
+  background-color: var(--chat-background);
 }
 div.right-tab.selected {
   opacity: 1;
@@ -1489,7 +1477,7 @@ div.modal-dialog#spinner-dialog {
 }
 div.animated-spinner {
   position: absolute;
-  left: 141.5px;
+  left: 50%;
   top: 271.5px;
 }
 svg circle.shadow {
@@ -1588,9 +1576,11 @@ div.error {
   cursor: pointer;
 }
 div.opp-turn {
-  display: block;
+  display: inline-block;
   padding-top: 10px;
-  width: 246px;
+  padding-left: 10px;
+  width: 220px;
+  text-align: right;
 }
 div.opp-turn.flashing {
   color: var(--cancel-button);
@@ -1841,27 +1831,21 @@ div.submitmove#move-mobile span.glyphicon {
   margin-top: 2px;
 }
 div.force-resign {
-  font-size: 18px;
-  font-weight: 700;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  font-size: 13px;
   margin: 0;
   padding: 6px;
-  padding-top: 9px;
-  border-radius: 5px;
   cursor: pointer;
-  width: 32px;
   height: 26px;
-  background-color: var(--ok-button);
-  display: block;
-  float: right;
-  padding-top: 3px;
-  padding-bottom: 12px;
+  width: 122px;
   margin-right: 1px;
-  width: 96px;
-  text-align: center;
-  font-weight: normal;
-  font-size: 13px;
   color: white;
   background-color: var(--cancel-button);
+  border-radius: 5px;
 }
 div.gameinfo {
   position: absolute;
@@ -1889,6 +1873,7 @@ div.gameinfo {
   padding-top: 10px;
 }
 input.chat-txt {
+  box-sizing: border-box;
   font-family: var(--primary-font);
   width: 276px;
   font-size: 18px;
@@ -1904,6 +1889,13 @@ input.chat-txt {
   padding-left: 6px;
   padding-right: 6px;
 }
+input.chat-txt:focus {
+  border-color: var(--ok-button);
+  border-width: 2px;
+  padding-left: 5px;
+  padding-right: 5px;
+  outline-style: none;
+}
 div.chat-area {
   position: absolute;
   top: 6px;
@@ -1924,7 +1916,7 @@ div.modal-close#chat-send {
   margin: 0 0 2px 8px;
   padding-top: 4px;
   padding-bottom: 0;
-  background-color: var(--triple-letter-color);
+  background-color: var(--ok-button);
   color: white;
 }
 div.twoletter {
@@ -2026,19 +2018,19 @@ span.list-chall {
   text-overflow: ellipsis;
 }
 span.list-s0 {
-  display: inline-block;
   width: 38px;
   max-width: 38px;
   text-align: right;
+  justify-content: flex-end;
 }
 span.list-s1 {
-  display: inline-block;
   width: 38px;
   max-width: 38px;
   text-align: left;
+  justify-content: flex-start;
 }
 span.list-colon {
-  display: inline-block;
+  justify-content: center;
   text-align: center;
   width: 8px;
   max-width: 8px;
@@ -2083,7 +2075,7 @@ div.tilecount {
   width: 92px;
   min-width: 92px;
   text-align: left;
-  background-color: #ffffff;
+  background-color: white;
   border-radius: 6px;
   overflow: hidden;
 }
@@ -2788,7 +2780,7 @@ div.highlight1.dim {
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -2801,7 +2793,7 @@ h3.clockleft {
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -2816,7 +2808,7 @@ h3.clockright {
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
-  color: #202020;
+  color: var(--dark-bg-color);
   overflow: hidden;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -2890,7 +2882,7 @@ div.at-top-left div.tilecount {
   border-radius: 10px;
   border-width: 0;
   overflow: hidden;
-  background-color: #ccd5de;
+  background-color: var(--header-background);
 }
 div.at-top-left div.tilecount.trans {
   background-color: transparent;
@@ -2909,7 +2901,7 @@ div.at-top-left div.tilecount div.tc {
   padding-bottom: 2px;
 }
 div.at-top-left div.tilecount div.oc {
-  color: #202020;
+  color: var(--dark-bg-color);
   padding-left: 8px;
   margin-left: 0;
   overflow: hidden;
@@ -2920,13 +2912,13 @@ div.at-top-left div.tilecount div.oc {
   padding-bottom: 2px;
   background-color: transparent;
 }
-div.chat {
+div.chat-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 466px;
-  background-color: #F7F0DE;
+  background-color: var(--chat-background);
   z-index: 1;
   border-radius: 4px 4px 0 0;
 }
@@ -3048,7 +3040,7 @@ div.gamestats {
   width: 724px;
   height: 580px;
   left: 150px;
-  top: 64px;
+  top: 24px;
   padding: 12px;
   border-radius: 5px;
   box-shadow: 3px 3px 5px 2px var(--dark-shadow);
@@ -3057,21 +3049,20 @@ div.statscol {
   display: block;
   float: left;
   width: 50%;
-  padding-top: 24px;
 }
 div.statscol p {
-  margin-top: 0.85em;
-  margin-bottom: 0.8em;
+  margin-top: 0;
+  margin-bottom: 12px;
 }
 div.gamestats p span {
   font-weight: 700;
 }
-div #gamestarted {
+div#gamestarted {
   width: 100%;
   text-align: center;
   position: relative;
-  top: 42px;
-  margin-bottom: 24px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 #gamestarted p {
   font-style: italic;
@@ -3086,13 +3077,13 @@ div #gamestarted {
 }
 /* Scores in move list */
 .humangrad_left {
-  color: #208C9F;
+  color: var(--human-color);
 }
 .autoplayergrad_right {
   color: var(--cancel-button);
 }
 .humangrad_right {
-  color: #208C9F;
+  color: var(--human-color);
 }
 .autoplayergrad_left {
   color: var(--cancel-button);
@@ -3135,16 +3126,16 @@ div.rightmove span.total {
   margin-left: 2px;
 }
 span.total.human {
-  background-color: #aad1d4;
+  background-color: var(--human-color);
 }
 div.leftmove span.total.human {
-  border-left-color: #208C9F;
+  border-left-color: var(--svarkur-secondary);
 }
 div.rightmove span.total.human {
-  border-right-color: #208C9F;
+  border-right-color: var(--svarkur-secondary);
 }
 span.total.autoplayer {
-  background-color: #d3c0c7;
+  background-color: var(--cancel-button);
 }
 div.leftmove span.total.autoplayer {
   border-left-color: var(--cancel-button);
@@ -3554,7 +3545,7 @@ div#btn-cancel-no {
 .tabbed-page a:link,
 .tabbed-page a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--humangrad-color);
 }
 .tabbed-page a:hover {
   text-decoration: none;
@@ -3638,7 +3629,7 @@ div.userid {
   cursor: pointer;
 }
 div.userid:hover {
-  background-color: #5699A5;
+  background-color: var(--humangrad-color);
   color: white;
 }
 div.listitem {
@@ -3657,6 +3648,7 @@ div.listitem {
   top: 0;
 }
 .listitem a {
+  display: flex;
   cursor: pointer;
 }
 .listitem a:link,
@@ -3667,6 +3659,10 @@ div.listitem {
 .listitem a:hover {
   color: var(--triple-word-color);
 }
+.listitem span {
+  display: flex;
+  align-items: center;
+}
 div.oddlist {
   background-color: var(--board-background);
 }
@@ -3787,7 +3783,7 @@ span.timed-btn {
   top: 0px;
   cursor: default;
   color: white;
-  background-color: #f5c862;
+  background-color: var(--triple-word-color);
   border-radius: 5px;
   padding: 4px;
   margin: 0 4px 0 0;
@@ -3892,7 +3888,7 @@ span.elo-btn.elo-neutral {
   background-color: var(--double-letter-color);
 }
 span.elo-hdr-left {
-  background-color: var(--triple-letter-color);
+  background-color: var(--header-color);
   color: white;
   border-radius: 5px;
   padding: 4px;
@@ -3903,7 +3899,7 @@ span.elo-hdr-left {
   top: 0px;
 }
 span.elo-hdr-right {
-  background-color: var(--triple-letter-color);
+  background-color: var(--header-color);
   color: white;
   border-radius: 5px;
   padding: 4px;
@@ -4157,7 +4153,7 @@ h1.usr-info-icon span.glyphicon-coffee-cup {
 div.usr-info-fav {
   display: inline-block;
   position: absolute;
-  top: 26px;
+  top: 16px;
   right: 20px;
   color: var(--triple-letter-color);
   font-size: 26px;
@@ -4195,11 +4191,11 @@ p#usr-best {
 p#usr-best a:link,
 p#usr-best a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--stats-foreground);
 }
 p#usr-best a:hover {
   text-decoration: none;
-  color: var(--triple-word-color);
+  color: var(--logo-accent);
 }
 div#stats-toggler {
   margin-top: 7px;
@@ -4230,16 +4226,16 @@ div#own-stats-all {
   vertical-align: top;
 }
 div.stats-games {
-  color: #ec9d07;
-  border-color: #ec9d07;
+  color: var(--malfridur-secondary);
+  border-color: var(--malfridur-secondary);
 }
 div.stats-win-ratio {
   color: var(--ok-button);
   border-color: var(--ok-button);
 }
 div.stats-avg-score {
-  color: #ec9d07;
-  border-color: #ec9d07;
+  color: var(--logo-accent);
+  border-color: var(--logo-accent);
 }
 div.chall-hdr {
   font-size: 18px;
@@ -4275,11 +4271,11 @@ div.chall-hdr h2 {
   line-height: 24px;
   margin-top: 6px;
   margin-bottom: 4px;
-  color: #208C9F;
+  color: var(--humangrad-color);
 }
 h1.chall-icon {
   display: block;
-  color: #208C9F;
+  color: var(--humangrad-color);
   margin-right: 12px;
   margin-top: 0;
   margin-bottom: 0;
@@ -4299,7 +4295,7 @@ div.chall-time {
   font-size: 20px;
   font-weight: 700;
   line-height: 22px;
-  background-color: #cccccc;
+  background-color: var(--middle-shadow);
   color: white;
   cursor: pointer;
   border-radius: 4px;
@@ -4480,7 +4476,7 @@ div.welcome {
 .welcome a:link,
 .welcome a:visited {
   text-decoration: none;
-  color: #5699A5;
+  color: var(--humangrad-color);
 }
 .welcome a:hover {
   text-decoration: none;
@@ -4559,7 +4555,7 @@ input.text {
   padding-right: 8px;
 }
 input.text:focus {
-  background-color: #ffffc8;
+  background-color: hsl(from var(--malfridur-secondary) h 85% 90%);
   border-style: solid;
   border-color: var(--ok-button);
   border-width: 2px;
@@ -4579,7 +4575,7 @@ input.text#search-id {
   font-weight: normal;
   height: 28px;
   font-size: 18px;
-  border-color: var(--double-letter-color);
+  border-color: var(--header-color);
   margin-top: 0px;
   margin-bottom: 0px;
 }
@@ -4654,7 +4650,7 @@ div.toggler div.option.small {
 div.toggler div.option.x-small {
   width: 30px;
   height: 20px;
-  line-height: 20px;
+  line-height: 22px;
   font-size: 15px;
   padding-top: 1px;
   padding-bottom: 3px;
@@ -4938,7 +4934,7 @@ div.signup-header {
     height: 288px;
     /* 8 lines @ 36px each */
   }
-  div.chat,
+  div.chat-container,
   div.twoletter {
     height: 474px;
   }
@@ -5038,6 +5034,9 @@ div.signup-header {
   div.rack-left div.recallbtn {
     display: none;
   }
+  div.force-resign {
+    display: none;
+  }
   div.scramblebtn {
     left: 376px;
     top: 158px;
@@ -5148,7 +5147,7 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: none;
   }
   div.right-area {
@@ -5275,7 +5274,7 @@ div.signup-header {
   div.circle {
     height: 38px;
     width: 38px;
-    background-color: #80aede;
+    background-color: var(--header-hover-color);
     border-radius: 50%;
     display: inline-block;
     position: relative;
@@ -5343,12 +5342,12 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: block;
     border-radius: 0;
   }
   div.twoletter,
-  div.chat {
+  div.chat-container {
     height: 420px;
   }
   div.board-area {
@@ -5522,8 +5521,8 @@ div.signup-header {
     background-color: var(--cancel-button);
   }
   .rack td:empty {
-    border-color: #dddddd;
-    background-color: #f4f4f4;
+    border-color: var(--middle-shadow);
+    background-color: var(--tab-background);
     box-shadow: none;
   }
   div.buttons {
@@ -5831,7 +5830,7 @@ div.signup-header {
     color: white;
   }
   div.scorewrapper {
-    background-color: #aad1d4;
+    background-color: var(--humangrad-color);
     min-height: 32px;
   }
   div.scoreleft {
@@ -5990,7 +5989,7 @@ div.signup-header {
     height: 380px;
   }
   div.right-area.with-clock div.twoletter,
-  div.right-area.with-clock div.chat {
+  div.right-area.with-clock div.chat-container {
     /* Timed game */
     height: 380px;
   }
@@ -6063,6 +6062,7 @@ div.signup-header {
     border-radius: 0;
   }
   div.opp-turn {
+    display: block;
     position: absolute;
     text-align: center;
     bottom: 83px;
@@ -6073,7 +6073,6 @@ div.signup-header {
     line-height: 24px;
     padding: 4px 0 0;
     margin: 0;
-    display: block;
   }
   div#congrats {
     position: absolute;
@@ -6185,8 +6184,8 @@ div.signup-header {
     margin: 0;
   }
   input.chat-txt {
-    width: 218px;
-    height: 22px;
+    width: 234px;
+    height: 32px;
     font-size: 15px;
   }
   div.chat-area {
@@ -6194,7 +6193,7 @@ div.signup-header {
     width: 278px;
   }
   div.modal-close#chat-send {
-    height: 25px;
+    height: 26px;
     bottom: 0;
   }
   span.statsbutton {
@@ -6338,10 +6337,12 @@ div.signup-header {
     max-width: 32px;
   }
   span.list-s0 {
+    display: inline-block;
     width: 40px;
     max-width: 40px;
   }
   span.list-s1 {
+    display: inline-block;
     width: 40px;
     max-width: 40px;
   }