Merge pull request #289 from RAIRLab/265-make-a-nicer-ui-for-this-ugl…

…y-uncentered-toggle-button Made changes to the toggle button
RAIRLab · Dec 5, 2023 · 4856448 · 4856448
2 parents de80d10 + 11eda0a
commit 4856448
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/src/index.css b/src/index.css
@@ -139,36 +139,40 @@ p {
     user-select: none; 
 }
 
-/* input[type="checkbox"] {
-    display: none;
-} */
-
 .toggle-switch {
   position: relative;
-  display: inline-block;
+  display: block;
   width: 60px;
   height: 34px;
+  color: var(--mode-btn-icon-color);
+  margin:auto;
 }
 
 .toggle-switch .switch-track {
-  background-color: var(--mode-btn-bg);
-  border-radius: 34px;
+  background-color: var(--sidebar-border);
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   transition: background-color 0.3s;
+  border: var(--mode-btn-border); 
+  border-radius: var(--mode-btn-radius);
+  box-shadow: var(--mode-btn-shadow);
+  color: var(--mode-btn-icon-color);
 }
 
 .toggle-switch .switch-thumb {
-  background-color: var(--p-text);
-  border-radius: 50%;
+  background-color: var(--mode-btn-icon-color);
   width: 26px;
   height: 26px;
   position: absolute;
+  margin: 3%;
   top: 4px;
   left: 4px;
   transition: transform 0.3s, background-color 0.3s;
+  border-radius: var(--mode-btn-radius);
+  box-shadow: var(--mode-btn-shadow);
+  color: var(--mode-btn-icon-color);
 }
 
 input[type="checkbox"]:checked+.toggle-switch .switch-track {
@@ -181,10 +185,16 @@ input[type="checkbox"]:checked+.toggle-switch .switch-thumb {
 
 .toggle-switch+p::before {
   content: "Draw mode";
+  display:block;
+  text-align:center;
+  margin: 15% auto;
 }
 
 input[type="checkbox"]:checked+.toggle-switch+p::before {
   content: "Proof mode";
+  display:block; 
+  text-align:center;
+  margin: 15% auto;
 }
 
 #ProofButtons {