@mideind/netskrafl-react 1.9.0 → 2.0.0

package/dist/cjs/css/netskrafl.css

@@ -7741,8 +7741,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 
 .netskrafl-container div.mobile-score.word-bad {
     background-color: white;
-    color: var(--logo-primary-light);
-    border-color: var(--logo-primary-light);
+    color: var(--logo-primary);
+    border-color: var(--logo-primary);
     border-style: solid;
     border-width: 2px;
 }
@@ -7787,8 +7787,8 @@ 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-light);
-    border-color: var(--logo-primary-light);
+    color: var(--logo-primary);
+    border-color: var(--logo-primary);
     border-style: solid;
     border-width: 3px;
 }
@@ -7804,11 +7804,80 @@ 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 {
-    flex: 0 0 80px;
+    flex: 0 0 auto;
+    min-height: 80px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     order: -1;
-    margin-top: 10px; /* Accommodate sun corona at the top, to avoid clipping */
+}
+
+/* Wrapper for mobile content (DateNav + Status) */
+
+.netskrafl-container .gatadagsins-mobile-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+}
+
+/* Date Navigator Styles */
+
+.netskrafl-container .date-navigator {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 10px;
+    background-color: var(--board-background);
+    border-radius: 8px;
+    margin-bottom: 4px;
+}
+
+.netskrafl-container .date-navigator .nav-arrow {
+    cursor: pointer;
+    padding: 5px 10px;
+    font-size: 18px;
+    color: var(--malfridur-accent);
+    background-color: transparent;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.netskrafl-container .date-navigator .nav-arrow:hover {
+    color: var(--logo-accent);
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 50%;
+}
+
+.netskrafl-container .date-navigator .nav-arrow.disabled {
+    color: #ccc;
+    cursor: default;
+    pointer-events: none;
+    background-color: transparent;
+}
+
+.netskrafl-container .date-navigator .nav-date {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+}
+
+.netskrafl-container .mobile-date-nav-container {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 4px;
+}
+
+.netskrafl-container .mobile-date-nav-container .date-navigator {
+    background-color: transparent;
+    padding: 0;
+    width: 100%;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 0;
 }
 
 /* Mobile status bar - visible on mobile only */
@@ -7816,6 +7885,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 .netskrafl-container div.gatadagsins-mobile-status {
     flex: 1;
     display: flex;
+    width: 100%;
 }
 
 /* Thermometer column - hidden on mobile */
@@ -8231,7 +8301,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     background-color: var(--tab-background);
     border: 1px solid #ddd;
     border-radius: 8px;
-    padding: 8px 8px;
+    padding: 6px 12px;
     cursor: pointer;
     transition: all 0.2s ease;
     /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
@@ -8634,7 +8704,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 /* ================= STATS VIEW STYLES =============== */
 
 .netskrafl-container .stats-view {
-    padding: 0px 10px;
+    padding: 10px 10px;
 }
 
 .netskrafl-container .stats-view.loading,
@@ -8660,32 +8730,29 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     padding: 12px;
     background-color: var(--board-background);
     border-radius: 8px;
+    border-left: 6px solid transparent;
     transition: all 0.3s ease;
 }
 
 .netskrafl-container .stat-item.highlight {
-    /*
-	background-color: color-mix(
-		in srgb,
-		var(--double-word-color) 40%,
-		transparent
-	);
-	*/
-    border-left: 6px solid var(--logo-accent);
+    border-left-color: var(--logo-accent);
 }
 
 .netskrafl-container .stat-icon {
-    font-size: 28px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
+    width: 32px;
+    min-width: 32px;
+    max-width: 32px;
     color: var(--logo-accent);
 }
 
 .netskrafl-container .stat-icon .glyphicon {
-    font-size: 28px;
+    font-size: 24px;
+    width: 100%;
+    text-align: center;
 }
 
 .netskrafl-container .stat-info {
@@ -8700,7 +8767,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 
 .netskrafl-container .stat-label {
     flex: 0 1 auto;
-    font-size: 14px;
+    font-size: 13px;
     color: #666;
     font-family: var(--primary-font);
     text-align: left;
@@ -8747,13 +8814,6 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     flex-shrink: 0;
 }
 
-.netskrafl-container .leaderboard-title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    font-family: var(--primary-font);
-}
-
 .netskrafl-container .leaderboard-date {
     font-size: 12px;
     color: #666;
@@ -8778,6 +8838,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     background-color: var(--board-background);
     border-radius: 4px;
     transition: all 0.3s ease;
+    min-height: 24px;
 }
 
 .netskrafl-container .leaderboard-entry.current-user {
@@ -8959,8 +9020,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
 }
 
 .netskrafl-container .modal-dialog.stats-modal .modal-body {
-    padding-top: 16px;
-    padding-bottom: 22px;
+    padding-top: 12px;
+    padding-bottom: 12px;
     overflow-y: hidden;
     flex: 1;
     overscroll-behavior-y: contain;
@@ -8981,10 +9042,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     /* Restore vertical thermometer layout on desktop */
     .netskrafl-container .thermometer-container {
         flex-direction: column;
+        width: 90%;
+        margin-left: 10%;
+        margin-top: 60px; /* Enough to accommodate sun animation */
         padding-left: 0;
         padding-right: 0;
-        margin-top: 60px;
-        width: 80%;
     }
 
     /* Vertical thermometer */
@@ -9052,7 +9114,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         /* gap: 20px; */
     }
 
-    /* Hide mobile status and stats button on desktop */
+    /* Hide mobile wrapper, status and stats button on desktop */
+    .netskrafl-container div.gatadagsins-mobile-wrapper {
+        display: none;
+    }
+
     .netskrafl-container div.gatadagsins-mobile-status {
         display: none;
     }
@@ -9061,6 +9127,10 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
         display: none;
     }
 
+    .netskrafl-container .desktop-date-nav-container {
+        margin-bottom: 10px;
+    }
+
     /* Desktop tab styling adjustments */
     .netskrafl-container .tab-item {
         font-size: 13px;
@@ -9103,7 +9173,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     }
 
     .netskrafl-container .leaderboard-list {
-        height: 518px;
+        height: 500px;
         overscroll-behavior-y: contain;
     }