@mideind/netskrafl-react 3.4.0 → 3.4.1

package/dist/esm/css/netskrafl.css

@@ -3666,17 +3666,32 @@ div.netskrafl-tile.dragging div.letterscore {
 }
 
 .netskrafl-container div#promo-form {
-    top: 64px;
+    top: 16px;
     left: 12px;
-    width: 327px;
-    height: 364px;
-    line-height: 1.5em;
+    right: 12px;
+    bottom: 16px;
+    width: auto;
+    height: auto;
+    line-height: 1.4em;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
 }
 
 .netskrafl-container div.promo-content {
-    margin-top: 16px;
-    margin-left: 16px;
-    margin-right: 16px;
+    margin-top: 12px;
+    margin-left: 4px;
+    margin-right: 4px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.netskrafl-container div.promo-content ul {
+    padding-left: 20px;
+}
+
+.netskrafl-container div.promo-content li {
+    margin-bottom: 6px;
 }
 
 .netskrafl-container div.promo-fullscreen {
@@ -3687,9 +3702,17 @@ div.netskrafl-tile.dragging div.letterscore {
     display: block;
 }
 
+.netskrafl-container div.promo-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    padding: 12px 4px;
+    flex-shrink: 0;
+}
+
 .netskrafl-container div.btn-promo-yes {
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 700;
     color: white;
     margin: 0;
@@ -3697,18 +3720,14 @@ div.netskrafl-tile.dragging div.letterscore {
     padding-top: 9px;
     border-radius: 5px;
     cursor: pointer;
-    position: absolute;
-    width: 200px;
-    height: 28px;
-    bottom: 24px;
-    right: 222px;
-    top: auto;
+    flex: 1;
+    height: 26px;
     background-color: var(--ok-button);
 }
 
 .netskrafl-container div.btn-promo-no {
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 700;
     color: white;
     margin: 0;
@@ -3716,13 +3735,10 @@ div.netskrafl-tile.dragging div.letterscore {
     padding-top: 9px;
     border-radius: 5px;
     cursor: pointer;
-    position: absolute;
-    width: 80px;
-    height: 28px;
-    bottom: 24px;
-    right: 24px;
-    top: auto;
-    background-color: var(--ok-button);
+    width: 100px;
+    flex-shrink: 0;
+    height: 26px;
+    background-color: var(--light-shadow);
 }
 
 /* Game limit dialog */
@@ -4918,10 +4934,17 @@ div.highlight1.netskrafl-blanktile {
 
 .netskrafl-container div.promo-content h2 {
     color: var(--ok-button);
-    font-size: 24px;
-    line-height: 30px;
+    font-size: 20px;
+    line-height: 26px;
     font-weight: bold;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: first baseline;
+    gap: 6px;
+}
+
+.netskrafl-container div.promo-content h2 span.glyphicon {
+    flex-shrink: 0;
 }
 
 .netskrafl-container div.promo-krafla {
@@ -8080,11 +8103,19 @@ div.netskrafl-container input[type="checkbox"] {
         width: 786px;
         height: 500px;
         line-height: 1.62em;
+        font-size: 16px;
+        display: block;
     }
     .netskrafl-container div.promo-content {
-        margin-top: 32px;
-        margin-left: 48px;
-        margin-right: 48px;
+        margin-left: 32px;
+        margin-right: 32px;
+        overflow-y: visible;
+        flex: none;
+    }
+    .netskrafl-container div.promo-content h2 {
+        font-size: 26px;
+        line-height: 32px;
+        margin-bottom: 20px;
     }
     .netskrafl-container div.promo-fullscreen {
         display: block;
@@ -8092,12 +8123,28 @@ div.netskrafl-container input[type="checkbox"] {
     .netskrafl-container div.promo-mobile {
         display: none;
     }
+    .netskrafl-container div.promo-buttons {
+        display: block;
+    }
+    .netskrafl-container div.btn-promo-yes {
+        position: absolute;
+        width: 200px;
+        height: 28px;
+        bottom: 24px;
+        right: 222px;
+        top: auto;
+        flex: none;
+        font-size: 18px;
+    }
     .netskrafl-container div.btn-promo-no {
+        position: absolute;
         width: 160px;
         height: 28px;
         bottom: 24px;
         right: 24px;
         top: auto;
+        flex-shrink: initial;
+        font-size: 18px;
         background-color: var(--light-shadow);
     }
     /* Game limit dialog - fullscreen */