diff --git a/templates/ArtworkList.php b/templates/ArtworkList.php index 18462ea2..af24cc04 100644 --- a/templates/ArtworkList.php +++ b/templates/ArtworkList.php @@ -3,7 +3,26 @@ $artworks = $artworks ?? []; ?>
    - EbookUrl !== null){ ?> class="in-use"> + EbookUrl !== null){ + $class .= ' in-use'; + } + + switch($artwork->Status){ + case ArtworkStatus::Unverified: + $class .= ' unverified'; + break; + + case ArtworkStatus::Declined: + $class .= ' declined'; + break; + } + + $class = trim($class); + ?> + class=""> diff --git a/www/css/artwork.css b/www/css/artwork.css index 5a3ec29f..986d05e6 100644 --- a/www/css/artwork.css +++ b/www/css/artwork.css @@ -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){