@mideind/netskrafl-react 3.3.2 → 3.4.1

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;
@@ -3641,17 +3666,32 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div#promo-form {
-    top: 64px;
+    top: 16px;
     left: 12px;
-    width: 327px;
-    height: 364px;
-    line-height: 1.5em;
+    right: 12px;
+    bottom: 16px;
+    width: auto;
+    height: auto;
+    line-height: 1.4em;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
 }
 
 .netskrafl-container div.promo-content {
-    margin-top: 16px;
-    margin-left: 16px;
-    margin-right: 16px;
+    margin-top: 12px;
+    margin-left: 4px;
+    margin-right: 4px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.netskrafl-container div.promo-content ul {
+    padding-left: 20px;
+}
+
+.netskrafl-container div.promo-content li {
+    margin-bottom: 6px;
 }
 
 .netskrafl-container div.promo-fullscreen {
@@ -3662,9 +3702,17 @@ div.netskrafl-tile.dragging div.letterscore {
     display: block;
 }
 
+.netskrafl-container div.promo-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    padding: 12px 4px;
+    flex-shrink: 0;
+}
+
 .netskrafl-container div.btn-promo-yes {
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 700;
     color: white;
     margin: 0;
@@ -3672,18 +3720,14 @@ div.netskrafl-tile.dragging div.letterscore {
     padding-top: 9px;
     border-radius: 5px;
     cursor: pointer;
-    position: absolute;
-    width: 200px;
-    height: 28px;
-    bottom: 24px;
-    right: 222px;
-    top: auto;
+    flex: 1;
+    height: 26px;
     background-color: var(--ok-button);
 }
 
 .netskrafl-container div.btn-promo-no {
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 700;
     color: white;
     margin: 0;
@@ -3691,13 +3735,10 @@ div.netskrafl-tile.dragging div.letterscore {
     padding-top: 9px;
     border-radius: 5px;
     cursor: pointer;
-    position: absolute;
-    width: 80px;
-    height: 28px;
-    bottom: 24px;
-    right: 24px;
-    top: auto;
-    background-color: var(--ok-button);
+    width: 100px;
+    flex-shrink: 0;
+    height: 26px;
+    background-color: var(--light-shadow);
 }
 
 /* Game limit dialog */
@@ -4893,10 +4934,17 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container div.promo-content h2 {
     color: var(--ok-button);
-    font-size: 24px;
-    line-height: 30px;
+    font-size: 20px;
+    line-height: 26px;
     font-weight: bold;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: first baseline;
+    gap: 6px;
+}
+
+.netskrafl-container div.promo-content h2 span.glyphicon {
+    flex-shrink: 0;
 }
 
 .netskrafl-container div.promo-krafla {
@@ -6462,32 +6510,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 +6570,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 +6728,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 +6783,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 +6835,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 +6993,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 +7615,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 +7626,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,14 +8100,22 @@ div.netskrafl-container input[type="checkbox"] {
         left: 128px;
         right: auto;
         bottom: auto;
-        width: 768px;
-        height: 512px;
+        width: 786px;
+        height: 500px;
         line-height: 1.62em;
+        font-size: 16px;
+        display: block;
     }
     .netskrafl-container div.promo-content {
-        margin-top: 32px;
-        margin-left: 48px;
-        margin-right: 48px;
+        margin-left: 32px;
+        margin-right: 32px;
+        overflow-y: visible;
+        flex: none;
+    }
+    .netskrafl-container div.promo-content h2 {
+        font-size: 26px;
+        line-height: 32px;
+        margin-bottom: 20px;
     }
     .netskrafl-container div.promo-fullscreen {
         display: block;
@@ -8083,12 +8123,28 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.promo-mobile {
         display: none;
     }
+    .netskrafl-container div.promo-buttons {
+        display: block;
+    }
+    .netskrafl-container div.btn-promo-yes {
+        position: absolute;
+        width: 200px;
+        height: 28px;
+        bottom: 24px;
+        right: 222px;
+        top: auto;
+        flex: none;
+        font-size: 18px;
+    }
     .netskrafl-container div.btn-promo-no {
+        position: absolute;
         width: 160px;
         height: 28px;
         bottom: 24px;
         right: 24px;
         top: auto;
+        flex-shrink: initial;
+        font-size: 18px;
         background-color: var(--light-shadow);
     }
     /* Game limit dialog - fullscreen */