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

@@ -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 {

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) {