From 09a3288a842cae8400a0ce6a5207391aa264df1a Mon Sep 17 00:00:00 2001 From: Tomochin Date: Sat, 14 Nov 2020 01:47:25 +0700 Subject: [PATCH] Normalise caticons * Use smaller badges where appropriate * Redice padding for cats_col * Use larger caticon for the details pages * Centre cat icon div within cats_col * Keep the column as tight as possible by setting a low width --- static/styles/sugoi/style.css | 44 +++++++++++++++++++++++++++++++------------ 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/static/styles/sugoi/style.css b/static/styles/sugoi/style.css index b5b1c64..540d41e 100755 --- a/static/styles/sugoi/style.css +++ b/static/styles/sugoi/style.css @@ -5,18 +5,38 @@ } /* We're going to opt for the category icon method for now, tags_* is also available */ -.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; } + +/* margin: 0 auto ensures the caticons are always centered so the layout looks more ordered */ +.cats_album { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/album.png') no-repeat center center/contain; } +.cats_single { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/single.png') no-repeat center center/contain; } +.cats_ep { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/ep.png') no-repeat center center/contain; } +.cats_bluray { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/bluray.png') no-repeat center center/contain; } +.cats_dvd { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/dvd.png') no-repeat center center/contain; } +.cats_tvmusic { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvmusic.png') no-repeat center center/contain; } +.cats_tvvariety { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvvariety.png') no-repeat center center/contain; } +.cats_tvdrama { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvdrama.png') no-repeat center center/contain; } +.cats_musicperformance { margin: 0 auto; width: 48px; height: 48pxx; background: url('/static/common/caticons/musicperformance.png') no-repeat center center/contain; } +.cats_pv { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/pv.png') no-repeat center center/contain; } +.cats_pictures { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/pictures.png') no-repeat center center/contain; } +.cats_misc { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/misc.png') no-repeat center center/contain; } + +.cats_col .cats_album { width: 42px; height: 42px; } +.cats_col .cats_single { width: 42px; height: 42px; } +.cats_col .cats_ep { width: 42px; height: 42px; } +.cats_col .cats_bluray { width: 38px; height: 38px; } +.cats_col .cats_dvd { width: 38px; height: 38px; } +.cats_col .cats_tvmusic { width: 32px; height: 32px; } +.cats_col .cats_tvvariety { width: 32px; height: 32px; } +.cats_col .cats_tvdrama { width: 32px; height: 32px; } +.cats_col .cats_musicperformance { width: 32px; height: 32px; } +.cats_col .cats_pv { width: 32px; height: 32px; } +.cats_col .cats_pictures { width: 32px; height: 32px; } +.cats_col .cats_misc { width: 38px; height: 38px; } + +.cats_col { + padding: 3px; + width: 32px; /* Ensures that the column is always as tight as possible */ +} /* Global */ * {