From 683d83314e594feb18186a80863dbc77208c7d0b Mon Sep 17 00:00:00 2001
From: Swaroop Guggilam <guggi022@umn.edu>
Date: Sun, 22 May 2022 04:59:06 -0400
Subject: [PATCH] improvement to size of Sudoku Mode buttons for mobile devices

---
 docs/css/base-structure.css | 29 +++++++++++++++++++++++++++++
 docs/css/dark_theme.css     |  5 +++++
 docs/css/light_theme.css    |  5 +++++
 docs/index.html             |  6 +++---
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/docs/css/base-structure.css b/docs/css/base-structure.css
index 65ccf383..43b4678e 100644
--- 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
index 911e3fb4..800a0640 100644
--- 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
index 684247f1..afb90324 100644
--- 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
index bcd4a99a..018c4e93 100644
--- 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">