Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
- @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Dark%20Mode%20Compressed.css";
- @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
- @\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Mod%20-%20Hover%20Image%20Compressed.css";
- body { --background: url(URLHERE); }
- body { --avatar:
- url(https://i.imgur.com/pkEExVA.png); }
- body { --banner:
- url(https://i.imgur.com/XqH2zhY.jpg); }
- /* Change banner text & COLOR */
- body { --name: "Unravel\a the world!"; }
- /* banner text color */
- #cover-image-container::after {
- color: #141414 ;
- text-shadow: 2px 2px 8px #565656 ;
- }
- /* Banner Text Position */
- #cover-image-container::after {
- left: 30% ;
- }
- body { --character: none; }
- /* Reposition character image */
- #list-container #cover-image-container {
- /* Position is .
- * Values such as left/right/top are accepted,
- * as well as pixel "350px", and percent "60%" values
- */
- background-position: left center;
- }
- /*-S-T-A-R-T--------------------*\
- | List Character Renders R0.3 |
- \*------------------------------*/
- footer:before, footer:after {
- content: "";
- position: fixed;
- top: 0;
- z-index: -1;
- width: calc(50% - 670px);
- min-width: 200px;
- height: 100%;
- background: transparent no-repeat center bottom / contain scroll;
- }
- /* Left Render */
- footer:before {
- right: calc(100% - (50% - 670px));
- background-image: url(https://i.imgur.com/rrwNbWf.png);
- background-position: left bottom;
- }
- /* Right Render */
- footer:after {
- left: calc(100% - (50% - 670px));
- background-image: url(none);
- background-position: right bottom;
- }
- /*-S-T-A-R-T--------------------*\
- | CatCol Header Text R0.0 |
- \*------------------------------*/
- .status-menu .status-button{transition:color .3s ease}.status-menu .status-button.on:nth-of-type(1),.status-menu .status-button:nth-of-type(1):hover{color:var(--accent)!important}.status-menu .status-button.on:nth-of-type(2),.status-menu .status-button:nth-of-type(2):hover{color:var(--watching)!important}.status-menu .status-button.on:nth-of-type(3),.status-menu .status-button:nth-of-type(3):hover{color:var(--completed)!important}.status-menu .status-button.on:nth-of-type(4),.status-menu .status-button:nth-of-type(4):hover{color:var(--onhold)!important}.status-menu .status-button.on:nth-of-type(5),.status-menu .status-button:nth-of-type(5):hover{color:var(--dropped)!important}.status-menu .status-button.on:nth-of-type(6),.status-menu .status-button:nth-of-type(6):hover{color:var(--plantowatch)!important}
- /*------------------------E-N-D-*/
- /*-S-T-A-R-T--------------------*\
- | Review Tags R0.1 |
- \*------------------------------*/
- /* Raise or lower this number to change how wide the box is. Make sure not to remove the "px" at the end. */
- .data.tags { width: 170px; }
- .data.tags div:not(:empty){padding:2px 8px;background:var(--btn-bg);border-radius:8.5px}.data.tags span{display:inline;font-size:11px!important;cursor:text}.data.tags a:not(.edit){display:inline;padding:0;background:0 0;pointer-events:none}
- /*-S-T-A-R-T--------------------*\
- | Theme Colours |
- \*------------------------------*/
- :root {
- /* Button Colours */
- --bg-dark: #1C1C1C;
- --btn-head-bg-h: #323232;
- --btn-text-h: #fff;
- /* Status Colours */
- --accent: #FFFFFF;
- --watching: #32CD32;
- --completed: #9400D3;
- --onhold: #E9E900;
- --dropped: #D90000;
- --plantowatch: #1E90FF;
- /* Single-Use Colours */
- --edit-btn: #d9d9d9;
- --checkmark: #F6F6F6;
- }
- /*------------------------E-N-D-*/
- /* ===================================
- Combine Premier and Studio Sections */
- .data.season {
- width: 120px;
- height: 32px;
- margin-top: 8px;
- -webkit-align-self: flex-start;
- -moz-align-self: flex-start;
- align-self: flex-start;
- }
- .data.studio {
- margin-top: 45px !important;
- margin-left: -120px;
- -webkit-order: 20;
- -moz-order: 20;
- order: 20;
- }
- /* ReColour scores */
- .score-10 { color: #FFD700 ; }
- .score-9 { color: #9400D3 ; }
- .score-8 { color: #0076FF ; }
- .score-7 { color: #00BF00 ; }
- .score-6 { color: #FFFFFF ; }
- .score-5 { color: #FFFFFF ; }
- .score-4 { color: #FF7C00 ; }
- .score-3 { color: #FF0000 ; }
- .score-2 { color: #FF0000 ; }
- .score-1 { color: #FF0000 ; }
- .score-na { color: #COLOUR ; }
- /*==============================*\
- | Score Descriptors |
- \* --- - --- - ---- - --- - --- */
- .score-na::before {
- content: "Haven't decided";
- }
- .score-1::before {
- content: "Unredeemable";
- }
- .score-2::before {
- content: "Horrid";
- }
- .score-3::before {
- content: "Awful";
- }
- .score-4::before {
- content: "Bad";
- }
- .score-5::before {
- content: "Mediocre";
- }
- .score-6::before {
- content: "Fine";
- }
- .score-7::before {
- content: "Good";
- }
- .score-8::before {
- content: "Great";
- }
- .score-9::before {
- content: "Fantastic";
- }
- .score-10::before {
- content: "Incredible";
- }
- /* Internals */
- .score-label {
- position: relative;
- display: inline-block;
- z-index: 0;
- transition: color 0.2s ease;
- }
- .score-label:hover {
- color: #fff !important;
- }
- .score-label::before {
- position: absolute;
- top: -4px;
- left: -8px;
- z-index: -1;
- display: block;
- padding: 4px 8px 4px calc(100% + 12px);
- background: #111;
- border-radius: 4px;
- opacity: 0;
- transition: opacity 0.2s ease;
- white-space: pre;
- text-align: left;
- pointer-events: none;
- }
- .score-label:hover::before {
- opacity: 1;
- }
- /****************************/
- /* font resize on Hover */
- /****************************/
- .list-table-data:hover td {
- font-size: 12px !Important;
- -moz-transition: .4s ease;
- -webkit-transition: .4.5s ease;
- -o-transition: .4s ease;
- }
- /*-S-T-A-R-T--------------------*\
- | Header Outline (CatCol) R0.0 |
- \*------------------------------*/
- [data-query*='status":7']{--header-border:var(--accent)}[data-query*='status":1']{--header-border:var(--watching)}[data-query*='status":2']{--header-border:var(--completed)}[data-query*='status":3']{--header-border:var(--onhold)}[data-query*='status":4']{--header-border:var(--dropped)}[data-query*='status":6']{--header-border:var(--plantowatch)}.status-menu-container:before{height:56px;border-width:4px 0;border-style:solid;border-color:var(--header-border)}.status-menu:after{left:-4px;top:-47px;border-width:4px;box-shadow:0 0 0 4px var(--header-border)}.fixed .status-menu:after{top:4px}
- /*------------------------E-N-D-*/
- /* =============================
- Header Outline Custom Colours */
- [data-query*='status":7'] {
- /* All Anime */
- --header-border-top: # ;
- --header-border-bottom: # FFFFFF ;
- --header-border-avatar: #FFFFFF ;
- } [data-query*='status":1'] {
- /* Watching */
- --header-border-top: # ;
- --header-border-bottom: # 32CD32 ;
- --header-border-avatar: #32CD32 ;
- } [data-query*='status":2'] {
- /* Completed */
- --header-border-top: # ;
- --header-border-bottom: # 9400D3 ;
- --header-border-avatar: #9400D3 ;
- } [data-query*='status":3'] {
- /* On Hold */
- --header-border-top: # ;
- --header-border-bottom: # E9E900 ;
- --header-border-avatar: #E9E900 ;
- } [data-query*='status":4'] {
- /* Dropped */
- --header-border-top: # ;
- --header-border-bottom: # D90000 ;
- --header-border-avatar: #D90000 ;
- } [data-query*='status":6'] {
- /* Plan to Watch */
- --header-border-top: # ;
- --header-border-bottom: # 1E90FF ;
- --header-border-avatar: #1E90FF ;
- }
- /* Internal Fix */
- .status-menu-container:before {
- border-top-color: var(--header-border-top);
- border-bottom-color: var(--header-border-bottom);
- }
- .status-menu::after {
- box-shadow:0 0 0 4px var(--header-border-avatar);
- }
- /*-S-T-A-R-T--------------------*\
- | Hover Image R0.3 |
- \*------------------------------*/
- .data.image a{overflow:visible}.data.image a:before{content:"";position:absolute;top:50%;left:-166px;z-index:50;width:150px;height:0;background:var(--bg-dark) no-repeat center/cover;border-radius:8px;box-shadow:0 0 2px #000;opacity:0;pointer-events:none;transition:all .3s ease}.list-item:hover .data.image a:before{top:calc(50% - 100px);height:200px;opacity:1}.data.image a:after,.data.image img{border-radius:50%}
- /*------------------------E-N-D-*/
- /* ===================================================
- Reposition & Resize Avatar + Change Category Labels */
- /* Change avatar size and position here */
- :root {
- --avatar-size: 150px ;
- --avatar-vertical-position: -200px;
- }
- /* Change category titles here
- * First title is anime, second title is manga.
- */
- /* All Anime/Manga */
- .status-button.all_anime::before {
- content: "All Anime";
- } .manga .status-button.all_anime::before {
- content: "All Manga";
- }
- /* Current Anime/Manga */
- .status-button.watching::before {
- content: "Currently Watching";
- } .status-button.reading::before {
- content: "Currently Reading";
- }
- /* Completed Anime/Manga */
- .status-button.completed::before {
- content: "Completed";
- } .manga .status-button.completed::before {
- content: "Completed";
- }
- /* On Hold Anime/Manga */
- .status-button.onhold::before {
- content: "On Hold";
- } .manga .status-button.onhold::before {
- content: "On Hold";
- }
- /* Dropped Anime/Manga */
- .status-button.dropped::before {
- content: "Dropped";
- } .manga .status-button.dropped::before {
- content: "Dropped";
- }
- /* Planned Anime/Manga */
- .status-button.plantowatch::before {
- content: "Plan to Watch";
- } .status-button.plantoread::before {
- content: "Plan to Read";
- }
- /* Internals */
- .status-menu {
- display: flex !important;
- height: 64px;
- padding: 0 24px 0 0 !important;
- }
- .status-menu::before {
- content: "";
- width: 0;
- flex: 1 1 auto;
- order: 5;
- }
- .status-menu .status-button {
- flex: 0 0 auto;
- font-size: 0 !important;
- line-height: 0 !important;
- letter-spacing: 0;
- } .status-button:nth-of-type(1) {
- order: 1;
- } .status-button:nth-of-type(2) {
- order: 2;
- } .status-button:nth-of-type(3) {
- order: 3;
- } .status-button:nth-of-type(4) {
- order: 7;
- } .status-button:nth-of-type(5) {
- order: 8;
- } .status-button:nth-of-type(6) {
- order: 9;
- }
- .status-button::before {
- font-size: 17.6px;
- line-height: 30px;
- letter-spacing: 1px;
- }
- .status-menu::after {
- top: calc((var(--avatar-size) + 8px) * -0.5 + 32px + var(--avatar-vertical-position));
- left: calc(50% - 4px - var(--avatar-size) * 0.5);
- z-index: 1;
- width: var(--avatar-size);
- height: var(--avatar-size);
- }
- .status-menu-container .search-container {
- z-index: 1;
- }
- .list-menu-float {
- width: 1060px;
- padding: 0;
- }
- .header .header-title {
- margin-left: 0;
- }
- .btn-menu a.username {
- left: calc(50% - (var(--avatar-size) * 0.5));
- top: calc((var(--avatar-size) + 8px) * -0.5 + 72px + var(--avatar-vertical-position));
- width: var(--avatar-size);
- height: var(--avatar-size);
- }
- [data-owner="1"] .list-menu-float .icon-menu.profile {
- left: calc(50% - (var(--avatar-size) * 0.5));
- top: calc((var(--avatar-size) + 8px) * -0.5 + 37px + var(--avatar-vertical-position));
- width: var(--avatar-size) !important;
- height: var(--avatar-size) !important;
- }
- /* ------------------------E-N-D- */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement