Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*==============
- VARIABLE OPTIONS
- ==============*/
- /* COLOURS */
- :root {
- /* List Text Colour */
- --text: #C41E6A ;
- }
- /* OTHER OPTIONS */
- /*
- --tag-width controls the width of the tags and title sections.
- Change this to accomodate a greater of lesser amount of list columns.
- Smaller width = more space for other columns
- --row-height controls the amount of text lines the rows can fit.
- Raise this number as needed when you lower the tag-width.
- If your tags are overlapping on the 5th line, set it to 5.
- --title-offset controls the title width as compared to the tags.
- Increase this number if the edit/more buttons are getting wrapped to the next line.
- --tag-offset controls how far from the left-side of the list the tags appear.
- This generally shouldn't need changing, but if the tags appear misaligned
- with the title, change this number.
- These options can be changed separately for the anime and manga lists.
- */
- /* Animelist settings */
- .anime {
- --tag-width: 600px ;
- --row-height: 3 ;
- --title-offset: 110px ;
- --tag-offset: 124px ;
- }
- /* Mangalist settings */
- .manga {
- --tag-width: 550px ;
- --row-height: 4 ;
- --title-offset: 110px ;
- --tag-offset: 124px ;
- }
- /*=========================
- CHANGE TEXT COLOURS & SIZES
- =========================*/
- /* GENERIC */
- body,
- #status-menu .status-button,
- .list-table .list-table-header .header-title .link,
- .list-table .list-table-header .header-title .link.sort,
- .list-table .list-table-data .data .link {
- color: var(--text);
- }
- .list-table .list-table-data .tags a {
- color: var(--text) !important;
- }
- /* CATEGORY HEADERS */
- #status-menu .status-button {
- /* Fallback colour */
- color: COLOUR;
- } #status-menu .status-button:nth-child(1) {
- /* All items */
- color: COLOUR;
- } #status-menu .status-button:nth-child(2) {
- /* Current */
- color: COLOUR;
- } #status-menu .status-button:nth-child(3) {
- /* Completed */
- color: COLOUR;
- } #status-menu .status-button:nth-child(4) {
- /* On hold */
- color: COLOUR;
- } #status-menu .status-button:nth-child(5) {
- /* Dropped */
- color: COLOUR;
- } #status-menu .status-button:nth-child(6) {
- /* Planned */
- color: COLOUR;
- }
- /* CATEGORY TITLE */
- .list-unit .list-status-title .text {
- color: COLOUR;
- }
- /* STAT/FILTER BUTTONS */
- #show-stats-button {
- color: COLOUR;
- }
- #advanced-options-button {
- color: COLOUR;
- }
- /* STATUS COLUMN */
- .list-table .list-table-data .data.status.reading,
- .list-table .list-table-data .data.status.watching {
- /* Current */
- background-color: COLOUR;
- }
- .list-table .list-table-data .data.status.completed {
- /* Completed */
- background-color: COLOUR;
- }
- .list-table .list-table-data .data.status.onhold {
- /* On Hold */
- background-color: COLOUR;
- }
- .list-table .list-table-data .data.status.dropped {
- /* Dropped */
- background-color: #FF0000;
- }
- .list-table .list-table-data .data.status.plantoread,
- .list-table .list-table-data .data.status.plantowatch {
- /* Planned */
- background-color: COLOUR;
- }
- /* NUMBER COLUMN */
- .header-title.number,
- .data.number {
- color: COLOUR;
- }
- /* IMAGE COLUMN */
- .list-table .list-table-header .header-title.image .link {
- color: COLOUR;
- }
- /* TITLE COLUMN */
- .list-table .list-table-data .data.title .link {
- color: COLOUR;
- font-size:1.3em;
- }
- /* SCORE COLUMN */
- .list-table .list-table-header .header-title.score .link,
- .list-table .list-table-data .data.score .link {
- color: black;
- }
- /* TYPE COLUMN */
- .list-table .list-table-header .header-title.type .link,
- .data.type {
- color: COLOUR;
- }
- /* PROGRESS COLUMN */
- .list-table .list-table-header .header-title.progress .link,
- .list-table .list-table-data .data.progress,
- .list-table .list-table-data .data.progress .link {
- color: COLOUR;
- }
- /* TAGS COLUMN */
- .list-table .list-table-data .tags div {
- font-size: 1.1em;
- }
- .list-table .list-table-data .tags span,
- .list-table .list-table-data .tags a {
- color: COLOUR !important;
- }
- /* SCORE COLUMN */
- /* Header */
- .list-table .list-table-header .header-title.score .link {
- font-size: 1.1em;
- }
- /* Cell */
- .list-table .list-table-data .data.score .link {
- font-size: 1.3em;
- }
- /*===============
- MOVE TAG LOCATION
- ===============*/
- /* Force list row height to prevent overflow issues */
- .list-table-data {
- height: calc(25px + 16px * var(--row-height));
- /* tag padding PLUS ( tag line height TIMES lines ) */
- }
- /* Force tag line height for consistency with calc function */
- .data.tags { line-height: 16px; }
- /* Align title to Top */
- .list-table .list-table-data .data.title { vertical-align: top; }
- /* Set max title width */
- .data.title {
- width: var(--tag-width);
- min-width: var(--tag-width);
- }
- .data.title .link {
- /* Prevent multi-line titles */
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- float: left;
- /* Force width to prevent edit/more from wrapping to next line */
- max-width: calc(var(--tag-width) - var(--title-offset));
- }
- /* Remove tag column header */
- .list-table .list-table-header .header-title.tags {
- width: 0;
- padding: 0;
- font-size: 0;
- }
- /* Reposition tags */
- .list-table .list-table-data .data.tags {
- position: absolute;
- left: var(--tag-offset);
- max-width: var(--tag-width);
- padding: 22px 8px 3px;
- border: none;
- text-align: left;
- /* disable mouse interaction */
- pointer-events: none;
- }
- /* Change tag block to inline so that the edit button can wrap next to it */
- .list-table .list-table-data .data.tags div { display: inline; }
- /* Recolour tag text */
- .list-table .list-table-data .tags a { color: black !important; }
- /* Restyle edit button */
- .list-table .list-table-data .tags .edit {
- display: inline-block;
- width: auto;
- pointer-events: auto;
- text-transform: uppercase;
- }
- /*======================
- TRANSPARENT LIST EFFECTS
- ======================*/
- /*FOR LIGHT LAYOUTS*/
- body{
- background-size: cover !important;
- background-attachment: fixed !important;
- }
- .list-table > tbody:nth-of-type(2n+1),
- .list-table, .list-container,
- .list-table .list-table-header .header-title{
- background-color: transparent !important;
- border: 0 transparent solid !important;
- }
- .list-table .list-table-data .data{
- border: 0 transparent solid !important;
- }
- .status-menu-container{
- background-color: rgba(255,255,255,.8) !important;
- }
- .cover-block {
- padding-left: 17px;
- padding-right: 17px;
- }
- .list-block, .cover-block{
- background-color: rgba(255,255,255,.8) !important;
- }
- /* remove table header lines */
- .list-table .list-table-header .header-title { background-image: none; }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement