@mideind/netskrafl-react 3.4.4 → 3.4.6

package/dist/esm/css/netskrafl.css

@@ -405,6 +405,7 @@ div.netskrafl-container {
     --board-cell-border-color: white;
     --board-tile-line-height-lg: 30px;
     --tab-background: #f3f3f6;
+    --tab-active-background: var(--container-bg-color);
     --rack-slot-background: #f3f3f6;
     --header-background: #dde1e4;
     --two-letter-background: hsl(from var(--malfridur-green) h 20% 90%);
@@ -418,6 +419,12 @@ div.netskrafl-container {
     --dialog-overlay-opacity: 50%;
     --tilecount-background: white;
     --chat-accent-color: var(--header-color);
+    --chat-local-background: color-mix(in oklch, var(--human-color) 20%, white);
+    --chat-remote-background: color-mix(
+        in oklch,
+        var(--autoplayer-color) 25%,
+        white
+    );
     --board-help-background: var(--board-background);
     --button-background: var(--board-background);
     --oddlist-background: var(--board-background);
@@ -479,6 +486,16 @@ div.netskrafl-container {
     --dialog-overlay-opacity: 72%;
     --tilecount-background: var(--color-neutral-400);
     --chat-accent-color: var(--color-secondary-500);
+    --chat-local-background: color-mix(
+        in oklch,
+        var(--human-color) 70%,
+        var(--color-neutral-100)
+    );
+    --chat-remote-background: color-mix(
+        in oklch,
+        var(--autoplayer-color) 80%,
+        var(--color-neutral-100)
+    );
     --board-help-background: var(--board-background);
     --button-background: var(--color-neutral-300);
     --chat-background: color-mix(
@@ -494,6 +511,11 @@ div.netskrafl-container {
         var(--color-neutral-200) 50%,
         var(--color-neutral-300)
     );
+    --tab-active-background: color-mix(
+        in oklch,
+        var(--color-neutral-200) 50%,
+        var(--color-neutral-300)
+    );
     --rack-slot-background: var(--color-neutral-100);
     --header-background: color-mix(
         in oklch,
@@ -503,7 +525,11 @@ div.netskrafl-container {
     --oddlist-background: var(--board-background);
     --evenlist-background: var(--color-neutral-50);
     --tab-movelist-background: var(--color-neutral-300);
-    --list-header-background: var(--color-neutral-200);
+    --list-header-background: color-mix(
+        in oklch,
+        var(--color-malfridurPalette-200) 40%,
+        var(--color-neutral-200)
+    );
     --toggler-background: var(--color-neutral-300);
     --toggler-border: var(--color-neutral-500);
 
@@ -520,7 +546,7 @@ div.netskrafl-container {
     /* Text, links and header colors - lightened for dark backgrounds */
     --header-color: var(--color-secondary-300);
     --header-hover-color: var(--color-secondary-400);
-    --humangrad-color: var(--color-secondary-500);
+    --humangrad-color: var(--color-secondary-600);
     --scorewrapper-background: var(--color-secondary-300);
     --player-btn-color: var(--color-neutral-900);
     --tab-text-color: var(--foreground);
@@ -634,10 +660,13 @@ div.netskrafl-container.legacy-colors {
     /* Container and UI backgrounds */
     --container-bg-color: #fff1dc;
     --tab-background: #f4f4f4;
+    --tab-active-background: var(--container-bg-color);
     --rack-slot-background: #b5bdc4;
     --stats-item-background: #ece8e0;
     --header-background: #d6d1c4;
     --chat-background: #f4cda0;
+    --chat-local-background: var(--board-background);
+    --chat-remote-background: var(--logo-primary-light);
     --light-header-color: #fcf0cd;
     --list-header-background: #fcf0cd;
     --two-letter-background: #b9dbcf;
@@ -994,10 +1023,10 @@ div.netskrafl-container.legacy-colors div.chall-time.selected {
         background-color: var(--human-color);
     }
 
-/* Help tabs links - use darker blue for better readability on white */
+/* Help tabs links - use link-hover-color for the retro/legacy theme */
 
 div.netskrafl-container.legacy-colors div.help-tabs .ui-tabs-panel a:link,div.netskrafl-container.legacy-colors div.help-tabs .ui-tabs-panel a:visited {
-        color: #2266aa;
+        color: var(--link-hover-color);
     }
 
 div.netskrafl-container.legacy-colors table.bag-content tr td {
@@ -1203,7 +1232,7 @@ div.netskrafl-container {
 .netskrafl-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
     margin-bottom: -1px;
     padding-bottom: 0px;
-    background-color: var(--container-bg-color);
+    background-color: var(--tab-active-background);
 }
 
 .netskrafl-container .ui-tabs .ui-tabs-panel {
@@ -1213,7 +1242,7 @@ div.netskrafl-container {
     padding-right: 6px;
     padding-top: 4px;
     padding-bottom: 4px;
-    background-color: var(--container-bg-color);
+    background-color: var(--tab-active-background);
 }
 
 .netskrafl-container .ui-widget {
@@ -1283,13 +1312,13 @@ div.netskrafl-container {
 
 .netskrafl-container .ui-state-active,
 .netskrafl-container .ui-widget-content .ui-state-active {
-    background-color: var(--container-bg-color);
+    background-color: var(--tab-active-background);
     font-weight: bold;
     color: var(--tab-active-text-color);
 }
 
 .netskrafl-container .ui-widget-header .ui-state-active {
-    background-color: var(--container-bg-color);
+    background-color: var(--tab-active-background);
     font-weight: bold;
     color: var(--tab-active-text-color);
 }
@@ -1878,6 +1907,10 @@ div.netskrafl-tile.dragging.no-drop {
     border-color: oklch(58% 0.13 25);
 }
 
+[data-theme="dark"] input.userid::placeholder {
+    color: var(--color-neutral-600);
+}
+
 div.netskrafl-tile.dragging.legacy-colors {
     /* Legacy color scheme: hardcode values since CSS variables are out of
     scope when the tile is a child of the document body during dragging */
@@ -3446,6 +3479,7 @@ div.netskrafl-tile.dragging div.letterscore {
     display: inline-block;
     width: 140px;
     min-width: 140px;
+    flex-shrink: 0;
     overflow: hidden;
 }
 
@@ -3465,6 +3499,7 @@ div.netskrafl-tile.dragging div.letterscore {
     display: inline-block;
     width: 400px;
     min-width: 400px;
+    flex-shrink: 0;
     overflow: hidden;
 }
 
@@ -3483,6 +3518,7 @@ div.netskrafl-tile.dragging div.letterscore {
     display: inline-block;
     width: 40px;
     max-width: 40px;
+    flex-shrink: 0;
     text-align: center;
     margin-right: 6px;
 }
@@ -3592,7 +3628,53 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div.user-cat#user-search {
+    /* On mobile, show only the search icon; the input is hidden */
+    display: block;
+    position: absolute;
+    top: 28px;
+    right: 6px;
+    background-color: var(--header-color);
+    color: white;
+    border-radius: 5px;
+    padding: 1px;
+}
+
+.netskrafl-container div.user-cat#user-search span.glyphicon-search {
+    font-size: 20px;
+}
+
+.netskrafl-container div.user-cat#user-search span:hover {
+    /* Override the general hover style on mobile */
+    color: white;
+    background-color: transparent;
+}
+
+.netskrafl-container div.user-cat#user-search input#search-id {
+    /* Hidden on mobile until search is activated */
     display: none;
+    color: var(--text-color);
+}
+
+.netskrafl-container div.user-cat#user-search.search-active {
+    /* Indicate active search mode via a different background color */
+    background-color: var(--toggler-selected);
+}
+
+.netskrafl-container div.user-cat#user-search.search-active input#search-id {
+    /* When search is active on mobile, show the input anchored to the left,
+       centered vertically within the headings area */
+    display: inline-block;
+    position: absolute;
+    right: 52px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(375px - 84px);
+}
+
+.netskrafl-container div#initials:has(#user-search.search-active) #user-headings {
+    /* Hide the category buttons when mobile search is active,
+       but keep their layout space */
+    visibility: hidden;
 }
 
 .netskrafl-container div#chall-form {
@@ -4357,11 +4439,11 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div.chat-msg.local {
-    background-color: var(--board-background);
+    background-color: var(--chat-local-background);
 }
 
 .netskrafl-container div.chat-msg.remote {
-    background-color: var(--logo-primary-light);
+    background-color: var(--chat-remote-background);
 }
 
 .netskrafl-container div.chat-msg img {
@@ -5128,15 +5210,15 @@ div.highlight1.netskrafl-blanktile {
     padding: 6px 10px 4px 6px;
     margin: 0;
     z-index: 5;
-    color: #5699a5;
-    background-color: white;
+    color: var(--tab-text-color);
+    background-color: var(--header-color);
     border-radius: 5px;
     cursor: pointer;
 }
 
 .netskrafl-container div.userid:hover {
-    background-color: var(--humangrad-color);
-    color: white;
+    background-color: var(--header-hover-color);
+    color: var(--tab-text-color);
 }
 
 .netskrafl-container div.listitem {
@@ -5216,10 +5298,6 @@ div.highlight1.netskrafl-blanktile {
     vertical-align: middle;
 }
 
-.netskrafl-container div.user-cat#user-search {
-    float: right;
-}
-
 .netskrafl-container div.user-cat span {
     font-size: 16px;
     cursor: pointer;
@@ -5245,6 +5323,7 @@ div.highlight1.netskrafl-blanktile {
     padding-top: 6px;
     padding-bottom: 6px;
     top: 0;
+    left: 2px;
 }
 
 .netskrafl-container span.versus-cat span {
@@ -5473,7 +5552,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container #userlist span.glyphicon.glyphicon-star {
-    color: var(--header-color);
+    color: var(--option-selected);
 }
 
 .netskrafl-container #userlist span.glyphicon.glyphicon-hand-right,
@@ -5532,8 +5611,10 @@ div.highlight1.netskrafl-blanktile {
     display: none;
     position: absolute;
     top: 220px;
-    left: 140px;
-    width: 600px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 90%;
     z-index: 10;
     text-align: center;
 }
@@ -6454,12 +6535,13 @@ div.netskrafl-container input[type="checkbox"] {
 }
 
 /* ==========================================================================
-   RESPONSIVE: Mobile portrait (extra tall - iPhone X+)
+   RESPONSIVE: Mobile default (overridden by the landscape query below)
    ========================================================================== */
 
-@media all and (max-width: 1023px) and (min-height: 632px) {
-    /* iPhone X or taller */
-    /* Tall mobile phones: use two lines to display the header */
+@media all and (max-width: 1023px) {
+    /* Default mobile styles: two-line header, score and tab layout.
+       The landscape query further down overrides these for wide+short
+       viewports with orientation: landscape. */
     .netskrafl-container div.scoreleft {
         display: inline-block;
         position: relative;
@@ -6596,7 +6678,7 @@ div.netskrafl-container input[type="checkbox"] {
         text-align: center;
     }
     .netskrafl-container div.logowrapper {
-        width: 0%;
+        display: none;
     }
     .netskrafl-container div.playerwrapper {
         width: 100%;
@@ -6819,6 +6901,12 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.user-cat#user-headings {
         line-height: 28px;
     }
+    .netskrafl-container div.user-cat#user-search {
+        top: 6px;
+    }
+    .netskrafl-container div.user-cat#user-search.search-active input#search-id {
+        width: calc(667px - 84px);
+    }
     .netskrafl-container div #userlist,
     .netskrafl-container div #elolist {
         height: calc(100vh - 180px);
@@ -7025,6 +7113,9 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.game-container div.header-logo {
         display: none;
     }
+    .netskrafl-container div.game-container div.logowrapper {
+        display: none;
+    }
     .netskrafl-container div.board-help {
         display: block;
         z-index: 2;
@@ -8088,7 +8179,25 @@ div.netskrafl-container input[type="checkbox"] {
         line-height: 32px;
     }
     .netskrafl-container div.user-cat#user-search {
-        display: block;
+        top: 18px;
+        right: 22px;
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+        border-radius: 0;
+    }
+    .netskrafl-container div.user-cat#user-search span.glyphicon-search {
+        font-size: 16px;
+    }
+    .netskrafl-container div.user-cat#user-search span:hover,
+    .netskrafl-container div.user-cat#user-search:focus-within span.glyphicon-search {
+        color: white;
+        background-color: var(--header-hover-color);
+        border-radius: 5px;
+    }
+    .netskrafl-container div.user-cat#user-search input#search-id {
+        /* Always visible on desktop */
+        display: inline-block;
     }
     .netskrafl-container div#chall-form {
         position: absolute;
@@ -8315,6 +8424,9 @@ div.netskrafl-container input[type="checkbox"] {
         margin-right: 160px;
         font-size: inherit;
     }
+    .netskrafl-container div#initials {
+        margin-top: 2px;
+    }
     .netskrafl-container div.stats-box {
         width: auto;
         position: static;