Clarity for Yuki-Chan276 19-06-05

@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/Clarity%20Theme/Theme%20-%20Compressed.css";
/* ================
CATEGORY round HEADERS */
@\import "https://malcat-gen.appspot.com/headers?template=[data-query*='\"status\":7'] .list-item:nth-child($index){margin-top:162px;}[data-query*='\"status\":7'] .list-item:nth-child($index) .status:before{content:'$content'}";

/* Profile Picture*/
:root { --avatar: url(https://cdn.myanimelist.net/images/userimages/3060215.jpg); }

/* cover banner */
:root { --banner: url(http://i.imgur.com/c1UTBP3.jpg); }

/* character image */
:root { --character: none; }

/* background */
body {
--background: url(http://i.imgur.com/H9UBClT.png);
background-image:
/* background will be half-tinted black */
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
var(--background) !important;
/* image position */
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
}


/* ======================
falling particles effect */
@keyframes falling {
0% { background-position: -485px 487px, 485px 487px;}
100% { background-position: 0 0, 0 0; }
}

@-webkit-keyframes falling {
0% { background-position: -485px 487px, 485px 487px; }
100% { background-position: 0 0, 0 0; }
}

.list-container:after {
position: fixed;
display: block;
content: '';
left: 0;
bottom: 0;
margin-left: 0;
width: 100%;
height: 100%;
background-image: url(http://i.imgur.com/Dn3CFL1.png), url(http://i.imgur.com/NPyQceb.png);
animation: falling 15s linear infinite;
-webkit-animation: falling 15s linear infinite;
z-index: -3 !important;
pointer-events:none !important;
}


/* Transparent List Items */
.list-item, .data.priority, .data.number, .status:before, .status:after {
background: transparent no-repeat center / cover fixed !important;
background-image:
linear-gradient(rgba(33,33,33,0.8),rgba(33,33,33,0.8)),
var(--background) !important;
}


/* ============= Black THEME COLOURS */
:root {
/*====== Generic Colours */
/*Page background*/
--pbg: #161616;
/*Content background (list entries, header, footer, header buttons, popups)*/
--bg: #212121;
/*Mostly used for borders (search bar, user inputs)*/
--bg-dark: #444;
/*Generic text colour, applies to almost all text on the list. */
--text: #ababab;
/*Generic text on hover */
--text-h: #416abe;
/*Lighter text (add/edit/more, type, column descriptors, start/end/days, etcetera). Also serves as border colour for filter menu */
--text-dim: #777;
/*Lighter text on hover */
--text-dim-h: #999;
/*Used for longer text chunks (filter menu, more info) */
--text-dark: #ababab;
/*Used for larger features to blend with text (filter menu).*/
--icon: #959595;
/*Used for occasional colour flares (header all anime button, entry names, discuss link).*/
--accent: #416abe;
/*====== Button Colours */
/*Used for occasional colour flares (header all anime button, entry names, discuss link).*/
--btn-bg: #191919;
/*Background for secondary content on hover. Also serves as a secondary colour for header buttons.*/
--btn-bg-h: #ababab;
/*Background for header buttons on hover.*/
--btn-head-bg-h: #416abe;
/*Text colour for secondary content and header buttons on hover*/
--btn-text-h: #212121;
/*===== Header Colours */
/*Text colour for header category buttons and search icon. Also serves as footer text color*/
--text-head: #9b9b9b;
/*Text color for active header category button*/
--text-head-h: #ababab;
/*====== Status Colours */
--watching: #2db039;
--completed: #26448f;
--onhold: #f9d457;
--dropped: #a12f31;
--plantowatch: #c3c3c3;
/*====== Single-Use Colours */
/*The colour that is seen if the cover banner lacks an image.*/
--cover-bg: #090909;
/*Edit button for tags, seen on the right of each list entry */
--edit-btn: #323232;
/*The checkmark on completed list entries */
--checkmark: #C82536;
}
/*=== rest of dark theme*/
.cover-block:before{background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))}

#cover-image-container:after{
color:#f6f5ff;
text-shadow:2px 2px 8px #e4bef4
}

.status-menu-container:after{background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0))}

#footer-block:before{background:linear-gradient(to top,rgba(0,0,0,.3),rgba(0,0,0,0))}

#advanced-options #fancybox-close,
#advanced-options .advanced-options-button a,
#fancybox-outer #fancybox-close,
.header .header-title,
.header-info,
.icon-menu,
.list-menu-float .icon-menu,
.list-table>tbody:first-of-type:after,
.stats a,
.status-menu:after{
box-shadow:0 1px 2px rgba(0,0,0,.8)
}

.data.score select{
background-image:url(https://i.imgur.com/hFijppc.png)
}

#fancybox-overlay{opacity:.35!important}

#advanced-options, #fancybox-outer{
box-shadow:0 0 32px rgba(0,0,0,.75)
}
#fancybox-frame{
-webkit-filter:invert(87.8%)
hue-rotate(197deg);
filter:invert(87.8%)
hue-rotate(197deg)
}

#advanced-options[class*="-widget"] select{
background-image:url(https://i.imgur.com/KF8oOyC.png)
}


/*=============== Titles */
/* Titles on Hover */
.list-table .list-table-data .title .link:hover {
color: #C82536 !important; }
/* ===== item row title hover colour */
.list-table-data:hover .title .link {
color: #C82536 !important; }

/* List item title hover colour
NOTE: above should be the same, but test it out
IF YES DELETE THIS
.data.title .link.sort:hover { color: #C82536 !important; } */

/* Horizontal Tags / Revision 0.2 */
.list-table-data {
padding-bottom: 11px;
}

.data.tags {
position: absolute;
left: 0;
top: 0;

display: flex !important;
width: 0;
height: 100%;
padding: 0 !important;
align-items: flex-end;
}
.data.tags div {
max-width: 980px;
margin: 0 0 4px 80px;

font-size: 0;
white-space: nowrap;
}
.data.tags span {
display: inline-block;

padding: 0;
}
.data.tags span a {
padding: 1px 8px !important;
margin: 0 4px 0 0;
white-space: nowrap;
}
.data.tags span a[href*="=Favo"] {
padding: 0 !important;
}

.data.tags a.edit { right: -1060px; }
.data.tags textarea { right: -1060px; }


/* Tag Descriptions Basis - Horizontal / Revision 2.1 */
.data.tags span a { position: relative; }
.data.tags span a:not([href*="=Favo"]):after, .data.tags span a:not([href*="=Favo"]):before {
position: absolute;

display: block;

transition: all 0.15s ease;
pointer-events: none;
opacity: 0;
z-index: 5;
}
.data.tags span a:not([href*="=Favo"]):after {
top: 27px;
left: calc(50% - 345px);

width: auto;
max-width: 340px;
height: auto;
padding: 4px 8px;
background: var(--btn-bg);
border: 1px solid var(--text-dim);
border-radius: 4px;

box-sizing: border-box;

color: var(--text);
font: 11px/15px Arial, Verdana;
text-align: left;
white-space: pre-wrap;

transform: translateX(-50%) translateX(340px);
}
.data.tags span a:not([href*="=Favo"]):before {
content: "";
top: 17px;
left: 50%;

border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--text-dim) transparent;
margin-left: -10px;
}
.data.tags span a:hover:after {
left: calc(50% - 340px);

opacity: 1;
}
.data.tags span a:not([href*="=Favo"]):hover:before {
margin-left: -5px;

opacity: 1;
}

.data.tags span:not([href*="=Favo"]) a:after { transform: translateX(-17%) translateX(340px); }
.data.tags span:not([href*="=Favo"]):nth-child(n+3) a:after { transform: translateX(-33%) translateX(340px); }
.data.tags span:not([href*="=Favo"]):nth-child(n+5) a:after { transform: translateX(-50%) translateX(340px); }
.data.tags span:not([href*="=Favo"]):nth-child(n+7) a:after { transform: translateX(-67%) translateX(340px); }
.data.tags span:not([href*="=Favo"]):nth-child(n+9) a:after { transform: translateX(-83%) translateX(340px); }


/* ========== Colored tags
/* Studios/Producers */
.data.studio a:link {
background: #C82536;
color: black !important }

/* SPECIAL TAGS */
.data.tags span a[href*="\=HiScored"],
.data.tags span a[href*="\=AWC%202019"],
.data.tags span a[href*="\=MRC%202019"]
{ color: black !important;
background: #C82536; }


/**===================
tags descriptions **/
.data.tags a[href*="\=HiScored"]:after {
content: "Highest Scored Anime Challenge @ AWC Club"
}
.data.tags a[href*="\=AWC%202019"]:after {
content: "MAL yearly Anime Watching Challenge"
}
.data.tags a[href*="\=MRC%202019"]:after {
content: "MAL yearly Manga Reading Challenge"
}

/* ======== CATEGORY HEADERS while viewing all anime */
[data-query*='"status":7'] .list-item:nth-child(2) { margin-top: 58px; }

.list-item .status:before,
.list-item .status:after {
position: absolute;
top: -40px;
left: 0;
display: block;
width: 1059px;
height: 31px;
background: var(--bg);
border-width: 1px 0 0 1px;
border-style: solid;
border-color: var(--text-head);
border-radius: 16px 16px 0 0;
color: var(--text-head);
font: 20px/31px Oswald;
letter-spacing: 3px;
text-indent: -0.5px;
text-transform: uppercase;
pointer-events: none;
}

[data-query*='"status":7'] .list-item .status:after {
content: "";
top: auto;
bottom: -40px;
height: 32px;
border-width: 0 0 0 1px;
border-radius: 0 0 16px 16px;
}

.list-item .watching:before,
.list-item .reading:before,
.list-item .watching:after,
.list-item .reading:after {
border-color: var(--watching);}

.list-item .completed:before,
.list-item .completed:after {
border-color: var(--completed);}

.list-item .onhold:before,
.list-item .onhold:after {
border-color: var(--onhold);}

.list-item .dropped:before,
.list-item .dropped:after {
border-color: var(--dropped);}

.list-item .plantowatch:before,
.list-item .plantoread:before,
.list-item .plantowatch:after,
.list-item .plantoread:after {
border-color: var(--plantowatch);}


/*========== config for start/end dates */
.data.airing-finished,
.data.airing-started,
.data.days, .data.finished,
.data.started {
position:relative;
width:100px;
height:14px;
overflow:hidden;
/* order of dates */
order:18;
color:var(--text);
font-size:9px;
line-height:14px;
text-align:left !important;
text-overflow:ellipsis
}

/* ==== position for dates */
.data.started {top:-20px}
.data.finished{
top:0;
margin-left:-100px
}
.data.days{
top:20px;
margin-left:-100px
}
.data.airing-started {top:-10px}
.data.airing-finished{
top:10px;
margin-left:-100px
}

/* separator line for started/finished dates */
.data.airing-finished:before,
.data.airing-started:before,
.data.days:before,
.data.finished:before,
.data.started:before{
display:inline-block;
width:30px;
padding-right:10px;
border-right:2px solid var(--text-dim);
text-align:right;
color:var(--text-dim)
}

/*=========== label text for
starting-finished dates, total days, airing dates */
.data.started:before{content:"Started"}
.data.finished:before{
content:"Finished"}
.data.days:before{content:"Days"}
.data.airing-started:before{
content:"Aired"}

.manga .data.airing-started:before{
content:"Issued"}
.data.airing-finished:before{
content:"to"}
.manga .data.airing-finished,
.manga .data.airing-started{
width:107px}
.manga .data.airing-finished{
margin-left:-107px}
.manga .data.airing-finished:before,
.manga .data.airing-started:before{
width:36px }

/*======== */
.data.season:empty:after{
content:"Not Listed";}
.data.studio:empty:before{
content:"Studio\aNot Listed"}
.data.licensor:empty:before{
content:"Licensor\aNot Listed"}


/* ====== */
#copyright{
padding:0;
color:var(--text-head);
line-height:16px;
font-size: 12px;
}
#copyright:after{
content:"\a List Design Created by Valerio Lyndon."; }

.data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
content: none; !important
}
/* ============================= */