@mideind/netskrafl-react 2.3.1 → 2.5.0

package/dist/esm/css/netskrafl.css

@@ -543,8 +543,17 @@ div.netskrafl-container * {
 }
 
 .netskrafl-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp {
-    /* Single page version, mobile */
-    min-width: 61px;
+    /* Single page version, mobile - 5 tabs must fit in 375px */
+    min-width: 64px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.netskrafl-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp.narrow {
+    /* Narrower tab for settings (icon only, no legend on mobile) */
+    min-width: 36px;
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
 .netskrafl-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
@@ -711,10 +720,138 @@ div.netskrafl-container * {
     display: none;
 }
 
+/* Mobile-only classes: visible on mobile, hidden on desktop */
+
+.netskrafl-container .mobile-only-list {
+    display: list-item;
+}
+
 .netskrafl-container .upper {
     text-transform: uppercase;
 }
 
+/* Settings tab styles */
+
+.netskrafl-container .settings-tab {
+    padding: 12px;
+}
+
+.netskrafl-container .settings-header {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: var(--header-color);
+}
+
+.netskrafl-container .settings-section {
+    margin-top: 20px;
+}
+
+.netskrafl-container .settings-section-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #666;
+    margin-top: 8px;
+    text-transform: uppercase;
+}
+
+.netskrafl-container .settings-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.netskrafl-container .settings-label {
+    font-size: 16px;
+}
+
+.netskrafl-container .settings-explain {
+    font-size: 12px;
+    color: #888;
+    margin-top: 4px;
+    margin-bottom: 12px;
+}
+
+/* Sliding toggle switch - iOS/Material style */
+
+.netskrafl-container .sliding-toggle {
+    position: relative;
+    display: inline-block;
+    width: 48px;
+    height: 28px;
+    background-color: #ccc;
+    border-radius: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    flex-shrink: 0;
+}
+
+.netskrafl-container .sliding-toggle:focus {
+    outline: 2px solid var(--header-color);
+    outline-offset: 2px;
+}
+
+.netskrafl-container .sliding-toggle.on {
+    background-color: var(--header-color);
+}
+
+.netskrafl-container .sliding-toggle.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.netskrafl-container .sliding-toggle-thumb {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.netskrafl-container .sliding-toggle.on .sliding-toggle-thumb {
+    transform: translateX(20px);
+}
+
+/* Size variants */
+
+.netskrafl-container .sliding-toggle.toggle-small {
+    width: 40px;
+    height: 22px;
+    border-radius: 11px;
+}
+
+.netskrafl-container .sliding-toggle.toggle-small .sliding-toggle-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+}
+
+.netskrafl-container .sliding-toggle.toggle-small.on .sliding-toggle-thumb {
+    transform: translateX(18px);
+}
+
+.netskrafl-container .sliding-toggle.toggle-large {
+    width: 60px;
+    height: 34px;
+    border-radius: 17px;
+}
+
+.netskrafl-container .sliding-toggle.toggle-large .sliding-toggle-thumb {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+}
+
+.netskrafl-container .sliding-toggle.toggle-large.on .sliding-toggle-thumb {
+    transform: translateX(26px);
+}
+
 @media all and (max-width: 374px) and (orientation: portrait) {
     /* Scale down for phones narrower than the 375px design width */
     div.netskrafl-container {
@@ -726,9 +863,6 @@ div.netskrafl-container * {
 
 .netskrafl-container div.header-logo {
     display: block;
-    float: left;
-    padding-left: 4px;
-    padding-top: 14px;
 }
 
 .netskrafl-container div.header-button {
@@ -740,7 +874,7 @@ div.netskrafl-container * {
     display: none;
     position: absolute;
     top: 28px;
-    left: 28px;
+    left: 32px;
     width: 46px;
 }
 
@@ -769,16 +903,17 @@ div.netskrafl-container * {
 }
 
 .netskrafl-container div.logowrapper {
-    display: inline-block;
-    width: 11%;
-    vertical-align: top;
+    display: flex;
+    flex: 11;
+    align-items: center;
+    justify-content: center;
 }
 
 .netskrafl-container div.playerwrapper {
-    display: inline-block;
+    display: flex;
+    flex: 89;
     position: relative;
-    width: 89%;
-    padding-top: 4px;
+    padding-top: 0;
 }
 
 .netskrafl-container div.bag {
@@ -1841,14 +1976,14 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div.leftplayer {
     display: inline-block;
-    width: 50%;
+    flex: 50;
     text-align: left;
     border-radius: 4px 0 0 4px;
 }
 
 .netskrafl-container div.rightplayer {
     display: inline-block;
-    width: 50%;
+    flex: 50;
     text-align: right;
     border-radius: 0 4px 4px 0;
 }
@@ -1992,7 +2127,7 @@ div.netskrafl-tile.dragging div.letterscore {
     visibility: hidden;
     position: fixed;
     left: 0;
-    top: 0;
+    top: var(--header-size);
     width: 100%;
     height: 100%;
     z-index: 10;
@@ -5993,9 +6128,11 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.heading {
         height: auto;
+        display: flex;
+        flex-direction: row;
     }
     .netskrafl-container div.fairplay {
-        top: 21px;
+        top: 18px;
     }
     .netskrafl-container span.fairplay-btn.large {
         /* This is shown in the board header */
@@ -6004,7 +6141,7 @@ div.netskrafl-container input[type="checkbox"] {
         padding-bottom: 6px;
     }
     .netskrafl-container div.right-area {
-        top: 37px;
+        top: 36px;
     }
     .netskrafl-container div.right-tab {
         top: -32px;
@@ -6029,7 +6166,7 @@ div.netskrafl-container input[type="checkbox"] {
         left: 288px;
     }
     .netskrafl-container div.board-area {
-        top: 103px;
+        top: 100px;
     }
     .netskrafl-container div #userlist,
     .netskrafl-container div #elolist {
@@ -6085,7 +6222,9 @@ div.netskrafl-container input[type="checkbox"] {
 
 /* ================= MOBILE LANDSCAPE UI ====================== */
 
-@media all and (min-width: 667px) and (orientation: landscape) {
+@media all and (min-width: 667px) and (max-width: 1023px) and (
+        orientation: landscape
+    ) {
     /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
     div.netskrafl-container {
         /* Reference width */
@@ -6095,6 +6234,22 @@ div.netskrafl-container input[type="checkbox"] {
         max-height: 686px;
         overflow-y: hidden;
     }
+    .netskrafl-container div.header-logo {
+        display: none;
+    }
+    .netskrafl-container div.netskrafl,
+    .netskrafl-container div.gatadagsins {
+        padding-top: 0;
+    }
+    .netskrafl-container div.rightarea {
+        display: block;
+    }
+    .netskrafl-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp {
+        /* Override tab width */
+        min-width: 82px;
+        padding-left: 12px;
+        padding-right: 12px;
+    }
     .netskrafl-container div.tabbed-page {
         width: 100%;
     }
@@ -6114,7 +6269,6 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.playerwrapper {
         width: 100%;
-        padding-top: 0;
     }
     .netskrafl-container div.fairplay {
         top: 8px;
@@ -6368,6 +6522,8 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp {
         /* Override tab width */
         min-width: 82px;
+        padding-left: 12px;
+        padding-right: 12px;
     }
     .netskrafl-container .ui-tabs .ui-tabs-nav li {
         box-shadow: none;
@@ -6415,7 +6571,7 @@ div.netskrafl-container input[type="checkbox"] {
         position: absolute;
         bottom: 52px;
         top: auto;
-        left: 28px;
+        left: 26px;
         width: 50px;
         height: 50px;
         font-size: 46px;
@@ -6451,6 +6607,9 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.get-help {
         width: auto;
     }
+    .netskrafl-container div.game-container div.header-logo {
+        display: none;
+    }
     .netskrafl-container div.board-help {
         display: block;
         z-index: 2;
@@ -6486,6 +6645,7 @@ div.netskrafl-container input[type="checkbox"] {
         margin: 0;
         /* width should not be set here */
         height: 746px;
+        top: 0;
     }
     .netskrafl-container div.board {
         position: absolute;
@@ -6515,6 +6675,9 @@ div.netskrafl-container input[type="checkbox"] {
         height: 34px;
         /* 32px + 2 * 1.0px */
     }
+    .netskrafl-container table.bag-content td {
+        width: 14px;
+    }
     .netskrafl-container div.rack table.board {
         border-spacing: 4px;
     }
@@ -6786,6 +6949,10 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.submitmove.error-shown {
         display: block;
     }
+    .netskrafl-container div.submitmove#move-mobile {
+        /* Hide mobile submit button in fullscreen mode */
+        display: none;
+    }
     /* To the left of the rack */
     .netskrafl-container .bottom-button {
         display: block;
@@ -7342,8 +7509,14 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container .no-mobile-list {
         display: list-item;
     }
+    /* Hide mobile-only elements on desktop */
+    .netskrafl-container .mobile-only-list {
+        display: none;
+    }
     .netskrafl-container .tab-legend {
         font-weight: bold;
+        display: inline;
+        margin-left: 8px;
     }
     .netskrafl-container span#numgames,
     .netskrafl-container span#numchallenges {
@@ -7505,8 +7678,8 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div#promo-form {
         position: relative;
-        top: auto;
-        left: auto;
+        top: 80px;
+        left: 128px;
         right: auto;
         bottom: auto;
         width: 768px;
@@ -8010,7 +8183,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .mobile-date-nav-container {
     display: flex;
     justify-content: center;
-    padding-bottom: 4px;
+    /* Responsive padding: minimal on small screens, grows on taller screens */
+    padding-bottom: clamp(4px, 1.5vh, 16px);
 }
 
 .netskrafl-container .mobile-date-nav-container .date-navigator {
@@ -8851,7 +9025,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 /* ================= STATS VIEW STYLES =============== */
 
 .netskrafl-container .stats-view {
-    padding: 10px 10px;
+    padding: 0 10px;
 }
 
 .netskrafl-container .stats-view.loading,
@@ -8867,14 +9041,14 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container .stats-grid {
     display: flex;
     flex-direction: column;
-    gap: 15px;
+    gap: 12px;
 }
 
 .netskrafl-container .stat-item {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 12px;
+    gap: 10px;
+    padding: 8px 10px;
     background-color: var(--board-background);
     border-radius: 8px;
     border-left: 6px solid transparent;
@@ -8932,6 +9106,37 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     text-align: right;
 }
 
+/* Settings section at bottom of stats view */
+
+.netskrafl-container .stats-settings {
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--board-background);
+}
+
+.netskrafl-container .stats-settings .settings-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: var(--board-background);
+    border-radius: 8px;
+}
+
+.netskrafl-container .stats-settings .settings-label {
+    font-size: 13px;
+    color: #666;
+    font-family: var(--primary-font);
+}
+
+.netskrafl-container .stats-settings .settings-explain {
+    font-size: 11px;
+    color: #999;
+    margin-top: 8px;
+    padding: 0 4px;
+    line-height: 1.4;
+}
+
 /* ================= LEADERBOARD VIEW STYLES =============== */
 
 .netskrafl-container .leaderboard-view {
@@ -9118,9 +9323,12 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     width: 95%;
-    max-width: 500px;
-    max-height: 80vh;
+    height: 80%;
+    max-width: 400px;
+    max-height: 768px;
+    min-height: 500px;
     display: flex;
+    align-items: center;
     flex-direction: column;
     overscroll-behavior: contain;
     touch-action: pan-y;
@@ -9131,6 +9339,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 100%;
 }
 
 .netskrafl-container .modal-dialog.stats-modal .close {
@@ -9520,6 +9729,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         gap: 18px;
     }
 
+    /* Hide auto-zoom settings on desktop (not applicable) */
+    .netskrafl-container .stats-settings {
+        display: none;
+    }
+
     /* Desktop leaderboard view */
     .netskrafl-container .leaderboard-view {
         padding-top: 10px;