Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @char "UTF-8";
- /*----------------------------------------------------------------------------*\
- Cardstock v1.11 by adustyspectacle
- A compact, minimal, cover theme.
- CHANGELOG
- v1.11 (03 JUL 2016)
- * revamped mobile style
- v1.10 (02 JUL 2016)
- * changed title borders, ep/chap box and airing tag lengths from ems to pixels
- * changed .plus class
- v1.9 (06 FEB 2016)
- * styled the popup edit box
- 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;
- font-size: 0.9em;
- }
- .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;
- font-family: inherit;
- color: black;
- }
- /*----------------------------------------------------------------------------*\
- LIST INPUT POPUP
- \*----------------------------------------------------------------------------*/
- tr.list-input--popup,
- tr.list-input--popup:last-of-type {
- border-radius: 0;
- box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
- outline-color: rgba(233, 230, 227, 0.75);
- background: white;
- color: black;
- border: 0.5em solid white;
- }
- tr.list-input--popup:nth-of-type(2n+1),
- .list-input .input__main select.status option {
- background: white;
- }
- tr.list-input--popup .title,
- tr.list-input--popup .input__main,
- tr.list-input--popup .input__main section,
- tr.list-input--popup .advanced,
- .advanced input,
- .advanced select,
- tr.list-input--popup .custom,
- tr.list-input--popup .notes textarea {
- background: none;
- }
- tr.list-input--popup .title,
- tr.list-input--popup .input__main section b,
- tr.list-input--popup .advanced div,
- tr.list-input--popup .advanced b,
- tr.list-input--popup .custom div,
- .md-checkbox label::after,
- .md-checkbox input[type="checkbox"]:checked + label::after {
- color: #075e92;
- }
- .listNotes-btn {
- background: #075e92;
- border-radius: 0;
- }
- .list-input--popup .title i.material-icons,
- .list-input--popup .input__main i.material-icons {
- color: #075e92;
- text-shadow: none;
- }
- .list-input--popup .input__main input,
- .list-input--popup .input__main select,
- .list-input--popup .advanced input,
- .list-input--popup .notes textarea {
- font-family: inherit;
- color: inherit;
- }
- .list-input--popup .title { font-size: 1.5em; }
- .list-input section b,
- .advanced b,
- .custom b,
- .listNotes-btn {
- font-size: 1em;
- }
- .list-input section b { top: 4px; }
- .advanced b { top: -4px; }
- .advanced div,
- .custom div {
- top: 0;
- font-size: 1.2em;
- }
- .list-input .input__main input,
- .list-input .input__main select {
- font-size: 1em;
- }
- /*----------------------------------------------------------------------------*\
- 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;
- display: inline-block;
- }
- 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;
- margin: 0 0.25em;
- 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
- \*----------------------------------------------------------------------------*/
- table { background-color: none; }
- tr:nth-of-type(2n),
- tr:nth-of-type(2n+1) {
- background-color: white;
- }
- .rtitle {
- display: inline-block;
- position: relative;
- width: 220px;
- /* optimum width: 220px */
- height: 320px;
- /* optimum height: 320px */
- margin: 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;
- line-height: normal;
- }
- .rtitle,
- .rtitle:last-of-type {
- border: 10px solid white;
- }
- .row__type,
- .row__status,
- .row__vol {
- display: none;
- }
- /*----------------------------------------------------------------------------*\
- TITLE BOX
- \*----------------------------------------------------------------------------*/
- .row__title {
- display: block;
- padding: 0;
- }
- td.row__title a {
- font-size: 1em;
- 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);
- opacity: 0;
- transition: 0.1s;
- }
- .rtitle:hover td.row__title a { opacity: 1; }
- 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: 12px;
- text-align: center;
- background: white;
- display: block;
- position: absolute;
- width: auto;
- height: 40px;
- padding: 10px 15px 10px 10px;
- bottom: -10px;
- left: 0;
- line-height: normal;
- margin: 0;
- }
- .row__episodes .plus,
- .row__chap .plus {
- font-size: 1.5em;
- font-weight: bold;
- background: white;
- color: #075e92;
- opacity: 0.8;
- position: absolute;
- top: 0;
- right: -15px;
- padding: 5px 0;
- height: 30px;
- width: 15px;
- box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.5);
- }
- .row__episodes .plus:hover,
- .row__chap .plus:hover {
- opacity: 1;
- background: #075e92;
- color: white;
- }
- /*----------------------------------------------------------------------------*\
- 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: "Reread";
- /* for mangalist, rewatched for animelist */
- 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: 10px;
- height: 40px;
- padding: 0;
- margin: 0;
- left: -10px;
- bottom: -10px;
- 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: 10px 20px;
- opacity: 1;
- overflow: visible;
- background: white;
- color: #075e92;
- vertical-align: middle;
- text-align: left;
- }
- /*----------------------------------------------------------------------------*\
- CSS FOR SMALLER SCREENS
- \*----------------------------------------------------------------------------*/
- @media only screen and (max-width: 768px) {
- body {
- font-size: 10pt;
- }
- .nav-mobile {
- background: rgba(255, 255, 255, 0.9);
- box-shadow: 0px -1px 2px -1px rgba(0, 0, 0, 0.5);
- }
- .nav-mobile > a {
- color: #075e92;
- }
- .nav-mobile > span {
- background: #075e92;
- }
- .nav-mobile > span i {
- color: white;
- }
- .nav-mobile .nav-draw {
- background: rgba(255, 255, 255, 0.9);
- }
- .nav-mobile .nav-draw a:nth-of-type(even) {
- background: rgba(7, 94, 146, 0.05);
- }
- .nav-mobile .nav-draw a {
- color: #075e92;
- }
- #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(7, 94, 146, 0.05);
- font-size: 1em;
- box-shadow: none;
- }
- .noti .noti_row:hover {
- background: #075e92;
- color: white;
- }
- .noti .noti_row .noti__link:hover {
- color: white;
- }
- tr:nth-of-type(2n),
- tr:nth-of-type(2n+1) {
- background-color: none;
- }
- tr.list-input--popup,
- tr.list-input--popup:last-of-type {
- height: 85vh;
- background: rgba(255, 255, 255, 0.9);
- }
- thead {
- text-align: center;
- }
- .rtitle {
- width: 132px;
- /* width and height 60% of original */
- height: 192px;
- margin: 1em 0.5em;
- }
- .rtitle,
- .rtitle:last-of-type {
- border: 5px solid white;
- }
- td.row__title a {
- min-width: 100%;
- max-height: 50%;
- font-size: 12px;
- left: 0;
- top: -1.5em;
- opacity: 1;
- }
- .row__score span {
- font-size: 1.5em;
- }
- .row__episodes,
- .row__chap {
- bottom: -5px;
- height: 25px;
- padding: 5px;
- }
- .row__episodes .plus,
- .row__chap .plus {
- display: none;
- }
- .tag_notes {
- top: auto;
- right: auto;
- bottom: 0;
- left: 0;
- display: none;
- }
- .tag_re {
- top: auto;
- right: auto;
- bottom: 0;
- left: 1.25em;
- display: none;
- }
- .tag_airing,
- .tag_notairing {
- font-size: 0.5em;
- width: 5px;
- height: 25px;
- left: -5px;
- bottom: -5px;
- }
- .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
- \*----------------------------------------------------------------------------*/
- #lists #toppicks h3::after { content: "\f005"; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement