Fixes to Dark Mode slider

Fix accessibility by moving "Dark Mode" text inside label element
Cleanup layout - change size and indent to match other elements; add hover color to indicate interactivity

Author: ascholerChemeketa

runestone/common/css/runestone-custom-sphinx-bootstrap.css

@@ -342,7 +342,8 @@ div.container {
 }
 
 .dropdown-menu > li > span,
-.dropdown-menu > li > div {
+.dropdown-menu > li > div,
+.dropdown-menu > li > label {
     display: block;
     padding: 3px 20px;
     clear: both;
@@ -352,6 +353,12 @@ div.container {
     white-space: nowrap;
 }
 
+.dropdown-menu > li > label:hover, .dropdown-menu > li > label:focus {
+  color: #262626;
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
 .dropdown-menu > li > a {
     color: var(--grayToWhite);
 }
@@ -1093,63 +1100,50 @@ body {
 }
 
 /*Theme toggle*/
-.theme-switch-wrapper {
+.dropdown-menu > li > label.theme-switch {
     display: flex;
     align-items: center;
-}
-
-.theme-switch-wrapper em {
-    margin-left: 10px;
-    font-size: 1rem;
-}
-
-.theme-switch {
-    display: inline-block;
-    height: 34px;
-    position: relative;
-    width: 60px;
+    font-weight: normal;
+    cursor: pointer;
 }
 
 .theme-switch input {
     display: none;
 }
 
-.slider {
-    background-color: #ccc;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: 0.4s;
+.theme-switch .slider {
+background-color: #ccc;
+height: 1.25em;
+width: 2em;
+transition: 0.4s;
+position: relative;
+margin-right: 3px;
 }
 
-.slider:before {
+.theme-switch .slider:before {
     background-color: #fff;
-    bottom: 4px;
+    bottom: 2px;
     content: "";
-    height: 26px;
-    left: 4px;
+    height: calc(1.25em - 4px);
+    left: 2px;
     position: absolute;
     transition: 0.4s;
-    width: 26px;
+    width: calc(1.25em - 4px);
 }
 
-input:checked + .slider {
+.theme-switch input:checked + .slider {
     background-color: #66bb6a;
 }
 
-input:checked + .slider:before {
-    transform: translateX(26px);
+.theme-switch input:checked + .slider:before {
+    transform: translateX( calc(0.75em - 1px) );
 }
 
-.slider.round {
-    border-radius: 34px;
+.theme-switch .slider.round {
+    border-radius: 1.25em;
 }
 
-.slider.round:before {
-    border-radius: 50%;
+.theme-switch .slider.round:before {
+    border-radius: 1.25em;
 }
-
 /*End theme toggle*/

runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html

@@ -165,11 +165,11 @@
             <li><a href="/{{appname}}/default/user/register" id="registerlink">Register</a></li>
             {% endif %}
             <li class='loginout'><a href='#'>Login</a></li> <!-- correct link populated by addNavbarLoginLink() -->
-			<!-- dark mode toggle -->
-             <li><label class="theme-switch" for="checkbox">
-					  <input type="checkbox" id="checkbox" onchange="runestoneComponents.switchTheme()" />
-							<div class="slider round"></div>
-					</label>Dark Mode</li>
+            <!-- dark mode toggle -->
+            <li><label class="theme-switch" for="checkbox">
+              <input type="checkbox" id="checkbox" onchange="runestoneComponents.switchTheme()" />
+              <div class="slider round"></div>Dark Mode
+            </label></li>
 			 </ul>
         </li>
         <!-- end user account dropdown -->