Sugoimusic
/
Frontend
2
0
Fork 1
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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
undefined
Tomochin 3 years ago
parent
e78e073574
commit
61eaa7e80b
1 changed files with 32 additions and 12 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +32
    -12
      static/styles/sugoi/style.css

+ 32
- 12
static/styles/sugoi/style.css View File

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


Write Preview
Loading…
Cancel
Save