@mideind/netskrafl-react 3.2.4 → 3.2.6

package/dist/esm/css/netskrafl.css

@@ -336,6 +336,7 @@
    ========================================================================== */
 
 div.netskrafl-container {
+    --text-color: #333;
     --logo-primary: #c94314;
     --logo-primary-light: hsl(from var(--logo-primary) h s 75%);
     --logo-secondary: #ffaa88;
@@ -423,6 +424,118 @@ div.netskrafl-container {
     --number-font: var(--font-open-sans);
 }
 
+/* ==========================================================================
+    DARK THEME OVERRIDES
+    ========================================================================== */
+
+[data-theme="dark"] .netskrafl-container {
+    --text-color: var(--foreground);
+    /* Brand/identity colors - brightened for dark backgrounds */
+    --logo-primary: var(--color-netskraflPalette-300);
+    --logo-primary-light: var(--color-netskraflPalette-500);
+    --logo-secondary: var(--color-netskraflPalette-50);
+    --logo-accent: var(--color-netskraflPalette-400);
+    --logo-accent-light: var(--color-netskraflPalette-700);
+    --svarkur-primary: var(--color-gatadagsinsPalette-400);
+    --svarkur-secondary: var(--color-gatadagsinsPalette-200);
+    --svarkur-accent: var(--color-gatadagsinsPalette-500);
+    --malfridur-primary: var(--color-malfridurPalette-300);
+    --malfridur-secondary: var(--color-malfridurPalette-400);
+    --malfridur-secondary-light: var(--color-malfridurPalette-700);
+    --malfridur-accent: var(--color-info);
+    --cold: var(--color-gatadagsinsPalette-400);
+    --cold-light: var(--color-gatadagsinsPalette-600);
+    --malfridur-green: var(--color-success);
+
+    /* Dark backgrounds and surfaces */
+    --dark-bg-color: var(--color-neutral-100);
+    --container-bg-color: var(--background);
+    --board-background: var(--color-neutral-200);
+    --dialog-background-color: var(--color-neutral-100);
+    --chat-background: var(--color-neutral-80);
+    --light-background: var(--color-neutral-200);
+    --light-header-color: var(--color-neutral-800);
+    --tab-background: var(--color-neutral-100);
+    --rack-slot-background: var(--color-neutral-100);
+    --header-background: var(--color-neutral-200);
+    --oddlist-background: var(--board-background);
+    --evenlist-background: var(--color-neutral-50);
+    --tab-movelist-background: var(--board-background);
+    --list-header-background: var(--color-neutral-80);
+    --toggler-background: var(--color-neutral-300);
+
+    /* Shadows, borders and neutral tones */
+    --light-shadow: var(--color-neutral-600);
+    --blank-tile: var(--color-neutral-500);
+    --middle-shadow: var(--color-neutral-400);
+    --dark-shadow: rgba(0, 0, 0, 0.7);
+    --rack-shadow: rgba(0, 0, 0, 0.5);
+    --board-cell-border-color: var(--page-background);
+    --focus-border: var(--color-malfridurPalette-400);
+
+    /* Text, links and header colors - lightened for dark backgrounds */
+    --header-color: var(--color-secondary-400);
+    --header-hover-color: var(--color-secondary-700);
+    --humangrad-color: var(--color-secondary-500);
+    --scorewrapper-background: var(--humangrad-color);
+    --player-btn-color: var(--color-neutral-900);
+    --stats-foreground: var(--color-secondary-600);
+    --link-hover-color: var(--color-info);
+    --iconlink-color: var(--color-info);
+    --move-text-color: var(--color-neutral-900);
+    --autoplayer-highlight-color: var(--color-neutral-950);
+
+    /* Board square colors - darker/richer tones for dark mode */
+    --double-word-color: var(--color-malfridurPalette-100);
+    --triple-word-color: var(--color-malfridurPalette-200);
+    --double-letter-color: var(--color-gatadagsinsPalette-200);
+    --triple-letter-color: var(--color-gatadagsinsPalette-400);
+
+    /* Button colors */
+    --ok-button: var(--color-success);
+    --cancel-button: var(--color-error);
+    --pass-button: var(--color-malfridurPalette-200);
+
+    /* Selection and player identity colors */
+    --option-selected: var(--color-gatadagsinsPalette-200);
+    --human-color: var(--color-gatadagsinsPalette-300);
+    --autoplayer-color: var(--color-samheitiPalette-400);
+    --toggler-selected: var(--color-primary-400);
+    --header-green: var(--color-primary-500);
+
+    /* Tile, list and tab backgrounds */
+    --tile-background: #8d563f;
+    --tab-games-background: var(--tile-malfridurPalette-100);
+    --rack-tile-background: var(--color-neutral-800);
+    --stats-item-background: var(--board-background);
+    --list-header-bottom: var(--color-malfridurPalette-200);
+    --two-letter-background: var(--color-primary-100);
+    --racktile-background: var(--color-neutral-300);
+
+    /* Board geometry - unchanged */
+    --board-cell-border-width: 1.5px;
+    --board-cell-border-radius: 2.5px;
+    --board-cell-border-width-lg: 2px;
+    --board-cell-border-radius-lg: 3.5px;
+    --selection-outline-radius: 3.5px;
+    --board-tile-line-height-lg: 30px;
+
+    /* Move list gradients - none for default scheme */
+    --humangrad-left: none;
+    --humangrad-right: none;
+    --autoplayergrad-left: none;
+    --autoplayergrad-right: none;
+    --total-background-color: transparent;
+    --total-margin: 0px;
+    --total-human-background: var(--human-color);
+    --total-autoplayer-background: var(--autoplayer-color);
+
+    /* The following two variables are assumed to be defined
+        by the container */
+    --primary-font: var(--font-lato);
+    --number-font: var(--font-open-sans);
+}
+
 /* ==========================================================================
    LEGACY COLOR SCHEME (skrafl-curry)
    ==========================================================================
@@ -448,6 +561,7 @@ div.netskrafl-container {
    ========================================================================== */
 
 div.netskrafl-container.legacy-colors {
+    --text-color: #333;
     /* Board and square colors */
     --board-background: #b5bdc4;
     --double-word-color: #f3d4d9;
@@ -1052,11 +1166,11 @@ div.netskrafl-container {
 }
 
 .netskrafl-container .ui-widget-content {
-    color: var(--dark-bg-color);
+    color: var(--text-color);
 }
 
 .netskrafl-container .ui-widget-content a {
-    color: var(--dark-bg-color);
+    color: var(--text-color);
 }
 
 .netskrafl-container .ui-widget-header {
@@ -1072,13 +1186,13 @@ div.netskrafl-container {
 .netskrafl-container .ui-state-default {
     background-color: var(--header-color);
     font-weight: bold;
-    color: white;
+    color: var(--text-color);
 }
 
 .netskrafl-container .ui-state-default a,
 .netskrafl-container .ui-state-default a:link,
 .netskrafl-container .ui-state-default a:visited {
-    color: white;
+    color: var(--text-color);
     text-decoration: none;
 }
 
@@ -1086,7 +1200,7 @@ div.netskrafl-container {
 .netskrafl-container .ui-state-focus {
     background-color: var(--header-hover-color);
     font-weight: bold;
-    color: white;
+    color: var(--text-color);
 }
 
 .netskrafl-container .ui-state-hover a,
@@ -1124,7 +1238,7 @@ div.netskrafl-container {
 .netskrafl-container .ui-state-active a:link,
 .netskrafl-container .ui-state-active a:hover,
 .netskrafl-container .ui-state-active a:visited {
-    color: black;
+    color: var(--text-color);
     text-decoration: none;
 }
 
@@ -1557,6 +1671,7 @@ div.netskrafl-container {
     border-spacing: 0;
     border-collapse: separate;
     table-layout: fixed;
+    color: var(--text-color);
 }
 
 .netskrafl-container div.board table.board {
@@ -2502,7 +2617,7 @@ div.netskrafl-tile.dragging div.letterscore {
     font-size: 16px;
     line-height: 16px;
     font-weight: 400;
-    color: black;
+    color: var(--text-color);
     cursor: default;
 }
 
@@ -2577,13 +2692,13 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div.modal-dialog {
     visibility: hidden;
-    position: fixed;
+    position: absolute;
     left: 0;
-    top: var(--header-size);
+    top: 0;
     width: 100%;
     height: 100%;
     z-index: 10;
-    background-color: rgba(32, 32, 32, 0.2);
+    background-color: color-mix(in srgb, var(--container-bg-color) 50%, transparent);
 }
 
 .netskrafl-container div.modal-dialog#spinner-dialog {
@@ -3681,6 +3796,11 @@ div.netskrafl-tile.dragging div.letterscore {
     vertical-align: top;
 }
 
+.letterscore,
+.netskrafl-container .tileletter {
+    color: var(--text-color);
+}
+
 /* Paragraphs of help text that should be centered on screens that are wide enough */
 
 .netskrafl-container p.help-center {
@@ -3907,7 +4027,7 @@ div.highlight1.netskrafl-blanktile {
     font-size: 28px;
     line-height: 28px;
     font-weight: 700;
-    color: var(--dark-bg-color);
+    color: var(--text-color);
     overflow: hidden;
     margin-top: 4px;
     margin-bottom: 4px;
@@ -3921,7 +4041,7 @@ div.highlight1.netskrafl-blanktile {
     font-size: 28px;
     line-height: 28px;
     font-weight: 700;
-    color: var(--dark-bg-color);
+    color: var(--text-color);
     overflow: hidden;
     margin-top: 4px;
     margin-bottom: 4px;
@@ -3937,7 +4057,7 @@ div.highlight1.netskrafl-blanktile {
     font-size: 28px;
     line-height: 28px;
     font-weight: 700;
-    color: var(--dark-bg-color);
+    color: var(--text-color);
     overflow: hidden;
     margin-top: 4px;
     margin-bottom: 4px;
@@ -3991,12 +4111,12 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container div.games-item a:link,
 .netskrafl-container div.games-item a:visited {
-    color: black;
+    color: var(--text-color);
     text-decoration: none;
 }
 
 .netskrafl-container div.games-item a:hover {
-    color: black;
+    color: var(--text-color);
 }
 
 .netskrafl-container div.games-item:hover {
@@ -4043,7 +4163,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div.at-top-left div.tilecount div.oc {
-    color: var(--dark-bg-color);
+    color: var(--text-color);
     padding-left: 8px;
     margin-left: 0;
     overflow: hidden;
@@ -4089,7 +4209,7 @@ div.highlight1.netskrafl-blanktile {
     padding-bottom: 6px;
     padding-left: 10px;
     padding-right: 10px;
-    color: black;
+    color: var(--text-color);
     font-size: 15px;
     line-height: 20px;
     max-width: 80%;
@@ -4113,7 +4233,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div.chat-msg.remote {
-    background-color: #f1dbda;
+    background-color: var(--logo-primary-light);
 }
 
 .netskrafl-container div.chat-msg img {
@@ -4193,7 +4313,7 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container div.gamestats {
     visibility: hidden;
-    color: black;
+    color: var(--text-color);
     background-color: white;
     z-index: 20;
     position: absolute;
@@ -4522,7 +4642,7 @@ div.highlight1.netskrafl-blanktile {
     left: 22px;
     top: 160px;
     width: 54px;
-    background-color: white;
+    background-color: var(--racktile-background);
     padding: 2px;
     border-radius: 5px;
     cursor: default;
@@ -4531,13 +4651,13 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container div.board-help-close {
     width: 50px;
     text-align: right;
-    background-color: white;
+    background-color: var(--racktile-background);
     margin: 2px;
 }
 
 .netskrafl-container div.board-help-close span {
     background-color: var(--cancel-button);
-    color: white;
+    color: var(--racktile-background);
     padding: 1px;
     padding-top: 2px;
     padding-left: 2px;
@@ -4565,7 +4685,7 @@ div.highlight1.netskrafl-blanktile {
     margin-top: 2px;
     margin-bottom: 2px;
     font-weight: 400;
-    border: solid 2px white;
+    border: solid 2px var(--racktile-background);
     border-collapse: collapse;
     border-radius: 5px;
 }
@@ -4594,7 +4714,7 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container div.board-color#single-letter {
     background-color: var(--board-background);
-    color: black;
+    color: var(--text-color);
 }
 
 .netskrafl-container div.scorediff {
@@ -4907,7 +5027,7 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container .listitem a:link,
 .netskrafl-container .listitem a:visited {
-    color: black;
+    color: var(--text-color);
     text-decoration: none;
 }
 
@@ -5241,7 +5361,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container span.glyphicon.glyphicon-lightbulb.grayed {
-    color: rgba(0, 0, 0, 0.2);
+    color: color-mix(in srgb, var(--text-color) 40%, transparent);
 }
 
 .netskrafl-container div.listheader span.glyphicon.glyphicon-star-empty,
@@ -5252,12 +5372,12 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container #userlist span.glyphicon.glyphicon-star-empty,
 .netskrafl-container #userlist span.glyphicon.glyphicon-hand-right.grayed,
 .netskrafl-container #elolist span.glyphicon.glyphicon-hand-right.grayed {
-    color: rgba(0, 0, 0, 0.15);
+    color: color-mix(in srgb, var(--text-color) 35%, transparent);
 }
 
 .netskrafl-container span.glyphicon.glyphicon-hourglass.grayed,
 .netskrafl-container span.glyphicon.glyphicon-shopping-bag.grayed {
-    color: rgba(0, 0, 0, 0.1);
+    color: color-mix(in srgb, var(--text-color) 30%, transparent);
 }
 
 .netskrafl-container div.listheader span.glyphicon.glyphicon-bookmark.grayed,
@@ -5265,7 +5385,7 @@ div.highlight1.netskrafl-blanktile {
 .netskrafl-container #usr-recent span.glyphicon.glyphicon-bookmark.grayed,
 .netskrafl-container #gamelist span.glyphicon.glyphicon-bookmark.grayed,
 .netskrafl-container #gamelist span.glyphicon.glyphicon-hourglass.grayed {
-    color: rgba(0, 0, 0, 0.06);
+    color: color-mix(in srgb, var(--text-color) 26%, transparent);
 }
 
 .netskrafl-container #gamelist span.glyphicon.glyphicon-flag.zombie {
@@ -5600,7 +5720,7 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container div.chall-time.selected {
     background-color: var(--triple-word-color);
-    color: black;
+    color: var(--text-color);
 }
 
 .netskrafl-container div.chall-time:hover {
@@ -5703,7 +5823,7 @@ div.highlight1.netskrafl-blanktile {
     border-style: solid;
     border-width: 2px;
     border-color: var(--ok-button);
-    background-color: white;
+    background-color: transparent;
     color: var(--ok-button);
 }
 
@@ -5872,7 +5992,6 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container input.text:focus {
-    background-color: hsl(from var(--malfridur-secondary) h 85% 90%);
     border-style: solid;
     border-color: var(--ok-button);
     border-width: 2px;
@@ -5942,13 +6061,13 @@ div.netskrafl-container input[type="checkbox"] {
 
 .netskrafl-container div.toggler {
     background-color: var(--toggler-background);
-    color: white;
+    color: var(--color-background);
     margin-top: 9px;
     margin-bottom: 3px;
     border-radius: 10px;
     cursor: pointer;
     overflow: hidden;
-    border: white solid 3px;
+    border: var(--color-background) solid 3px;
 }
 
 .netskrafl-container div.toggler:focus,
@@ -6357,7 +6476,7 @@ div.netskrafl-container input[type="checkbox"] {
         /* Reference width */
         width: 667px;
         /* Reference height */
-        height: calc(100dvh - var(--header-size, 3rem));
+        height: 100%;
         max-height: 686px;
         overflow-y: hidden;
     }
@@ -8309,7 +8428,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 /* Desktop score states */
 
 .netskrafl-container div.gata-dagsins-score.disabled {
-    background-color: white;
     color: var(--middle-shadow);
     border-color: var(--middle-shadow);
     border-style: solid;
@@ -8325,7 +8443,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 }
 
 .netskrafl-container div.gata-dagsins-score.word-bad {
-    background-color: white;
     color: var(--logo-primary);
     border-color: var(--logo-primary);
     border-style: solid;
@@ -8343,6 +8460,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 /* Right side wrapper - positioned above board on mobile */
 
 .netskrafl-container div.gatadagsins-right-side-wrapper {
+    color: var(--text-color);
     flex: 0 0 auto;
     min-height: 80px;
     display: flex;
@@ -8401,7 +8519,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     font-family: var(--primary-font);
     font-size: 14px;
     font-weight: bold;
-    color: #333;
 }
 
 .netskrafl-container .date-navigator .solver-count-pill {
@@ -9020,7 +9137,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     color: var(--logo-accent);
     border-bottom-color: var(--logo-accent);
     font-weight: 700;
-    background-color: #f8f8f8;
+    background-color: var(--container-bg-color);
 }
 
 .netskrafl-container .tab-icon-wrapper {
@@ -9071,7 +9188,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10000;
-    background: white;
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     width: 95%;
@@ -9097,7 +9213,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-header h2 {
     margin: 0;
     font-size: 20px;
-    color: #333;
 }
 
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-content {
@@ -9118,7 +9233,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
     z-index: 10;
     transition: all 0.2s ease;
 }
@@ -9147,7 +9261,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     margin-top: 20px;
     margin-bottom: 10px;
     font-size: 16px;
-    color: #333;
 }
 
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-body h3:first-child {
@@ -9157,7 +9270,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-body p {
     margin: 10px 0;
     line-height: 1.6;
-    color: #555;
     font-size: 14px;
 }
 
@@ -9169,7 +9281,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-body li {
     margin: 8px 0;
     line-height: 1.6;
-    color: #555;
     font-size: 14px;
 }
 
@@ -9326,7 +9437,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .stat-label {
     flex: 0 1 auto;
     font-size: 13px;
-    color: #666;
+    color: var(--color-neutral-600);
     font-family: var(--primary-font);
     text-align: left;
     white-space: nowrap;
@@ -9470,7 +9581,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     flex: 1;
     font-size: 13px;
     font-family: var(--primary-font);
-    color: #333;
+    color: var(--text-color);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -9733,7 +9844,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     font-family: var(--primary-font);
     font-size: 20px;
     font-weight: bold;
-    color: #333;
     text-align: center;
     margin-bottom: 4px;
 }
@@ -9766,7 +9876,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     padding: 10px 14px;
     font-family: var(--primary-font);
     font-size: 13px;
-    color: #333;
     text-align: center;
     margin-bottom: 14px;
     line-height: 1.4;
@@ -9901,7 +10010,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 
     .netskrafl-container div.gatadagsins-container {
         /* Dynamic viewport height minus header, adapts to browser chrome */
-        height: calc(100dvh - var(--header-size, 3rem));
+        height: 100%;
         max-height: 686px; /* Cap on large screens */
     }