improvement to size of Sudoku Mode buttons for mobile devices

swaroopg92 · May 22, 2022 · 683d833 · 683d833
1 parent 44e8a5d
commit 683d833
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/docs/css/base-structure.css b/docs/css/base-structure.css
@@ -294,6 +294,21 @@ hr.newgridhrline {
     margin-top: 1px;
 }
 
+.labelSu {
+    display: inline-block;
+    margin: 0px;
+    height: 25px;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-left: 5px;
+    margin-bottom: 5px;
+    margin-top: 1px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 28px;
+    border-radius: 3px;
+}
+
 .label_option {
     display: inline-block;
     margin: 0px;
@@ -1439,6 +1454,20 @@ sup {
         display: block;
         text-align: center;
     }
+
+    .labelSu {
+        display: inline-block;
+        height: 50px;
+        padding-left: 5px;
+        padding-right: 5px;
+        margin-left: 5px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        font-size: 28px;
+        text-align: center;
+        line-height: 50px;
+        border-radius: 3px;
+    }
 }
 
 /* Replay */

diff --git a/docs/css/dark_theme.css b/docs/css/dark_theme.css
@@ -86,6 +86,11 @@
     border: 1px solid var(--blueskyMedium);
 }
 
+.labelSu {
+    color: var(--white);
+    border: 1px solid var(--blueskyMedium);
+}
+
 .label_option {
     color: var(--white);
     border: 2px solid var(--blueDark);

diff --git a/docs/css/light_theme.css b/docs/css/light_theme.css
@@ -85,6 +85,11 @@
     border: 1px solid var(--blueDark);
 }
 
+.labelSu {
+    color: var(--black);
+    border: 1px solid var(--blueDark);
+}
+
 .label_option {
     color: var(--black);
     border: 1px solid var(--blueDark);

diff --git a/docs/index.html b/docs/index.html
@@ -527,11 +527,11 @@
                         </span>
                         <span id="mode_sudoku" style="display:none;">
                             <input type="radio" name="mode_sudoku" value="1" id="sub_sudoku1" checked="checked">
-                            <label for="sub_sudoku1" class="label" id="sub_sudoku1_lb">Normal</label>
+                            <label for="sub_sudoku1" class="labelSu" id="sub_sudoku1_lb">Normal</label>
                             <input type="radio" name="mode_sudoku" value="2" id="sub_sudoku2">
-                            <label for="sub_sudoku2" class="label" id="sub_sudoku2_lb">Corner</label>
+                            <label for="sub_sudoku2" class="labelSu" id="sub_sudoku2_lb">Corner</label>
                             <input type="radio" name="mode_sudoku" value="3" id="sub_sudoku3">
-                            <label for="sub_sudoku3" class="label" id="sub_sudoku3_lb">Centre</label>
+                            <label for="sub_sudoku3" class="labelSu" id="sub_sudoku3_lb">Centre</label>
                         </span>
                     </div>
                     <div id="stylemode_button">