Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @char "UTF-8";
- /*----------------------------------------------------------------------------*\
- Cardstock v1.8 by adustyspectacle
- A compact, minimal, cover theme.
- CHANGELOG
- v1.8 (28 JAN 2016)
- * changed styles because of the Anilist update, mostly the navigation
- v1.7 (20 JAN 2016)
- * styled notification highlight
- v1.6 (08 JAN 2016)
- * added mobile-specific css
- v1.5 (02 JAN 2016)
- * integrated changes from the Dark Sun style to the Pale Moon style
- v1.4 (16 OCT 2015)
- * styled list header thing
- v1.3 (09 OCT 2015)
- * cleaned up the CSS, organising it and stuff
- * added customisation area at the end
- v1.2 (07 OCT 2015)
- * added rewatch note thing
- * added custom ordering of lists
- * made manga list compatible
- v1.1 (05 OCT 2015)
- * added airing indicators
- * added thead so lists are sortable
- v1.0 (03 OCT 2015)
- * initial release
- \*----------------------------------------------------------------------------*/
- {ANILIST-POPUP}
- {ANILIST-COVERS=LRG}
- @import url("https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic");
- @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
- body {
- font-family: "Arimo", sans-serif;
- background-color: #e9e6e3;
- color: black;
- }
- #view::after {
- display: none;
- }
- #lists {
- display: flex;
- flex-direction: column;
- font-size: 12pt;
- }
- #lists::after {
- content: "Cardstock theme by adustyspectacle";
- text-align: center;
- opacity: 0.5;
- display: block;
- margin: 2em 0 4em;
- order: 99;
- }
- .sml_col { width: auto; }
- .list, .list_wrapper .list {
- box-shadow: none;
- background: none;
- text-align: center;
- }
- /*----------------------------------------------------------------------------*\
- NAVIGATION
- \*----------------------------------------------------------------------------*/
- .nav {
- background: white;
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- color: #075e92;
- }
- .nav__links a {
- padding: 0.25em;
- height: auto;
- }
- .nav__links a:hover,
- .nav__sml:hover {
- background: #075e92;
- color: white;
- }
- .nav__links div {
- color: inherit;
- padding: 0;
- }
- .nav__links a:hover div {
- display: block;
- color: inherit;
- }
- .nav__sml {
- background: none;
- }
- /*----------------------------------------------------------------------------*\
- NOTIFICATIONS
- \*----------------------------------------------------------------------------*/
- .nav__notifications {
- border: 0;
- background: none;
- padding: 0;
- font-size: 1em;
- color: inherit;
- }
- .nav__notifications div {
- padding: 0.2em;
- }
- .nav__notifications div:hover {
- color: white;
- background: #075e92;
- }
- .nav__notifications i {
- font-size: 1em;
- }
- .nav__notifications .nav__notifications--unread {
- color: inherit;
- text-shadow: none;
- }
- .nav__notifications .nav__notifications--unread:hover {
- color: white;
- text-shadow: none;
- }
- .notifications--visible {
- outline: 0;
- }
- .notifications {
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- overflow-y: scroll;
- overflow-x: auto;
- background: rgba(255,255,255,0.9);
- }
- .noti {
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- color: black;
- }
- .noti:nth-of-type(2n) {
- background: none;
- }
- .noti--unread {
- background: rgba(0,0,0,0.25);
- color: inherit;
- }
- .noti__link b,
- .noti__link:hover {
- color: #075e92;
- }
- .noti time-ago {
- position: static;
- bottom: 0;
- right: 0;
- display: block;
- text-align: right;
- margin-top: 0.5em;
- opacity: 0.5;
- }
- /*----------------------------------------------------------------------------*\
- LIST NAV HEADER
- \*----------------------------------------------------------------------------*/
- #list_header {
- background: rgba(255,255,255,0.9);
- border-radius: 0;
- padding: 0;
- height: auto;
- min-width: auto;
- display: inline-block;
- font-size: 12px;
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- }
- #list_header .img_crop {
- float: none;
- height: 3em;
- width: 3em;
- margin: 0;
- border-radius: 0;
- vertical-align: middle;
- display: inline-block;
- }
- #list_header .display_name {
- font-size: 1em;
- font-style: italic;
- }
- #list_header a {
- display: inline-block;
- vertical-align: middle;
- margin: 0;
- padding: 1em 0.5em;
- font-size: 1em;
- }
- #list_header a {
- color: black;
- }
- #list_header a:hover {
- background: #075e92;
- color: white;
- }
- #list_header #filter {
- min-width: 10em;
- max-width: 12.5em;
- padding: 1em;
- margin: 0;
- border-radius: 0;
- vertical-align: middle;
- float: right;
- font-size: 1em;
- color: black;
- }
- /*----------------------------------------------------------------------------*\
- LIST ORDER
- \*----------------------------------------------------------------------------*/
- #lists #watching { order: 2; }
- #lists #reading { order: 2; }
- #lists #onhold { order: 4; }
- #lists #completed { order: 6; }
- #lists #dropped { order: 8; }
- #lists #plantowatch { order: 10; }
- #lists #plantoread { order: 10; }
- /*----------------------------------------------------------------------------*\
- LIST TITLES
- \*----------------------------------------------------------------------------*/
- #lists h3 {
- font-size: 4em;
- font-weight: bold;
- letter-spacing: -4px;
- text-align: right;
- text-shadow: 1px 1px 1px white;
- text-transform: lowercase;
- color: #075e92;
- margin: 1em 0.25em 0;
- }
- #lists h3::after {
- font-family: "FontAwesome";
- font-size: 1em;
- vertical-align: baseline;
- display: inline-block;
- margin-left: 0.25em;
- }
- /* List Header Icons */
- #lists #watching h3::after { content: "\f008"; }
- #lists #reading h3::after { content: "\f02d"; }
- #lists #onhold h3::after { content: "\f04c"; }
- #lists #completed h3::after { content: "\f00c"; }
- #lists #dropped h3::after { content: "\f00d"; }
- #lists #plantowatch h3::after { content: "\f067"; }
- #lists #plantoread h3::after { content: "\f067"; }
- /*----------------------------------------------------------------------------*\
- SORT BUTTONS
- \*----------------------------------------------------------------------------*/
- thead {
- display: block;
- text-align: right;
- margin-bottom: 2.5em;
- }
- thead tr::before {
- content: "sort by:";
- vertical-align: -0.1em;
- }
- table.list thead tr {
- display: inline-block;
- font-size: 1em;
- background: none;
- }
- thead tr th {
- font-size: 1em;
- text-transform: lowercase;
- display: inline-block;
- padding: 0.25em 0.5em;
- border: 0;
- transition: 0.1s;
- color: #075e92;
- background: none;
- }
- thead tr th:hover {
- color: white;
- background: #075e92;
- text-shadow: none;
- border: 0;
- }
- th.header__type, th.header__status, th.header__vol { display: none; }
- /*----------------------------------------------------------------------------*\
- CARD
- \*----------------------------------------------------------------------------*/
- .rtitle {
- display: inline-block;
- position: relative;
- width: 220px; /* optimum width: 220px */
- height: 320px; /* optimum height: 320px */
- margin: 0.5em 0.5em;
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- background-size: 105% 105%;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- color: #075392;
- }
- .rtitle, .rtitle:last-of-type { border: 0.5em solid white; }
- .row__type, .row__status, .row__vol { display: none; }
- /*----------------------------------------------------------------------------*\
- UPDATE BOX
- \*----------------------------------------------------------------------------*/
- .update {
- text-align: left;
- color: black;
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- }
- /*----------------------------------------------------------------------------*\
- TITLE BOX
- \*----------------------------------------------------------------------------*/
- .row__title {
- display: block;
- padding: 0;
- }
- td.row__title a {
- font-size: 1em;
- font-style: italic;
- text-align: center;
- display: inline-block;
- padding: 0.5em;
- max-width: 80%;
- position: absolute;
- top: -1em;
- left: -1em;
- color: #075e92;
- background: rgba(255,255,255,0.9);
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- }
- td.row__title a:hover {
- color: white;
- background: rgba(7,94,146,0.9);
- }
- /*----------------------------------------------------------------------------*\
- SCORE BOX
- \*----------------------------------------------------------------------------*/
- .row__score {
- display: block;
- position: absolute;
- width: auto;
- bottom: 0;
- right: 0;
- z-index: 2;
- }
- .row__score span {
- font-size: 2em;
- font-weight: bold;
- text-align: center;
- letter-spacing: -1px;
- color: #075e92;
- background: rgba(255,255,255,0.9);
- box-shadow: 0 0 2px rgba(0,0,0,0.5);
- display: block;
- position: absolute;
- padding: 0.25em 0.35em;
- bottom: -0.5em;
- right: -0.5em;
- overflow: hidden;
- }
- /*----------------------------------------------------------------------------*\
- EPISODE/CHAPTER BOX
- \*----------------------------------------------------------------------------*/
- .row__episodes::before { content: "eps:" }
- .row__chap::before { content: "ch:" }
- .row__episodes,
- .row__chap {
- font-size: 0.75em;
- text-align: center;
- background: white;
- display: block;
- position: absolute;
- width: auto;
- padding: 0.5em 1em;
- bottom: -0.65em;
- left: -0.65em;
- }
- .row__episodes .plus,
- .row__chap .plus {
- font-size: 1.5em;
- font-weight: bold;
- color: #075e92;
- vertical-align: -0.1em;
- opacity: 0.5;
- margin-left: 0.15em;
- }
- /*----------------------------------------------------------------------------*\
- NOTES AND REWATCH TAGS
- \*----------------------------------------------------------------------------*/
- .list__tag {
- display: inline-block;
- position: static;
- background: none;
- }
- .list i.material-icons,
- .tag_notes,
- .tag_re {
- font-size: 1.5em;
- font-weight: bold;
- color: rgba(255,255,255,0.95);
- text-shadow: 1px 1px 0px rgba(0,0,0,0.25),
- 0px 0px 1px rgba(0,0,0,0.5);
- position: absolute;
- opacity: 1;
- padding: 0;
- z-index: 2;
- cursor: help;
- top: 0.6em;
- }
- .list i.material-icons {
- font-family: "Material Icons";
- }
- i.fa::before {
- display: none;
- }
- .tag_notes { right: 0.1em; }
- .tag_re { right: 1.1em; }
- .hint--notes,
- .hint--re {
- text-align: center;
- color: #075e92;
- background: rgba(255,255,255,0.9);
- display: none;
- position: absolute;
- width: 100%;
- border-radius: 0;
- }
- .hint--re::before {
- content: "Rewatched"; /* for animelist, reread for mangalist */
- margin-right: 0.2em;
- }
- .hint--re::after {
- content: "time/s";
- margin-left: 0.2em;
- }
- .list__tag:hover .hint--notes,
- .list__tag:hover .hint--re {
- font-size: 1em;
- display: inline-block;
- width: 100%;
- padding: 0.5em 0.25em;
- margin: 0;
- top: 4.5em;
- left: 0;
- }
- /*----------------------------------------------------------------------------*\
- AIRING/PUBLISHING TAGS
- \*----------------------------------------------------------------------------*/
- .tag_airing,
- .tag_notairing {
- display: block;
- position: absolute;
- width: 0.52em;
- height: 2.26em;
- padding: 0;
- margin: 0;
- left: -0.55em;
- bottom: -0.55em;
- opacity: 1;
- overflow: hidden;
- z-index: 1;
- transition: 0.1s;
- text-transform: uppercase;
- letter-spacing: 1px;
- font: inherit;
- }
- .tag_airing {
- color: transparent;
- background: #075e92;
- }
- .tag_notairing {
- color: transparent;
- background: black;
- }
- .tag_airing:hover,
- .tag_notairing:hover {
- position: absolute;
- width: 108%;
- padding: 0.5em;
- opacity: 1;
- overflow: visible;
- background: white;
- color: #075e92;
- vertical-align: middle;
- }
- /*----------------------------------------------------------------------------*\
- CSS FOR SMALLER SCREENS
- \*----------------------------------------------------------------------------*/
- @media only screen and (max-width: 768px) {
- body {
- font-size: 10pt;
- }
- #lists h3 {
- text-align: center;
- font-size: 2.5em;
- letter-spacing: -2px;
- }
- #list_header {
- margin: 0 auto;
- min-width: 50%;
- max-width: 95%;
- left: 0;
- right: 0;
- position: fixed;
- }
- .noti {
- background: rgba(255,255,255,0.95);
- }
- .noti .noti_row:hover {
- background: #075e92;
- color: white;
- }
- .noti .noti_row .noti__link:hover {
- color: white;
- }
- thead {
- text-align: center;
- }
- .rtitle {
- width: 132px; /* width and height 60% of original */
- height: 192px;
- margin: 0.6em 0.25em;
- }
- td.row__title a {
- min-width: 100%;
- max-height: 50%;
- font-size: 0.5em;
- left: 0;
- top: -1.5em;
- }
- .row__score span {
- font-size: 1.5em;
- }
- .row__episodes,
- .row__chap {
- display: none;
- }
- .tag_notes {
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- }
- .tag_re {
- top: auto;
- right: auto;
- bottom: 0;
- left: 1.25em;
- }
- .tag_airing,
- .tag_notairing {
- font-size: 0.5em;
- }
- .navBtn {
- border-radius: 0;
- color: #075e92;
- background: rgba(255,255,255,0.9);
- box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
- opacity: 1;
- }
- }
- /*----------------------------------------------------------------------------*\
- CUSTOMISATION AREA
- Because of CSS's rules of inheritance and such, this area is right in the end
- so you'll be freely be able to override the default styling without editing
- the stuff above.
- I'll add some stuff to get you started, and of course, you're free to play
- around. Just remember to use the specific class/id and not use !important.
- Ever. Seriously.
- Pale Moon Palette
- HEX R G B COLOR NAME
- Light #ffffff 255 255 255 white
- Dark #000000 0 0 0 black
- BG #e9e6e3 233 230 227
- Accent #075e92 7 94 146
- Dark Sun Palette
- HEX R G B COLOR NAME
- Light #ffffff 255 255 255 white
- Dark #222222 34 34 34
- BG #464850 70 72 80
- Accent #f55b2c 245 91 44
- \*----------------------------------------------------------------------------*/
- /*----------------------------------------------------------------------------*\
- DARK SUN STYLE
- A dark version of the default, bright style (Pale Moon)
- \*----------------------------------------------------------------------------*/
- body {
- background-color: #464850;
- color: white;
- }
- #lists h3 {
- text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
- }
- .nav,
- .rtitle,
- .rtitle:last-of-type,
- .row__episodes,
- .row__chap,
- .tag_airing:hover,
- .tag_notairing:hover {
- background-color: #222222;
- border-color: #222222;
- }
- .notifications,
- #list_header,
- td.row__title a,
- .row__score span,
- .hint--notes,
- .hint--re {
- background: rgba(34,34,34,0.9);
- }
- .nav__links a:hover,
- .nav__sml:hover,
- .nav__notifications div:hover,
- #list_header a:hover,
- .tag_airing {
- background: #f55b2c;
- }
- thead tr th:hover,
- td.row__title a:hover {
- background: rgba(245,91,44,0.9);
- }
- .tag_notairing {
- background: white;
- }
- .nav,
- .nav__links a,
- .noti,
- .noti--unread,
- #list_header a,
- #list_header #filter,
- .rtitle {
- color: white;
- }
- .noti__link b,
- .noti__link:hover,
- #lists h3,
- .row__score span,
- td.row__title a,
- thead tr th,
- .row__episodes .plus,
- .row__chap .plus,
- .hint--notes,
- .hint--re,
- .tag_airing:hover,
- .tag_notairing:hover {
- color: #f55b2c;
- }
- .noti {
- box-shadow: 1px 1px 2px -1px black;
- }
- .noti--unread {
- background: black;
- }
- #lists #toppicks h3::after { content: "\f005"; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement