Commit 053ee9a
authored
Fix the appearance of version/language selects (#74)
* 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 border1 parent b77519b commit 053ee9a
1 file changed
Lines changed: 26 additions & 7 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -235,6 +235,14 @@ dl > dt span ~ em { | |||
| 235 | 235 | div.body h3, div.body h4, div.body h5 { | |
| 236 | 236 | font-size: 1rem; | |
| 237 | 237 | } | |
| 238 | + /* Override default styles to make more readable */ | ||
| 239 | + div.body ul { | ||
| 240 | + padding-inline-start: 1rem; | ||
| 241 | + } | ||
| 242 | + div.body blockquote { | ||
| 243 | + margin-inline-start: 1rem; | ||
| 244 | + margin-inline-end: 0; | ||
| 245 | + } | ||
| 238 | 246 | /* Remove sidebar and top related bar */ | |
| 239 | 247 | div.related, .sphinxsidebar { | |
| 240 | 248 | display: none; | |
@@ -266,6 +274,7 @@ dl > dt span ~ em { | |||
| 266 | 274 | top: 0; | |
| 267 | 275 | height: 40px; | |
| 268 | 276 | width: 100%; | |
| 277 | + max-width: 100vw; | ||
| 269 | 278 | padding: 0 1rem 0 45px; | |
| 270 | 279 | display: flex; | |
| 271 | 280 | align-items: center; | |
@@ -284,10 +293,6 @@ dl > dt span ~ em { | |||
| 284 | 293 | flex: 0 1 0; | |
| 285 | 294 | margin-right: 1rem; | |
| 286 | 295 | } | |
| 287 | - .version_switcher_placeholder select { | ||
| 288 | - height: 30px; | ||
| 289 | - border-radius: 0; | ||
| 290 | - } | ||
| 291 | 296 | .nav-content .search { | |
| 292 | 297 | display: flex; | |
| 293 | 298 | flex: 1 1 auto; | |
@@ -311,10 +316,17 @@ dl > dt span ~ em { | |||
| 311 | 316 | } | |
| 312 | 317 | .nav-content .search input[type=submit] { | |
| 313 | 318 | height: 100%; | |
| 314 | - border: 0; | ||
| 319 | + appearance: none; | ||
| 320 | + -webkit-appearance: none; | ||
| 321 | + border: 1px solid transparent; | ||
| 322 | + border-left-color: #a9a9a9; | ||
| 315 | 323 | box-shadow: none; | |
| 316 | - outline: 1px solid #999; | ||
| 317 | 324 | cursor: pointer; | |
| 325 | + background-color: #f0f0f0; | ||
| 326 | + margin-right: 0; | ||
| 327 | + } | ||
| 328 | + .nav-content .search input[type=submit]:hover { | ||
| 329 | + border-color: #a9a9a9; | ||
| 318 | 330 | } | |
| 319 | 331 | .nav-content .search svg { | |
| 320 | 332 | flex: 0 0 20px; | |
@@ -454,6 +466,7 @@ dl > dt span ~ em { | |||
| 454 | 466 | position: relative; | |
| 455 | 467 | border: 1px solid #a8a8a8; | |
| 456 | 468 | height: 30px; | |
| 469 | + padding-right: 7px; | ||
| 457 | 470 | } | |
| 458 | 471 | .language_switcher_placeholder { | |
| 459 | 472 | margin-top: 2rem; | |
@@ -465,14 +478,20 @@ dl > dt span ~ em { | |||
| 465 | 478 | top: 7px; | |
| 466 | 479 | width: 15px; | |
| 467 | 480 | height: 15px; | |
| 468 | - right: 3px; | ||
| 481 | + right: 0; | ||
| 469 | 482 | pointer-events: none; | |
| 470 | 483 | } | |
| 471 | 484 | .language_switcher_placeholder select, | |
| 472 | 485 | .version_switcher_placeholder select { | |
| 486 | + -webkit-appearance: none; | ||
| 473 | 487 | appearance: none; | |
| 474 | 488 | border: 0; | |
| 475 | 489 | height: 100%; | |
| 490 | + background-color: white; | ||
| 491 | + } | ||
| 492 | + .language_switcher_placeholder:focus-visible, | ||
| 493 | + .version_switcher_placeholder:focus-visible { | ||
| 494 | + outline-offset: 5px; | ||
| 476 | 495 | } | |
| 477 | 496 | .language_switcher_placeholder select { | |
| 478 | 497 | width: 100%; | |
0 commit comments