Rollup merge of rust-lang#93113 - GuillaumeGomez:unify-sizes, r=jsha

Unify search input and buttons size Fixes rust-lang#93060. Here what it looks like: ![Screenshot from 2022-01-20 21-38-19](https://user-images.githubusercontent.com/3050060/150418571-fefd6538-b3ee-4dd2-b77b-77e96bcfa0ed.png) ![Screenshot from 2022-01-20 21-38-22](https://user-images.githubusercontent.com/3050060/150418570-53ba259b-9bd4-4084-8b43-d74a5752d712.png) You can test it [here](https://rustdoc.crud.net/imperio/unify-sizes/std/index.html). r? `@jsha`
matthiaskrgr · Jan 22, 2022 · e0aa2e6 · e0aa2e6
2 parents c69e60f + f0525da
commit e0aa2e6
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 106 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -896,11 +896,11 @@ table,
 
 .search-container {
 	position: relative;
-	max-width: 960px;
+	display: flex;
+	height: 34px;
 }
-.search-container > div {
-	display: inline-flex;
-	width: calc(100% - 63px);
+.search-container > * {
+	height: 100%;
 }
 .search-results-title {
 	display: inline;
@@ -931,10 +931,8 @@ table,
 	background-position: calc(100% - 1px) 56%;
 	background-image: /* AUTOREPLACE: */url("down-arrow.svg");
 }
-.search-container > .top-button {
-	position: absolute;
-	right: 0;
-	top: 10px;
+.search-container {
+	margin-top: 4px;
 }
 .search-input {
 	/* Override Normalize.css: it has a rule that sets
@@ -947,23 +945,14 @@ table,
 	-moz-box-sizing: border-box !important;
 	box-sizing: border-box !important;
 	outline: none;
-	border: none;
-	border-radius: 1px;
-	margin-top: 5px;
-	padding: 10px 16px;
+	border: 1px solid;
+	border-radius: 2px;
+	padding: 5px 8px;
 	font-size: 1.0625rem;
 	transition: border-color 300ms ease;
-	transition: border-radius 300ms ease-in-out;
-	transition: box-shadow 300ms ease-in-out;
 	width: 100%;
 }
 
-.search-input:focus {
-	border-radius: 2px;
-	border: 0;
-	outline: 0;
-}
-
 .search-results {
 	display: none;
 	padding-bottom: 2em;
@@ -1436,43 +1425,36 @@ pre.rust {
 
 .theme-picker {
 	position: absolute;
-	left: -34px;
-	top: 9px;
+	left: -38px;
+	top: 4px;
 }
 
 .theme-picker button {
 	outline: none;
 }
 
 #settings-menu, #help-button {
-	position: absolute;
-	top: 10px;
-}
-
-#settings-menu {
-	right: 0;
+	margin-left: 4px;
 	outline: none;
 }
 
+#theme-picker, #copy-path {
+	height: 34px;
+}
 #theme-picker, #settings-menu, #help-button, #copy-path {
-	padding: 4px;
-	/* Rare exception to specifying font sizes in rem. Since these are acting
-	   as icons, it's okay to specify their sizes in pixels. */
-	font-size: 16px;
-	width: 27px;
-	height: 29px;
+	padding: 5px;
+	width: 33px;
 	border: 1px solid;
-	border-radius: 3px;
+	border-radius: 2px;
 	cursor: pointer;
 }
 
 #help-button {
-	right: 30px;
 	font-family: "Fira Sans", Arial, sans-serif;
 	text-align: center;
 	/* Rare exception to specifying font sizes in rem. Since this is acting
 	   as an icon, it's okay to specify their sizes in pixels. */
-	font-size: 16px;
+	font-size: 20px;
 	padding-top: 2px;
 }
 
@@ -1909,10 +1891,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		display: none !important;
 	}
 
-	.theme-picker {
-		z-index: 1;
-	}
-
 	.notable-traits {
 		position: absolute;
 		left: -22px;
@@ -1999,10 +1977,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		width: 100%;
 	}
 
-	.search-container > div {
-		width: calc(100% - 32px);
-	}
-
 	/* Display an alternating layout on tablets and phones */
 	.search-results > a {
 		border-bottom: 1px solid #aaa9;
@@ -2047,30 +2021,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		width: 50%;
 	}
 
-	.search-container > div {
-		display: block;
-		width: calc(100% - 37px);
-	}
-
 	#crate-search {
 		border-radius: 4px;
 		border: 0;
 	}
 
-	#theme-picker, #settings-menu {
-		padding: 5px;
-		width: 31px;
-		height: 31px;
-	}
-
-	#theme-picker {
-		margin-top: -2px;
-	}
-
-	#settings-menu {
-		top: 7px;
-	}
-
 	.docblock {
 		margin-left: 12px;
 	}

diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
@@ -233,22 +233,14 @@ details.undocumented > summary::before {
 	filter: invert(100%);
 }
 
-#crate-search {
-	color: #c5c5c5;
+#crate-search, .search-input {
 	background-color: #141920;
-	box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent;
 	border-color: #424c57;
+	color: #c5c5c5;
 }
 
 .search-input {
 	color: #ffffff;
-	background-color: #141920;
-	box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent;
-	transition: box-shadow 150ms ease-in-out;
-}
-
-#crate-search+.search-input:focus {
-	box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent;
 }
 
 .module-item .stab,

diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
@@ -194,27 +194,20 @@ details.undocumented > summary::before {
 	filter: invert(100%);
 }
 
-#crate-search {
+#crate-search, .search-input {
 	color: #111;
 	background-color: #f0f0f0;
 	border-color: #000;
-	box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
 }
 
 .search-input {
-	color: #111;
-	background-color: #f0f0f0;
-	box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
+	border-color: #e0e0e0;
 }
 
 .search-input:focus {
 	border-color: #008dfd;
 }
 
-#crate-search + .search-input:focus {
-	box-shadow: 0 0 8px 4px #078dd8;
-}
-
 .module-item .stab,
 .import-item .stab {
 	color: #ddd;

diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
@@ -186,27 +186,16 @@ details.undocumented > summary::before {
 	color: #999;
 }
 
-#crate-search {
+#crate-search, .search-input {
 	color: #555;
 	background-color: white;
 	border-color: #e0e0e0;
-	box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
-}
-
-.search-input {
-	color: #555;
-	background-color: white;
-	box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
 }
 
 .search-input:focus {
 	border-color: #66afe9;
 }
 
-#crate-search + .search-input:focus {
-	box-shadow: 0 0 8px #078dd8;
-}
-
 .module-item .stab,
 .import-item .stab {
 	color: #000;

diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
@@ -110,25 +110,23 @@ <h2 class="location"></h2>
                 <nav class="sub"> {#- -#}
                     <div class="theme-picker hidden"> {#- -#}
                         <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
-                            <img width="18" height="18" alt="Pick another theme!" {# -#}
+                            <img width="22" height="22" alt="Pick another theme!" {# -#}
                              src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
                         </button> {#- -#}
                         <div id="theme-choices" role="menu"></div> {#- -#}
                     </div> {#- -#}
                     <form class="search-form"> {#- -#}
                         <div class="search-container"> {#- -#}
-                            <div>
-                                <input {# -#}
-                                    class="search-input" {# -#}
-                                    name="search" {# -#}
-                                    autocomplete="off" {# -#}
-                                    spellcheck="false" {# -#}
-                                    placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
-                                    type="search"> {#- -#}
-                            </div> {#- -#}
+                            <input {# -#}
+                                class="search-input" {# -#}
+                                name="search" {# -#}
+                                autocomplete="off" {# -#}
+                                spellcheck="false" {# -#}
+                                placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
+                                type="search"> {#- -#}
                             <button type="button" id="help-button" title="help">?</button> {#- -#}
                             <a id="settings-menu" href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
-                                <img width="18" height="18" alt="Change settings" {# -#}
+                                <img width="22" height="22" alt="Change settings" {# -#}
                                      src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
                             </a> {#- -#}
                         </div> {#- -#}