/* ==UserStyle== @name MyAnimeList Redesign @version 0.2.7 @namespace userstyles.world/user/shaggyze @description Dark Mode MyAnimeList Redesign Modified by ShaggyZE @author shaggyze @license No License ==/UserStyle== */ @-moz-document regexp("http(s|)://(www\\.|mxj.|)(?!image\\.)myanimelist\\.net/(?!animelist|mangalist|rss|ownlist).*") { /* * MyAnimeList Redesign originally by Valerio Lyndon * * * https://github.com/ValerioLyndon * https://myanimelist.net/profile/Valerio_Lyndon * * * TABLE OF CONTENTS * * RESOURCES : resources loaded from outside sources * * VARIABLES : set the theme's colours, images, etcetera * * PAGE-BASE : basic site-wide page layout * * PAGE-HEADER : site-wide page navigation * * FOOTER : site-wide footer * * EVENT-THEMES : christmas themes and more * * CONTENT : generic, re-used parts of code * Headings * * * * * * * * * * * * * * * * */ /*==============================*\ !RESOURCES \*==============================*/ @\import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto+Condensed:400,700|Roboto+Mono'); /* OPEN SANS */ /* Regular latin-ext */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Xdc1UAw.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhlIqOjjg.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhrIqM.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYbw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }:root { /* Base Colours */ --page: hsl(30, 0%, 10%); --content: hsl(30, 0%, 19%); --content-rgb: 49, 48, 47; --content-dim: hsl(30, 0%, 16%); --content-dim-rgb: 42, 41, 40; --content-dimmer: hsl(30, 0%, 13%); --content-dimmest: hsl(30, 0%, 10%); --border: #404040; --accent-bright: hsl(46, 63%, 46%); /*unused as of yet*/ --accent: hsl(46, 49%, 44%); --accent-rgb: 166, 140, 57; --accent-dim: hsl(46, 32%, 28%); --accent-dimmer: hsl(46, 35%, 20%); --accent-dimmest: hsl(46, 25%, 18%); --notif: hsl(223, 49%, 60%); --notif-rgb: 102, 130, 202; --text: hsl(0, 0%, 86%); --text-dim: hsl(0, 0%, 74%); --text-dimmer: hsl(0, 0%, 60%); --text-dimmest: hsl(0, 0%, 50%); --text-heading: hsl(0, 0%, 89%); --text-lnk: hsl(0, 0%, 98%); --text-lnk: hsl(45, 76%, 59%); --text-lnk-hov: hsl(45, 100%, 60%); --icon: hsl(0, 0%, 69%); --return-bad: hsl(0, 85%, 59%); --page-shadow: 3px 1.5px 5px hsla(0,0%,0%,25%); /* Header Colours */ --header: hsl(0, 0%, 13%); --header-rgb: 34, 34, 34; --header-dim: hsl(0, 0%, 25%); --header-hov: hsl(0, 0%, 26%); --header-border: hsl(0, 0%, 6.6667%); --header-border-alt: hsl(0, 0%, 3.3334%); --header-text: hsl(0, 0%, 96%); --header-text-dim: hsl(0, 0%, 86%); --header-icon: hsl(0, 0%, 89%); /* Specific Colours */ --quotebox-bg: #2c2b2a; --quotebox-bg: rgba(15,10,10,0.1); --codebox-bg: #3c402f; --codebox-bg: #2a2b2b; --codebox-text: #96af1d; --codebox-text: #99b6c2; /* Status Colours */ /* --allanime: #ff00de; */ --watching: #c28639; --completed: #364e88; --onhold: #ccb050; --dropped: #c84e50; --planned: #454545; /* Timings */ /* REMOVE THESE DEFUNCT ONES */ --time-long: 0.3s; --time-medium: 0.24s; --time-short: 0.12s; --time-img: 0.24s; --time-btn-large: 0.2s; --time-btn-small: 0.12s; --time-function-bounce: cubic-bezier(0.5, 0, 0.25, 1.2); /* Fonts */ --font-size: 12px; --fontset-basic: "Open Sans", "Arial", "Font Awesome 6 Pro", sans-serif; --fontset-heading: "Roboto Condensed", "Open Sans", "Arial", "Font Awesome 6 Pro", sans-serif; --fontset-monospace: "Roboto Mono", "Ubuntu Mono", "Font Awesome 6 Pro", monospace; /* Images */ --img-bg: url(https://i.imgur.com/5a80nyh.png) 1px 1px / auto repeat; --img-socials: url(https://i.imgur.com/F4pMdCJ.png); --img-socials-alt: url(https://i.imgur.com/l6AR23x.png); --img-missing: url(https://i.imgur.com/AeA2JxM.png); --img-icon-close: none; --img-icon-resize: url(https://files.catbox.moe/nv0brx.svg); --img-icon-arrow-up: url(https://i.imgur.com/iMOZI4Q.png); --img-icon-arrow-rt: none; --img-icon-arrow-dn: url(https://i.imgur.com/Oe1DIWT.png); --img-icon-arrow-lt: none; } /* BLUE THEME */ :root { --header: #2a2a2a; --page: #2a2a2a; --content: #303030; --accent: #7994bc; --accent-dim: #4e678d; --accent-dimmer: #344969; --accent-dimmest: #28384f; --notif: #df6464; --notif-0: #df646400; --text-lnk: #99b0d3; --text-lnk-hov:hsl(223, 49%, 60%); --watching: #bbbbdd; --completed: #9999bb; --onhold: #777799; --dropped: #555577; --planned: #444455; } /*==============================*\ !PAGE-BASE \*==============================*/ html { font: var(--font-size)/1 var(--fontset-basic); } body:not(.ownlist) { /* background: #f9f9ff no-repeat fixed center center / cover !important; */ /* background: var(--page) url(https://i.imgur.com/d5hZgll.png) 1px 1px / auto repeat !important; */ background: var(--page) var(--img-bg) !important; /* background: var(--page) url(https://i.imgur.com/gpQ795m.gif) center / cover no-repeat fixed !important; background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://i.imgur.com/gpQ795m.gif) !important; */ color: var(--text); font: inherit !important; } .page-common #myanimelist { position: static; overflow: visible !important; } @media (min-width: 1630px) { .page-common #myanimelist { width: 1600px; } } body:not(.ownlist)::before { content: none; } #myanimelist:before, #myanimelist:after { display: none; } .page-common .wrapper { display: flex; flex-wrap: wrap; justify-content: stretch; } .page-common #contentWrapper { width: 100%; padding: 0; background: var(--content); box-shadow: var(--page-shadow); margin: 20px auto; order: 30; } .page-common #content { position: static; background: none; padding: 70px 10px 10px !important; border: none; } .page-common .wrapper > div[style="clear:both;"] { order: 4; } .page-common .watch-state-icon.watched { color: var(--text-lnk-hov); } body.news h2, .page-common .mb16, .page-common .pt16, body.news .news-container .title, body.news .news-container .summary, .featured-article-body p, .news-list .comment-list .text, .news-list .news-unit .text { color:#FFF !important; } body.news .news-container .tags, body.news .news-container .news-info-block, body.news .news-container .information { background: var(--content) !important; box-shadow: var(--page-shadow) !important; } .page-common .icon { padding-top: 2.5px; width: 30px !important; } /*==============================*\ !PAGE-HEADER \*==============================*/ #menu:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; min-width: 1060px; height: 54px; border-bottom: 1px solid var(--header-border); box-shadow: var(--page-shadow); z-index: -1; } /* LOGO */ .page-common #headerSmall > a.link-mal-logo { position: absolute; top: 12px; right: 1030px; z-index: 995; width: 30px; height: 30px; border-radius: 15px; font-size: 0; text-align: center; text-indent: 0; text-decoration: none !important; transition: background var(--time-btn-large) ease; } @media (min-width: 1630px) { .page-common #headerSmall > a.link-mal-logo { right: 1400px; } } .page-common #headerSmall > a.link-mal-logo:hover { background: var(--header-hov); } .page-common #headerSmall > a.link-mal-logo:before { content: "\f015"; color: var(--header-icon); font: 16px/30px 'Font Awesome 6 Pro'; } /* ACCOUNT */ .page-common #headerSmall { position: relative; width: auto; height: 54px; padding: 0; background: none !important; border-bottom: 1px solid transparent; flex: 0 0 auto; order: 20; } .page-common #header-menu { position: static !important; top: 0 !important; background: none; box-shadow: var(--header-border); border-bottom: 1px solid var(--header-border); display: flex; height: 54px; } @media (min-width: 1630px) { .page-common #menu { padding-left: 170px; } .page-common #headerSmall { padding-right: 170px; } } .page-common #header-menu .header-menu-unit { display: block !important; height: auto !important; padding: 0; cursor: auto; z-index: 1000; } .page-common #header-menu > .border { display: none; } /* ACCOUNT ICONS */ .page-common #header-menu .header-menu-unit:not(.header-profile) { width: auto !important; } .page-common #header-menu .header-menu-unit:not(.header-profile) > a, .page-common #header-menu .header-notification .header-notification-button { width: 40px; height: 40px; border-radius: 20px; margin-top: 7px; color: var(--header-icon) !important; transition: all var(--time-btn-large) ease; } .page-common #header-menu .header-menu-unit .header-notification-button .fa, .page-common #header-menu .header-menu-unit > a .fa { line-height: 40px; } .page-common #header-menu .header-message a .fa { line-height: 36px; } .page-common #header-menu .header-menu-unit:not(.header-profile) > a:hover, .page-common #header-menu .header-notification:hover .header-notification-button:hover { background: var(--header-hov) !important; } /* ACCOUNT LIST DROPDOWN */ .page-common .header-list .header-list-dropdown { top: 54px; left: 50%; width: 94px; background: var(--header); border: 1px solid var(--header-border); border-radius: 0 0 0 15px; border-top: none; box-shadow: none; margin-left: -48px; overflow: hidden; } .page-common .header-list .header-list-dropdown ul li a { height: 30px; padding: 0 10px; background: none; border: none; color: var(--header-text-dim); line-height: 30px; transition: all var(--time-btn-small) ease; } .page-common .header-list .header-list-dropdown ul li a:hover { background: var(--header-hov); } /* ACCOUNT NOTIFICATIONS */ /* Base */ .page-common #header-menu .header-notification { position: static; } .page-common #header-menu .header-notification-button.has-unread:after, .page-common #header-menu .header-message-button.has-unread:after { top: 3px; right: 0; left: auto; width: 16px; height: 16px; padding: 0; background: var(--notif); border-radius: 8px; border: none; color: var(--header-text); line-height: 16px; font-weight: bold; transition: inherit; } .page-common #header-menu .header-notification-button.has-unread:after { top: 2px; right: 2px; } .page-common #header-menu .header-message-button.has-unread:after { top: 2px; right: -2px; } .page-common .header-notification-dropdown { right: 0; top: 54px; box-shadow: none; } .page-common .header-notification-dropdown .arrow_box { background: var(--header); border-style: solid; border-color: var(--header-border); border-width: 0 1px 1px 1px; } .page-common .header-notification-dropdown-inner { width: 528px; width: calc(1060px * 0.6667); } /* Links */ .page-common .header-notification-item-list a { color: var(--text-lnk) !important; } .page-common .header-notification-item-list a:hover { color: var(--text-lnk-hov) !important; } /* Top Bar */ .page-common .header-notification-dropdown-inner h3 { padding: 10px; background: var(--header-border); border: none; color: var(--header-text); font: bold 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } .page-common .header-notification-dropdown-inner h3 .settings { margin-left: 10px !important; } .page-common .header-notification-dropdown-inner h3 a, .page-common .header-notification-dropdown-inner h3 .mark-all { display: inline-block; padding: 10px; margin: -10px -10px 0 0; color: var(--header-text-dim) !important; font-size: 0.9rem; transition: all var(--time-btn-small) ease; } .page-common .header-notification-dropdown-inner h3 a:hover, .page-common .header-notification-dropdown-inner h3 .mark-all:not(.disabled):hover { background: var(--header-border-alt); } .page-common .header-notification-dropdown-inner h3 .mark-all.disabled { color: var(--text-dimmest) !important; } .page-common .header-notification-dropdown-inner h3 i { margin-top: -2px; vertical-align: middle; } /* Items */ .page-common .header-notification-item-list { width: 100%; height: calc(70vh); min-height: 300px; max-height: 700px; } .page-common .header-notification-item:hover { background: var(--header-hov) !important; } .page-common .header-notification-item { position: relative; height: auto; padding: 0; border-bottom: 1px solid var(--header-border) !important; /* transition: all var(--time-btn-small) ease; */ } /* .page-common .header-notification-item a.background { z-index: initial; } */ .page-common .header-notification-item.new { background: none; } .page-common .header-notification-item .inner { padding: 10px; } .page-common .header-notification-item .inner.is-read a { opacity: 0.7; } /* .page-common .header-notification-item .inner:not(.is-read):before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 20%; height: 100%; background: linear-gradient(to right, rgba(var(--notif-rgb), 0.3), rgba(var(--notif-rgb), 0)); } */ .page-common .header-notification-item .inner:not(.is-read) { margin-right: 40px; border-left: 4px solid var(--notif); color: var(--text-dim); } .page-common .header-notification-item .inner.is-read { color: var(--text-dimmest); } /* Checkmark */ .page-common .header-notification-item .inner:not(.is-read) .is-read { position: absolute; right: 0; top: 0; z-index: 2; display: flex; width: 40px; height: 100%; background: var(--header-border); justify-content: center; align-items: center; float: none; color: var(--text); } .page-common .header-notification-item .inner:not(.is-read) .is-read .fa-check { width: 26px; height: 26px; border-radius: 13px; font-size: 16px; line-height: 26px; text-align: center; transition: all var(--time-btn-small) ease; } .page-common .header-notification-item .inner:not(.is-read) .is-read:not(.checked) .fa-check:hover { background: rgba(var(--notif-rgb), 0.5); } .page-common .header-notification-item-header .is-read.checked .fa-check-circle { display: none; } .page-common .header-notification-item-header .is-read.checked .fa-check { display: inline-block; background: var(--notif); } .page-common .header-notification-item-header .category { color: var(--text) !important; } .page-common .is-read .header-notification-item-header .category { color: var(--text-dimmer) !important; } .page-common .header-notification-item-header .time { color: var(--text-dimmer) !important; } .page-common .is-read .header-notification-item-header .time { color: var(--text-dimmest) !important; } /* Friend Requests */ .page-common .header-notification-item-content { margin: 3px 0 0; } #myanimelist .actions .result, #myanimelist .actions .action-button { height: 20px; background: var(--header-border); padding: 0 3px; border: none; border-radius: 10px; color: var(--text); font-size: 0.9rem; line-height: 20px; transition: all var(--time-btn-small) ease; } #myanimelist .actions .result:hover, #myanimelist .actions .action-button:hover { background: var(--notif) !important; } #myanimelist .actions .action-button.deny { background: var(--header-border); } #myanimelist .actions .action-button.accept { background: var(--accent-dim); } #myanimelist .actions .result { background: var(--notif); } /* Bottom Bar */ .page-common .header-notification-view-all a { height: 33px; background: var(--header); border-top: 1px solid var(--header-border); line-height: 33px; } .page-common .header-notification-view-all a:hover { background: var(--header-hov); } /* ACCOUNT PROFILE */ .page-common .header-profile.link-bg { padding: 0 !important; background: none !important; margin-right: -22px; } .page-common #header-menu .header-profile .header-profile-link { position: relative; height: 40px; padding: 0 30px 0 8px; background: none !important; margin-top: 7px; border-radius: 20px 0 0 20px; color: var(--header-text); font: 700 1.2rem/40px var(--fontset-basic); transition: all var(--time-btn-large) ease; } .page-common #header-menu .header-profile .header-profile-link:hover { background: var(--header-hov) !important; text-decoration: none !important; } /* PROFILE DROPDOWN */ .page-common .header-profile .header-profile-dropdown { position: absolute; right: -12px; top: 54px; width: 100%; background: var(--header); border-style: solid; border-color: var(--header-border); border-width: 0 1px 1px 1px; border-radius: 0 0 0 15px; box-shadow: none; overflow: hidden; } .page-common .header-profile .header-profile-dropdown ul { display: flex; flex-flow: column; } .page-common .header-profile .header-profile-dropdown ul li a { height: 30px; padding: 0 10px; background: none; border: none; color: var(--header-text-dim); line-height: 30px; transition: all var(--time-btn-small) ease; } .page-common .header-profile .header-profile-dropdown ul li a:hover { background: var(--header-hov); } /* Dividers */ .page-common .header-profile .header-profile-dropdown ul li:last-child:before, .page-common .header-profile .header-profile-dropdown ul li:nth-child(8):after { content: ""; display: block; height: 1px; margin: 3px 0; background: var(--header-border); } /* Items */ .page-common .header-profile .header-profile-dropdown ul li:nth-child(1), .page-common .header-profile .header-profile-dropdown ul li:nth-child(7), .page-common .header-profile .header-profile-dropdown ul li:nth-child(8) { order: 1; } .page-common .header-profile .header-profile-dropdown ul li:nth-child(2), .page-common .header-profile .header-profile-dropdown ul li:nth-child(3), .page-common .header-profile .header-profile-dropdown ul li:nth-child(4), .page-common .header-profile .header-profile-dropdown ul li:nth-child(5), .page-common .header-profile .header-profile-dropdown ul li:nth-child(6) { order: 5; } .page-common .header-profile .header-profile-dropdown ul li:last-child { order: 9; } .page-common .header-profile .header-profile-dropdown ul li a .fa { display: none; } /* HEADER - PROFILE PICTURE */ .page-common #header-menu .header-profile.pl0 { margin-top: 7px !important; } .page-common .header-profile-button { width: 40px; height: 40px; border-radius: 50%; box-shadow: none; transition: all var(--time-img) ease; } .page-common .header-profile-button:hover { opacity: 1; } .header-profile-button:before { content: ""; display: block; width: 100%; height: 100%; background: var(--header); opacity: 0; transition: all var(--time-btn-small) ease; } .header-profile-button:hover:before { opacity: 0.3; } .review-element .thumbbody .body .rating { color: var(--text); } /* =============================================== HEADER / NAV =============================================== */ #nav > li > ul > li > a { z-index: 900; } .page-common #menu { display: flex; width: 650px !important; height: 54px; background: none; border-bottom: 1px solid transparent; flex: 1 0 auto; order: 10; justify-content: space-between; } /* LOGGED OUT */ .page-common #header-menu .header-menu-login .btn-mal-service { display: none; } .page-common #header-menu .header-menu-login .btn-login, .page-common #header-menu .header-menu-login .btn-signup { width: auto !important; height: 40px; padding: 0 8px; border-radius: 20px; margin: 7px 0 0 0; background: transparent; border: none !important; color: var(--header-text) !important; font: 1.2rem/40px var(--fontset-heading); text-transform: uppercase; transition: all var(--time-btn-small) ease; } .page-common #header-menu .header-menu-login .btn-signup { background: rgba(var(--notif-rgb), 0.5); } .page-common #header-menu .header-menu-login .btn-login:hover { background: var(--header-hov); } .page-common #header-menu .header-menu-login .btn-signup:hover { background: rgb(var(--notif-rgb)); } .page-common #header-menu .header-menu-login .btn-login:after { content: "\f007"; margin-left: 4px; color: var(--header-icon); font-family: "Font Awesome 6 Pro"; } .page-common #header-menu .header-menu-login .btn-signup:after { content: "\f067"; margin-left: 4px; color: var(--header-icon); font-family: "Font Awesome 6 Pro"; font-weight: normal; } .page-common #header-menu .header-menu-login .btn-signup { font-weight: bold; margin-left: 5px; } /* LINKS */ .page-common #menu_left { padding-left: 30px; float: none; order: 1; } .page-common #nav { display: flex; } .page-common #nav li { z-index: 901; text-indent: 0; transition: all var(--time-btn-small) ease; } .page-common #nav li:hover { background: var(--header-hov) !important; } .page-common #nav > li { width: auto !important; height: 30px; margin-top: 12px; border-radius: 15px; } .page-common #nav > li > .non-link { height: 30px; padding: 0 8px; background: none !important; color: var(--header-text) !important; line-height: 30px; text-align: left; cursor: default; pointer-events: none; } .page-common #nav > li > ul { left: -4px; display: block !important; width: 150px !important; background: none !important; border-radius: 0 0 15px 0; border-width: 0 1px 1px 1px; border-style: solid; border-color: var(--header-border); box-shadow: none; margin-top: 12px; overflow: hidden; opacity: 0; transition: all var(--time-btn-small) ease-in; pointer-events: none; } .page-common #nav > li:hover > ul { left: 0; opacity: 1; pointer-events: auto; transition-timing-function: ease-out; } .page-common #nav > li:hover:before { content: ""; position: absolute; left: 0; top: 15px; display: block; width: 100%; height: 27px; } .page-common #nav > li > ul > li { width: 100% !important; } .page-common #nav > li > ul > li > a { height: 30px; padding: 0 10px; line-height: 30px; } .page-common #nav > li > ul > li > a { background: var(--header) !important; color: var(--header-text-dim) !important; white-space: nowrap; transition: all var(--time-btn-small) ease; } .page-common #nav > li > ul > li > a:hover { background: var(--header-hov) !important; } #nav > li:nth-child(3) > ul > li:nth-child(1) { margin-top: 30px; } #nav > li:nth-child(3) > ul > li:nth-child(2) { margin-top: -60px; } /* =============================================== HEADER / NAV / SEARCH =============================================== */ .page-common #menu_right { position: static; width: 200px; height: 42px; padding: 12px 20px 0; float: none; flex-grow: 1; order: 2; } #top-search-bar { position: relative; } #top-search-bar #searchBar { display: flex; height: 30px; padding: 0; background: var(--header-dim); border-radius: 15px; overflow: hidden; justify-content: right; } .page-common #searchBar.searchBar .form-select-outer { width: 50px; height: 100%; } .page-common #searchBar.searchBar #topSearchValue { width: 100%; height: 100%; padding: 5px 2px 5px 4px; background: transparent var(--img-icon-arrow-dn) 38px 14px / auto no-repeat !important; border: none; box-sizing: border-box; color: var(--text-dim); font: 0.9rem/20px var(--fontset-basic); cursor: pointer; } .page-common #searchBar.searchBar #topSearchValue:focus { background-color: var(--header-hov) !important; } .page-common #searchBar.searchBar #topSearchText { width: 100px; height: 100%; padding: 5px 0; background: none !important; border: none; box-sizing: border-box; flex-grow: 1; color: var(--text-dim); font: 0.9rem/20px var(--fontset-basic); } .page-common #searchBar.searchBar #topSearchButon { width: 25px; height: 100%; padding: 5px 2px 5px 0; background: none !important; border: none !important; box-sizing: border-box; color: var(--header-text-dim) !important; transition: all var(--time-medium) ease; } .page-common #searchBar.searchBar #topSearchButon.notActive { pointer-events: none; } .page-common #searchBar.searchBar #topSearchButon:not(.notActive):hover { background: var(--header-hov) !important; } /* Results */ .page-common #topSearchResultList { top: 42px !important; left: -65px !important; right: -65px; background: var(--header); width: auto !important; border-width: 0 1px 1px 1px; border-style: solid; border-color: var(--header-border); border-radius: 0 0 15px 15px; box-shadow: none; box-sizing: border-box; overflow: hidden; z-index: 901; } @media (min-width: 1630px) { .page-common #topSearchResultList { left: 15px !important; right: 15px; } } #topSearchResultList .list { background: none; border-radius: 0; } #topSearchResultList .list.focus { background: var(--header-hov); } #topSearchResultList .list .image { border: 2px solid var(--header-border); } #topSearchResultList .list .name { color: var(--text-dim) !important; } #topSearchResultList .list .media-type { color: var(--text-dimmest) !important; } #topSearchResultList .list .extra-info { color: var(--text-dimmer) !important; } #topSearchResultList .list.separator { height: 13px; padding: 7px 10px; background: var(--header-border); pointer-events: none; } #topSearchResultList .list.separator span { color: var(--text); font: bold 1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } #topSearchResultList .list-bottom { background: var(--content-dim) !important; text-align: center; } #topSearchResultList .list-bottom.focus { height: 92px; background: var(--accent) !important; line-height: 76px; } #topSearchResultList .list.list-bottom a { color: var(--header-text); } #topSearchResultList .list.list-bottom.focus a { color: var(--header); } /* FAQS */ .faq-container .faq-lists { color: #fff !important; } .faq-container .faq-lists .question:hover { color: #000 !important; } /* =============================================== !FOOTER =============================================== */ footer { position: relative; min-width: 1060px; box-shadow: var(--page-shadow); z-index: 1; } .page-common #footer-block { background: transparent; } .page-common iframe.fb-page { display: none; } .page-common #footer-block .footer-link a { height: 14px; padding: 5px 5px; margin: 0 5px 0 0; color: var(--text-heading); font-size: 1rem; transition: all var(--time-medium) ease; } /* First Div */ .page-common #footer-block .footer-link-block { position: relative; padding-bottom: 17px; background: none; } .page-common #footer-block .footer-link-block:after { content: ""; position: absolute; left: calc(50% - 360px); bottom: 0; width: 720px; height: 1px; background: linear-gradient(to right, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0)); } .page-common #footer-block .footer-link { border-color: var(--accent-dim) !important; } /* Second Div */ .page-common #footer-block .footer-social-media:before { background: var(--accent-dim); } .page-common #footer-block .footer-social-media .icon-sns { background-image: var(--img-socials-alt); /*/images/footer/footer-icon-sns.png?v=150421001*/ transition: all var(--time-medium) ease; } .page-common #footer-block .footer-recommended .icon-recommended { color: var(--text-heading); transition: all var(--time-medium) ease; } .page-common #footer-block div:after, .page-common #footer-block #copyright { color: var(--accent) !important; font-size: 1rem !important; } #copyright:after { content: "MAL Redesign by ShaggyZE | Version 0.2.7"; display: block; margin-top: 5px; } /*==============================*\ !EVENT-THEMES \*==============================*/ #menu_left { position: relative; } #menu_left:before { position: absolute; left: 0; top: 0; z-index: -1; width: 1060px; height: 100%; background: transparent repeat center / auto; } @media (min-width: 1630px) { #menu_left:before { left: -50px; width: 1360px; } } /* Easter */ .page-common #menu.easter #menu_left { background-color: transparent; } .easter #menu_left:before { content: ""; background-image: linear-gradient(to right, var(--header) 0%, rgba(var(--header-rgb), 0) 10%, rgba(var(--header-rgb), 0) 90%, var(--header) 100%), url(https://myanimelist.net/images/event/2019_easter/75f397d4d9.png?v=180226001) !important; /*TEMP IMAGE*/ opacity: 0.15; } /* Christmas */ .christmas #headerSmall > a.link-mal-logo:before { content: "\f1bb"; } .christmas #menu_left:before { content: ""; background-image: linear-gradient(to right, var(--header) 0%,rgba(var(--header-rgb), 0) 10%, rgba(var(--header-rgb), 0) 90%, var(--header) 100%), url(https://i.imgur.com/ZZ0tE6x.png) !important; background-size: auto 54px !important; opacity: 0.08; } /*==============================*\ !GENERIC \*==============================*/ /* Scrollbar - Firefox */ * { scrollbar-color: var(--accent-dimmer) var(--content-dimmer); /* scrollbar-width: thin; */ } /* Scrollbar - Chrome/Webkit */ *::-webkit-scrollbar { width: 15px; background: var(--content-dimmest); cursor: default; } *::-webkit-scrollbar-track { background: var(--content-dimmer); border-radius: 7.5px; } *::-webkit-scrollbar-thumb { background: var(--accent-dimmer); border-radius: 7.5px; } *::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); } *::-webkit-scrollbar-button, *::-webkit-scrollbar-corner { background: var(--content-dimmest); } *::-webkit-scrollbar-button:vertical:decrement { background: transparent var(--img-icon-arrow-up) no-repeat center / 8px auto; } *::-webkit-scrollbar-button:vertical:increment { background: transparent var(--img-icon-arrow-dn) no-repeat center / 8px auto; } *::-webkit-scrollbar-button:horizontal:decrement { background: transparent var(--img-icon-arrow-lt) no-repeat center / auto 8px; } *::-webkit-scrollbar-button:horizontal:increment { background: transparent var(--img-icon-arrow-rt) no-repeat center / auto 8px; } *::-webkit-resizer { background: transparent var(--img-icon-resize) no-repeat right bottom / 12px 12px; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 17px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: var(--content-dimmer); border-radius: 8.5px; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 8.5px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Divs */ /* .page-common .pt24 { padding-top: 20px !important; } .page-common .pb24 { padding-bottom: 20px !important; } .page-common .mt8 { margin-top: 7px !important; } .page-common .mt12 { margin-top: 10px !important; } .page-common .mt24 { margin-top: 20px !important; } .page-common .mr8 { margin-right: 7px !important; } .page-common .mb8 { margin-bottom: 7px !important; } .page-common .mb12 { margin-bottom: 10px !important; } .page-common .mb24 { margin-bottom: 20px !important; } .page-common .ml8 { margin-left: 7px !important; } */ /* Text Colours */ .page-common .lightLink, .page-common .lightLink:link, .page-common .lightLink:visited, .page-common .lightLink:active, .page-common .dark_text, .page-common .dark_text:hover, .page-common .dark_text:visited { color: var(--text-dimmer); } .page-common .fn-grey1, .page-common .fn-grey6 { color: var(--text-dimmer) !important; } .page-common .fn-grey2, .page-common .fn-grey5 { color: var(--text-dimmest) !important; } .page-common a, .page-common a:visited { color: var(--text-lnk); } .page-common a:hover { color: var(--text-lnk-hov); } .page-common .fn-blue1 { color: var(--text-lnk) !important; } .page-common a.fn-blue1:hover { color: var(--text-lnk-hov) !important; } /* Text Sizes, Line Heights, Fonts */ .page-common td { font-size: 1rem; } .page-common .fs12 { font-size: 1rem !important; } .page-common .fs11 { font-size: 0.9rem !important; } .page-common .fs10 { font-size: 0.8rem !important; } small { font-size: 0.8rem; } .fa { font-size: 1.15rem; } .page-common .lh16 { line-height: 1.5 !important; } .page-common .ff-Verdana, .page-common .ff-avenir { font-family: var(--fontset-basic); } /* Text Headers */ .page-common .h1, .page-common .h2, .page-common .h3, .page-common .h4, .page-common .h5, .page-common .h6, .page-common h1, .page-common h2, .page-common h3, .page-common h4, .page-common h5, .page-common h6 { border-width: 0 0 2px; padding: 3px 4px; color: var(--text); font-family: var(--fontset-basic); } .page-common .badresult-text { color: var(--return-bad) } /* Borders & Containers */ :focus { outline-color: var(--accent); } .wrapper > div > div *:not(img) { border-color: var(--border); } .page-common .bgColor1 { background: none; } .page-common .bgColor2 { background: var(--content-dim); } .page-common .bgbdrContainer, .page-common .border_top, #dialog, .page-common .normal_header, .page-common .borderClass { border-color: var(--border); } .page-common .bgbdrContainer { background: var(--content-dim); } #dialog td { border: none; } /* Images */ .page-common div.picSurround { display: inline-block; background: var(--border); border: 2px solid var(--border); transition: all var(--time-img) ease; } .page-common div.picSurround:hover { opacity: 0.7; } .page-common div.picSurround img { padding: 0; border: none; } .lazyloaded { transition: all var(--time-img) ease; } /* Images - Empty Avatar */ #myanimelist img[src*="questionmark_50.gif"] { position: relative; object-position: 999px 999px; background: var(--header-border) var(--img-missing) no-repeat center / cover !important; } /* Images - Preview Button */ .icon-watch, .icon-watch-pv { background: none; width: auto; margin: 0 3px; overflow: visible; font-size: 0; line-height: 1; text-indent: 0; text-decoration: none !important; transition: all var(--time-btn-small) ease; } .icon-watch:before, .icon-watch-pv:before { content: "\f144"; color: var(--icon); font: 16px/16px "Font Awesome 6 Pro"; } .icon-watch:hover, .icon-watch-pv:hover { opacity: 0.7; } /* Buttons - Generic */ #myanimelist textarea, #myanimelist input, #myinfo_status, #myinfo_score, #Size, #Colour, .page-common .textarea { background-color: var(--content-dim); border-color: var(--border); border-style: solid; box-sizing: border-box; color: var(--text); font-size: 1rem; } #myanimelist button { background-color: var(--content-dim); border-color: var(--border); border-style: solid; box-sizing: border-box; font-weight: bold !important; color: var(--text); font-size: 1rem; } #myanimelist button:hover { border-color: var(--accent); } input:disabled, textarea:disabled { color: var(--text-dimmest); } .page-common .textarea, .page-common textarea { min-width: 15em; min-height: 6em; box-sizing: border-box; resize: both; } /* .page-common .textarea { background: var(--content-dim) var(--img-icon-resize) no-repeat right bottom / 12px 12px !important; } */ /* Buttons - Inputs */ #myanimelist .inputButton, .page-common .btn-form-submit, .page-common.ownlist_style_theme .inputButton { display: inline-block; height: 24px; padding: 4px 10px; background-color: var(--accent); border: none; border-radius: 15px; box-sizing: border-box; color: var(--border); font: bold 1rem/16px var(--fontset-basic); transition: all var(--time-btn-small) ease; } #myanimelist .inputButton:not(:disabled):hover, .page-common .btn-form-submit:not(:disabled):hover { background: var(--accent-dim); color: var(--text-lnk-hov); } .inputButton ~ .inputButton { margin-left: 5px; } #myanimelist .inputButton:disabled { background-color: var(--content-dimmer); color: var(--text-dimmest); opacity: 0.7; } .page-common .btn-topic-normal, .page-common .btn-topic-normal.inverse.noborder, #ShowAffinityList { background-color: var(--accent) !important; color: var(--border) !important; border: none !important; border-radius: 12px; font-weight: bold !important; font-size: 0.9rem !important; } .page-common .btn-topic-normal:hover, .page-common .btn-topic-normal.inverse.noborder:hover, #ShowAffinityList:hover { background-color: var(--accent-dim) !important; color: var(--text-lnk) !important; } /* Patches - Ownlist-style */ .page-common .inputButton.btn-middle:active { background: var(--accent); color: var(--border); } .page-common.ownlist_style_theme .inputButton:hover { color: var(--text-lnk-hov) !important;} /* Patches - page */ .page-common .btn-form-submit.js-btn-support-form { height: 32px; padding: 8px 30px !important; transition: all var(--time-medium) ease; } .page-support #myanimelist #content p, .page-support #myanimelist #content li, .page-support #myanimelist #content h3, .page-support #myanimelist #content h4 { color: var(--header-text) } /* #myanimelist .inputButton[value*="Delete"] { background-color: var(--return-bad); } */ /* Buttons - Nav */ .page-common .pagination { display: inline-block; background: var(--content-dim); border-radius: 12px; overflow: hidden; } .page-common .pagination .link { height: 18px; background: none; margin: 0; color: var(--text); line-height: 18px; transition: all var(--time-medium) ease; } .page-common .pagination .link:hover { background: var(--content-dimmer); } .page-common .pagination .link + .link { border-left: 2px solid var(--border); } .page-common .pagination .link.current { background: var(--accent-dim) } .page-common .pagination .link.current:hover { background: var(--accent) } /* Unknown Anime Images */ img[src*="qm_50.gif"] { position: relative; object-position: 999px 999px; background: var(--border) var(--img-missing) no-repeat center / cover !important; } /* ========== */ ul.ignored-user-list li:nth-child(2n) { background: var(--content-dim); } .page-common .goodresult, .page-common .successQuery { background: var(--content-dim); border-color: var(--border); } .page-common .goodresult a:link, .page-common .goodresult a:active, .page-common .goodresult a:visited { color: var(--text-lnk); } .page-common .goodresult a:hover { color: var(--text-lnk-hov); } .page-common .badresult { background-color: var(--return-bad); border-color: var(--border); } /* Random Pages that should really f****** use simple site-wide classes but instead use singular CSS rules for no HECKing reason */ h1.term-header1, h1[data="EULA"], h1[data="TermsOfUse"], .mal-address { background: none; border-bottom: 2px solid var(--border); } /* GENERIC @HEADINGS */ /*General*/ .page-common .normal_header, /*Panel*/ body.index .widget .widget-header, body.index .ranking-digest .ranking-header, /*Profile*/ .profile .content-container .container-right h2, /*Forums*/ .forum .forum-header, .forum .forum-side-block .header, /*Anime Search*/ .anime-manga-search .normal_header, /*Notifications*/ body.notification .notification-header, /*Ownlist-Style*/ .ownlist_style_theme .customize-content-left .header, .ownlist_style_theme .customize-content-left h2.theme-custom-header { padding: 10px; background: var(--content-dimmer); border: none; margin: 0; color: var(--text); font: bold 1.1rem/13px var(--fontset-heading); white-space: nowrap; letter-spacing: 0.05em; text-transform: uppercase; } /*General*/ .page-common .normal_header .floatRightHeader, /*Panel*/ body.index .widget .widget-header > span, /*Profile*/ .profile .content-container .user-comments h2 .floatRightHeader, /*Notifications*/ body.notification .notification-header .right-menu { display: flex; height: 13px; padding: 0; color: var(--text); font: normal 0.9rem/13px var(--fontset-heading); } /*General*/ .page-common .normal_header a, /*Panel*/ body.index .widget .widget-header > span a, .ranking-digest .ranking-header .btn-view_more, /*Profile*/ .profile .content-container .container-right h2.mb12 .floatRightHeader, .profile .content-container .user-comments h2 .floatRightHeader a, /*Forums*/ .forum .forum-header a, .forum .forum-side-block .header a, /*Anime Search*/ .anime-manga-search .normal_header .floatRightHeader, /*Notifications*/ body.notification .notification-header .right-menu .item { display: inline-block; height: 13px; padding: 10px; margin: -10px -10px 0 10px; color: var(--text-dim); font: bold 0.9rem/13px var(--fontset-heading); transition: all var(--time-btn-small) ease; } /*General*/ .page-common .normal_header .floatRightHeader a:hover, /*Panel*/ body.index .widget .widget-header > span a:hover, .ranking-digest .ranking-header .btn-view_more:hover, /*Profile*/ .profile .content-container .container-right h2.mb12 .floatRightHeader:hover, .profile .content-container .user-comments h2 .floatRightHeader a:hover, /*Forums*/ .forum .forum-header a:hover, .forum .forum-side-block .header a:hover, /*Anime Search*/ .anime-manga-search .normal_header .floatRightHeader:hover { background: var(--content-dimmest); } /* - - - - - - - - - - - - - - -*\ Patches \*- - - - - - - - - - - - - - - */ /* Patches - General */ .page-common .normal_header.pt24 { padding-top: 10px !important; } .floatRightHeader a:only-of-type { margin-left: 0 !important; } .normal_header small { font-size: 0.9rem; } .profile .content-container .user-comments h2 .floatRightHeader, .normal_header.club-information-header ~ .normal_header .floatRightHeader { font-size: 0; } /* Patches - Panel */ body.index .widget .widget-header > span a { font-size: 0.9rem !important; font-weight: bold !important; } /* Patches - Advertising */ .page-advertising #ad_menu { margin-left: 16.5%; } .page-advertising .ad-contents .ad-text-head3 { color: var(--header-text); } /* Patches - Forum */ .forum-table-header .normal_header a { margin: 0; padding: 0; } .forum-table-header .normal_header > a { color: var(--text); font-size: 1rem; } .forum-table-header .normal_header > a:after { content: " \f0dc"; font-family: "Font Awesome 6 Pro"; } /* Patches - Clubs */ .normal_header.club-information-header, .normal_header.club-information-header ~ .normal_header, .normal_header.club-information-header ~ * .normal_header { margin: 10px 0; } .normal_header.club-information-header ~ .normal_header .floatRightHeader a { font-weight: bold !important; } /* Patches - Notifications */ body.notification .notification-section .notification-header h3 { padding: 0; border: none; color: inherit; font: inherit; } body.notification .notification-header .right-menu .item.disabled { color: var(--text-dimmest); } /* Patches - Quickadd */ .normal_header.quickAdd-result-header { text-align: left; } /* Patches - Ownlist-Style */ .ownlist_style_theme .customize-content-left .header .header-text { padding: 0; color: inherit; font: inherit; } /* - - - - - - - - - - - - - - -*\ Icon About Recommendations \*- - - - - - - - - - - - - - - */ /* Recommendations Info Icon */ .page-common .icon-about-recommendations { margin-left: 5px; color: var(--accent); cursor: help; } .page-common .icon-about-recommendations:after { left: 0; right: auto; top: -5px; padding: 5px 10px; background: var(--content-dimmest); border: none; color: var(--text); font: 1rem/13px var(--fontset-basic); letter-spacing: 0; text-transform: none; pointer-events: none; z-index: 5; } @media (max-width: 1629px) { .page-common .quickadd-content .icon-about-recommendations.right:after { left: auto; right: -300px; } } /*------------------------------*\ GENERIC @Sub-Headings \*------------------------------*/ .profile .content-container .container-right h5, .ownlist_style_theme .customize-content-left h3.theme-custom-header { padding: 7px 10px; border-bottom: 2px solid var(--border); color: var(--text); font: bold 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } .profile .content-container .container-right h5 a { padding: 0; color: var(--text-dim); font: bold 0.9rem/13px var(--fontset-heading); } /* Patches - Profile */ .profile .content-container .container-right h5 { margin-bottom: 7px !important; } /* Patches - Ownlist-style */ .ownlist_style_theme .customize-content-left h3.theme-custom-header.js-theme-custom-header:active { background: none; } /*------------------------------*\ GENERIC @Sidebar-Headings \*------------------------------*/ .page-common .user-profile h4 /*Profile*/ { height: 13px; padding: 7px 10px; background: var(--content-dimmer); border: none; margin: 0; color: var(--text); font: bold 1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } .page-common .user-profile h4 a /*Profile*/ { display: inline-block; height: 14px; padding: 6px 10px; margin: -6px -10px 0 10px; color: var(--text-dim); font: bold 0.9rem/14px var(--fontset-heading) !important; transition: all var(--time-btn-small) ease; } .page-common .user-profile h4 a:hover /*Profile*/ { background: var(--content-dimmest); } /* Patches - Profile */ .page-common .user-profile h4 { margin: 6px 0; } .user-profile h4.icon-rss:after { position: static; width: 13px; height: 13px; background-size: 13px 13px; margin: 0 5px 0 0; float: left; } /* GENERIC @HOVERINFO */ .page-common .hoverinfo[style*="none"] { display: block !important; opacity: 0; pointer-events: none; } .page-common .hoverinfo:hover { opacity: 1; pointer-events: auto; } .page-common .hoverinfo { height: auto; background: var(--header); border: 1px solid var(--header-border); border-radius: 4px; box-shadow: none; margin-left: -15px; color: var(--text-dim); opacity: 1; transition: all var(--time-btn-small) ease; pointer-events: auto; } .page-common .hoverinfo .hoverinfo-contaniner { padding: 10px; } .page-common .hoverinfo:after { left: -20px; top: 12px; width: 0; height: 0; background: none; border-width: 15px 10px; border-style: solid; border-color: var(--header-border) var(--header-border) transparent transparent; transform: skewY(15deg); } .page-common .hoverinfo.left.top:after { left: -20px; top: 12px; } .page-common .hovertitle { color: var(--text) !important } .page-common .hovertitle:hover { color: var(--text-heading) !important } .page-common .hoverinfo .dark_text { color: var(--text-dim); } /* ANIME STATUS BUTTONS (add, edit, etc) */ #myanimelist a.button_add:not(.Lightbox_AddEdit), #myanimelist a.button_edit:not(.Lightbox_AddEdit), #myanimelist a.Lightbox_AddEdit[class*="button_"]:not(.btn-addEdit-large), .page-common .quickadd-content .btn-status-add { width: auto; height: 16px; padding: 0 5px; background: var(--content-dim); border: 2px solid var(--content-dim); border-radius: 10px; color: var(--text-dim); font: 0.9rem/16px var(--fontset-basic); vertical-align: middle; transition: all var(--time-btn-small) ease; } #myanimelist a.button_add:not(.Lightbox_AddEdit):hover, #myanimelist a.button_edit:not(.Lightbox_AddEdit):hover, #myanimelist a.Lightbox_AddEdit[class*="button_"]:not(.btn-addEdit-large):hover, .page-common .quickadd-content .btn-status-add:hover { background: var(--border); border-color: var(--border); color: var(--text-lnk-hov); opacity: 1; } #myanimelist a.button_add.watching, #myanimelist a.button_edit.watching, #myanimelist a.button_add.reading, #myanimelist a.button_edit.reading, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.watching, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.reading /* Watching */ { border-color: var(--watching) } #myanimelist a.button_add.completed, #myanimelist a.button_edit.completed, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.completed /* Completed */ { border-color: var(--completed) } #myanimelist a.button_add.on-hold, #myanimelist a.button_edit.on-hold, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.on-hold /* On Hold */ { border-color: var(--onhold) } #myanimelist a.button_add.dropped, #myanimelist a.button_edit.dropped, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.dropped /* Dropped */ { border-color: var(--dropped) } #myanimelist a.button_add.plantowatch, #myanimelist a.button_edit.plantowatch, #myanimelist a.button_add.plantoread, #myanimelist a.button_edit.plantoread, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.plantowatch, #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.plantoread /* Planned */ { border-color: var(--planned) } /* Buttons - Add/Edit */ #myanimelist a.button_add:not(.Lightbox_AddEdit), #myanimelist a.button_edit:not(.Lightbox_AddEdit) { } .page-common a.button_add.button_add:hover, .page-common a.button_add.button_edit:hover, .page-common a.button_edit.button_add:hover, .page-common a.button_edit.button_edit:hover { color: var(--text); } /* Buttons - Large */ #myanimelist a.Lightbox_AddEdit.btn-addEdit-large { display: inline-block; width: auto; min-width: 70px; height: 22px; padding: 0 6px; background: var(--content-dim); border: 2px solid var(--border); border-radius: 13px; color: var(--text); font: 0.9rem/22px var(--fontset-basic); vertical-align: middle; transition: all var(--time-btn-small) ease; } #myanimelist a.Lightbox_AddEdit.btn-addEdit-large:hover { background: var(--border); border-color: var(--border); color: var(--text-lnk-hov); } /*==============================*\ !PAGE-TITLE \*==============================*/ /* .page-common .wrapper:after { content: ""; position: absolute; left: 0; top: 54px; display: block; width: 100%; height: 200px; background: url(https://i.imgur.com/HheYL00.jpg) no-repeat center / cover fixed; background: url(https://i.imgur.com/4KgeXwW.png) no-repeat center / cover; flex: 1 1 100%; order: 2; } .page-common #contentWrapper { margin-top: 200px; } .page-common .wrapper:before { content: ""; position: absolute; left: 0; top: 69px; top: 254px; width: 100%; height: 32px; background: var(--border); border-bottom: 2px solid var(--accent); z-index: 850; } */ /* Left */ #contentWrapper > div:first-of-type:not(#content) { position: absolute; left: 0; top: 0; width: 100%; height: 34px; padding: 7px 0 7px 10px; background: var(--content-dimmer) !important; box-sizing: border-box; z-index: 900; } #contentWrapper > div:first-of-type:not(#content):after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--accent), var(--accent-dim) 25%, var(--accent-dim) 75%, var(--accent)); } #contentWrapper > div:first-of-type:not(#content) .h1 { max-width: 49%; height: 20px; padding: 0; background: none !important; border: none; overflow: hidden; color: var(--text-heading) !important; font-size: 1.1rem; line-height: 18px !important; white-space: nowrap; text-overflow: ellipsis; z-index: 13; } #contentWrapper > div .h1 span.h1-title { display: inline-block; max-width: 49%; line-height: 28px; margin-top: -5px; overflow: hidden; } #contentWrapper > div:first-of-type:not(#content) .h1:only-child { max-width: initial; overflow: visible; } #contentWrapper > div .h1 span.h1-title br { display: none; } .page-common .h1 .title-english { margin-left: 3px; color: var(--text-dimmer); font-size: 1rem; } .title-english::before { content: '('; } .title-english::after { content: ')'; } /* Right */ #contentWrapper > div:first-of-type:not(#content) .header-right { display: block; width: max-content; max-width: 49%; margin: 0 !important; float: right; } #contentWrapper > div:first-of-type:not(#content) .header-right a, #contentWrapper > div:first-of-type:not(#content) a.header-right, #contentWrapper > div:first-of-type:not(#content) .h1 [style*="float: right"] a { max-width: 100%; height: 34px; padding: 7px 10px !important; margin: -7px 0 0 !important; box-sizing: border-box; overflow: hidden; float: right; font: 700 1rem/18px var(--fontset-basic) !important; white-space: nowrap; text-overflow: ellipsis; transition: all var(--time-medium) ease; } #contentWrapper > div:first-of-type:not(#content) .header-right a:hover, #contentWrapper > div:first-of-type:not(#content) a.header-right:hover, #contentWrapper > div:first-of-type:not(#content) .h1 [style*="float: right"] a:hover { background: var(--accent-dimmest); } #contentWrapper > div:first-of-type:not(#content) .header-right.divider { border: none; } #contentWrapper > div:first-of-type:not(#content) .h1 [style*="float: right"] a { font: inherit; } /* .page-common .header-right i { display: none; } */ /* .page-common .header-right:before { content: "\f013 "; font: 1.1rem/16.5px Font Awesome 6 Pro; vertical-align: top; transition: all var(--time-medium) ease; } .page-common .header-right:before { margin-right: 5px; } */ .header-right #editdiv { top: 34px; padding: 10px; background: var(--header); border: var(--header-border); box-shadow: none; } /* User Banners (moderators, etc) */ .profile-team-title { position: static !important; } .icon-team-title { padding: 3px 5px !important; background-color: var(--content-dim); border-radius: 2px; margin-top: -15px; margin-left: 7px; font: bold 1rem/14px var(--fontset-basic); vertical-align: top; transition: all var(--time-medium) ease; } /* .icon-team-title.site_administrator { } .icon-team-title.site_administrator:hover { } .icon-team-title.database_administrator { } .icon-team-title.database_administrator:hover { } .icon-team-title.anime_db_moderator { } .icon-team-title.anime_db_moderator:hover { } .icon-team-title.manga_db_moderator { } .icon-team-title.manga_db_moderator:hover { } .icon-team-title.forum_moderator { } .icon-team-title.forum_moderator:hover { } .icon-team-title.review_recommendation_moderator { } .icon-team-title.review_recommendation_moderator:hover { } .icon-team-title.social_media_moderator { } .icon-team-title.social_media_moderator:hover { } .icon-team-title.retired_moderator { } .icon-team-title.retired_moderator:hover { } */ /* GENERIC @Breadcrumb */ .page-common .breadcrumb { position: absolute; top: 34px; left: 0; z-index: 1; width: 100%; padding: 1px 0; background: linear-gradient(to right, var(--border), var(--content-dim)); margin: 0 !important; font-size: 0; } .page-common .breadcrumb ~ .breadcrumb { left: auto; right: 0; z-index: 2; width: auto; background: none; } .page-common .breadcrumb div { position: relative; vertical-align: top; } .page-common .breadcrumb ~ .breadcrumb div { float: right; } .page-common .breadcrumb div a { display: block; height: 20px; padding: 2px 10px 2px 22px; background: var(--border); font-size: 1rem; line-height: 17px; text-decoration: none !important; transition: all var(--time-btn-small) ease; } .page-common .breadcrumb ~ .breadcrumb div a { padding: 2px 22px 2px 10px; } .page-common .breadcrumb div a:hover { background: var(--accent-dimmest); } .page-common .breadcrumb div a:after { content: ""; position: absolute; right: 0; top: 0; z-index: -1; width: 17px; height: 17px; background: inherit; box-shadow: 2px 2px 0 var(--accent); transform: rotate(-45deg); transform-origin: right top; } .page-common .breadcrumb ~ .breadcrumb div a:after { right: 100%; z-index: -1; box-shadow: -2px -2px 0 var(--accent); } .page-common .breadcrumb div a:hover:after { border-left-color: var(--accent-dimmest); } .page-common .breadcrumb div a[href*="forum/?clubid"] { font-size: 0; } .page-common .breadcrumb div a[href*="forum/?clubid"]:before { content: "Club Forum"; font-size: 1rem; } /* .page-common .breadcrumb div a[href="https://myanimelist.net/"] { display: none !important; } */ .page-common .breadcrumb div a[href="https://myanimelist.net/"] { font-size: 0; } .page-common .breadcrumb div a[href="https://myanimelist.net/"]:before { content: "Home"; font-size: 1rem; } .page-common .breadcrumb div:nth-child(1) { z-index: 12; } .page-common .breadcrumb div:nth-child(2) { z-index: 11; } .page-common .breadcrumb div:nth-child(3) { z-index: 10; } .page-common .breadcrumb div:nth-child(4) { z-index: 9; } .page-common .breadcrumb div:nth-child(5) { z-index: 8; } .page-common .breadcrumb div:nth-child(6) { z-index: 7; } .page-common .breadcrumb div:nth-child(7) { z-index: 6; } .page-common .breadcrumb div:nth-child(8) { z-index: 5; } .page-common .breadcrumb div:nth-child(9) { z-index: 4; } .page-common .breadcrumb div:nth-child(10) { z-index: 3; } .page-common .breadcrumb div:nth-child(11) { z-index: 2; } .page-common .breadcrumb div:nth-child(12) { z-index: 1; } /* .page-common .breadcrumb ~ .breadcrumb div { z-index: 0; } */ /* Patches - News */ body.news .news-breadcrumbs { width: initial; min-height: initial; padding: 0; border: none; } /* GENERIC @Nav */ .page-common #horiznav_nav { width: 100%; border-bottom: 3px solid var(--border); padding-top: 20px; margin: 0 0 10px 0 !important; } .page-common #horiznav_nav ul { display: inline-flex; margin: 0; flex-flow: row wrap; } .page-common #horiznav_nav ul li { display: block; width: auto; padding: 0; background: none; } .page-common #horiznav_nav ul li a { display: block; padding: 0 7px; background: var(--content-dim) !important; border-radius: 13px; margin: 0 5px 7px 0; color: var(--text-lnk) !important; font: bold 1rem/26px var(--fontset-basic); text-align: center; text-decoration: none !important; transition: all var(--time-btn-small) ease; } .page-common #horiznav_nav ul li a:hover { background: var(--border) !important; color: var(--text-lnk-hov) !important; } .page-common #horiznav_nav ul li .horiznav_active { background: var(--accent-dim) !important; color: var(--text-heading) !important; } .page-common #horiznav_nav ul li .horiznav_active:hover { background: var(--accent) !important; color: var(--text-heading) !important; } /* TEXT */ /* Spoiler Expand & Quote Expand Buttons */ #myanimelist .spoiler { margin: 2px 0 0; } #myanimelist .spoiler + .spoiler { margin-top: 4px; } #myanimelist .spoiler .button, #myanimelist .quotetext .button.expand_quote { display: inline-block; height: 20px; padding: 0 7px; background: var(--content-dim) !important; border-radius: 10px; border: 1px solid var(--border); box-sizing: border-box; color: var(--text-dim); font-size: 1rem; line-height: 18px; transition: all var(--time-btn-small) ease; cursor: pointer; } #myanimelist .spoiler .button:hover, #myanimelist .quotetext .button.expand_quote:hover { border-color: var(--accent-dim) !important; } #myanimelist .spoiler > .spoiler_content[style*="ck"] > .button { background: var(--border) !important; border-color: var(--accent-dim) !important; margin-bottom: 3px; } #myanimelist .spoiler > .spoiler_content[style*="ck"] > .button:hover { border-color: var(--accent) !important; } #myanimelist .spoiler > .spoiler_content { position: relative; padding-left: 2px; } #myanimelist .spoiler > .spoiler_content:before { content: ""; position: absolute; left: -5px; top: 0; width: 2px; height: 100%; /* background: var(--accent-dim); TEMP */ background: linear-gradient(to bottom, transparent, var(--accent-dim) 15px, var(--accent-dim) calc(100% - 15px), transparent); } #myanimelist .quotetext { background: var(--quotebox-bg); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.15); margin: 5px; } #myanimelist .news-list .comment-list .quotetext { background: var(--quotebox-bg); border: 1px solid var(--border); color: inherit; } #myanimelist .codetext { max-width: 100%; background: var(--codebox-bg); border: 1px solid var(--border); box-shadow: inset 0 0 4px rgba(0,0,0,.15); margin: 0; box-sizing: border-box; color: var(--codebox-text); } #myanimelist .codetext pre { max-width: 100%; overflow-x: auto; overflow-y: visible; font: 11px/15px var(--fontset-monospace); } /*------------------------------*\ CONTENT @Search-Bars \*------------------------------*/ .anime-search-form-search { margin: 30px auto; } #quickadd .quickadd-form-search { width: 100%; max-width: 768px; margin: 30px auto; } #quickadd input { background-color: var(--content-dim); border-color: var(--border); border-style: solid; box-sizing: border-box; color: var(--text); font: 0.9rem/1.5 var(--fontset-basic); } .anime-search-form-search #q, #quickadd .quickadd-form-search #maSearchText { width: calc(100% - 51px); border-radius: 24px 0 0 24px; } #myanimelist .anime-search-form-search .inputButton, #quickadd .inputButton { border-radius: 0 24px 24px 0; padding-right: 14px; height: 48px; font: 1.5rem "Font Awesome 6 Pro"; } #quickadd .inputButton { display: inline-block; padding: 4px 14px 4px 10px; background-color: var(--accent); border: none; color: var(--border); font: bold 1rem/16px var(--fontset-basic); transition: all var(--time-btn-small) ease; } #quickadd .inputButton:not(:disabled):hover { background: var(--accent-dim); color: var(--text-lnk-hov); } /* Search Results */ .page-common #advancedSearchResultList { top: 48px !important; left: 24px !important; right: 24px; background: var(--content-dim); width: auto !important; border-width: 0 1px 1px 1px; border-style: solid; border-color: var(--border); border-radius: 0 0 15px 15px; box-shadow: none; box-sizing: border-box; overflow: hidden; } #advancedSearchResultList .list { background: none; border-radius: 0; } #advancedSearchResultList .list.focus { background: var(--border); } #advancedSearchResultList .list .image { border: 2px solid var(--border); } #advancedSearchResultList .list .name { color: var(--text) !important; } #advancedSearchResultList .list .media-type { color: var(--text-dimmer) !important; } #advancedSearchResultList .list .extra-info { color: var(--text-dim) !important; } #advancedSearchResultList .list.separator { height: 13px; padding: 7px 10px; background: var(--border); pointer-events: none; } #advancedSearchResultList .list.separator span { color: var(--text); font: 1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } #advancedSearchResultList .list-bottom { background: var(--content-dim) !important; text-align: center; } #advancedSearchResultList .list-bottom.focus { height: 92px; background: var(--accent) !important; line-height: 76px; } #advancedSearchResultList .list.list-bottom a { color: var(--header-text); } #advancedSearchResultList .list.list-bottom.focus a { color: var(--header); } /* Advanced Search */ #advancedSearch { padding: 0 10px; } #advancedSearch .mb24:last-of-type { padding-bottom: 20px !important; margin-bottom: 0px !important; } #advancedSearch select { width: 200px; } #advancedSearch #sd, #advancedSearch #sm, #advancedSearch #ed, #advancedSearch #em { width: 50px; } #advancedSearch [name="sy"], #advancedSearch [name="ey"] { width: 80px; } #advancedSearch .fw-b.mt24 { padding: 7px 10px; border-bottom: 2px solid var(--border); margin: 20px 0 7px !important; color: var(--text); font: bold 1.1rem/13px var(--fontset-heading) !important; letter-spacing: 0.05em; text-transform: uppercase; } #advancedSearch .fw-b.mt24 a { float: right; color: var(--text-dim); font: bold 0.9rem/13px var(--fontset-heading) !important; } /* =============================================== !GENERIC @News =============================================== */ body.news .menu-category .btn-category.selected { color: #7f7f7f !important; } .news-list .comment-list, .news-list .news-unit { font-family: var(--fontset); } .di-ib.tags *, .tag-cloud * { background-color: transparent !important; } #myanimelist .news-list .tags .tags-inner { height: 20px; } #myanimelist .news-list .tags .tags-inner-attributes { border-color: var(--border); margin-right: 7px; } #myanimelist .news-list .tags-inner .tag { height: 18px; padding: 0 5px; background: var(--content-dim); border: 1px solid var(--border); margin: 0 5px 5px 0; color: var(--text); font-size: 0.8rem; line-height: 18px; transition: all var(--time-btn-small) ease; } #myanimelist .news-list .tags-inner > .tag:hover { background: var(--content-dimmer); color: var(--text-lnk-hov); } #myanimelist .news-list .tags .tag-color-feature-spoiler { border-color: var(--return-bad); } /* =============================================== !GENERIC @Companies =============================================== */ .navi-seasonal.js-navi-company { background-color: transparent !important; } /* =============================================== !GENERIC @Interest Stacks =============================================== */ .mymenu.clearfix, .tag, .quick-search *, .info-block.clearfix, h2.title, .tag, .any_status, .head { background-color: var(--content) !important; } .info { background-color: transparent !important; } .introduction, .any_status strong, .intro { color: var(--text-heading) !important; } /* =============================================== !FORUM =============================================== */ /* Header Thing */ .page-forum .forum-table-header td { padding: 10px 0; } /* Board Base */ .page-forum [id^="topicRow"] [class^="forum_boardrow"] { background: var(--content-dim); } /* Browser */ .page-common table.forum-topics tr td { /* padding: 7px; */ } .page-common table.forum-topics tr td.watch-state { /* padding: 3px 0; */ } .page-common table.forum-topics tr td h4 { padding: 0 0 3px 0; margin: 0; } /* Posts */ .page-forum .forum_postusername a,.page-forum .forum_postusername a:visited { color: var(--text-dim); } .page-forum .forum_postusername a:hover { color: var(--text); } .page-forum [class^="forum_boardrow"], .page-forum .sig { border-color: var(--border); } /* Icons */ .js-toggle-watching-topic-button img { display: inline-block; width: 3px; height: 3px; padding: 2px; background:rgba(var(--notif-rgb), 0.33) content-box; border: 2px solid rgba(var(--notif-rgb), 0.33); border-radius: 50% 0; object-position: 9999px; transform: rotate(45deg); } .js-toggle-watching-topic-button img[title*="re wa"] { background-color: var(--notif); border-color: var(--notif); } /*.js-toggle-watching-topic-button img[title*="re not wa"] { } */ .js-ignore-topic-button img { display: none; } .js-ignore-topic-button { display: inline-block; width: 12px; height: 12px; background: var(--border); border-radius: 6px; text-align: center; line-height: 12px; } .js-ignore-topic-button:before { content: ""; display: block; width: 8px; height: 2px; background: var(--text-dim); border-radius: 1px; margin: 5px 2px; } /* =============================================== !NOTIFICATIONS =============================================== */ body.notification #content { padding-top: 44px !important; min-height: 535px; } /* Left Column */ body.notification #myanimelist #content .left-column { padding-right: 7px; border-right: 3px solid var(--border); } body.notification .notificaiton-category-nav { min-height: auto; } body.notification .notificaiton-category-nav li { border: none; } body.notification .notificaiton-category-nav a { color: var(--text-heading); transition: all var(--time-medium) ease; } body.notification .notificaiton-category-nav a .fa { color: var(--icon); } body.notification .notificaiton-category-nav a:hover, body.notification .notificaiton-category-nav a.active { background: var(--content-dim); } body.notification .notificaiton-category-nav li .fa-bell-o:before { content: "\f0f3"; } body.notification .notificaiton-category-nav a .counter.zero { background: var(--border); color: var(--text-heading); } body.notification .notificaiton-category-nav a .counter { background: var(--accent); } /* Right Column */ body.notification .notification-section { margin-bottom: 30px; } body.notification .left-column + div { padding-left: 7px; } body.notification .notification-item { display: block; border-bottom: 1px solid var(--border); transition: all var(--time-btn-small) ease; } body.notification .notification-item.empty { font-size: 1.2rem; text-align: center; } body.notification .notification-item:hover { background: var(--content-dim); } body.notification #myanimelist .notification-item-layout { display: flex; padding: 5px; } body.notification .notification-item-layout > * { padding: 0 5px; flex: 0 0 auto; line-height: 30px; } /* Text */ body.notification #myanimelist .notification-item-layout .notification-item-content { max-width: initial; flex: 1 1 auto; } /* Time */ body.notification .notification-item-layout .time { color: var(--text-dimmest); } /* Checkmark */ body.notification .notification-item-layout .is-read { padding-left: 0; margin: 0; } /* Unread */ body.notification #myanimelist .notification-item-layout .fa { width: 26px; height: 26px; border-radius: 15px; margin: 2px 0; color: var(--text); font-size: 1.3rem; line-height: 26px; text-align: center; transition: all var(--time-btn-small) ease; } /* Read */ body.notification .notification-item-layout .is-read .fa-check-circle { background: var(--notif); } body.notification .notification-item-layout .is-read .fa-check-circle:before { content: "\f00c"; } body.notification .notification-item-layout .fa-check:hover { background: var(--border); } /*------------------------------*\ BROWSE @Anime-Search \*------------------------------*/ /*https://myanimelist.net/anime.php*/ /*https://myanimelist.net/manga.php*/ .anime-manga-search .normal_header { margin-top: 20px; } /* Browse Page */ .anime-manga-search .genre-link { width: 100%; /* display: block; */ } .anime-manga-search .genre-link .genre-list-col { display: inline; } .anime-manga-search .genre-link .genre-list { display: inline-block; width: 16.6667%; min-width: 206px; border: none; line-height: 30px; } .anime-manga-search .genre-link .genre-list .genre-name-link { display: inline-block; width: auto; height: 22px; /* padding: 0 0 0 16px; */ padding: 0 0 0 8px; /* background: var(--content-dim); */ border-left: 3px solid var(--border); /* border-radius: 15px; */ margin: 6px 6px 0; line-height: 22px; white-space: nowrap; transition: all var(--time-medium) ease; } .anime-manga-search .genre-link .genre-list .genre-name-link:hover { background: transparent; border-color: var(--accent); } .anime-manga-search .genre-link .genre-list .genre-name-link:after { content: none; } /* =============================================== BROWSE @Top-Lists =============================================== */ /* * https://myanimelist.net/topanime.php * https://myanimelist.net/topmanga.php * https://myanimelist.net/people.php * https://myanimelist.net/character.php */ #myanimelist [class$="-ranking-table"] {} #myanimelist [class$="-ranking-table"] .text { color: var(--text); } #myanimelist [class$="-ranking-table"] .table-header td { height: 13px; padding: 10px 0; background: var(--border); border: none; font: 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } #myanimelist [class$="-ranking-table"] .ranking-list td { background: none; border-color: var(--border); border-bottom: 2px solid var(--border); } /* #myanimelist [class$="-ranking-table"] .ranking-list:nth-of-type(even) td { background: var(--content-dim); } */ /* Score */ #myanimelist [class$="-ranking-table"] [class*="score"] i { display: none; } #myanimelist [class$="-ranking-table"] .score div:before, #myanimelist [class$="-ranking-table"] .your-score a:before { content: "\f005"; margin-right: 3px; color: #ecb428; font: 1.5rem/1 "Font Awesome 6 Pro"; } #myanimelist [class$="-ranking-table"] [class*="score"] div { width: auto !important; font-size: 1.35rem; } #myanimelist [class$="-ranking-table"] .your-score a { } #myanimelist [class$="-ranking-table"] .your-score span { } /* =============================================== BROWSE @Seasonal =============================================== */ /* Header */ .navi-seasonal { width: 1040px; background: var(--content); transition: all var(--time-medium) ease; } .navi-seasonal.fixed { background: var(--border); } .navi-seasonal.fixed:after { bottom: -15px; width: 100%; padding: 0; height: 15px; background: linear-gradient(to bottom, rgba(0,0,0, 0.5), rgba(0,0,0, 0)); pointer-events: none; } .navi-seasonal .horiznav_nav ul li a, .navi-seasonal .horiznav_nav ul li a.navtab, .navi-seasonal .horiznav-nav-seasonal .btn-seasonal .btn-type { background: var(--content-dim); color: var(--text-dim); } @media (min-width: 1630px) { .navi-seasonal { width: 1580px; } } /* Items */ .seasonal-anime-list .seasonal-anime { width: calc(33.3334% - 15px - 1.6667px); border-color: var(--border); margin-right: 5px; box-sizing: border-box; } .seasonal-anime-list .seasonal-anime .prodsrc { background: var(--border); } .seasonal-anime-list .seasonal-anime .genres { background: var(--content-dim); } .seasonal-anime-list .seasonal-anime .genres .genre { background: var(--content-dim); } .seasonal-anime-list .seasonal-anime .genres .genre a { color: var(--text-dimmer); } .seasonal-anime-list .seasonal-anime .synopsis { width: calc(100% - 167px) !important; box-sizing: border-box; } .seasonal-anime-list .seasonal-anime .information { background: var(--border); } .seasonal-anime-list .seasonal-anime .information > div { background: none !important; color: var(--text-dimmer) !important; } .seasonal-anime-list .seasonal-anime .information .scormem .score:after { content: "☆"; left: -1px; background: none; line-height: 11px; font-size: 14px; } .seasonal-anime-list .seasonal-anime .information .scormem .member:after { content: "M"; background: none; line-height: 14px; font-size: 11px; } @media (min-width: 1630px) { .seasonal-anime-list .seasonal-anime { width: calc(25% - 15px - 1.25px); } } /* =============================================== BROWSE @Clubs =============================================== */ /* Search Bar */ #myanimelist .club-search-form-search .inputButton { height: 50px; border-radius: 0 50% 50% 0; } /* Text */ .club-list .table-data td { background: none !important; border: var(--border) !important; } .club-list .table-data td .informantion { color: var(--text); } /* Join Button */ #myanimelist .club-list .btn-club-join { min-width: 30px; height: 16px; padding: 4px 10px; background-color: var(--accent); background-color: var(--border); border: none; border-radius: 15px; color: var(--text); line-height: 16px; transition: all var(--time-medium) ease; } #myanimelist .club-list .btn-club-join:hover { background: var(--accent-dimmest); color: var(--text-lnk-hov); } /* New Comment */ .club-list .table-data td .new { color: var(--notif); } /* =============================================== !FANCYBOX-ETC =============================================== */ #fancybox-overlay { background: black !important; opacity: 0.3; } #fancybox-wrap { left: 50% !important; margin-top: 25% !important; min-width: 500px; min-height: 350px; padding: 0; transform: translate(-50%,-50%); } #fancybox-outer { position: static; min-width: 500px; min-height: 350px; padding: 10px; background: var(--border); box-sizing: border-box; } #fancybox-inner { position: static; width: 100% !important; height: 100% !important; color: var(--text); } #fancybox-inner div { width: auto !important; background: black !important; font: 1rem/1.5 var(--fontset-basic) !important; } #fancybox-title { left: 0 !important; width: 100% !important; padding: 0 !important; } /* MODALS */ .root * { border-color: var(--border) !important; } .root .modal-content { transition: all var(--time-medium) ease; } .root .modal-mask { background-color: rgba(0,0,0,0.7) } .root .modal-content { background: var(--header); border-top: 2px solid var(--border); } .root .modal-wrapper { border: none; } .root .modal-container { background: none; border-color: var(--accent) !important; color: var(--text); font-family: var(--fontset-basic); } .root button { background: var(--accent); border-radius: 12px; color: var(--border); transition: all var(--time-btn-small) ease; } .root button:hover { color: var(--text-lnk-hov); } /* =============================================== !ADS =============================================== */ /* generic */ #myanimelist > div.wrapper > div.text-ribbon.ga-click.ga-impression { margin-left: 33%; } .mauto.clearfix.pt24, /* myanimelist.net */ #myanimelist .wrapper > .mauto, /* myanimelist.net/anime/___/___ */ div.border_top[style="padding:16px 0px 0px 0px;margin:14px 0px 0px 0px;"], .js-scrollfix-bottom-rel > div[style="width:728px; margin:0 auto"], /* myanimelist.net/anime/season/___/___ */ .seasonal-anime-list > article, /* myanimelist.net/anime/___/___/reviews */ #myanimelist .border_bottom.pt12.pb12.mb4, #myanimelist div[style="overflow: hidden; padding: 10px 0; border-bottom: solid #cdcdcd 1px"], /* myanimelist.net/anime/___/___/userrecs */ #myanimelist div[style="padding:8px 0px 8px 0px;margin:0px 0px 8px 0px;"], /* myanimelist.net/forum/?topicid=___ */ .forum_border_around:not([id]), .forum_border_around:not([id]) + .forum_boardrowspacer { display: none !important; } .page-common #headerSmall .banner-header-anime-straming{display:none!important}[id*=div-gpt-ad]{display:none!important}.widget.right_top_ad.right,.widget.left_bottom_ad.left{display:none!important}.page-common.ad-skin #myanimelist .ad-skin-side-outer.bg-left,.page-common.ad-skin #myanimelist .ad-skin-side-outer.bg-right{display:none!important}.side-ad.side-ad--l,.side-ad.side-ad--r{display:none!important} div[style="padding: 20px 0 20px 40px; float: left; position: relative; z-index: 1;"],div[style="padding: 20px 40px 20px 0; float: right; position: relative;"]{display:none!important}div[style="padding: 20px 0 20px 40px; float: left;"],div[style="padding: 20px 40px 20px 0; float: right;"],div[style="padding: 20px 40px;display: inline-block;"],div[style="padding: 20px 0px;display: inline-block;"],div[class="mauto clearfix pt24"]{display:none!important}div[class="clearfix mauto mt16"]{display:none!important}div[style="padding:16px 0px 0px 0px;"]{display:none!important}.amazon-ads{display:none!important}.kskdDiv{display:none!important}.vrl-unit-container{display:none!important}div[style="width:728px; margin:0 auto"]{display:none!important}div[style="overflow: hidden; padding: 10px 0; border-bottom: solid #cdcdcd 1px"]{display:none!important}div[class="borderDark pt4 pb8 pl4 pr4 mb8"] + div[class="border_bottom pt12 pb12 mb4"]{display:none!important}.border_bottom[style="padding:8px 0px 8px 0px;margin:0px 0px 8px 0px;"]{display:none!important}.clearfix[style="padding:16px 3px 20px 100px;width:880px;"]{display:none!important}div[style="padding:16px 0px 0px 0px;margin:14px 0px 0px 0px;"]{display:none!important}div[style="float:left; padding:25px 25px 10px;"],div[style="float:right; padding:25px 25px 10px;"]{display:none!important}._unit[style="width:300px; height:250px; display: block !important;"]{height:0!important}table[style="width:100%;height:100%;text-align:center;border-collapse:collapse;"]{display:none!important}.clearfix.pt24[style="width:720px;"]{display:none!important}#pc_forum_top_middle_rec_l{display:none!important}#pc_forum_top_middle_rec_r{display:none!important}.forum_boardrowspacer + .di-t{display:none!important}.clearfix[style="padding:16px 3px 20px;"]{display:none!important}.clearfix[style="padding:16px 3px 20px 10px;width:100%;"]{display:none!important}table[style="width:160px;height:100%;text-align:center;border-collapse:collapse;margin:auto;"]{display:none!important}.clearfix[style="\padding:16px 24px 20px;"]{display:none!important}.clearfix[style="padding:16px 8px 20px 0px;"]{display:none!important}#pc_news_top_1st_rec,#pc_news_top_2nd_rec{display:none!important}.js-scrollfix-bottom div[style="margin-top: 8px; text-align: center;"]{display:none!important}.js-scrollfix-bottom ._unit,.js-scrollfix-bottom ._unit table{display:none!important;height:0!important}.sUaidzctQfngSNMH-pdatla,.sUaidzctQfngSNMH-malside.sUaidzctQfngSNMH-malside--l,.sUaidzctQfngSNMH-malside.sUaidzctQfngSNMH-malside--r{display:none!important} div[style="text-align: left; inset: auto 0px 0px auto; visibility: visible; width: 400px; height: 238px; z-index: 998 !important; transition: right 1s ease 0s, left 1s ease 0s !important;"]{display:none!important} #tbl-next-up{display:none!important} /* =============================================== !ANNOYANCE-REMOVALS =============================================== */ /* Interest Stacks Challenge */ .page-common #menu.interest-stacks-challenge #menu_left #nav li.interest-stacks-challenge { display: none; } /* Awful Manga Store Plugs */ .page-forum #content > div:nth-of-type(2) .btn-forum-manga-store, .page-forum #contentWrapper > div.pt24.pb24.mt24.mb24, /* Header Announcement Banner */ .banner-header-anime-straming, /* Logged Out Panel Nonsense */ .footer-ranking, /* Temporary Sailormoon 2019 */ body:not(.ownlist):before, div[style="width: 100%; margin-bottom:18px; background-image: url('https://myanimelist.net/images/manga_store/banner/MAL_SailorMoon_EEpc_1060x250_top.png');"], /* Temporary Concert 2019-11-08 */ #headerSmall + a, .mal-live-pop-up, /* Slime nonsense 2020-08-05 */ .mal-ad-unit { content: none; display: none !important; } /* Temporary Concert 2019-11-14 */ html, body:not(.ownlist) { overflow: visible; } /* Christmas Fix 2019-12-18 */ .page-common #menu.christmas #menu_left { background: none; } /* =============================================== !ANNOYANCE-REMOVALS-2 =============================================== */ /* HIDE CRUNCHYROLL ETC PLUGS */ .page-common #nav > li:nth-last-child(3) { display: none; } /* HIDE MANGA STORE */ .page-common #nav > li:nth-last-child(2) { display: none; } /* HIDE MAL SUPPORTER PLUGS */ .page-common #nav > li:last-child li:last-child { display: none; } /* RECAPTCHA BADGE */ .grecaptcha-badge { display: none !important; } } @-moz-document regexp("http(s|)://(www\\.|)myanimelist\\.net/addtolist\\.php.*") { /* QUICKADD */ /*tps://myanimelist.net/addtolist.php*/ body > div.pt16 { background: var(--content); } #quickadd { margin-top: -36px; } #quickadd #searchResults > [id*="auto-recommendation"] { padding: 0 7px 0 0; border-right: 3px solid var(--border); } #quickadd #searchResults > [id*="auto-recommendation"] ~ [id*="auto-recommendation"] { padding: 0 0 0 7px; border: none; } #quickadd [class*="quickAdd-"][class*="-result-unit"] { padding: 3px 10px; border-bottom: 1px solid var(--border); color: var(--text); } #quickadd [class*="quickAdd-"][class*="-result-unit"]:nth-of-type(odd) { background: none; } #quickadd .lightLink { color: var(--text-dimmer); } #quickadd .not-found-text { padding: 10px; font-size: 1rem; } } @-moz-document regexp(".*/(www\\.|)(?!image\\.)myanimelist\\.net(|/)") { /* =============================================== !PANEL =============================================== */ body.index #content { display: flex; padding: 34px 6px 10px !important; --slider-title: #eee; --slider-subtitle: #ddd; --slider-gradient: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0)); } body.index .left-column { width: 70%; padding: 0 !important; border: none; flex: 1 1 auto; } body.index .right-column { width: 30%; padding: 0; flex: 1 1 auto; } /* Widget Bases */ body.index article > div.widget:not([class*="_ad"]) { /* background: var(--content-dim); */ /* border-left: 3px solid var(--content-dim); */ /* border-top: 2px solid var(--content-dim) !important; */ /* border-bottom: 2px solid var(--content-dim) !important; */ padding: 10px 4px 5px; border-radius: 8px; margin: 0; } body.index article.widget { margin: 0; } .widget[class*="_ad"] { margin: 0 !important; } /* Widget Content */ body.index .widget .widget-content { padding: 0 10px; box-sizing: border-box; } /* body.index .widget a { color: var(--text-dim); } */ /* Widget Container */ body.index .widget-container .widget .widget-header { color: var(--text-heading); } body.index .widget.clubs .item .info p:nth-of-type(2) { min-width: 300px !important; min-height: 60px !important; overflow: auto !important; white-space: initial !important; } /*------------------------------*\ PANEL @Top-Upcoming \*------------------------------*/ .ranking-digest { background: none; margin: 0; } .ranking-digest .ranking-header { background: var(--content-dim); border: none; } .ranking-digest ul { display: flex; flex-flow: row wrap; padding: 5px 0 0 0; margin-bottom: -5px; } .ranking-digest ul .ranking-unit { display: flex; width: 250px; padding: 5px; flex: 1 0 auto; box-sizing: border-box; } @media (min-width: 1630px) { .ranking-digest ul .ranking-unit { max-width: 50%; } } .ranking-digest .ranking-unit .rank { width: 16px; height: 16px; background: var(--border); padding: 5px; margin-right: -14px; border-radius: 50% 0 50% 50%; flex: 0 0 auto; color: var(--text-dimmer); font-size: 1.2rem; line-height: 16px; text-align: center; z-index: 1; } .ranking-digest .ranking-unit .data-image { width: auto; flex: 0 0 auto; } .ranking-digest .ranking-unit .image { border: 2px solid var(--border); box-shadow: none; } .ranking-digest .ranking-unit .data { width: 80px; flex: 1 1 auto; } .ranking-digest .ranking-unit .title { font-size: 1rem; } .ranking-digest .ranking-unit .data .info, .ranking-digest .ranking-unit .data .members { color: var(--text-dimmer); } /*------------------------------*\ PANEL @Friend-Updates \*------------------------------*/ body.index .friend_list_updates .widget-content { display: flex; padding: 10px 0 10px 10px; flex-flow: row wrap; } #myanimelist .friend_list_updates .item { width: 330px; padding: 0; border: none !important; margin: 0 10px 10px 0; flex: 1 1 auto; } /* Removes popularity rank. */ #myanimelist .friend_list_updates p:nth-child(4) { display: none; } /*------------------------------*\ PANEL @Clubs \*------------------------------*/ body.index .widget.clubs .widget-content { display: flex; padding: 0; flex-flow: row wrap; } body.index .widget.clubs .item { position: relative; display: flex; min-width: 200px; padding: 10px; border: none; box-sizing: border-box; flex: 1 1 50%; align-items: flex-start; } body.index .widget.clubs .item .image { width: auto; margin-right: 6px; flex: 0 0 auto; } body.index .widget.clubs .item .image img { width: auto !important; /* height: 6.4em !important; */ } body.index .widget.clubs .item .info { display: flex; flex-flow: row wrap; width: 175px; flex: 1 1 auto; } body.index .widget.clubs .item .info p { flex: 0 0 100%; } body.index .widget.clubs .item .info p:nth-of-type(1) { order: 1; flex: 1 1 60%; } body.index .widget.clubs .item .info p:nth-of-type(2) { display: inline-block; max-width: 100%; height: 1.6em; overflow: hidden; order: 3; color: var(--text-dim); white-space: nowrap; text-overflow: ellipsis; } body.index .widget.clubs .item .info p:nth-of-type(3) { flex: 0 1 auto; order: 2; white-space: nowrap; text-align: right; } body.index .widget.clubs .item .info p:nth-of-type(4) { order: 4; color: var(--text-dimmer); } body.index .widget.clubs .new { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background: var(--notif); border-radius: 8px; font-size: 0; text-align: center; } body.index .widget.clubs .new:before { content: "!"; color: var(--text-heading); font-size: 1rem; line-height: 16px; font-weight: bold; } /*------------------------------*\ PANEL @Sliders \*------------------------------*/ .widget-slide-block .widget-slide-outer { width: 100%; margin: 10px 0 0 0; } #widget-promotional-video .btn-widget-slide-side, #widget-episode-video .btn-widget-slide-side, #widget-manga-store .btn-widget-slide-side { margin-top: -30px; } /* Title */ #myanimelist .widget-slide-block .widget-slide .external-link { position: relative; z-index: 2; display: block; background: none; margin-top: -20px; font: 1rem/16px var(--fontset-basic); } #myanimelist .widget-slide-block .widget-slide .external-link a { color: var(--slider-title); } /* Title Background */ #widget-episode-video .widget-slide .btn-anime:before, #widget-manga-store .widget-slide .btn-anime:before, .auto-recommendations .item:after { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 35%; background: var(--slider-gradient); } /* Dim on Hover */ #myanimelist .widget-slide-block .widget-slide .btn-anime:hover, #myanimelist .widget-slide-block .widget-slide .btn-anime .link:hover, .auto-recommendations .item:hover { opacity: initial; } .widget-slide-block .widget-slide .btn-anime .link:before, .auto-recommendations .item:before { content: ""; position: absolute; width: 100%; height: 100%; transition: all var(--time-img) ease; } .widget-slide-block .widget-slide .btn-anime:hover .link:before, .auto-recommendations .item:hover:before { background: rgba(0,0,0,0.3); } /* - - - - - - - - - - - - - - -*\ Latest Episodes & Manga Store \*- - - - - - - - - - - - - - - */ .index-watch-description, .index-manga-store-description { display: flex; width: 160px; height: 163px; padding: 0 7px !important; background-size: cover; border: none; margin-top: 10px; flex-flow: column nowrap; justify-content: center; align-items: center; box-sizing: border-box; float: right; } #myanimelist .btn-watch-video, #myanimelist .btn-manga-store { height: 26px; padding: 0 10px; background: var(--accent); border-radius: 13px; color: var(--border); font: 1rem/26px var(--fontset-basic); transition: all var(--time-btn-small) ease; } #myanimelist .btn-watch-video i, #myanimelist .btn-manga-store i { vertical-align: middle; } #myanimelist .btn-watch-video:hover, #myanimelist .btn-manga-store:hover { color: var(--text-lnk-hov); opacity: initial; } .index-watch-description p { display: none; } .index-watch-description .di-ib { display: block !important; } .index-watch-description .icon-provider { float: none !important; display: block; } .index-watch-description .icon-provider.mr16 { margin: 0 0 10px 0 !important; } #widget-episode-video, #widget-manga-store { width: calc(100% - 170px); } #widget-episode-video .widget-slide-outer, #widget-manga-store .widget-slide-outer { width: 100%; } #widget-manga-store .widget-slide .btn-anime { border: none; } #widget-manga-store .widget-slide .btn-anime .link { border: none; } #widget-episode-video .widget-slide .btn-anime .link .title { bottom: 20px; z-index: 1; background: none; } #widget-episode-video .widget-slide .btn-anime.episode .link a { box-shadow: inset 80px 0 80px -60px rgba(0,0,0,1); color: var(--slider-subtitle); line-height: 1.5; transition: all var(--time-btn-small) ease; } #widget-episode-video .widget-slide .btn-anime.episode .link a:hover { background: rgba(0,0,0,0.7); } #widget-episode-video .widget-slide .external-link, #widget-manga-store .widget-slide .external-link { max-width: 210px; } /* - - - - - - - - - - - - - - -*\ Seasonals \*- - - - - - - - - - - - - - - */ #widget-seasonal-video .widget-slide .btn-anime { border: none; margin-right: 10px; } /* - - - - - - - - - - - - - - -*\ Promotional Videos \*- - - - - - - - - - - - - - - */ #widget-promotional-video .widget-slide-outer { height: auto !important; } #widget-promotional-video .widget-slide .btn-anime .link { height: 140px !important; background-size: cover; } #widget-promotional-video .widget-slide .link:after { content: ""; position: absolute; bottom: 0; width: 100%; height: 55px; background: var(--slider-gradient); } #widget-promotional-video .widget-slide .btn-anime .link .title { bottom: 20px; z-index: 1; padding: 0 5px !important; background: none; color: var(--slider-subtitle); font: 0.9rem/1 var(--fontset-basic); } #widget-promotional-video .widget-slide .btn-anime .link .btn-play { width: 80px; height: 80px; background: rgba(0,0,0,0.7) !important; border-radius: 50%; margin: -40px 0 0 -40px; z-index: 1; transform: scale(0); transition: all var(--time-img) var(--time-function-bounce); } #widget-promotional-video .widget-slide .btn-anime:hover .link .btn-play { transform: scale(1); } #widget-promotional-video .widget-slide .btn-anime .link .btn-play:before { content: "\f04b"; position: absolute; left: 0; top: 0; width: 100%; color: #fff; font: 32px/80px "Font Awesome 6 Pro"; text-align: center; text-indent: 0; } #widget-promotional-video .widget-slide .external-link { max-width: 210px; } /* - - - - - - - - - - - - - - -*\ Recommendations \*- - - - - - - - - - - - - - - */ .auto-recommendations .btn-side { width: 35px; height: 70px; background-size: 70px auto; margin-top: -35px; } .auto-recommendations .btn-side.left { background-position: -35px 0; } .auto-recommendations .item { width: 121px; background-color: var(--content-dim); margin-right: 10px; } .auto-recommendations .item .title { color: var(--slider-title); font: 1rem/1.2 var(--fontset-basic); z-index: 2; } /*------------------------------*\ PANEL @Forum \*------------------------------*/ body.index .watched_topics .widget-content { padding: 0; } #myanimelist table.forum-topics tr td { padding: 7px; background: var(--content-dim); border-color: var(--border); font-size: 0.9rem; } #myanimelist table.forum-topics tr .watch-state { box-sizing: border-box; } /*------------------------------*\ PANEL @News \*------------------------------*/ /* - - - - - - - - - - - - - - -*\ Newest \*- - - - - - - - - - - - - - - */ .news-list.widget { display: flex; flex-wrap: wrap; align-items: flex-start; } .news-list.widget .news-unit { position: relative; padding: 0; border: none; margin: 0; flex: 1 1 auto; } .left .news-list.widget .news-unit { width: 40%; } .left .news-list .news-unit:nth-child(odd) { margin-right: 1%; } .news-list .picSurround { position: absolute; left: 0; top: 0; } .news-list .news-unit-right { margin: 0 !important; } /* Layout */ .news-list .news-unit-right:before { content: ""; width: 54px; height: 74px; padding-right: 5px; float: left; } #myanimelist .news-unit .title { display: inline; font-size: 0.9rem; line-height: 1.5; word-wrap: break-word; } #myanimelist .news-unit .title:after { content: "\a"; white-space: pre; } #myanimelist .news-unit .text { display: inline; color: var(--text-dim); font-size: 0.8rem; } #myanimelist .news-unit .information { padding: 0; } #myanimelist .news-unit .information .info { padding: 3px 0 0 0 !important; color: var(--text-dimmer); font: 0.8rem/1.5 var(--fontset-basic); } /* - - - - - - - - - - - - - - -*\ Featured News \*- - - - - - - - - - - - - - - */ /* #PANEL - LEFT-SPECIFIC */ .widget.anime_discussions.left .spaceit { display: inline-block; max-width: 70%; vertical-align: top; padding: 6px 0; margin: 0; } .widget.anime_discussions.left .lightLink { display: inline-block; max-width: 30%; vertical-align: top; padding: 6px 0; } .widget.anime_discussions.left .borderClass { padding: 0; } /* #PANELS - RIGHT SPECIFIC */ } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(editprofile.php|notification/setting|login\\.php|register\\.php|membership).*") { /* !SETTINGS */ .page-common #content { padding-top: 44px !important; } .page-common #contentWrapper { width: 1040px; } div[style="padding: 0 15px"] { padding: 0 10px !important; } table { border-collapse: collapse; } td { padding: 6px 0; } #dialog td { padding: 10px; } #dialog td td { padding: 10px 5px 0 0; } #dialog td td ~ td { padding: 10px 0 0 5px; } .page-common .spaceit_pad { padding: 0 10px; } #myanimelist [id$="ajaxIndicator"] ~ .inputButton { display: block; margin-top: 5px; } #myanimelist textarea { width: 800px !important; resize: vertical; } /* - - - - - - - - - - - - - - -*\ Headings \*- - - - - - - - - - - - - - - */ .page-common h2 { height: 13px; padding: 10px; background: var(--border); border: none; margin: 0 -10px 10px; color: var(--text); font: bold 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } #dialog .normal_header { margin-left: 0; margin-right: 0; } .page-common .normal_header:only-child { margin-bottom: 0; } .page-common h2 .floatRightHeader { display: inline-block; height: 13px; padding: 0; font-size: 0; line-height: 13px; font-family: inherit; } .page-common h2 .floatRightHeader a { display: inline-block; height: 13px; padding: 10px; margin: -10px -10px 0 10px; color: var(--text-dim); font-size: 0.9rem !important; line-height: 13px; font-family: inherit; transition: all var(--time-btn-small) ease; } .page-common h2 .floatRightHeader a:hover { background: var(--content-dim); background: var(--content-dimmest); } /*------------------------------*\ SETTINGS @Profile \*------------------------------*/ .normal_header .badresult-text { position: relative; z-index: 5; display: inline-block; width: 0; padding: 5px 0 0 14px !important; border-radius: 4px; margin: -5px 0 0; overflow: hidden; font: 1rem/13px var(--fontset-basic) !important; vertical-align: top; white-space: nowrap; pointer-events: none; } .normal_header .badresult-text:hover { width: auto; padding: 5px 10px !important; background: var(--content-dimmest); border: none; color: var(--text); letter-spacing: 0; text-transform: none; } .normal_header .badresult-text:before { content: "\f06a"; position: absolute; left: 0; top: 5px; display: block; width: 14px; color: var(--return-bad); font: 14px/13px "Font Awesome 6 Pro"; text-align: center; cursor: help; pointer-events: auto; } .normal_header .badresult-text:hover:before { color: transparent; } /*------------------------------*\ SETTINGS @Favourites \*------------------------------*/ .page-common .draggable_list li:hover { background: var(--content-dim); } #dialog .spaceit_pad ~ table .normal_header { padding: 0 10px 7px; background: none; border-bottom: 2px solid var(--border); margin-bottom: 7px; } #dialog .spaceit_pad ~ table .normal_header a { background: none; padding: 0; margin: 0; } /*------------------------------*\ SETTINGS @Notifications \*------------------------------*/ .notification-setting-content div[role="form"] { width: 800px; margin: 0 auto !important; } .notification_settings .notification-setting-content .settings-notification { width: 100%; } /* Header */ .notification_settings .notification-setting-content .settings-notification .setting.header td { background: var(--content-dim); color: var(--text-heading); font-weight: bold; } /* Content */ .notification_settings .notification-setting-content .settings-notification .setting td { padding: 7px 10px; border-color: var(--border) !important; } .notification_settings .notification-setting-content .settings-notification .setting td.label .title { color: var(--text); } .notification_settings .notification-setting-content .settings-notification .setting td.label .text { color: var(--text-dimmer); } /* Content Labels */ .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]+label { display: inline-block; padding: 1px 6px; background: var(--content-dim); border-color: var(--border); } .notification_settings .notification-setting-content .settings-notification .setting td.button.off input[type=checkbox]+label { background: var(--content-dim) !important; border-color: var(--border) !important; opacity: 0.3; } .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]:checked+label { background: var(--border); border-color: var(--accent); } .notification_settings .notification-setting-content .settings-notification .setting td.button.all input[type=checkbox]:checked+label { background: var(--border); border-color: var(--notif); } .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]+label:before { color: var(--text-lnk); font: 0.9rem/14px var(--fontset-basic); } .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]:checked+label:before { color: var(--text-lnk-hov); } .notification_settings .notification-setting-content .settings-notification .setting td.button.all input[type=checkbox]+label:before { color: var(--notif); } .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]+label:after { background: var(--text-lnk); } .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]:checked+label:after { background: var(--text-lnk-hov); } .notification_settings .notification-setting-content .settings-notification .setting td.button.all input[type=checkbox]+label:after { background: var(--notif); } .notification_settings .notification-setting-content .settings-notification tr:not(.setting):not(.ac) td { padding: 7px 0 !important; text-align: center; } .notification_settings .notification-setting-content .settings-notification .ac td { padding: 5px 0 0 0 !important; } /*------------------------------*\ SETTINGS @Panel \*------------------------------*/ .setting-row { background: var(--content-dim); color: var(--text); } .setting-row.show-hidden { background: none; color: var(--text-dimmest); } .setting-row.locate-right { background: var(--content-dim); } .setting-row td { padding: 7px 10px; } /*------------------------------*\ SETTINGS @Forum \*------------------------------*/ [name="picture_form"] td[width="160"] { width: 200px; } [name="picture_form"] .normal_header { margin-bottom: 10px; } [name="picture_form"] img { margin-left: 10px; } /*------------------------------*\ SETTINGS @List-Settings \*------------------------------*/ .btn-sns-setting, #myanimelist .sns-setting .setting-input-button { height: 24px; padding: 0 10px !important; background: var(--content-dim) !important; border: none; border-radius: 12px; color: var(--text-lnk); font: 0.9rem/24px var(--fontset-basic); transition: all var(--time-btn-small) ease; } #myanimelist .sns-setting .setting-input-button { margin-top: -3px; } .btn-sns-setting span { font: 0.9rem/24px var(--fontset-basic); } .btn-sns-setting:hover, #myanimelist .sns-setting .setting-input-button:hover { background: var(--border) !important; color: var(--text-lnk-hov); } .sns-setting .explanation { border: none; } .sns-setting .explanation td { background: var(--content-dim) !important; } .sns-setting .table td { border-color: var(--border); font-family: var(--fontset-basic); } .sns-setting .table tr:nth-of-type(odd) td { background: none; } .sns-setting .sns-setting-default { height: 34px; border-color: var(--border); font-family: var(--fontset-basic); } .sns-setting .cell-border-vertical { border-color: var(--border); vertical-align: top; } .sns-setting .sns-setting-default > div.di-ib > * { vertical-align: top; } /* .sns-setting .setting-input-button { height: 16px; padding: 4px 10px !important; background: var(--content-dim); border: none; border-radius: 12px; } */ /*------------------------------*\ SETTINGS @Advanced-CSS \*------------------------------*/ input[value*="advanced CSS"] + input { margin-top: 10px; } /*------------------------------*\ SETTINGS @Login \*------------------------------*/ .page-common .login-form-header-text { border-color: var(--border); } .page-common .social-login-block { border-color: var(--border); } .page-common .social-login-block:after { background: var(--border); } .page-common .icon-social-login { margin-right: 0; } .page-common .icon-social-login ~ .icon-social-login { margin-left: 20px; } /*------------------------------*\ SETTINGS @Privacy \*------------------------------*/ div[style="width: 450px;"] { width: 650px !important; margin: 0 auto; } div[style="width: 450px;"] .normal_header { margin-bottom: 7px; } div[style="width: 450px;"] .spaceit_pad { height: 1.5em; clear: both; line-height: 1.5em; } /*------------------------------*\ SETTINGS @MALSUPPORTER \*------------------------------*/ .membership #myanimelist span { color: var(--text); } .membership #myanimelist p { color: var(--text-dimmer); } .membership #myanimelist .plan-header, .membership #myanimelist .about-membership div { background: none; border: none; } .membership #myanimelist .plan-header, .membership #myanimelist .header { color: var(--text-heading) } .membership #myanimelist .button { border-radius: 30px; } .membership #myanimelist .about-membership .about-new-feature { background: var(--content-dim); border: 3px solid var(--accent); border-radius: 0; } .membership #myanimelist .about-new-feature .new { background: var(--notif); color: var(--border); } .membership #myanimelist .description { text-shadow: none; } .membership #myanimelist .btn-subscription { border-radius: 19.5px; } .faq-container .faq-lists .question, .faq-container .faq-lists .answer { color: var(--header-text); } .faq-container .faq-lists .question:hover, .faq-container .faq-lists .question.on { color: var(--content-dimmest); } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)\\.php.*") { /* SEARCH */ /* Recommendations */ #content > .normal_header + div.mt8 { padding: 0 10px; margin-top: 10px !important; } .auto-recommendations { } .auto-recommendations .item:hover { opacity: 0.7; } } @-moz-document url-prefix("https://myanimelist.net/anime/season"), regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)/genre/.*") { /* SEASONAL/GENRE */ .property { background-color: transparent !important; } .genres, .information { width: 100% !important; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)/[0-9]+.*/stats") { /* STATS */ #content > table, #content > table > tbody, .js-scrollfix-bottom-rel > table, .js-scrollfix-bottom-rel > table > tbody, .js-scrollfix-bottom-rel > table > tbody > tr, .js-scrollfix-bottom-rel > table > tbody > tr > td, .tr { display: revert !important; background-color: transparent !important; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)/[0-9]+.*") { /* ANIME-PAGE & MANGA-PAGE */ .oped-popup-inner { background-color: var(--content); } .review-element .thumbbody .body .tags .tag.recommended { color: var(--text-lnk); } #content, .review-element, .review-element .thumbbody .body .reaction-box { background-color: var(--content) !important; } .review-element .thumbbody .body .text { color: var(--text) !important; } .review-element .thumbbody .body .reaction-box .btn-reaction, .review-element .thumbbody .body .bottom-navi .menu .menu-block { background-color: var(--accent) !important; color: var(--border) !important; border: none !important; border-radius: 12px; font-weight: bold !important; font-size: 0.9rem !important; } .review-element .thumbbody .body .bottom-navi .menu .menu-block a { color: var(--border) !important; } .review-element .thumbbody { border-bottom: 2px solid var(--border) !important; } #content > table, #content > table > tbody, .js-scrollfix-bottom-rel > table, .js-scrollfix-bottom-rel > table > tbody, .js-scrollfix-bottom-rel > table > tbody > tr, .js-scrollfix-bottom-rel > table > tbody > tr > td { display: block; } #content > table > tbody > tr { display: flex; } .page-common .h1.edit-info span.h1-title, .page-common .h1.edit-info div.h1-title { top: -20px !important; position: relative !important; } /* Left Split */ /* td.borderClass[style="border-width: 0 1px 0 0;"]:nth-child(1) */ #content > table > tbody > tr > td:first-child { width: 225px !important; padding: 0 7px 0 0; border-right: 3px solid var(--border) !important; flex: 0 0 auto; } #content > table > tbody > tr > td:first-child .js-scrollfix-bottom { width: 205px !important; padding: 0 10px; flex: 1 1 auto; } /* Right Split */ #content > table > tbody > tr > td:last-child { width: 600px; flex: 1 1 auto; } .js-scrollfix-bottom-rel { width: 100%; padding: 0 10px; box-sizing: border-box; } /* Generic */ .page-common [id^="fsgComments"] .bgColor2 { background: var(--border); } .page-common [id^="fsgComments"] .spaceit[style*="#f7e0e0"] { background: var(--dropped) !important; } /* #content > table > tbody > tr > td:nth-child(2) > div.js-scrollfix-bottom-rel > table > tbody > tr:nth-child(2) > td { width: 100%; } */ /*------------------------------*\ ANIME @Headings \*------------------------------*/ /* Split-Right */ td[style="padding-left: 5px;"]:nth-child(2) h2 { height: 13px; padding: 10px !important; background: var(--content-dimmer); border: none; margin: 0 -10px 10px !important; clear: both; color: var(--text); font: bold 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } td[style="padding-left: 5px;"]:nth-child(2) h2 ~ h2 { margin-top: 10px !important; } td[style="padding-left: 5px;"]:nth-child(2) h2 .floatRightHeader:not(:link) { display: inline-block; height: 13px; padding: 0; font-size: 1rem; line-height: 13px; font-family: inherit; } td[style="padding-left: 5px;"]:nth-child(2) h2 a { display: inline-block; height: 13px; padding: 10px; margin: -10px -10px 0 10px; color: var(--text-dim); font: bold 0.9rem/13px var(--fontset-heading) !important; transition: all var(--time-btn-small) ease; } td[style="padding-left: 5px;"]:nth-child(2) h2 a:hover { background: var(--content-dimmest); } td[style="padding-left: 5px;"]:nth-child(2) h2 .floatRightHeader a:empty { display: none; } .floatRightHeader a:only-of-type { margin-left: 0 !important; } /* Split-Left */ td.borderClass[style="border-width: 0 1px 0 0;"]:nth-child(1) h2 { height: 13px; padding: 7px 10px; background: var(--border); border: none; margin: 4px -10px 5px -10px !important; color: var(--text); font: bold 1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } /*------------------------------*\ ANIME @Split-Left \*------------------------------*/ /* Cover Pic */ .js-scrollfix-bottom > div:first-of-type { margin-left: -10px; } /* Actions */ .js-scrollfix-bottom > div:first-of-type:after { content: "ACTIONS"; display: block; width: 205px; height: 13px; padding: 7px 10px; background: var(--content-dimmer); margin: 10px 0 0 0; color: var(--text); font: bold 1rem/13px var(--fontset-heading); text-align: left; letter-spacing: 0.05em; } /* Remove "edit status" header */ .js-scrollfix-bottom > div:first-of-type + h2 { display: none; } #myanimelist #profileRows a, #myanimelist .profileRows a { display: block; padding: 4px 10px; height: 16px; margin-left: -10px; margin-right: -10px; background: var(--content-dim); border: none; border-radius: 12px; color: var(--text-lnk); line-height: 16px; text-decoration: none; transition: all var(--time-btn-small) ease; } #myanimelist .profileRows { padding-top: 5px; } #myanimelist #profileRows { margin-top: 3px; } #myanimelist #profileRows a:hover, #myanimelist .profileRows a:hover { background: var(--accent-dim); color: var(--text-heading); } /* Remove Manga Store */ #profileRows + .di-b { display: none !important; } /* Social Icons */ .page-common .icon-block { text-align: center; } .page-common .icon-block .icon-social { margin-right: 10px; background: var(--img-socials); background-size: 330px 66px; transition: all var(--time-img) ease; } .page-common .icon-block .icon-facebook { background-position: 0 0; } .page-common .icon-block .icon-twitter { background-position: -33px 0; } .page-common .icon-block .icon-google { background-position: -66px 0; } .page-common .icon-block .icon-reddit { background-position: -99px 0; } .page-common .icon-block .icon-tumblr { background-position: -132px 0; } /* External Links */ #content > table > tbody > tr > td:first-child .pb16 { font-size: 0; line-height: 0; } #content > table > tbody > tr > td:first-child .pb16 a { display: block; padding: 3px 0; font-size: 1rem; line-height: 1.5; } /* Score */ .anime-detail-header-stats .stats-block .score { position: absolute; left: -58px; top: -11px; z-index: 1; background: var(--content-dimmer); border: 4px solid var(--accent); width: 100px; height: 100px; padding: 0; border-radius: 50%; color: var(--text) !important; font: bold 2.2rem/90px var(--fontset-basic) !important; } .anime-detail-header-stats .stats-block .score:before, .anime-detail-header-stats .stats-block .score:after { color: var(--text-dim) !important; font-family: var(--fontset-basic); } .anime-detail-header-stats .stats-block .score:before { content: "scored"; top: 18px; background: none; } .anime-detail-header-stats .stats-block .score:after { content: "by " attr(data-user); bottom: 20px; white-space: normal; } /*------------------------------*\ ANIME @Split-Right \*------------------------------*/ .page-common #horiznav_nav { width: calc(100% + 20px); margin: 0 -10px !important; } /* Remove Manga Store Links */ #content > table > tbody > tr > td:nth-child(2) > div.js-scrollfix-bottom-rel > table > tbody > tr:nth-child(2) { display: none; } /* - - - - - - - - - - - - - - -*\ Main Info \*- - - - - - - - - - - - - - - */ td > .pb16:first-of-type { padding-bottom: 10px !important; } td > .pb16 > .mt12 { display: flex !important; width: calc(100% + 10px); margin-top: 21px !important; } .anime-detail-header-stats { flex: 1 1 auto; } .anime-detail-header-stats .stats-block { padding-left: 58px; border-color: var(--border); margin-left: 48px; } .anime-detail-header-stats .stats-block, .anime-detail-header-stats .user-status-block, .detail-characters-list .left-column table:nth-of-type(even), .detail-characters-list .left-right table:nth-of-type(even) { background: var(--content-dim); } .anime-detail-header-stats .stats-block * { color: var(--text-dim) !important; font-family: var(--fontset-basic); } .anime-detail-header-stats .stats-block:before { content: none; } /* Information */ .anime-detail-header-stats .stats-block div:nth-child(2) { padding: 0 !important; margin: 30px !important; } .anime-detail-header-stats .stats-block .numbers { font: 1.3rem/33px var(--fontset-basic); } .anime-detail-header-stats .stats-block .information-block { position: static; display: block !important; } .anime-detail-header-stats .stats-block .information { height: 15px; margin-top: 9px; border-color: var(--text-dim); font: 0.9rem/15px var(--fontset-basic); } /* Update List */ .anime-detail-header-stats .user-status-block { display: inline-block; width: auto; border-color: var(--border); margin: 7px 0 0 78px !important; padding: 7px 143px 7px 15px; border-radius: 21px; } .anime-detail-header-stats .user-status-block > [class*="form-"] { background-color: var(--content-dimmer); color: var(--text); } .anime-detail-header-stats .user-status-block > [class*="form-"]:not(.form-user-status) { border-color: var(--content); } .page-common .notice_open_public { display: none; } /* Buy From */ .anime-detail-header-stats .btn-affiliate.icon-shop-default { right: 15px; } .anime-detail-header-stats .anime-detail-header-affiliate-dialog { right: 6px; top: -26px; background: var(--content-dimmest); border-color: var(--border); } .anime-detail-header-stats .anime-detail-header-affiliate-dialog:before { color: var(--text) } .anime-detail-header-stats .btn-affiliat { transition: all var(--time-btn-small) ease; } .anime-detail-header-stats .btn-affiliate:hover { opacity: 0.7; } /* Video */ #myanimelist .anime-detail-header-video { width: auto !important; padding: 0 !important; } .anime-detail-header-video .video-episode .video-unit, .anime-detail-header-video .video-promotion .video-unit { width: 153px; height: 86px; } #myanimelist .anime-detail-header-video .mt4 { margin-top: 7px !important; } #myanimelist .anime-detail-header-video .mt4 a { height: 20px; display: inline-block; padding: 0 10px; background: var(--content-dim); border-radius: 10px; color: var(--text-lnk); font-size: 0.9rem; line-height: 20px; text-decoration: none !important; transition: all var(--time-btn-small) ease; } #myanimelist .anime-detail-header-video .mt4 a:hover { background: var(--content-dimmer); color: var(--text-lnk-hov); } /* - - - - - - - - - - - - - - -*\ Episode Videos \*- - - - - - - - - - - - - - - */ #episode_video.anime-slide-block { width: 100% !important; } .anime-slide-outer { width: 100% !important; } .anime-slide-block .anime-slide { display: flex; width: 100% !important; } .anime-slide-block .anime-slide .btn-anime { flex: 1 0 auto; } .anime-slide-block .anime-slide .btn-anime:last-child { margin-right: 0; } .anime-slide-block .anime-slide .btn-anime .link { width: 100% !important; height: 130px !important; } .anime-slide-block .anime-slide .btn-anime .link:hover { opacity: 1; } .anime-slide-block .anime-slide .btn-anime .link:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent no-repeat center / cover; background-image: inherit; } .anime-slide-block .anime-slide .btn-anime .link .title { width: 100% !important; height: 100%; padding: 0 !important; background: linear-gradient(to top, #000e, #0002); font-size: 1.5rem; line-height: 130px; text-align: center; } .anime-slide-block .anime-slide .btn-anime .link:hover .title { background: linear-gradient(to top, #000f, #0006); } @media (min-width: 1630px) { .anime-slide-block .anime-slide .btn-anime .link:before { filter: blur(1px); } .anime-slide-block .anime-slide .btn-anime .link .title { font-size: 2rem; } } /* - - - - - - - - - - - - - - -*\ Characters & Staff \*- - - - - - - - - - - - - - - */ .detail-characters-list { /* display: flex; */ /* justify-content: space-between; */ } .detail-characters-list + br { display: none; } #myanimelist .detail-characters-list div { display: table; width: calc(50% - 7px) !important; } #myanimelist .detail-characters-list .divider { width: calc(50% - 8px) !important; } #myanimelist .detail-characters-list .divider:after { right: -8px; border-color: var(--content-dimmer); } #myanimelist .detail-characters-list table:last-of-type td { border-bottom: none; } /* - - - - - - - - - - - - - - -*\ Theme Songs \*- - - - - - - - - - - - - - - */ [name="staff"] ~ .di-t:not([style]) { width: 100%; } [name="staff"] ~ .di-t:not([style]) [style="width:16px;"] { display: none !important; } [name="staff"] ~ .di-t:not([style]) .di-tc:first-child { padding-right: 15px; } [name="staff"] ~ .di-t:not([style]) .di-tc:last-child { padding-left: 15px; } [name="staff"] ~ .di-t:not([style]) + br, [name="staff"] ~ .di-t:not([style]) + br + br { display: none; } /* - - - - - - - - - - - - - - -*\ Stats Userscript \*- - - - - - - - - - - - - - - */ #content > table > tbody > tr > td > div.js-scrollfix-bottom-rel > table > tbody > tr > td > div > table > tbody > tr > td { background-color: transparent !important; } /* - - - - - - - - - - - - - - -*\ hacker09 Userscript's \*- - - - - - - - - - - - - - - */ #ResetStartDate, #ResetFinishDate, #ResetAllDatesVar, #content > table > tbody > tr > td.borderClass > div > div.MAL_SearchHelperBTN { color: var(--text-lnk) !important; } /* - - - - - - - - - - - - - - -*\ Reviews \*- - - - - - - - - - - - - - - */ .page-common .borderDark { position: relative; padding: 0 !important; border: 2px solid var(--border) !important; margin-bottom: 10px; } @media (min-width: 1630px) { #content:not([style]) .borderDark { display: inline-block; width: calc(50% - 8px); box-sizing: border-box; vertical-align: top; } .borderDark + .borderDark { margin-left: 10px; } h2 + .borderDark + .borderDark + .borderDark { margin-left: 0; float: none; } } /* Content Header */ .borderDark > .spaceit:nth-child(1) { height: 20px; padding: 5px 60px 55px 58px; background: var(--content-dim); border-bottom: 2px solid var(--border); margin: 0; } /* Post Time, Episodes Seen, Overall Rating */ .borderDark > .spaceit:first-child > div:first-child { display: flex; height: 70px; margin: 0 !important; flex-flow: column nowrap; justify-content: center; line-height: 18px; } /* Episodes Seen */ .borderDark > .spaceit:first-child > div:first-child .spaceit { padding: 0; margin: 0; } /* Overall Rating */ .borderDark > .spaceit:first-child > div:first-child div:last-child { display: none; } /* User Name, User Avatar, and Helpful Count */ .borderDark > .spaceit:first-child > div[style*="left"] { height: 70px; margin-left: -53px; } .borderDark > .spaceit:first-child > div[style*="left"] td { line-height: 23px; } /* Helpful Count */ .borderDark > .spaceit:first-child > div[style*="left"] .spaceit { padding: 0; margin: 0; } /* Preliminary Review */ .js-reviews-chk-preliminary .fa-tag, .borderDark > .spaceit:first-child > div[style*="left"] .spaceit + div .fa-tag { color: var(--accent) !important; } /* User Avatar */ .borderDark > .spaceit:first-child > div[style*="left"] td[width="60"] { width: auto; } .borderDark > .spaceit:first-child div[style*="left"] td:last-child { padding-left: 7px; } .borderDark > .spaceit:first-child > div[style*="left"] .picSurround img { max-width: 66px; max-height: 66px; } /* Text */ .borderDark > .spaceit:nth-child(2) { min-height: 130px; padding: 3px 7px 3px 117px !important; border: none !important; margin: 0 !important; } /* Score */ .borderDark:before { content: ""; position: absolute; left: 0; top: 82px; display: block; width: 108px; height: calc(100% - 82px); background: var(--content-dim); border-right: 2px solid var(--border); float: left; } .borderDark > .spaceit:nth-child(2) div[id^="score"] { position: absolute; top: 83px; left: 0; display: block !important; float: none !important; } .borderDark > .spaceit:nth-child(2) div[id^="score"] table { width: 108px; padding: 0; border-width: 0 0 1px !important; } .borderDark > .spaceit:nth-child(2) div[id^="score"] tr { border-width: 1px 0; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td { padding: 3px 0; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td:first-child { padding-left: 7px; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { padding-right: 7px; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { text-align: right; } /* Bottom Buttons */ .borderDark > div:last-child { padding: 0 7px; text-align: right; font-size: 0; } .borderDark > div:last-child > .clearfix { padding: 0 0 3px !important; margin: 0 !important; } /* Report, Edit, Etc */ .borderDark > div:last-child a:nth-child(2) { height: 20px; display: inline-block; padding: 0 10px; background: var(--content-dim); border-radius: 10px; color: var(--text-lnk); line-height: 20px; text-transform: capitalize; transition: all var(--time-btn-small) ease; } .borderDark > div:last-child a:nth-child(2):hover { background: var(--border); color: var(--text-lnk-hov); text-decoration: none !important; } .borderDark > div:last-child a:nth-child(2) small { font-size: 0.9rem; } /* Permalink */ .borderDark > div:last-child a:first-child { position: absolute; top: 15px; right: 5px; display: block; width: 50px; height: 50px; background: var(--border); border-radius: 50%; color: var(--icon); text-align: center; text-decoration: none !important; transition: all var(--time-btn-small) ease; } .borderDark > div:last-child a:first-child:after { content: "\f0c1"; font: 30px/50px 'Font Awesome 6 Pro'; } .borderDark > div:last-child a:first-child:hover { background: var(--accent-dimmest); } .borderDark > div:last-child a:first-child small { font-size: 0; } /* Helpful Review */ .page-common .js-review-btn-helpful { padding-left: 7px; border-left: 2px solid var(--accent); line-height: 20px; } .page-common .js-review-btn-helpful .js-vote-review-button { display: inline-block; padding: 0 5px; background: var(--content-dim); border: none; border-radius: 10px; color: var(--text-lnk); } .page-common .js-review-btn-helpful .js-vote-review-button:hover { background: var(--border); color: var(--text-lnk-hov); } /* - - - - - - - - - - - - - - -*\ Recommendations \*- - - - - - - - - - - - - - - */ #anime_recommendation.anime-slide-block { display: flex; width: calc(100% - 90px) !important; flex-flow: row nowrap; } #anime_recommendation.anime-slide-block .btn-anime { flex: 1 0 auto; } #anime_recommendation.anime-slide-block .btn-anime .image { width: 100%; object-fit: cover; } /* - - - - - - - - - - - - - - -*\ Forum Board \*- - - - - - - - - - - - - - - */ h2 + .page-forum { margin: -10px -10px 0; } /* - - - - - - - - - - - - - - -*\ Featured Articles \*- - - - - - - - - - - - - - - */ .news-list { display: flex; flex-flow: row wrap; } .detail-page-featured-article .news-list .news-unit { width: 650px; padding-bottom: 7px; border: none; margin-bottom: 7px; flex: 1 1 auto; } .detail-page-featured-article .news-list .news-unit .news-unit-right .title, .detail-page-featured-article .news-list .news-unit .news-unit-right .text { font-size: 1rem; font-family: var(--fontset); } .detail-page-featured-article .news-list .news-unit .news-unit-right .text { color: var(--text); } #myanimelist .news-list .information { padding-top: 7px; } #myanimelist .news-list .information > * { height: 20px; border-color: var(--border); font-size: 0.9rem; line-height: 20px; font-family: var(--fontset); } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/profile/.*") { /* =============================================== !PROFILE =============================================== */ /* PROFILE / GENERAL */ .page-common #content { position: relative; padding-top: 44px !important; } .page-common .content-container { display: flex; width: 1042px; flex-flow: row nowrap; } .page-common #content[style="padding:8px;"] > table > tbody > tr { display: flex; flex-flow: row nowrap; } /* PROFILE @Split-Left */ /* General */ .page-common #content[style="padding:8px;"] .profile_leftcell, .page-common .content-container .container-left { position: relative; display: block; width: 225px; padding-top: 0; padding-right: 7px; border-right: 3px solid var(--border); flex: 0 0 auto; } .user-profile { width: 100%; } .user-profile .user-status li { background-color: transparent !important; } /* Image */ /* Image - Empty */ .btn-detail-add-picture { background: var(--border) var(--img-missing) no-repeat center / cover !important; } .btn-detail-add-picture > * { display: none; } /* Buttons - Social */ .user-profile .user-function { display: flex; width: 100%; } .user-profile .user-function .icon-user-function { height: 24px; background: var(--accent) !important; border: none !important; border-radius: 0; margin: 0; flex: 1 1 33.3%; transition: all var(--time-btn-small) ease; } .user-profile .user-function .icon-user-function + .icon-user-function { margin-left: 2px; } .user-profile .user-function .icon-user-function:first-child { border-radius: 12px 0 0 12px; padding-left: 4px; } .user-profile .user-function .icon-user-function:last-child { border-radius: 0 12px 12px 0; padding-right: 4px; } .user-profile .user-function .icon-user-function:not(.disabled):hover { background: var(--accent-dim) !important; } .user-profile .user-function .icon-user-function.disabled { background: var(--border) !important; opacity: 0.75; pointer-events: none; } .user-profile .user-function .icon-user-function .text { position: static; color: var(--border); font: bold 0.9rem/24px var(--fontset-basic); transition: all var(--time-btn-small) ease; } .user-profile .user-function .icon-user-function:not(.disabled):hover .text { color: var(--text-lnk-hov); } #myanimelist .user-profile .user-function .icon-user-function.disabled .text { color: var(--text-dim) } .user-profile .user-function .icon-user-function.icon-request .text, .user-profile .user-function .icon-user-function.icon-remove .text { font-size: 0; } .user-profile .user-function .icon-user-function .text:before { font-size: 0.9rem; line-height: 24px; vertical-align: top; } .user-profile .user-function .icon-user-function.icon-request .text:before { content: "Friend"; } .user-profile .user-function .icon-user-function.icon-remove .text:before { content: "Unfriend"; } /* Basic Info */ .user-profile .user-status.border-top.pb8:before { content: "BASIC INFO"; display: block; height: 13px; padding: 7px 10px; background: var(--border); margin: 0 0 2.5px 0; color: var(--text-heading); font: bold 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; } .user-profile .user-status.border-top.pb8 { padding: 0 0 7px !important; border: none !important; margin: 0 !important; } .user-profile .user-status li { width: 100%; padding: 3.5px 10px; box-sizing: border-box; } @keyframes online { 0%, 100% { opacity: 0.65; box-shadow: 0 0 1.5px 0 var(--content), 0 0 3px 0 var(--notif); } 50% { opacity: 1; box-shadow: 0 0 1.5px 2px var(--content), 0 0 3px 2px var(--notif); } } .user-profile .user-status li .user-status-data.online { color: var(--notif); } .user-profile .user-status li .user-status-data.online:after { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--notif); margin-left: 3px; border-radius: 50%; animation: online 2.25s ease-in-out infinite 0s; } /* Buttons - Anime/Mangalist */ .user-profile .user-button .btn-profile-submit { width: 111px; height: 30px; padding: 0; background: var(--accent) !important; box-sizing: border-box; color: var(--border); font: bold 1rem/30px var(--fontset-basic); transition: all var(--time-btn-small) ease; } .user-profile .user-button .btn-profile-submit.fl-l { padding-left: 5px; border-radius: 15px 0 0 15px; margin-right: 3px; } .user-profile .user-button .btn-profile-submit.fl-r { padding-right: 5px; border-radius: 0 15px 15px 0; } .user-profile .user-button .btn-profile-submit:hover { background: var(--accent-dim) !important; color: var(--text-lnk-hov); } /* Buttons - Stats & History */ .user-profile .user-status.border-top ~ .user-status.border-top:not(.mt12) { display: none; } /* Buttons - Nav */ .user-status.border-top.mt12.mb12 { position: absolute; top: 0; left: 242px; width: 642px; border-top: none; margin: 0 !important; } .user-status.border-top.mt12.mb12 li { display: inline-block; width: auto; padding: 0; } .user-status.border-top.mt12.mb12 li a { display: flex; padding: 3px 9px 3px 5px; background: var(--content-dim); border-radius: 13px; margin-right: 5px; flex-direction: row-reverse; text-decoration: none !important; transition: all var(--time-btn-small) ease; } .user-status.border-top.mt12.mb12 li a:hover { background: var(--border); } .user-status.border-top.mt12.mb12 li a span { line-height: 20px; } .user-profile .user-status li .user-status-data { margin-right: 3px; } /* Buttons - Nav - Sub-pages */ .page-common #horiznav_nav ul li .horiznav_active:hover { background: var(--border) !important; color: var(--text-lnk-hov) !important; } .head-config { background-color: transparent !important; } /* Affinity */ .user-profile .user-compatability-graph .pt12 { padding-top: 0 !important; } .user-profile .user-compatability-graph .pt12 ~ .pt12 { padding-top: 5px !important; } .user-profile .user-compatability-graph .bar-outer { width: 100%; height: 22px; border: none; background: var(--content-dim) !important; } .user-profile .user-compatability-graph .bar-outer div { height: 100% !important; background: none !important; border-color: var(--border) !important; } .user-profile .user-compatability-graph .bar-outer span { min-width: 1px; height: 100% !important; font: 1rem/22px var(--fontset-basic) !important; } .user-profile .user-compatability-graph .bar-outer-negative span { color: var(--text-dim) !important; } .user-profile .user-compatability-graph .bar-outer-positive span { color: var(--text-heading) !important; } .user-profile .user-compatability-graph .bar-outer .bar-inner { font-weight: bold !important; } .user-profile .user-compatability-graph .bar-outer-negative .bar-inner { background: var(--dropped) !important; } .user-profile .user-compatability-graph .bar-outer-positive .bar-inner { background: var(--completed) !important; } /* Friends */ .user-profile .user-friends { padding: 0 10px 6px !important; } .user-profile .user-friends .icon-friend { position: relative; width: 37px; height: 60px; background-color: var(--border); border: 2px solid var(--border); margin: 0 5px 5px 0; box-shadow: none; color: var(--text-dim); font-size: 0; text-indent: 0; overflow: visible; transition: none; z-index: 1; } .user-profile .user-friends .icon-friend[style*="questionmark_50.gif"] { background: var(--border) var(--img-missing) no-repeat center / cover !important; } .user-profile .user-friends .icon-friend:nth-child(5n+1) { margin-left: -10px; } .user-profile .user-friends .icon-friend:nth-child(5n) { margin-right: -10px; } .user-profile .user-friends .icon-friend:hover { opacity: initial; z-index: 2; } .user-profile .user-friends .icon-friend:after { content: attr(title); position: absolute; left: 0; top: -2px; width: 100px; height: 64px; padding: 3px; background: var(--border); border-radius: 0 5px 5px 0; box-sizing: border-box; font-size: 0.9rem; word-wrap: break-word; white-space: normal; opacity: 0; /* transition: all var(--time-medium) ease; */ pointer-events: none; z-index: 5; } .user-profile .user-friends .icon-friend:hover:after { left: 39px; opacity: 1; } /* Links & RSS */ .user-profile-sns { padding: 0 10px 6px; } #myanimelist .user-profile-sns a:nth-last-child(n+2), #myanimelist .user-profile-sns span:nth-last-child(n+2) { margin-bottom: 6px !important; } .user-profile-sns a { line-height: 1.5; } .user-profile-sns span { display: inline-block; } #myanimelist .user-profile-sns .icon-profile-sns { padding: 0 0 0 19px; } #myanimelist .user-profile-sns .icon-profile-sns:after { top: 50%; background-image: var(--img-socials); margin-top: -7px; } /* Empty */ #myanimelist .user-profile-sns .icon-profile-sns.icon-url:after { background-size: 140px 28px; background-position: -126px -14px; } /* Custom Websites */ #myanimelist .user-profile-sns .icon-profile-sns { padding-bottom: 12px; } #myanimelist .user-profile-sns .icon-profile-sns:before { content: attr(href); position: absolute; bottom: 0; left: 19px; display: block; width: 186px; overflow: hidden; color: var(--text-dimmest); font-size: 0.8rem; line-height: 12px; text-indent: 0; white-space: nowrap; transition: text-indent 0.5s ease-out 0s; pointer-events: none; } #myanimelist .user-profile-sns .icon-profile-sns:hover:before { text-indent: -167px; transition: text-indent 2s ease-in-out 0.5s; } #myanimelist .user-profile-sns .icon-profile-sns[href*="myanimelist.net"]:after { background-position: -112px -14px; } #myanimelist .user-profile-sns .icon-profile-sns[href*="anilist.co"]:after { background-position: -98px -14px; } #myanimelist .user-profile-sns .icon-profile-sns[href*="kitsu.io"]:after { background-position: -84px -14px; } #myanimelist .user-profile-sns .icon-profile-sns[href*="youtube.com"]:after { background-position: 0 -14px; } #myanimelist .user-profile-sns .icon-profile-sns[href*="last.fm"]:after { background-position: -14px -14px; } #myanimelist .user-profile-sns .icon-profile-sns[href*="github.com"]:after { background-position: -28px -14px; } /* PROFILE @Split-Right */ /* General */ .page-common .content-container .container-right { display: block; width: 800px; padding: 33px 7px 0; flex: 0 0 auto; } .page-common #content[style="padding:8px;"] > table > tbody > tr > td:nth-child(2) { display: block; padding: 33px 0 0 7px !important; flex: 0 1 100%; } @media (min-width: 1630px) { .page-common .content-container .container-right { border-right: 3px solid var(--border); } } .page-common .user-profile-about { padding-top: 0; margin-bottom: 20px; } /* Section Header */ .page-common .container-right .user-profile-about:before { content: "ABOUT"; display: block; height: 13px; padding: 10px; background: var(--border); margin-bottom: 10px; color: var(--text-heading) !important; font: bold 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; } .js-truncate-outer { transition: all var(--time-long) ease-in-out; } .js-truncate-outer .btn-truncate { /* background-image: url(https://myanimelist.net/images/icon-pulldown2.png?v=160803001), linear-gradient(to bottom, #33343600, #333436); */ background: transparent linear-gradient(to top, var(--content), rgba(var(--content-rgb), 0)) no-repeat 100% / contain !important; transition: inherit; } .js-truncate-outer .btn-truncate:before { content: ""; position: absolute; left: 50%; bottom: -25px; width: 50px; height: 50px; background: var(--content) url(https://myanimelist.net/images/icon-pulldown2.png?v=160803001) no-repeat center -36px / 17px 54px; border-radius: 50%; box-shadow: 0 0 10px 5px var(--content); margin-left: -25px; } .js-truncate-outer .btn-truncate.open:before { background-position: center 0px; } .settings-cunstom-forum-title input:disabled { background: var(--content-dim); } /* STATS */ .profile .user-statistics .user-statistics-stats { margin: 3px 0 0 !important; } .profile .user-statistics .user-statistics-stats .stat-score { padding: 0 !important; margin: 7px 0 !important; } /* .profile .user-statistics .user-statistics-stats .stats { width: 392px; } .profile .user-statistics .user-statistics-stats .updates { width: auto; } */ /* Left (stats) */ .profile .user-statistics .stats-graph .graph.watching, .profile .user-statistics .stats-graph .graph.reading, .profile .user-statistics .stats-status .circle.watching:after, .profile .user-statistics .stats-status .circle.reading:after /* Watching */ { background-color: var(--watching) } .profile .user-statistics .stats-graph .graph.completed, .profile .user-statistics .stats-status .circle.completed:after /* Completed */ { background-color: var(--completed) } .profile .user-statistics .stats-graph .graph.on_hold, .profile .user-statistics .stats-status .circle.on_hold:after /* On Hold */ { background-color: var(--onhold) } .profile .user-statistics .stats-graph .graph.dropped, .profile .user-statistics .stats-status .circle.dropped:after /* Dropped */ { background-color: var(--dropped) } .profile .user-statistics .stats-graph .graph.plan_to_watch, .profile .user-statistics .stats-graph .graph.plan_to_read, .profile .user-statistics .stats-status .circle.plan_to_watch:after, .profile .user-statistics .stats-status .circle.plan_to_read:after /* Planned */ { background-color: var(--planned) } .page-common .user-statistics .stats-graph { display: flex; background: none; border-radius: 9px; } .page-common .user-statistics .stats-graph .graph { background-clip: content-box; box-sizing: border-box; flex: 1 1 auto; } .page-common .user-statistics .stats-graph .graph:not([style*=" 0p"]) { min-width: 3px; } .page-common .user-statistics .stats-graph .graph:not(:first-child) { padding-left: 1px; } .page-common .user-statistics .stats-graph .graph:not(:last-child) { padding-right: 1px; } .page-common .user-statistics .stats-graph .graph[style*=" 380p"], .page-common .user-statistics .stats-graph .graph[style*=" 0p"] { padding: 0; } .page-common .user-statistics .stats-graph:empty:before { content: ""; display: block; width: 100%; height: 100%; background: var(--content-dim); } /* Right (updates) */ .page-common .statistics-updates { height: 64px; margin-bottom: 0 !important; clear: both; } .page-common .statistics-updates ~ .statistics-updates { padding-top: 10px; } .page-common .statistics-updates .image { border: 2px solid var(--border); transition: all var(--time-medium) ease; } .page-common .statistics-updates .image:hover { opacity: 0.7; } .page-common .statistics-updates .image img { width: 100%; height: 100%; object-fit: cover; } .page-common .statistics-updates .data > a { display: inline-block; max-width: 345px; padding: 2px 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .page-common .statistics-updates .data .graph-content { padding-top: 0 !important; } .page-common .statistics-updates .data .graph { padding: 0; background: var(--content-dim); border: 2px solid var(--content-dim); border-radius: 7px; overflow: hidden; } .page-common .statistics-updates .data .graph .graph-inner { border-radius: 0 5px 5px 0; } .profile .statistics-updates .data .graph .graph-inner.watching, .profile .statistics-updates .data .graph .graph-inner.reading { background-color: var(--watching) } .profile .statistics-updates .data .graph .graph-inner.completed { background-color: var(--completed) } .profile .statistics-updates .data .graph .graph-inner.on_hold { background-color: var(--onhold) } .profile .statistics-updates .data .graph .graph-inner.dropped { background-color: var(--dropped) } .profile .statistics-updates .data .graph .graph-inner.plan_to_watch, .profile .statistics-updates .data .graph .graph-inner.plan_to_read { background-color: var(--planned) } .page-common .statistics-updates .data .fn-grey2, .page-common .statistics-updates .data .fn-grey2 span { line-height: 1; } /* FAVOURITES DISPLAY */ .page-common .user-favorites-outer .user-favorites { margin-bottom: 0 !important; } .page-common .user-favorites-outer .di-t { display: flex !important; } .page-common .user-favorites-outer .di-tc { display: block !important; } .user-favorites > .di-tc { width: 25%; flex: 1 1 auto; } .user-favorites > .di-tc + .di-tc { margin-left: 10px; } /* Contents */ .page-common .user-favorites .favorites-list { display: block; width: 100%; } .page-common .user-favorites p.favorites-list { height: auto; color: var(--text-dimmer); } .profile .user-favorites-outer { margin-top: -7px; } .profile .user-favorites .favorites-list .list { margin: 0 !important; } .profile .user-favorites .favorites-list .list + .list { margin-top: 7px !important; } .profile .user-favorites .favorites-list .list .image { border: 2px solid var(--border); transition: all var(--time-medium) ease; } .profile .user-favorites .favorites-list .list .image:hover { opacity: 0.7; } .page-common .user-favorites .favorites-list .list .data { width: auto; padding: 2px 0 2px 7px !important; } /* PROFILE @Split-Comments */ .page-common .user-comments { padding-top: 0 !important; margin-top: 10px !important; } @media (min-width: 1630px) { .page-common .user-comments { position: absolute; right: 5px; top: 44px; width: 521px; /*from right: 1069*/ max-height: calc(100% - 54px); padding-right: 5px; margin-top: 0 !important; overflow-x: hidden; overflow-y: auto; } .page-common .user-comments .comment .codetext { max-width: 447px; } } .page-common .comment-form { margin: 10px 0 !important; text-align: center; } .page-common .comment-form .textarea { width: 100% !important; min-height: 4em; height: 85px; background: var(--content-dim); border-color: var(--border); box-sizing: border-box; } .page-common .comment-form .mt8 { margin-left: auto; width: 140px; } .page-common .comment-form .btn-form-submit { width: 140px; min-width: initial; height: 24px; background: var(--accent); border-radius: 12px; } /* Comments */ .page-common .user-comments .comment { position: relative; display: flex; padding: 0; background: none !important; align-items: flex-start; } .page-common .user-comments .comment ~ .comment { margin-top: 20px; } .page-common .user-comments .comment:after { content: none; } .page-common .user-comments .comment .image { width: 48px; padding: 0; background: var(--border); border: 2px solid var(--border); margin: 0; flex: 0 0 auto; } .page-common .user-comments .comment .image img { width: 48px; border: none; } .page-common .user-comments .comment .text { width: 100%; padding-left: 7px; flex: 1 1 auto; } .page-common .user-comments .comment .text .pb8 { height: 16px; background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px); padding: 5px 10px 5px 7px !important; margin: 0 0 0 -7px !important; flex: 1 0 auto; order: 1; } .page-common .user-comments .comment .text .pb8 a { font-size: 0.9rem; line-height: 16px; vertical-align: top; } .page-common .user-comments .comment .text .pb8 span:before { content: "| "; white-space: pre; } .page-common .user-comments .comment .text .pb8 span { float: none !important; font-size: 0.8rem; line-height: 16px; vertical-align: top; } .page-common .user-comments .comment .text .postActions { position: absolute; right: 0; top: 0; display: flex; height: 26px; padding: 0; margin: 0 !important; order: 2; flex: 0 1 auto; text-align: right; } .page-common .user-comments .comment .text .postActions a { display: inline-block; height: 26px; padding: 0 7px; margin: 0 !important; color: var(--text-dim); font-size: 0.8rem; line-height: 26px; transition: all var(--time-btn-small) ease; } .page-common .user-comments .comment .text .postActions a:hover { background: var(--border); } .page-common .user-comments .comment .text .comment-text { padding: 3px 7px 0 0; } /* Comment REply */ /* .page-common .user-comments .comment .text > [id^="com"]:not([id^="comtext"]) { } */ .page-common .user-comments .comment .text textarea[id^="comreply"] { width: 100% !important; min-height: 100px; } .page-common .user-comments .comment .text [id^="reply"] .spaceit { text-align: right; } /* Comment Content */ .page-common .user-comments .comment .text .comment-text .userimg { max-width: 100%; } /*==============================*\ !PROFILE-SUB-PAGES \*==============================*/ .boxlist-container * { background-color: transparent !important; } /*------------------------------*\ PROFILE-SUB-PAGES @Friends \*------------------------------*/ .majorPad { display: flex; width: calc(100% + 10px); padding: 0; margin: -5px 0 0 -5px; flex-flow: row wrap; align-items: flex-start; } br[clear="all"] { display: none; } .majorPad .friendHolder { width: calc(33.3334% - 10px); height: 78px; background: var(--content-dim); margin: 5px; flex: 0 0 auto; } @media (min-width: 1630px) { .majorPad .friendHolder { width: calc(20% - 10px); } } .majorPad .bgLightBlue { background: var(--content-dim); } .majorPad .bgLightBlue:after { content: ""; position: absolute; left: 3px; top: 3px; display: block; width: 8px; height: 8px; background: var(--notif); border-radius: 50%; animation: online 2.25s ease-in-out infinite 0s; } .majorPad .friendBlock { position: relative; height: 100%; padding: 3px 5px 3px 57px; box-sizing: border-box; } /* Avatar */ .majorPad .friendIcon { position: absolute; left: 0; top: 0; height: 100%; box-sizing: border-box; } .majorPad .friendIcon img { width: 50px; height: 100%; object-fit: cover; } /* Last Online */ .majorPad .friendBlock div:nth-child(3) { color: var(--text-dim); } .majorPad .friendBlock div:nth-child(3):before { content: "Online"; } /* Friends Since */ .majorPad .friendBlock div:nth-child(4) { color: var(--text-dim); } .majorPad .mt12.mb12 { margin: 5px 5px 0 5px !important; flex: 1 1 100%; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(comtocom|comments)\\.php.*"), regexp(".*/(www\\.|)myanimelist\\.net/clubs.php\\?id=.*&action=view&t=comments.*") { /* COM-TO-COM & ALL-COMMENTS */ .page-common #contentWrapper { max-width: 1060px; } .page-common #content { padding-top: 44px !important; } #content > br { display: none; } /* Page Title */ #content > .borderClass:not(.spaceit) { height: 24px !important; padding: 0 0 7px; border-bottom: 2px solid var(--border); margin-bottom: 10px !important; } #content > .borderClass [style*="left"] { font-size: 1.1rem; line-height: 24px; text-indent: 5px; } /* Page Nav */ div[style="text-align: right;"]:not(:empty), div[style="float: right;"]:not(:empty), #content > .spaceit { height: 16px; padding: 4px 10px; background: var(--content-dim); border: none; border-radius: 12px; margin: 0 0 10px 0; float: right; line-height: 16px; } div[style="text-align: right;"] span[style="color:#888;"] { color: var(--text-dimmest) !important; } /* Comments */ [id^="comBox"], [id^="comment"] { width: 1040px; margin: 0 auto 20px; clear: both; } [id^="comBox"] table { padding: 0 !important; } [id^="comBox"] tr, [id^="comment"] tr { display: flex; align-items: flex-start; } /* Avatar */ [id^="comBox"] td:first-child, [id^="comment"] td:first-child { width: 52px; padding: 0 7px 0 0; } .page-common div.picSurround img { width: 48px; } /* - - - - - - - - - - - - - - -*\ Header & Text \*- - - - - - - - - - - - - - - */ [id^="comBox"] td:last-child, [id^="comment"] td:last-child { position: relative; width: 100%; padding: 0; } .borderClass [id^="com"]:not([id^="comtext"]) { display: flex; flex-flow: row wrap; } /* Name & Date */ .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-of-type(1), [id^="comment"] td:last-child > div:nth-of-type(1) { height: 16px; background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px); padding: 5px 10px 5px 7px; margin: 0 0 0 -7px !important; flex: 1 1 auto; order: 1; line-height: 16px; } .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-of-type(1):not(.dark_text) { width: 300px; flex: 0 0 auto; } [id^="comment"] td:last-child > div:nth-of-type(1) { width: calc(100% - 10px); margin-bottom: 3px !important; } .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(1) a, [id^="comment"] td:last-child > div:nth-of-type(1) a { font-size: 0.9rem; } .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(1) span, [id^="comment"] td:last-child > div:nth-of-type(1) small span { vertical-align: top; line-height: 16px; } /* Buttons */ .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) { height: 26px; background: var(--content-dim); padding: 0; margin: 0 !important; order: 2; flex: 1 0 auto; text-align: right; } [id^="comment"] [style="margin-top: 10px;"] { position: absolute; right: 0; top: 0; z-index: 1; margin: 0 !important; } .borderClass [id^="com"]:not([id^="comtext"]) > .dark_text ~ [style="margin-top: 10px;"] { width: 300px; flex: 0 0 auto; } .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) small { font-size: 0; } .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) a, [id^="comment"] [style="margin-top: 10px;"] a { display: inline-block; height: 26px; padding: 0 7px; margin: 0 !important; color: var(--text-dim); font-size: 0.8rem; line-height: 26px; transition: all var(--time-btn-small) ease; } .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) a:hover, [id^="comment"] [style="margin-top: 10px;"] a:hover { background: var(--border); } /* Text */ .borderClass [id^="com"] [id^="comtext"] { width: 100%; padding: 3px 7px 0 0; margin: 0; order: 3; } /* Replies */ .borderClass [id^="com"]:not([id^="comtext"]) div[id^="reply"]:nth-child(4) { width: 100%; padding: 7px 0 0; margin: 0; order: 4; } .borderClass [id^="com"]:not([id^="comtext"]) textarea { width: 100% !important; background: var(--content-dim); padding: 10px; resize: vertical; box-sizing: border-box; color: var(--text-dim); } .borderClass [id^="com"]:not([id^="comtext"]) [id^="com"]:not([id^="comtext"]) { padding-left: 10px; order: 4; } /* [id^="comBox"].bgNone tr { flex-direction: row-reverse; } [id^="comBox"].bgNone td:first-child { padding: 3px 3px 0 7px; } .bgNone .borderClass > [id^="com"] div:nth-child(1) { background: linear-gradient(to left, var(--border) 0, var(--content-dim) 150px); margin: 0 -10px 0 0 !important; order: 2; text-align: right; } .bgNone .borderClass > [id^="com"] div:nth-child(3) { order: 1; text-align: left; } */ } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/forum.*") { /* FORUM-BASE */ .forum .content-container { display: flex; } /* - - - - - - - - - - - - - - -*\ Buttons \*- - - - - - - - - - - - - - - */ #myanimelist .btn-rect-grey1 { height: 24px; padding: 0 10px !important; background: var(--content-dim); border-radius: 12px; border: none; margin: 0 !important; box-shadow: none; color: var(--text-lnk); font: 1rem/24px var(--fontset-basic); transition: all var(--time-btn-small) ease; } #myanimelist .btn-rect-grey1 + .btn-rect-grey1 { margin-left: 5px !important; } #myanimelist .btn-rect-grey1:hover { background: var(--border); color: var(--text-lnk-hov) } /* - - - - - - - - - - - - - - -*\ Add-Reply \*- - - - - - - - - - - - - - - */ .page-forum .bgbdrContainer[style="width: 500px; margin: 10px auto;"] { width: 888px !important; height: auto !important; background: none; border: 10px solid var(--border); line-height: 1.5em; } #dialog { border-color: var(--border); } #dialog td { border: none; } #dialog > tbody > tr > td > form > div:nth-child(3) > textarea { width: 888px !important; } /*------------------------------*\ FORUM-BASE @Split-Left \*------------------------------*/ .forum .content-container .container-left { padding: 0 7px 0 0; border-right: 3px solid var(--border); flex: 1 1 auto; } .forum .forum-board-list { width: 100%; padding-bottom: 20px !important; } .forum .forum-board { display: flex; width: 100%; padding: 0; border-width: 0 2px 2px 2px; border-color: var(--border); box-sizing: border-box; color: var(--text); } .forum .forum-board:nth-of-type(even) { background: none; } .forum .forum-board .board { display: block; width: 67%; padding: 10px 0 10px 10px; box-sizing: border-box; flex: 0 0 auto; } .forum .forum-board .fa { color: var(--icon) !important; } .forum .forum-board .forum-board-title, .forum .forum-board .fw-b { font-size: 1.1rem !important; } .forum .forum-board .forum-board-description { color: var(--text-dim); } .forum .forum-board .topics { width: 33%; padding: 10px; background: var(--content-dim); box-sizing: border-box; flex: 0 0 auto; } .forum .forum-board .topics li { display: flex; width: 100%; } .forum .forum-board .topics .user_thumb { flex: 0 0 auto; } .forum .forum-board .topics .topic-title { display: block; margin-left: 0; flex: 1 1 auto; } /* Mark All Read */ .forum-board-list + .clearfix { padding-bottom: 20px !important; margin: 0 !important; } /* Clear Floats */ #content > .forum_border_around:before { content: ""; width: 100%; display: block; clear: both; } /* - - - - - - - - - - - - - - -*\ Forum Mods \*- - - - - - - - - - - - - - - */ #myanimelist .forum-mods-list, #myanimelist .forum-mods-container { width: 100%; } #myanimelist .forum-mods { display: flex; margin: 10px 0 0; justify-content: space-between; } #myanimelist .forum-mods:after { content: none; } #myanimelist .link-forum-mods { display: block; width: 54px; max-width: 98px; padding: 0; margin: 0 5px; flex: 1 0 auto; transition: all var(--time-img) ease; } #myanimelist .link-forum-mods:hover { background: var(--content-dim); border-radius: 2px; } #myanimelist .link-forum-mods a { display: block; padding: 7px; } /* Name */ #myanimelist .link-forum-mods .name { width: 100%; transition: all var(--time-img) ease; } #myanimelist .link-forum-mods.offline .name { color: var(--text-dimmer); } #myanimelist .link-forum-mods.offline:hover .name { color: var(--text-dim); } /* Image */ #myanimelist .link-forum-mods .thumb { width: 100%; height: 84px; box-shadow: none; border: 2px solid var(--border); margin: 0 auto; box-sizing: border-box; } .forum .forum-mods .link-forum-mods.offline .thumb { opacity: 0.3 } .forum .forum-mods .link-forum-mods:hover .thumb { opacity: 0.7 } /*------------------------------*\ FORUM-BASE @Split-Right \*------------------------------*/ #myanimelist .container-right { min-width: 300px; max-width: 500px; padding-left: 7px; flex: 1 1 18%; } /* Buttons */ #myanimelist .container-right div.mt8.mb24 { margin: 0 0 10px !important; text-align: center; } /* Search */ #myanimelist .container-right div.mb20 { margin: 0 0 10px !important; } #myanimelist .container-right div.mb20 form { display: flex; } #myanimelist .forum-search-side .forum-search-select { height: 24px; padding: 0 13px 0 8px; background: var(--content-dim) var(--img-icon-arrow-dn) no-repeat 78px 9px / auto; border-color: var(--border); border-width: 1px 0 1px 1px; border-radius: 12px 0 0 12px; flex: 0 0 auto; color: var(--text-dim); font: 0.9rem/22px var(--fontset-basic); } #myanimelist .forum-search-side .forum-search-select:focus { background-color: var(--border); color: var(--text); border-color: var(--accent); } #myanimelist .forum-search-side .forum-search-input-text { height: 24px; padding: 0; background: var(--content-dim); border-width: 1px 0; flex: 1 1 auto; border-color: var(--border); color: var(--text-dim); font: 0.9rem/22px var(--fontset-basic); text-indent: 5px; } #myanimelist .forum-search-side .forum-search-input-text:focus { color: var(--text); border-color: var(--accent);} #myanimelist .forum-search-side .forum-search-input-submit { height: 24px; padding: 0; background: var(--content-dim); border-width: 1px 1px 1px 0; border-radius: 0 12px 12px 0; border-color: var(--border); flex: 0 0 auto; color: var(--text); font: 0.9rem/22px "Font Awesome 6 Pro"; } #myanimelist .forum-search-side .forum-search-input-submit.notActive { pointer-events: none; } #myanimelist .forum-search-side .forum-search-input-submit:not(.notActive):hover { background: var(--border); } #myanimelist .forum-search-side .forum-search-input-submit.notActive { color: var(--text-dim); } /* - - - - - - - - - - - - - - -*\ Sidebar Items \*- - - - - - - - - - - - - - - */ #myanimelist .forum-side-block .forum-side-list .forum-post { padding: 7px 0; border-color: var(--border); } #myanimelist .forum-side-block .forum-side-list .forum-post .information .comment { color: var(--text-dimmest); } #myanimelist .forum-side-block .forum-side-list .forum-post .thumbs { background: var(--border); border: 2px solid var(--border); } /*------------------------------*\ FORUM-BASE @Generic \*------------------------------*/ /* Forum Header / Thread Title */ #content > div:nth-of-type(1) { margin-top: 0 !important; } #content .fl-l.mt8.cl-l { display: block; min-height: 19px; margin: 0 !important; } #content .fl-l.mt8.cl-l .forum_locheader { max-width: 640px; color: var(--text-heading); font-size: 1.4rem; line-height: 19px; } #content .fl-l.mt8.cl-l span { display: inline-block; padding: 3px 0; color: var(--text); } /* Buttons */ #content > div.borderClass, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 { height: 24px; padding: 10px 0 0 0 !important; border: none; margin: 0 !important; clear: both; line-height: 24px; } #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] { height: 24px !important; padding: 0 10px; margin: 0 0 10px !important; } #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] { margin: 0 !important; font-size: 0; line-height: 24px; } #content > div.borderClass > .fl-l.pb8 { padding: 0 !important; } #content > div.borderClass .fl-l span { margin: 0 !important; } #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > span { vertical-align: top; } #content > div.borderClass .fl-l a, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > a, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > span > a, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 [style*="inline-flex"] a, #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] a { display: inline-block; height: 24px; padding: 0 10px; background-color: var(--accent); border: none; border-radius: 12px; margin-right: 5px !important; color: var(--border); font-size: 1rem; line-height: 24px; font-weight: bold; text-decoration: none; vertical-align: top; transition: all var(--time-btn-small) ease; } #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > a span { line-height: inherit; } #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > a i { vertical-align: inherit; line-height: inherit; } #content > div.borderClass .fl-l a:hover, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > a:hover, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > span > a:hover, #content > div.mt4.mb4.pl0.pb0.pt4.pb4 [style*="inline-flex"] a:hover, #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] a:hover { background: var(--accent-dim); color: var(--text-lnk-hov) !important; } #content > div.mt4.mb4.pl0.pb0.pt4.pb4 [style*="inline-flex"] form { padding: 0; background: none; border: none; margin: 0; } /* Page Navigation */ /* Board Top */ #content > div.borderClass .fl-r, /* Board Bottom */ #content > .spaceit:last-child:not(:empty), /* Thread Top */ #content > div.mt4.mb4.pl0.pb0.pt4.pb4 .fl-r:not(:empty), /* Thread Bottom */ #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] [style="float: right;"]:not(:empty), /* Watched Top */ #content > div[style="text-align: center;"] [style="float: right;"]:not(:empty), /* Ignored Top */ #content > div[style="margin: 4px 0; text-align: center;"] [style="float: right;"]:not(:empty) { display: inline-block; height: 16px; padding: 4px 10px; background: var(--content-dim); border-radius: 12px; line-height: 16px; } /* Board Bottom */ #content > .spaceit:last-child { padding: 0; margin: 10px 0; float: right; } /* Board Bottom */ #content > .spaceit:last-child .bgColor1 { padding: 0 !important; } /* Board Top */ #content > div.borderClass .fl-r span { line-height: inherit; } /* Forum Board Sort */ .page-common .forum-topic-sort { height: 16px; padding: 4px 10px !important; background: var(--content-dim); border-radius: 12px; margin-right: 5px; float: right; clear: none; color: var(--text); line-height: 16px; } .page-common .forum-topic-sort p { padding: 0 !important; } .page-common .forum-topic-sort a { color: var(--text-lnk); } .page-common .forum-topic-sort a:hover { color: var(--text-lnk-hov); } /* Watched Topics/Ignored Topics Blurb */ #content > div[style="text-align: center;"], #content > div[style="margin: 4px 0; text-align: center;"] { padding: 10px 0 0; margin: 0 !important; line-height: 24px; } /* - - - - - - - - - - - - - - -*\ Forum Board \*- - - - - - - - - - - - - - - */ #forumTopics { clear: both; padding-top: 10px; } #forumTopics [class^="forum_boardrow"] { padding: 7px; vertical-align: middle; } /* Watched & Ignored Topic Fixes */ td[colspan="2"] + td[width="125"] { width: 250px; } /* - - - - - - - - - - - - - - -*\ Forum Search \*- - - - - - - - - - - - - - - */ #content .content-container .mt4 { margin: 0 !important; } #content .content-container .mt4 + form { padding: 0 10px; } #content .content-container .mt4 + form .normal_header { background: none; padding: 7px 10px; border-bottom: 2px solid var(--border); margin: 0 -10px 10px; } #content .content-container .mt4 + form table input, #content .content-container .mt4 + form table select { height: 22px; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/forum/\\?topicid=.*") { /* FORUM-THREADS */ .page-forum #content { width: 1040px; min-height: 18px; padding: 0 !important; margin: 0 auto 10px; } .page-forum #contentWrapper { width: 1060px; padding: 70px 0 0; } /* @media (min-width: 1630px) { .page-forum #contentWrapper { padding-left: 270px; padding-right: 270px; } } */ /*------------------------------*\ FORUM-THREADS @Buttons \*------------------------------*/ #content > div:first-child { /* height: 25px; max-width: 80%; float: left; */ display: flex; max-width: 900px; flex-flow: column nowrap; float: left; } /* Thread Title */ #content > div:nth-of-type(1) .fl-l.mt8.cl-l { padding: 7px 10px; background: var(--content-dim); border-left: 3px solid var(--accent); } #content > div:nth-of-type(1) .fl-l.mt8.cl-l .forum_locheader { max-width: 760px; font-size: 1.2rem; } div.forum-topic-message-wrapper > table > tbody > tr > td.forum_boardrow2 > div > div > a:nth-child(2) { filter: invert(100%); margin-top: 10px !important; } #autocomplete-input { width: 40% !important; margin-top: 0px !important; } #autocomplete-list { margin-top: 0px !important; } /* Forum Browse Buttons */ #content > div:first-child .fl-r { /* float: none !important; order: 2; text-align: left !important; */ display: none; } /* Share Buttons */ #content > div:nth-of-type(2) { width: auto; height: 19px; padding: 7px 10px !important; background: var(--content-dim); border-radius: 16.5px; float: right; } #content .icon-block-small { float: right; } #content .sprite-icon-social-small { width: 19px; height: 19px; background-image: var(--img-socials); background-size: 190px 38px; margin: 0; transition: all var(--time-btn-small) ease; } #content a ~ .sprite-icon-social-small { margin-left: 6px; } #content .sprite-icon-social-small.icon-facebook-small { background-position: 0 0; } #content .sprite-icon-social-small.icon-twitter-small { background-position: -19px 0; } #content .sprite-icon-social-small.icon-google-small { background-position: -38px 0; } #content .sprite-icon-social-small.icon-reddit-small { background-position: -57px 0; } #content .sprite-icon-social-small.icon-tumblr-small { background-position: -76px 0; } /* Thread Poll */ #content > .mt4.mb4.pl0.pb0.pt4.pb4 + .forum_category { margin-top: 10px; } form .forum_category, #content + .forum_category { margin: 15px 10px 0; } .page-forum .forum_category + .forum_boardrow1, .page-forum form .forum_boardrow1 { background: var(--content); padding: 10px 10px 20px; border: none; } .page-forum .forum_category + .forum_boardrow1 div[style="text-align: right;"], .page-forum form .forum_boardrow1 div[style="text-align: right;"] { float: right; margin-top: 2px; } .page-forum .forum_category + .forum_boardrow1 div[style="text-align: right;"] a { display: inline-block; height: 24px; padding: 0 10px; background: var(--content-dim); border-radius: 12px; margin-left: 3px; color: var(--text-lnk); font-size: 1rem; line-height: 24px; text-decoration: none; transition: all var(--time-btn-small) ease; } .page-forum .forum_category + .forum_boardrow1 div[style="text-align: right;"] a:hover { background: var(--accent-dim); color: var(--text-lnk-hov); } .page-forum .forum_category + .forum_boardrow1 td[align="left"] { width: 100px; } .page-forum .forum_category + .forum_boardrow1 td[width="30%"] { width: auto; } .page-forum .forum_category + .forum_boardrow1 td[width="30"] { width: 50px; } .page-forum .forum_category + .forum_boardrow1 td[width="40"] { width: 50px; } .page-forum .vote_container { background: var(--accent); border-radius: 2px; } form + br { display: none; } /* Thread Locked */ /* Top Icon */ #content > div:first-child .forum_locheader.icon-forum-locked { padding: 0 !important; } #content > div:first-child .forum_locheader.icon-forum-locked:after, #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] .icon-forum-locked:after{ content: none; } #content > div:first-child .forum_locheader.icon-forum-locked:before { content: "\f023"; margin-right: 5px; font: normal 1.2rem/19px "Font Awesome 6 Pro"; } #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] .icon-forum-locked:before { content: "\f023"; font: normal 1.2rem/24px "Font Awesome 6 Pro"; } /* Bottom Icon */ #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] .icon-forum-locked { display: inline-block; width: 24px; height: 24px; padding: 0; text-align: center; vertical-align: top; } /* Notice */ #content > div[style^="margin: 7px 0;"] { padding-top: 10px; margin: 0 !important; clear: both; font-size: 1.1rem; line-height: 1; } /*------------------------------*\ FORUM-THREADS @Post-Layout \*------------------------------*/ /* Space between posts */ .page-forum .forum_boardrowspacer { height: 20px; background: none; } /* Post Basis */ .forum_border_around { margin: 0 10px; } /* Header */ .page-forum #myanimelist .forum_category { /* background: #4f74c8; */ /* background: var(--accent); background: linear-gradient(45deg, var(--accent), var(--accent-dim) 85%); */ /* background: transparent linear-gradient(45deg, var(--border), var(--content-dim) 85%, var(--content-dim) 92%, var(--accent) 100%); */ position: relative; z-index: 1; height: 16px; padding: 7px 10px; background: var(--border); background: transparent linear-gradient(45deg, var(--border) 118px, var(--content-dim) 85%); line-height: 16px; transition: all var(--time-btn-small) ease; } .page-common #myanimelist .forum-topic-message-ignored-user.hide-message .forum_category { opacity: 0.3; } .page-common #myanimelist .forum-topic-message-ignored-user .forum_category:hover { opacity: 0.5; } .page-common #myanimelist .forum-topic-message-ignored-user.hide-message .forum_category:hover { opacity: 0.7; } .page-forum .forum_category > div { height: 12px; margin: 0 !important; } .page-forum .forum_category .date { margin-right: 5px; float: right; color: var(--text-dim); } .page-forum .forum_category [style="margin: 5px 0px;"] > div[style*="float: right"], .page-forum .forum_category .postnum { color: var(--text-dim) !important; padding: 0 !important; } .page-common .forum-topic-message-ignored-user .forum_category .date:after { content: "IGNORED"; color: var(--text); } /* Containers Etc */ .page-forum [id^=forumMsg] tr { display: flex; } .page-forum [id^=forumMsg] [class^="forum_boardrow"] { background: none; } /* Containers Etc - Left Bar */ [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) { position: relative; width: 94px; padding: 87px 7px 7px; background: var(--content-dim); border-width: 0 2px 2px 2px !important; flex: 0 0 auto; /* align-self: flex-start; */ text-align: center; } /* Containers Etc - Right Bar */ [id^=forumMsg] [class^="forum_boardrow"]:nth-child(2) { padding: 7px 10px 7px; border: none !important; flex: 1 1 auto; } [id^=forumMsg] [class^="forum_boardrow"] > .word-break { display: flex; width: 908px; min-height: 100%; margin: 0 auto; flex-flow: column nowrap; } .page-forum [id^=forumMsg] [class^="forum_boardrow"] [id^="message"].clearfix { flex: 1 1 auto; } /* Signature */ .page-forum .sig { padding: 7px 7px 0 7px; border: none; margin: 0 -7px; } /* Quick Reply */ #quickReply { background-color: transparent; width: 1040px; padding: 10px; } #quickReply textarea { width: 100%; max-width: 100%; padding: 5px; box-sizing: border-box; resize: vertical; } /* - - - - - - - - - - - - - - -*\ Post Actions \*- - - - - - - - - - - - - - - */ .page-forum .postActions { position: relative; margin: 3px 0 !important; text-align: center !important; } .page-forum .postActions:before { content: ""; position: absolute; left: -5px; top: 9px; width: 100%; padding: 0 5px; height: 2px; background: var(--border); } .page-forum .postActions div { position: relative; display: inline-block; width: auto; height: 20px; padding: 0 15px; background: var(--content); font-size: 0; } .page-forum .postActions a { height: 20px; display: inline-block; padding: 0 10px; background: var(--content-dim); border-radius: 10px; color: var(--text-lnk); font-size: 0.9rem; line-height: 20px; transition: all var(--time-btn-small) ease; } .page-forum .postActions a ~ a { margin-left: 3px; } .page-forum .postActions a:hover { background: var(--border); color: var(--text-lnk-hov); text-decoration: none !important; } /* FORUM-THREADS @SIDEBAR */ [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) > div { position: static /*event fix*/; display: flex; flex-flow: column nowrap; } [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) > div > br:nth-last-of-type(n+3) { display: none; } /* [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) > div > span { margin-bottom: -1.5em; } */ /* Name */ .page-forum [id^=messageuser] { position: absolute; left: 103px; top: -30px; z-index: 2; padding: 0 16px; white-space: nowrap; } .page-forum [id^=messageuser] a { font: 1.1rem/30px var(--fontset-basic); } /* Avatar */ [id^=forumMsg] [class^="forum_boardrow"] .forum-icon { position: relative; z-index: 3; display: flex; width: 100px; min-height: 100px; background: var(--border); border: 6px solid var(--border); margin: -117px 0 5px -9px; justify-content: center; order: -1; } [id^=forumMsg] [class^="forum_boardrow"] .forum-icon img { margin: 0; align-self: center; } /* Halloween Fixes */ [id^=forumMsg] [class^="forum_boardrow"] .forum-icon { display: flex !important; margin: -117px 0 5px -9px !important; } .forum-icon::after { content: none !important } /* Empty Avatar */ .forum_border_around:not(.forum-topic-message-ignored-user) .forum_category:before { content: ""; position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: var(--content-dimmest) var(--img-missing) no-repeat center / cover; border: 6px solid var(--border); } /* Custom User Titles/Banners */ .icon-team-title.forum { width: 100%; padding: 0 !important; margin: 0 auto 0.5em; font-size: 0.9rem; line-height: 20px; font-weight: normal; } .page-forum .custom-forum-title { display: block; width: 100%; padding: 0; background: var(--border); border-radius: 2px; margin: 0 auto 0.5em; font-size: 0.9rem; line-height: 20px; } /* Online Status */ @keyframes online { 0%, 100% { opacity: 0.65; box-shadow: 0 0 1.5px 0 var(--content), 0 0 3px 0 var(--notif); } 50% { opacity: 1; box-shadow: 0 0 1.5px 2px var(--content), 0 0 3px 2px var(--notif); } } [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) span[style*="green"] { color: var(--notif) !important; font-weight: bold; } [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) span[style*="green"]:after { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--notif); margin-left: 3px; border-radius: 50%; animation: online 2.25s ease-in-out infinite 0s; } /*------------------------------*\ FORUM-THREADS @Post-Content \*------------------------------*/ .page-forum .forum_topic_message .forum_boardrow1 img { position: relative; max-width: 100%; z-index: 1; } .forum-topic-message-wrapper > table > tbody > tr > td.forum_boardrow2 > div > a > strong { color: var(--accent) !important; font-weight: bold; } .page-common table.forum-topics tr td:nth-child(2n+1) { background-color: transparent; } } @-moz-document regexp("DISABLED.*/(www\\.|)myanimelist\\.net/ownlist/(anime|manga)/.*") { /* TEMP - NEEDS WORK */ /* specific selector prefix: [stylus-iframe="true"] [class$="_update"] */ .seasonal-anime-list .seasonal-anime .properties .property { background-color: var(--page) !important; overflow-wrap: break-word; padding: 2px; } #dialog { position: relative; /* display: block; */ border: none; } #dialog td:only-child { padding: 0; } #top-submit-buttons { position: absolute; top: 43px; right: 0; margin: 0 !important; } #top-submit-buttons .inputButton { display: block; width: 65px; margin: 0 0 5px 0 !important; } .separator { display: none; } #advanced-button .toggle-button { background: none !important; color: #fff !important; } /* Basic Opt */ form[name^="add_"] tbody { display: flex; flex-wrap: wrap; justify-content: center; } form[name^="add_"] tr, form[name^="add_"] td { display: inline-block; } form table:not(.advanced) tr:nth-child(1) td:first-child, form table:not(.advanced) tr:nth-child(2) td:first-child, form table:not(.advanced) tr:nth-child(3) td:first-child, form table:not(.advanced) tr:nth-child(4) td:first-child { display: none; } form table:not(.advanced) tr:nth-child(1) { width: 100%; } form table:not(.advanced) tr:nth-child(1) td:last-child { display: block; width: 100%; padding: 0 !important; font-size: 16px; text-align: center; } a[href*="ajaxtb.php"] { display: none; } form table:not(.advanced) tr:nth-child(4) { } form table:not(.advanced) tr:nth-child(5) td:first-child, form table:not(.advanced) tr:nth-child(6) td:first-child { width: 70px; text-align: right; } form table:not(.advanced) tr:nth-child(5) td:last-child, form table:not(.advanced) tr:nth-child(6) td:last-child { font-size: 0; } form table:not(.advanced) tr:nth-child(5) td:last-child > *, form table:not(.advanced) tr:nth-child(6) td:last-child > * { font-size: 11px; margin-right: 7px; } form table:not(.advanced) tr:nth-child(5) td:last-child label, form table:not(.advanced) tr:nth-child(6) td:last-child label { margin-right: 0; } form table:not(.advanced) tr:nth-child(5) td:last-child label input, form table:not(.advanced) tr:nth-child(6) td:last-child label input { vertical-align: top; margin: 4px 0 0 0; } #add_anime_comments { width: 95% !important; min-height: 170px !important; resize: vertical; } /* Advanced Opt */ form[name^="add_"] table.advanced tr { width: 100%; clear: both; } form[name^="add_"] table.advanced td { float: left; box-sizing: border-box; } form[name^="add_"] table.advanced td:first-child { width: 20%; } form[name^="add_"] table.advanced td:last-child { width: 80%; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/shared\\.php.*") { /* HEADER ROW */ #content table, #content tbody { table-layout: fixed; } tr:first-of-type td.borderClass:not(:nth-of-type(1)) > * strong { display: block; width: 130px; transform: rotate(90deg) translateY(-100%); transform-origin: left top; margin-bottom: 116px; } tr:first-of-type td.borderClass { padding: 1px 3px !important; text-align: right; } tr:first-of-type td:nth-of-type(1) { width: 100%; vertical-align: bottom; } tr:first-of-type td:nth-of-type(2) { width: 30px; } tr:first-of-type td:nth-of-type(3) { width: 30px; } tr:first-of-type td:nth-of-type(4) { width: 30px; } /* Content */ tr { display: flex; width: 65%; margin: 0 0 5px; justify-content: space-between; } td { display: block; border: none !important; } tr:not(:first-of-type) > td:nth-child(1) { flex: 1 0 auto; font-size: 13px; text-align: right; align-self: center; } tr:not(:first-of-type) > td:nth-child(2), tr:not(:first-of-type) > td:nth-child(3) { width: 38px; height: 38px; border-radius: 50%; background: #666a !important; font-size: 20px; } tr:not(:first-of-type) > td:nth-child(3) { margin-left: -10px; } tr:not(:first-of-type) > td:nth-child(2)[style*="f6"], tr:not(:first-of-type) > td:nth-child(3)[style*="f6"] { background: #000a !important; } #content tr:not(:first-of-type) > td:nth-child(2) span, #content tr:not(:first-of-type) > td:nth-child(3) span { color: #fff !important; line-height: 38px; } tr:not(:first-of-type) > td:nth-child(4) { width: 20px; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/ownlist/style.*") { /* OWNLIST-STYLE */ .style-setting div.ml16.mr16 { margin: 0 !important; } .style-setting form[name="style_edit"] { padding: 0 10px; } /* HEADING */ .page-common h2 { height: 13px; padding: 10px; background: var(--border); border: none; margin: 0 -10px 10px; color: var(--text-heading); font: 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } /* Classic | Modern Toggle */ #myanimelist .style-setting .setting-switch input[type=radio]+label { background: var(--content-dim); border-radius: 15px 0 0 15px; color: var(--text-heading); transition: all var(--time-btn-small) ease; } #myanimelist .style-setting .setting-switch input[type=radio]+label ~ label { border-radius: 0 15px 15px 0 } #myanimelist .style-setting .setting-switch input[type=radio]+label:hover { background: var(--accent-dim); } #myanimelist .style-setting .setting-switch input[type=radio]:checked+label { background: var(--accent); color: var(--text-heading); } /* Information Bar */ .ownlist_style #new-style .info { background: var(--content-dim); border-color: var(--border); color: var(--text); } /*------------------------------*\ OWNLIST-STYLE @Modern-Theme-Selector \*------------------------------*/ .ownlist_style .new-theme-list .new-theme-unit { width: 170px; background: var(--content-dim); border-color: var(--border); } .ownlist_style .new-theme-list .new-theme-unit.selected { background: var(--content-dim); border-color: var(--accent); } /* Title */ .ownlist_style .new-theme-list .new-theme-unit .title { color: var(--text-lnk) !important; } /* Image */ /* .ownlist_style .new-theme-list .new-theme-unit .theme-link .thumb { width: 115px; height: 115px; border-radius: 50%; object-fit: cover; } */ /* Radio Boxes */ .ownlist_style .new-theme-list .new-theme-unit div { padding: 0 !important; } .ownlist_style .new-theme-list .new-theme-unit div label { line-height: 22px; } .ownlist_style .new-theme-list .new-theme-unit div label input { margin: 0; vertical-align: middle; } /* .ownlist_style .new-theme-list .new-theme-unit div label:first-child input { margin: 4px 0 0 3px; float: right; } .ownlist_style .new-theme-list .new-theme-unit div label:last-child input { margin: 4px 3px 0 0; float: left; } */ /* .ownlist_style .new-theme-list .new-theme-unit div label input[checked="checked"] { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } */ /* Save Button */ .ownlist_style .style-setting .style-setting-form-button { border-color: var(--border); } /*------------------------------*\ OWNLIST-STYLE @Editor \*------------------------------*/ .ownlist_style_theme .customize-content-left { width: 350px !important; padding: 10px; background: var(--content); box-sizing: border-box; color: var(--text); } .ownlist_style_theme #preview-container { padding-left: 3px; background: #fff; } .ownlist_style_theme .draggable-bar { border-left: 3px solid var(--border); } /* Content */ .ownlist_style_theme .customize-content-left .theme-custom-content { padding: 7px 10px 14px; border: none; } /* Custom CSS */ #add_custom_css [style*="#a94442"] { color: var(--return-bad) !important; } #add_custom_css #custom-css { margin: 10px -10px; } .ace_editor { font: 11px/15px var(--fontset-monospace); } .ace-ambiance .ace_gutter { background: var(--border); } .ace-ambiance .ace_gutter-layer, .ace-ambiance .ace_text-layer { background: none; } .ace-ambiance .ace_gutter-active-line { background: linear-gradient(to right, transparent, var(--accent-dimmest)); } .ace_gutter-cell { color: var(--text-heading); } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(|my)reviews\\.php.*"), regexp(".*/(www\\.|)myanimelist\\.net/(profile|anime|manga)/.*/reviews.*") { /* REVIEWS */ .page-common #content:not([style]) { font-size: 0; } .review-element .thumbbody .body .tags .tag.recommended { color: var(--text-lnk); } #content, .review-element, .review-element .thumbbody .body .reaction-box { background-color: var(--content) !important; } .review-element .thumbbody .body .text { color: var(--text); } .review-element .thumbbody .body .reaction-box .btn-reaction, .review-element .thumbbody .body .bottom-navi .menu .menu-block { background-color: var(--accent) !important; color: var(--border) !important; border: none !important; border-radius: 12px; font-weight: bold !important; font-size: 0.9rem !important; } .review-element .thumbbody .body .bottom-navi .menu .menu-block a { color: var(--border) !important; } .review-element .thumbbody { border-bottom: 2px solid var(--border) !important; } /*------------------------------*\ REVIEWS @Other \*------------------------------*/ #myanimelist .reviews-horiznav-nav-sort-block { width: 80%; padding: 0 10px 10px !important; border: none; margin: 0 !important; float: left; text-align: left; } .reviews-horiznav-nav-sort-block .btn-show-sort { color: var(--text); } .reviews-horiznav-nav-sort-block .review-sort-order-block { background: var(--content-dim); border-color: var(--border); } .reviews-horiznav-nav-sort-block .review-sort-order-block .btn-close { background: var(--border) var(--img-icon-close) no-repeat center / 8px 8px; border-radius: 50%; transition: all var(--time-btn-small) ease; } .reviews-horiznav-nav-sort-block .review-sort-order-block .btn-close:hover { background: var(--accent); } .reviews-horiznav-nav-sort-block + div.ml4 { height: 34px; } .borderDark ~ div.mt4 { margin: 0 !important; clear: both; } .reviews-horiznav-nav-sort-block + div.ml4 a, .borderDark ~ div.mt4 .ml4 a { height: 16px; padding: 4px 10px; background: var(--content-dim); border-radius: 12px; float: right; line-height: 16px; transition: all var(--time-btn-small) ease; } .reviews-horiznav-nav-sort-block + div.ml4 a:hover, .borderDark ~ div.mt4 .ml4 a:hover { background: var(--border); text-decoration: none; } /*------------------------------*\ REVIEWS @Content-Base \*------------------------------*/ .page-common .borderDark { position: relative; padding: 0 !important; border: 2px solid var(--border) !important; margin-bottom: 10px; clear: both; font-size: 1rem; } @media (min-width: 1630px) { #content:not([style]) .borderDark { display: inline-block; width: calc(50% - 5px); box-sizing: border-box; vertical-align: top; } #content:not([style]) .borderDark:nth-of-type(even) { margin-left: 10px; } #content:not([style]) table .borderDark:nth-of-type(odd) { float: left; } } /*------------------------------*\ REVIEWS @Content-Header \*------------------------------*/ .borderDark > .spaceit:nth-child(1) { height: 20px; padding: 5px 60px 55px 58px; background: var(--content-dim); border-bottom: 2px solid var(--border); margin: 0; } /* Fix for anime pages */ .breadcrumb ~ .borderDark > .spaceit:first-child div[style="float: left;"] td:last-child { padding-left: 7px; } /* - - - - - - - - - - - - - - -*\ Post Time, Episodes Seen, Overall Rating \*- - - - - - - - - - - - - - - */ .borderDark > .spaceit:first-child > div:first-child { display: flex; height: 70px; margin: 0 !important; flex-flow: column nowrap; justify-content: center; line-height: 18px; } /* Post Time */ /* Episodes Seen */ .borderDark > .spaceit:first-child > div:first-child .spaceit { padding: 0; margin: 0; } /* Overall Rating */ .borderDark > .spaceit:first-child > div:first-child div:last-child { display: none; } /* - - - - - - - - - - - - - - -*\ Anime Title \*- - - - - - - - - - - - - - - */ .borderDark > .spaceit:first-child > div.mb8:nth-child(2) { height: 18px; margin: 0 !important; line-height: 1; } /* - - - - - - - - - - - - - - -*\ User Name, User Avatar, and Helpful Count \*- - - - - - - - - - - - - - - */ .borderDark > .spaceit:first-child > div[style*="left"] { height: 52px; } .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) { height: 70px; margin-left: -53px; } .borderDark > .spaceit:first-child > div[style*="left"] td { line-height: 17px; } .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) td { line-height: 23px; } /* Helpful Count */ .borderDark > .spaceit:first-child > div[style*="left"] .spaceit { padding: 0; margin: 0; } /* Preliminary Review */ .js-reviews-chk-preliminary .fa-tag, .borderDark > .spaceit:first-child > div[style*="left"] .spaceit + div .fa-tag { color: var(--accent) !important; } /* User Avatar */ .borderDark > .spaceit:first-child > div[style*="left"] td[width="60"] { width: auto; } /* .borderDark > .spaceit:first-child .picSurround img { width: auto; max-width: 48px; max-height: 48px; } .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) .picSurround img { max-width: 66px; max-height: 66px; } */ .borderDark > .spaceit:first-child .picSurround img { width: auto; max-width: 48px; max-height: 48px; } .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) .picSurround img { max-width: 66px; max-height: 66px; } /*------------------------------*\ REVIEWS @Text \*------------------------------*/ .borderDark > .spaceit:nth-child(2) { min-height: 130px; padding: 3px 7px 3px 117px !important; border: none !important; margin: 0 !important; } /* - - - - - - - - - - - - - - -*\ Score \*- - - - - - - - - - - - - - - */ .borderDark:before { content: ""; position: absolute; left: 0; top: 82px; display: block; width: 108px; height: calc(100% - 82px); background: var(--content-dim); border-right: 2px solid var(--border); float: left; } .borderDark > .spaceit:nth-child(2) div[id^="score"] { position: absolute; top: 83px; left: 0; display: block !important; float: none !important; } .borderDark > .spaceit:nth-child(2) div[id^="score"] table { width: 108px; padding: 0; border-width: 0 0 1px !important; } .borderDark > .spaceit:nth-child(2) div[id^="score"] tr { border-width: 1px 0; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td { padding: 3px 0; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td:first-child { padding-left: 7px; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { padding-right: 7px; } .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { text-align: right; } /* - - - - - - - - - - - - - - -*\ Anime Image \*- - - - - - - - - - - - - - - */ .borderDark > .spaceit:nth-child(2) > div[style*="float: right"]:first-child { position: absolute; top: 5px; left: 5px; margin: 0 !important; } .borderDark > .spaceit:nth-child(2) .picSurround img { width: auto; max-height: 66px; } /* More Pics Button */ .borderDark > .spaceit:nth-child(2) .spaceit { display: none; } /*------------------------------*\ REVIEWS @Bottom-Buttons \*------------------------------*/ .borderDark > div:last-child { padding: 0 7px; text-align: right; font-size: 0; } .borderDark > div:last-child > .clearfix { padding: 0 0 3px !important; margin: 0 !important; } /* Report, Edit, Etc */ .borderDark > div:last-child a:nth-child(2) { height: 20px; display: inline-block; padding: 0 10px; background: var(--content-dim); border-radius: 10px; color: var(--text-lnk); line-height: 20px; text-transform: capitalize; transition: all var(--time-btn-small) ease; } .borderDark > div:last-child a:nth-child(2):hover { background: var(--border); color: var(--text-lnk-hov); text-decoration: none !important; } .borderDark > div:last-child a:nth-child(2) small { font-size: 0.9rem; } /* Permalink */ .borderDark > div:last-child a:first-child { position: absolute; top: 15px; right: 5px; display: block; width: 50px; height: 50px; background: var(--border); border-radius: 50%; color: var(--icon); text-align: center; text-decoration: none !important; transition: all var(--time-btn-small) ease; } .borderDark > div:last-child a:first-child:after { /* content: "\f14c"; */ content: "\f0c1"; font: 30px/50px 'Font Awesome 6 Pro'; } .borderDark > div:last-child a:first-child:hover { background: var(--accent-dimmest); } .borderDark > div:last-child a:first-child small { font-size: 0; } /* - - - - - - - - - - - - - - -*\ Helpful Review \*- - - - - - - - - - - - - - - */ .page-common .js-review-btn-helpful { padding-left: 7px; border-left: 2px solid var(--accent); line-height: 20px; } .page-common .js-review-btn-helpful .js-vote-review-button { display: inline-block; padding: 0 5px; background: var(--content-dim); border: none; border-radius: 10px; color: var(--text-lnk); } .page-common .js-review-btn-helpful .js-vote-review-button:hover { background: var(--border); color: var(--text-lnk-hov); } /*------------------------------*\ REVIEWS @Page-Nav \*------------------------------*/ .borderDark ~ div[style="float:right;"], #horiznav_nav div[style="float:right;"] { height: 16px; padding: 4px 10px; background: var(--content-dim); border-radius: 12px; margin-bottom: 10px; font-size: 1rem; line-height: 16px; } #horiznav_nav div[style="float:right;"] { margin-top: 1px; } .borderDark ~ div[style="float:right;"] > *, #horiznav_nav div[style="float:right;"] > * { line-height: 16px; } .borderDark ~ div[style="float:right;"] :first-child, #horiznav_nav div[style="float:right;"] :first-child { margin: 0 !important; } /*------------------------------*\ REVIEWS @Most-Helpful \*------------------------------*/ #content:not([style]) #horiznav_nav ~ table { max-width: 700px; margin: 0 auto; } #content:not([style]) #horiznav_nav ~ table .borderClass { border: none; } /*------------------------------*\ REVIEWS @Write \*------------------------------*/ .page-review #content { padding-top: 44px !important; } .page-review div[style="padding: 0 15px 15px 15px;"] { padding: 0 !important; font-size: 1rem; } /* Headers */ .page-review .normal_header { margin-top: 10px; } .page-review .normal_header small { font-size: 0.9rem; } /* Seen Episodes */ .page-review #seeneps { background: var(--content-dim) !important; margin-right: 5px; } /* Rate */ .page-review div[style$="margin-top: 8px;"] > table > tbody > tr { display: flex; width: 1040px; justify-content: space-around; margin: 0 auto; } .page-review .review_box { width: 150px; } .page-review .score_top { padding: 0 0 3px 4px; border-bottom: 2px solid var(--border); font-size: 1.1rem; font-weight: normal; } .page-review .review_score_over { color: var(--accent); font-size: 1.5rem; } .page-review .review_description { font-size: 1rem; } .page-review .review_scoreoff { background: var(--content-dim); color: var(--text); font-size: 1rem; } .page-review .review_scoreon { background: var(--border); color: var(--text-lnk-hov); font-size: 1rem; } /* Writing */ .page-review div[style="margin-top: 15px;"] td:first-child { width: auto; padding-right: 10px !important; } .page-review div[style="margin-top: 15px;"] td:last-child { width: 550px; } .page-review .textarea { width: 100% !important; resize: vertical; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/recommendations\\.php.*") { /* RECOMMENDATIONS */ div[style="padding: 0 20px;"] { padding: 0 !important; font-size: 0; } #myanimelist h2 { height: 13px; padding: 10px; background: var(--border); border: none; margin: 0 0 10px; color: var(--text-heading); font: 1.1rem/13px var(--fontset-heading); letter-spacing: 0.05em; text-transform: uppercase; } /* Recommendations */ .spaceit.borderClass { display: inline-block; width: calc(50% - 5px); padding: 0; border: 2px solid var(--border); margin: 0 0 10px 0; box-sizing: border-box; font-size: 1rem; vertical-align: top; } .spaceit.borderClass:nth-of-type(even) { margin-left: 10px; } @media (min-width: 1630px) { .spaceit.borderClass { width: calc(33.3334% - 13.3334px); margin-left: 10px; } .spaceit.borderClass:nth-of-type(3n+1) { margin-left: 0; } } .spaceit.borderClass table { padding: 5px; border-bottom: 2px solid var(--border); background: var(--content-dim); } .spaceit.borderClass .recommendations-user-recs-text { padding: 10px; margin: 0; } .spaceit.borderClass > .lightLink { padding: 0 10px 10px; margin: 0; } .spaceit.borderClass > .lightLink .lightLink { display: inline-block; height: 20px; padding: 0 10px; background: var(--content-dim); border-radius: 10px; margin-bottom: 5px; color: var(--text-lnk); font-size: 0.9rem; line-height: 20px; text-transform: capitalize; transition: all var(--time-btn-small) ease; } .spaceit.borderClass > .lightLink .lightLink:hover { background: var(--border); color: var(--text-lnk-hov); text-decoration: none; } /* Page Navigation */ div[style="padding: 0 20px;"] > .spaceit:not(.borderClass) { padding: 0; margin: 0; } #horiznav_nav div[style="float: right;"] .bgColor1, div[style="padding: 0 20px;"] > .spaceit:last-child .bgColor1 { display: inline-block; height: 16px; padding: 4px 10px !important; background: var(--content-dim); border-radius: 12px; font-size: 1rem; line-height: 16px; } /*------------------------------*\ RECOMMENDATIONS @Top-Users \*------------------------------*/ div[style$="width: 49%;"] { width: calc(50% - 5px) !important; } div[style$="width: 49%;"] .spaceit { padding: 0 10px; margin: 0 0 7px; font-size: 1rem; } /* Left Section */ /* Right Section */ div[style^="margin-left: 50%"] { margin-left: auto !important; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/clubs\\.php\\?cid=.*"), url-prefix("https://myanimelist.net/clubs.php") { /* CLUBS */ .page-common #content { padding-top: 44px !important; } #content > table { width: 1040px; margin-left: auto; } #content > table > tbody > tr { display: flex; } #content > table > tbody > tr > td:first-child { width: 740px; padding: 0; border: none !important; order: 1; } #content > table > tbody > tr > td:last-child { width: 297px !important; border-left: 3px solid var(--border); order: 2; } #content > table > tbody > tr > td:last-child > div { padding: 0 10px 0 17px !important; } @media (min-width: 1630px) { #content > table { width: 1050px; } #content > table > tbody > tr > td:first-child { padding-left: 7px; border-left: 3px solid var(--border) !important; } #content > table > tbody > tr > td:last-child { } } /* Unsorted */ .club-list .table-data td .new { background: var(--notif); padding: 1px 2px; border-radius: 5px; margin-right: 2px; } .club-list .table-data:nth-of-type(odd) td { background: none; } .club-list .table-data:nth-of-type(odd) { background: var(--content-dim); } .club-list .table-data *:not(a) { color: var(--text-dim) !important; } #catid.select { background: none !important; background-image: none !important; background-color: var(--content-dim) !important; color: #fff !important; border-color: var(--border) !important; border-radius: 30px 0 0 30px; } #catid > option { background-color: var(--content-dim) !important; color: #fff !important; } /*------------------------------*\ CLUBS @SPLIT-LEFT \*------------------------------*/ #content > table > tbody > tr > td.borderClass > div { display: flex; flex-direction: column; } #content > table > tbody > tr > td.borderClass > div > br { display: none; } /* Club Blurb */ /* .normal_header.club-information-header { order: 0; } */ .club-information-header + div.clearfix { margin-bottom: 15px; /* order: 10; */ } /* Club Forum */ .page-forum { order: -1; } .page-forum .normal_header { margin: 0 !important; } #forumTopics td { font-size: 0.9rem; } #forumTopics small { display: inline-block; } /* Club Member Box/Club Picture Box */ .club-information-header ~ table:not(#forumTopics), .club-information-header ~ table:not(#forumTopics) tbody { display: block; } .club-information-header ~ table:not(#forumTopics) tbody tr { display: flex; justify-content: space-between; } .club-information-header ~ table:not(#forumTopics) tbody tr td { height: auto; align-self: flex-start; flex: 0 1 auto; opacity: 1; transition: all var(--time-medium) ease; } .club-information-header ~ table:not(#forumTopics) tbody tr td:hover { opacity: 0.7; } /* Club Member Box */ .club-information-header ~ table[cellpadding="10"] { margin-bottom: 15px; } .club-information-header ~ table[cellpadding="10"] tbody tr td.borderClass { border: none; } .club-information-header ~ table[cellpadding="10"] td { width: 14%; } /* Club Picture Box */ .club-information-header ~ table[cellspacing="10"] { margin-bottom: 15px; } .club-information-header ~ table[cellspacing="10"] td { /* max-width: 104px; */ } /* Add Comment Box */ .club-information-header ~ div[style="margin: 10px 0px;"] { /* order: 20; */ } /*------------------------------*\ CLUBS @SPLIT-RIGHT \*------------------------------*/ #myanimelist td:nth-child(2) .normal_header { padding: 7px 10px; margin: 4px -10px 5px -10px; font-size: 1rem; } #myanimelist td:nth-child(2) .normal_header a { padding: 7px 10px; margin: -7px -10px 0 0; } /* Club Links */ .page-common #profileRows:before { content: "ACTIONS"; display: block; height: 13px; padding: 7px 10px; background: var(--border); margin: 0 -10px 5px -10px; color: var(--text); font: bold 1rem/13px var(--fontset-heading); letter-spacing: 0.05em; } #myanimelist #profileRows a, td:nth-child(2) .normal_header + a[href="#"] { display: block; padding: 4px 10px; height: 16px; margin-left: -10px; margin-right: -10px; background: var(--content-dim); border: none; border-radius: 12px; color: var(--text-lnk); line-height: 16px; text-decoration: none; transition: all var(--time-btn-small) ease; } #myanimelist #profileRows a + a { margin-top: 3px; } #myanimelist #profileRows a:hover, td:nth-child(2) .normal_header + a[href="#"]:hover { background: var(--accent-dim); color: var(--text-heading); } /* Club Messages */ #club-mass-message-subscribe { padding-bottom: 0 !important; } /* Join Club */ /* #myanimelist #profileRows a:only-of-type {} */ /* VERSION ONE .page-common #profileRows a, .page-common .profileRows a { border-color: var(--border) !important; color: var(--text-lnk); transition: all var(--time-btn-small) ease; } .page-common #profileRows a:hover, .page-common .profileRows a:hover { background: var(--accent-dim); color: var(--text-heading); } */ /* Club Admins & Officers */ .normal_header ~ .normal_header ~ .borderClass a[href^="/profile/"] { width: 50%; float: right; } /* Anime Relations */ #profileRows ~ .borderClass { border: none; margin: 0 -10px; padding: 3px 10px; } #profileRows ~ .borderClass:nth-of-type(odd) { background: var(--content-dim); } /*------------------------------*\ CLUBS @Split-Comments \*------------------------------*/ /* Submit Form */ td.borderClass > div > div[style="margin: 10px 0px;"] { width: 100%; } td.borderClass > div > div[style="margin: 10px 0px;"] textarea { width: 100% !important; height: 100px; min-height: 100px; background: var(--content-dim); border-color: var(--border); box-sizing: border-box; overflow-x: hidden; overflow-y: auto; resize: vertical; } td.borderClass > div > div[style="margin: 10px 0px;"] div[style="margin-top: 3px;"] { width: 140px; margin: 6px 0 0 auto !important; } td.borderClass > div > div[style="margin: 10px 0px;"] div[style="margin-top: 3px;"] input { width: 140px; min-width: initial; height: 24px; background: var(--accent); border-radius: 12px; } td.borderClass > div > div[style*="width: 733px"] > br { display: none; } div[id^="comment"] { position: relative; background: none !important; word-break: break-word; } div[id^="comment"] ~ div[id^="comment"] { margin-top: 20px; } div[id^="comment"] table, div[id^="comment"] tbody { display: block; } div[id^="comment"] tr { display: flex; background: none !important; align-items: flex-start; } div[id^="comment"] td:nth-child(1) { width: 52px; padding: 0; margin: 0; flex: 0 0 auto; } div[id^="comment"] td:nth-child(1) img { width: 48px; padding: 0; border-width: 2px; border-color: var(--border); } div[id^="comment"] td:nth-child(2) { display: block; padding: 0 0 0 7px; flex: 1 1 100%; /* font-size: 0.9rem; */ } div[id^="comment"] td:nth-child(2) .codetext { max-width: 441px; } /* Comment Headers */ div[id^="comment"] td:nth-child(2) > div:first-child { width: 100%; height: 26px; padding: 0 0 0 7px; background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px); margin: 0 -3px 3px -7px !important; } div[id^="comment"] td:nth-child(2) > div:first-child a { display: inline-block; height: 16px; margin: 5px 0 5px 0 !important; font-size: 0.9rem; font-weight: bold; line-height: 16px; } div[id^="comment"] td:nth-child(2) > div:first-child small { display: inline-block; margin: 5px 0 5px 0 !important; vertical-align: top; } div[id^="comment"] td:nth-child(2) > div:first-child small span { color: var(--text-dimmer); font-size: 0.8rem; line-height: 16px; } /* Delete Button */ div[id^="comment"] td:nth-child(2) > div ~ div[style="margin-top: 10px;"]:last-of-type { position: absolute; right: 0; top: 0; margin-top: 0 !important; } div[id^="comment"] td:nth-child(2) > div ~ div[style="margin-top: 10px;"]:last-of-type a { display: inline-block; height: 26px; padding: 0 7px; color: var(--text-dim); font-size: 0.8rem; line-height: 26px; transition: all var(--time-btn-small) ease; } div[id^="comment"] td:nth-child(2) > div ~ div[style="margin-top: 10px;"]:last-of-type a:hover { background: var(--border); } @media (min-width: 1630px) { td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style*="width: 733px"] { position: absolute; left: 10px; top: 87px; top: 220px; width: 523px !important; max-height: calc(100% - 320px); padding-top: 0 !important; padding-right: 4px; overflow-y: auto !important; overflow-x: visible !important; } td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] ~ div:nth-last-of-type(1) { top: 220px; } td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div.normal_header:nth-last-of-type(3), td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div.normal_header:nth-last-of-type(2) { position: absolute; left: 10px; top: 44px; width: 503px !important; margin-top: 0; } /* Submit Form */ td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] { position: absolute; left: 10px; top: 70px; width: 523px; } td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] .normal_header { display: none; } td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] textarea { height: 100px !important; resize: none; } } /*------------------------------*\ CLUBS @REPORT-BUTTON \*------------------------------*/ #content > div.spaceit { position: absolute; right: 0; top: 0; padding: 0; border: 0; margin: 0; z-index: 905; } #content > div.spaceit a { display: block; height: 20px; padding: 7px 10px 5px; line-height: 17px; font-weight: bold; transition: all var(--time-medium) ease; } #content > div.spaceit a:hover { background: var(--accent-dimmest); } #content > div.spaceit a:before { content: "\f06a"; margin-right: 4px; font: normal 12px/1 'Font Awesome 6 Pro'; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/clubs\\.php\\?action=view&t=pictures.*") { /* !CLUB-PICTURES */ #content > .borderClass { height: 13px; padding: 10px; background: var(--border); font: 1.1rem/13px var(--fontset-heading); text-transform: uppercase; letter-spacing: 0.05em; } #content > .borderClass a { } #content > .borderClass a:hover { } #content > .borderClass > a { float: right; } #content > .borderClass span a { text-transform: none; letter-spacing: 0; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/mymessages\\.php.*") { /* PRIVATE MESSAGES */ /* INBOX */ /* Row */ .message { width: 100%; display: flex; } .message.unread { background: var(--content-dim); } .message.read * { opacity: 0.8 } .message > .mym { background: none !important; border-color: var(--border); } .message .mym_checkboxes { flex: 0 0 auto; } .message .mym_replied { flex: 0 0 auto; } .message .mym_user { flex: 0 0 auto; } .message .mym_subject { flex: 1 1 auto; } .message.read .mym_subject .subject-link { width: 100%; } .message .mym_option { flex: 0 0 200px; } .message .mym_subject > a.subject-link .text, .message.read .mym_subject > a.subject-link .text, .message.read .mym_date, .message .mym_date { color: var(--text-dim) !important; } .message.read a { color: var(--text-lnk) !important; } .message.read a:hover { color: var(--text-lnk-hov) !important; } .pmessage-message-history .date, .pmessage-message-history .name, .pmessage-message-history .subject { color: var(--text-dim); } /* MESSAGE */ .page-common .border_top { border: none; } .pmessage-message-history tr { display: flex; flex-flow: row wrap; margin-bottom: 5px; } .pmessage-message-history td { border: none !important; } .pmessage-message-history .date { height: 20px; padding: 0 !important; background: var(--content-dim) ; flex: 0 0 auto; order: 2; font-size: 0.8rem; line-height: 20px; } .pmessage-message-history .name { height: 20px; padding: 0 !important; /* background: linear-gradient(to right, var(--accent), var(--accent-dimmest)); */ background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px); flex: 1 0 auto; order: 1; font-size: 0.9rem; line-height: 20px; text-align: left; } .pmessage-message-history .subject { display: block; padding: 3px 7px; flex: 1 1 100%; order: 3; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/news.*") { /* !NEWS */ .news-list .comment-list .text, .news-list .news-unit .text, body.news .news-container .content { color: var(--text); font-family: var(--fontset-basic); font-size: 1.1rem; } body.news .content-left { border-right: 3px solid var(--border); } body.news .content-left .mr8 { margin-right: 7px !important; } body.news .content-right { padding-left: 7px; } body.news h2 { color: var(--text-heading); } /* NEWS LIST */ .news-list .comment-list .title, .news-list .news-unit .title { padding: 7px 10px; background: var(--content-dim); /* border-left: 3px solid var(--accent); */ } .news-list .comment-list .title a, .news-list .news-unit .title a { margin: 0; line-height: 19px; } /* ARTICLE - HEADER BAR & TITLE */ body.news .news-container .title { padding: 7px 10px; background: var(--content-dim); border-left: 3px solid var(--accent); } body.news .news-container .title a { color: var(--text-heading); line-height: 19px; } body.news .news-container .news-info-block { background: var(--content-dim); } /* ARTICLE - Social */ body.news .news-container .news-info-block .sns-unit .icon-social { width: 30px; height: 30px; background-image: var(--img-socials); /* /img/sp/common/sprite_icon_social2.png */ background-size: 300px 60px; } body.news .news-container .news-info-block .sns-unit .icon-social.icon-facebook { background-position: 0 0; } body.news .news-container .news-info-block .sns-unit .icon-social.icon-twitter { background-position: -30px 0; } body.news .news-container .news-info-block .sns-unit .icon-social.icon-google { background-position: -60px 0; } body.news .news-container .news-info-block .sns-unit .icon-social.icon-reddit { background-position: -90px 0; } body.news .news-container .news-info-block .sns-unit .icon-social.icon-tumblr { background-position: -120px 0; } /* ARTICLE - BODY */ .news-list .comment-list, .news-list .news-unit { border-color: var(--border); font-family: var(--fontset-basic); } /* ARTICLE FOOTER */ body.news .news-container .tags { background: var(--content-dim); } /* COMMENTS */ .news-list .comment-list:nth-of-type(even) { background: var(--content-dim); } /* RIGHT CONTAINER */ body.news .news-side-block .header, body.news .featured-side-block .header { border-color: var(--border); color: var(--text-heading); } body.news .news-side-block .news-list .news, body.news .news-side-block .news-list .featured, body.news .news-side-block .featured-list .news, body.news .news-side-block .featured-list .featured, body.news .featured-side-block .news-list .news, body.news .featured-side-block .news-list .featured, body.news .featured-side-block .featured-list .news, body.news .featured-side-block .featured-list .featured { border-color: var(--border); } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/blog.*") { /* !BLOG */ /* .page-common #contentWrapper { width: 1060px; } #content > div > div[style="margin: 5px 0;"] { border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; } #content > div > .borderClass:last-of-type { clear: both; border-top: 2px solid var(--border); } #content div[style="padding: 0 0 13px 13px;"] { width: 1025px; padding: 0 !important; margin: 0 auto; } */ .page-common #myanimelist, .page-common #wrapper { width: 100%; } #header { position: static; width: 100%; display: flex; flex-wrap: wrap; justify-content: stretch; } #top { width: 1060px; margin: 0 auto; } .blog_detail_content_wrapper { color: var(--text); } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/about\\.php") { /* ABOUT */ .page-common #contentWrapper { width: 1060px; background: #fff; color: #000; } .page-common #content { padding-top: 34px !important; } #content .about-header-sub { color: #000; } } @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(animelist|mangalist)/.*") { /* MODERN LISTS */ } @-moz-document url-prefix("https://myanimelist.net/ajaxtb.php") { /* END */ #fancybox-wrap { display: none; } }