standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-22 15:24:46 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add status ribbons to artworks in artworks DB

Browse source
This commit is contained in:
Alex Cabal 2024-03-25 16:07:48 -05:00
parent 43d7b1f6e5
commit 74e672ba89
2 changed files with 104 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

86
www/css/artwork.css
View file

@ -34,17 +34,99 @@ ol.artwork-list > li{
margin: 0;
}
ol.artwork-list > li.in-use{
ol.artwork-list > li.in-use,
ol.artwork-list > li.unverified,
ol.artwork-list > li.declined{
position: relative;
}
ol.artwork-list > li.in-use::before{
ol.artwork-list > li.in-use picture::before{
/* Stripes */
position: absolute;
content: "";
height: 100%;
width: 100%;
background-image: url("/images/stripes-xdark.svg");
pointer-events: none;
z-index: 0;
}
ol.artwork-list > li.in-use::before,
ol.artwork-list > li.unverified::before,
ol.artwork-list > li.declined::before,
ol.artwork-list > li.in-use a::before,
ol.artwork-list > li.unverified a::before,
ol.artwork-list > li.declined a::before{
/* Ribbon */
font-family: "League Spartan", sans-serif;
position: absolute;
left: -.5rem;
top: .5rem;
padding: .5rem 1rem .5rem .5rem;
line-height: 1;
color: #ffffff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
text-transform: uppercase;
font-size: .5rem;
white-space: nowrap;
font-weight: bold;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
z-index: 2;
}
ol.artwork-list > li.in-use::after,
ol.artwork-list > li.unverified::after,
ol.artwork-list > li.declined::after{
/* Ribbon bottom wrap-around */
content: "";
position: absolute;
top: calc(.5rem + .5rem + .5rem + .5rem);
height: .5rem;
width: .5rem;
left: -.5rem;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
z-index: 1;
filter: brightness(50%);
}
ol.artwork-list > li.in-use a::before,
ol.artwork-list > li.unverified a::before,
ol.artwork-list > li.declined a::before{
/* Ribbon shadow */
left: calc(-.5rem + 2px);
top: calc(.5rem + 2px);
background: rgba(0, 0, 0, .4);
z-index: auto;
}
ol.artwork-list > li.in-use::before,
ol.artwork-list > li.in-use::after{
background: #424242;
}
ol.artwork-list > li.in-use::before,
ol.artwork-list > li.in-use a::before{
content: "In use";
}
ol.artwork-list > li.declined::before,
ol.artwork-list > li.declined::after{
background: #861d1d;
}
ol.artwork-list > li.declined::before,
ol.artwork-list > li.declined a::before{
content: "Declined";
}
ol.artwork-list > li.unverified::before,
ol.artwork-list > li.unverified::after{
background: #383760;
}
ol.artwork-list > li.unverified::before,
ol.artwork-list > li.unverified a::before{
content: "unverified";
}
ol.artwork-list > li a:has(img){