Unify UI between code block buttons and top buttons

GuillaumeGomez · GuillaumeGomez · commit 26d72512e0c7 · 2024-07-18T14:16:29.000+02:00
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -32,6 +32,8 @@ xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
 xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 <g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"></path>\
 </g></svg>');
+	--button-left-margin: 4px;
+	--button-border-radius: 2px;
 }
 
 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -740,6 +742,11 @@ ul.block, .block li {
 	position: relative;
 	margin-bottom: 10px;
 }
+
+.rustdoc .example-wrap > pre {
+	border-radius: 6px;
+}
+
 /* For the last child of a div, the margin will be taken care of
 	by the margin-top of the next item. */
 .rustdoc .example-wrap:last-child {
@@ -1442,13 +1449,13 @@ documentation. */
 .example-wrap > a.test-arrow, .example-wrap .button-holder {
 	visibility: hidden;
 	position: absolute;
-	top: 5px;
-	right: 5px;
+	top: 4px;
+	right: 4px;
 	z-index: 1;
 }
 a.test-arrow {
 	padding: 5px 7px;
-	border-radius: 5px;
+	border-radius: var(--button-border-radius);
 	font-size: 1rem;
 	color: var(--test-arrow-color);
 	background-color: var(--test-arrow-background-color);
@@ -1471,11 +1478,11 @@ a.test-arrow:hover {
 	background: var(--main-background-color);
 	height: var(--copy-path-height);
 	width: var(--copy-path-width);
-	margin-left: 5px;
+	margin-left: var(--button-left-margin);
 	padding: 2px 0 0 4px;
 	border: 0;
 	cursor: pointer;
-	border-radius: 5px;
+	border-radius: var(--button-border-radius);
 }
 .example-wrap .button-holder .copy-button::before {
 	filter: var(--copy-path-img-filter);
@@ -1652,7 +1659,7 @@ a.tooltip:hover::after {
 }
 
 #settings-menu, #help-button {
-	margin-left: 4px;
+	margin-left: var(--button-left-margin);
 	display: flex;
 }
 #sidebar-button {
@@ -1683,7 +1690,7 @@ a.tooltip:hover::after {
 	justify-content: center;
 	background-color: var(--button-background-color);
 	border: 1px solid var(--border-color);
-	border-radius: 2px;
+	border-radius: var(--button-border-radius);
 	color: var(--settings-button-color);
 	/* Rare exception to specifying font sizes in rem. Since this is acting
 	   as an icon, it's okay to specify their sizes in pixels. */
diff --git a/tests/rustdoc-gui/run-on-hover.goml b/tests/rustdoc-gui/run-on-hover.goml
@@ -18,15 +18,15 @@ define-function: (
             "color": |color|,
             "background-color": |background|,
             "font-size": "16px",
-            "border-radius": "5px",
+            "border-radius": "2px",
         })
         move-cursor-to: ".test-arrow"
         assert-css: (".test-arrow:hover", {
             "visibility": "visible",
             "color": |hover_color|,
             "background-color": |hover_background|,
             "font-size": "16px",
-            "border-radius": "5px",
+            "border-radius": "2px",
         })
     },
 )
