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 ?? [];
?>
foreach($artworks as $artwork){ ?>
- - EbookUrl !== null){ ?> class="in-use" } ?>>
+
+ $class = '';
+
+ if($artwork->EbookUrl !== null){
+ $class .= ' in-use';
+ }
+
+ switch($artwork->Status){
+ case ArtworkStatus::Unverified:
+ $class .= ' unverified';
+ break;
+
+ case ArtworkStatus::Declined:
+ $class .= ' declined';
+ break;
+ }
+
+ $class = trim($class);
+ ?>
+
- 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){