@mideind/netskrafl-react 1.0.0-beta.9 → 1.0.2

package/dist/cjs/css/netskrafl.css

@@ -966,6 +966,8 @@ div.board {
   background-color: var(--container-bg-color);
   overflow: auto; /* Must be auto to allow panning/scrolling */
   width: 100%;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior: contain;
 }
 
 div.tile {
@@ -1016,7 +1018,8 @@ div.board div.tile.extra-wide {
 div.tile.dragging {
   position: fixed;
   z-index: 10;
-  /* Note: We can't use variables here because this element
+  font-family: var(--font-open-sans);
+  /* Note: We can't use Netskrafl-specific variables here because this element
     becomes a child of the document body element when dragging, and
     the style variables are not in scope at the body level. */
   box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
@@ -1322,7 +1325,7 @@ div.recallbtn {
   border-radius: 5px;
   cursor: pointer;
   width: 45px;
-  height: 41px;
+  height: 48px;
   background-color: var(--triple-word-color);
 }
 
@@ -1343,7 +1346,7 @@ div.scramblebtn {
   border-radius: 5px;
   cursor: pointer;
   width: 45px;
-  height: 41px;
+  height: 48px;
   background-color: var(--malfridur-accent);
 }
 
@@ -1633,6 +1636,8 @@ div.tabbed-page {
   overflow: hidden;
   font-size: 13px;
   line-height: 23px;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior: contain;
 }
 
 div.tab-scroll-area {
@@ -2542,6 +2547,8 @@ div#main-tabs > div[role=tabpanel] {
   position: relative;
   top: -8px;
   height: 504px;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior: contain;
 }
 
 div#main-tabs div.header-logo {
@@ -3021,6 +3028,8 @@ div #elolist {
   /* 11 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior-y: contain;
 }
 
 div #gamelist {
@@ -3028,6 +3037,8 @@ div #gamelist {
   /* 13 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior-y: contain;
 }
 
 div #recentlist {
@@ -3035,6 +3046,8 @@ div #recentlist {
   /* 11 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior-y: contain;
 }
 
 div #usr-recent {
@@ -3042,6 +3055,8 @@ div #usr-recent {
   /* 12 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior-y: contain;
 }
 
 div #chall-sent,
@@ -3050,6 +3065,8 @@ div #chall-received {
   /* 6 lines @ 36px each */
   overflow-y: auto;
   overflow-x: hidden;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior-y: contain;
 }
 
 div.games {
@@ -5626,7 +5643,7 @@ a.nodecorate:hover {
 
 a.iconlink:link {
   text-decoration: none;
-  color: var(--header-color);
+  color: var(--malfridur-accent);
 }
 
 a.iconlink:visited {
@@ -5685,6 +5702,13 @@ div#tabs-3 li {
   padding: auto;
 }
 
+/* Base help container styles - applies to all viewports */
+
+div.help-container {
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior: contain;
+}
+
 div.help-container ol li {
   font-weight: bold;
 }
@@ -6264,12 +6288,17 @@ div.signup-header {
     left: 28px;
     width: 50px;
     height: 50px;
-    font-size: 40px;
+    font-size: 46px;
     text-align: center;
   }
   div.info:hover {
     animation: expand 0.4s;
   }
+  div.gatadagsins div.info {
+    top: 40px;
+    left: 26px;
+    bottom: auto;
+  }
   div.login-error {
     position: absolute;
     padding-left: 12px;
@@ -7534,6 +7563,8 @@ div.signup-header {
     height: 612px;
     overflow: auto;
     padding-right: 24px;
+    /* Maintain scroll containment (inherited from base, but explicit for clarity) */
+    overscroll-behavior: contain;
   }
   div.twoletter-area {
     font-size: 16px;
@@ -7551,6 +7582,183 @@ div.signup-header {
 
 /* ================= GÁTA DAGSINS STYLES =============== */
 
+/* Help dialog styles - Mobile-first approach */
+
+.modal-dialog.gatadagsins-help {
+  visibility: visible;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10000;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  width: 95%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-dialog.gatadagsins-help .modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.modal-dialog.gatadagsins-help .modal-header {
+  padding: 15px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-dialog.gatadagsins-help .modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #333;
+}
+
+.modal-dialog.gatadagsins-help .modal-header .close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+}
+
+.modal-dialog.gatadagsins-help .modal-header .close:hover {
+  color: #333;
+}
+
+.modal-dialog.gatadagsins-help .modal-body {
+  padding: 15px;
+  overflow-y: auto;
+  flex: 1;
+  /* Prevent scroll from propagating to parent */
+  overscroll-behavior-y: contain;
+}
+
+.modal-dialog.gatadagsins-help .modal-body h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: #333;
+}
+
+.modal-dialog.gatadagsins-help .modal-body h3:first-child {
+  margin-top: 0;
+}
+
+.modal-dialog.gatadagsins-help .modal-body p {
+  margin: 10px 0;
+  line-height: 1.6;
+  color: #555;
+  font-size: 14px;
+}
+
+.modal-dialog.gatadagsins-help .modal-body ul {
+  margin: 10px 0;
+  padding-left: 25px;
+}
+
+.modal-dialog.gatadagsins-help .modal-body li {
+  margin: 8px 0;
+  line-height: 1.6;
+  color: #555;
+  font-size: 14px;
+}
+
+.modal-dialog.gatadagsins-help .modal-body a {
+  color: #4a90e2;
+  text-decoration: none;
+}
+
+.modal-dialog.gatadagsins-help .modal-body a:hover {
+  text-decoration: underline;
+}
+
+.modal-dialog.gatadagsins-help .modal-footer {
+  padding: 15px;
+  border-top: 1px solid #e0e0e0;
+  text-align: right;
+}
+
+.modal-dialog.gatadagsins-help .btn {
+  padding: 16px 22px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 700;
+  height: auto;
+  min-height: auto;
+}
+
+.modal-dialog.gatadagsins-help .btn-primary {
+  background-color: #4a90e2;
+  color: white;
+}
+
+.modal-dialog.gatadagsins-help .btn-primary:hover {
+  background-color: #357abd;
+}
+
+/* Modal backdrop */
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+/* Larger screen adjustments */
+
+@media (min-width: 601px) {
+  .modal-dialog.gatadagsins-help {
+    max-width: 600px;
+    width: 90%;
+    max-height: 80vh;
+  }
+
+  .modal-dialog.gatadagsins-help .modal-header {
+    padding: 20px;
+  }
+
+  .modal-dialog.gatadagsins-help .modal-header h2 {
+    font-size: 24px;
+  }
+
+  .modal-dialog.gatadagsins-help .modal-body {
+    padding: 20px;
+    /* Inherit the overscroll behavior from mobile */
+  }
+
+  .modal-dialog.gatadagsins-help .modal-body h3 {
+    font-size: 18px;
+  }
+
+  .modal-dialog.gatadagsins-help .modal-body p,
+  .modal-dialog.gatadagsins-help .modal-body li {
+    font-size: 15px;
+  }
+
+  .modal-dialog.gatadagsins-help .modal-footer {
+    padding: 15px 20px;
+  }
+}
+
 /* Mobile styles for Gáta Dagsins */
 
 div#gatadagsins-background {
@@ -7619,7 +7827,7 @@ div.gatadagsins-container table.board {
 }
 
 div.gatadagsins-rack-area {
-  flex: 0 0 100px;
+  flex: 0 0 80px;
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
@@ -7648,7 +7856,7 @@ div.gatadagsins-container div.rack {
 
 div.gatadagsins-container div.recallbtn {
   position: relative;
-  margin: 0 5px;
+  margin-left: 8px;
   display: flex;
   bottom: auto;
   left: auto;
@@ -7657,7 +7865,7 @@ div.gatadagsins-container div.recallbtn {
 
 div.gatadagsins-container div.scramblebtn {
   position: relative;
-  margin: 0 5px;
+  margin-left: 8px;
   display: flex;
   bottom: auto;
   left: auto;
@@ -7747,6 +7955,8 @@ div.gatadagsins-thermometer-column {
   height: 100%;
   width: 100%;
   align-items: center;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .thermometer-best-score {
@@ -7867,12 +8077,13 @@ div.gatadagsins-thermometer-column {
   }
 }
 
+/* Horizontal thermometer */
+
 .thermometer-body {
   position: relative;
   align-self: center;
   width: 100%;
   height: 40px;
-  margin: 0;
   border-radius: 20px;
   overflow: visible;
 }
@@ -7908,6 +8119,48 @@ div.gata-dagsins-score.cold {
   background-color: var(--cold);
 }
 
+/* Celebratory wobble-pulse animation for the score circle */
+
+@keyframes celebrateScore {
+  0%, 100% {
+    transform: rotate(0deg) scale(1);
+    box-shadow: 0 0 15px rgba(249, 115, 6, 0.4);
+  }
+  12.5% {
+    transform: rotate(0deg) scale(1.15); /* -10 */
+    box-shadow: 0 0 25px rgba(249, 115, 6, 0.6);
+  }
+  25% {
+    transform: rotate(0deg) scale(1.1); /* 10 */
+    box-shadow: 0 0 20px rgba(249, 115, 6, 0.5);
+  }
+  37.5% {
+    transform: rotate(0deg) scale(1.18); /* -6 */
+    box-shadow: 0 0 30px rgba(249, 115, 6, 0.7);
+  }
+  50% {
+    transform: rotate(0deg) scale(1.12); /* 6 */
+    box-shadow: 0 0 22px rgba(249, 115, 6, 0.5);
+  }
+  62.5% {
+    transform: rotate(0deg) scale(1.08); /* -4 */
+    box-shadow: 0 0 18px rgba(249, 115, 6, 0.4);
+  }
+  75% {
+    transform: rotate(0deg) scale(1.05); /* 2 */
+    box-shadow: 0 0 16px rgba(249, 115, 6, 0.35);
+  }
+  87.5% {
+    transform: rotate(0deg) scale(1.02); /* -2 */
+    box-shadow: 0 0 15px rgba(249, 115, 6, 0.3);
+  }
+}
+
+div.gata-dagsins-score.hot.celebrate {
+  animation: celebrateScore 2.5s ease-in-out infinite;
+  transform-origin: center center;
+}
+
 .thermometer-current-circle {
   color: white;
   border: 3px solid white;
@@ -8002,6 +8255,7 @@ div.gata-dagsins-score.cold {
   font-size: 14px;
   margin-left: 8px;
   white-space: nowrap;
+  display: none; /* Not displayed on mobile */
 }
 
 /* Animation for gentle pulsing effect */
@@ -8043,8 +8297,11 @@ div.gata-dagsins-score.cold {
   /* Restore vertical thermometer layout on desktop */
   .thermometer-container {
     flex-direction: column;
+    padding-left: 0;
+    padding-right: 0;
   }
 
+  /* Vertical thermometer */
   .thermometer-body {
     width: 40px;
     height: 100%;
@@ -8088,10 +8345,15 @@ div.gata-dagsins-score.cold {
     padding-right: 10px;
     padding-left: 10px;
   }
+
+  .thermometer-move-overlay .thermometer-move-coord {
+    display: block;
+  }
+
   div.gatadagsins-container {
     height: 680px;
   }
-  
+
   div.gatadagsins-container div.board {
     /* 16 x 34 pixels, i.e. 15 rows/columns plus row/column id */
     height: 544px;
@@ -8136,6 +8398,8 @@ div.gata-dagsins-score.cold {
   div.gatadagsins-container div.recallbtn {
     width: 64px;
     height: 45px;
+    margin-left: 5px;
+    margin-right: 5px;
   }
 
 }