Rollup merge of rust-lang#46938 - hellow554:rustdoc-kbd-style, r=Guil…

…laumeGomez add kbd style tag to main.css in rustdoc Added css style for kbd tags so they actually look like keys. Result preview and discussion was going on in rust-lang#46900 .
GuillaumeGomez · Jan 19, 2018 · 6e9cbac · 6e9cbac
2 parents 10333dd + 0c946c0
commit 6e9cbac
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
@@ -94,20 +94,22 @@ r##"<!DOCTYPE html>
                 <h2>Keyboard Shortcuts</h2>
 
                 <dl>
-                    <dt>?</dt>
+                    <dt><kbd>?</kbd></dt>
                     <dd>Show this help dialog</dd>
-                    <dt>S</dt>
+                    <dt><kbd>S</kbd></dt>
                     <dd>Focus the search field</dd>
-                    <dt>↑</dt>
+                    <dt><kbd>↑</kbd></dt>
                     <dd>Move up in search results</dd>
-                    <dt>↓</dt>
+                    <dt><kbd>↓</kbd></dt>
                     <dd>Move down in search results</dd>
-                    <dt>↹</dt>
+                    <dt><kbd>↹</kbd></dt>
                     <dd>Switch tab</dd>
-                    <dt>&#9166;</dt>
+                    <dt><kbd>&#9166;</kbd></dt>
                     <dd>Go to active search result</dd>
-                    <dt style="width:31px;">+ / -</dt>
-                    <dd>Collapse/expand all sections</dd>
+                    <dt><kbd>+</kbd></dt>
+                    <dd>Expand all sections</dd>
+                    <dt><kbd>-</kbd></dt>
+                    <dd>Collapse all sections</dd>
                 </dl>
             </div>
 

diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
@@ -585,18 +585,13 @@ body.blur > :not(#help) {
 	flex: 0 0 auto;
 	box-shadow: 0 0 6px rgba(0,0,0,.2);
 	width: 550px;
-	height: 354px;
+	height: auto;
 	border: 1px solid;
 }
 #help dt {
 	float: left;
-	border-radius: 4px;
-	border: 1px solid;
-	width: 23px;
-	text-align: center;
 	clear: left;
 	display: block;
-	margin-top: -1px;
 }
 #help dd { margin: 5px 35px; }
 #help .infos { padding-left: 0; }
@@ -1134,3 +1129,14 @@ h3.important {
 	left: -42px;
 	margin-top: 2px;
 }
+
+kbd {
+	display: inline-block;
+	padding: 3px 5px;
+	font: 15px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	line-height: 10px;
+	vertical-align: middle;
+	border: solid 1px;
+	border-radius: 3px;
+	box-shadow: inset 0 -1px 0;
+}
diff --git a/src/librustdoc/html/static/styles/main.css b/src/librustdoc/html/static/styles/main.css
@@ -194,11 +194,6 @@ a.test-arrow {
 	border-color: #bfbfbf;
 }
 
-#help dt {
-	border-color: #bfbfbf;
-	background: #fff;
-}
-
 .since {
 	color: grey;
 }
@@ -348,3 +343,11 @@ pre.ignore:hover, .information:hover + pre.ignore {
 		border-bottom-color: #e0e0e0;
 	}
 }
+
+kbd {
+	color: #444d56;
+	background-color: #fafbfc;
+	border-color: #d1d5da;
+	border-bottom-color: #c6cbd1;
+	box-shadow-color: #c6cbd1;
+}