@mideind/netskrafl-react 3.4.3 → 3.4.5

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 */
@@ -2690,7 +2723,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     padding-top: 34px;
     left: 0;
-    height: 464px;
+    height: 474px;
     width: 100%;
     font-size: 16px;
     line-height: 16px;
@@ -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 {
@@ -3822,12 +3904,13 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     left: 0;
     width: 100%;
+    /* Total height: 474px */
     height: 450px;
+    padding-top: 12px;
+    padding-bottom: 12px;
     background-color: var(--tab-games-background);
     overflow: auto;
     z-index: 2;
-    padding-top: 12px;
-    padding-bottom: 12px;
     border-radius: 4px 4px 0 0;
 }
 
@@ -4307,7 +4390,7 @@ div.highlight1.netskrafl-blanktile {
     top: 0px;
     left: 0px;
     width: 100%;
-    height: 466px;
+    height: 474px;
     background-color: var(--chat-background);
     z-index: 1;
     border-radius: 4px 4px 0 0;
@@ -4356,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 {
@@ -5127,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 {
@@ -5215,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;
@@ -5244,6 +5323,7 @@ div.highlight1.netskrafl-blanktile {
     padding-top: 6px;
     padding-bottom: 6px;
     top: 0;
+    left: 2px;
 }
 
 .netskrafl-container span.versus-cat span {
@@ -5472,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,
@@ -5531,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;
 }
@@ -6546,9 +6628,14 @@ div.netskrafl-container input[type="checkbox"] {
    ========================================================================== */
 
 @media all and (min-width: 667px) and (max-width: 1023px) and (
-        orientation: landscape
-    ) {
-    /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
+        max-height: 667px
+    ) and (orientation: landscape) {
+    /* Mobile screens in landscape (width 667–1023px, max-height 667px, landscape orientation) */
+    .netskrafl-container .ui-helper-reset {
+        /* Controls the height of the tab row; 50px is too tall for limited
+           vertical space in landscape */
+        line-height: 40px;
+    }
     div.netskrafl-container {
         container-type: inline-size;
     }
@@ -6621,8 +6708,10 @@ div.netskrafl-container input[type="checkbox"] {
         top: 8px;
         padding-top: 1px;
         background-color: transparent;
-        transform: scale(0.92);
-        transform: scale(clamp(0.92, calc((100dvh - 16px) / 408px), 1));
+        /* 0.88 is the scale required on an iPhone SE to fit the board
+           vertically */
+        transform: scale(0.88);
+        transform: scale(clamp(0.88, calc((100dvh - 16px) / 408px), 1));
         transform-origin: right top;
     }
     .netskrafl-container div.rightcol {
@@ -6743,15 +6832,29 @@ div.netskrafl-container input[type="checkbox"] {
         left: 90px;
     }
     .netskrafl-container div#own-stats {
-        height: 16px;
+        height: 32px;
+        margin-top: 6px;
+        margin-bottom: 6px;
+    }
+    .netskrafl-container div.stats-fig {
+        margin-top: 0;
+        height: 22px;
+        line-height: 22px;
     }
     .netskrafl-container p#own-best {
         left: auto;
         right: 6px;
         top: 0px;
         text-align: right;
-        font-size: 0.85em;
-        line-height: 1.4em;
+        font-size: 13px;
+        line-height: 17px;
+        margin-top: 8px;
+    }
+    .netskrafl-container div#own-toggler {
+        top: -2px;
+    }
+    .netskrafl-container div.toggler span.glyphicon {
+        top: 2px;
     }
     .netskrafl-container div #chall-sent,
     .netskrafl-container div #chall-received {
@@ -6785,29 +6888,47 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div#tabs > div[role="tabpanel"],
     .netskrafl-container div#main-tabs > div[role="tabpanel"] {
-        height: calc(100vh - 152px);
-        height: calc(100dvh - 152px);
-        max-height: 326px;
+        height: calc(100vh - 142px);
+        height: calc(100dvh - 142px);
+        max-height: 336px;
+    }
+    .netskrafl-container div#initials {
+        margin-top: 6px;
+        margin-bottom: 6px;
+        height: 32px;
+    }
+    .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 - 204px);
-        height: calc(100dvh - 204px);
-        max-height: 396px;
+        height: calc(100vh - 180px);
+        height: calc(100dvh - 180px);
+        max-height: 420px;
     }
     .netskrafl-container div #gamelist {
-        height: calc(100vh - 150px);
-        height: calc(100dvh - 150px);
-        max-height: 468px;
+        height: calc(100vh - 136px);
+        height: calc(100dvh - 136px);
+        max-height: 482px;
     }
     .netskrafl-container div #recentlist,
     .netskrafl-container div #usr-recent {
-        height: calc(100vh - 204px);
-        height: calc(100dvh - 204px);
-        max-height: 396px;
+        height: calc(100vh - 180px);
+        height: calc(100dvh - 180px);
+        max-height: 420px;
+    }
+    .netskrafl-container span#numgames,
+    .netskrafl-container span#numchallenges {
+        margin-top: 12px;
     }
     .netskrafl-container div#elo-toggler {
-        top: 6px;
+        top: 2px;
     }
     .netskrafl-container div#tabs-1 span.list-ts-short,
     .netskrafl-container div#tabs-1 span.list-manual,
@@ -8054,7 +8175,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;
@@ -8281,6 +8420,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;