@mideind/netskrafl-react 1.5.0 → 1.6.1

package/dist/esm/css/netskrafl.css

@@ -341,7 +341,7 @@ div.netskrafl-container {
   --light-shadow: #666666;
   --blank-tile: #999999;
   --middle-shadow: #cccccc;
-  --container-bg-color: #f8f8f8;
+  --container-bg-color: #fafafa;
   --light-header-color: #eaf5f7;
   --header-color: hsl(from var(--malfridur-accent) h 50% 60%);
   --header-hover-color: hsl(from var(--malfridur-accent) h 50% 70%);
@@ -434,6 +434,10 @@ div.netskrafl-container * {
   animation: blinkOutline 1s infinite;
 }
 
+.netskrafl-container .hidden {
+  visibility: hidden;
+}
+
 .netskrafl-container div.game-container {
   position: absolute;
   top: 0;
@@ -521,8 +525,8 @@ div.netskrafl-container * {
 }
 
 .netskrafl-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor.sp {
-  /* Single page version */
-  min-width: 51px;
+  /* Single page version, mobile */
+  min-width: 61px;
 }
 
 .netskrafl-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
@@ -698,7 +702,7 @@ div.netskrafl-container * {
   div.netskrafl-container {
     transform: scale(0.96, 1);
     /* 0.96 = 360/375 */
-    transform-origin: center top;
+    transform-origin: left top;
   }
 }
 
@@ -706,7 +710,7 @@ div.netskrafl-container * {
   display: block;
   float: left;
   padding-left: 4px;
-  padding-top: 18px;
+  padding-top: 14px;
 }
 
 .netskrafl-container div.header-button {
@@ -734,6 +738,12 @@ div.netskrafl-container * {
   height: 30px;
 }
 
+.netskrafl-container div.logo .glyphicon-home,
+.netskrafl-container div.header-logo .glyphicon-home {
+  color: #f17736;
+  font-size: 24px;
+}
+
 .netskrafl-container div.rightcol {
   position: relative;
   width: 362px;
@@ -1373,6 +1383,15 @@ div.netskrafl-tile.dragging div.letterscore {
   top: 0;
 }
 
+.netskrafl-container div.modal-close .glyphicon {
+  top: 0;
+}
+
+.netskrafl-container div#user-friend .glyphicon {
+  top: -1px;
+  margin-right: 4px;
+}
+
 .netskrafl-container .bottom-button {
   text-align: center;
   font-size: 18px;
@@ -2550,9 +2569,7 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div#main-tabs div.header-logo {
-  padding-left: 8px;
-  padding-right: 4px;
-  padding-top: 12px;
+  display: none;
 }
 
 .netskrafl-container div#tabs {
@@ -2995,8 +3012,8 @@ div.netskrafl-tile.dragging div.letterscore {
   position: absolute;
   width: 200px;
   height: 28px;
-  bottom: 48px;
-  right: 232px;
+  bottom: 24px;
+  right: 222px;
   top: auto;
   background-color: var(--ok-button);
 }
@@ -4247,11 +4264,13 @@ div.highlight1.netskrafl-blanktile {
   font-size: 24px;
   line-height: 30px;
   font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .netskrafl-container div.promo-content h2 span.glyphicon-coffee-cup,
 .netskrafl-container div.help-container span.glyphicon-coffee-cup {
   color: var(--triple-word-color);
+  margin-right: 6px;
 }
 
 .netskrafl-container div.promo-krafla {
@@ -5299,7 +5318,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div#user-friend {
-  left: 180px;
+  left: 166px;
   width: 280px;
   /* Override */
   background-color: var(--ok-button);
@@ -5976,9 +5995,6 @@ div.netskrafl-container input[type="checkbox"] {
   .netskrafl-container p.help-center {
     text-align: center;
   }
-  .netskrafl-container div.heading div.header-logo {
-    display: none;
-  }
   .netskrafl-container div.logowrapper {
     width: 0%;
   }
@@ -6176,6 +6192,12 @@ div.netskrafl-container input[type="checkbox"] {
   .netskrafl-container div#blank-form {
     display: none;
   }
+  .netskrafl-container div.modal-dialog {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 @media all and (min-width: 667px) and (max-height: 360px) {
@@ -6260,8 +6282,8 @@ div.netskrafl-container input[type="checkbox"] {
     width: 40px;
     height: 40px;
   }
-  .netskrafl-container div#main-tabs div.header-logo {
-    display: none;
+  .netskrafl-container div.logo .glyphicon-home {
+    font-size: 38px;
   }
   .netskrafl-container div.circle {
     height: 38px;
@@ -6981,9 +7003,6 @@ div.netskrafl-container input[type="checkbox"] {
     left: auto;
     background-color: transparent;
   }
-  .netskrafl-container div.modal-dialog {
-    position: absolute;
-  }
   .netskrafl-container .bottom-message {
     position: absolute;
     text-align: center;
@@ -7391,11 +7410,13 @@ div.netskrafl-container input[type="checkbox"] {
     background-size: 48px 48px;
   }
   .netskrafl-container div#promo-form {
+    position: relative;
+    top: auto;
     left: auto;
-    top: 60px;
-    right: 48px;
-    width: 812px;
-    height: 628px;
+    right: auto;
+    bottom: auto;
+    width: 768px;
+    height: 512px;
     line-height: 1.62em;
   }
   .netskrafl-container div.promo-content {
@@ -7412,8 +7433,8 @@ div.netskrafl-container input[type="checkbox"] {
   .netskrafl-container div.btn-promo-no {
     width: 160px;
     height: 28px;
-    bottom: 48px;
-    right: 48px;
+    bottom: 24px;
+    right: 24px;
     top: auto;
     background-color: var(--light-shadow);
   }