@mideind/netskrafl-react 3.0.1 → 3.1.0

package/dist/esm/css/netskrafl.css

@@ -705,6 +705,10 @@ div.netskrafl-container.legacy-colors div.reviewhdr span.wordmove {
         color: inherit;
     }
 
+div.netskrafl-container.legacy-colors div.reviewhdr span.othermove {
+        color: inherit;
+    }
+
 div.netskrafl-container.legacy-colors div.netskrafl-freshtile {
         background-color: var(--autoplayer-color);
         color: black;
@@ -807,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 */
@@ -822,7 +834,7 @@ div.netskrafl-container {
     touch-action: none;
 }
 
-div.netskrafl-container * {
+.netskrafl-container div.netskrafl-inner * {
     box-sizing: content-box;
 }
 
@@ -1286,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;
@@ -2739,7 +2751,7 @@ div.netskrafl-tile.dragging div.letterscore {
 
 .netskrafl-container div.chall-info {
     bottom: 60px;
-    width: 311px;
+    width: 332px;
     line-height: 20px;
     padding: 2px 24px 0 4px;
 }
@@ -2903,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;
@@ -6362,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;
     }
@@ -6505,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;
@@ -6523,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 */
@@ -6534,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 {
@@ -6832,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;
@@ -7848,7 +7859,7 @@ div.netskrafl-container input[type="checkbox"] {
         margin-top: 10px;
     }
     .netskrafl-container div.fairplay {
-        top: 41px;
+        top: 46px;
         font-size: 28px;
         line-height: 28px;
         display: block;