@mideind/netskrafl-react 3.4.0 → 3.4.2

package/dist/esm/css/netskrafl.css

@@ -1008,7 +1008,7 @@ div.netskrafl-container {
     /* The outer container fills its parent and paints the background */
     width: 100%;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
     background-color: var(--container-bg-color);
 }
 
@@ -1020,8 +1020,8 @@ div.netskrafl-container {
     padding-top: 4px;
     /* font-family: var(--primary-font); */
     width: 375px;
-    /* Full height is 667px - we subtract 115px for browser chrome, top and bottom */
-    height: 586px; /* 552px; */
+    height: calc(100vh - 58px);
+    height: calc(100dvh - 58px);
     overflow-x: hidden;
     overflow-y: visible;
     margin: 0 auto;
@@ -2453,7 +2453,7 @@ div.netskrafl-tile.dragging div.letterscore {
     left: 0;
     top: 0;
     width: 375px;
-    height: 552px;
+    height: 100%;
     overflow: hidden;
     font-size: 13px;
     line-height: 23px;
@@ -2740,7 +2740,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     left: 0;
     width: 100%;
-    height: 458px;
+    height: 466px;
     background-color: var(--tab-movelist-background);
     padding-top: 8px;
     padding-bottom: 0;
@@ -2754,7 +2754,7 @@ div.netskrafl-tile.dragging div.letterscore {
     padding: 0;
     overflow: auto;
     width: 100%;
-    height: 350px;
+    height: 356px;
 }
 
 .netskrafl-container div.movelist.bestmoves {
@@ -3192,7 +3192,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0px;
     left: 0px;
     width: 100%;
-    height: 466px;
+    height: 474px;
     background-color: var(--two-letter-background);
     overflow: hidden;
     z-index: 3;
@@ -3257,6 +3257,7 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div#tabs,
 .netskrafl-container div#main-tabs {
+    height: 100%;
     border-width: 0;
     padding: 0;
 }
@@ -3265,7 +3266,8 @@ div.netskrafl-tile.dragging div.letterscore {
 .netskrafl-container div#main-tabs > div[role="tabpanel"] {
     position: relative;
     top: -8px;
-    height: 504px;
+    height: calc(100vh - 88px);
+    height: calc(100dvh - 88px);
     /* Prevent scroll from propagating to parent */
     overscroll-behavior: contain;
 }
@@ -3666,17 +3668,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 {
@@ -3687,9 +3704,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;
@@ -3697,18 +3722,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;
@@ -3716,13 +3737,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 */
@@ -3746,7 +3764,8 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div #userlist,
 .netskrafl-container div #elolist {
-    height: 396px;
+    height: calc(100vh - 240px);
+    height: calc(100dvh - 240px);
     /* 11 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3755,7 +3774,8 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div #gamelist {
-    height: 468px;
+    height: calc(100vh - 124px);
+    height: calc(100dvh - 124px);
     /* 13 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3764,7 +3784,8 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div #recentlist {
-    height: 396px;
+    height: calc(100vh - 196px);
+    height: calc(100dvh - 196px);
     /* 11 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3773,7 +3794,8 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div #usr-recent {
-    height: 432px;
+    height: calc(100vh - 160px);
+    height: calc(100dvh - 160px);
     /* 12 lines @ 36px each */
     overflow-y: auto;
     overflow-x: hidden;
@@ -3796,7 +3818,7 @@ div.netskrafl-tile.dragging div.letterscore {
     top: 0;
     left: 0;
     width: 100%;
-    height: 442px;
+    height: 450px;
     background-color: var(--tab-games-background);
     overflow: auto;
     z-index: 2;
@@ -4918,10 +4940,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 {
@@ -6426,14 +6455,6 @@ div.netskrafl-container input[type="checkbox"] {
 @media all and (max-width: 1023px) and (min-height: 632px) {
     /* iPhone X or taller */
     /* Tall mobile phones: use two lines to display the header */
-    .netskrafl-container div.tabbed-page {
-        height: 605px;
-        overflow: hidden;
-    }
-    .netskrafl-container div#tabs > div[role="tabpanel"],
-    .netskrafl-container div#main-tabs > div[role="tabpanel"] {
-        height: 556px;
-    }
     .netskrafl-container div.scoreleft {
         display: inline-block;
         position: relative;
@@ -6504,41 +6525,6 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.board-area {
         top: 98px;
     }
-    .netskrafl-container div #userlist,
-    .netskrafl-container div #elolist {
-        height: 424px;
-        /* 14 lines @ 36px each */
-    }
-    .netskrafl-container div #gamelist {
-        height: 576px;
-        /* 16 lines @ 36px each */
-    }
-    .netskrafl-container div #recentlist {
-        height: 504px;
-        /* 14 lines @ 36px each */
-    }
-    .netskrafl-container div #usr-recent {
-        height: 540px;
-        /* 15 lines @ 36px each */
-    }
-    .netskrafl-container div #chall-sent,
-    .netskrafl-container div #chall-received {
-        height: 288px;
-        /* 8 lines @ 36px each */
-    }
-    .netskrafl-container div.chat-container,
-    .netskrafl-container div.twoletter {
-        height: 476px;
-    }
-    .netskrafl-container div.games {
-        height: 452px;
-    }
-    .netskrafl-container div.movelist-container {
-        height: 468px;
-    }
-    .netskrafl-container div.movelist {
-        height: 358px;
-    }
 }
 
 /* iPhone 11 or larger: scale the UI to appear larger on the screen */
@@ -6548,7 +6534,6 @@ div.netskrafl-container input[type="checkbox"] {
     ) {
     .netskrafl-container div.netskrafl-inner {
         margin-top: 4px;
-        height: 652px;
     }
 }
 
@@ -6560,13 +6545,16 @@ div.netskrafl-container input[type="checkbox"] {
         orientation: landscape
     ) {
     /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
+    div.netskrafl-container {
+        container-type: inline-size;
+    }
     .netskrafl-container div.netskrafl-inner {
         /* Reference width */
         width: 667px;
         /* Reference height */
         height: 100%;
         max-height: 686px;
-        overflow-y: hidden;
+        overflow: visible;
     }
     .netskrafl-container div.header-logo {
         display: none;
@@ -6612,6 +6600,14 @@ div.netskrafl-container input[type="checkbox"] {
         left: 50%;
         width: 50%;
     }
+    .netskrafl-container div.logo {
+        display: block;
+        position: absolute;
+        top: 8px;
+        left: calc(8px - (100cqw - 667px) / 2);
+        width: 30px;
+        z-index: 10;
+    }
     .netskrafl-container div.board-area {
         position: absolute;
         top: 0;
@@ -6621,6 +6617,9 @@ div.netskrafl-container input[type="checkbox"] {
         top: 8px;
         padding-top: 1px;
         background-color: transparent;
+        transform: scale(0.92);
+        transform: scale(min(1, tan(atan2(100dvh - 16px, 408px))));
+        transform-origin: right top;
     }
     .netskrafl-container div.rightcol {
         width: 283px;
@@ -6715,7 +6714,8 @@ div.netskrafl-container input[type="checkbox"] {
         display: none;
     }
     .netskrafl-container div.movelist-container {
-        height: 300px;
+        height: calc(100vh - 90px);
+        height: calc(100dvh - var(--header-size, 40px) - 44px);
         padding-top: 0px;
         padding-bottom: 0px;
     }
@@ -6724,7 +6724,9 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.right-area.with-clock div.movelist-container {
         /* If in a clock game, reduce the movelist height by two lines (2 * 20px) */
-        height: 260px;
+        height: calc(100vh - 130px);
+        height: calc(100dvh - var(--header-size, 40px) - 84px);
+        max-height: 260px;
     }
     .netskrafl-container div.movelist-container div.bag {
         display: none;
@@ -6759,7 +6761,10 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div.right-area {
         top: 8px;
-        height: 316px;
+        height: calc(100vh - 16px);
+        height: calc(100dvh - 16px);
+        max-height: 316px;
+        margin-top: 0;
         padding-top: 0;
     }
     .netskrafl-container span.list-chall {
@@ -6776,7 +6781,29 @@ div.netskrafl-container input[type="checkbox"] {
     }
     .netskrafl-container div#tabs > div[role="tabpanel"],
     .netskrafl-container div#main-tabs > div[role="tabpanel"] {
-        height: 326px;
+        height: calc(100vh - 152px);
+        height: calc(100dvh - 152px);
+        max-height: 326px;
+    }
+    .netskrafl-container div #userlist,
+    .netskrafl-container div #elolist {
+        height: calc(100vh - 204px);
+        height: calc(100dvh - 204px);
+        max-height: 396px;
+    }
+    .netskrafl-container div #gamelist {
+        height: calc(100vh - 150px);
+        height: calc(100dvh - 150px);
+        max-height: 468px;
+    }
+    .netskrafl-container div #recentlist,
+    .netskrafl-container div #usr-recent {
+        height: calc(100vh - 204px);
+        height: calc(100dvh - 204px);
+        max-height: 396px;
+    }
+    .netskrafl-container div#elo-toggler {
+        top: 6px;
     }
     .netskrafl-container div#tabs-1 span.list-ts-short,
     .netskrafl-container div#tabs-1 span.list-manual,
@@ -6805,17 +6832,6 @@ div.netskrafl-container input[type="checkbox"] {
     }
 }
 
-/* Short landscape screens - scale board down slightly */
-
-@media all and (min-width: 667px) and (orientation: landscape) and (
-        max-height: 360px
-    ) {
-    .netskrafl-container div.board {
-        transform: scale(0.96);
-        transform-origin: center top;
-    }
-}
-
 /* ==========================================================================
    RESPONSIVE: Large screen (iPad and larger, 1024px+)
    ========================================================================== */
@@ -6876,6 +6892,25 @@ div.netskrafl-container input[type="checkbox"] {
         width: 1024px;
         height: 686px;
         overflow-y: hidden;
+        transition: zoom 200ms ease;
+    }
+    /* Scale down to fit within available width when embedded in a sidebar
+       layout; --sidebar-width and --sidebar-width-icon are defined by
+       Málstaður. When standalone (no sidebar), neither rule matches and
+       zoom remains at default (1). */
+    :has([data-slot="sidebar"][data-state="collapsed"]) div.netskrafl-inner {
+        zoom: 0.92;
+        zoom: min(
+            1,
+            tan(atan2(100vw - var(--sidebar-width-icon, 4rem) - 24px, 1024px))
+        );
+    }
+    :has([data-slot="sidebar"][data-state="expanded"]) div.netskrafl-inner {
+        zoom: 0.77;
+        zoom: min(
+            1,
+            tan(atan2(100vw - var(--sidebar-width, 14rem) - 12px, 1024px))
+        );
     }
     .netskrafl-container div.game-container {
         height: 100%;
@@ -7864,7 +7899,6 @@ div.netskrafl-container input[type="checkbox"] {
         width: 32px;
     }
     .netskrafl-container div.tabbed-page {
-        overflow: hidden;
         left: 110px;
         top: 12px;
         width: 900px;
@@ -7887,6 +7921,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div#tabs > div[role="tabpanel"],
     .netskrafl-container div#main-tabs > div[role="tabpanel"] {
         height: 657px;
+        max-height: none;
         top: 0;
     }
     .netskrafl-container div.userid {
@@ -8080,11 +8115,19 @@ div.netskrafl-container input[type="checkbox"] {
         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;
@@ -8092,12 +8135,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 */
@@ -8147,14 +8206,17 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div #gamelist,
     .netskrafl-container div #elolist {
         height: 504px;
+        max-height: none;
         /* 14 lines @ 36px each */
     }
     .netskrafl-container div #recentlist {
         height: 432px;
+        max-height: none;
         /* 12 lines @ 36px each */
     }
     .netskrafl-container div #usr-recent {
         height: 432px;
+        max-height: none;
         /* 12 lines @ 36px each */
     }
     .netskrafl-container div #chall-sent,