Skip to content

Commit f0525da

Browse files
GuillaumeGomezGuillaumeGomez
committed
Unify search input and buttons size
1 parent cbaeec1 commit f0525da

File tree

5 files changed

+33
-106
lines changed

5 files changed

+33
-106
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

Lines changed: 19 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -873,11 +873,11 @@ h2.small-section-header > .anchor {
873873

874874
.search-container {
875875
position: relative;
876-
max-width: 960px;
876+
display: flex;
877+
height: 34px;
877878
}
878-
.search-container > div {
879-
display: inline-flex;
880-
width: calc(100% - 63px);
879+
.search-container > * {
880+
height: 100%;
881881
}
882882
.search-results-title {
883883
display: inline;
@@ -908,10 +908,8 @@ h2.small-section-header > .anchor {
908908
background-position: calc(100% - 1px) 56%;
909909
background-image: /* AUTOREPLACE: */url("down-arrow.svg");
910910
}
911-
.search-container > .top-button {
912-
position: absolute;
913-
right: 0;
914-
top: 10px;
911+
.search-container {
912+
margin-top: 4px;
915913
}
916914
.search-input {
917915
/* Override Normalize.css: it has a rule that sets
@@ -924,23 +922,14 @@ h2.small-section-header > .anchor {
924922
-moz-box-sizing: border-box !important;
925923
box-sizing: border-box !important;
926924
outline: none;
927-
border: none;
928-
border-radius: 1px;
929-
margin-top: 5px;
930-
padding: 10px 16px;
925+
border: 1px solid;
926+
border-radius: 2px;
927+
padding: 5px 8px;
931928
font-size: 1.0625rem;
932929
transition: border-color 300ms ease;
933-
transition: border-radius 300ms ease-in-out;
934-
transition: box-shadow 300ms ease-in-out;
935930
width: 100%;
936931
}
937932

938-
.search-input:focus {
939-
border-radius: 2px;
940-
border: 0;
941-
outline: 0;
942-
}
943-
944933
.search-results {
945934
display: none;
946935
padding-bottom: 2em;
@@ -1414,43 +1403,36 @@ pre.rust {
14141403

14151404
.theme-picker {
14161405
position: absolute;
1417-
left: -34px;
1418-
top: 9px;
1406+
left: -38px;
1407+
top: 4px;
14191408
}
14201409

14211410
.theme-picker button {
14221411
outline: none;
14231412
}
14241413

14251414
#settings-menu, #help-button {
1426-
position: absolute;
1427-
top: 10px;
1428-
}
1429-
1430-
#settings-menu {
1431-
right: 0;
1415+
margin-left: 4px;
14321416
outline: none;
14331417
}
14341418

1419+
#theme-picker, #copy-path {
1420+
height: 34px;
1421+
}
14351422
#theme-picker, #settings-menu, #help-button, #copy-path {
1436-
padding: 4px;
1437-
/* Rare exception to specifying font sizes in rem. Since these are acting
1438-
as icons, it's okay to specify their sizes in pixels. */
1439-
font-size: 16px;
1440-
width: 27px;
1441-
height: 29px;
1423+
padding: 5px;
1424+
width: 33px;
14421425
border: 1px solid;
1443-
border-radius: 3px;
1426+
border-radius: 2px;
14441427
cursor: pointer;
14451428
}
14461429

14471430
#help-button {
1448-
right: 30px;
14491431
font-family: "Fira Sans", Arial, sans-serif;
14501432
text-align: center;
14511433
/* Rare exception to specifying font sizes in rem. Since this is acting
14521434
as an icon, it's okay to specify their sizes in pixels. */
1453-
font-size: 16px;
1435+
font-size: 20px;
14541436
padding-top: 2px;
14551437
}
14561438

@@ -1887,10 +1869,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
18871869
display: none !important;
18881870
}
18891871

1890-
.theme-picker {
1891-
z-index: 1;
1892-
}
1893-
18941872
.notable-traits {
18951873
position: absolute;
18961874
left: -22px;
@@ -1977,10 +1955,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
19771955
width: 100%;
19781956
}
19791957

1980-
.search-container > div {
1981-
width: calc(100% - 32px);
1982-
}
1983-
19841958
/* Display an alternating layout on tablets and phones */
19851959
.search-results > a {
19861960
border-bottom: 1px solid #aaa9;
@@ -2025,30 +1999,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
20251999
width: 50%;
20262000
}
20272001

2028-
.search-container > div {
2029-
display: block;
2030-
width: calc(100% - 37px);
2031-
}
2032-
20332002
#crate-search {
20342003
border-radius: 4px;
20352004
border: 0;
20362005
}
20372006

2038-
#theme-picker, #settings-menu {
2039-
padding: 5px;
2040-
width: 31px;
2041-
height: 31px;
2042-
}
2043-
2044-
#theme-picker {
2045-
margin-top: -2px;
2046-
}
2047-
2048-
#settings-menu {
2049-
top: 7px;
2050-
}
2051-
20522007
.docblock {
20532008
margin-left: 12px;
20542009
}

‎src/librustdoc/html/static/css/themes/ayu.css

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -233,22 +233,14 @@ details.undocumented > summary::before {
233233
filter: invert(100%);
234234
}
235235

236-
#crate-search {
237-
color: #c5c5c5;
236+
#crate-search, .search-input {
238237
background-color: #141920;
239-
box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent;
240238
border-color: #424c57;
239+
color: #c5c5c5;
241240
}
242241

243242
.search-input {
244243
color: #ffffff;
245-
background-color: #141920;
246-
box-shadow: 0 0 0 1px #424c57,0 0 0 2px transparent;
247-
transition: box-shadow 150ms ease-in-out;
248-
}
249-
250-
#crate-search+.search-input:focus {
251-
box-shadow: 0 0 0 1px #148099,0 0 0 2px transparent;
252244
}
253245

254246
.module-item .stab,

‎src/librustdoc/html/static/css/themes/dark.css

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -194,27 +194,20 @@ details.undocumented > summary::before {
194194
filter: invert(100%);
195195
}
196196

197-
#crate-search {
197+
#crate-search, .search-input {
198198
color: #111;
199199
background-color: #f0f0f0;
200200
border-color: #000;
201-
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
202201
}
203202

204203
.search-input {
205-
color: #111;
206-
background-color: #f0f0f0;
207-
box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
204+
border-color: #e0e0e0;
208205
}
209206

210207
.search-input:focus {
211208
border-color: #008dfd;
212209
}
213210

214-
#crate-search + .search-input:focus {
215-
box-shadow: 0 0 8px 4px #078dd8;
216-
}
217-
218211
.module-item .stab,
219212
.import-item .stab {
220213
color: #ddd;

‎src/librustdoc/html/static/css/themes/light.css

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -186,27 +186,16 @@ details.undocumented > summary::before {
186186
color: #999;
187187
}
188188

189-
#crate-search {
189+
#crate-search, .search-input {
190190
color: #555;
191191
background-color: white;
192192
border-color: #e0e0e0;
193-
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
194-
}
195-
196-
.search-input {
197-
color: #555;
198-
background-color: white;
199-
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
200193
}
201194

202195
.search-input:focus {
203196
border-color: #66afe9;
204197
}
205198

206-
#crate-search + .search-input:focus {
207-
box-shadow: 0 0 8px #078dd8;
208-
}
209-
210199
.module-item .stab,
211200
.import-item .stab {
212201
color: #000;

‎src/librustdoc/html/templates/page.html

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -110,25 +110,23 @@ <h2 class="location"></h2>
110110
<nav class="sub"> {#- -#}
111111
<div class="theme-picker hidden"> {#- -#}
112112
<button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
113-
<img width="18" height="18" alt="Pick another theme!" {# -#}
113+
<img width="22" height="22" alt="Pick another theme!" {# -#}
114114
src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
115115
</button> {#- -#}
116116
<div id="theme-choices" role="menu"></div> {#- -#}
117117
</div> {#- -#}
118118
<form class="search-form"> {#- -#}
119119
<div class="search-container"> {#- -#}
120-
<div>
121-
<input {# -#}
122-
class="search-input" {# -#}
123-
name="search" {# -#}
124-
autocomplete="off" {# -#}
125-
spellcheck="false" {# -#}
126-
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
127-
type="search"> {#- -#}
128-
</div> {#- -#}
120+
<input {# -#}
121+
class="search-input" {# -#}
122+
name="search" {# -#}
123+
autocomplete="off" {# -#}
124+
spellcheck="false" {# -#}
125+
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
126+
type="search"> {#- -#}
129127
<button type="button" id="help-button" title="help">?</button> {#- -#}
130128
<a id="settings-menu" href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
131-
<img width="18" height="18" alt="Change settings" {# -#}
129+
<img width="22" height="22" alt="Change settings" {# -#}
132130
src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
133131
</a> {#- -#}
134132
</div> {#- -#}

0 commit comments

Comments
 (0)