Unify UI between code block buttons and top buttons

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

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">\
<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. */

View File

@ -18,7 +18,7 @@ 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", {
@ -26,7 +26,7 @@ define-function: (
"color": |hover_color|,
"background-color": |hover_background|,
"font-size": "16px",
"border-radius": "5px",
"border-radius": "2px",
})
},
)