malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Restore showcase color placeholders

Browse Source 
This time without edge bleeding. Hopefully.
This commit is contained in:
Tetrakern 2024-11-06 20:58:02 +01:00
parent eae739f074
commit 4701fe9a28
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

12
src/scss/_showcase.scss
View File

@ -43,6 +43,18 @@
max-width: max(420px, 100%); max-width: max(420px, 100%);
contain: layout paint style; // Improve performance contain: layout paint style; // Improve performance
// Backgrounds cause an edge bleed due to anti-aliasing,
// so we need to get creative with the placeholder.
&::before {
content: '';
position: absolute;
inset: .5px;
z-index: -1;
display: block;
background: var(--showcase-cover-placeholder, var(--placeholder-background));
border-radius: var(--layout-border-radius-small);
}
&:where(:not(._aspect-ratio)) { &:where(:not(._aspect-ratio)) {
height: var(--showcase-item-height, max(64px, #{get_clamp(64, 96, 375, 768)})); height: var(--showcase-item-height, max(64px, #{get_clamp(64, 96, 375, 768)}));
} }