@mideind/netskrafl-react 1.4.0 → 1.6.0

package/dist/cjs/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;
@@ -929,14 +939,11 @@ div.netskrafl-container * {
 }
 
 .netskrafl-container div.board table.board {
-  transform: scale(1);
-  transform-origin: 0 0;
+  transform: translate(0px, 0px) scale(1);
+  transition: none;
+  transform-origin: top left;
   transform-box: view-box;
   touch-action: pan-x pan-y;
-  /*
-   !!! Scrolling into view doesn't seem to work with this transition enabled
-   transition: transform .2s ease-in-out;
-   */
 }
 
 .netskrafl-container table.board tr {
@@ -1376,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;
@@ -2553,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 {
@@ -2998,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);
 }
@@ -4250,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 {
@@ -5302,7 +5318,7 @@ div.highlight1.netskrafl-blanktile {
 }
 
 .netskrafl-container div#user-friend {
-  left: 180px;
+  left: 166px;
   width: 280px;
   /* Override */
   background-color: var(--ok-button);
@@ -5979,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%;
   }
@@ -6179,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) {
@@ -6263,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;
@@ -6281,7 +6300,7 @@ div.netskrafl-container input[type="checkbox"] {
   .netskrafl-container div.info {
     display: block;
     position: absolute;
-    bottom: 148px;
+    bottom: 152px;
     top: auto;
     left: 28px;
     width: 50px;
@@ -6363,6 +6382,7 @@ div.netskrafl-container input[type="checkbox"] {
     width: auto;
     height: auto;
     margin: 0;
+    overflow: visible; /* No scrollbars in fullscreen mode */
   }
   .netskrafl-container .board td {
     min-height: 30px;
@@ -6983,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;
@@ -7393,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 {
@@ -7414,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);
   }
@@ -7585,7 +7604,7 @@ div.netskrafl-container input[type="checkbox"] {
 .netskrafl-container .modal-dialog.gatadagsins-help {
   visibility: visible;
   position: fixed;
-  top: 50%;
+  top: 52%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10000;
@@ -7608,7 +7627,7 @@ div.netskrafl-container input[type="checkbox"] {
   padding: 15px;
   border-bottom: 1px solid #e0e0e0;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
 }
 
@@ -7618,22 +7637,37 @@ div.netskrafl-container input[type="checkbox"] {
   color: #333;
 }
 
-.netskrafl-container .modal-dialog.gatadagsins-help .modal-header .close {
-  background: none;
+.netskrafl-container .modal-dialog.gatadagsins-help .modal-content {
+  position: relative;
+}
+
+.netskrafl-container .modal-dialog.gatadagsins-help .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--malfridur-accent);
   border: none;
-  font-size: 28px;
+  border-radius: 6px;
   cursor: pointer;
   padding: 0;
-  width: 30px;
-  height: 30px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #999;
+  color: white;
+  z-index: 10;
+  transition: all 0.2s ease;
 }
 
-.netskrafl-container .modal-dialog.gatadagsins-help .modal-header .close:hover {
-  color: #333;
+.netskrafl-container .modal-dialog.gatadagsins-help .close .glyphicon {
+  font-size: 18px;
+  top: 0;
+}
+
+.netskrafl-container .modal-dialog.gatadagsins-help .close:hover {
+  background-color: var(--logo-accent);
+  transform: scale(1.05);
 }
 
 .netskrafl-container .modal-dialog.gatadagsins-help .modal-body {
@@ -7718,9 +7752,9 @@ div.netskrafl-container input[type="checkbox"] {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+  /* z-index: 9999; */
   overflow: hidden;
-  touch-action: none;
+  /* touch-action: none; */
 }
 
 /* Larger screen adjustments */
@@ -7734,6 +7768,7 @@ div.netskrafl-container input[type="checkbox"] {
 
   .netskrafl-container .modal-dialog.gatadagsins-help .modal-header {
     padding: 20px;
+    padding-right: 20px;
   }
 
   .netskrafl-container .modal-dialog.gatadagsins-help .modal-header h2 {
@@ -7834,6 +7869,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   flex-direction: row;
   justify-content: space-evenly;
   align-items: center;
+  margin-bottom: 20px;
 }
 
 /* Override rack positioning for Gáta Dagsins */
@@ -8697,7 +8733,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 /* ================= LEADERBOARD VIEW STYLES =============== */
 
 .netskrafl-container .leaderboard-view {
+  display: flex;
+  flex-direction: column;
   padding: 0px 10px;
+  height: 100%;
+  overflow: hidden;
 }
 
 .netskrafl-container .leaderboard-view.loading,
@@ -8716,6 +8756,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .netskrafl-container .leaderboard-title {
@@ -8736,13 +8777,16 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   display: flex;
   flex-direction: column;
   gap: 8px;
+  overflow-y: auto;
+  height: 360px;
+  overscroll-behavior-y: contain;
 }
 
 .netskrafl-container .leaderboard-entry {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px;
+  gap: 8px;
+  padding: 8px;
   background-color: #f8f8f8;
   border-radius: 6px;
   transition: all 0.3s ease;
@@ -8788,6 +8832,45 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
   color: var(--malfridur-green);
 }
 
+.netskrafl-container .entry-star {
+  display: inline-block;
+  margin-right: 8px;
+  color: var(--malfridur-secondary);
+  line-height: 1;
+}
+
+.netskrafl-container .entry-star .glyphicon {
+  font-size: 13px;
+}
+
+/* ================= HELP DIALOG BONUS SQUARES =============== */
+
+.netskrafl-container .help-bonus-square {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.netskrafl-container .help-bonus-square.double-letter {
+  background-color: var(--double-letter-color);
+}
+
+.netskrafl-container .help-bonus-square.triple-letter {
+  background-color: var(--triple-letter-color);
+}
+
+.netskrafl-container .help-bonus-square.double-word {
+  background-color: var(--double-word-color);
+}
+
+.netskrafl-container .help-bonus-square.triple-word {
+  background-color: var(--triple-word-color);
+}
+
 /* ================= MOBILE STATS BUTTON =============== */
 
 .netskrafl-container .mobile-stats-button {
@@ -8825,7 +8908,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 .netskrafl-container .modal-dialog.stats-modal {
   visibility: visible;
   position: fixed;
-  top: 50%;
+  top: 52%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10000;
@@ -8884,7 +8967,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 .netskrafl-container .modal-dialog.stats-modal .modal-body {
   padding-top: 15px;
   padding-bottom: 15px;
-  overflow-y: auto;
+  overflow-y: hidden;
   flex: 1;
   overscroll-behavior-y: contain;
 }
@@ -8892,6 +8975,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
 /* Desktop styles for Gáta Dagsins */
 
 @media all and (min-width: 1024px) {
+
+  .modal-backdrop-netskrafl {
+    z-index: 9999;
+  }
+
   /* Show all thermometer moves on desktop */
   .netskrafl-container .thermometer-move-overlay:nth-child(n+2) {
     display: flex;
@@ -9018,6 +9106,11 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     width: 100%;
   }
 
+  .netskrafl-container .leaderboard-list {
+    height: 514px; /* Space for 10 entries */
+    overscroll-behavior-y: contain;
+  }
+
   /* Show thermometer on desktop */
   .netskrafl-container div.gatadagsins-thermometer-column {
     display: flex;
@@ -9034,7 +9127,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     margin-top: 0;
     padding-top: 8px;
     padding-bottom: 24px;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   .netskrafl-container div.gatadagsins-rack-area {
@@ -9042,6 +9135,7 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     /* Push left to compensate for row ids
        on the left side of the board */
     padding-left: 36px;
+    margin-bottom: 0;
   }
 
   /* Show desktop score on desktop */
@@ -9086,4 +9180,8 @@ div.gatadagsins-board-area.celebrate div.netskrafl-tile.netskrafl-racktile{
     margin-right: 5px;
   }
 
+  .netskrafl-container div.gatadagsins-container div.info {
+    bottom: 42px;
+  }
+
 }