@mideind/netskrafl-react 3.3.1 → 3.4.0

package/dist/esm/css/netskrafl.css

@@ -316,6 +316,14 @@
     content: "\E512";
 }
 
+.netskrafl-container .glyphicon-lock:before {
+    content: "\E204";
+}
+
+.netskrafl-container .glyphicon-lock {
+    font-size: 90%;
+}
+
 /*
 
   Skrafl-explo.css
@@ -1000,6 +1008,7 @@ div.netskrafl-container {
     /* The outer container fills its parent and paints the background */
     width: 100%;
     height: 100%;
+    overflow: auto;
     background-color: var(--container-bg-color);
 }
 
@@ -1008,7 +1017,7 @@ div.netskrafl-container {
     position: relative;
     top: 0;
     left: 0;
-    padding-top: 0.5rem;
+    padding-top: 4px;
     /* font-family: var(--primary-font); */
     width: 375px;
     /* Full height is 667px - we subtract 115px for browser chrome, top and bottom */
@@ -1052,6 +1061,7 @@ div.netskrafl-container {
    -------------------------------------------------------------------------- */
 
 .netskrafl-container div#board-background {
+    position: relative;
     height: 100%;
     width: 100%;
 }
@@ -1485,7 +1495,7 @@ div.netskrafl-container {
     .netskrafl-container div.netskrafl-inner {
         transform: scale(0.96, 1);
         /* 0.96 = 360/375, scales 375px design to fit 360px viewport */
-        transform-origin: left top;
+        transform-origin: center top;
     }
 }
 
@@ -2616,8 +2626,9 @@ div.netskrafl-tile.dragging div.letterscore {
    -------------------------------------------------------------------------- */
 
 .netskrafl-container div.right-tab {
-    position: absolute;
-    top: -28px;
+    position: relative;
+    top: auto;
+    flex-shrink: 0;
     height: 34px;
     min-height: 34px;
     width: 55px;
@@ -2637,27 +2648,22 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div.right-tab#tab-board {
-    left: 41px;
     background-color: var(--container-bg-color);
 }
 
 .netskrafl-container div.right-tab#tab-movelist {
-    left: 106px;
     background-color: var(--tab-movelist-background);
 }
 
 .netskrafl-container div.right-tab#tab-twoletter {
-    left: 171px;
     background-color: var(--two-letter-background);
 }
 
 .netskrafl-container div.right-tab#tab-games {
-    left: 236px;
     background-color: var(--tab-games-background);
 }
 
 .netskrafl-container div.right-tab#tab-chat {
-    left: 301px;
     background-color: var(--chat-background);
 }
 
@@ -2677,7 +2683,8 @@ div.netskrafl-tile.dragging div.letterscore {
 .netskrafl-container div.right-area {
     /* display: none; */
     position: relative;
-    top: 30px;
+    top: 0;
+    padding-top: 34px;
     left: 0;
     height: 464px;
     width: 100%;
@@ -2693,6 +2700,24 @@ div.netskrafl-tile.dragging div.letterscore {
     margin-top: 46px;
 }
 
+.netskrafl-container div.tab-strip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    height: 34px;
+    padding-left: 41px;
+    gap: 10px;
+}
+
+.netskrafl-container div.right-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .netskrafl-container div.message {
     text-align: center;
     font-size: 14px;
@@ -6462,32 +6487,22 @@ div.netskrafl-container input[type="checkbox"] {
         padding-bottom: 6px;
     }
     .netskrafl-container div.right-area {
-        top: 36px;
+        padding-top: 36px;
+    }
+    .netskrafl-container div.tab-strip {
+        height: 38px;
+        padding-left: 8px;
+        padding-top: 4px;
+        gap: 6px;
     }
     .netskrafl-container div.right-tab {
-        top: -32px;
         width: 64px;
         min-width: 64px;
         padding-top: 6px;
         font-size: 18px;
     }
-    .netskrafl-container div.right-tab#tab-board {
-        left: 8px;
-    }
-    .netskrafl-container div.right-tab#tab-movelist {
-        left: 78px;
-    }
-    .netskrafl-container div.right-tab#tab-twoletter {
-        left: 148px;
-    }
-    .netskrafl-container div.right-tab#tab-games {
-        left: 218px;
-    }
-    .netskrafl-container div.right-tab#tab-chat {
-        left: 288px;
-    }
     .netskrafl-container div.board-area {
-        top: 100px;
+        top: 98px;
     }
     .netskrafl-container div #userlist,
     .netskrafl-container div #elolist {
@@ -6532,10 +6547,6 @@ div.netskrafl-container input[type="checkbox"] {
         min-height: 652px
     ) {
     .netskrafl-container div.netskrafl-inner {
-        /*
-    transform: scale(1.1);
-    transform-origin: center top;
-    */
         margin-top: 4px;
         height: 652px;
     }
@@ -6694,6 +6705,9 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.scoreright {
         top: 3px;
     }
+    .netskrafl-container div.tab-strip {
+        display: none;
+    }
     .netskrafl-container div.right-tab {
         display: none;
     }
@@ -6746,6 +6760,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.right-area {
         top: 8px;
         height: 316px;
+        padding-top: 0;
     }
     .netskrafl-container span.list-chall {
         width: 240px;
@@ -6797,7 +6812,7 @@ div.netskrafl-container input[type="checkbox"] {
     ) {
     .netskrafl-container div.board {
         transform: scale(0.96);
-        transform-origin: top left;
+        transform-origin: center top;
     }
 }
 
@@ -6955,6 +6970,17 @@ div.netskrafl-container input[type="checkbox"] {
         top: 0;
         margin-top: 6px;
         height: 420px;
+        padding-top: 0;
+    }
+    .netskrafl-container div.tab-strip {
+        position: absolute;
+        left: -40px;
+        top: 0;
+        width: 40px;
+        height: auto;
+        flex-direction: column;
+        padding-left: 0;
+        gap: 6px;
     }
     .netskrafl-container div.games,
     .netskrafl-container div.twoletter,
@@ -7566,7 +7592,6 @@ div.netskrafl-container input[type="checkbox"] {
         min-height: 38px;
         width: 38px;
         min-width: 38px;
-        top: auto;
         text-align: left;
         padding-top: 14px;
         padding-left: 10px;
@@ -7578,22 +7603,6 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.right-tab#tab-board {
         display: none;
     }
-    .netskrafl-container div.right-tab#tab-movelist {
-        top: 0;
-        left: -40px;
-    }
-    .netskrafl-container div.right-tab#tab-twoletter {
-        top: 58px;
-        left: -40px;
-    }
-    .netskrafl-container div.right-tab#tab-games {
-        top: 116px;
-        left: -40px;
-    }
-    .netskrafl-container div.right-tab#tab-chat {
-        top: 174px;
-        left: -40px;
-    }
     .netskrafl-container div.movelist-container {
         padding-top: 0;
         padding-bottom: 0;
@@ -8068,8 +8077,8 @@ div.netskrafl-container input[type="checkbox"] {
         left: 128px;
         right: auto;
         bottom: auto;
-        width: 768px;
-        height: 512px;
+        width: 786px;
+        height: 500px;
         line-height: 1.62em;
     }
     .netskrafl-container div.promo-content {
@@ -8375,6 +8384,15 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile {
     animation: celebrationTilePulse 1.5s ease-in-out infinite;
 }
 
+/* In dark mode, force black text on celebration tiles to avoid
+   white-on-white/gold washed-out appearance */
+
+[data-theme="dark"]
+    div.gatadagsins-board-area.celebrate
+    div.netskrafl-tile.netskrafl-racktile {
+    color: black;
+}
+
 @keyframes celebrationTilePulse {
     0%,
     100% {