Fix scraped examples background gradient
This commit is contained in:
parent
5a85632623
commit
01d8235ae1
2 changed files with 21 additions and 2 deletions
|
|
@ -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));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue