MAL.css

/*Theme by RaitaroH https://github.com/RaitaroH/MyAnimeList*/

/*Variables*/
:root{
/*Colors*/
--main-color: rgba(0,173,238,1) !important;
--main-background: #111111 !important;
--second-background: #181818 !important;
--hover-background: #232323 !important;
--main-text: rgba(239, 240, 241, 1) !important;
--dimer-text: rgba(239, 240, 241, .7) !important;
--shadow: rgba(0,173,238,.5) !important;
--title-highlight: rgba(0,173,238,.9) !important;
--border-color: #000000 !important; /*Also body background*/
/*Images*/
--wallpaper: url("https://raw.githubusercontent.com/RaitaroH/MyAnimeList/master/Images/Background.gif");
--banner: url("https://raw.githubusercontent.com/RaitaroH/MyAnimeList/master/Images/Banner_4K.png");
/*Banner should be around 990x250 or have this aspect ration due to certain margin issues*/
--banner-height: 125px;
--404: url("https://raw.githubusercontent.com/RaitaroH/MyAnimeList/master/Images/404.png");
--mal: url("https://raw.githubusercontent.com/RaitaroH/MyAnimeList/master/Images/MAL.png");
/*Icons*/
--sprites: url("https://raw.githubusercontent.com/RaitaroH/MyAnimeList/master/Images/Sprites-transparent.png");
--sprites-hover: url("https://raw.githubusercontent.com/RaitaroH/MyAnimeList/master/Images/SpritesHover-transparent.png");
/*Sprite colors cannot be changed. Reuse --sprites instead of --spirtes-hover if needed.*/
}

/*Added highlighted background color*/
::selection {background: var(--main-color); /* WebKit/Blink Browsers */color: var(--main-text) !important;}
::-moz-selection {background: var(--main-color);color: var(--main-text) !important;}

body {
color: var(--dimer-text);
font-size: 11.00px;
font-family: Verdana, Arial;
background: var(--wallpaper) var(--border-color) no-repeat center fixed;
background-size: cover;
}
/*CUSTOM BANNER*/
#list_surround {
background: var(--banner) no-repeat center top;
background-size: 1089px 300px;
padding-top: var(--banner-height);
}
/*Determines the positioning of your list*/
#list_surround {
margin: 0 auto; 
width: 920px;
margin-top: -50px !important;
}
#mal_cs_powered {margin-top: 50px !important;}
/*Tags Row Width + Tags Header width*/
.td1:nth-of-type(6), .td2:nth-of-type(6), .table_header:nth-of-type(6) {width: 200px;}
/*All links on your list + HeaderLink represents the color of the links inside the_header */
a, a:visited, .table_headerLink, .table_headerLink:Visited {color: var(--main-text);text-decoration: none !important;}
a:hover, .table_headerLink:Hover {
color: var(--main-color) !important;
text-shadow: 0px 0px 3px var(--shadow) !important;
-moz-transition: .1s ease-in !important;
text-decoration: none !important;
}
.animetitle {font-weight: bold;}
/*Alternating row color 1 and 2 */
.td1, .td2 {
color: var(--dimer-text); 
text-shadow: none !important;
border-width: 0px 1px 1px 0px;
padding: 2px;
background-color: var(--main-background); 
}
/*This represents the "Anime Title", "Score", "# Eps" columns */ 
.table_header {
color: var(--main-text);
border-width: 1px 1px 1px 0px;
border-style: solid;
border-color: transparent;
background: var(--second-background); 
padding: 2px;
}
/*Controls the select form decoration (the drop down select box)*/
.form {
border-width: 1px 1px 1px 1px;
border-color: var(--border-color);
border-style: solid;
color: var(--border-color);
padding: 2px;
font-size: 11.00px;
font-family: Verdana, Arial;
}
/*Which 'status' up top is selected? + Header positioning. */
.header_title {
margin: 65px auto 0px 0px;
width: 520px;
color: var(--shadow);
font-size: 15px;
font-weight: 700;
text-align: left;
/*visibility: hidden;*/
}
/*This is the css for the scores + The airing text*/
*[id^='scoreval'], *[id^='score'], .animetitle + small {
visibility: visible !important;
color: var(--main-color) !important;
/*text-shadow: 0px 0px 3px var(--shadow) !important;*/
}
.category_totals {
color: var(--main-text);
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: transparent;
padding: 3px;
background: var(--second-background); 
font-weight: bold;
text-align: center;
}

#grand_totals {
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: var(--border-color);
padding: 3px;
background: var(--main-background); 
font-weight: bold;
color: var(--main-color);
/*text-shadow: 0px 0px 3px var(--shadow) !important;*/
text-align: center;
}
/*copyright contains the "Producted by Garrett Gyssler" text.DO NOT REMOVE OR HIDE THIS DIV.IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO*/
#copyright {
padding-top: 6px;
text-align: center;
margin: 0 0 100px 0;
width: 913px;
color: var(--main-color);
/*text-shadow: 0px 0px 3px var(--shadow) !important;*/
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: var(--border-color);
border-radius: 0px 0px 50px 50px;
padding: 3px;
background: var(--main-background); 
}
/* Highlight on Hover */
tr:hover td.td1, tr:hover td.td2 {
font-size: 11px !important;
/*text-shadow: 1px 1px 5px white !important;*/
-moz-transition: .1s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}
tr:hover [class^="td"] {
background-color: var(--hover-background) !important; 
-moz-transition: .1s ease;
-webkit-transition: .4s ease;
-o-transition: .4s ease;
}

/*Editing entries*/
input, textarea
{
    background-color: var(--second-background) !important;
    border: 1px solid var(--hover-background) !important;
}
input[value="Save"]:hover, input[value="Cancel"]:hover, #fancybox-confirm-yes-button:hover, #fancybox-confirm-no-button:hover, input[value="Go"]:hover
{
    color: var(--main-color) !important;
    background-color: var(--second-background) !important;
}
textarea[class="inputtext"]:hover, textarea[class="inputtext"]:active, textarea[class="inputtext"]:focus
{
    border-color: var(--main-color) !important;
}

/*CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that. */
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6), 
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) {
display: tab\le-cell;
}
#list_surround small a:last-of-type {
display: none !important;
}
#list_surround a[href*="https://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="https://myanimelist.net/editlist.php?type="], 
#list_surround a[href*="https://myanimelist.net/panel.php?go=add"] {
visibility: visible !important;
margin-right: 10px
}
.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
visibility: visible !important;
}
.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
text-decoration: underline;
}

/* COVER AREA*/
.td1 div small a[title*="View"], .td2 div small a[title*="View"] {display:none;color:transparent;font-size:0px;}
.td1 div small, .td2 div small {visibility: hidden; color: var(--dimer-text); text-shadow: none !important;}
.td1 div small:hover, .td2 div small:hover {visibility: hidden; text-shadow: 0px 0px 3px var(--shadow) !important;
color: var(--main-color) !important;}
.td1 div small a, .td2 div small a {visibility: visible !important; color: var(--dimer-text); text-shadow: none;}
.td1 div small a:hover, .td2 div small a:hover {visibility: visible !important; text-shadow: 0px 0px 3px var(--shadow) !important;
color: var(--main-color) !important;}

/*Floating menu */
.status_not_selected a, .status_selected a {
background-color: var(--main-background);
height: 25px;
width: 125px;
display: block !important;
line-height: 25px;
padding-left: 12px;
color: var(--dimer-text);
}
.status_selected a {
background-color: var(--second-background);
text-shadow: 0px 0px 3px var(--shadow) !important;
color: var(--main-color) !important;
height: 25px;
width: 125px;
line-height: 25px;
padding-left: 12px;
}
.status_not_selected a:hover, .status_selected a:hover  {
background-color: var(--hover-background);
height: 25px;
width: 125px;
line-height: 25px;
padding-left: 12px;
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
-o-transition: .5s ease;
}
.status_selected, .status_not_selected {
position: fixed;
text-align: left;
left:5px;
top: 45px;
}
.status_selected + .status_not_selected, .status_not_selected + .status_selected, .status_not_selected + .status_not_selected {
top: 70px;
}
.status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected {
top: 95px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 120px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 145px;
}
.status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
top: 170px;
}


/*COLOR OF THE ICONS.Change the color, and adjust the opacity for brighter color. Remove the display: none to match the selected icon to the other icons.*/
 #mal\_cs\_listinfo:before,#mal\_cs\_links:before, 
 #mal\_cs\_otherlinks:before,#mal\_cs\_powered:before {
background: transparent;
opacity: .9;
}
/*BORDER OF ICONS.If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it.*/
 #mal_cs_listinfo:before,#mal_cs_links:before,#mal_cs_otherlinks:before,#mal_cs_powered:before,#mal\_cs\_listinfo:before,#mal\_cs\_links:before, 
 #mal\_cs\_otherlinks:before,#mal\_cs\_powered:before {
border-color: ;
border-style: ;
border-width: ;
height: 32px !important;
}
/*BUTTONS COLOR AND BORDER.Buttons within the hover menus, not the icons themselves. Second code is for button color on hover. */
 #mal_cs_listinfo a,#mal_cs_links a,#mal_cs_otherlinks a,#mal_cs_powered a img{
background-color: var(--second-background) !important;
border-color: transparent;
border-style: solid !important;
border-width: 1px !important;
}
 #mal\_cs\_listinfo a:hover,#mal\_cs\_links a:hover,#mal\_cs\_otherlinks a:hover,#mal_cs_powered a img:hover {
background-color: var(--hover-background) !important;
}
/*COLOR OF HOVER MENUS AND SELECTED ICONSRemove display none from the second code to match the colors of the selected icon to the icons above. */
 #mal\_cs\_listinfo div,#mal\_cs\_links div,#mal\_cs\_otherlinks div, 
 #mal\_cs\_powered div,#mal\_cs\_powered dd,#mal\_cs\_powered a{
background-color: var(--main-background) !important;
}
/*Borders in the menu*/
#mal_cs_listinfo div:nth-of-type(1), #mal\_cs\_links div:nth-of-type(1), #mal\_cs\_otherlinks div:nth-of-type(1), #mal\_cs\_powereda:nth-of-type(1),#mal_cs_powered > a:nth-child(1) {
border-color: var(--shadow);
border-style: solid !important;
border-width: 1px 1px 0px 1px !important;
}
#mal_cs_listinfo div:nth-of-type(2), #mal\_cs\_links div:nth-of-type(2),#mal\_cs\_otherlinks div:nth-of-type(2), #mal\_cs\_powereddiv:nth-of-type(1),#search {
border-color: var(--shadow);
border-style: solid !important;
border-width: 0px 1px 1px 1px !important;
}
 #mal\_cs\_listinfo:hover:before,#mal\_cs\_links:hover:before, 
 #mal\_cs\_otherlinks:hover:before,#mal\_cs\_powered:hover:before,
 #mal\_cs\_listinfo:hover:after,#mal\_cs\_links:hover:after, 
 #mal\_cs\_otherlinks:hover:after,#mal\_cs\_powered:hover:after {
background-color: var(--hover-background);
background-image: var(--sprites-hover) !important;
opacity: 1;
}
 #mal\_cs\_listinfo:hover, #mal\_cs\_links:hover, #mal\_cs\_otherlinks:hover, #mal\_cs\_powered:hover {
background-image: var(--sprites-hover);
}
/*POSITION OF TOP BAR.Change to absolute if you want it to not scroll with the page.*/
#mal\_control\_strip {
position: fixed !important;
background-color: transparent !important;
background-image: url(none) !important;
}
/*OTHER CODES.If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own.*/
 #mal\_cs\_listinfo,#mal\_cs\_links,#mal\_cs\_otherlinks,#mal\_cs\_powered {
-moz-box-sizing: border-box;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
padding: 32px 0 0 !important;
position: fixed;
right: 4px;
text-align: center;
top: 4px;
z-index: 10;
width: 150px !important;
}
 #mal\_cs\_listinfo:hover,#mal\_cs\_links:hover,#mal\_cs\_otherlinks:hover,#mal\_cs\_powered:hover {
height: 200px !important;
padding-top: 32px;
}
 #mal\_cs\_listinfo div,#mal\_cs\_links div,#mal\_cs\_otherlinks div,#mal\_cs\_powered div,#mal\_cs\_powered dd {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 0 3px 0 0;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 6px 0 6px !important;
transition: opacity 0.4s ease-in-out 0s;
}
 #mal\_cs\_listinfo:hover div,#mal\_cs\_links:hover div,#mal\_cs\_otherlinks:hover div,#mal\_cs\_powered:hover div,#mal\_cs\_powered:hover dd {
opacity: 1;
}
 #mal\_cs\_listinfo div:nth-of-type(2),#mal\_cs\_links div:nth-of-type(2),#mal\_cs\_otherlinks div:nth-of-type(2),#mal\_cs\_powered div:nth-of-type(2) {
border-radius: 0 0 3px 3px;
padding: 4px 0 8px;
}
 #mal\_cs\_listinfo a,#mal\_cs\_links a,#mal\_cs\_otherlinks a,#mal\_cs\_powered a {
background-color: var(--second-background);
border-radius: 3px 3px 3px 3px;
display: block;
font: 13px/17px arial,sans-serif;
margin: 4px 12px 0;
padding: 3px 0;
text-decoration: none;
}
 #mal\_cs\_listinfo a:nth-of-type(1),#mal\_cs\_links a:nth-of-type(1),#mal\_cs\_otherlinks a:nth-of-type(1),#mal\_cs\_powered a:nth-of-type(1) {
margin-top: 0;
}
 #mal\_cs\_listinfo strong a strong {
font-weight: normal;
}
 #mal\_cs\_otherlinks strong {
color: var(--main-text);
display: block;
font: normal 13px/17px arial,sans-serif !important;
padding: 0 4px 4px;
/*text-shadow: 0 1px 1px var(--shadow);*/
}
/*COLOR OF USERNAME (for visitors).You don't see this username on the menus when you're logged in, log out to see it. */
 #mal\_cs\_otherlinks strong a:hover {
color: var(--main-color) !important;
background-color: transparent !important;
}
 #mal\_cs\_otherlinks strong a {
background: none repeat scroll 0 0 transparent !important;
border-color: transparent !important;
border-radius: 0 0 0 0;
color: var(--shadow) !important;
display: inline;
font: bold 13px/17px arial,sans-serif !important;
margin: 0;
padding: 0;
text-shadow: 0px 0px;
}
 #mal\_cs\_powered a {
border-radius: 0 3px 0 0 !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0 !important;
}
 #mal\_cs\_powered:hover a {
opacity: 1;
}
 #mal\_cs\_powered a img {
transition: all 0.25s ease-in-out 0s;
background: var(--mal) no-repeat scroll 50% 6px var(--second-background);
border-radius: 3px 3px 3px 3px;
display: block;
height: 0;
margin: 0 12px;
padding: 23px 0 0 126px;
width: 0;
}
 #mal\_cs\_powered a img:hover {
background-color: var(--hover-background);
}
 #mal\_cs\_powered #search {
border-radius: 0 0 3px 3px;
padding: 8px;
position: relative;
}
 #mal\_cs\_powered #search #searchBox {
-moz-box-sizing: border-box;
border-color: var(--shadow);
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: var(--main-color);
display: inline-block;
font-family: arial,sans-serif;
font-size: 13px;
height: 28px;
padding-left: 6px !important;
padding-right: 24px !important;
vertical-align: top;
width: 100px;
}
#mal_cs_powered #search #searchBox:hover, #mal_cs_powered #search #searchBox:active, #mal_cs_powered #search #searchBox:focus
{
    border-color: var(--main-color) !important;
}
 #mal\_cs\_powered #search #searchBox:hover,#mal\_cs\_powered #search #searchBox:focus {
border-color: var(--main-color);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
 #mal\_cs\_powered #search #searchListButton {
border-radius: 3px 3px 3px 3px;
height: 0;
margin: 0;
padding: 16px 0 0 16px;
position: absolute;
right: 12px;
top: 14px;
width: 0;
background: var(--sprites-hover) no-repeat scroll 0 0 transparent;
}
#mal\_cs\_powered #search #searchListButton:hover {
background: var(--sprites-hover) no-repeat scroll 0 -16px transparent;
}

 #mal\_cs\_listinfo {
right: 106px;
}
 #mal\_cs\_listinfo:hover, #mal\_cs\_listinfo:hover:before, #mal\_cs\_listinfo:hover:after {
background-position-x: -20px !important;
}
 #mal\_cs\_links {
right: 72px;
z-index: 9;
}
 #mal\_cs\_links:hover, #mal\_cs\_links:hover:before, #mal\_cs\_links:hover:after {
background-position-x: -55px !important;
}
 #mal\_cs\_otherlinks {
right: 38px;
z-index: 8;
}
 #mal\_cs\_otherlinks:hover, #mal\_cs\_otherlinks:hover:before, #mal\_cs\_otherlinks:hover:after {
background-position-x: -90px !important;
}
 #mal\_cs\_powered {
right: 4px !important;
z-index: 7;
}
 #mal\_cs\_powered:hover, #mal\_cs\_powered:hover:before, #mal\_cs\_powered:hover:after {
background-position-x: -125px !important;
}
td#mal\_cs\_pic a img {
display: none;
}
#mal\_cs\_pic, #mal\_cs\_listinfo, #mal\_cs\_links {
border-right: 0 none !important;
}
 #mal\_cs\_listinfo,#mal\_cs\_links,#mal\_cs\_otherlinks,#mal\_cs\_powered {
padding: 32px 0 0 !important;
}
 #mal\_cs\_listinfo:before, 
 #mal\_cs\_links:before, 
 #mal\_cs\_otherlinks:before, 
 #mal\_cs\_powered:before {
z-index: 10 !important;
content: "";
left: 0 !important;
top: 0 !important;
width: 32px !important;
position: absolute !important;
border-radius: 4px;
} 
 #mal\_cs\_listinfo:after{
background-position-x: 0px;
}
 #mal\_cs\_links:after{
background-position-x: -35px;
}
 #mal\_cs\_otherlinks:after{
background-position-x: -70px;
} 
 #mal\_cs\_powered:after{
background-position-x: -105px;
}
 #mal\_cs\_listinfo:after, 
 #mal\_cs\_links:after, 
 #mal\_cs\_otherlinks:after, 
 #mal\_cs\_powered:after {
z-index: 100 !important;
content: "";
left: 0 !important;
top: 0 !important;
width: 32px !important;
height: 32px !important;
position: absolute !important;
background-image: var(--sprites);
background-color: var(--main-background);
}
#mal\_cs\_listinfo,#mal\_cs\_links,#mal\_cs\_otherlinks,#mal\_cs\_powered {
background-position: 0 0 !important;
}
 #mal\_cs\_listinfo {
left: 5px !important;
z-index: 1 !important;
}
 #mal\_cs\_links {
left: 40px !important;
z-index: 2 !important;
}
 #mal\_cs\_otherlinks {
left: 75px !important;
z-index: 3 !important;
}
 #mal\_cs\_powered {
left: 110px !important;
z-index: 4 !important;
}
#searchBox {
width: 128px !important;
margin-left: 1px;
}
#mal_cs_powered #search #searchListButton {
right: 15px !important;
top: 12px !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#searchBox {
width: 96px !important;
}
}
#mal\_control\_strip {z-index: 1;} /*menu not showing fix by Doomcat55. Thank you!*/