@mideind/netskrafl-react 3.0.2 → 3.2.0

package/dist/esm/css/netskrafl.css

@@ -811,10 +811,18 @@ div.netskrafl-container.legacy-colors div.help-tabs .ui-tabs-panel a:link,div.ne
    ========================================================================== */
 
 div.netskrafl-container {
+    /* The outer container fills its parent and paints the background */
+    width: 100%;
+    height: 100%;
+    background-color: var(--container-bg-color);
+}
+
+.netskrafl-container div.netskrafl-inner {
+    /* The inner container has fixed dimensions and is centered */
     position: relative;
     top: 0;
     left: 0;
-    background-color: var(--container-bg-color);
+    padding-top: 0.5rem;
     /* font-family: var(--primary-font); */
     width: 375px;
     /* Full height is 667px - we subtract 115px for browser chrome, top and bottom */
@@ -826,7 +834,7 @@ div.netskrafl-container {
     touch-action: none;
 }
 
-div.netskrafl-container * {
+.netskrafl-container div.netskrafl-inner * {
     box-sizing: content-box;
 }
 
@@ -1290,7 +1298,7 @@ div.netskrafl-container * {
 
 @media all and (max-width: 374px) and (orientation: portrait) {
     /* Scale down for phones narrower than the 375px design width */
-    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;
@@ -2625,6 +2633,7 @@ div.netskrafl-tile.dragging div.letterscore {
 .netskrafl-container div#blank-form,
 .netskrafl-container div#chall-form,
 .netskrafl-container div#promo-form,
+.netskrafl-container div#gamelimit-form,
 .netskrafl-container div#wait-form,
 .netskrafl-container div#thanks-form,
 .netskrafl-container div#cancel-form,
@@ -2907,7 +2916,7 @@ div.netskrafl-tile.dragging div.letterscore {
     cursor: pointer;
     height: 26px;
     width: 122px;
-    margin-right: 1px;
+    margin-right: 8px;
     color: white;
     background-color: var(--cancel-button);
     border-radius: 5px;
@@ -3513,6 +3522,25 @@ div.netskrafl-tile.dragging div.letterscore {
     background-color: var(--ok-button);
 }
 
+/* Game limit dialog */
+
+.netskrafl-container div#gamelimit-form {
+    top: 64px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 327px;
+    height: 268px;
+    line-height: 1.5em;
+}
+
+.netskrafl-container div#gamelimit-form div.btn-promo-no {
+    width: 140px;
+    left: 50%;
+    transform: translateX(-50%);
+    right: auto;
+    background-color: var(--ok-button);
+}
+
 .netskrafl-container div #userlist,
 .netskrafl-container div #elolist {
     height: 396px;
@@ -6366,7 +6394,7 @@ div.netskrafl-container input[type="checkbox"] {
 
 @media all and (max-width: 1023px) and (min-height: 552px) {
     /* On sufficiently large mobile screens, keep the body fixed (unscrollable) */
-    div.netskrafl-container {
+    .netskrafl-container div.netskrafl-inner {
         /* position: fixed; */
         overflow: hidden;
     }
@@ -6509,7 +6537,7 @@ div.netskrafl-container input[type="checkbox"] {
 @media all and (min-width: 414px) and (max-width: 1023px) and (
         min-height: 652px
     ) {
-    div.netskrafl-container {
+    .netskrafl-container div.netskrafl-inner {
         /*
     transform: scale(1.1);
     transform-origin: center top;
@@ -6527,7 +6555,7 @@ div.netskrafl-container input[type="checkbox"] {
         orientation: landscape
     ) {
     /* Mobile screen, landscape mode (width >= 667px AND landscape orientation) */
-    div.netskrafl-container {
+    .netskrafl-container div.netskrafl-inner {
         /* Reference width */
         width: 667px;
         /* Reference height */
@@ -6538,8 +6566,7 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.header-logo {
         display: none;
     }
-    .netskrafl-container div.netskrafl,
-    .netskrafl-container div.gatadagsins {
+    .netskrafl-container div.netskrafl-inner {
         padding-top: 0;
     }
     .netskrafl-container div.rightarea {
@@ -6836,7 +6863,7 @@ div.netskrafl-container input[type="checkbox"] {
         padding-bottom: 1px;
         background-color: var(--tab-background);
     }
-    div.netskrafl-container {
+    .netskrafl-container div.netskrafl-inner {
         width: 1024px;
         height: 686px;
         overflow-y: hidden;
@@ -8034,6 +8061,23 @@ div.netskrafl-container input[type="checkbox"] {
         top: auto;
         background-color: var(--light-shadow);
     }
+    /* Game limit dialog - fullscreen */
+    .netskrafl-container div#gamelimit-form {
+        position: relative;
+        top: 160px;
+        left: 50%;
+        right: auto;
+        bottom: auto;
+        width: 512px;
+        line-height: 1.62em;
+    }
+    .netskrafl-container div#gamelimit-form div.btn-promo-no {
+        width: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        right: auto;
+        background-color: var(--ok-button);
+    }
     .netskrafl-container div.challenge {
         width: 48px;
         height: 48px;