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

Optimize card info box mask for tag pills

Browse Source
This commit is contained in:
Tetrakern 2024-08-24 01:42:49 +02:00
parent 95a4172159
commit fabceeb2a9
3 changed files with 9 additions and 4 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

9
src/scss/_card.scss
View File

@ -571,12 +571,17 @@
}
> :first-child {
--this-mask-offset: 1em;
padding: 0;
margin: 0.625em;
height: 100%;
overflow: hidden;
mask: linear-gradient(180deg, black calc(100% - 1.5em), rgb(0 0 0 / 50%) calc(100% - 1em), transparent 100%) top;
-webkit-mask: linear-gradient(180deg, black calc(100% - 1.5em), rgb(0 0 0 / 50%) calc(100% - 1em), transparent 100%) top;
-webkit-mask: linear-gradient(180deg, black calc(100% - 0.5em - var(--this-mask-offset)), rgb(0 0 0 / 50%) calc(100% - var(--this-mask-offset)), transparent 100%) top;
mask: linear-gradient(180deg, black calc(100% - 0.5em - var(--this-mask-offset)), rgb(0 0 0 / 50%) calc(100% - var(--this-mask-offset)), transparent 100%) top;
&._pills {
--this-mask-offset: 0px;
}
}
.card__footer {