mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Unify UI between code block buttons and top buttons

Browse Source
This commit is contained in:
Guillaume Gomez 2024-06-03 21:27:29 +02:00
parent 578810b4d2
commit 26d72512e0
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/librustdoc/html/static/css/rustdoc.css
View File

@ -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">\ 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><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>'); </g></svg>');
--button-left-margin: 4px;
--button-border-radius: 2px;
} }
/* See FiraSans-LICENSE.txt for the Fira Sans license. */ /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@ -740,6 +742,11 @@ ul.block, .block li {
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
} }
.rustdoc .example-wrap > pre {
border-radius: 6px;
}
/* For the last child of a div, the margin will be taken care of /* For the last child of a div, the margin will be taken care of
by the margin-top of the next item. */ by the margin-top of the next item. */
.rustdoc .example-wrap:last-child { .rustdoc .example-wrap:last-child {
@ -1442,13 +1449,13 @@ documentation. */
.example-wrap > a.test-arrow, .example-wrap .button-holder { .example-wrap > a.test-arrow, .example-wrap .button-holder {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
top: 5px; top: 4px;
right: 5px; right: 4px;
z-index: 1; z-index: 1;
} }
a.test-arrow { a.test-arrow {
padding: 5px 7px; padding: 5px 7px;
border-radius: 5px; border-radius: var(--button-border-radius);
font-size: 1rem; font-size: 1rem;
color: var(--test-arrow-color); color: var(--test-arrow-color);
background-color: var(--test-arrow-background-color); background-color: var(--test-arrow-background-color);
@ -1471,11 +1478,11 @@ a.test-arrow:hover {
background: var(--main-background-color); background: var(--main-background-color);
height: var(--copy-path-height); height: var(--copy-path-height);
width: var(--copy-path-width); width: var(--copy-path-width);
margin-left: 5px; margin-left: var(--button-left-margin);
padding: 2px 0 0 4px; padding: 2px 0 0 4px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: var(--button-border-radius);
} }
.example-wrap .button-holder .copy-button::before { .example-wrap .button-holder .copy-button::before {
filter: var(--copy-path-img-filter); filter: var(--copy-path-img-filter);
@ -1652,7 +1659,7 @@ a.tooltip:hover::after {
} }
#settings-menu, #help-button { #settings-menu, #help-button {
margin-left: 4px; margin-left: var(--button-left-margin);
display: flex; display: flex;
} }
#sidebar-button { #sidebar-button {
@ -1683,7 +1690,7 @@ a.tooltip:hover::after {
justify-content: center; justify-content: center;
background-color: var(--button-background-color); background-color: var(--button-background-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 2px; border-radius: var(--button-border-radius);
color: var(--settings-button-color); color: var(--settings-button-color);
/* Rare exception to specifying font sizes in rem. Since this is acting /* Rare exception to specifying font sizes in rem. Since this is acting
as an icon, it's okay to specify their sizes in pixels. */ as an icon, it's okay to specify their sizes in pixels. */

4
tests/rustdoc-gui/run-on-hover.goml
View File

@ -18,7 +18,7 @@ define-function: (
"color": |color|, "color": |color|,
"background-color": |background|, "background-color": |background|,
"font-size": "16px", "font-size": "16px",
"border-radius": "5px", "border-radius": "2px",
}) })
move-cursor-to: ".test-arrow" move-cursor-to: ".test-arrow"
assert-css: (".test-arrow:hover", { assert-css: (".test-arrow:hover", {
@ -26,7 +26,7 @@ define-function: (
"color": |hover_color|, "color": |hover_color|,
"background-color": |hover_background|, "background-color": |hover_background|,
"font-size": "16px", "font-size": "16px",
"border-radius": "5px", "border-radius": "2px",
}) })
}, },
) )