@mideind/netskrafl-react 3.0.2 → 3.1.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;
@@ -2907,7 +2915,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;
@@ -6366,7 +6374,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 +6517,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 +6535,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 +6546,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 +6843,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;