From e78e073574acb13e76d2ff18868ea59b3fb7fca9 Mon Sep 17 00:00:00 2001
From: Tomochin <tomochin@sugoimusic.me>
Date: Tue, 27 Oct 2020 20:14:03 +0700
Subject: [PATCH] Sugoi Caticons

* Decent looking caticons that reflect all the categories
* Added in CSS and also added cats_col to artist.php
* Larger caticons in details.php
---
 static/styles/global.css      |  8 ++++----
 static/styles/sugoi/style.css | 34 +++++++++++++++++++++-------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/static/styles/global.css b/static/styles/global.css
index 97c2ff9..1af1a15 100644
--- a/static/styles/global.css
+++ b/static/styles/global.css
@@ -48,11 +48,11 @@ select {
 }
 
 h2 .group_cat {
-  height: 16px;
-  width: 16px;
   margin: 0 8px;
-  display: inline-block;
-  background-size: 16px 16px;
+}
+
+.group_displayname {
+  width: auto;
 }
 
 code {
diff --git a/static/styles/sugoi/style.css b/static/styles/sugoi/style.css
index dc5d6fc..b5b1c64 100755
--- a/static/styles/sugoi/style.css
+++ b/static/styles/sugoi/style.css
@@ -5,11 +5,19 @@
 }
 
 /* We're going to opt for the category icon method for now, tags_* is also available */
-.cats_anime { width: 28px; height: 28px; background: url('images/anime.png') no-repeat center center; }
-.cats_movies { width: 28px; height: 28px; background: url('images/movies.png') no-repeat center center; }
-.cats_manga { width: 28px; height: 28px; background: url('images/manga.png') no-repeat center center; }
-.cats_games { width: 28px; height: 28px; background: url('images/games.png') no-repeat center center; }
-.cats_other { width: 28px; height: 28px; background: url('images/other.png') no-repeat center center; }
+.cats_album { width: 48px; height: 48px; background: url('/static/common/caticons/album.png') no-repeat center center/contain; }
+.cats_single { width: 48px; height: 48px; background: url('/static/common/caticons/single.png') no-repeat center center/contain; }
+.cats_ep { width: 48px; height: 48px; background: url('/static/common/caticons/ep.png') no-repeat center center/contain; }
+.cats_bluray { width: 48px; height: 48px; background: url('/static/common/caticons/bluray.png') no-repeat center center/contain; }
+.cats_dvd { width: 48px; height: 48px; background: url('/static/common/caticons/dvd.png') no-repeat center center/contain; }
+.cats_tvmusic { width: 48px; height: 48px; background: url('/static/common/caticons/tvmusic.png') no-repeat center center/contain; }
+.cats_tvvariety { width: 48px; height: 48px; background: url('/static/common/caticons/tvvariety.png') no-repeat center center/contain; }
+.cats_tvdrama { width: 48px; height: 48px; background: url('/static/common/caticons/tvdrama.png') no-repeat center center/contain; }
+.cats_musicperformance { width: 48px; height: 48px; background: url('/static/common/caticons/musicperformance.png') no-repeat center center/contain; }
+.cats_pv { width: 48px; height: 48px; background: url('/static/common/caticons/pv.png') no-repeat center center/contain; }
+.cats_pictures { width: 48px; height: 48px; background: url('/static/common/caticons/pictures.png') no-repeat center center/contain; }
+.cats_misc { width: 48px; height: 48px; background: url('/static/common/caticons/misc.png') no-repeat center center/contain; }
+
 /* Global */
 * {
   padding: 0em;
@@ -861,14 +869,14 @@ css block is needed for .rowlight and .rowdark*/
 .last_read {margin-left: 5px; fill: #222f68;}
 .colhead_dark .last_read {fill: #4d73ff;}
 
-.unread_locked_sticky{background: url(images/locked_sticky_unread.png) no-repeat center center;}
-.read_locked_sticky{background: url(images/locked_sticky_read.png) no-repeat center center;}
-.read_sticky{background: url(images/sticky_read.png) no-repeat center center;}
-.unread_sticky{background: url(images/sticky_unread.png) no-repeat center center;}
-.unread_locked{background: url(images/locked_unread.png) no-repeat center center;}
-.read_locked{background: url(images/locked_read.png) no-repeat center center;}
-.unread{background: url(images/unread.png) no-repeat center center;}
-.read{background: url(images/read.png) no-repeat center center;}
+.unread_locked_sticky{background: url(/static/common/caticons/locked_sticky_unread.png) no-repeat center center;}
+.read_locked_sticky{background: url(/static/common/caticons/locked_sticky_read.png) no-repeat center center;}
+.read_sticky{background: url(/static/common/caticons/sticky_read.png) no-repeat center center;}
+.unread_sticky{background: url(/static/common/caticons/sticky_unread.png) no-repeat center center;}
+.unread_locked{background: url(/static/common/caticons/locked_unread.png) no-repeat center center;}
+.read_locked{background: url(/static/common/caticons/locked_read.png) no-repeat center center;}
+.unread{background: url(/static/common/caticons/unread.png) no-repeat center center;}
+.read{background: url(/static/common/caticons/read.png) no-repeat center center;}
 strong.quoteheader {color: #000;}
 
 tr.row:nth-of-type(odd) {