Fix the appearance of version/language selects (#74)

obulat · web-flow · commit 053ee9a01296 · 2021-05-12T09:52:42.000+02:00
* Fix the appearance of version/language selects

The appearance:none needs a -webkit prefix to work in Safari and Chrome on Android.
Adding padding to the select's outer div fixes arrow overlapping with the select's value.
Adding outline offset for focus-visible makes the outline go around the border instead of within it (just around the inner select itself).

* Fix search form overflow; readability improvements

* Fix search box and select appearances

Some problems in Safari mobile browser were fixed: right margin on the search box (between the button and the border), color of the button;
Language and version switchers in both Chrome for Android and Safari had gray background.

* Fix search button border
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -235,6 +235,14 @@ dl > dt span ~ em {
     div.body h3, div.body h4, div.body h5 {
         font-size: 1rem;
     }
+    /* Override default styles to make more readable */
+    div.body ul {
+        padding-inline-start: 1rem;
+    }
+    div.body blockquote {
+        margin-inline-start: 1rem;
+        margin-inline-end: 0;
+    }
     /* Remove sidebar and top related bar */
     div.related, .sphinxsidebar {
         display: none;
@@ -266,6 +274,7 @@ dl > dt span ~ em {
         top: 0;
         height: 40px;
         width: 100%;
+        max-width: 100vw;
         padding: 0 1rem 0 45px;
         display: flex;
         align-items: center;
@@ -284,10 +293,6 @@ dl > dt span ~ em {
         flex: 0 1 0;
         margin-right: 1rem;
     }
-    .version_switcher_placeholder select {
-        height: 30px;
-        border-radius: 0;
-    }
     .nav-content .search {
         display: flex;
         flex: 1 1 auto;
@@ -311,10 +316,17 @@ dl > dt span ~ em {
     }
     .nav-content .search input[type=submit] {
         height: 100%;
-        border: 0;
+        appearance: none;
+        -webkit-appearance: none;
+        border: 1px solid transparent;
+        border-left-color: #a9a9a9;
         box-shadow: none;
-        outline: 1px solid #999;
         cursor: pointer;
+        background-color: #f0f0f0;
+        margin-right: 0;
+    }
+    .nav-content .search input[type=submit]:hover {
+        border-color: #a9a9a9;
     }
     .nav-content .search svg {
         flex: 0 0 20px;
@@ -454,6 +466,7 @@ dl > dt span ~ em {
         position: relative;
         border: 1px solid #a8a8a8;
         height: 30px;
+        padding-right: 7px;
     }
     .language_switcher_placeholder {
         margin-top: 2rem;
@@ -465,14 +478,20 @@ dl > dt span ~ em {
         top: 7px;
         width: 15px;
         height: 15px;
-        right: 3px;
+        right: 0;
         pointer-events: none;
     }
     .language_switcher_placeholder select,
     .version_switcher_placeholder select {
+        -webkit-appearance: none;
         appearance: none;
         border: 0;
         height: 100%;
+        background-color: white;
+    }
+    .language_switcher_placeholder:focus-visible,
+    .version_switcher_placeholder:focus-visible {
+        outline-offset: 5px;
     }
     .language_switcher_placeholder select {
         width: 100%;
