Fix scraped examples background gradient

This commit is contained in:
Guillaume Gomez 2024-09-01 23:59:46 +02:00
parent 5a85632623
commit 01d8235ae1
2 changed files with 21 additions and 2 deletions

View file

@ -2282,8 +2282,13 @@ in src-script.js and main.js
.example-wrap.scraped-example .button-holder {
top: calc(var(--pre-line-height) + 4px);
}
.scraped-example:not(.expanded)::before {
/* The gradient effect needs to be moved under the title */
top: var(--pre-line-height);
}
}
/* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
@media (min-width: 701px) {
/* Places file-link for a scraped example on top of the example to save space.
@ -2305,6 +2310,12 @@ in src-script.js and main.js
.item-table > li > div {
overflow-wrap: anywhere;
}
/* Starting this width, the "title" of scraped example will be in the code block so we can
put the background gradient at the top. */
.scraped-example:not(.expanded)::before {
top: 0;
}
}
@media print {
@ -2395,7 +2406,6 @@ in src-script.js and main.js
z-index: 1;
}
.scraped-example:not(.expanded)::before {
top: 0;
background: linear-gradient(to bottom,
var(--scrape-example-code-wrapper-background-start),
var(--scrape-example-code-wrapper-background-end));