Advertisement
ShaggyZE1

MAL Dark Mode

Jul 16th, 2022
1,702
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 165.34 KB | None | 0 0
  1. /* ==UserStyle==
  2. @name         MyAnimeList Dark Mode
  3. @version      0.1
  4. @namespace    userstyles.world/user/shaggyze
  5. @description  MyAnimeList Dark Mode Modified by ShaggyZE
  6. @author       shaggyze
  7. @license      No License
  8. ==/UserStyle== */
  9.  
  10. @-moz-document regexp("http(s|)://(www\\.|mxj.|)(?!image\\.)myanimelist\\.net/(?!animelist|mangalist|rss|ownlist).*") {
  11. /*
  12.  * MyAnimeList Dark Mode originally by Valerio Lyndon
  13.  *
  14.  *
  15.  * https://github.com/ValerioLyndon
  16.  * https://myanimelist.net/profile/Valerio_Lyndon
  17.  *
  18.  *
  19.  * TABLE OF CONTENTS
  20.  *
  21.  * RESOURCES             : resources loaded from outside sources
  22.  *
  23.  * VARIABLES             : set the theme's colours, images, etcetera
  24.  *
  25.  * PAGE-BASE             : basic site-wide page layout
  26.  *
  27.  * PAGE-HEADER           : site-wide page navigation
  28.  *
  29.  * FOOTER                : site-wide footer
  30.  *
  31.  * CONTENT               : generic, re-used parts of code
  32.  * Headings
  33.  *
  34.  *
  35.  *
  36.  *
  37.  *
  38.  *
  39.  *
  40.  *
  41.  *
  42.  *
  43.  *
  44.  *
  45.  *
  46.  *
  47.  *
  48.  *
  49.  */
  50. /*==============================*\
  51.   !RESOURCES
  52. \*==============================*/
  53. :root {
  54.     /* Base Colours */
  55.     --page: hsl(30, 0%, 10%);
  56.     --content: hsl(30, 0%, 19%);
  57.     --content-rgb: 49, 48, 47;
  58.     --content-dim: hsl(30, 0%, 16%);
  59.     --content-dim-rgb: 42, 41, 40;
  60.     --content-dimmer: hsl(30, 0%, 13%);
  61.     --content-dimmest: hsl(30, 0%, 10%);
  62.     --border: var(--content-dimmer);
  63.    
  64.     --accent-bright: hsl(46, 63%, 46%); /*unused as of yet*/
  65.     --accent: hsl(46, 49%, 44%);
  66.     --accent-rgb: 166, 140, 57;
  67.     --accent-dim: hsl(46, 32%, 28%);
  68.     --accent-dimmer: hsl(46, 35%, 20%);
  69.     --accent-dimmest: hsl(46, 25%, 18%);
  70.     --notif: hsl(223, 49%, 60%);
  71.     --notif-rgb: 102, 130, 202;
  72.    
  73.     --text: hsl(0, 0%, 86%);
  74.     --text-dim: hsl(0, 0%, 74%);
  75.     --text-dimmer: hsl(0, 0%, 60%);
  76.     --text-dimmest: hsl(0, 0%, 50%);
  77.     --text-heading: hsl(0, 0%, 89%);
  78.     --text-lnk: hsl(0, 0%, 98%);
  79.     --text-lnk: hsl(45, 76%, 59%);
  80.     --text-lnk-hov: hsl(45, 100%, 60%);
  81.    
  82.     --icon: hsl(0, 0%, 69%);
  83.    
  84.     --return-bad: hsl(0, 85%, 59%);
  85.    
  86.     --page-shadow: 3px 1.5px 5px hsla(0,0%,0%,25%);
  87.    
  88.     /* Header Colours */
  89.     --header: hsl(0, 0%, 13%);
  90.     --header-rgb: 34, 34, 34;
  91.     --header-dim: hsl(0, 0%, 25%);
  92.     --header-hov: hsl(0, 0%, 26%);
  93.     --header-border: hsl(0, 0%, 6.6667%);
  94.     --header-border-alt: hsl(0, 0%, 3.3334%);
  95.     --header-text: hsl(0, 0%, 96%);
  96.     --header-text-dim: hsl(0, 0%, 86%);
  97.     --header-icon: hsl(0, 0%, 89%);
  98.    
  99.     /*  Specific Colours */
  100.     --quotebox-bg: #2c2b2a;
  101.     --quotebox-bg: rgba(15,10,10,0.1);
  102.     --codebox-bg: #3c402f;
  103.     --codebox-bg: #2a2b2b;
  104.     --codebox-text: #96af1d;
  105.     --codebox-text: #99b6c2;
  106.    
  107.     /* Status Colours */
  108. /*  --allanime: #ff00de; */
  109.     --watching: #c28639;
  110.     --completed: #364e88;
  111.     --onhold: #ccb050;
  112.     --dropped: #c84e50;
  113.     --planned: #454545;
  114.    
  115.     /* Timings */
  116. /*  REMOVE THESE DEFUNCT ONES */
  117.     --time-long: 0.3s;
  118.     --time-medium: 0.24s;
  119.     --time-short: 0.12s;
  120.    
  121.     --time-img: 0.24s;
  122.     --time-btn-large: 0.2s;
  123.     --time-btn-small: 0.12s;
  124.    
  125.     --time-function-bounce: cubic-bezier(0.5, 0, 0.25, 1.2);
  126. }
  127. /* BLUE THEME */
  128. :root {
  129.     --header: #2a2a2a;
  130.     --header-icon: #1d439b;
  131.     --page: #2a2a2a;
  132.     --content: #303030;
  133.    
  134.     --accent: #7994bc;
  135.     --accent-dim: #4e678d;
  136.     --accent-dimmer: #344969;
  137.     --accent-dimmest: #28384f;
  138.     --notif: #df6464;
  139.     --notif-0: #df646400;
  140.    
  141.     --text-lnk: #99b0d3;
  142.     --text-lnk-hov:hsl(223, 49%, 60%);
  143.    
  144.     --watching: #bbbbdd;
  145.     --completed: #9999bb;
  146.     --onhold: #777799;
  147.     --dropped: #555577;
  148.     --planned: #444455;
  149. }
  150. /*==============================*\
  151.   !PAGE-BASE
  152. \*==============================*/
  153. body:not(.ownlist) {
  154.     background: var(--page) !important;
  155.     color: var(--text);
  156. }
  157. .page-common #contentWrapper {
  158.     background: var(--content);
  159.     box-shadow: var(--page-shadow);
  160. }
  161. .page-common #content {
  162.     background: var(--content);
  163.     box-shadow: var(--page-shadow);
  164. }
  165. .page-common .watch-state-icon.watched {
  166.     color: var(--text-lnk-hov);
  167. }
  168. 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 {
  169.     color:#FFF !important;
  170. }
  171. body.news .news-container .tags, body.news .news-container .news-info-block, body.news .news-container .information {
  172.     background: var(--content) !important;
  173.     box-shadow: var(--page-shadow) !important;
  174. }
  175. /*==============================*\
  176.   !PAGE-HEADER
  177. \*==============================*/
  178. .page-common #headerSmall {
  179.     background: var(--header) !important;
  180. }
  181. #menu:before {
  182.     border-bottom: 1px solid var(--header-border);
  183.     box-shadow: var(--page-shadow);
  184. }
  185. .page-common #menu ,.page-common #menu:hover{
  186.     background: var(--content) !important;
  187. }
  188. /* ACCOUNT */
  189. .page-common #header-menu {
  190.     box-shadow: var(--header-border);
  191.     border-bottom: 1px solid var(--header-border);
  192. }
  193. /* ACCOUNT ICONS */
  194. .page-common #header-menu .header-menu-unit:not(.header-profile) > a,
  195. .page-common #header-menu .header-notification .header-notification-button {
  196.     color: var(--header-icon) !important;
  197. }
  198. .page-common #header-menu .header-menu-unit:not(.header-profile) > a:hover,
  199. .page-common #header-menu .header-notification:hover .header-notification-button:hover {
  200.     background: var(--header-hov) !important;
  201. }
  202. /* ACCOUNT LIST DROPDOWN */
  203. .page-common .header-list .header-list-dropdown {
  204.     background: var(--header);
  205.     border: 1px solid var(--header-border);
  206. }
  207. .page-common .header-list .header-list-dropdown ul li a {
  208.     color: var(--header-text-dim);
  209. }
  210. .page-common .header-list .header-list-dropdown ul li a:hover {
  211.     background: var(--header-hov);
  212. }
  213. /* ACCOUNT NOTIFICATIONS */
  214. /* Base */
  215. .page-common #header-menu .header-notification-button.has-unread:after, .page-common #header-menu .header-message-button.has-unread:after {
  216.     background: var(--notif);
  217.     color: var(--header-text);
  218. }
  219. .page-common .header-notification-dropdown .arrow_box {
  220.     background: var(--header);
  221.     border-color: var(--header-border);
  222. }
  223. /* Links */
  224. .page-common .header-notification-item-list a { color: var(--text-lnk) !important; }
  225. .page-common .header-notification-item-list a:hover { color: var(--text-lnk-hov) !important; }
  226. /* Top Bar */
  227. .page-common .header-notification-dropdown-inner h3 {
  228.     background: var(--header-border);
  229.     color: var(--header-text);
  230. }
  231. .page-common .header-notification-dropdown-inner h3 a,
  232. .page-common .header-notification-dropdown-inner h3 .mark-all {
  233.     color: var(--header-text-dim) !important;
  234. }
  235. .page-common .header-notification-dropdown-inner h3 a:hover,
  236. .page-common .header-notification-dropdown-inner h3 .mark-all:not(.disabled):hover {
  237.     background: var(--header-border-alt);
  238. }
  239. .page-common .header-notification-dropdown-inner h3 .mark-all.disabled { color: var(--text-dimmest) !important; }
  240. /* Items */
  241. .page-common .header-notification-item:hover {
  242.     background: var(--header-hov) !important;
  243. }
  244. .page-common .header-notification-item {
  245.     border-bottom: 1px solid var(--header-border) !important;
  246. }
  247. /* .page-common .header-notification-item .inner:not(.is-read):before {
  248.     background: linear-gradient(to right, rgba(var(--notif-rgb), 0.3), rgba(var(--notif-rgb), 0));
  249. } */
  250. .page-common .header-notification-item .inner:not(.is-read) {
  251.     border-left: 4px solid var(--notif);
  252.     color: var(--text-dim);
  253. }
  254. .page-common .header-notification-item .inner.is-read { color: var(--text-dimmest); }
  255. /* Checkmark */
  256. .page-common .header-notification-item .inner:not(.is-read) .is-read {
  257.     background: var(--header-border);
  258.     color: var(--text);
  259. }
  260. .page-common .header-notification-item .inner:not(.is-read) .is-read:not(.checked) .fa-check:hover { background: rgba(var(--notif-rgb), 0.5); }
  261. .page-common .header-notification-item-header .is-read.checked .fa-check {
  262.     background: var(--notif);
  263. }
  264. .page-common .header-notification-item-header .category { color: var(--text) !important; }
  265. .page-common .is-read .header-notification-item-header .category { color: var(--text-dimmer) !important; }
  266. .page-common .header-notification-item-header .time { color: var(--text-dimmer) !important; }
  267. .page-common .is-read .header-notification-item-header .time { color: var(--text-dimmest) !important; }
  268. /* Friend Requests */
  269. #myanimelist .actions .result, #myanimelist .actions .action-button {
  270.     background: var(--header-border);
  271.     color: var(--text);
  272. }
  273. #myanimelist .actions .result:hover, #myanimelist .actions .action-button:hover { background: var(--notif) !important; }
  274. #myanimelist .actions .action-button.deny { background: var(--header-border); }
  275. #myanimelist .actions .action-button.accept { background: var(--accent-dim); }
  276. #myanimelist .actions .result { background: var(--notif); }
  277. /* Bottom Bar */
  278. .page-common .header-notification-view-all a {
  279.     background: var(--header);
  280.     border-top: 1px solid var(--header-border);
  281. }
  282. .page-common .header-notification-view-all a:hover {
  283.     background: var(--header-hov);
  284. }
  285. /* ACCOUNT PROFILE */
  286. .page-common .header-profile.link-bg {
  287.     background-color: var(--header);
  288. }
  289. .page-common #header-menu .header-profile .header-profile-link {
  290.     color: var(--header-text);
  291. }
  292. .page-common #header-menu .header-profile .header-profile-link:hover {
  293.     background: var(--header-hov) !important;
  294. }
  295. /* PROFILE DROPDOWN */
  296. .page-common .header-profile .header-profile-dropdown {
  297.     background: var(--header);
  298.     border-color: var(--header-border);
  299. }
  300. .page-common .header-profile .header-profile-dropdown ul li a {
  301.     color: var(--header-text-dim);
  302. }
  303. .page-common .header-profile .header-profile-dropdown ul li a:hover { background: var(--header-hov); }
  304. /* Dividers */
  305. .page-common .header-profile .header-profile-dropdown ul li:last-child:before,
  306. .page-common .header-profile .header-profile-dropdown ul li:nth-child(8):after {
  307.     background: var(--header-border);
  308. }
  309. /* HEADER - PROFILE PICTURE */
  310. .header-profile-button:before {
  311.     background: var(--header);
  312. }
  313. /* ===============================================
  314. HEADER / NAV
  315. =============================================== */
  316. .page-common #header-menu .header-menu-login .btn-login, .page-common #header-menu .header-menu-login .btn-signup {
  317.     color: var(--header-text) !important;
  318. }
  319. .page-common #header-menu .header-menu-login .btn-signup { background: rgba(var(--notif-rgb), 0.5); }
  320. .page-common #header-menu .header-menu-login .btn-login:hover { background: var(--header-hov); }
  321. .page-common #header-menu .header-menu-login .btn-signup:hover { background: rgb(var(--notif-rgb)); }
  322. .page-common #header-menu .header-menu-login .btn-login:after {
  323.     color: var(--header-icon);
  324. }
  325. .page-common #header-menu .header-menu-login .btn-signup:after {
  326.     color: var(--header-icon);
  327. }
  328. /* LINKS */
  329.  
  330. .page-common #nav li:hover {
  331.     background: var(--header-hov) !important;
  332. }
  333. .page-common #nav li a:hover {
  334.     background: var(--header-hov) !important;
  335. }
  336. .page-common #nav > li > .non-link {
  337.     color: var(--header-text) !important;
  338. }
  339. .page-common #nav li.hover a.non-link {
  340.     background: var(--header-hov) !important;
  341. }
  342. .page-common #nav > li > ul {
  343.     border-color: var(--header-border);
  344. }
  345. }
  346.  
  347. .page-common #nav > li > ul > li > a {
  348.     background: var(--header) !important;
  349.     color: var(--header-text-dim) !important;
  350. }
  351. .page-common #nav > li > ul > li > a:hover {
  352.     background: var(--header-hov) !important;
  353. }
  354. /* ===============================================
  355. HEADER / NAV / SEARCH
  356. =============================================== */
  357. #top-search-bar #searchBar {
  358.     background: var(--header-dim);
  359. }
  360. .page-common #searchBar.searchBar #topSearchValue {
  361.     color: var(--text-dim);
  362. }
  363. .page-common #searchBar.searchBar #topSearchValue:focus {
  364.     background-color: var(--header-hov) !important;
  365. }
  366. .page-common #searchBar.searchBar #topSearchText {
  367.     color: var(--text-dim);
  368. }
  369. .page-common #searchBar.searchBar #topSearchButon {
  370.     color: var(--header-text-dim) !important;
  371. }
  372. .page-common #searchBar.searchBar #topSearchButon:not(.notActive):hover { background: var(--header-hov) !important; }
  373. /* Results */
  374. .page-common #topSearchResultList {
  375.     background: var(--header);
  376.     border-color: var(--header-border);
  377. }
  378. #topSearchResultList .list.focus { background: var(--header-hov); }
  379. #topSearchResultList .list .image { border: 2px solid var(--header-border); }
  380. #topSearchResultList .list .name { color: var(--text-dim) !important; }
  381. #topSearchResultList .list .media-type { color: var(--text-dimmest) !important; }
  382. #topSearchResultList .list .extra-info { color: var(--text-dimmer) !important; }
  383. #topSearchResultList .list.separator {
  384.     background: var(--header-border);
  385. }
  386. #topSearchResultList .list.separator span {
  387.     color: var(--text);
  388. }
  389. #topSearchResultList .list-bottom {
  390.     background: var(--content-dim) !important;
  391. }
  392. #topSearchResultList .list-bottom.focus {
  393.     background: var(--accent) !important;
  394. }
  395. #topSearchResultList .list.list-bottom a { color: var(--header-text); }
  396. #topSearchResultList .list.list-bottom.focus a { color: var(--header); }
  397. /* ===============================================
  398. !FOOTER
  399. =============================================== */
  400. footer {
  401.     box-shadow: var(--page-shadow);
  402. }
  403. .page-common #footer-block {
  404.     background-color: var(--content);
  405. }
  406. .page-common #footer-block .footer-link a {
  407.     color: var(--text-heading);
  408. }
  409. /* First Div */
  410. .page-common #footer-block .footer-link-block:after {
  411.     background: linear-gradient(to right, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0));
  412. }
  413. .page-common #footer-block .footer-link { border-color: var(--accent-dim) !important; }
  414. /* Second Div */
  415. .page-common #footer-block .footer-social-media:before { background: var(--accent-dim); }
  416. .page-common #footer-block .footer-social-media .icon-sns {
  417.     background-image: var(--img-socials-alt); /*/images/footer/footer-icon-sns.png?v=150421001*/
  418. }
  419. .page-common #footer-block .footer-recommended .icon-recommended {
  420.     color: var(--text-heading);
  421. }
  422. .page-common #footer-block div:after,
  423. .page-common #footer-block #copyright {
  424.     color: var(--accent) !important;
  425. }
  426. #copyright:after {
  427.     content: "MAL Dark Mode by ShaggyZE | Version 0.0.1";
  428. }
  429. /*==============================*\
  430.   !GENERIC
  431. \*==============================*/
  432. /* Scrollbar - Firefox */
  433. * {
  434.   scrollbar-color: var(--accent-dimmer) var(--content-dimmer);
  435. /*   scrollbar-width: thin; */
  436. }
  437. /* Scrollbar - Chrome/Webkit */
  438. *::-webkit-scrollbar {
  439.     background: var(--content-dimmest);
  440. }
  441. *::-webkit-scrollbar-track {
  442.     background: var(--content-dimmer);
  443. }
  444. *::-webkit-scrollbar-thumb {
  445.     background: var(--accent-dimmer);
  446. }
  447. *::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
  448. *::-webkit-scrollbar-button, *::-webkit-scrollbar-corner { background: var(--content-dimmest); }
  449. *::-webkit-scrollbar-button:vertical:decrement { background: transparent var(--img-icon-arrow-up) no-repeat center / 8px auto; }
  450. *::-webkit-scrollbar-button:vertical:increment { background: transparent var(--img-icon-arrow-dn) no-repeat center / 8px auto; }
  451. *::-webkit-scrollbar-button:horizontal:decrement { background: transparent var(--img-icon-arrow-lt) no-repeat center / auto 8px; }
  452. *::-webkit-scrollbar-button:horizontal:increment { background: transparent var(--img-icon-arrow-rt) no-repeat center / auto 8px; }
  453. *::-webkit-resizer { background: transparent var(--img-icon-resize) no-repeat right bottom / 12px 12px; }
  454. html::-webkit-scrollbar, body::-webkit-scrollbar { width: 17px; }
  455. html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  456.     background: var(--content-dimmer);
  457. }
  458. html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  459.     background: var(--accent-dim);
  460. }
  461. html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  462. /* Divs */
  463. /* .page-common .pt24 { padding-top: 20px !important; }
  464. .page-common .pb24 { padding-bottom: 20px !important; }
  465. .page-common .mt8 { margin-top: 7px !important; }
  466. .page-common .mt12 { margin-top: 10px !important; }
  467. .page-common .mt24 { margin-top: 20px !important; }
  468. .page-common .mr8 { margin-right: 7px !important; }
  469. .page-common .mb8 { margin-bottom: 7px !important; }
  470. .page-common .mb12 { margin-bottom: 10px !important; }
  471. .page-common .mb24 { margin-bottom: 20px !important; }
  472. .page-common .ml8 { margin-left: 7px !important; } */
  473. /* Text Colours */
  474. .page-common .lightLink, .page-common .lightLink:link, .page-common .lightLink:visited, .page-common .lightLink:active,
  475. .page-common .dark_text, .page-common .dark_text:hover, .page-common .dark_text:visited {
  476.     color: var(--text-dimmer);
  477. }
  478. .page-common .fn-grey1, .page-common .fn-grey6 { color: var(--text-dimmer) !important; }
  479. .page-common .fn-grey2, .page-common .fn-grey5 { color: var(--text-dimmest) !important; }
  480. .page-common a, .page-common a:visited { color: var(--text-lnk); }
  481. .page-common a:hover { color: var(--text-lnk-hov); }
  482. .page-common .fn-blue1 { color: var(--text-lnk) !important; }
  483. .page-common a.fn-blue1:hover { color: var(--text-lnk-hov) !important; }
  484.  
  485. /* Text Headers */
  486. .page-common .h1, .page-common .h2, .page-common .h3, .page-common .h4, .page-common .h5, .page-common .h6,
  487. .page-common h1, .page-common h2, .page-common h3, .page-common h4, .page-common h5, .page-common h6 {
  488.     background-color: var(--header);
  489.     color: var(--text);
  490. }
  491. .page-common .badresult-text { color: var(--return-bad) }
  492. /* Borders & Containers */
  493. :focus { outline-color: var(--accent); }
  494. .wrapper > div > div *:not(img) {
  495.     border-color: var(--border);
  496. }
  497. .page-common .bgColor1 { background: var(--content-dim); }
  498. .page-common .bgColor2 { background: var(--content-dim); }
  499. .page-common .bgbdrContainer,
  500. .page-common .border_top,
  501. #dialog,
  502. .page-common .normal_header,
  503. .page-common .borderClass {
  504.     border-color: var(--border);
  505. }
  506. .page-common .bgbdrContainer {
  507.     background: var(--content-dim);
  508. }
  509. /* Images */
  510. .page-common div.picSurround {
  511.     background: var(--border);
  512.     border: 2px solid var(--border);
  513. }
  514. .icon-watch:before, .icon-watch-pv:before {
  515.     color: var(--icon);
  516. }
  517. /* Buttons - Generic */
  518. #myanimelist textarea, #myanimelist input, #Size, #Colour, .page-common .textarea {
  519.     background-color: var(--content-dim);
  520.     border-color: var(--border);
  521.     color: var(--text);
  522. }
  523. input:disabled, textarea:disabled {
  524.     color: var(--text-dimmest);
  525. }
  526. .page-common .textarea, .page-common textarea {
  527.     min-width: 15em;
  528.     min-height: 6em;
  529.    
  530.     resize: both;
  531. }
  532. /* .page-common .textarea {
  533.     background: var(--content-dim) var(--img-icon-resize) no-repeat right bottom / 12px 12px !important;
  534. } */
  535. /* Buttons - Inputs */
  536. #myanimelist .inputButton, .page-common .btn-form-submit,
  537. .page-common.ownlist_style_theme .inputButton {
  538.     height: 24px;
  539.     padding: 4px 10px;
  540.     background-color: var(--accent);
  541.    
  542.     color: var(--border);
  543.     font: bold 1rem/16px var(--fontset-basic);
  544.    
  545. }
  546. #myanimelist .inputButton:not(:disabled):hover, .page-common .btn-form-submit:not(:disabled):hover {
  547.     background: var(--accent-dim);
  548.    
  549.     color: var(--text-lnk-hov);
  550. }
  551. .inputButton ~ .inputButton { margin-left: 5px; }
  552. #myanimelist .inputButton:disabled {
  553.     background-color: var(--content-dimmer);
  554.     color: var(--text-dimmest);
  555.    
  556.    
  557. }
  558. /* Patches - Ownlist-style */
  559. .page-common .inputButton.btn-middle:active {
  560.     background: var(--accent);
  561.     color: var(--border);
  562. }
  563. .page-common.ownlist_style_theme .inputButton:hover { color: var(--text-lnk-hov) !important; }
  564. /* Patches -  page */
  565. .page-common .btn-form-submit.js-btn-support-form {
  566.     height: 32px;
  567.     padding: 8px 30px !important;
  568.    
  569. }
  570. .page-support #myanimelist #content p, .page-support #myanimelist #content li, .page-support #myanimelist #content h3, .page-support #myanimelist #content h4 {
  571.     color: var(--header-text)
  572. }
  573. /* #myanimelist .inputButton[value*="Delete"] { background-color: var(--return-bad); } */
  574. /* Buttons - Nav */
  575. .page-common .pagination {
  576.     background: var(--content-dim);
  577.     border-radius: 12px;
  578. }
  579. .page-common .pagination .link {
  580.     height: 18px;
  581.     margin: 0;
  582.    
  583.     color: var(--text);
  584.     line-height: 18px;
  585.    
  586. }
  587. .page-common .pagination .link:hover { background: var(--content-dimmer); }
  588. .page-common .pagination .link + .link { border-left: 2px solid var(--border); }
  589. .page-common .pagination .link.current { background: var(--accent-dim) }
  590. .page-common .pagination .link.current:hover { background: var(--accent) }
  591. /* Unknown Anime Images */
  592. img[src*="qm_50.gif"] {
  593.  
  594.     background: var(--border) var(--img-missing) no-repeat center / cover !important;
  595. }
  596. /* ========== */
  597. ul.ignored-user-list li:nth-child(2n) {
  598.     background: var(--content-dim);
  599. }
  600. .page-common .goodresult, .page-common .successQuery {
  601.     background: var(--content-dim);
  602.     border-color: var(--border);
  603. }
  604. .page-common .goodresult a:link, .page-common .goodresult a:active, .page-common .goodresult a:visited {
  605.     color: var(--text-lnk);
  606. }
  607. .page-common .goodresult a:hover {
  608.     color: var(--text-lnk-hov);
  609. }
  610. .page-common .badresult {
  611.     background-color: var(--return-bad);
  612.     border-color: var(--border);
  613. }
  614. /* Random Pages that should really f****** use simple site-wide classes but instead use singular CSS rules for no HECKing reason  */
  615. h1.term-header1,
  616. h1[data="EULA"], h1[data="TermsOfUse"], .mal-address {
  617.     border-bottom: 2px solid var(--border);
  618. }
  619. /* GENERIC @HEADINGS */
  620. /*General*/
  621. .page-common .normal_header,
  622. /*Panel*/
  623. body.index .widget .widget-header,
  624. body.index .ranking-digest .ranking-header,
  625. /*Profile*/
  626. .profile .content-container .container-right h2,
  627. /*Forums*/
  628. .forum .forum-header,
  629. .forum .forum-side-block .header,
  630. /*Anime Search*/
  631. .anime-manga-search .normal_header,
  632. /*Notifications*/
  633. body.notification .notification-header,
  634. /*Ownlist-Style*/
  635. .ownlist_style_theme .customize-content-left .header,
  636. .ownlist_style_theme .customize-content-left h2.theme-custom-header
  637. {
  638.     background: var(--content-dimmer);
  639.     margin: 0;
  640.    
  641.     color: var(--text);
  642. }
  643. /*General*/
  644. .page-common .normal_header .floatRightHeader,
  645. /*Panel*/
  646. body.index .widget .widget-header > span,
  647. /*Profile*/
  648. .profile .content-container .user-comments h2 .floatRightHeader,
  649. /*Notifications*/
  650. body.notification .notification-header .right-menu
  651. {
  652.    
  653.     color: var(--text);
  654.     font: normal 0.9rem/13px var(--fontset-heading);
  655. }
  656. /*General*/
  657. .page-common .normal_header a,
  658. /*Panel*/
  659. body.index .widget .widget-header > span a,
  660. .ranking-digest .ranking-header .btn-view_more,
  661. /*Profile*/
  662. .profile .content-container .container-right h2.mb12 .floatRightHeader,
  663. .profile .content-container .user-comments h2 .floatRightHeader a,
  664. /*Forums*/
  665. .forum .forum-header a, .forum .forum-side-block .header a,
  666. /*Anime Search*/
  667. .anime-manga-search .normal_header .floatRightHeader,
  668. /*Notifications*/
  669. body.notification .notification-header .right-menu .item
  670. {
  671.     margin: -10px -10px 0 10px;
  672.    
  673.     color: var(--text-dim);
  674.     font: bold 0.9rem/13px var(--fontset-heading);
  675.    
  676. }
  677. /*General*/
  678. .page-common .normal_header .floatRightHeader a:hover,
  679. /*Panel*/
  680. body.index .widget .widget-header > span a:hover,
  681. .ranking-digest .ranking-header .btn-view_more:hover,
  682. /*Profile*/
  683. .profile .content-container .container-right h2.mb12 .floatRightHeader:hover,
  684. .profile .content-container .user-comments h2 .floatRightHeader a:hover,
  685. /*Forums*/
  686. .forum .forum-header a:hover, .forum .forum-side-block .header a:hover,
  687. /*Anime Search*/
  688. .anime-manga-search .normal_header .floatRightHeader:hover
  689. {
  690.     background: var(--content-dimmest);
  691. }
  692. /* - - - - - - - - - - - - - - -*\
  693.   Patches
  694. \*- - - - - - - - - - - - - - - */
  695. /* Patches - General */
  696. .page-common .normal_header.pt24 { padding-top: 10px !important; }
  697. .floatRightHeader a:only-of-type { margin-left: 0 !important; }
  698. .normal_header small { font-size: 0.9rem; }
  699. .profile .content-container .user-comments h2 .floatRightHeader,
  700. .normal_header.club-information-header ~ .normal_header .floatRightHeader { font-size: 0; }
  701. /* Patches - Panel */
  702. body.index .widget .widget-header > span a {
  703.    
  704.     font-weight: bold !important;
  705. }
  706. /* Patches - Advertising */
  707. .page-advertising #ad_menu {
  708.     margin-left: 16.5%;
  709. }
  710. .page-advertising .ad-contents .ad-text-head3 {
  711.     color: var(--header-text);
  712. }
  713.    
  714. /* Patches - Forum */
  715. .forum-table-header .normal_header a {
  716.     margin: 0;
  717. }
  718. .forum-table-header .normal_header > a {
  719.     color: var(--text);
  720. }
  721. .forum-table-header .normal_header > a:after {
  722.     content: " \f0dc";
  723. }
  724. /* Patches - Clubs */
  725. .normal_header.club-information-header,
  726. .normal_header.club-information-header ~ .normal_header,
  727. .normal_header.club-information-header ~ * .normal_header {
  728.     margin: 10px 0;
  729. }
  730. .normal_header.club-information-header ~ .normal_header .floatRightHeader a { font-weight: bold !important; }
  731. /* Patches - Notifications */
  732. body.notification .notification-section .notification-header h3 {
  733.    
  734.     color: inherit;
  735.     font: inherit;
  736. }
  737. body.notification .notification-header .right-menu .item.disabled {
  738.     color: var(--text-dimmest);
  739. }
  740. /* Patches - Quickadd */
  741. .normal_header.quickAdd-result-header { text-align: left; }
  742. /* Patches - Ownlist-Style */
  743. .ownlist_style_theme .customize-content-left .header .header-text {
  744.    
  745.     color: inherit;
  746.     font: inherit;
  747. }
  748. /* - - - - - - - - - - - - - - -*\
  749.   Icon About Recommendations
  750. \*- - - - - - - - - - - - - - - */
  751. /* Recommendations Info Icon */
  752. .page-common .icon-about-recommendations {
  753.    
  754.     color: var(--accent);
  755.    
  756.     cursor: help;
  757. }
  758. .page-common .icon-about-recommendations:after {
  759.     right: auto;
  760.     top: -5px;
  761.    
  762.     padding: 5px 10px;
  763.     background: var(--content-dimmest);
  764.    
  765.     color: var(--text);
  766.     font: 1rem/13px var(--fontset-basic);
  767.     letter-spacing: 0;
  768.     text-transform: none;
  769.    
  770.     z-index: 5;
  771. }
  772. @media (max-width: 1629px) {
  773.     .page-common .quickadd-content .icon-about-recommendations.right:after {
  774.    
  775.         right: -300px;
  776.     }
  777. }
  778. /*------------------------------*\
  779.   GENERIC @Sub-Headings
  780. \*------------------------------*/
  781. .profile .content-container .container-right h5,
  782. .ownlist_style_theme .customize-content-left h3.theme-custom-header {
  783.     border-bottom: 2px solid var(--border);
  784.    
  785.     color: var(--text);
  786. }
  787. .profile .content-container .container-right h5 a {
  788.    
  789.     color: var(--text-dim);
  790.     font: bold 0.9rem/13px var(--fontset-heading);
  791. }
  792. /* Patches - Profile */
  793. .profile .content-container .container-right h5 { margin-bottom: 7px !important; }
  794. /* Patches - Ownlist-style */
  795. .ownlist_style_theme .customize-content-left h3.theme-custom-header.js-theme-custom-header:active {  }
  796. /*------------------------------*\
  797.   GENERIC @Sidebar-Headings
  798. \*------------------------------*/
  799. .page-common .user-profile h4 /*Profile*/
  800. {
  801.     background: var(--content-dimmer);
  802.     margin: 0;
  803.    
  804.     color: var(--text);
  805. }
  806. .page-common .user-profile h4 a /*Profile*/
  807. {
  808.     padding: 6px 10px;
  809.     margin: -6px -10px 0 10px;
  810.    
  811.     color: var(--text-dim);
  812.     font: bold 0.9rem/14px var(--fontset-heading) !important;
  813.    
  814. }
  815. .page-common .user-profile h4 a:hover /*Profile*/
  816. {
  817.     background: var(--content-dimmest);
  818. }
  819. /* Patches - Profile */
  820. .page-common .user-profile h4 { margin: 6px 0; }
  821. .user-profile h4.icon-rss:after {
  822.    
  823.    
  824.     width: 13px;
  825.     background-size: 13px 13px;
  826.    
  827.     float: left;
  828. }
  829. /* GENERIC @HOVERINFO */
  830. .page-common .hoverinfo[style*="none"] {
  831.    
  832.    
  833. }
  834. .page-common .hoverinfo:hover {
  835.    
  836. }
  837. .page-common .hoverinfo {
  838.     background: var(--header);
  839.     border: 1px solid var(--header-border);
  840.     border-radius: 4px;
  841.     margin-left: -15px;
  842.    
  843.     color: var(--text-dim);
  844.    
  845.    
  846. }
  847. .page-common .hoverinfo .hoverinfo-contaniner {
  848. }
  849. .page-common .hoverinfo:after {
  850.     left: -20px;
  851.    
  852.     width: 0;
  853.     height: 0;
  854.     border-width: 15px 10px;
  855.     border-color: var(--header-border) var(--header-border) transparent transparent;
  856.    
  857.     transform: skewY(15deg);
  858. }
  859. .page-common .hoverinfo.left.top:after {
  860.     left: -20px;
  861. }
  862. .page-common .hovertitle { color: var(--text) !important }
  863. .page-common .hovertitle:hover { color: var(--text-heading) !important }
  864. .page-common .hoverinfo .dark_text { color: var(--text-dim); }
  865. /* ANIME STATUS BUTTONS (add, edit, etc) */
  866. #myanimelist a.button_add:not(.Lightbox_AddEdit), #myanimelist a.button_edit:not(.Lightbox_AddEdit),
  867. #myanimelist a.Lightbox_AddEdit[class*="button_"]:not(.btn-addEdit-large),
  868. .page-common .quickadd-content .btn-status-add {
  869.     padding: 0 5px;
  870.     background: var(--content-dim);
  871.     border: 2px solid var(--content-dim);
  872.    
  873.     color: var(--text-dim);
  874.     font: 0.9rem/16px var(--fontset-basic);
  875.    
  876. }
  877. #myanimelist a.button_add:not(.Lightbox_AddEdit):hover, #myanimelist a.button_edit:not(.Lightbox_AddEdit):hover,
  878. #myanimelist a.Lightbox_AddEdit[class*="button_"]:not(.btn-addEdit-large):hover,
  879. .page-common .quickadd-content .btn-status-add:hover {
  880.     background: var(--border);
  881.     border-color: var(--border);
  882.    
  883.     color: var(--text-lnk-hov);
  884.    
  885.    
  886. }
  887. #myanimelist a.button_add.watching, #myanimelist a.button_edit.watching,
  888. #myanimelist a.button_add.reading, #myanimelist a.button_edit.reading,
  889. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.watching,
  890. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.reading
  891. /* Watching */ { border-color: var(--watching) }
  892. #myanimelist a.button_add.completed, #myanimelist a.button_edit.completed,
  893. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.completed
  894. /* Completed */ { border-color: var(--completed) }
  895. #myanimelist a.button_add.on-hold, #myanimelist a.button_edit.on-hold,
  896. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.on-hold
  897. /* On Hold */ { border-color: var(--onhold) }
  898. #myanimelist a.button_add.dropped, #myanimelist a.button_edit.dropped,
  899. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.dropped
  900. /* Dropped */ { border-color: var(--dropped) }
  901. #myanimelist a.button_add.plantowatch, #myanimelist a.button_edit.plantowatch,
  902. #myanimelist a.button_add.plantoread, #myanimelist a.button_edit.plantoread,
  903. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.plantowatch,
  904. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large.plantoread
  905. /* Planned */ { border-color: var(--planned) }
  906. /* Buttons - Add/Edit */
  907. #myanimelist a.button_add:not(.Lightbox_AddEdit), #myanimelist a.button_edit:not(.Lightbox_AddEdit) {
  908. }
  909. .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 {
  910.     color: var(--text);
  911. }
  912. /* Buttons - Large */
  913. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large {
  914.     min-width: 70px;
  915.     height: 22px;
  916.     padding: 0 6px;
  917.     background: var(--content-dim);
  918.     border: 2px solid var(--border);
  919.    
  920.     color: var(--text);
  921.     font: 0.9rem/22px var(--fontset-basic);
  922.    
  923. }
  924. #myanimelist a.Lightbox_AddEdit.btn-addEdit-large:hover {
  925.     background: var(--border);
  926.     border-color: var(--border);
  927.    
  928.     color: var(--text-lnk-hov);
  929. }
  930. /*==============================*\
  931.   !PAGE-TITLE
  932. \*==============================*/
  933. /* .page-common .wrapper:after {
  934.    
  935.    
  936.     height: 200px;
  937.     background: url(https://i.imgur.com/HheYL00.jpg) no-repeat center / cover fixed;
  938.     background: url(https://i.imgur.com/4KgeXwW.png) no-repeat center / cover;
  939.    
  940.     flex: 1 1 100%;
  941. }
  942. .page-common #contentWrapper {
  943.     margin-top: 200px;
  944. }
  945. .page-common .wrapper:before {
  946.     top: 69px;
  947.     top: 254px;
  948.    
  949.     height: 32px;
  950.     background: var(--border);
  951.     border-bottom: 2px solid var(--accent);
  952.    
  953.     z-index: 850;
  954. } */
  955. /* Left */
  956. #contentWrapper > div:first-of-type:not(#content) {
  957.    
  958.     height: 34px;
  959.     padding: 7px 0 7px 10px;
  960.     background: var(--content-dimmer) !important;
  961.    
  962.     z-index: 900;
  963. }
  964. #contentWrapper > div:first-of-type:not(#content):after {
  965.    
  966.     height: 2px;
  967.     background: linear-gradient(to right, var(--accent), var(--accent-dim) 25%, var(--accent-dim) 75%, var(--accent));
  968. }
  969. #contentWrapper > div:first-of-type:not(#content) .h1 {
  970.     max-width: 49%;
  971.    
  972.     color: var(--text-heading) !important;
  973.     font-size: 1.1rem;
  974.     line-height: 18px !important;
  975.     text-overflow: ellipsis;
  976.    
  977.     z-index: 13;
  978. }
  979. #contentWrapper > div .h1 span.h1-title {
  980.     max-width: 49%;
  981.     line-height: 28px;
  982.     margin-top: -5px;
  983. }
  984. #contentWrapper > div:first-of-type:not(#content) .h1:only-child {
  985.     max-width: initial;
  986.  
  987. }
  988. #contentWrapper > div .h1 span.h1-title br {
  989. }
  990. .page-common .h1 .title-english {
  991.     margin-left: 3px;
  992.     color: var(--text-dimmer);
  993. } .title-english::before {
  994.     content: '(';
  995. } .title-english::after {
  996.     content: ')';
  997. }
  998. /* Right */
  999. #contentWrapper > div:first-of-type:not(#content) .header-right {
  1000.    
  1001.     width: max-content;
  1002.     max-width: 49%;
  1003.     margin: 0 !important;
  1004.     float: right;
  1005. }
  1006. #contentWrapper > div:first-of-type:not(#content) .header-right a,
  1007. #contentWrapper > div:first-of-type:not(#content) a.header-right,
  1008. #contentWrapper > div:first-of-type:not(#content) .h1 [style*="float: right"] a {
  1009.     max-width: 100%;
  1010.     height: 34px;
  1011.     padding: 7px 10px !important;
  1012.     margin: -7px 0 0 !important;
  1013.     float: right;
  1014.    
  1015.     font: 700 1rem/18px var(--fontset-basic) !important;
  1016.     text-overflow: ellipsis;
  1017.    
  1018. }
  1019. #contentWrapper > div:first-of-type:not(#content) .header-right a:hover,
  1020. #contentWrapper > div:first-of-type:not(#content) a.header-right:hover,
  1021. #contentWrapper > div:first-of-type:not(#content) .h1 [style*="float: right"] a:hover {
  1022.     background: var(--accent-dimmest);
  1023. }
  1024. #contentWrapper > div:first-of-type:not(#content) .header-right.divider {  }
  1025. #contentWrapper > div:first-of-type:not(#content) .h1 [style*="float: right"] a {
  1026.     font: inherit;
  1027. }
  1028. /* .page-common .header-right i {
  1029. } */
  1030. /* .page-common .header-right:before {
  1031.     content: "\f013 ";
  1032.    
  1033.     font: 1.1rem/16.5px Font Awesome 6 Pro;
  1034.     vertical-align: top;
  1035.    
  1036. }
  1037. .page-common .header-right:before {
  1038.     margin-right: 5px;
  1039. } */
  1040. .header-right #editdiv {
  1041.     top: 34px;
  1042.    
  1043.     background: var(--header);
  1044.     border: var(--header-border);
  1045. }
  1046. /* User Banners (moderators, etc) */
  1047. .profile-team-title {
  1048. }
  1049. .icon-team-title {
  1050.     padding: 3px 5px !important;
  1051.     background-color: var(--content-dim);
  1052.     border-radius: 2px;
  1053.     margin-top: -15px;
  1054.     margin-left: 7px;
  1055.    
  1056.     font: bold 1rem/14px var(--fontset-basic);
  1057.     vertical-align: top;
  1058.    
  1059. }
  1060. /* .icon-team-title.site_administrator {  }
  1061. .icon-team-title.site_administrator:hover {  }
  1062. .icon-team-title.database_administrator {  }
  1063. .icon-team-title.database_administrator:hover {  }
  1064. .icon-team-title.anime_db_moderator {  }
  1065. .icon-team-title.anime_db_moderator:hover {  }
  1066. .icon-team-title.manga_db_moderator {  }
  1067. .icon-team-title.manga_db_moderator:hover {  }
  1068. .icon-team-title.forum_moderator {  }
  1069. .icon-team-title.forum_moderator:hover {  }
  1070. .icon-team-title.review_recommendation_moderator {  }
  1071. .icon-team-title.review_recommendation_moderator:hover {  }
  1072. .icon-team-title.social_media_moderator {  }
  1073. .icon-team-title.social_media_moderator:hover {  }
  1074. .icon-team-title.retired_moderator {  }
  1075. .icon-team-title.retired_moderator:hover {  } */
  1076. /* GENERIC @Breadcrumb */
  1077. .page-common .breadcrumb {
  1078.     top: 34px;
  1079.    
  1080.     padding: 1px 0;
  1081.     background: linear-gradient(to right, var(--border), var(--content-dim));
  1082.     margin: 0 !important;
  1083.    
  1084. }
  1085. .page-common .breadcrumb ~ .breadcrumb {
  1086.    
  1087. }
  1088. .page-common .breadcrumb div {
  1089.    
  1090.     vertical-align: top;
  1091. }
  1092. .page-common .breadcrumb ~ .breadcrumb div { float: right; }
  1093. .page-common .breadcrumb div a {
  1094.    
  1095.     padding: 2px 10px 2px 22px;
  1096.     background: var(--border);
  1097.    
  1098.     line-height: 17px;
  1099.    
  1100. }
  1101. .page-common .breadcrumb ~ .breadcrumb div a { padding: 2px 22px 2px 10px; }
  1102. .page-common .breadcrumb div a:hover { background: var(--accent-dimmest); }
  1103. .page-common .breadcrumb div a:after {
  1104.    
  1105.     width: 17px;
  1106.     height: 17px;
  1107.     background: inherit;
  1108.     box-shadow: 2px 2px 0 var(--accent);
  1109.    
  1110.     transform: rotate(-45deg);
  1111.     transform-origin: right top;
  1112. }
  1113. .page-common .breadcrumb ~ .breadcrumb div a:after {
  1114.     right: 100%;
  1115.     box-shadow: -2px -2px 0 var(--accent);
  1116. }
  1117. .page-common .breadcrumb div a:hover:after { border-left-color: var(--accent-dimmest); }
  1118. .page-common .breadcrumb div a[href*="forum/?clubid"] { font-size: 0; }
  1119. .page-common .breadcrumb div a[href*="forum/?clubid"]:before {
  1120.     content: "Club Forum";
  1121.    
  1122. }
  1123. /* .page-common .breadcrumb div a[href="https://myanimelist.net/"] { display: none !important; } */
  1124. .page-common .breadcrumb div a[href="https://myanimelist.net/"] {
  1125. }
  1126. .page-common .breadcrumb div a[href="https://myanimelist.net/"]:before {
  1127.     content: "Home";
  1128.    
  1129. }
  1130. .page-common .breadcrumb div:nth-child(1) { z-index: 12; }
  1131. .page-common .breadcrumb div:nth-child(2) { z-index: 11; }
  1132. .page-common .breadcrumb div:nth-child(3) { z-index: 10; }
  1133. .page-common .breadcrumb div:nth-child(4) { z-index: 9; }
  1134. .page-common .breadcrumb div:nth-child(5) { z-index: 8; }
  1135. .page-common .breadcrumb div:nth-child(6) { z-index: 7; }
  1136. .page-common .breadcrumb div:nth-child(7) { z-index: 6; }
  1137. .page-common .breadcrumb div:nth-child(8) { z-index: 5; }
  1138. .page-common .breadcrumb div:nth-child(9) { z-index: 4; }
  1139. .page-common .breadcrumb div:nth-child(10) { z-index: 3; }
  1140. .page-common .breadcrumb div:nth-child(11) { z-index: 2; }
  1141. .page-common .breadcrumb div:nth-child(12) { z-index: 1; }
  1142. /* .page-common .breadcrumb ~ .breadcrumb div { z-index: 0; } */
  1143. /* Patches - News */
  1144. body.news .news-breadcrumbs {
  1145.     width: initial;
  1146.     min-height: initial;
  1147. }
  1148. /* GENERIC @Nav */
  1149. .page-common #horiznav_nav {
  1150.     border-bottom: 3px solid var(--border);
  1151.     margin: 0 0 10px 0 !important;
  1152. }
  1153. .page-common #horiznav_nav ul {
  1154.     display: inline-flex;
  1155.     margin: 0;
  1156.     flex-flow: row wrap;
  1157. }
  1158. .page-common #horiznav_nav ul li {
  1159.     background: var(--content-dim) !important;
  1160. }
  1161. .page-common #horiznav_nav ul li a {
  1162.    
  1163.     padding: 0 7px;
  1164.     background: var(--content-dim) !important;
  1165.     margin: 0 5px 7px 0;
  1166.    
  1167.     color: var(--text-lnk) !important;
  1168.     font: bold 1rem/26px var(--fontset-basic);
  1169.    
  1170. }
  1171. .page-common #horiznav_nav ul li a:hover {
  1172.     background: var(--border) !important;
  1173.    
  1174.     color: var(--text-lnk-hov) !important;
  1175. }
  1176. .page-common #horiznav_nav ul li .horiznav_active {
  1177.     background: var(--accent-dim) !important;
  1178.    
  1179.     color: var(--text-heading) !important;
  1180. }
  1181. .page-common #horiznav_nav ul li .horiznav_active:hover {
  1182.     background: var(--accent) !important;
  1183.    
  1184.     color: var(--text-heading) !important;
  1185. }
  1186. /* TEXT */
  1187. /* Spoiler Expand & Quote Expand Buttons */
  1188. #myanimelist .spoiler {
  1189.     margin: 2px 0 0;
  1190. } #myanimelist .spoiler + .spoiler {
  1191.     margin-top: 4px;
  1192. }
  1193. #myanimelist .spoiler .button, #myanimelist .quotetext .button.expand_quote {
  1194.     padding: 0 7px;
  1195.     background: var(--content-dim) !important;
  1196.     border: 1px solid var(--border);
  1197.    
  1198.     color: var(--text-dim);
  1199.     line-height: 18px;
  1200.    
  1201. }
  1202. #myanimelist .spoiler .button:hover, #myanimelist .quotetext .button.expand_quote:hover { border-color: var(--accent-dim) !important; }
  1203. #myanimelist .spoiler > .spoiler_content[style*="ck"] > .button {
  1204.     background: var(--border) !important;
  1205.     border-color: var(--accent-dim) !important;
  1206.     margin-bottom: 3px;
  1207. }
  1208. #myanimelist .spoiler > .spoiler_content[style*="ck"] > .button:hover { border-color: var(--accent) !important; }
  1209. #myanimelist .spoiler > .spoiler_content {
  1210.     padding-left: 2px;
  1211. }
  1212. #myanimelist .spoiler > .spoiler_content:before {
  1213.     left: -5px;
  1214.    
  1215.     width: 2px;
  1216. /*  background: var(--accent-dim); TEMP */
  1217.     background: linear-gradient(to bottom, transparent, var(--accent-dim) 15px, var(--accent-dim) calc(100% - 15px), transparent);
  1218. }
  1219. #myanimelist .quotetext {
  1220.     background: var(--quotebox-bg);
  1221.     border: 1px solid var(--border);
  1222.     box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  1223.     margin: 5px;
  1224. }
  1225. #myanimelist .news-list .comment-list .quotetext {
  1226.     background: var(--quotebox-bg);
  1227.     border: 1px solid var(--border);
  1228.    
  1229.     color: inherit;
  1230. }
  1231. #myanimelist .codetext {
  1232.     max-width: 100%;
  1233.    background: var(--codebox-bg);
  1234.     border: 1px solid var(--border);
  1235.     box-shadow: inset 0 0 4px rgba(0,0,0,.15);
  1236.     margin: 0;
  1237.    
  1238.    
  1239.    color: var(--codebox-text);
  1240. }
  1241. #myanimelist .codetext pre {
  1242.     max-width: 100%;
  1243.     overflow-x: auto;
  1244.     overflow-y: visible;
  1245.    
  1246.     font: 11px/15px var(--fontset-monospace);
  1247. }
  1248. /*------------------------------*\
  1249.   CONTENT @Search-Bars
  1250. \*------------------------------*/
  1251. .anime-search-form-search {
  1252.     margin: 30px auto;
  1253. }
  1254. #quickadd .quickadd-form-search {
  1255.     max-width: 768px;
  1256.     margin: 30px auto;
  1257. }
  1258. #quickadd input {
  1259.     background-color: var(--content-dim);
  1260.     border-color: var(--border);
  1261.    
  1262.     color: var(--text);
  1263.  
  1264. }
  1265. .anime-search-form-search #q,
  1266. #quickadd .quickadd-form-search #maSearchText {
  1267.     width: calc(100% - 51px);
  1268.     border-radius: 24px 0 0 24px;
  1269. }
  1270. #myanimelist .anime-search-form-search .inputButton,
  1271. #quickadd .inputButton {
  1272.     border-radius: 0 24px 24px 0;
  1273.     padding-right: 14px;
  1274.     height: 48px;
  1275.    
  1276.     font: 1.5rem "Font Awesome 6 Pro";
  1277. }
  1278. #quickadd .inputButton {
  1279.     padding: 4px 14px 4px 10px;
  1280.     background-color: var(--accent);
  1281.    
  1282.     color: var(--border);
  1283.     font: bold 1rem/16px var(--fontset-basic);
  1284.    
  1285. }
  1286. #quickadd .inputButton:not(:disabled):hover {
  1287.     background: var(--accent-dim);
  1288.    
  1289.     color: var(--text-lnk-hov);
  1290. }
  1291. /* Search Results */
  1292. .page-common #advancedSearchResultList {
  1293.     top: 48px !important;
  1294.     left: 24px !important;
  1295.     right: 24px;
  1296.    
  1297.     background: var(--content-dim);
  1298.     border-color: var(--border);
  1299. }
  1300. #advancedSearchResultList .list {
  1301. }
  1302. #advancedSearchResultList .list.focus { background: var(--border); }
  1303. #advancedSearchResultList .list .image { border: 2px solid var(--border); }
  1304. #advancedSearchResultList .list .name { color: var(--text) !important; }
  1305. #advancedSearchResultList .list .media-type { color: var(--text-dimmer) !important; }
  1306. #advancedSearchResultList .list .extra-info { color: var(--text-dim) !important; }
  1307. #advancedSearchResultList .list.separator {
  1308.     background: var(--border);
  1309.    
  1310. }
  1311. #advancedSearchResultList .list.separator span {
  1312.     color: var(--text);
  1313.     font: 1rem/13px var(--fontset-heading);
  1314. }
  1315. #advancedSearchResultList .list-bottom {
  1316.     background: var(--content-dim) !important;
  1317.    
  1318. }
  1319. #advancedSearchResultList .list-bottom.focus {
  1320.     background: var(--accent) !important;
  1321.    
  1322. }
  1323. #advancedSearchResultList .list.list-bottom a { color: var(--header-text); }
  1324. #advancedSearchResultList .list.list-bottom.focus a { color: var(--header); }
  1325. /* Advanced Search */
  1326. #advancedSearch {
  1327. }
  1328. #advancedSearch .mb24:last-of-type {
  1329.     padding-bottom: 20px !important;
  1330.     margin-bottom: 0px !important;
  1331. }
  1332. #advancedSearch select { width: 200px; }
  1333. #advancedSearch #sd, #advancedSearch #sm, #advancedSearch #ed, #advancedSearch #em { width: 50px; }
  1334. #advancedSearch [name="sy"], #advancedSearch [name="ey"] { width: 80px; }
  1335. #advancedSearch .fw-b.mt24 {
  1336.     border-bottom: 2px solid var(--border);
  1337.     margin: 20px 0 7px !important;
  1338.    
  1339.     color: var(--text);
  1340.     font: bold 1.1rem/13px var(--fontset-heading) !important;
  1341. }
  1342. #advancedSearch .fw-b.mt24 a {
  1343.     float: right;
  1344.    
  1345.     color: var(--text-dim);
  1346.     font: bold 0.9rem/13px var(--fontset-heading) !important;
  1347. }
  1348. /* ===============================================
  1349. !GENERIC @News
  1350. =============================================== */
  1351. body.news .menu-category .btn-category.selected {
  1352.     color: #7f7f7f !important;
  1353. }
  1354. .news-list .comment-list, .news-list .news-unit {
  1355.     font-family: var(--fontset);
  1356. }
  1357. .di-ib.tags *, .tag-cloud * {
  1358.     background-color: transparent !important;
  1359. }
  1360. #myanimelist .news-list .tags .tags-inner {
  1361. }
  1362. #myanimelist .news-list .tags .tags-inner-attributes {
  1363.     border-color: var(--border);
  1364.     margin-right: 7px;
  1365. }
  1366. #myanimelist .news-list .tags-inner .tag {
  1367.     height: 18px;
  1368.     padding: 0 5px;
  1369.     background: var(--content-dim);
  1370.     border: 1px solid var(--border);
  1371.     margin: 0 5px 5px 0;
  1372.    
  1373.     color: var(--text);
  1374.    
  1375.     line-height: 18px;
  1376.    
  1377. }
  1378. #myanimelist .news-list .tags-inner > .tag:hover {
  1379.     background: var(--content-dimmer);
  1380.    
  1381.     color: var(--text-lnk-hov);
  1382. }
  1383. #myanimelist .news-list .tags .tag-color-feature-spoiler { border-color: var(--return-bad); }
  1384. /* ===============================================
  1385. !GENERIC @Companies
  1386. =============================================== */
  1387. .navi-seasonal.js-navi-company {
  1388.     background-color: transparent !important;
  1389. }
  1390.    
  1391. /* ===============================================
  1392. !GENERIC @Interest Stacks
  1393. =============================================== */
  1394. .mymenu.clearfix, .tag, .quick-search *, .info-block.clearfix, h2.title, .tag, .any_status, .head {
  1395.     background-color: var(--content) !important;
  1396. }
  1397. .info {
  1398.     background-color: transparent !important;
  1399. }
  1400. .introduction, .any_status strong, .intro {
  1401.     color: var(--text-heading) !important;
  1402. }
  1403. /* ===============================================
  1404. !FORUM
  1405. =============================================== */
  1406. /* Header Thing */
  1407. .page-forum .forum-table-header td { padding: 10px 0; }
  1408. /* Board Base */
  1409. .page-forum [id^="topicRow"] [class^="forum_boardrow"] {
  1410.     background: var(--content-dim);
  1411. }
  1412. /* Browser */
  1413. .page-common table.forum-topics tr td {
  1414. /*  padding: 7px; */
  1415. }
  1416. .page-common table.forum-topics tr td.watch-state {
  1417. /*  padding: 3px 0; */
  1418. }
  1419. .page-common table.forum-topics tr td h4 {
  1420.     padding: 0 0 3px 0;
  1421.     margin: 0;
  1422. }
  1423. /* Posts */
  1424. .page-forum .forum_postusername a,.page-forum .forum_postusername a:visited { color: var(--text-dim); }
  1425. .page-forum .forum_postusername a:hover { color: var(--text); }
  1426. .page-forum [class^="forum_boardrow"],
  1427. .page-forum .sig
  1428. {
  1429.     border-color: var(--border);
  1430. }
  1431. /* Icons */
  1432. .js-toggle-watching-topic-button img {
  1433.     width: 3px;
  1434.     height: 3px;
  1435.     padding: 2px;
  1436.     background:rgba(var(--notif-rgb), 0.33) content-box;
  1437.     border: 2px solid rgba(var(--notif-rgb), 0.33);
  1438.     border-radius: 50% 0;
  1439.    
  1440.     object-position: 9999px;
  1441.     transform: rotate(45deg);
  1442. } .js-toggle-watching-topic-button img[title*="re wa"] {
  1443.     background-color: var(--notif);
  1444.     border-color: var(--notif);
  1445. } /*.js-toggle-watching-topic-button img[title*="re not wa"] {
  1446. } */
  1447. .js-ignore-topic-button img {
  1448. }
  1449. .js-ignore-topic-button {
  1450.     width: 12px;
  1451.     height: 12px;
  1452.     background: var(--border);
  1453.     border-radius: 6px;
  1454.    
  1455.     line-height: 12px;
  1456. }
  1457. .js-ignore-topic-button:before {
  1458.    
  1459.    
  1460.     width: 8px;
  1461.     height: 2px;
  1462.     background: var(--text-dim);
  1463.     border-radius: 1px;
  1464.     margin: 5px 2px;
  1465. }
  1466. /* ===============================================
  1467. !NOTIFICATIONS
  1468. =============================================== */
  1469. body.notification #content {
  1470.     padding-top: 44px !important;
  1471.     min-height: 535px;
  1472. }
  1473. /* Left Column */
  1474. body.notification #myanimelist #content .left-column {
  1475.     padding-right: 7px;
  1476.     border-right: 3px solid var(--border);
  1477. }
  1478. body.notification .notificaiton-category-nav {
  1479.     min-height: auto;
  1480. }
  1481. body.notification .notificaiton-category-nav li {
  1482. }
  1483. body.notification .notificaiton-category-nav a {
  1484.     color: var(--text-heading);
  1485.    
  1486. }
  1487. body.notification .notificaiton-category-nav a .fa {
  1488.     color: var(--icon);
  1489. }
  1490. body.notification .notificaiton-category-nav a:hover, body.notification .notificaiton-category-nav a.active {
  1491.     background: var(--content-dim);
  1492. }
  1493. body.notification .notificaiton-category-nav li .fa-bell-o:before {
  1494.     content: "\f0f3";
  1495. }
  1496. body.notification .notificaiton-category-nav a .counter.zero {
  1497.     background: var(--border);
  1498.     color: var(--text-heading);
  1499. }
  1500. body.notification .notificaiton-category-nav a .counter {
  1501.     background: var(--accent);
  1502. }
  1503. /* Right Column */
  1504. body.notification .notification-section {
  1505.     margin-bottom: 30px;
  1506. }
  1507. body.notification .left-column + div {
  1508.     padding-left: 7px;
  1509. }
  1510. body.notification .notification-item {
  1511.    
  1512.     border-bottom: 1px solid var(--border);
  1513.    
  1514. }
  1515. body.notification .notification-item.empty {
  1516.     font-size: 1.2rem;
  1517. }
  1518. body.notification .notification-item:hover { background: var(--content-dim); }
  1519. body.notification #myanimelist .notification-item-layout {
  1520.     padding: 5px;
  1521. }
  1522. body.notification .notification-item-layout > * {
  1523.     padding: 0 5px;
  1524.    
  1525. }
  1526. /* Text */
  1527. body.notification #myanimelist .notification-item-layout .notification-item-content {
  1528.     max-width: initial;
  1529.     flex: 1 1 auto;
  1530. }
  1531. /* Time */
  1532. body.notification .notification-item-layout .time {
  1533.     color: var(--text-dimmest);
  1534. }
  1535. /* Checkmark */
  1536. body.notification .notification-item-layout .is-read {
  1537.     padding-left: 0;
  1538.     margin: 0;
  1539. }
  1540. /* Unread */
  1541. body.notification #myanimelist .notification-item-layout .fa {
  1542.     margin: 2px 0;
  1543.    
  1544.     color: var(--text);
  1545.     font-size: 1.3rem;
  1546.    
  1547. }
  1548. /* Read */
  1549. body.notification .notification-item-layout .is-read .fa-check-circle { background: var(--notif); }
  1550. body.notification .notification-item-layout .is-read .fa-check-circle:before { content: "\f00c"; }
  1551. body.notification .notification-item-layout .fa-check:hover { background: var(--border); }
  1552. /*------------------------------*\
  1553.   BROWSE @Anime-Search
  1554. \*------------------------------*/
  1555. /*https://myanimelist.net/anime.php*/
  1556. /*https://myanimelist.net/manga.php*/
  1557. .anime-manga-search .normal_header { margin-top: 20px; }
  1558. /* Browse Page */
  1559. .anime-manga-search .genre-link {
  1560. /*   */
  1561. }
  1562. .anime-manga-search .genre-link .genre-list-col {
  1563.     display: inline;
  1564. }
  1565. .anime-manga-search .genre-link .genre-list {
  1566.     width: 16.6667%;
  1567.     min-width: 206px;
  1568.    
  1569. }
  1570. .anime-manga-search .genre-link .genre-list .genre-name-link {
  1571.     height: 22px;
  1572. /*  padding: 0 0 0 16px; */
  1573.     padding: 0 0 0 8px;
  1574. /*  background: var(--content-dim); */
  1575.     border-left: 3px solid var(--border);
  1576. /*  */
  1577.     margin: 6px 6px 0;
  1578.    
  1579.     line-height: 22px;
  1580.    
  1581. }
  1582. .anime-manga-search .genre-link .genre-list .genre-name-link:hover {
  1583.     border-color: var(--accent);
  1584. }
  1585. .anime-manga-search .genre-link .genre-list .genre-name-link:after {
  1586. }
  1587. /* ===============================================
  1588. BROWSE @Top-Lists
  1589. =============================================== */
  1590. /*
  1591.  * https://myanimelist.net/topanime.php
  1592.  * https://myanimelist.net/topmanga.php
  1593.  * https://myanimelist.net/people.php
  1594.  * https://myanimelist.net/character.php
  1595.  */
  1596. #myanimelist [class$="-ranking-table"] .text {
  1597.     color: var(--text);
  1598. }
  1599. #myanimelist [class$="-ranking-table"] .table-header td {
  1600.     padding: 10px 0;
  1601.     background: var(--border);
  1602.    
  1603.     font: 1.1rem/13px var(--fontset-heading);
  1604. }
  1605. #myanimelist [class$="-ranking-table"] .ranking-list td {
  1606.     border-color: var(--border);
  1607.     border-bottom: 2px solid var(--border);
  1608. }
  1609. /* #myanimelist [class$="-ranking-table"] .ranking-list:nth-of-type(even) td { background: var(--content-dim); } */
  1610. /* Score */
  1611. #myanimelist [class$="-ranking-table"] .score div:before, #myanimelist [class$="-ranking-table"] .your-score a:before {
  1612.     content: "\f005";
  1613.    
  1614.     margin-right: 3px;
  1615.    
  1616.     color: #ecb428;
  1617.     font: 1.5rem/1 "Font Awesome 6 Pro";
  1618. }
  1619. #myanimelist [class$="-ranking-table"] [class*="score"] div {
  1620.    
  1621.     font-size: 1.35rem;
  1622. }
  1623. #myanimelist [class$="-ranking-table"] .your-score a {
  1624. }
  1625. #myanimelist [class$="-ranking-table"] .your-score span {
  1626.    
  1627. }
  1628. /* ===============================================
  1629. BROWSE @Seasonal
  1630. =============================================== */
  1631. /* Header */
  1632. .navi-seasonal {
  1633.     width: 1040px;
  1634.     background: var(--content);
  1635.    
  1636. }
  1637. .navi-seasonal.fixed {
  1638.     background: var(--border);
  1639. }
  1640. .navi-seasonal.fixed:after {
  1641.     bottom: -15px;
  1642.        
  1643.     height: 15px;
  1644.     background: linear-gradient(to bottom, rgba(0,0,0, 0.5), rgba(0,0,0, 0));
  1645.    
  1646. }
  1647. .navi-seasonal .horiznav_nav ul li a,
  1648. .navi-seasonal .horiznav_nav ul li a.navtab,
  1649. .navi-seasonal .horiznav-nav-seasonal .btn-seasonal .btn-type
  1650. {
  1651.     background: var(--content-dim);
  1652.     color: var(--text-dim);
  1653. }
  1654. /* Items */
  1655. .seasonal-anime-list .seasonal-anime {
  1656.     width: calc(33.3334% - 15px - 1.6667px);
  1657.     border-color: var(--border);
  1658.     margin-right: 5px;
  1659.    
  1660. }
  1661. .seasonal-anime-list .seasonal-anime .prodsrc {
  1662.     background: var(--border);
  1663. }
  1664. .seasonal-anime-list .seasonal-anime .genres {
  1665.     background: var(--content-dim);
  1666. }
  1667. .seasonal-anime-list .seasonal-anime .genres .genre {
  1668.     background: var(--content-dim);
  1669. }
  1670. .seasonal-anime-list .seasonal-anime .genres .genre a {
  1671.     color: var(--text-dimmer);
  1672. }
  1673. .seasonal-anime-list .seasonal-anime .synopsis {
  1674.     width: calc(100% - 167px) !important;
  1675. }
  1676. .seasonal-anime-list .seasonal-anime .information {
  1677.     background: var(--border);
  1678.    
  1679. }
  1680. .seasonal-anime-list .seasonal-anime .information > div {
  1681.    
  1682.     color: var(--text-dimmer) !important;
  1683. }
  1684. .seasonal-anime-list .seasonal-anime .information .scormem .score:after {
  1685.     content: "☆";
  1686.     left: -1px;
  1687.    
  1688.    
  1689.     line-height: 11px;
  1690.     font-size: 14px;
  1691. }
  1692. .seasonal-anime-list .seasonal-anime .information .scormem .member:after {
  1693.     content: "M";
  1694.    
  1695.    
  1696.     line-height: 14px;
  1697.     font-size: 11px;
  1698. }
  1699. /* ===============================================
  1700. BROWSE @Clubs
  1701. =============================================== */
  1702. /* Search Bar */
  1703. #myanimelist .club-search-form-search .inputButton {
  1704.     height: 50px;
  1705.     border-radius: 0 50% 50% 0;
  1706. }
  1707. /* Text */
  1708. .club-list .table-data td {
  1709.     border: var(--border) !important;
  1710. }
  1711. .club-list .table-data td .informantion {
  1712.     color: var(--text);
  1713. }
  1714. /* Join Button */
  1715. #myanimelist .club-list .btn-club-join {
  1716.     min-width: 30px;
  1717.     padding: 4px 10px;
  1718.     background-color: var(--accent);
  1719.     background-color: var(--border);
  1720.    
  1721.     color: var(--text);
  1722.    
  1723. }
  1724. #myanimelist .club-list .btn-club-join:hover {
  1725.     background: var(--accent-dimmest);
  1726.    
  1727.     color: var(--text-lnk-hov);
  1728. }
  1729. /* New Comment */
  1730. .club-list .table-data td .new {
  1731.     color: var(--notif);
  1732. }
  1733. /* ===============================================
  1734. !FANCYBOX-ETC
  1735. =============================================== */
  1736. #fancybox-overlay {
  1737.     background: black !important;
  1738.    
  1739. }
  1740. #fancybox-wrap {
  1741.     left: 50% !important;
  1742.     margin-top: 25% !important;
  1743.    
  1744.     min-width: 500px;
  1745.     min-height: 350px;
  1746.    
  1747.     transform: translate(-50%,-50%);
  1748. }
  1749. #fancybox-outer {
  1750.    
  1751.    
  1752.     min-width: 500px;
  1753.     min-height: 350px;
  1754.     background: var(--border);
  1755. }
  1756. #fancybox-inner {
  1757.    
  1758.     height: 100% !important;
  1759.    
  1760.     color: var(--text);
  1761. }
  1762. #fancybox-inner div {
  1763.     background: black !important;
  1764.     font: 1rem/1.5 var(--fontset-basic) !important;
  1765. }
  1766. #fancybox-title {
  1767.     left: 0 !important;
  1768. }
  1769. /* MODALS */
  1770. .root * { border-color: var(--border) !important; }
  1771. .root .modal-content { transition: all var(--time-medium) ease; }
  1772. .root .modal-mask { background-color: rgba(0,0,0,0.7) }
  1773. .root .modal-content {
  1774.     background: var(--header);
  1775.     border-top: 2px solid var(--border);
  1776. }
  1777. .root .modal-wrapper {
  1778. }
  1779. .root .modal-container {
  1780.     border-color: var(--accent) !important;
  1781.     color: var(--text);
  1782.    
  1783. }
  1784. .root button {
  1785.     background: var(--accent);
  1786.     border-radius: 12px;
  1787.    
  1788.     color: var(--border);
  1789.    
  1790. }
  1791. .root button:hover { color: var(--text-lnk-hov); }
  1792.  
  1793.  
  1794. @-moz-document regexp("http(s|)://(www\\.|)myanimelist\\.net/addtolist\\.php.*") {
  1795. /* QUICKADD */
  1796. /*tps://myanimelist.net/addtolist.php*/
  1797. body > div.pt16 {
  1798.     background: var(--content);
  1799. }
  1800. #quickadd { margin-top: -36px; }
  1801. #quickadd #searchResults > [id*="auto-recommendation"] {
  1802.     padding: 0 7px 0 0;
  1803.     border-right: 3px solid var(--border);
  1804. }
  1805. #quickadd #searchResults > [id*="auto-recommendation"] ~ [id*="auto-recommendation"] {
  1806.     padding: 0 0 0 7px;
  1807. }
  1808. #quickadd [class*="quickAdd-"][class*="-result-unit"] {
  1809.     padding: 3px 10px;
  1810.     border-bottom: 1px solid var(--border);
  1811.    
  1812.     color: var(--text);
  1813. }
  1814. #quickadd [class*="quickAdd-"][class*="-result-unit"]:nth-of-type(odd) {  }
  1815. #quickadd .lightLink { color: var(--text-dimmer); }
  1816. #quickadd .not-found-text {
  1817.    
  1818. }
  1819. }
  1820.  
  1821. @-moz-document regexp(".*/(www\\.|)(?!image\\.)myanimelist\\.net(|/)") {
  1822. /* ===============================================
  1823. !PANEL
  1824. =============================================== */
  1825. body.index #content {
  1826.     padding: 34px 6px 10px !important;
  1827.    
  1828.     --slider-title: #eee;
  1829.     --slider-subtitle: #ddd;
  1830.     --slider-gradient: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
  1831. }
  1832. body.index .left-column {
  1833.     width: 70%;
  1834.     flex: 1 1 auto;
  1835. }
  1836. body.index .right-column {
  1837.     width: 30%;
  1838.     flex: 1 1 auto;
  1839. }
  1840. /* Widget Bases */
  1841. body.index article > div.widget:not([class*="_ad"]) {
  1842. /*  background: var(--content-dim); */
  1843. /*  border-left: 3px solid var(--content-dim); */
  1844. /*  border-top: 2px solid var(--content-dim) !important; */
  1845. /*  border-bottom: 2px solid var(--content-dim) !important; */
  1846.     padding: 10px 4px 5px;
  1847.     margin: 0;
  1848. }
  1849. body.index article.widget {
  1850.     margin: 0;
  1851. }
  1852.    
  1853. .widget[class*="_ad"] {
  1854.     margin: 0 !important;
  1855. }
  1856. /* Widget Content */
  1857. body.index .widget .widget-content {
  1858. }
  1859. /* body.index .widget a {
  1860.     color: var(--text-dim);
  1861. } */
  1862. /* Widget Container */
  1863. body.index .widget-container .widget .widget-header {
  1864.     color: var(--text-heading);
  1865. }
  1866.    
  1867. body.index .widget.clubs .item .info p:nth-of-type(2) {
  1868.     min-width: 300px !important;
  1869.     min-height: 60px !important;
  1870.     overflow: auto !important;
  1871.     white-space: initial  !important;
  1872. }
  1873. /*------------------------------*\
  1874.   PANEL @Top-Upcoming
  1875. \*------------------------------*/
  1876. .ranking-digest {
  1877.     margin: 0;
  1878. }
  1879. .ranking-digest .ranking-header {
  1880.     background: var(--content-dim);
  1881. }
  1882. .ranking-digest ul {
  1883.     flex-flow: row wrap;
  1884.     padding: 5px 0 0 0;
  1885.     margin-bottom: -5px;
  1886. }
  1887. .ranking-digest ul .ranking-unit {
  1888.     width: 250px;
  1889.     padding: 5px;
  1890. }
  1891. @media (min-width: 1630px) {
  1892.     .ranking-digest ul .ranking-unit {
  1893.         max-width: 50%;
  1894.     }
  1895. }
  1896. .ranking-digest .ranking-unit .rank {
  1897.     background: var(--border);
  1898.     padding: 5px;
  1899.     margin-right: -14px;
  1900.     border-radius: 50% 0 50% 50%;
  1901.    
  1902.     color: var(--text-dimmer);
  1903.     font-size: 1.2rem;
  1904.    
  1905. }
  1906. .ranking-digest .ranking-unit .data-image {
  1907. }
  1908. .ranking-digest .ranking-unit .image {
  1909.     border: 2px solid var(--border);
  1910. }
  1911. .ranking-digest .ranking-unit .data {
  1912.     width: 80px;
  1913.     flex: 1 1 auto;
  1914. }
  1915. .ranking-digest .ranking-unit .title {  }
  1916. .ranking-digest .ranking-unit .data .info, .ranking-digest .ranking-unit .data .members {  color: var(--text-dimmer); }
  1917. /*------------------------------*\
  1918.   PANEL @Friend-Updates
  1919. \*------------------------------*/
  1920. body.index .friend_list_updates .widget-content {
  1921.     padding: 10px 0 10px 10px;
  1922.     flex-flow: row wrap;
  1923. }
  1924. #myanimelist .friend_list_updates .item {
  1925.     width: 330px;
  1926.     margin: 0 10px 10px 0;
  1927.    
  1928.     flex: 1 1 auto;
  1929. }
  1930. /* Removes popularity rank. */
  1931. #myanimelist .friend_list_updates p:nth-child(4) {
  1932. }
  1933. /*------------------------------*\
  1934.   PANEL @Clubs
  1935. \*------------------------------*/
  1936. body.index .widget.clubs .widget-content {
  1937.    
  1938.     flex-flow: row wrap;
  1939. }
  1940. body.index .widget.clubs .item {
  1941.    
  1942.     min-width: 200px;
  1943.    
  1944.     flex: 1 1 50%;
  1945.     align-items: flex-start;
  1946. }
  1947. body.index .widget.clubs .item .image {
  1948.     margin-right: 6px;
  1949.    
  1950. }
  1951. body.index .widget.clubs .item .image img {
  1952. /*  height: 6.4em !important; */
  1953. }
  1954. body.index .widget.clubs .item .info {
  1955.     flex-flow: row wrap;
  1956.     width: 175px;
  1957.     flex: 1 1 auto;
  1958. }
  1959. body.index .widget.clubs .item .info p {
  1960.     flex: 0 0 100%;
  1961. }
  1962. body.index .widget.clubs .item .info p:nth-of-type(1) {
  1963.     flex: 1 1 60%;
  1964. }
  1965. body.index .widget.clubs .item .info p:nth-of-type(2) {
  1966.     max-width: 100%;
  1967.     height: 1.6em;
  1968.    
  1969.     order: 3;
  1970.    
  1971.     color: var(--text-dim);
  1972.     text-overflow: ellipsis;
  1973. }
  1974. body.index .widget.clubs .item .info p:nth-of-type(3) {
  1975.     flex: 0 1 auto;
  1976.    
  1977.     text-align: right;
  1978. }
  1979. body.index .widget.clubs .item .info p:nth-of-type(4) {
  1980.    
  1981.     color: var(--text-dimmer);
  1982. }
  1983. body.index .widget.clubs .new {
  1984.     left: 4px;
  1985.     top: 4px;
  1986.    
  1987.     background: var(--notif);
  1988.    
  1989. }
  1990. body.index .widget.clubs .new:before {
  1991.     content: "!";
  1992.    
  1993.     color: var(--text-heading);
  1994. }
  1995. /*------------------------------*\
  1996.   PANEL @Sliders
  1997. \*------------------------------*/
  1998. .widget-slide-block .widget-slide-outer {
  1999.     margin: 10px 0 0 0;
  2000. }
  2001. #widget-promotional-video .btn-widget-slide-side, #widget-episode-video .btn-widget-slide-side, #widget-manga-store .btn-widget-slide-side {
  2002.     margin-top: -30px;
  2003. }
  2004. /* Title */
  2005. #myanimelist .widget-slide-block .widget-slide .external-link {
  2006.    
  2007.    
  2008.     margin-top: -20px;
  2009.    
  2010.     font: 1rem/16px var(--fontset-basic);
  2011. }
  2012. #myanimelist .widget-slide-block .widget-slide .external-link a { color: var(--slider-title); }
  2013. /* Title Background */
  2014. #widget-episode-video .widget-slide .btn-anime:before,
  2015. #widget-manga-store .widget-slide .btn-anime:before,
  2016. .auto-recommendations .item:after {
  2017.    
  2018.     height: 35%;
  2019.     background: var(--slider-gradient);
  2020. }
  2021. /* Dim on Hover */
  2022. #myanimelist .widget-slide-block .widget-slide .btn-anime:hover,
  2023. #myanimelist .widget-slide-block .widget-slide .btn-anime .link:hover,
  2024. .auto-recommendations .item:hover {
  2025.     opacity: initial;
  2026. }
  2027. .widget-slide-block .widget-slide .btn-anime .link:before,
  2028. .auto-recommendations .item:before {
  2029.    
  2030.    
  2031. }
  2032. .widget-slide-block .widget-slide .btn-anime:hover .link:before,
  2033. .auto-recommendations .item:hover:before {
  2034.     background: rgba(0,0,0,0.3);
  2035. }
  2036. /* - - - - - - - - - - - - - - -*\
  2037.   Latest Episodes & Manga Store
  2038. \*- - - - - - - - - - - - - - - */
  2039. .index-watch-description, .index-manga-store-description {
  2040.     width: 160px;
  2041.     height: 163px;
  2042.     padding: 0 7px !important;
  2043.     background-size: cover;
  2044.     margin-top: 10px;
  2045.    
  2046.     flex-flow: column nowrap;
  2047.     float: right;
  2048. }
  2049. #myanimelist .btn-watch-video, #myanimelist .btn-manga-store {
  2050.     background: var(--accent);
  2051.    
  2052.     color: var(--border);
  2053.     font: 1rem/26px var(--fontset-basic);
  2054.    
  2055. }
  2056. #myanimelist .btn-watch-video i, #myanimelist .btn-manga-store i { vertical-align: middle; }
  2057. #myanimelist .btn-watch-video:hover, #myanimelist .btn-manga-store:hover {
  2058.     color: var(--text-lnk-hov);
  2059.    
  2060.     opacity: initial;
  2061. }
  2062. .index-watch-description p {  }
  2063. .index-watch-description .di-ib { display: block !important; }
  2064. .index-watch-description .icon-provider {
  2065.     float: none !important;
  2066.    
  2067. }
  2068. .index-watch-description .icon-provider.mr16 { margin: 0 0 10px 0 !important; }
  2069. #widget-episode-video, #widget-manga-store { width: calc(100% - 170px); }
  2070. #widget-episode-video .widget-slide-outer, #widget-manga-store .widget-slide-outer { width: 100%; }
  2071. #widget-manga-store .widget-slide .btn-anime {  }
  2072. #widget-manga-store .widget-slide .btn-anime .link {  }
  2073. #widget-episode-video .widget-slide .btn-anime .link .title {
  2074.     bottom: 20px;
  2075.    
  2076. }
  2077. #widget-episode-video .widget-slide .btn-anime.episode .link a {
  2078.     box-shadow: inset 80px 0 80px -60px rgba(0,0,0,1);
  2079.    
  2080.     color: var(--slider-subtitle);
  2081.     line-height: 1.5;
  2082.    
  2083. }
  2084. #widget-episode-video .widget-slide .btn-anime.episode .link a:hover { background: rgba(0,0,0,0.7); }
  2085. #widget-episode-video .widget-slide .external-link,
  2086. #widget-manga-store .widget-slide .external-link { max-width: 210px; }
  2087. /* - - - - - - - - - - - - - - -*\
  2088.   Seasonals
  2089. \*- - - - - - - - - - - - - - - */
  2090. #widget-seasonal-video .widget-slide .btn-anime {
  2091.     margin-right: 10px;
  2092. }
  2093. /* - - - - - - - - - - - - - - -*\
  2094.   Promotional Videos
  2095. \*- - - - - - - - - - - - - - - */
  2096. #widget-promotional-video .widget-slide-outer { height: auto !important; }
  2097. #widget-promotional-video .widget-slide .btn-anime .link {
  2098.     height: 140px !important;
  2099.     background-size: cover;
  2100. }
  2101. #widget-promotional-video .widget-slide .link:after {
  2102.    
  2103.     height: 55px;
  2104.     background: var(--slider-gradient);
  2105. }
  2106. #widget-promotional-video .widget-slide .btn-anime .link .title {
  2107.     bottom: 20px;
  2108.    
  2109.     padding: 0 5px !important;
  2110.    
  2111.     color: var(--slider-subtitle);
  2112.     font: 0.9rem/1 var(--fontset-basic);
  2113. }
  2114. #widget-promotional-video .widget-slide .btn-anime .link .btn-play {
  2115.     width: 80px;
  2116.     height: 80px;
  2117.     background: rgba(0,0,0,0.7) !important;
  2118.     margin: -40px 0 0 -40px;
  2119.    
  2120.     transform: scale(0);
  2121.     transition: all var(--time-img) var(--time-function-bounce);
  2122. }
  2123. #widget-promotional-video .widget-slide .btn-anime:hover .link .btn-play {
  2124.     transform: scale(1);
  2125. }
  2126. #widget-promotional-video .widget-slide .btn-anime .link .btn-play:before {
  2127.     content: "\f04b";
  2128.    
  2129.    
  2130.     color: #fff;
  2131.     font: 32px/80px "Font Awesome 6";
  2132. }
  2133. #widget-promotional-video .widget-slide .external-link { max-width: 210px; }
  2134. /* - - - - - - - - - - - - - - -*\
  2135.   Recommendations
  2136. \*- - - - - - - - - - - - - - - */
  2137. .auto-recommendations .btn-side {
  2138.     width: 35px;
  2139.     height: 70px;
  2140.     background-size: 70px auto;
  2141.     margin-top: -35px;
  2142. }
  2143. .auto-recommendations .btn-side.left { background-position: -35px 0; }
  2144. .auto-recommendations .item {
  2145.     width: 121px;
  2146.     background-color: var(--content-dim);
  2147.     margin-right: 10px;
  2148. }
  2149. .auto-recommendations .item .title {
  2150.     color: var(--slider-title);
  2151.     font: 1rem/1.2 var(--fontset-basic);
  2152.    
  2153. }
  2154. /*------------------------------*\
  2155.   PANEL @Forum
  2156. \*------------------------------*/
  2157. body.index .watched_topics .widget-content {
  2158. }
  2159. #myanimelist table.forum-topics tr td {
  2160.     padding: 7px;
  2161.     background: var(--content-dim);
  2162.     border-color: var(--border);
  2163.    
  2164. }
  2165. #myanimelist table.forum-topics tr .watch-state { box-sizing: border-box; }
  2166. /*------------------------------*\
  2167.   PANEL @News
  2168. \*------------------------------*/
  2169.  
  2170. /* - - - - - - - - - - - - - - -*\
  2171.   Newest
  2172. \*- - - - - - - - - - - - - - - */
  2173. .news-list.widget {
  2174.    
  2175.     align-items: flex-start;
  2176. }
  2177. .news-list.widget .news-unit {
  2178.    
  2179.     margin: 0;
  2180.    
  2181.     flex: 1 1 auto;
  2182. }
  2183. .left .news-list.widget .news-unit { width: 40%; }
  2184. .left .news-list .news-unit:nth-child(odd) { margin-right: 1%; }
  2185. .news-list .picSurround {
  2186. }
  2187. .news-list .news-unit-right { margin: 0 !important; }
  2188. /* Layout */
  2189. .news-list .news-unit-right:before {
  2190.    
  2191.     width: 54px;
  2192.     height: 74px;
  2193.     padding-right: 5px;
  2194.    
  2195.     float: left;
  2196. }
  2197. #myanimelist .news-unit .title {
  2198.     display: inline;
  2199.    
  2200.     line-height: 1.5;
  2201.     word-wrap: break-word;
  2202. }
  2203. #myanimelist .news-unit .title:after {
  2204.     content: "\a";
  2205.     white-space: pre;
  2206. }
  2207. #myanimelist .news-unit .text {
  2208.     display: inline;
  2209.    
  2210.     color: var(--text-dim);
  2211.    
  2212. }
  2213. #myanimelist .news-unit .information {
  2214. }
  2215. #myanimelist .news-unit .information .info {
  2216.     padding: 3px 0 0 0 !important;
  2217.    
  2218.     color: var(--text-dimmer);
  2219.     font: 0.8rem/1.5 var(--fontset-basic);
  2220. }
  2221. /* - - - - - - - - - - - - - - -*\
  2222.   Featured News
  2223. \*- - - - - - - - - - - - - - - */
  2224. /* #PANEL - LEFT-SPECIFIC */
  2225. .widget.anime_discussions.left .spaceit {
  2226.     max-width: 70%;
  2227.     vertical-align: top;
  2228.     padding: 6px 0;
  2229.     margin: 0;
  2230. }
  2231. .widget.anime_discussions.left .lightLink {
  2232.     max-width: 30%;
  2233.     vertical-align: top;
  2234.     padding: 6px 0;
  2235. }
  2236. .widget.anime_discussions.left .borderClass {
  2237. }
  2238. /* #PANELS - RIGHT SPECIFIC */
  2239. }
  2240.  
  2241. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(editprofile.php|notification/setting|login\\.php|register\\.php|membership).*") {
  2242. /* !SETTINGS */
  2243. .page-common #content { padding-top: 44px !important; }
  2244. .page-common #contentWrapper {
  2245.     width: 1040px;
  2246. }
  2247. div[style="padding: 0 15px"] {
  2248.     padding: 0 10px !important;
  2249. }
  2250. table { border-collapse: collapse; }
  2251. td { padding: 6px 0; }
  2252. #dialog td {  }
  2253. #dialog td td { padding: 10px 5px 0 0; }
  2254. #dialog td td ~ td { padding: 10px 0 0 5px; }
  2255. .page-common .spaceit_pad { padding: 0 10px; }
  2256. #myanimelist [id$="ajaxIndicator"] ~ .inputButton {
  2257.    
  2258. }
  2259. #myanimelist textarea {
  2260.     width: 800px !important;
  2261.     resize: vertical;
  2262. }
  2263. /* - - - - - - - - - - - - - - -*\
  2264.   Headings
  2265. \*- - - - - - - - - - - - - - - */
  2266. .page-common h2 {
  2267.     background: var(--border);
  2268.     margin: 0 -10px 10px;
  2269.    
  2270.     color: var(--text);
  2271. }
  2272. #dialog .normal_header { margin-left: 0; margin-right: 0; }
  2273. .page-common .normal_header:only-child { margin-bottom: 0; }
  2274. .page-common h2 .floatRightHeader {
  2275.    
  2276.     line-height: 13px;
  2277.     font-family: inherit;
  2278. }
  2279. .page-common h2 .floatRightHeader a {
  2280.     margin: -10px -10px 0 10px;
  2281.    
  2282.     color: var(--text-dim);
  2283.    
  2284.     line-height: 13px;
  2285.     font-family: inherit;
  2286.    
  2287. }
  2288. .page-common h2 .floatRightHeader a:hover {
  2289.     background: var(--content-dim);
  2290.     background: var(--content-dimmest);
  2291. }
  2292. /*------------------------------*\
  2293.   SETTINGS @Profile
  2294. \*------------------------------*/
  2295. .normal_header .badresult-text {
  2296.     z-index: 5;
  2297.    
  2298.     width: 0;
  2299.     padding: 5px 0 0 14px !important;
  2300.     border-radius: 4px;
  2301.     margin: -5px 0 0;
  2302.    
  2303.     font: 1rem/13px var(--fontset-basic) !important;
  2304.     vertical-align: top;
  2305.    
  2306. }
  2307. .normal_header .badresult-text:hover {
  2308.     padding: 5px 10px !important;
  2309.     background: var(--content-dimmest);
  2310.    
  2311.     color: var(--text);
  2312.     letter-spacing: 0;
  2313.     text-transform: none;
  2314. }
  2315. .normal_header .badresult-text:before {
  2316.     content: "\f06a";
  2317.     top: 5px;
  2318.    
  2319.    
  2320.     width: 14px;
  2321.    
  2322.     color: var(--return-bad);
  2323.     font: 14px/13px "Font Awesome 6";
  2324.    
  2325.     cursor: help;
  2326. }
  2327. .normal_header .badresult-text:hover:before { color: transparent; }
  2328. /*------------------------------*\
  2329.   SETTINGS @Favourites
  2330. \*------------------------------*/
  2331. .page-common .draggable_list li:hover {
  2332.     background: var(--content-dim);
  2333. }
  2334. #dialog .spaceit_pad ~ table .normal_header {
  2335.     padding: 0 10px 7px;
  2336.     border-bottom: 2px solid var(--border);
  2337.     margin-bottom: 7px;
  2338. }
  2339. #dialog .spaceit_pad ~ table .normal_header a {
  2340.     margin: 0;
  2341. }
  2342. /*------------------------------*\
  2343.   SETTINGS @Notifications
  2344. \*------------------------------*/
  2345. .notification-setting-content div[role="form"] {
  2346.     width: 800px;
  2347.     margin: 0 auto !important;
  2348. }
  2349. .notification_settings .notification-setting-content .settings-notification {
  2350. }
  2351. /* Header */
  2352. .notification_settings .notification-setting-content .settings-notification .setting.header td {
  2353.     background: var(--content-dim);
  2354.    
  2355.     color: var(--text-heading);
  2356. }
  2357. /* Content */
  2358. .notification_settings .notification-setting-content .settings-notification .setting td {
  2359.     border-color: var(--border) !important;
  2360. }
  2361. .notification_settings .notification-setting-content .settings-notification .setting td.label .title {
  2362.     color: var(--text);
  2363. }
  2364. .notification_settings .notification-setting-content .settings-notification .setting td.label .text {
  2365.     color: var(--text-dimmer);
  2366. }
  2367. /* Content Labels */
  2368. .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]+label {
  2369.     padding: 1px 6px;
  2370.     background: var(--content-dim);
  2371.     border-color: var(--border);
  2372. }
  2373. .notification_settings .notification-setting-content .settings-notification .setting td.button.off input[type=checkbox]+label {
  2374.     background: var(--content-dim) !important;
  2375.     border-color: var(--border) !important;
  2376.    
  2377.    
  2378. }
  2379. .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]:checked+label {
  2380.     background: var(--border);
  2381.     border-color: var(--accent);
  2382. }
  2383. .notification_settings .notification-setting-content .settings-notification .setting td.button.all input[type=checkbox]:checked+label {
  2384.     background: var(--border);
  2385.     border-color: var(--notif);
  2386. }
  2387. .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]+label:before {
  2388.     color: var(--text-lnk);
  2389.     font: 0.9rem/14px var(--fontset-basic);
  2390. }
  2391. .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]:checked+label:before {
  2392.     color: var(--text-lnk-hov);
  2393. }
  2394. .notification_settings .notification-setting-content .settings-notification .setting td.button.all input[type=checkbox]+label:before {
  2395.     color: var(--notif);
  2396. }
  2397. .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]+label:after {
  2398.     background: var(--text-lnk);
  2399. }
  2400. .notification_settings .notification-setting-content .settings-notification .setting td.button input[type=checkbox]:checked+label:after {
  2401.     background: var(--text-lnk-hov);
  2402. }
  2403. .notification_settings .notification-setting-content .settings-notification .setting td.button.all input[type=checkbox]+label:after {
  2404.     background: var(--notif);
  2405. }
  2406. .notification_settings .notification-setting-content .settings-notification tr:not(.setting):not(.ac) td {
  2407.     padding: 7px 0 !important;
  2408.    
  2409. }
  2410. .notification_settings .notification-setting-content .settings-notification .ac td {
  2411.     padding: 5px 0 0 0 !important;
  2412. }
  2413. /*------------------------------*\
  2414.   SETTINGS @Panel
  2415. \*------------------------------*/
  2416. .setting-row {
  2417.     background: var(--content-dim);
  2418.    
  2419.     color: var(--text);
  2420. }
  2421. .setting-row.show-hidden {
  2422.    
  2423.     color: var(--text-dimmest);
  2424. }
  2425. .setting-row.locate-right { background: var(--content-dim); }
  2426. .setting-row td { padding: 7px 10px; }
  2427. /*------------------------------*\
  2428.   SETTINGS @Forum
  2429. \*------------------------------*/
  2430. [name="picture_form"] td[width="160"] {
  2431. }
  2432. [name="picture_form"] .normal_header {
  2433.     margin-bottom: 10px;
  2434. }
  2435. [name="picture_form"] img {
  2436.     margin-left: 10px;
  2437. }
  2438. /*------------------------------*\
  2439.   SETTINGS @List-Settings
  2440. \*------------------------------*/
  2441. .btn-sns-setting, #myanimelist .sns-setting .setting-input-button {
  2442.     height: 24px;
  2443.     padding: 0 10px !important;
  2444.     background: var(--content-dim) !important;
  2445.     border-radius: 12px;
  2446.    
  2447.     color: var(--text-lnk);
  2448.     font: 0.9rem/24px var(--fontset-basic);
  2449.    
  2450. }
  2451. #myanimelist .sns-setting .setting-input-button { margin-top: -3px; }
  2452. .btn-sns-setting span { font: 0.9rem/24px var(--fontset-basic); }
  2453. .btn-sns-setting:hover, #myanimelist .sns-setting .setting-input-button:hover {
  2454.     background: var(--border) !important;
  2455.    
  2456.     color: var(--text-lnk-hov);
  2457. }
  2458. .sns-setting .explanation {  }
  2459. .sns-setting .explanation td { background: var(--content-dim) !important; }
  2460. .sns-setting .table td {
  2461.     border-color: var(--border);
  2462.    
  2463.    
  2464. }
  2465. .sns-setting .table tr:nth-of-type(odd) td {  }
  2466. .sns-setting .sns-setting-default {
  2467.     height: 34px;
  2468.     border-color: var(--border);
  2469.    
  2470.    
  2471. }
  2472. .sns-setting .cell-border-vertical {
  2473.     border-color: var(--border);
  2474.    
  2475.     vertical-align: top;
  2476. }
  2477. .sns-setting .sns-setting-default > div.di-ib > * { vertical-align: top; }
  2478. /* .sns-setting .setting-input-button {
  2479.     padding: 4px 10px !important;
  2480.     background: var(--content-dim);
  2481.     border-radius: 12px;
  2482. } */
  2483. /*------------------------------*\
  2484.   SETTINGS @Advanced-CSS
  2485. \*------------------------------*/
  2486. input[value*="advanced CSS"] + input {
  2487.     margin-top: 10px;
  2488. }
  2489. /*------------------------------*\
  2490.   SETTINGS @Login
  2491. \*------------------------------*/
  2492. .page-common .login-form-header-text {
  2493.     border-color: var(--border);
  2494. }
  2495. .page-common .social-login-block {
  2496.     border-color: var(--border);
  2497. }
  2498. .page-common .social-login-block:after {
  2499.     background: var(--border);
  2500. }
  2501. .page-common .icon-social-login {
  2502.     margin-right: 0;
  2503. }
  2504. .page-common .icon-social-login ~ .icon-social-login {
  2505.     margin-left: 20px;
  2506. }
  2507. /*------------------------------*\
  2508.   SETTINGS @Privacy
  2509. \*------------------------------*/
  2510. div[style="width: 450px;"] {
  2511. }
  2512. div[style="width: 450px;"] .normal_header {
  2513.     margin-bottom: 7px;
  2514. }
  2515. div[style="width: 450px;"] .spaceit_pad {
  2516.     height: 1.5em;
  2517.     clear: both;
  2518.     line-height: 1.5em;
  2519. }
  2520. /*------------------------------*\
  2521.   SETTINGS @MALSUPPORTER
  2522. \*------------------------------*/
  2523. .membership #myanimelist span { color: var(--text); }
  2524. .membership #myanimelist p { color: var(--text-dimmer); }
  2525. .membership #myanimelist .plan-header,
  2526. .membership #myanimelist .about-membership div {
  2527. }
  2528.    
  2529. .membership #myanimelist .plan-header,
  2530. .membership #myanimelist .header { color: var(--text-heading) }
  2531. .membership #myanimelist .button { border-radius: 30px; }
  2532. .membership #myanimelist .about-membership .about-new-feature {
  2533.     background: var(--content-dim);
  2534.     border: 3px solid var(--accent);
  2535. }
  2536. .membership #myanimelist .about-new-feature .new {
  2537.     background: var(--notif);
  2538.    
  2539.     color: var(--border);
  2540. }
  2541. .membership #myanimelist .description { text-shadow: none; }
  2542. .membership #myanimelist .btn-subscription { border-radius: 19.5px; }
  2543. .faq-container .faq-lists .question, .faq-container .faq-lists .answer {
  2544.     color: var(--header-text);
  2545. }
  2546. .faq-container .faq-lists .question:hover, .faq-container .faq-lists .question.on {
  2547.     color: var(--content-dimmest);
  2548. }
  2549. }
  2550.  
  2551. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)\\.php.*") {
  2552. /* SEARCH */
  2553. /* Recommendations */
  2554. #content > .normal_header + div.mt8 {
  2555.     margin-top: 10px !important;
  2556. }
  2557. .auto-recommendations {
  2558.    
  2559. }
  2560. .auto-recommendations .item:hover {
  2561.    
  2562. }
  2563. }
  2564.  
  2565. @-moz-document url-prefix("https://myanimelist.net/anime/season"), regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)/genre/.*") {
  2566. /* SEASONAL/GENRE */
  2567. .property {
  2568.     background-color: transparent !important;
  2569. }
  2570. .genres, .information {
  2571.     width: 100% !important;
  2572. }
  2573. }
  2574.  
  2575. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)/[0-9]+.*/stats") {
  2576. /* STATS */
  2577. #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 {
  2578.     display: revert !important;
  2579.     background-color: transparent !important;
  2580. }
  2581. }
  2582.  
  2583. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(anime|manga)/[0-9]+.*") {
  2584. /* ANIME-PAGE & MANGA-PAGE */
  2585. #content > table,
  2586. #content > table > tbody,
  2587. .js-scrollfix-bottom-rel > table,
  2588. .js-scrollfix-bottom-rel > table > tbody,
  2589. .js-scrollfix-bottom-rel > table > tbody > tr,
  2590. .js-scrollfix-bottom-rel > table > tbody > tr > td
  2591. {  }
  2592. #content > table > tbody > tr { display: flex; }
  2593. .page-common .h1.edit-info span.h1-title, .page-common .h1.edit-info div.h1-title {
  2594.     top: -20px !important;
  2595.     position: relative !important;
  2596. }
  2597. /* Left Split */
  2598. /* td.borderClass[style="border-width: 0 1px 0 0;"]:nth-child(1) */
  2599. #content > table > tbody > tr > td:first-child {
  2600.     width: 225px !important;
  2601.     padding: 0 7px 0 0;
  2602.     border-right: 3px solid var(--border) !important;
  2603.    
  2604. }
  2605. #content > table > tbody > tr > td:first-child .js-scrollfix-bottom {
  2606.     width: 205px !important;
  2607.    
  2608.     flex: 1 1 auto;
  2609. }
  2610. /* Right Split */
  2611. #content > table > tbody > tr > td:last-child {
  2612.     width: 600px;
  2613.     flex: 1 1 auto;
  2614. }
  2615. .js-scrollfix-bottom-rel {
  2616. }
  2617. /* Generic */
  2618. .page-common [id^="fsgComments"] .bgColor2 {
  2619.     background: var(--border);
  2620. }
  2621. .page-common [id^="fsgComments"] .spaceit[style*="#f7e0e0"] {
  2622.     background: var(--dropped) !important;
  2623. }
  2624. /* #content > table > tbody > tr > td:nth-child(2) > div.js-scrollfix-bottom-rel > table > tbody > tr:nth-child(2) > td {
  2625. } */
  2626. /*------------------------------*\
  2627.   ANIME @Headings
  2628. \*------------------------------*/
  2629. /* Split-Right */
  2630. td[style="padding-left: 5px;"]:nth-child(2) h2 {
  2631.     padding: 10px !important;
  2632.     background: var(--content-dimmer);
  2633.     margin: 0 -10px 10px !important;
  2634.    
  2635.     clear: both;
  2636.    
  2637.     color: var(--text);
  2638. }
  2639. td[style="padding-left: 5px;"]:nth-child(2) h2 ~ h2 { margin-top: 10px !important; }
  2640. td[style="padding-left: 5px;"]:nth-child(2) h2 .floatRightHeader:not(:link) {
  2641.    
  2642.     line-height: 13px;
  2643.     font-family: inherit;
  2644. }
  2645. td[style="padding-left: 5px;"]:nth-child(2) h2 a {
  2646.     margin: -10px -10px 0 10px;
  2647.    
  2648.     color: var(--text-dim);
  2649.     font: bold 0.9rem/13px var(--fontset-heading) !important;
  2650.    
  2651. }
  2652. td[style="padding-left: 5px;"]:nth-child(2) h2 a:hover { background: var(--content-dimmest); }
  2653. td[style="padding-left: 5px;"]:nth-child(2) h2 .floatRightHeader a:empty {  }
  2654. .floatRightHeader a:only-of-type { margin-left: 0 !important; }
  2655. /* Split-Left */
  2656. td.borderClass[style="border-width: 0 1px 0 0;"]:nth-child(1) h2 {
  2657.     background: var(--border);
  2658.     margin: 4px -10px 5px -10px !important;
  2659.    
  2660.     color: var(--text);
  2661. }
  2662. /*------------------------------*\
  2663.   ANIME @Split-Left
  2664. \*------------------------------*/
  2665. /* Cover Pic */
  2666. .js-scrollfix-bottom > div:first-of-type {
  2667.     margin-left: -10px;
  2668. }
  2669. /* Actions */
  2670. .js-scrollfix-bottom > div:first-of-type:after {
  2671.     content: "ACTIONS";
  2672.    
  2673.    
  2674.     width: 205px;
  2675.     background: var(--content-dimmer);
  2676.     margin: 10px 0 0 0;
  2677.    
  2678.     color: var(--text);
  2679. }
  2680. /* Remove "edit status" header */
  2681. .js-scrollfix-bottom > div:first-of-type + h2 {  }
  2682. #myanimelist #profileRows a, #myanimelist .profileRows a {
  2683.    
  2684.     padding: 4px 10px;
  2685.     margin-left: -10px;
  2686.     margin-right: -10px;
  2687.     background: var(--content-dim);
  2688.     border-radius: 12px;
  2689.    
  2690.     color: var(--text-lnk);
  2691.     text-decoration: none;
  2692.    
  2693. }
  2694. #myanimelist .profileRows {
  2695.     padding-top: 5px;
  2696. }
  2697. #myanimelist #profileRows {
  2698.     margin-top: 3px;
  2699. }
  2700. #myanimelist #profileRows a:hover, #myanimelist .profileRows a:hover {
  2701.     background: var(--accent-dim);
  2702.    
  2703.     color: var(--text-heading);
  2704. }
  2705. /* Remove Manga Store */
  2706. #profileRows + .di-b {
  2707.     display: none !important;
  2708. }
  2709. /* Social Icons */
  2710. .page-common .icon-block {
  2711. }
  2712. .page-common .icon-block .icon-social {
  2713.     margin-right: 10px;
  2714.     background: var(--img-socials);
  2715.     background-size: 330px 66px;
  2716.    
  2717. }
  2718. .page-common .icon-block .icon-facebook { background-position: 0 0; }
  2719. .page-common .icon-block .icon-twitter { background-position: -33px 0; }
  2720. .page-common .icon-block .icon-google { background-position: -66px 0; }
  2721. .page-common .icon-block .icon-reddit { background-position: -99px 0; }
  2722. .page-common .icon-block .icon-tumblr { background-position: -132px 0; }
  2723. /* External Links */
  2724. #content > table > tbody > tr > td:first-child .pb16 {
  2725.     line-height: 0;
  2726. }
  2727. #content > table > tbody > tr > td:first-child .pb16 a {
  2728.    
  2729.     padding: 3px 0;
  2730.    
  2731.     line-height: 1.5;
  2732. }
  2733. /* Score */
  2734. .anime-detail-header-stats .stats-block .score {
  2735.     left: -58px;
  2736.     top: -11px;
  2737.    
  2738.     background: var(--content-dimmer);
  2739.     border: 4px solid var(--accent);
  2740.     height: 100px;
  2741.    
  2742.     color: var(--text) !important;
  2743.     font: bold 2.2rem/90px var(--fontset-basic) !important;
  2744. }
  2745. .anime-detail-header-stats .stats-block .score:before, .anime-detail-header-stats .stats-block .score:after {
  2746.     color: var(--text-dim) !important;
  2747.    
  2748. }
  2749. .anime-detail-header-stats .stats-block .score:before {
  2750.     content: "scored";
  2751.     top: 18px;
  2752.    
  2753. }
  2754. .anime-detail-header-stats .stats-block .score:after {
  2755.     content: "by " attr(data-user);
  2756.     bottom: 20px;
  2757.    
  2758.     white-space: normal;
  2759. }
  2760. /*------------------------------*\
  2761.   ANIME @Split-Right
  2762. \*------------------------------*/
  2763. .page-common #horiznav_nav {
  2764.     width: calc(100% + 20px);
  2765.     margin: 0 -10px !important;
  2766. }
  2767. /* Remove Manga Store Links */
  2768. #content > table > tbody > tr > td:nth-child(2) > div.js-scrollfix-bottom-rel > table > tbody > tr:nth-child(2) {
  2769. }
  2770. /* - - - - - - - - - - - - - - -*\
  2771.   Main Info
  2772. \*- - - - - - - - - - - - - - - */
  2773. td > .pb16:first-of-type { padding-bottom: 10px !important; }
  2774. td > .pb16 > .mt12 {
  2775.     display: flex !important;
  2776.     width: calc(100% + 10px);
  2777.     margin-top: 21px !important;
  2778. }
  2779. .anime-detail-header-stats {
  2780.     flex: 1 1 auto;
  2781. }
  2782. .anime-detail-header-stats .stats-block {
  2783.     padding-left: 58px;
  2784.     border-color: var(--border);
  2785.     margin-left: 48px;
  2786. }
  2787. .anime-detail-header-stats .stats-block,
  2788. .anime-detail-header-stats .user-status-block,
  2789. .detail-characters-list .left-column table:nth-of-type(even), .detail-characters-list .left-right table:nth-of-type(even) {
  2790.     background: var(--content-dim);
  2791. }
  2792. .anime-detail-header-stats .stats-block * {
  2793.     color: var(--text-dim) !important;
  2794.    
  2795. }
  2796. .anime-detail-header-stats .stats-block:before { content: none; }
  2797. /* Information */
  2798. .anime-detail-header-stats .stats-block div:nth-child(2) {
  2799.     margin: 30px !important;
  2800. }
  2801. .anime-detail-header-stats .stats-block .numbers {
  2802.     font: 1.3rem/33px var(--fontset-basic);
  2803. }
  2804. .anime-detail-header-stats .stats-block .information-block {
  2805.    
  2806.    
  2807. }
  2808. .anime-detail-header-stats .stats-block .information {
  2809.     height: 15px;
  2810.     margin-top: 9px;
  2811.     border-color: var(--text-dim);
  2812.    
  2813.     font: 0.9rem/15px var(--fontset-basic);
  2814. }
  2815. /* Update List */
  2816. .anime-detail-header-stats .user-status-block {
  2817.     border-color: var(--border);
  2818.     margin: 7px 0 0 78px !important;
  2819.     padding: 7px 143px 7px 15px;
  2820.     border-radius: 21px;
  2821. }
  2822. .anime-detail-header-stats .user-status-block > [class*="form-"] {
  2823.     background-color: var(--content-dimmer);
  2824.    
  2825.     color: var(--text);
  2826. }
  2827. .anime-detail-header-stats .user-status-block > [class*="form-"]:not(.form-user-status) {
  2828.     border-color: var(--content);
  2829. }
  2830. .page-common .notice_open_public {  }
  2831. /* Buy From */
  2832. .anime-detail-header-stats .btn-affiliate.icon-shop-default {
  2833.    
  2834. }
  2835. .anime-detail-header-stats .anime-detail-header-affiliate-dialog {
  2836.     right: 6px;
  2837.     top: -26px;
  2838.    
  2839.     background: var(--content-dimmest);
  2840.     border-color: var(--border);
  2841. }
  2842. .anime-detail-header-stats .anime-detail-header-affiliate-dialog:before { color: var(--text) }
  2843. .anime-detail-header-stats .btn-affiliat { transition: all var(--time-btn-small) ease; }
  2844. .anime-detail-header-stats .btn-affiliate:hover {  }
  2845. /* Video */
  2846. #myanimelist .anime-detail-header-video {
  2847. }
  2848. .anime-detail-header-video .video-episode .video-unit, .anime-detail-header-video .video-promotion .video-unit {
  2849.     width: 153px;
  2850.     height: 86px;
  2851. }
  2852. #myanimelist .anime-detail-header-video .mt4 { margin-top: 7px !important; }
  2853. #myanimelist .anime-detail-header-video .mt4 a {
  2854.    
  2855.     background: var(--content-dim);
  2856.    
  2857.     color: var(--text-lnk);
  2858.    
  2859. }
  2860. #myanimelist .anime-detail-header-video .mt4 a:hover {
  2861.     background: var(--content-dimmer);
  2862.    
  2863.     color: var(--text-lnk-hov);
  2864. }
  2865. /* - - - - - - - - - - - - - - -*\
  2866.   Episode Videos
  2867. \*- - - - - - - - - - - - - - - */
  2868. #episode_video.anime-slide-block {
  2869. }
  2870. .anime-slide-outer {
  2871. }
  2872. .anime-slide-block .anime-slide {
  2873. }
  2874. .anime-slide-block .anime-slide .btn-anime {
  2875. }
  2876. .anime-slide-block .anime-slide .btn-anime:last-child {
  2877.     margin-right: 0;
  2878. }
  2879. .anime-slide-block .anime-slide .btn-anime .link {
  2880.     height: 130px !important;
  2881. }
  2882. .anime-slide-block .anime-slide .btn-anime .link:hover {
  2883.    
  2884. }
  2885. .anime-slide-block .anime-slide .btn-anime .link:before {
  2886.    
  2887.     background: transparent no-repeat center / cover;
  2888.     background-image: inherit;
  2889. }
  2890. .anime-slide-block .anime-slide .btn-anime .link .title {
  2891.     background: linear-gradient(to top, #000e, #0002);
  2892.    
  2893.     font-size: 1.5rem;
  2894.     line-height: 130px;
  2895. }
  2896. .anime-slide-block .anime-slide .btn-anime .link:hover .title {
  2897.     background: linear-gradient(to top, #000f, #0006);
  2898. }
  2899. @media (min-width: 1630px) {
  2900.     .anime-slide-block .anime-slide .btn-anime .link:before {
  2901.         filter: blur(1px);
  2902.     }
  2903.     .anime-slide-block .anime-slide .btn-anime .link .title {
  2904.         font-size: 2rem;
  2905.     }
  2906. }
  2907. /* - - - - - - - - - - - - - - -*\
  2908.   Characters & Staff
  2909. \*- - - - - - - - - - - - - - - */
  2910. .detail-characters-list {
  2911. /*  */
  2912. /*  */
  2913. }
  2914. .detail-characters-list + br {  }
  2915. #myanimelist .detail-characters-list div {
  2916.     display: table;
  2917.     width: calc(50% - 7px) !important;
  2918. }
  2919. #myanimelist .detail-characters-list .divider {
  2920.     width: calc(50% - 8px) !important;
  2921. }
  2922. #myanimelist .detail-characters-list .divider:after {
  2923.     right: -8px;
  2924.     border-color: var(--content-dimmer);
  2925. }
  2926. #myanimelist .detail-characters-list table:last-of-type td { border-bottom: none; }
  2927. /* - - - - - - - - - - - - - - -*\
  2928.   Theme Songs
  2929. \*- - - - - - - - - - - - - - - */
  2930. [name="staff"] ~ .di-t:not([style]) { width: 100%; }
  2931. [name="staff"] ~ .di-t:not([style]) [style="width:16px;"] { display: none !important; }
  2932. [name="staff"] ~ .di-t:not([style]) .di-tc:first-child {  }
  2933. [name="staff"] ~ .di-t:not([style]) .di-tc:last-child { padding-left: 15px; }
  2934. [name="staff"] ~ .di-t:not([style]) + br, [name="staff"] ~ .di-t:not([style]) + br + br {  }
  2935. /* - - - - - - - - - - - - - - -*\
  2936.   Stats Userscript
  2937. \*- - - - - - - - - - - - - - - */
  2938. #content > table > tbody > tr > td > div.js-scrollfix-bottom-rel > table > tbody > tr > td > div > table > tbody > tr > td {
  2939.     background-color: transparent !important;
  2940. }
  2941. /* - - - - - - - - - - - - - - -*\
  2942.   Reviews
  2943. \*- - - - - - - - - - - - - - - */
  2944. .page-common .borderDark {
  2945.    
  2946.     border: 2px solid var(--border) !important;
  2947.     margin-bottom: 10px;
  2948. }
  2949. @media (min-width: 1630px) {
  2950.     #content:not([style]) .borderDark {
  2951.    
  2952.         width: calc(50% - 8px);
  2953.    
  2954.        
  2955.         vertical-align: top;
  2956.     }
  2957.    
  2958.     .borderDark + .borderDark {
  2959.         margin-left: 10px;
  2960.     }
  2961.     h2 + .borderDark + .borderDark + .borderDark {
  2962.         margin-left: 0;
  2963.    
  2964.     }
  2965. }
  2966. /* Content Header */
  2967. .borderDark > .spaceit:nth-child(1) {
  2968.     padding: 5px 60px 55px 58px;
  2969.     background: var(--content-dim);
  2970.     border-bottom: 2px solid var(--border);
  2971.     margin: 0;
  2972. }
  2973. /* Post Time, Episodes Seen, Overall Rating */
  2974. .borderDark > .spaceit:first-child > div:first-child {
  2975.     height: 70px;
  2976.     margin: 0 !important;
  2977.     flex-flow: column nowrap;
  2978.    
  2979.     line-height: 18px;
  2980. }
  2981. /* Episodes Seen */
  2982. .borderDark > .spaceit:first-child > div:first-child .spaceit {
  2983.     margin: 0;
  2984. }
  2985. /* Overall Rating */
  2986. .borderDark > .spaceit:first-child > div:first-child div:last-child {  }
  2987. /* User Name, User Avatar, and Helpful Count */
  2988. .borderDark > .spaceit:first-child > div[style*="left"] {
  2989.     height: 70px;
  2990.     margin-left: -53px;
  2991. }
  2992. .borderDark > .spaceit:first-child > div[style*="left"] td { line-height: 23px; }
  2993. /* Helpful Count */
  2994. .borderDark > .spaceit:first-child > div[style*="left"] .spaceit {
  2995.     margin: 0;
  2996. }
  2997. /* Preliminary Review */
  2998. .js-reviews-chk-preliminary .fa-tag,
  2999. .borderDark > .spaceit:first-child > div[style*="left"] .spaceit + div .fa-tag { color: var(--accent) !important; }
  3000. /* User Avatar */
  3001. .borderDark > .spaceit:first-child > div[style*="left"] td[width="60"] { width: auto; }
  3002. .borderDark > .spaceit:first-child  div[style*="left"] td:last-child { padding-left: 7px; }
  3003. .borderDark > .spaceit:first-child > div[style*="left"] .picSurround img {
  3004.     max-width: 66px;
  3005.     max-height: 66px;
  3006. }
  3007. /* Text */
  3008. .borderDark > .spaceit:nth-child(2) {
  3009.     min-height: 130px;
  3010.     padding: 3px 7px 3px 117px !important;
  3011.     margin: 0 !important;
  3012. }
  3013. /* Score */
  3014. .borderDark:before {
  3015.     top: 82px;
  3016.    
  3017.    
  3018.     width: 108px;
  3019.     height: calc(100% - 82px);
  3020.     background: var(--content-dim);
  3021.     border-right: 2px solid var(--border);
  3022.    
  3023.     float: left;
  3024. }
  3025. .borderDark > .spaceit:nth-child(2) div[id^="score"] {
  3026.     top: 83px;
  3027.    
  3028.    
  3029.     float: none !important;
  3030. }
  3031. .borderDark > .spaceit:nth-child(2) div[id^="score"] table {
  3032.     width: 108px;
  3033.     border-width: 0 0 1px !important;
  3034. }
  3035. .borderDark > .spaceit:nth-child(2) div[id^="score"] tr { border-width: 1px 0; }
  3036. .borderDark > .spaceit:nth-child(2) div[id^="score"] td { padding: 3px 0; }
  3037. .borderDark > .spaceit:nth-child(2) div[id^="score"] td:first-child { padding-left: 7px; }
  3038. .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { padding-right: 7px; }
  3039. .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { text-align: right; }
  3040. /* Bottom Buttons */
  3041. .borderDark > div:last-child {
  3042.     padding: 0 7px;
  3043.    
  3044.     text-align: right;
  3045. }
  3046. .borderDark > div:last-child > .clearfix {
  3047.     padding: 0 0 3px !important;
  3048.     margin: 0 !important;
  3049. }
  3050. /* Report, Edit, Etc */
  3051. .borderDark > div:last-child a:nth-child(2) {
  3052.    
  3053.     background: var(--content-dim);
  3054.    
  3055.     color: var(--text-lnk);
  3056.     text-transform: capitalize;
  3057.    
  3058. }
  3059. .borderDark > div:last-child a:nth-child(2):hover {
  3060.     background: var(--border);
  3061.    
  3062.     color: var(--text-lnk-hov);
  3063. }
  3064. .borderDark > div:last-child a:nth-child(2) small { font-size: 0.9rem; }
  3065. /* Permalink */
  3066. .borderDark > div:last-child a:first-child {
  3067.     right: 5px;
  3068.    
  3069.    
  3070.     height: 50px;
  3071.     background: var(--border);
  3072.    
  3073.     color: var(--icon);
  3074.    
  3075. }
  3076. .borderDark > div:last-child a:first-child:after {
  3077.     content: "\f0c1";
  3078.     font: 30px/50px 'Font Awesome 6';
  3079. }
  3080. .borderDark > div:last-child a:first-child:hover { background: var(--accent-dimmest); }
  3081. .borderDark > div:last-child a:first-child small { font-size: 0; }
  3082. /* Helpful Review */
  3083. .page-common .js-review-btn-helpful {
  3084.     padding-left: 7px;
  3085.     border-left: 2px solid var(--accent);
  3086.    
  3087. }
  3088. .page-common .js-review-btn-helpful .js-vote-review-button {
  3089.     padding: 0 5px;
  3090.     background: var(--content-dim);
  3091.    
  3092.     color: var(--text-lnk);
  3093. }
  3094. .page-common .js-review-btn-helpful .js-vote-review-button:hover {
  3095.     background: var(--border);
  3096.    
  3097.     color: var(--text-lnk-hov);
  3098. }
  3099. /* - - - - - - - - - - - - - - -*\
  3100.   Recommendations
  3101. \*- - - - - - - - - - - - - - - */
  3102. #anime_recommendation.anime-slide-block {
  3103.     width: calc(100% - 90px) !important;
  3104.    
  3105.     flex-flow: row nowrap;
  3106. }
  3107. #anime_recommendation.anime-slide-block .btn-anime {
  3108. }
  3109. #anime_recommendation.anime-slide-block .btn-anime .image {
  3110.     object-fit: cover;
  3111. }
  3112. /* - - - - - - - - - - - - - - -*\
  3113.   Forum Board
  3114. \*- - - - - - - - - - - - - - - */
  3115. h2 + .page-forum {
  3116.     margin: -10px -10px 0;
  3117. }
  3118. /* - - - - - - - - - - - - - - -*\
  3119.   Featured Articles
  3120. \*- - - - - - - - - - - - - - - */
  3121. .news-list {
  3122.     flex-flow: row wrap;
  3123. }
  3124. .detail-page-featured-article .news-list .news-unit {
  3125.     width: 650px;
  3126.     padding-bottom: 7px;
  3127.     margin-bottom: 7px;
  3128.     flex: 1 1 auto;
  3129. }
  3130. .detail-page-featured-article .news-list .news-unit .news-unit-right .title, .detail-page-featured-article .news-list .news-unit .news-unit-right .text {
  3131.     font-family: var(--fontset);
  3132. }
  3133. .detail-page-featured-article .news-list .news-unit .news-unit-right .text {
  3134.     color: var(--text);
  3135. }
  3136. #myanimelist .news-list .information {
  3137.     padding-top: 7px;
  3138. }
  3139. #myanimelist .news-list .information > * {
  3140.     border-color: var(--border);
  3141.    
  3142.     font-family: var(--fontset);
  3143. }
  3144. }
  3145.  
  3146. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/profile/.*") {
  3147. /* ===============================================
  3148. !PROFILE
  3149. =============================================== */
  3150. /* PROFILE / GENERAL */
  3151. .page-common .content-container {
  3152.     width: 1042px;
  3153.     flex-flow: row nowrap;
  3154. }
  3155. .page-common #content[style="padding:8px;"] > table > tbody > tr {
  3156.     flex-flow: row nowrap;
  3157. }
  3158. /* PROFILE @Split-Left */
  3159. /* General */
  3160. .page-common #content[style="padding:8px;"] .profile_leftcell,
  3161. .page-common .content-container .container-left {
  3162.    
  3163.    
  3164.     width: 225px;
  3165.     padding-top: 0;
  3166.     padding-right: 7px;
  3167.     border-right: 3px solid var(--border);
  3168.    
  3169. }
  3170. .user-profile {
  3171. }
  3172. .user-profile .user-status li {
  3173.     background-color: transparent !important;
  3174. }
  3175. /* Image */
  3176. /* Image - Empty */
  3177. .btn-detail-add-picture { background: var(--border) var(--img-missing) no-repeat center / cover !important; }
  3178. .btn-detail-add-picture > * {  }
  3179. /* Buttons - Social */
  3180. .user-profile .user-function {
  3181. }
  3182. .user-profile .user-function .icon-user-function {
  3183.     height: 24px;
  3184.    
  3185.     background: var(--accent) !important;
  3186.     margin: 0;
  3187.    
  3188.     flex: 1 1 33.3%;
  3189.    
  3190. }
  3191. .user-profile .user-function .icon-user-function + .icon-user-function { margin-left: 2px; }
  3192. .user-profile .user-function .icon-user-function:first-child {
  3193.     border-radius: 12px 0 0 12px;
  3194.     padding-left: 4px;
  3195. }
  3196. .user-profile .user-function .icon-user-function:last-child {
  3197.     border-radius: 0 12px 12px 0;
  3198.     padding-right: 4px;
  3199. }
  3200. .user-profile .user-function .icon-user-function:not(.disabled):hover { background: var(--accent-dim) !important; }
  3201. .user-profile .user-function .icon-user-function.disabled {
  3202.     background: var(--border) !important;
  3203.    
  3204.     opacity: 0.75;
  3205. }
  3206. .user-profile .user-function .icon-user-function .text {
  3207.    
  3208.    
  3209.     color: var(--border);
  3210.     font: bold 0.9rem/24px var(--fontset-basic);
  3211.    
  3212. }
  3213. .user-profile .user-function .icon-user-function:not(.disabled):hover .text { color: var(--text-lnk-hov); }
  3214. #myanimelist .user-profile .user-function .icon-user-function.disabled .text { color: var(--text-dim) }
  3215. .user-profile .user-function .icon-user-function.icon-request .text,
  3216. .user-profile .user-function .icon-user-function.icon-remove .text { font-size: 0; }
  3217. .user-profile .user-function .icon-user-function .text:before {
  3218.     line-height: 24px;
  3219.     vertical-align: top;
  3220. }
  3221. .user-profile .user-function .icon-user-function.icon-request .text:before { content: "Friend"; }
  3222. .user-profile .user-function .icon-user-function.icon-remove .text:before { content: "Unfriend"; }
  3223. /* Basic Info */
  3224. .user-profile .user-status.border-top.pb8:before {
  3225.     content: "BASIC INFO";
  3226.    
  3227.    
  3228.     background: var(--border);
  3229.     margin: 0 0 2.5px 0;
  3230.    
  3231.     color: var(--text-heading);
  3232. }
  3233. .user-profile .user-status.border-top.pb8 {
  3234.     padding: 0 0 7px !important;
  3235.     margin: 0 !important;
  3236. }
  3237. .user-profile .user-status li {
  3238.     padding: 3.5px 10px;
  3239. }
  3240. @keyframes online {
  3241.     0%, 100% {
  3242.         opacity: 0.65;
  3243.        
  3244.         box-shadow:
  3245.             0 0 1.5px 0 var(--content),
  3246.             0 0 3px 0 var(--notif);
  3247.     }
  3248.     50% {
  3249.        
  3250.        
  3251.         box-shadow:
  3252.             0 0 1.5px 2px var(--content),
  3253.             0 0 3px 2px var(--notif);
  3254.     }
  3255. }
  3256. .user-profile .user-status li .user-status-data.online {
  3257.     color: var(--notif);
  3258. }
  3259. .user-profile .user-status li .user-status-data.online:after {
  3260.    
  3261.     width: 8px;
  3262.     height: 8px;
  3263.     background: var(--notif);
  3264.     margin-left: 3px;
  3265.    
  3266.     animation: online 2.25s ease-in-out infinite 0s;
  3267. }
  3268. /* Buttons - Anime/Mangalist */
  3269. .user-profile .user-button .btn-profile-submit {
  3270.     width: 111px;
  3271.     background: var(--accent) !important;
  3272.    
  3273.     color: var(--border);
  3274.     font: bold 1rem/30px var(--fontset-basic);
  3275.    
  3276. }
  3277. .user-profile .user-button .btn-profile-submit.fl-l {
  3278.     padding-left: 5px;
  3279.     border-radius: 15px 0 0 15px;
  3280.     margin-right: 3px;
  3281. }
  3282. .user-profile .user-button .btn-profile-submit.fl-r {
  3283.     padding-right: 5px;
  3284.     border-radius: 0 15px 15px 0;
  3285. }
  3286. .user-profile .user-button .btn-profile-submit:hover {
  3287.     background: var(--accent-dim) !important;
  3288.    
  3289.     color: var(--text-lnk-hov);
  3290. }
  3291. /* Buttons - Stats & History */
  3292. .user-profile .user-status.border-top ~ .user-status.border-top:not(.mt12) {
  3293. }
  3294. /* Buttons - Nav */
  3295. .user-status.border-top.mt12.mb12 {
  3296.     left: 242px;
  3297.    
  3298.     width: 642px;
  3299.     margin: 0 !important;
  3300. }
  3301. .user-status.border-top.mt12.mb12 li {
  3302. }
  3303. .user-status.border-top.mt12.mb12 li a {
  3304.     padding: 3px 9px 3px 5px;
  3305.     background: var(--content-dim);
  3306.     margin-right: 5px;
  3307.    
  3308.     flex-direction: row-reverse;
  3309.    
  3310.    
  3311. }
  3312. .user-status.border-top.mt12.mb12 li a:hover { background: var(--border); }
  3313. .user-status.border-top.mt12.mb12 li a span {
  3314. }
  3315. .user-profile .user-status li .user-status-data {
  3316.     margin-right: 3px;
  3317. }
  3318. /* Buttons - Nav - Sub-pages */
  3319. .page-common #horiznav_nav ul li .horiznav_active:hover {
  3320.     background: var(--border) !important;
  3321.     color: var(--text-lnk-hov) !important;
  3322. }
  3323. .head-config {
  3324.     background-color: transparent !important;
  3325. }
  3326. /* Affinity */
  3327. .user-profile .user-compatability-graph .pt12 {
  3328.     padding-top: 0 !important;
  3329. }
  3330. .user-profile .user-compatability-graph .pt12 ~ .pt12 {
  3331.     padding-top: 5px !important;
  3332. }
  3333. .user-profile .user-compatability-graph .bar-outer {
  3334.     height: 22px;
  3335.     background: var(--content-dim) !important;
  3336. }
  3337. .user-profile .user-compatability-graph .bar-outer div {
  3338.     height: 100% !important;
  3339.     border-color: var(--border) !important;
  3340. }
  3341. .user-profile .user-compatability-graph .bar-outer span {
  3342.     min-width: 1px;
  3343.     height: 100% !important;
  3344.     font: 1rem/22px var(--fontset-basic) !important;
  3345. }
  3346. .user-profile .user-compatability-graph .bar-outer-negative span {
  3347.     color: var(--text-dim) !important;
  3348. }
  3349. .user-profile .user-compatability-graph .bar-outer-positive span {
  3350.     color: var(--text-heading) !important;
  3351. }
  3352. .user-profile .user-compatability-graph .bar-outer .bar-inner { font-weight: bold !important; }
  3353. .user-profile .user-compatability-graph .bar-outer-negative .bar-inner { background: var(--dropped) !important; }
  3354. .user-profile .user-compatability-graph .bar-outer-positive .bar-inner { background: var(--completed) !important; }
  3355. /* Friends */
  3356. .user-profile .user-friends { padding: 0 10px 6px !important; }
  3357. .user-profile .user-friends .icon-friend {
  3358.    
  3359.     width: 37px;
  3360.     height: 60px;
  3361.     background-color: var(--border);
  3362.     border: 2px solid var(--border);
  3363.     margin: 0 5px 5px 0;
  3364.    
  3365.     color: var(--text-dim);
  3366.  
  3367.    
  3368.     transition: none;
  3369. }
  3370. .user-profile .user-friends .icon-friend[style*="questionmark_50.gif"] { background: var(--border) var(--img-missing) no-repeat center / cover !important; }
  3371. .user-profile .user-friends .icon-friend:nth-child(5n+1) { margin-left: -10px; }
  3372. .user-profile .user-friends .icon-friend:nth-child(5n) { margin-right: -10px; }
  3373. .user-profile .user-friends .icon-friend:hover {
  3374.     opacity: initial;
  3375. }
  3376. .user-profile .user-friends .icon-friend:after {
  3377.     content: attr(title);
  3378.     top: -2px;
  3379.    
  3380.     height: 64px;
  3381.     padding: 3px;
  3382.     background: var(--border);
  3383.     border-radius: 0 5px 5px 0;
  3384.    
  3385.    
  3386.     word-wrap: break-word;
  3387.     white-space: normal;
  3388.    
  3389.    
  3390. /*  */
  3391.     z-index: 5;
  3392. }
  3393. .user-profile .user-friends .icon-friend:hover:after {
  3394.     left: 39px;
  3395.    
  3396.    
  3397. }
  3398. /* Links & RSS */
  3399. .user-profile-sns { padding: 0 10px 6px; }
  3400. #myanimelist .user-profile-sns a:nth-last-child(n+2), #myanimelist .user-profile-sns span:nth-last-child(n+2) { margin-bottom: 6px !important; }
  3401. .user-profile-sns a { line-height: 1.5; }
  3402. .user-profile-sns span { display: inline-block; }
  3403. #myanimelist .user-profile-sns .icon-profile-sns { padding: 0 0 0 19px; }
  3404. #myanimelist .user-profile-sns .icon-profile-sns:after {
  3405.     top: 50%;
  3406.    
  3407.     background-image: var(--img-socials);
  3408.     margin-top: -7px;
  3409. }
  3410. /* Empty */
  3411. #myanimelist .user-profile-sns .icon-profile-sns.icon-url:after {
  3412.     background-size: 140px 28px;
  3413.     background-position: -126px -14px;
  3414. }
  3415. /* Custom Websites */
  3416. #myanimelist .user-profile-sns .icon-profile-sns { padding-bottom: 12px; }
  3417. #myanimelist .user-profile-sns .icon-profile-sns:before {
  3418.     content: attr(href);
  3419.     left: 19px;
  3420.    
  3421.    
  3422.     width: 186px;
  3423.    
  3424.     color: var(--text-dimmest);
  3425.    
  3426.     line-height: 12px;
  3427.    
  3428.     transition: text-indent 0.5s ease-out 0s;
  3429. }
  3430. #myanimelist .user-profile-sns .icon-profile-sns:hover:before {
  3431.     text-indent: -167px;
  3432.    
  3433.     transition: text-indent 2s ease-in-out 0.5s;
  3434. }
  3435. #myanimelist .user-profile-sns .icon-profile-sns[href*="myanimelist.net"]:after { background-position: -112px -14px; }
  3436. #myanimelist .user-profile-sns .icon-profile-sns[href*="anilist.co"]:after { background-position: -98px -14px; }
  3437. #myanimelist .user-profile-sns .icon-profile-sns[href*="kitsu.io"]:after { background-position: -84px -14px; }
  3438. #myanimelist .user-profile-sns .icon-profile-sns[href*="youtube.com"]:after { background-position: 0 -14px; }
  3439. #myanimelist .user-profile-sns .icon-profile-sns[href*="last.fm"]:after { background-position: -14px -14px; }
  3440. #myanimelist .user-profile-sns .icon-profile-sns[href*="github.com"]:after { background-position: -28px -14px; }
  3441. /* PROFILE @Split-Right */
  3442. /* General */
  3443. .page-common .content-container .container-right {
  3444.    
  3445.     width: 800px;
  3446.     padding: 33px 7px 0;
  3447.    
  3448. }
  3449. .page-common #content[style="padding:8px;"] > table > tbody > tr > td:nth-child(2) {
  3450.    
  3451.     padding: 33px 0 0 7px !important;
  3452.    
  3453.     flex: 0 1 100%;
  3454. }
  3455. @media (min-width: 1630px) {
  3456.     .page-common .content-container .container-right {
  3457.         border-right: 3px solid var(--border);
  3458.     }
  3459. }
  3460. .page-common .user-profile-about {
  3461.     padding-top: 0;
  3462.     margin-bottom: 20px;
  3463. }
  3464. /* Section Header */
  3465. .page-common .container-right .user-profile-about:before {
  3466.     content: "ABOUT";
  3467.    
  3468.    
  3469.     background: var(--border);
  3470.     margin-bottom: 10px;
  3471.    
  3472.     color: var(--text-heading) !important;
  3473. }
  3474. .js-truncate-outer {
  3475.     transition: all var(--time-long) ease-in-out;
  3476. }
  3477. .js-truncate-outer .btn-truncate {
  3478. /*  background-image: url(https://myanimelist.net/images/icon-pulldown2.png?v=160803001), linear-gradient(to bottom, #33343600, #333436); */
  3479.     background: transparent linear-gradient(to top, var(--content), rgba(var(--content-rgb), 0)) no-repeat 100% / contain !important;
  3480. }
  3481. .js-truncate-outer .btn-truncate:before {
  3482.     bottom: -25px;
  3483.    
  3484.     height: 50px;
  3485.     background: var(--content) url(https://myanimelist.net/images/icon-pulldown2.png?v=160803001) no-repeat center -36px / 17px 54px;
  3486.     box-shadow: 0 0 10px 5px var(--content);
  3487.     margin-left: -25px;
  3488. }
  3489. .js-truncate-outer .btn-truncate.open:before {
  3490.     background-position: center 0px;
  3491. }
  3492. .settings-cunstom-forum-title input:disabled {
  3493.     background: var(--content-dim);
  3494. }
  3495. /* STATS */
  3496. .profile .user-statistics .user-statistics-stats {
  3497.     margin: 3px 0 0 !important;
  3498. }
  3499. .profile .user-statistics .user-statistics-stats .stat-score {
  3500.     margin: 7px 0 !important;
  3501. }
  3502. /* .profile .user-statistics .user-statistics-stats .stats {
  3503.     width: 392px;
  3504. }
  3505. .profile .user-statistics .user-statistics-stats .updates {
  3506. } */
  3507. /* Left (stats) */
  3508. .profile .user-statistics .stats-graph .graph.watching,
  3509. .profile .user-statistics .stats-graph .graph.reading,
  3510. .profile .user-statistics .stats-status .circle.watching:after,
  3511. .profile .user-statistics .stats-status .circle.reading:after
  3512. /* Watching */ { background-color: var(--watching) }
  3513. .profile .user-statistics .stats-graph .graph.completed,
  3514. .profile .user-statistics .stats-status .circle.completed:after
  3515. /* Completed */ { background-color: var(--completed) }
  3516. .profile .user-statistics .stats-graph .graph.on_hold,
  3517. .profile .user-statistics .stats-status .circle.on_hold:after
  3518. /* On Hold */ { background-color: var(--onhold) }
  3519. .profile .user-statistics .stats-graph .graph.dropped,
  3520. .profile .user-statistics .stats-status .circle.dropped:after
  3521. /* Dropped */ { background-color: var(--dropped) }
  3522. .profile .user-statistics .stats-graph .graph.plan_to_watch,
  3523. .profile .user-statistics .stats-graph .graph.plan_to_read,
  3524. .profile .user-statistics .stats-status .circle.plan_to_watch:after,
  3525. .profile .user-statistics .stats-status .circle.plan_to_read:after
  3526. /* Planned */ { background-color: var(--planned) }
  3527. .page-common .user-statistics .stats-graph {
  3528.     border-radius: 9px;
  3529. }
  3530. .page-common .user-statistics .stats-graph .graph {
  3531.     background-clip: content-box;
  3532.     flex: 1 1 auto;
  3533. }
  3534. .page-common .user-statistics .stats-graph .graph:not([style*=" 0p"]) { min-width: 3px; }
  3535. .page-common .user-statistics .stats-graph .graph:not(:first-child) { padding-left: 1px; }
  3536. .page-common .user-statistics .stats-graph .graph:not(:last-child) { padding-right: 1px; }
  3537. .page-common .user-statistics .stats-graph .graph[style*=" 380p"],
  3538. .page-common .user-statistics .stats-graph .graph[style*=" 0p"] { padding: 0; }
  3539. .page-common .user-statistics .stats-graph:empty:before {
  3540.    
  3541.    
  3542.     background: var(--content-dim);
  3543. }
  3544. /* Right (updates) */
  3545. .page-common .statistics-updates {
  3546.     height: 64px;
  3547.     margin-bottom: 0 !important;
  3548.     clear: both;
  3549. }
  3550. .page-common .statistics-updates ~ .statistics-updates {
  3551.     padding-top: 10px;
  3552. }
  3553. .page-common .statistics-updates .image {
  3554.     border: 2px solid var(--border);
  3555. } .page-common .statistics-updates .image:hover {
  3556.    
  3557. }
  3558. .page-common .statistics-updates .image img {
  3559.     object-fit: cover;
  3560. }
  3561. .page-common .statistics-updates .data > a {
  3562.     max-width: 345px;
  3563.     padding: 2px 0 8px;
  3564.    
  3565.     text-overflow: ellipsis;
  3566. }
  3567. .page-common .statistics-updates .data .graph-content {
  3568.     padding-top: 0 !important;
  3569. }
  3570. .page-common .statistics-updates .data .graph {
  3571.     background: var(--content-dim);
  3572.     border: 2px solid var(--content-dim);
  3573.     border-radius: 7px;
  3574. }
  3575. .page-common .statistics-updates .data .graph .graph-inner {
  3576.     border-radius: 0 5px 5px 0;
  3577. }
  3578. .profile .statistics-updates .data .graph .graph-inner.watching, .profile .statistics-updates .data .graph .graph-inner.reading { background-color: var(--watching) }
  3579. .profile .statistics-updates .data .graph .graph-inner.completed { background-color: var(--completed) }
  3580. .profile .statistics-updates .data .graph .graph-inner.on_hold { background-color: var(--onhold) }
  3581. .profile .statistics-updates .data .graph .graph-inner.dropped { background-color: var(--dropped) }
  3582. .profile .statistics-updates .data .graph .graph-inner.plan_to_watch, .profile .statistics-updates .data .graph .graph-inner.plan_to_read { background-color: var(--planned) }
  3583. .page-common .statistics-updates .data .fn-grey2,
  3584. .page-common .statistics-updates .data .fn-grey2 span {
  3585.  
  3586. }
  3587. /* FAVOURITES DISPLAY */
  3588. .page-common .user-favorites-outer .user-favorites { margin-bottom: 0 !important; }
  3589. .page-common .user-favorites-outer .di-t { display: flex !important; }
  3590. .page-common .user-favorites-outer .di-tc { display: block !important; }
  3591. .user-favorites > .di-tc {
  3592.     width: 25%;
  3593.     flex: 1 1 auto;
  3594. }
  3595. .user-favorites > .di-tc + .di-tc { margin-left: 10px; }
  3596. /* Contents */
  3597. .page-common .user-favorites .favorites-list {
  3598.    
  3599. }
  3600. .page-common .user-favorites p.favorites-list {
  3601.    
  3602.     color: var(--text-dimmer);
  3603. }
  3604. .profile .user-favorites-outer { margin-top: -7px; }
  3605. .profile .user-favorites .favorites-list .list { margin: 0 !important; }
  3606. .profile .user-favorites .favorites-list .list + .list { margin-top: 7px !important; }
  3607. .profile .user-favorites .favorites-list .list .image {
  3608.     border: 2px solid var(--border);
  3609.    
  3610. }
  3611. .profile .user-favorites .favorites-list .list .image:hover {  }
  3612. .page-common .user-favorites .favorites-list .list .data {
  3613.     padding: 2px 0 2px 7px !important;
  3614. }
  3615. /* PROFILE @Split-Comments */
  3616. .page-common .user-comments {
  3617.     padding-top: 0 !important;
  3618.     margin-top: 10px !important;
  3619. }
  3620. @media (min-width: 1630px) {
  3621.     .page-common .user-comments {
  3622.    
  3623.         right: 5px;
  3624.         top: 44px;
  3625.        
  3626.         width: 521px; /*from right: 1069*/
  3627.         max-height: calc(100% - 54px);
  3628.         padding-right: 5px;
  3629.         margin-top: 0 !important;
  3630.        
  3631.         overflow-x: hidden;
  3632.         overflow-y: auto;
  3633.     }
  3634.    
  3635.     .page-common .user-comments .comment .codetext {
  3636.         max-width: 447px;
  3637.     }
  3638. }
  3639. .page-common .comment-form {
  3640.     margin: 10px 0 !important;
  3641.    
  3642. }
  3643. .page-common .comment-form .textarea {
  3644.     min-height: 4em;
  3645.     height: 85px;
  3646.     background: var(--content-dim);
  3647.     border-color: var(--border);
  3648. }
  3649. .page-common .comment-form .mt8 {
  3650.     margin-left: auto;
  3651.     width: 140px;
  3652. }
  3653. .page-common .comment-form .btn-form-submit {
  3654.     width: 140px;
  3655.     min-width: initial;
  3656.     height: 24px;
  3657.     background: var(--accent);
  3658.     border-radius: 12px;
  3659. }
  3660. /* Comments */
  3661. .page-common .user-comments .comment {
  3662.    
  3663.    
  3664.     align-items: flex-start;
  3665. }
  3666. .page-common .user-comments .comment ~ .comment { margin-top: 20px; }
  3667. .page-common .user-comments .comment:after { content: none; }
  3668. .page-common .user-comments .comment .image {
  3669.     width: 48px;
  3670.     background: var(--border);
  3671.     border: 2px solid var(--border);
  3672.     margin: 0;
  3673. }
  3674. .page-common .user-comments .comment .image img {
  3675.     width: 48px;
  3676. }
  3677. .page-common .user-comments .comment .text {
  3678.     padding-left: 7px;
  3679.     flex: 1 1 auto;
  3680. }
  3681. .page-common .user-comments .comment .text .pb8 {
  3682.     background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px);
  3683.     padding: 5px 10px 5px 7px !important;
  3684.     margin: 0 0 0 -7px !important;
  3685.    
  3686. }
  3687. .page-common .user-comments .comment .text .pb8 a {
  3688.     vertical-align: top;
  3689. }
  3690. .page-common .user-comments .comment .text .pb8 span:before {
  3691.     content: "| ";
  3692.     white-space: pre;
  3693. }
  3694. .page-common .user-comments .comment .text .pb8 span {
  3695.     float: none !important;
  3696.    
  3697.    
  3698.     vertical-align: top;
  3699. }
  3700. .page-common .user-comments .comment .text .postActions {
  3701.    
  3702.     margin: 0 !important;
  3703.    
  3704.     flex: 0 1 auto;
  3705.    
  3706.     text-align: right;
  3707. }
  3708. .page-common .user-comments .comment .text .postActions a {
  3709.     padding: 0 7px;
  3710.     margin: 0 !important;
  3711.     color: var(--text-dim);
  3712.    
  3713.    
  3714. }
  3715. .page-common .user-comments .comment .text .postActions a:hover { background: var(--border); }
  3716. .page-common .user-comments .comment .text .comment-text { padding: 3px 7px 0 0; }
  3717. /* Comment REply */
  3718. /* .page-common .user-comments .comment .text > [id^="com"]:not([id^="comtext"]) {
  3719.    
  3720. } */
  3721. .page-common .user-comments .comment .text textarea[id^="comreply"] {
  3722.     min-height: 100px;
  3723. }
  3724. .page-common .user-comments .comment .text [id^="reply"] .spaceit { text-align: right; }
  3725. /* Comment Content */
  3726. .page-common .user-comments .comment .text .comment-text .userimg {
  3727.     max-width: 100%;
  3728. }
  3729. /*==============================*\
  3730.   !PROFILE-SUB-PAGES
  3731. \*==============================*/
  3732. .boxlist-container * {
  3733.     background-color: transparent !important;
  3734. }
  3735. /*------------------------------*\
  3736.   PROFILE-SUB-PAGES @Friends
  3737. \*------------------------------*/
  3738. .majorPad {
  3739.     width: calc(100% + 10px);
  3740.     margin: -5px 0 0 -5px;
  3741.    
  3742.     flex-flow: row wrap;
  3743.     align-items: flex-start;
  3744. }
  3745. br[clear="all"] {  }
  3746. .majorPad .friendHolder {
  3747.     width: calc(33.3334% - 10px);
  3748.     height: 78px;
  3749.     background: var(--content-dim);
  3750.     margin: 5px;
  3751.    
  3752. }
  3753. @media (min-width: 1630px) {
  3754.     .majorPad .friendHolder {
  3755.         width: calc(20% - 10px);
  3756.     }
  3757. }
  3758. .majorPad .bgLightBlue {
  3759.     background: var(--content-dim);
  3760. }
  3761. .majorPad .bgLightBlue:after {
  3762.     left: 3px;
  3763.    
  3764.    
  3765.     width: 8px;
  3766.     height: 8px;
  3767.     background: var(--notif);
  3768.    
  3769.     animation: online 2.25s ease-in-out infinite 0s;
  3770. }
  3771. .majorPad .friendBlock {
  3772.     padding: 3px 5px 3px 57px;
  3773. }
  3774. /* Avatar */
  3775. .majorPad .friendIcon {
  3776. }
  3777. .majorPad .friendIcon img {
  3778.     object-fit: cover;
  3779. }
  3780. /* Last Online */
  3781. .majorPad .friendBlock div:nth-child(3) {
  3782.     color: var(--text-dim);
  3783. } .majorPad .friendBlock div:nth-child(3):before {
  3784.     content: "Online";
  3785. }
  3786. /* Friends Since */
  3787. .majorPad .friendBlock div:nth-child(4) {
  3788.     color: var(--text-dim);
  3789. }
  3790. .majorPad .mt12.mb12 {
  3791.     margin: 5px 5px 0 5px !important;
  3792.    
  3793.     flex: 1 1 100%;
  3794. }
  3795. }
  3796.  
  3797. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(comtocom|comments)\\.php.*"), regexp(".*/(www\\.|)myanimelist\\.net/clubs.php\\?id=.*&action=view&t=comments.*") {
  3798. /* COM-TO-COM & ALL-COMMENTS */
  3799. .page-common #contentWrapper { max-width: 1060px; }
  3800. .page-common #content { padding-top: 44px !important; }
  3801. #content > br {  }
  3802. /* Page Title */
  3803. #content > .borderClass:not(.spaceit) {
  3804.     height: 24px !important;
  3805.     padding: 0 0 7px;
  3806.     border-bottom: 2px solid var(--border);
  3807.     margin-bottom: 10px !important;
  3808. }
  3809. #content > .borderClass [style*="left"] {
  3810.     font-size: 1.1rem;
  3811.     line-height: 24px;
  3812.     text-indent: 5px;
  3813. }
  3814. /* Page Nav */
  3815. div[style="text-align: right;"]:not(:empty), div[style="float: right;"]:not(:empty), #content > .spaceit {
  3816.     padding: 4px 10px;
  3817.     background: var(--content-dim);
  3818.     border-radius: 12px;
  3819.     margin: 0 0 10px 0;
  3820.    
  3821.     float: right;
  3822.    
  3823. }
  3824. div[style="text-align: right;"] span[style="color:#888;"] { color: var(--text-dimmest) !important; }
  3825. /* Comments */
  3826. [id^="comBox"], [id^="comment"] {
  3827.     width: 1040px;
  3828.     margin: 0 auto 20px;
  3829.     clear: both;
  3830. }
  3831. [id^="comBox"] table { padding: 0 !important; }
  3832. [id^="comBox"] tr, [id^="comment"] tr {
  3833.     align-items: flex-start;
  3834. }
  3835. /* Avatar */
  3836. [id^="comBox"] td:first-child, [id^="comment"] td:first-child {
  3837.     width: 52px;
  3838.     padding: 0 7px 0 0;
  3839. }
  3840. .page-common div.picSurround img { width: 48px; }
  3841. /* - - - - - - - - - - - - - - -*\
  3842.   Header & Text
  3843. \*- - - - - - - - - - - - - - - */
  3844. [id^="comBox"] td:last-child, [id^="comment"] td:last-child {
  3845.    
  3846. }
  3847. .borderClass [id^="com"]:not([id^="comtext"]) {
  3848.     flex-flow: row wrap;
  3849. }
  3850. /* Name & Date */
  3851. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-of-type(1), [id^="comment"] td:last-child > div:nth-of-type(1) {
  3852.     background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px);
  3853.     padding: 5px 10px 5px 7px;
  3854.     margin: 0 0 0 -7px !important;
  3855.    
  3856.     flex: 1 1 auto;
  3857.    
  3858. }
  3859. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-of-type(1):not(.dark_text) {
  3860.     width: 300px;
  3861. }
  3862. [id^="comment"] td:last-child > div:nth-of-type(1) {
  3863.     width: calc(100% - 10px);
  3864.     margin-bottom: 3px !important;
  3865. }
  3866. .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; }
  3867. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(1) span, [id^="comment"] td:last-child > div:nth-of-type(1) small span {
  3868.     vertical-align: top;
  3869. }
  3870. /* Buttons */
  3871. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) {
  3872.     background: var(--content-dim);
  3873.     margin: 0 !important;
  3874.    
  3875.    
  3876.     text-align: right;
  3877. }
  3878. [id^="comment"] [style="margin-top: 10px;"] {
  3879.    
  3880.     margin: 0 !important;
  3881. }
  3882. .borderClass [id^="com"]:not([id^="comtext"]) > .dark_text ~ [style="margin-top: 10px;"] {
  3883.     width: 300px;
  3884. }
  3885. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) small { font-size: 0; }
  3886. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) a, [id^="comment"] [style="margin-top: 10px;"] a {
  3887.     padding: 0 7px;
  3888.     margin: 0 !important;
  3889.     color: var(--text-dim);
  3890.    
  3891.    
  3892. }
  3893. .borderClass [id^="com"]:not([id^="comtext"]) > div:nth-child(3) a:hover, [id^="comment"] [style="margin-top: 10px;"] a:hover { background: var(--border); }
  3894. /* Text */
  3895. .borderClass [id^="com"] [id^="comtext"] {
  3896.     padding: 3px 7px 0 0;
  3897.     margin: 0;
  3898.    
  3899.     order: 3;
  3900. }
  3901. /* Replies */
  3902. .borderClass [id^="com"]:not([id^="comtext"]) div[id^="reply"]:nth-child(4) {
  3903.     padding: 7px 0 0;
  3904.     margin: 0;
  3905.    
  3906. }
  3907. .borderClass [id^="com"]:not([id^="comtext"]) textarea {
  3908.     background: var(--content-dim);
  3909.    
  3910.     resize: vertical;
  3911.    
  3912.     color: var(--text-dim);
  3913. }
  3914. .borderClass [id^="com"]:not([id^="comtext"]) [id^="com"]:not([id^="comtext"]) {
  3915.     padding-left: 10px;
  3916.    
  3917. }
  3918. /* [id^="comBox"].bgNone tr {
  3919.     flex-direction: row-reverse;
  3920. }
  3921. [id^="comBox"].bgNone td:first-child {
  3922.     padding: 3px 3px 0 7px;
  3923. }
  3924. .bgNone .borderClass > [id^="com"] div:nth-child(1) {
  3925.     background: linear-gradient(to left, var(--border) 0, var(--content-dim) 150px);
  3926.     margin: 0 -10px 0 0 !important;
  3927.    
  3928.     text-align: right;
  3929. }
  3930. .bgNone .borderClass > [id^="com"] div:nth-child(3) {
  3931. } */
  3932. }
  3933.  
  3934. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/forum.*") {
  3935. /* FORUM-BASE */
  3936. .forum .content-container {
  3937. }
  3938. /* - - - - - - - - - - - - - - -*\
  3939.   Buttons
  3940. \*- - - - - - - - - - - - - - - */
  3941. #myanimelist .btn-rect-grey1 {
  3942.     height: 24px;
  3943.     padding: 0 10px !important;
  3944.     background: var(--content-dim);
  3945.     border-radius: 12px;
  3946.     margin: 0 !important;
  3947.    
  3948.     color: var(--text-lnk);
  3949.     font: 1rem/24px var(--fontset-basic);
  3950.    
  3951. }
  3952. #myanimelist .btn-rect-grey1 + .btn-rect-grey1 { margin-left: 5px !important; }
  3953. #myanimelist .btn-rect-grey1:hover {
  3954.     background: var(--border);
  3955.    
  3956.     color: var(--text-lnk-hov)
  3957. }
  3958. /* - - - - - - - - - - - - - - -*\
  3959.   Add-Reply
  3960. \*- - - - - - - - - - - - - - - */
  3961. .page-forum .bgbdrContainer[style="width: 500px; margin: 10px auto;"] {
  3962.     width: 888px !important;
  3963.     border: 10px solid var(--border);
  3964.    
  3965.     line-height: 1.5em;
  3966. }
  3967. #dialog {
  3968.     border-color: var(--border);
  3969. }
  3970. #dialog td {
  3971. }
  3972. #dialog > tbody > tr > td > form > div:nth-child(3) > textarea {
  3973.     width: 888px !important;
  3974. }
  3975. /*------------------------------*\
  3976.   FORUM-BASE @Split-Left
  3977. \*------------------------------*/
  3978. .forum .content-container .container-left {
  3979.     padding: 0 7px 0 0;
  3980.     border-right: 3px solid var(--border);
  3981.    
  3982.     flex: 1 1 auto;
  3983. }
  3984. .forum .forum-board-list {
  3985.     padding-bottom: 20px !important;
  3986. }
  3987. .forum .forum-board {
  3988.     border-width: 0 2px 2px 2px;
  3989.     border-color: var(--border);
  3990.    
  3991.    
  3992.     color: var(--text);
  3993. }
  3994. .forum .forum-board:nth-of-type(even) {
  3995. }
  3996. .forum .forum-board .board {
  3997.    
  3998.     width: 67%;
  3999.     padding: 10px 0 10px 10px;
  4000. }
  4001. .forum .forum-board .fa {
  4002.     color: var(--icon) !important;
  4003. }
  4004. .forum .forum-board .forum-board-title, .forum .forum-board .fw-b {
  4005.     font-size: 1.1rem !important;
  4006. }
  4007. .forum .forum-board .forum-board-description {
  4008.     color: var(--text-dim);
  4009. }
  4010. .forum .forum-board .topics {
  4011.     width: 33%;
  4012.     background: var(--content-dim);
  4013. }
  4014. .forum .forum-board .topics li {
  4015. }
  4016. .forum .forum-board .topics .user_thumb {
  4017. }
  4018. .forum .forum-board .topics .topic-title {
  4019.    
  4020.     margin-left: 0;
  4021.     flex: 1 1 auto;
  4022. }
  4023. /* Mark All Read */
  4024. .forum-board-list + .clearfix {
  4025.     padding-bottom: 20px !important;
  4026.     margin: 0 !important;
  4027. }
  4028. /* Clear Floats */
  4029. #content > .forum_border_around:before {
  4030.    
  4031.     clear: both;
  4032. }
  4033. /* - - - - - - - - - - - - - - -*\
  4034.   Forum Mods
  4035. \*- - - - - - - - - - - - - - - */
  4036. #myanimelist .forum-mods-list, #myanimelist .forum-mods-container { width: 100%; }
  4037. #myanimelist .forum-mods {
  4038.     margin: 10px 0 0;
  4039.    
  4040. }
  4041. #myanimelist .forum-mods:after { content: none; }
  4042. #myanimelist .link-forum-mods {
  4043.    
  4044.     width: 54px;
  4045.     max-width: 98px;
  4046.     margin: 0 5px;
  4047.    
  4048.    
  4049. }
  4050. #myanimelist .link-forum-mods:hover {
  4051.     background: var(--content-dim);
  4052.     border-radius: 2px;
  4053. }
  4054. #myanimelist .link-forum-mods a {
  4055.    
  4056.     padding: 7px;
  4057. }
  4058. /* Name */
  4059. #myanimelist .link-forum-mods .name {
  4060.    
  4061. }
  4062. #myanimelist .link-forum-mods.offline .name { color: var(--text-dimmer); }
  4063. #myanimelist .link-forum-mods.offline:hover .name { color: var(--text-dim); }
  4064. /* Image */
  4065. #myanimelist .link-forum-mods .thumb {
  4066.     height: 84px;
  4067.     border: 2px solid var(--border);
  4068. }
  4069. .forum .forum-mods .link-forum-mods.offline .thumb { opacity: 0.3 }
  4070. .forum .forum-mods .link-forum-mods:hover .thumb { opacity: 0.7 }
  4071. /*------------------------------*\
  4072.   FORUM-BASE @Split-Right
  4073. \*------------------------------*/
  4074. #myanimelist .container-right {
  4075.     min-width: 300px;
  4076.     max-width: 500px;
  4077.     padding-left: 7px;
  4078.    
  4079.     flex: 1 1 18%;
  4080. }
  4081. /* Buttons */
  4082. #myanimelist .container-right div.mt8.mb24 {
  4083.     margin: 0 0 10px !important;
  4084.    
  4085. }
  4086. /* Search */
  4087. #myanimelist .container-right div.mb20 { margin: 0 0 10px !important; }
  4088. #myanimelist .container-right div.mb20 form { display: flex; }
  4089. #myanimelist .forum-search-side .forum-search-select {
  4090.     height: 24px;
  4091.     padding: 0 13px 0 8px;
  4092.     background: var(--content-dim) var(--img-icon-arrow-dn) no-repeat 78px 9px / auto;
  4093.     border-width: 1px 0 1px 1px;
  4094.     border-radius: 12px 0 0 12px;
  4095.    
  4096.     color: var(--text-dim);
  4097.     font: 0.9rem/22px var(--fontset-basic);
  4098. }
  4099. #myanimelist .forum-search-side .forum-search-select:focus {
  4100.     background-color: var(--border);
  4101.     color: var(--text);
  4102. }
  4103. #myanimelist .forum-search-side .forum-search-input-text {
  4104.     height: 24px;
  4105.     background: var(--content-dim);
  4106.     border-width: 1px 0;
  4107.     flex: 1 1 auto;
  4108.     border-color: #fff;
  4109.     color: var(--text-dim);
  4110.     font: 0.9rem/22px var(--fontset-basic);
  4111.     text-indent: 5px;
  4112. }
  4113. #myanimelist .forum-search-side .forum-search-input-text:focus { color: var(--text); }
  4114. #myanimelist .forum-search-side .forum-search-input-submit {
  4115.     height: 24px;
  4116.     background: var(--content-dim);
  4117.     border-width: 1px 1px 1px 0;
  4118.     border-radius: 0 12px 12px 0;
  4119.    
  4120.     color: var(--text);
  4121.     font: 0.9rem/22px "Font Awesome 6";
  4122. }
  4123. #myanimelist .forum-search-side .forum-search-input-submit.notActive {  }
  4124. #myanimelist .forum-search-side .forum-search-input-submit:not(.notActive):hover { background: var(--border); }
  4125. #myanimelist .forum-search-side .forum-search-input-submit.notActive { color: var(--text-dim); }
  4126. /* - - - - - - - - - - - - - - -*\
  4127.   Sidebar Items
  4128. \*- - - - - - - - - - - - - - - */
  4129. #myanimelist .forum-side-block .forum-side-list .forum-post {
  4130.     padding: 7px 0;
  4131.     border-color: var(--border);
  4132. }
  4133. #myanimelist .forum-side-block .forum-side-list .forum-post .information .comment {
  4134.     color: var(--text-dimmest);
  4135. }
  4136. #myanimelist .forum-side-block .forum-side-list .forum-post .thumbs {
  4137.     background: var(--border);
  4138.     border: 2px solid var(--border);
  4139. }
  4140. /*------------------------------*\
  4141.   FORUM-BASE @Generic
  4142. \*------------------------------*/
  4143. /* Forum Header / Thread Title */
  4144. #content > div:nth-of-type(1) { margin-top: 0 !important; }
  4145. #content .fl-l.mt8.cl-l {
  4146.    
  4147.     min-height: 19px;
  4148.     margin: 0 !important;
  4149. }
  4150. #content .fl-l.mt8.cl-l .forum_locheader {
  4151.     max-width: 640px;
  4152.    
  4153.     color: var(--text-heading);
  4154.     font-size: 1.4rem;
  4155.     line-height: 19px;
  4156. }
  4157. #content .fl-l.mt8.cl-l span {
  4158.     padding: 3px 0;
  4159.    
  4160.     color: var(--text);
  4161. }
  4162. /* Buttons */
  4163. #content > div.borderClass,
  4164. #content > div.mt4.mb4.pl0.pb0.pt4.pb4 {
  4165.     height: 24px;
  4166.     padding: 10px 0 0 0 !important;
  4167.     margin: 0 !important;
  4168.    
  4169.     clear: both;
  4170.    
  4171.     line-height: 24px;
  4172. }
  4173. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] {
  4174.     height: 24px !important;
  4175.     margin: 0 0 10px !important;
  4176. }
  4177. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] {
  4178.     margin: 0 !important;
  4179.    
  4180.     line-height: 24px;
  4181. }
  4182. #content > div.borderClass > .fl-l.pb8 { padding: 0 !important; }
  4183. #content > div.borderClass .fl-l span { margin: 0 !important; }
  4184. #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > span {
  4185.     vertical-align: top;
  4186. }
  4187. #content > div.borderClass .fl-l a,
  4188. #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,
  4189. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] a {
  4190.     height: 24px;
  4191.     background-color: var(--accent);
  4192.     border-radius: 12px;
  4193.     margin-right: 5px !important;
  4194.    
  4195.     color: var(--border);
  4196.     line-height: 24px;
  4197.     text-decoration: none;
  4198.     vertical-align: top;
  4199.    
  4200. }
  4201. #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > a span { line-height: inherit; }
  4202. #content > div.mt4.mb4.pl0.pb0.pt4.pb4 > a i {
  4203.     vertical-align: inherit;
  4204.     line-height: inherit;
  4205. }
  4206. #content > div.borderClass .fl-l a:hover,
  4207. #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,
  4208. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] a:hover {
  4209.     background: var(--accent-dim);
  4210.    
  4211.     color: var(--text-lnk-hov) !important;
  4212. }
  4213. #content > div.mt4.mb4.pl0.pb0.pt4.pb4 [style*="inline-flex"] form {
  4214.     margin: 0;
  4215. }
  4216. /* Page Navigation */
  4217. /* Board Top */ #content > div.borderClass .fl-r,
  4218. /* Board Bottom */ #content > .spaceit:last-child:not(:empty),
  4219. /* Thread Top */ #content > div.mt4.mb4.pl0.pb0.pt4.pb4 .fl-r:not(:empty),
  4220. /* Thread Bottom */ #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] [style="float: right;"]:not(:empty),
  4221. /* Watched Top */ #content > div[style="text-align: center;"] [style="float: right;"]:not(:empty),
  4222. /* Ignored Top */ #content > div[style="margin: 4px 0; text-align: center;"] [style="float: right;"]:not(:empty) {
  4223.    
  4224.     padding: 4px 10px;
  4225.     background: var(--content-dim);
  4226.     border-radius: 12px;
  4227.    
  4228. }
  4229. /* Board Bottom */ #content > .spaceit:last-child {
  4230.     margin: 10px 0;
  4231.     float: right;
  4232. }
  4233. /* Board Bottom */ #content > .spaceit:last-child .bgColor1 { padding: 0 !important; }
  4234. /* Board Top */ #content > div.borderClass .fl-r span { line-height: inherit; }
  4235. /* Forum Board Sort */
  4236. .page-common .forum-topic-sort {
  4237.     padding: 4px 10px !important;
  4238.     background: var(--content-dim);
  4239.     border-radius: 12px;
  4240.     margin-right: 5px;
  4241.    
  4242.     float: right;
  4243.     clear: none;
  4244.    
  4245.     color: var(--text);
  4246. }
  4247. .page-common .forum-topic-sort p { padding: 0 !important; }
  4248. .page-common .forum-topic-sort a { color: var(--text-lnk); }
  4249. .page-common .forum-topic-sort a:hover { color: var(--text-lnk-hov); }
  4250. /* Watched Topics/Ignored Topics Blurb */
  4251. #content > div[style="text-align: center;"], #content > div[style="margin: 4px 0; text-align: center;"] {
  4252.     padding: 10px 0 0;
  4253.     margin: 0 !important;
  4254.    
  4255.     line-height: 24px;
  4256. }
  4257. /* - - - - - - - - - - - - - - -*\
  4258.   Forum Board
  4259. \*- - - - - - - - - - - - - - - */
  4260. #forumTopics {
  4261.     clear: both;
  4262.     padding-top: 10px;
  4263. }
  4264. #forumTopics [class^="forum_boardrow"] {
  4265.     padding: 7px;
  4266. }
  4267. /* Watched & Ignored Topic Fixes */
  4268. td[colspan="2"] + td[width="125"] { width: 250px; }
  4269. /* - - - - - - - - - - - - - - -*\
  4270.   Forum Search
  4271. \*- - - - - - - - - - - - - - - */
  4272. #content .content-container .mt4 { margin: 0 !important; }
  4273. #content .content-container .mt4 + form {
  4274. }
  4275. #content .content-container .mt4 + form .normal_header {
  4276.     border-bottom: 2px solid var(--border);
  4277.     margin: 0 -10px 10px;
  4278. }
  4279. #content .content-container .mt4 + form table input, #content .content-container .mt4 + form table select {
  4280.     height: 22px;
  4281. }
  4282. }
  4283.  
  4284. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/forum/\\?topicid=.*") {
  4285. /* FORUM-THREADS */
  4286. .page-forum #content {
  4287.     width: 1040px;
  4288.     min-height: 18px;
  4289.     margin: 0 auto 10px;
  4290. }
  4291. .page-forum #contentWrapper {
  4292.     padding: 70px 0 0;
  4293. }
  4294. /* @media (min-width: 1630px) {
  4295.     .page-forum #contentWrapper {
  4296.         padding-left: 270px;
  4297.         padding-right: 270px;
  4298.     }
  4299. } */
  4300. /*------------------------------*\
  4301.   FORUM-THREADS @Buttons
  4302. \*------------------------------*/
  4303. #content > div:first-child {
  4304. /*  height: 25px;
  4305.     max-width: 80%;
  4306.    
  4307.     float: left; */
  4308.    
  4309.     max-width: 900px;
  4310.    
  4311.     flex-flow: column nowrap;
  4312.     float: left;
  4313. }
  4314. /* Thread Title */
  4315. #content > div:nth-of-type(1) .fl-l.mt8.cl-l {
  4316.     background: var(--content-dim);
  4317.     border-left: 3px solid var(--accent);
  4318. }
  4319. #content > div:nth-of-type(1) .fl-l.mt8.cl-l .forum_locheader {
  4320.     max-width: 760px;
  4321.    
  4322.     font-size: 1.2rem;
  4323. }
  4324. div.forum-topic-message-wrapper > table > tbody > tr > td.forum_boardrow2 > div > div > a:nth-child(2) {
  4325.     filter: invert(100%);
  4326.     margin-top: 10px !important;
  4327. }
  4328. #autocomplete-input {
  4329.     width: 40% !important;
  4330.     margin-top: 0px !important;
  4331. }
  4332. #autocomplete-list {
  4333.     margin-top: 0px !important;
  4334. }
  4335. /* Forum Browse Buttons */
  4336. #content > div:first-child .fl-r {
  4337. /*  float: none !important;
  4338.    
  4339.     text-align: left !important; */
  4340. }
  4341. /* Share Buttons */
  4342. #content > div:nth-of-type(2) {
  4343.     height: 19px;
  4344.     padding: 7px 10px !important;
  4345.     background: var(--content-dim);
  4346.     border-radius: 16.5px;
  4347.    
  4348.     float: right;
  4349. }
  4350. #content .icon-block-small {
  4351.     float: right;
  4352. }
  4353. #content .sprite-icon-social-small {
  4354.     width: 19px;
  4355.     height: 19px;
  4356.     background-image: var(--img-socials);
  4357.     background-size: 190px 38px;
  4358.     margin: 0;
  4359.    
  4360. }
  4361. #content a ~ .sprite-icon-social-small {
  4362.     margin-left: 6px;
  4363. }
  4364. #content .sprite-icon-social-small.icon-facebook-small { background-position: 0 0; }
  4365. #content .sprite-icon-social-small.icon-twitter-small { background-position: -19px 0; }
  4366. #content .sprite-icon-social-small.icon-google-small { background-position: -38px 0; }
  4367. #content .sprite-icon-social-small.icon-reddit-small { background-position: -57px 0; }
  4368. #content .sprite-icon-social-small.icon-tumblr-small { background-position: -76px 0; }
  4369. /* Thread Poll */
  4370. #content > .mt4.mb4.pl0.pb0.pt4.pb4 + .forum_category {
  4371.     margin-top: 10px;
  4372. }
  4373. form .forum_category, #content + .forum_category { margin: 15px 10px 0; }
  4374. .page-forum .forum_category + .forum_boardrow1,
  4375. .page-forum form .forum_boardrow1 {
  4376.     background: var(--content);
  4377.     padding: 10px 10px 20px;
  4378. }
  4379. .page-forum .forum_category + .forum_boardrow1 div[style="text-align: right;"],
  4380. .page-forum form .forum_boardrow1 div[style="text-align: right;"] {
  4381.     float: right;
  4382.     margin-top: 2px;
  4383. }
  4384. .page-forum .forum_category + .forum_boardrow1 div[style="text-align: right;"] a {
  4385.     height: 24px;
  4386.     background: var(--content-dim);
  4387.     border-radius: 12px;
  4388.     margin-left: 3px;
  4389.    
  4390.     color: var(--text-lnk);
  4391.     line-height: 24px;
  4392.     text-decoration: none;
  4393.    
  4394. }
  4395. .page-forum .forum_category + .forum_boardrow1 div[style="text-align: right;"] a:hover {
  4396.     background: var(--accent-dim);
  4397.    
  4398.     color: var(--text-lnk-hov);
  4399. }
  4400. .page-forum .forum_category + .forum_boardrow1 td[align="left"] { width: 100px; }
  4401. .page-forum .forum_category + .forum_boardrow1 td[width="30%"] { width: auto; }
  4402. .page-forum .forum_category + .forum_boardrow1 td[width="30"] { width: 50px; }
  4403. .page-forum .forum_category + .forum_boardrow1 td[width="40"] { width: 50px; }
  4404. .page-forum .vote_container {
  4405.     background: var(--accent);
  4406.     border-radius: 2px;
  4407. }
  4408. form + br {  }
  4409. /* Thread Locked */
  4410. /* Top Icon */
  4411. #content > div:first-child .forum_locheader.icon-forum-locked { padding: 0 !important; }
  4412. #content > div:first-child .forum_locheader.icon-forum-locked:after,
  4413. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] .icon-forum-locked:after{ content: none; }
  4414. #content > div:first-child .forum_locheader.icon-forum-locked:before {
  4415.     content: "\f023";
  4416.    
  4417.     margin-right: 5px;
  4418.    
  4419.     font: normal 1.2rem/19px "Font Awesome 6";
  4420. }
  4421. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] .icon-forum-locked:before {
  4422.     content: "\f023";
  4423.    
  4424.     font: normal 1.2rem/24px "Font Awesome 6";
  4425. }
  4426. /* Bottom Icon */
  4427. #contentWrapper > div[style="height: 15px; margin: 5px 0px;"] div[style="margin: 3px 0px;"] .icon-forum-locked {
  4428.     width: 24px;
  4429.     height: 24px;
  4430.    
  4431.     vertical-align: top;
  4432. }
  4433. /* Notice */
  4434. #content > div[style^="margin: 7px 0;"] {
  4435.     padding-top: 10px;
  4436.     margin: 0 !important;
  4437.     clear: both;
  4438.    
  4439.     font-size: 1.1rem;
  4440.  
  4441. }
  4442. /*------------------------------*\
  4443.   FORUM-THREADS @Post-Layout
  4444. \*------------------------------*/
  4445. /* Space between posts */
  4446. .page-forum .forum_boardrowspacer {
  4447. }
  4448. /* Post Basis */
  4449. .forum_border_around { margin: 0 10px; }
  4450. /* Header */
  4451. .page-forum #myanimelist .forum_category {
  4452. /*  background: #4f74c8; */
  4453. /*  background: var(--accent);
  4454.     background: linear-gradient(45deg, var(--accent), var(--accent-dim) 85%); */
  4455. /*  background: transparent linear-gradient(45deg, var(--border), var(--content-dim) 85%, var(--content-dim) 92%, var(--accent) 100%); */
  4456.    
  4457.    
  4458.     background: var(--border);
  4459.     background: transparent linear-gradient(45deg, var(--border) 118px, var(--content-dim) 85%);
  4460.    
  4461.    
  4462. }
  4463. .page-common #myanimelist .forum-topic-message-ignored-user.hide-message .forum_category {  }
  4464. .page-common #myanimelist .forum-topic-message-ignored-user .forum_category:hover { opacity: 0.5; }
  4465. .page-common #myanimelist .forum-topic-message-ignored-user.hide-message .forum_category:hover {  }
  4466. .page-forum .forum_category > div {
  4467.     height: 12px;
  4468.     margin: 0 !important;
  4469. }
  4470. .page-forum .forum_category .date {
  4471.     margin-right: 5px;
  4472.     float: right;
  4473.    
  4474.     color: var(--text-dim);
  4475. }
  4476. .page-forum .forum_category [style="margin: 5px 0px;"] > div[style*="float: right"],
  4477. .page-forum .forum_category .postnum {
  4478.     color: var(--text-dim) !important;
  4479. }
  4480. .page-common .forum-topic-message-ignored-user .forum_category .date:after {
  4481.     content: "IGNORED";
  4482.     color: var(--text);
  4483. }
  4484. /* Containers Etc */
  4485. .page-forum [id^=forumMsg] tr { display: flex; }
  4486. .page-forum [id^=forumMsg] [class^="forum_boardrow"] {  }
  4487. /* Containers Etc -  Left Bar */
  4488. [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) {
  4489.    
  4490.     padding: 87px 7px 7px;
  4491.     background: var(--content-dim);
  4492.     border-width: 0 2px 2px 2px !important;
  4493.    
  4494. /*  align-self: flex-start; */
  4495.    
  4496. }
  4497. /* Containers Etc -  Right Bar */
  4498. [id^=forumMsg] [class^="forum_boardrow"]:nth-child(2) {
  4499.     padding: 7px 10px 7px;
  4500.    
  4501.     flex: 1 1 auto;
  4502. }
  4503. [id^=forumMsg] [class^="forum_boardrow"] > .word-break {
  4504.     width: 908px;
  4505.     min-height: 100%;
  4506.     flex-flow: column nowrap;
  4507. }
  4508. .page-forum [id^=forumMsg] [class^="forum_boardrow"] [id^="message"].clearfix { flex: 1 1 auto; }
  4509. /* Signature */
  4510. .page-forum .sig {
  4511.     padding: 7px 7px 0 7px;
  4512.     margin: 0 -7px;
  4513. }
  4514. /* Quick Reply */
  4515. #quickReply {
  4516.     width: 1040px;
  4517. }
  4518. #quickReply textarea {
  4519.     max-width: 100%;
  4520.     padding: 5px;
  4521.    
  4522.     resize: vertical;
  4523. }
  4524. /* - - - - - - - - - - - - - - -*\
  4525.   Post Actions
  4526. \*- - - - - - - - - - - - - - - */
  4527. .page-forum .postActions {
  4528.    
  4529.     margin: 3px 0 !important;
  4530.    
  4531.     text-align: center !important;
  4532. }
  4533. .page-forum .postActions:before {
  4534.     left: -5px;
  4535.     top: 9px;
  4536.    
  4537.     padding: 0 5px;
  4538.     height: 2px;
  4539.     background: var(--border);
  4540. }
  4541. .page-forum .postActions div {
  4542.    
  4543.     padding: 0 15px;
  4544.     background: var(--content);
  4545.    
  4546. }
  4547. .page-forum .postActions a {
  4548.    
  4549.     background: var(--content-dim);
  4550.    
  4551.     color: var(--text-lnk);
  4552.    
  4553. }
  4554. .page-forum .postActions a ~ a { margin-left: 3px; }
  4555. .page-forum .postActions a:hover {
  4556.     background: var(--border);
  4557.    
  4558.     color: var(--text-lnk-hov);
  4559. }
  4560. /* FORUM-THREADS @SIDEBAR */
  4561. [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) > div {
  4562.     position: static /*event fix*/;
  4563.     flex-flow: column nowrap;
  4564. }
  4565. [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) > div > br:nth-last-of-type(n+3) {  }
  4566. /* [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) > div > span { margin-bottom: -1.5em; } */
  4567. /* Name */
  4568. .page-forum [id^=messageuser] {
  4569.     left: 103px;
  4570.     top: -30px;
  4571.    
  4572.     padding: 0 16px;
  4573.    
  4574. }
  4575. .page-forum [id^=messageuser] a {
  4576.     font: 1.1rem/30px var(--fontset-basic);
  4577. }
  4578. /* Avatar */
  4579. [id^=forumMsg] [class^="forum_boardrow"] .forum-icon {
  4580.     z-index: 3;
  4581.    
  4582.     min-height: 100px;
  4583.     background: var(--border);
  4584.     border: 6px solid var(--border);
  4585.     margin: -117px 0 5px -9px;
  4586.    
  4587.     order: -1;
  4588. }
  4589. [id^=forumMsg] [class^="forum_boardrow"] .forum-icon img {
  4590.     margin: 0;
  4591.    
  4592.     align-self: center;
  4593. }
  4594. /* Halloween Fixes */
  4595. [id^=forumMsg] [class^="forum_boardrow"] .forum-icon {
  4596.     display: flex !important;
  4597.     margin: -117px 0 5px -9px !important;
  4598. }
  4599. .forum-icon::after { content: none !important }
  4600. /* Empty Avatar */
  4601. .forum_border_around:not(.forum-topic-message-ignored-user) .forum_category:before {
  4602.    
  4603.     height: 100px;
  4604.     background: var(--content-dimmest) var(--img-missing) no-repeat center / cover;
  4605.     border: 6px solid var(--border);
  4606. }
  4607. /* Custom User Titles/Banners */
  4608. .icon-team-title.forum {
  4609.     margin: 0 auto 0.5em;
  4610.    
  4611. }
  4612. .page-forum .custom-forum-title {
  4613.    
  4614.     background: var(--border);
  4615.     border-radius: 2px;
  4616.     margin: 0 auto 0.5em;
  4617.    
  4618. }
  4619. /* Online Status */
  4620. @keyframes online {
  4621.     0%, 100% {
  4622.         opacity: 0.65;
  4623.        
  4624.         box-shadow:
  4625.             0 0 1.5px 0 var(--content),
  4626.             0 0 3px 0 var(--notif);
  4627.     }
  4628.     50% {
  4629.        
  4630.        
  4631.         box-shadow:
  4632.             0 0 1.5px 2px var(--content),
  4633.             0 0 3px 2px var(--notif);
  4634.     }
  4635. }
  4636. [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) span[style*="green"] {
  4637.     color: var(--notif) !important;
  4638. }
  4639. [id^=forumMsg] [class^="forum_boardrow"]:nth-child(1) span[style*="green"]:after {
  4640.    
  4641.     width: 8px;
  4642.     height: 8px;
  4643.     background: var(--notif);
  4644.     margin-left: 3px;
  4645.    
  4646.     animation: online 2.25s ease-in-out infinite 0s;
  4647. }
  4648. /*------------------------------*\
  4649.   FORUM-THREADS @Post-Content
  4650. \*------------------------------*/
  4651. .page-forum .forum_topic_message .forum_boardrow1 img {
  4652.    
  4653.     max-width: 100%;
  4654.    
  4655. }
  4656. .forum-topic-message-wrapper > table > tbody > tr > td.forum_boardrow2 > div > a > strong {
  4657.     color: var(--accent) !important;
  4658. }
  4659. .page-common table.forum-topics tr td:nth-child(2n+1) {
  4660.     background-color: transparent;
  4661. }
  4662. }
  4663.  
  4664. @-moz-document regexp("DISABLED.*/(www\\.|)myanimelist\\.net/ownlist/(anime|manga)/.*") {
  4665. /* TEMP - NEEDS WORK */
  4666. /* specific selector prefix:
  4667. [stylus-iframe="true"] [class$="_update"] */
  4668. .seasonal-anime-list .seasonal-anime .properties .property {
  4669.     background-color: var(--page) !important;
  4670.     overflow-wrap: break-word;
  4671.     padding: 2px;
  4672. }
  4673. #dialog {
  4674.    
  4675. /*   */
  4676. }
  4677. #dialog td:only-child {
  4678. }
  4679. #top-submit-buttons {
  4680.     top: 43px;
  4681.    
  4682.     margin: 0 !important;
  4683. }
  4684. #top-submit-buttons .inputButton {
  4685.    
  4686.     width: 65px;
  4687.     margin: 0 0 5px 0 !important;
  4688. }
  4689. .separator {  }
  4690. #advanced-button .toggle-button {
  4691.    
  4692.     color: #fff !important;
  4693. }
  4694. /* Basic Opt */
  4695. form[name^="add_"] tbody {
  4696. }
  4697. form[name^="add_"] tr, form[name^="add_"] td {
  4698. }
  4699. form table:not(.advanced) tr:nth-child(1) td:first-child,
  4700. form table:not(.advanced) tr:nth-child(2) td:first-child,
  4701. form table:not(.advanced) tr:nth-child(3) td:first-child,
  4702. form table:not(.advanced) tr:nth-child(4) td:first-child
  4703. {  }
  4704. form table:not(.advanced) tr:nth-child(1) {
  4705. }
  4706. form table:not(.advanced) tr:nth-child(1) td:last-child {
  4707.    
  4708.    
  4709. }
  4710. a[href*="ajaxtb.php"] {
  4711. }
  4712. form table:not(.advanced) tr:nth-child(4) {
  4713.    
  4714. }
  4715. form table:not(.advanced) tr:nth-child(5) td:first-child, form table:not(.advanced) tr:nth-child(6) td:first-child {
  4716.     width: 70px;
  4717.    
  4718.     text-align: right;
  4719. }
  4720. form table:not(.advanced) tr:nth-child(5) td:last-child, form table:not(.advanced) tr:nth-child(6) td:last-child {
  4721. }
  4722. form table:not(.advanced) tr:nth-child(5) td:last-child > *, form table:not(.advanced) tr:nth-child(6) td:last-child > * {
  4723.     font-size: 11px;
  4724.     margin-right: 7px;
  4725. }
  4726. form table:not(.advanced) tr:nth-child(5) td:last-child label, form table:not(.advanced) tr:nth-child(6) td:last-child label {
  4727.     margin-right: 0;
  4728. }
  4729. 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 {
  4730.     vertical-align: top;
  4731.     margin: 4px 0 0 0;
  4732. }
  4733. #add_anime_comments {
  4734.     width: 95% !important;
  4735.     min-height: 170px !important;
  4736.    
  4737.     resize: vertical;
  4738. }
  4739. /* Advanced Opt */
  4740. form[name^="add_"] table.advanced tr {
  4741.     clear: both;
  4742. }
  4743. form[name^="add_"] table.advanced td {
  4744.     float: left;
  4745. }
  4746. form[name^="add_"] table.advanced td:first-child {
  4747.    
  4748. }
  4749. form[name^="add_"] table.advanced td:last-child {
  4750.     width: 80%;
  4751. }
  4752. }
  4753.  
  4754. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/shared\\.php.*") {
  4755. /* HEADER ROW */
  4756. #content table, #content tbody {
  4757.     table-layout: fixed;
  4758. }
  4759. tr:first-of-type td.borderClass:not(:nth-of-type(1)) > * strong {
  4760.    
  4761.     width: 130px;
  4762.     transform: rotate(90deg) translateY(-100%);
  4763.     transform-origin: left top;
  4764.     margin-bottom: 116px;
  4765. }
  4766. tr:first-of-type td.borderClass {
  4767.     padding: 1px 3px !important;
  4768.    
  4769.     text-align: right;
  4770. }
  4771. tr:first-of-type td:nth-of-type(1) {
  4772.     vertical-align: bottom;
  4773. }
  4774. tr:first-of-type td:nth-of-type(2) {
  4775. }
  4776. tr:first-of-type td:nth-of-type(3) {
  4777. }
  4778. tr:first-of-type td:nth-of-type(4) {
  4779. }
  4780. /* Content */
  4781. tr {
  4782.     width: 65%;
  4783.     margin: 0 0 5px;
  4784.    
  4785. }
  4786. td {
  4787.    
  4788. }
  4789. tr:not(:first-of-type) > td:nth-child(1) {
  4790.    
  4791.     font-size: 13px;
  4792.     text-align: right;
  4793.     align-self: center;
  4794. }
  4795. tr:not(:first-of-type) > td:nth-child(2),
  4796. tr:not(:first-of-type) > td:nth-child(3) {
  4797.     width: 38px;
  4798.     height: 38px;
  4799.     background: #666a !important;
  4800.    
  4801.     font-size: 20px;
  4802. }
  4803. tr:not(:first-of-type) > td:nth-child(3) { margin-left: -10px; }
  4804. tr:not(:first-of-type) > td:nth-child(2)[style*="f6"],
  4805. tr:not(:first-of-type) > td:nth-child(3)[style*="f6"] {
  4806.     background: #000a !important;
  4807. }
  4808. #content tr:not(:first-of-type) > td:nth-child(2) span,
  4809. #content tr:not(:first-of-type) > td:nth-child(3) span {
  4810.     color: #fff !important;
  4811.     line-height: 38px;
  4812. }
  4813. tr:not(:first-of-type) > td:nth-child(4) {
  4814.     width: 20px;
  4815. }
  4816. }
  4817.  
  4818. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/ownlist/style.*") {
  4819. /* OWNLIST-STYLE */
  4820. .style-setting div.ml16.mr16 { margin: 0 !important; }
  4821. .style-setting form[name="style_edit"] { padding: 0 10px; }
  4822. /* HEADING */
  4823. .page-common h2 {
  4824.     background: var(--border);
  4825.     margin: 0 -10px 10px;
  4826.    
  4827.     color: var(--text-heading);
  4828.     font: 1.1rem/13px var(--fontset-heading);
  4829. }
  4830. /* Classic | Modern Toggle */
  4831. #myanimelist .style-setting .setting-switch input[type=radio]+label {
  4832.     background: var(--content-dim);
  4833.     border-radius: 15px 0 0 15px;
  4834.    
  4835.     color: var(--text-heading);
  4836.    
  4837. }
  4838. #myanimelist .style-setting .setting-switch input[type=radio]+label ~ label { border-radius: 0 15px 15px 0 }
  4839. #myanimelist .style-setting .setting-switch input[type=radio]+label:hover {
  4840.     background: var(--accent-dim);
  4841. }
  4842. #myanimelist .style-setting .setting-switch input[type=radio]:checked+label {
  4843.     background: var(--accent);
  4844.    
  4845.     color: var(--text-heading);
  4846. }
  4847. /* Information Bar */
  4848. .ownlist_style #new-style .info {
  4849.     background: var(--content-dim);
  4850.     border-color: var(--border);
  4851.    
  4852.     color: var(--text);
  4853. }
  4854. /*------------------------------*\
  4855.   OWNLIST-STYLE @Modern-Theme-Selector
  4856. \*------------------------------*/
  4857. .ownlist_style .new-theme-list .new-theme-unit {
  4858.     width: 170px;
  4859.     background: var(--content-dim);
  4860.     border-color: var(--border);
  4861. }
  4862. .ownlist_style .new-theme-list .new-theme-unit.selected {
  4863.     background: var(--content-dim);
  4864.     border-color: var(--accent);
  4865. }
  4866. /* Title */
  4867. .ownlist_style .new-theme-list .new-theme-unit .title {
  4868.     color: var(--text-lnk) !important;
  4869. }
  4870. /* Image */
  4871. /* .ownlist_style .new-theme-list .new-theme-unit .theme-link .thumb {
  4872.     width: 115px;
  4873.     height: 115px;
  4874.    
  4875.     object-fit: cover;
  4876. } */
  4877. /* Radio Boxes */
  4878. .ownlist_style .new-theme-list .new-theme-unit div {
  4879. }
  4880. .ownlist_style .new-theme-list .new-theme-unit div label {
  4881.     line-height: 22px;
  4882. }
  4883. .ownlist_style .new-theme-list .new-theme-unit div label input {
  4884.     margin: 0;
  4885.    
  4886. }
  4887. /* .ownlist_style .new-theme-list .new-theme-unit div label:first-child input {
  4888.     margin: 4px 0 0 3px;
  4889.    
  4890.     float: right;
  4891. }
  4892. .ownlist_style .new-theme-list .new-theme-unit div label:last-child input {
  4893.     margin: 4px 3px 0 0;
  4894.    
  4895.     float: left;
  4896. } */
  4897. /* .ownlist_style .new-theme-list .new-theme-unit div label input[checked="checked"] {
  4898.     width: 10px;
  4899.     height: 10px;
  4900.     background: var(--accent);
  4901.     margin: 0;
  4902.    
  4903.     -webkit-appearance: none;
  4904.        -moz-appearance: none;
  4905.             appearance: none;
  4906. } */
  4907. /* Save Button */
  4908. .ownlist_style .style-setting .style-setting-form-button {
  4909.     border-color: var(--border);
  4910. }
  4911. /*------------------------------*\
  4912.   OWNLIST-STYLE @Editor
  4913. \*------------------------------*/
  4914. .ownlist_style_theme .customize-content-left {
  4915.     width: 350px !important;
  4916.     background: var(--content);
  4917.    
  4918.     color: var(--text);
  4919. }
  4920. .ownlist_style_theme #preview-container {
  4921.     padding-left: 3px;
  4922.     background: #fff;
  4923. }
  4924. .ownlist_style_theme .draggable-bar {
  4925.     border-left: 3px solid var(--border);
  4926. }
  4927. /* Content */
  4928. .ownlist_style_theme .customize-content-left .theme-custom-content {
  4929.     padding: 7px 10px 14px;
  4930. }
  4931. /* Custom CSS */
  4932. #add_custom_css [style*="#a94442"] { color: var(--return-bad) !important; }
  4933. #add_custom_css #custom-css { margin: 10px -10px; }
  4934. .ace_editor {
  4935.     font: 11px/15px var(--fontset-monospace);
  4936. }
  4937. .ace-ambiance .ace_gutter {
  4938.     background: var(--border);
  4939. }
  4940. .ace-ambiance .ace_gutter-layer, .ace-ambiance .ace_text-layer {  }
  4941. .ace-ambiance .ace_gutter-active-line { background: linear-gradient(to right, transparent, var(--accent-dimmest)); }
  4942. .ace_gutter-cell { color: var(--text-heading); }
  4943. }
  4944.  
  4945. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(|my)reviews\\.php.*"), regexp(".*/(www\\.|)myanimelist\\.net/(profile|anime|manga)/.*/reviews.*") {
  4946. /* REVIEWS */
  4947. .page-common #content:not([style]) { font-size: 0; }
  4948. /*------------------------------*\
  4949.   REVIEWS @Other
  4950. \*------------------------------*/
  4951. #myanimelist .reviews-horiznav-nav-sort-block {
  4952.     width: 80%;
  4953.     padding: 0 10px 10px !important;
  4954.     margin: 0 !important;
  4955.    
  4956.     float: left;
  4957.    
  4958. }
  4959. .reviews-horiznav-nav-sort-block .btn-show-sort { color: var(--text); }
  4960. .reviews-horiznav-nav-sort-block .review-sort-order-block {
  4961.     background: var(--content-dim);
  4962.     border-color: var(--border);
  4963. }
  4964. .reviews-horiznav-nav-sort-block .review-sort-order-block .btn-close {
  4965.     background: var(--border) var(--img-icon-close) no-repeat center / 8px 8px;
  4966.    
  4967. }
  4968. .reviews-horiznav-nav-sort-block .review-sort-order-block .btn-close:hover { background: var(--accent); }
  4969. .reviews-horiznav-nav-sort-block + div.ml4 { height: 34px; }
  4970. .borderDark ~ div.mt4 {
  4971.     margin: 0 !important;
  4972.     clear: both;
  4973. }
  4974. .reviews-horiznav-nav-sort-block + div.ml4 a,
  4975. .borderDark ~ div.mt4 .ml4 a {
  4976.     padding: 4px 10px;
  4977.     background: var(--content-dim);
  4978.     border-radius: 12px;
  4979.     float: right;
  4980.    
  4981.    
  4982. }
  4983. .reviews-horiznav-nav-sort-block + div.ml4 a:hover,
  4984. .borderDark ~ div.mt4 .ml4 a:hover {
  4985.     background: var(--border);
  4986.    
  4987.     text-decoration: none;
  4988. }
  4989. /*------------------------------*\
  4990.   REVIEWS @Content-Base
  4991. \*------------------------------*/
  4992. .page-common .borderDark {
  4993.    
  4994.     border: 2px solid var(--border) !important;
  4995.     margin-bottom: 10px;
  4996.    
  4997.     clear: both;
  4998.    
  4999. }
  5000. @media (min-width: 1630px) {
  5001.     #content:not([style]) .borderDark {
  5002.    
  5003.         width: calc(50% - 5px);
  5004.    
  5005.        
  5006.         vertical-align: top;
  5007.     }
  5008.    
  5009.     #content:not([style]) .borderDark:nth-of-type(even) { margin-left: 10px; }
  5010.     #content:not([style]) table .borderDark:nth-of-type(odd) { float: left; }
  5011. }
  5012. /*------------------------------*\
  5013.   REVIEWS @Content-Header
  5014. \*------------------------------*/
  5015. .borderDark > .spaceit:nth-child(1) {
  5016.     padding: 5px 60px 55px 58px;
  5017.     background: var(--content-dim);
  5018.     border-bottom: 2px solid var(--border);
  5019.     margin: 0;
  5020. }
  5021. /* Fix for anime pages */
  5022. .breadcrumb ~ .borderDark > .spaceit:first-child  div[style="float: left;"] td:last-child { padding-left: 7px; }
  5023. /* - - - - - - - - - - - - - - -*\
  5024.   Post Time, Episodes Seen, Overall Rating
  5025. \*- - - - - - - - - - - - - - - */
  5026. .borderDark > .spaceit:first-child > div:first-child {
  5027.     height: 70px;
  5028.     margin: 0 !important;
  5029.     flex-flow: column nowrap;
  5030.    
  5031.     line-height: 18px;
  5032. }
  5033. /* Post Time */
  5034. /* Episodes Seen */
  5035. .borderDark > .spaceit:first-child > div:first-child .spaceit {
  5036.     margin: 0;
  5037. }
  5038. /* Overall Rating */
  5039. .borderDark > .spaceit:first-child > div:first-child div:last-child {  }
  5040. /* - - - - - - - - - - - - - - -*\
  5041.   Anime Title
  5042. \*- - - - - - - - - - - - - - - */
  5043. .borderDark > .spaceit:first-child > div.mb8:nth-child(2) {
  5044.     height: 18px;
  5045.     margin: 0 !important;
  5046.    
  5047.  
  5048. }
  5049. /* - - - - - - - - - - - - - - -*\
  5050.   User Name, User Avatar, and Helpful Count
  5051. \*- - - - - - - - - - - - - - - */
  5052. .borderDark > .spaceit:first-child > div[style*="left"] { height: 52px; }
  5053. .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) {
  5054.     height: 70px;
  5055.     margin-left: -53px;
  5056. }
  5057. .borderDark > .spaceit:first-child > div[style*="left"] td { line-height: 17px; }
  5058. .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) td { line-height: 23px; }
  5059. /* Helpful Count */
  5060. .borderDark > .spaceit:first-child > div[style*="left"] .spaceit {
  5061.     margin: 0;
  5062. }
  5063. /* Preliminary Review */
  5064. .js-reviews-chk-preliminary .fa-tag,
  5065. .borderDark > .spaceit:first-child > div[style*="left"] .spaceit + div .fa-tag { color: var(--accent) !important; }
  5066. /* User Avatar */
  5067. .borderDark > .spaceit:first-child > div[style*="left"] td[width="60"] { width: auto; }
  5068. /* .borderDark > .spaceit:first-child .picSurround img {
  5069.     max-width: 48px;
  5070.     max-height: 48px;
  5071. }
  5072. .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) .picSurround img {
  5073.     max-width: 66px;
  5074.     max-height: 66px;
  5075. } */
  5076. .borderDark > .spaceit:first-child .picSurround img {
  5077.     max-width: 48px;
  5078.     max-height: 48px;
  5079. }
  5080. .borderDark > .spaceit:first-child > div[style*="left"]:nth-child(2) .picSurround img {
  5081.     max-width: 66px;
  5082.     max-height: 66px;
  5083. }
  5084. /*------------------------------*\
  5085.   REVIEWS @Text
  5086. \*------------------------------*/
  5087. .borderDark > .spaceit:nth-child(2) {
  5088.     min-height: 130px;
  5089.     padding: 3px 7px 3px 117px !important;
  5090.     margin: 0 !important;
  5091. }
  5092. /* - - - - - - - - - - - - - - -*\
  5093.   Score
  5094. \*- - - - - - - - - - - - - - - */
  5095. .borderDark:before {
  5096.     top: 82px;
  5097.    
  5098.    
  5099.     width: 108px;
  5100.     height: calc(100% - 82px);
  5101.     background: var(--content-dim);
  5102.     border-right: 2px solid var(--border);
  5103.    
  5104.     float: left;
  5105. }
  5106. .borderDark > .spaceit:nth-child(2) div[id^="score"] {
  5107.     top: 83px;
  5108.    
  5109.    
  5110.     float: none !important;
  5111. }
  5112. .borderDark > .spaceit:nth-child(2) div[id^="score"] table {
  5113.     width: 108px;
  5114.     border-width: 0 0 1px !important;
  5115. }
  5116. .borderDark > .spaceit:nth-child(2) div[id^="score"] tr { border-width: 1px 0; }
  5117. .borderDark > .spaceit:nth-child(2) div[id^="score"] td { padding: 3px 0; }
  5118. .borderDark > .spaceit:nth-child(2) div[id^="score"] td:first-child { padding-left: 7px; }
  5119. .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { padding-right: 7px; }
  5120. .borderDark > .spaceit:nth-child(2) div[id^="score"] td:last-child { text-align: right; }
  5121. /* - - - - - - - - - - - - - - -*\
  5122.   Anime Image
  5123. \*- - - - - - - - - - - - - - - */
  5124. .borderDark > .spaceit:nth-child(2) > div[style*="float: right"]:first-child {
  5125.     top: 5px;
  5126.     left: 5px;
  5127.     margin: 0 !important;
  5128. }
  5129. .borderDark > .spaceit:nth-child(2) .picSurround img {
  5130.     max-height: 66px;
  5131. }
  5132. /* More Pics Button */
  5133. .borderDark > .spaceit:nth-child(2) .spaceit {  }
  5134. /*------------------------------*\
  5135.   REVIEWS @Bottom-Buttons
  5136. \*------------------------------*/
  5137. .borderDark > div:last-child {
  5138.     padding: 0 7px;
  5139.    
  5140.     text-align: right;
  5141. }
  5142. .borderDark > div:last-child > .clearfix {
  5143.     padding: 0 0 3px !important;
  5144.     margin: 0 !important;
  5145. }
  5146. /* Report, Edit, Etc */
  5147. .borderDark > div:last-child a:nth-child(2) {
  5148.    
  5149.     background: var(--content-dim);
  5150.    
  5151.     color: var(--text-lnk);
  5152.     text-transform: capitalize;
  5153.    
  5154. }
  5155. .borderDark > div:last-child a:nth-child(2):hover {
  5156.     background: var(--border);
  5157.    
  5158.     color: var(--text-lnk-hov);
  5159. }
  5160. .borderDark > div:last-child a:nth-child(2) small { font-size: 0.9rem; }
  5161. /* Permalink */
  5162. .borderDark > div:last-child a:first-child {
  5163.     right: 5px;
  5164.    
  5165.    
  5166.     height: 50px;
  5167.     background: var(--border);
  5168.    
  5169.     color: var(--icon);
  5170.    
  5171. }
  5172. .borderDark > div:last-child a:first-child:after {
  5173. /*  content: "\f14c"; */
  5174.     content: "\f0c1";
  5175.     font: 30px/50px 'Font Awesome 6';
  5176. }
  5177. .borderDark > div:last-child a:first-child:hover {
  5178.     background: var(--accent-dimmest);
  5179. }
  5180. .borderDark > div:last-child a:first-child small { font-size: 0; }
  5181. /* - - - - - - - - - - - - - - -*\
  5182.   Helpful Review
  5183. \*- - - - - - - - - - - - - - - */
  5184. .page-common .js-review-btn-helpful {
  5185.     padding-left: 7px;
  5186.     border-left: 2px solid var(--accent);
  5187.    
  5188. }
  5189. .page-common .js-review-btn-helpful .js-vote-review-button {
  5190.     padding: 0 5px;
  5191.     background: var(--content-dim);
  5192.    
  5193.     color: var(--text-lnk);
  5194. }
  5195. .page-common .js-review-btn-helpful .js-vote-review-button:hover {
  5196.     background: var(--border);
  5197.    
  5198.     color: var(--text-lnk-hov);
  5199. }
  5200. /*------------------------------*\
  5201.   REVIEWS @Page-Nav
  5202. \*------------------------------*/
  5203. .borderDark ~ div[style="float:right;"], #horiznav_nav div[style="float:right;"] {
  5204.     padding: 4px 10px;
  5205.     background: var(--content-dim);
  5206.     border-radius: 12px;
  5207.     margin-bottom: 10px;
  5208.    
  5209. }
  5210. #horiznav_nav div[style="float:right;"] { margin-top: 1px; }
  5211. .borderDark ~ div[style="float:right;"] > *, #horiznav_nav div[style="float:right;"] > * { line-height: 16px; }
  5212. .borderDark ~ div[style="float:right;"] :first-child, #horiznav_nav div[style="float:right;"] :first-child { margin: 0 !important; }
  5213. /*------------------------------*\
  5214.   REVIEWS @Most-Helpful
  5215. \*------------------------------*/
  5216. #content:not([style]) #horiznav_nav ~ table {
  5217.     max-width: 700px;
  5218. }
  5219. #content:not([style]) #horiznav_nav ~ table .borderClass {  }
  5220. /*------------------------------*\
  5221.   REVIEWS @Write
  5222. \*------------------------------*/
  5223. .page-review #content { padding-top: 44px !important; }
  5224. .page-review div[style="padding: 0 15px 15px 15px;"] {
  5225.    
  5226. }
  5227. /* Headers */
  5228. .page-review .normal_header { margin-top: 10px; }
  5229. .page-review .normal_header small { font-size: 0.9rem; }
  5230. /* Seen Episodes */
  5231. .page-review #seeneps {
  5232.     background: var(--content-dim) !important;
  5233.     margin-right: 5px;
  5234. }
  5235. /* Rate */
  5236. .page-review div[style$="margin-top: 8px;"] > table > tbody > tr {
  5237.     width: 1040px;
  5238.     justify-content: space-around;
  5239. }
  5240. .page-review .review_box {
  5241.     width: 150px;
  5242. }
  5243. .page-review .score_top {
  5244.     padding: 0 0 3px 4px;
  5245.     border-bottom: 2px solid var(--border);
  5246.    
  5247.     font-size: 1.1rem;
  5248. }
  5249. .page-review .review_score_over {
  5250.     color: var(--accent);
  5251.     font-size: 1.5rem;
  5252. }
  5253. .page-review .review_description {  }
  5254. .page-review .review_scoreoff {
  5255.     background: var(--content-dim);
  5256.     color: var(--text);
  5257.    
  5258. }
  5259. .page-review .review_scoreon {
  5260.     background: var(--border);
  5261.     color: var(--text-lnk-hov);
  5262.    
  5263. }
  5264. /* Writing */
  5265. .page-review div[style="margin-top: 15px;"] td:first-child {
  5266.     padding-right: 10px !important;
  5267. }
  5268. .page-review div[style="margin-top: 15px;"] td:last-child { width: 550px; }
  5269. .page-review .textarea {
  5270.     resize: vertical;
  5271. }
  5272. }
  5273.  
  5274. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/recommendations\\.php.*") {
  5275. /* RECOMMENDATIONS */
  5276. div[style="padding: 0 20px;"] {
  5277. }
  5278. #myanimelist h2 {
  5279.     background: var(--border);
  5280.     margin: 0 0 10px;
  5281.    
  5282.     color: var(--text-heading);
  5283.     font: 1.1rem/13px var(--fontset-heading);
  5284. }
  5285. /* Recommendations */
  5286. .spaceit.borderClass {
  5287.     width: calc(50% - 5px);
  5288.     border: 2px solid var(--border);
  5289.     margin: 0 0 10px 0;
  5290.    
  5291.     vertical-align: top;
  5292. } .spaceit.borderClass:nth-of-type(even) {
  5293.     margin-left: 10px;
  5294. }
  5295. @media (min-width: 1630px) {
  5296.     .spaceit.borderClass {
  5297.         width: calc(33.3334% - 13.3334px);
  5298.         margin-left: 10px;
  5299.     } .spaceit.borderClass:nth-of-type(3n+1) {
  5300.         margin-left: 0;
  5301.     }
  5302. }
  5303. .spaceit.borderClass table {
  5304.     padding: 5px;
  5305.     border-bottom: 2px solid var(--border);
  5306.     background: var(--content-dim);
  5307. }
  5308. .spaceit.borderClass .recommendations-user-recs-text {
  5309.     margin: 0;
  5310. }
  5311. .spaceit.borderClass > .lightLink {
  5312.     padding: 0 10px 10px;
  5313.     margin: 0;
  5314. }
  5315. .spaceit.borderClass > .lightLink .lightLink {
  5316.     background: var(--content-dim);
  5317.     margin-bottom: 5px;
  5318.    
  5319.     color: var(--text-lnk);
  5320.     text-transform: capitalize;
  5321.    
  5322. }
  5323. .spaceit.borderClass > .lightLink .lightLink:hover {
  5324.     background: var(--border);
  5325.    
  5326.     color: var(--text-lnk-hov);
  5327.     text-decoration: none;
  5328. }
  5329. /* Page Navigation */
  5330. div[style="padding: 0 20px;"] > .spaceit:not(.borderClass) {
  5331.     margin: 0;
  5332. }
  5333. #horiznav_nav div[style="float: right;"] .bgColor1,
  5334. div[style="padding: 0 20px;"] > .spaceit:last-child .bgColor1 {
  5335.     padding: 4px 10px !important;
  5336.     background: var(--content-dim);
  5337.     border-radius: 12px;
  5338.    
  5339. }
  5340. /*------------------------------*\
  5341.   RECOMMENDATIONS @Top-Users
  5342. \*------------------------------*/
  5343. div[style$="width: 49%;"] { width: calc(50% - 5px) !important; }
  5344. div[style$="width: 49%;"] .spaceit {
  5345.     margin: 0 0 7px;
  5346.    
  5347. }
  5348. /* Left Section */
  5349. /* Right Section */
  5350. div[style^="margin-left: 50%"] { margin-left: auto !important; }
  5351. }
  5352.  
  5353. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/clubs\\.php\\?cid=.*") {
  5354. /* CLUBS */
  5355. .page-common #content {
  5356.     padding-top: 44px !important;
  5357. }
  5358. #content > table {
  5359.     width: 1040px;
  5360.     margin-left: auto;
  5361. }
  5362. #content > table > tbody > tr {
  5363.    
  5364. }
  5365. #content > table > tbody > tr > td:first-child {
  5366.     width: 740px;
  5367.    
  5368. }
  5369. #content > table > tbody > tr > td:last-child {
  5370.     width: 297px !important;
  5371.     border-left: 3px solid var(--border);
  5372. }
  5373. #content > table > tbody > tr > td:last-child > div {
  5374.     padding: 0 10px 0 17px !important;
  5375. }
  5376. @media (min-width: 1630px) {
  5377.     #content > table {
  5378.         width: 1050px;
  5379.     }
  5380.     #content > table > tbody > tr > td:first-child {
  5381.         padding-left: 7px;
  5382.         border-left: 3px solid var(--border) !important;
  5383.     }
  5384.     #content > table > tbody > tr > td:last-child {
  5385.        
  5386.     }
  5387. }
  5388. /* Unsorted */
  5389. .club-list .table-data td .new {
  5390.     background: var(--notif);
  5391.     padding: 1px 2px;
  5392.     border-radius: 5px;
  5393.     margin-right: 2px;
  5394. }
  5395. .club-list .table-data:nth-of-type(odd) td {
  5396. }
  5397. .club-list .table-data:nth-of-type(odd) {
  5398.     background: var(--content-dim);
  5399. }
  5400. .club-list .table-data *:not(a) {
  5401.     color: var(--text-dim) !important;
  5402. }
  5403. /*------------------------------*\
  5404.   CLUBS @SPLIT-LEFT
  5405. \*------------------------------*/
  5406. #content > table > tbody > tr > td.borderClass > div {
  5407.     flex-direction: column;
  5408. }
  5409. #content > table > tbody > tr > td.borderClass > div > br {  }
  5410. /* Club Blurb */
  5411. /* .normal_header.club-information-header { order: 0; } */
  5412. .club-information-header + div.clearfix {
  5413.     margin-bottom: 15px;
  5414.    
  5415. /*  */
  5416. }
  5417. /* Club Forum */
  5418. .page-forum { order: -1; }
  5419. .page-forum .normal_header { margin: 0 !important; }
  5420. #forumTopics td { font-size: 0.9rem; }
  5421. #forumTopics small { display: inline-block; }
  5422. /* Club Member Box/Club Picture Box */
  5423. .club-information-header ~ table:not(#forumTopics), .club-information-header ~ table:not(#forumTopics) tbody {  }
  5424. .club-information-header ~ table:not(#forumTopics) tbody tr {
  5425. }
  5426. .club-information-header ~ table:not(#forumTopics) tbody tr td {
  5427.    
  5428.     align-self: flex-start;
  5429.     flex: 0 1 auto;
  5430.    
  5431.    
  5432. }
  5433. .club-information-header ~ table:not(#forumTopics) tbody tr td:hover {
  5434.    
  5435. }
  5436. /* Club Member Box */
  5437. .club-information-header ~ table[cellpadding="10"] {
  5438.     margin-bottom: 15px;
  5439. }
  5440. .club-information-header ~ table[cellpadding="10"] tbody tr td.borderClass {
  5441. }
  5442. .club-information-header ~ table[cellpadding="10"] td {
  5443.     width: 14%;
  5444. }
  5445. /* Club Picture Box */
  5446. .club-information-header ~ table[cellspacing="10"] {
  5447.     margin-bottom: 15px;
  5448. }
  5449. .club-information-header ~ table[cellspacing="10"] td {
  5450. /*  max-width: 104px; */
  5451. }
  5452. /* Add Comment Box */
  5453. .club-information-header ~ div[style="margin: 10px 0px;"] {
  5454. /*  */
  5455. }
  5456. /*------------------------------*\
  5457.   CLUBS @SPLIT-RIGHT
  5458. \*------------------------------*/
  5459. #myanimelist td:nth-child(2) .normal_header {
  5460.     margin: 4px -10px 5px -10px;
  5461.    
  5462. }
  5463. #myanimelist td:nth-child(2) .normal_header a {
  5464.     margin: -7px -10px 0 0;
  5465. }
  5466. /* Club Links */
  5467. .page-common #profileRows:before {
  5468.     content: "ACTIONS";
  5469.    
  5470.    
  5471.     background: var(--border);
  5472.     margin: 0 -10px 5px -10px;
  5473.    
  5474.     color: var(--text);
  5475. }
  5476. #myanimelist #profileRows a, td:nth-child(2) .normal_header + a[href="#"] {
  5477.    
  5478.     padding: 4px 10px;
  5479.     margin-left: -10px;
  5480.     margin-right: -10px;
  5481.     background: var(--content-dim);
  5482.     border-radius: 12px;
  5483.    
  5484.     color: var(--text-lnk);
  5485.     text-decoration: none;
  5486.    
  5487. }
  5488. #myanimelist #profileRows a + a {
  5489.     margin-top: 3px;
  5490. }
  5491. #myanimelist #profileRows a:hover, td:nth-child(2) .normal_header + a[href="#"]:hover {
  5492.     background: var(--accent-dim);
  5493.    
  5494.     color: var(--text-heading);
  5495. }
  5496. /* Club Messages */
  5497. #club-mass-message-subscribe {
  5498.     padding-bottom: 0 !important;
  5499. }
  5500. /* Join Club */
  5501. /* #myanimelist #profileRows a:only-of-type {} */
  5502. /* VERSION ONE
  5503. .page-common #profileRows a, .page-common .profileRows a {
  5504.     border-color: var(--border) !important;
  5505.    
  5506.     color: var(--text-lnk);
  5507.    
  5508. }
  5509. .page-common #profileRows a:hover, .page-common .profileRows a:hover {
  5510.     background: var(--accent-dim);
  5511.    
  5512.     color: var(--text-heading);
  5513. } */
  5514. /* Club Admins & Officers */
  5515. .normal_header ~ .normal_header ~ .borderClass a[href^="/profile/"] {
  5516.     width: 50%;
  5517.     float: right;
  5518. }
  5519. /* Anime Relations */
  5520. #profileRows ~ .borderClass {
  5521.     margin: 0 -10px;
  5522.     padding: 3px 10px;
  5523. }
  5524. #profileRows ~ .borderClass:nth-of-type(odd) { background: var(--content-dim); }
  5525. /*------------------------------*\
  5526.   CLUBS @Split-Comments
  5527. \*------------------------------*/
  5528. /* Submit Form */
  5529.    
  5530. td.borderClass > div > div[style="margin: 10px 0px;"] {
  5531. }
  5532. td.borderClass > div > div[style="margin: 10px 0px;"] textarea {
  5533.     height: 100px;
  5534.     min-height: 100px;
  5535.     background: var(--content-dim);
  5536.     border-color: var(--border);
  5537.    
  5538.     overflow-x: hidden;
  5539.     overflow-y: auto;
  5540.    
  5541.     resize: vertical;
  5542. }
  5543. td.borderClass > div > div[style="margin: 10px 0px;"] div[style="margin-top: 3px;"] {
  5544.     width: 140px;
  5545.     margin: 6px 0 0 auto !important;
  5546. }
  5547. td.borderClass > div > div[style="margin: 10px 0px;"] div[style="margin-top: 3px;"] input {
  5548.     width: 140px;
  5549.     min-width: initial;
  5550.     height: 24px;
  5551.     background: var(--accent);
  5552.     border-radius: 12px;
  5553. }
  5554. td.borderClass > div > div[style*="width: 733px"] > br {  }
  5555. div[id^="comment"] {
  5556.    
  5557.     word-break: break-word;
  5558. }
  5559. div[id^="comment"] ~ div[id^="comment"] { margin-top: 20px; }
  5560. div[id^="comment"] table, div[id^="comment"] tbody {  }
  5561. div[id^="comment"] tr {
  5562.    
  5563.     align-items: flex-start;
  5564. }
  5565. div[id^="comment"] td:nth-child(1) {
  5566.     width: 52px;
  5567.     margin: 0;
  5568. }
  5569. div[id^="comment"] td:nth-child(1) img {
  5570.     width: 48px;
  5571.     border-width: 2px;
  5572.     border-color: var(--border);
  5573. }
  5574. div[id^="comment"] td:nth-child(2) {
  5575.    
  5576.     padding: 0 0 0 7px;
  5577.    
  5578.     flex: 1 1 100%;
  5579.    
  5580. /*  */
  5581. }
  5582. div[id^="comment"] td:nth-child(2) .codetext {
  5583.     max-width: 441px;
  5584. }
  5585. /* Comment Headers */
  5586. div[id^="comment"] td:nth-child(2) > div:first-child {
  5587.     padding: 0 0 0 7px;
  5588.     background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px);
  5589.     margin: 0 -3px 3px -7px !important;
  5590. }
  5591. div[id^="comment"] td:nth-child(2) > div:first-child a {
  5592.     margin: 5px 0 5px 0 !important;
  5593.    
  5594. }
  5595. div[id^="comment"] td:nth-child(2) > div:first-child small {
  5596.     margin: 5px 0 5px 0 !important;
  5597.     vertical-align: top;
  5598. }
  5599. div[id^="comment"] td:nth-child(2) > div:first-child small span {
  5600.     color: var(--text-dimmer);
  5601.    
  5602. }
  5603. /* Delete Button */
  5604. div[id^="comment"] td:nth-child(2) > div ~ div[style="margin-top: 10px;"]:last-of-type {
  5605.    
  5606.     margin-top: 0 !important;
  5607. }
  5608. div[id^="comment"] td:nth-child(2) > div ~ div[style="margin-top: 10px;"]:last-of-type a {
  5609.     padding: 0 7px;
  5610.     color: var(--text-dim);
  5611.    
  5612.    
  5613. }
  5614. div[id^="comment"] td:nth-child(2) > div ~ div[style="margin-top: 10px;"]:last-of-type a:hover { background: var(--border); }
  5615. @media (min-width: 1630px) {
  5616.     td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style*="width: 733px"] {
  5617.    
  5618.         left: 10px;
  5619.         top: 87px;
  5620.         top: 220px;
  5621.        
  5622.         width: 523px !important;
  5623.         max-height: calc(100% - 320px);
  5624.         padding-top: 0 !important;
  5625.         padding-right: 4px;
  5626.        
  5627.         overflow-y: auto !important;
  5628.         overflow-x: visible !important;
  5629.     }
  5630.    
  5631.     td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] ~ div:nth-last-of-type(1) { top: 220px; }
  5632.    
  5633.     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) {
  5634.    
  5635.         left: 10px;
  5636.         top: 44px;
  5637.        
  5638.         width: 503px !important;
  5639.         margin-top: 0;
  5640.     }
  5641.    
  5642.     /* Submit Form */
  5643.    
  5644.     td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] {
  5645.    
  5646.         left: 10px;
  5647.         top: 70px;
  5648.        
  5649.         width: 523px;
  5650.     }
  5651.     td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] .normal_header {
  5652.    
  5653.     }
  5654.     td.borderClass[style="border-width: 0 1px 0 0 ;"] > div > div[style="margin: 10px 0px;"] textarea {
  5655.         height: 100px !important;
  5656.        
  5657.         resize: none;
  5658.     }
  5659. }
  5660. /*------------------------------*\
  5661.   CLUBS @REPORT-BUTTON
  5662. \*------------------------------*/
  5663. #content > div.spaceit {
  5664.    
  5665.     border: 0;
  5666.     margin: 0;
  5667.    
  5668.     z-index: 905;
  5669. }
  5670. #content > div.spaceit a {
  5671.    
  5672.     padding: 7px 10px 5px;
  5673.    
  5674.     line-height: 17px;
  5675.    
  5676. }
  5677. #content > div.spaceit a:hover {
  5678.     background: var(--accent-dimmest);
  5679. }
  5680. #content > div.spaceit a:before {
  5681.     content: "\f06a";
  5682.    
  5683.     margin-right: 4px;
  5684.    
  5685.     font: normal 12px/1 'Font Awesome 6';
  5686. }
  5687. }
  5688.  
  5689. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/clubs\\.php\\?action=view&t=pictures.*") {
  5690. /* !CLUB-PICTURES */
  5691. #content > .borderClass {
  5692.     background: var(--border);
  5693.    
  5694.     font: 1.1rem/13px var(--fontset-heading);
  5695. }
  5696. #content > .borderClass a {
  5697.    
  5698. }
  5699. #content > .borderClass a:hover {
  5700.    
  5701. }
  5702. #content > .borderClass > a {
  5703.     float: right;
  5704. }
  5705. #content > .borderClass span a {
  5706.     text-transform: none;
  5707.     letter-spacing: 0;
  5708. }
  5709. }
  5710.  
  5711. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/mymessages\\.php.*") {
  5712. /* PRIVATE MESSAGES */
  5713. /* INBOX */
  5714. /* Row */
  5715. .message {
  5716. }
  5717. .message.unread {
  5718.     background: var(--content-dim);
  5719. }
  5720. .message.read * {
  5721.     opacity: 0.8
  5722. }
  5723. .message > .mym {
  5724.     border-color: var(--border);
  5725. }
  5726. .message .mym_checkboxes {
  5727. }
  5728. .message .mym_replied {
  5729. }
  5730. .message .mym_user {
  5731. }
  5732. .message .mym_subject {
  5733.     flex: 1 1 auto;
  5734. }
  5735. .message.read .mym_subject .subject-link {
  5736. }
  5737. .message .mym_option {
  5738.     flex: 0 0 200px;
  5739. }
  5740. .message .mym_subject > a.subject-link .text,
  5741. .message.read .mym_subject > a.subject-link .text,
  5742. .message.read .mym_date,
  5743. .message .mym_date
  5744. {
  5745.     color: var(--text-dim) !important;
  5746. }
  5747. .message.read a {
  5748.     color: var(--text-lnk) !important;
  5749. }
  5750. .message.read a:hover {
  5751.     color: var(--text-lnk-hov) !important;
  5752. }
  5753. .pmessage-message-history .date, .pmessage-message-history .name, .pmessage-message-history .subject {
  5754.     color: var(--text-dim);
  5755. }
  5756. /* MESSAGE */
  5757. .page-common .border_top {  }
  5758. .pmessage-message-history tr {
  5759.     flex-flow: row wrap;
  5760.    
  5761.     margin-bottom: 5px;
  5762. }
  5763. .pmessage-message-history td {
  5764. }
  5765. .pmessage-message-history .date {
  5766.     background: var(--content-dim) ;
  5767.    
  5768.    
  5769.    
  5770. }
  5771. .pmessage-message-history .name {
  5772. /*  background: linear-gradient(to right, var(--accent), var(--accent-dimmest)); */
  5773.     background: linear-gradient(to right, var(--border) 0, var(--content-dim) 150px);
  5774.    
  5775.    
  5776. }
  5777. .pmessage-message-history .subject {
  5778.    
  5779.     padding: 3px 7px;
  5780.    
  5781.     flex: 1 1 100%;
  5782.     order: 3;
  5783. }
  5784. }
  5785.  
  5786. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/news.*") {
  5787. /* !NEWS */
  5788. .news-list .comment-list .text, .news-list .news-unit .text, body.news .news-container .content {
  5789.     color: var(--text);
  5790.    
  5791.     font-size: 1.1rem;
  5792. }
  5793. body.news .content-left {
  5794.     border-right: 3px solid var(--border);
  5795. }
  5796. body.news .content-left .mr8 {
  5797.     margin-right: 7px !important;
  5798. }
  5799. body.news .content-right {
  5800.     padding-left: 7px;
  5801. }
  5802. body.news h2 {
  5803.     color: var(--text-heading);
  5804. }
  5805. /* NEWS LIST */
  5806. .news-list .comment-list .title, .news-list .news-unit .title {
  5807.     background: var(--content-dim);
  5808. /*  border-left: 3px solid var(--accent); */
  5809. }
  5810. .news-list .comment-list .title a, .news-list .news-unit .title a {
  5811.     margin: 0;
  5812.    
  5813.     line-height: 19px;
  5814. }
  5815. /* ARTICLE - HEADER BAR & TITLE */
  5816. body.news .news-container .title {
  5817.     background: var(--content-dim);
  5818.     border-left: 3px solid var(--accent);
  5819. }
  5820. body.news .news-container .title a {
  5821.     color: var(--text-heading);
  5822.     line-height: 19px;
  5823. }
  5824. body.news .news-container .news-info-block {
  5825.     background: var(--content-dim);
  5826. }
  5827. /* ARTICLE - Social */
  5828. body.news .news-container .news-info-block .sns-unit .icon-social {
  5829.     background-image: var(--img-socials); /* /img/sp/common/sprite_icon_social2.png */
  5830.     background-size: 300px 60px;
  5831. }
  5832. body.news .news-container .news-info-block .sns-unit .icon-social.icon-facebook { background-position: 0 0; }
  5833. body.news .news-container .news-info-block .sns-unit .icon-social.icon-twitter { background-position: -30px 0; }
  5834. body.news .news-container .news-info-block .sns-unit .icon-social.icon-google { background-position: -60px 0; }
  5835. body.news .news-container .news-info-block .sns-unit .icon-social.icon-reddit { background-position: -90px 0; }
  5836. body.news .news-container .news-info-block .sns-unit .icon-social.icon-tumblr { background-position: -120px 0; }
  5837. /* ARTICLE - BODY */
  5838. .news-list .comment-list, .news-list .news-unit {
  5839.     border-color: var(--border);
  5840.    
  5841.    
  5842. }
  5843. /* ARTICLE FOOTER */
  5844. body.news .news-container .tags {
  5845.     background: var(--content-dim);
  5846. }
  5847. /* COMMENTS */
  5848. .news-list .comment-list:nth-of-type(even) {
  5849.     background: var(--content-dim);
  5850. }
  5851. /* RIGHT CONTAINER */
  5852. body.news .news-side-block .header, body.news .featured-side-block .header {
  5853.     border-color: var(--border);
  5854.     color: var(--text-heading);
  5855. }
  5856. 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 {
  5857.     border-color: var(--border);
  5858. }
  5859. }
  5860.  
  5861. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/blog.*") {
  5862. /* !BLOG */
  5863. /* .page-common #contentWrapper {
  5864. }
  5865. #content > div > div[style="margin: 5px 0;"] {
  5866.     border-bottom: 2px solid var(--border);
  5867.     padding-bottom: 10px;
  5868.     margin-bottom: 10px;
  5869. }
  5870. #content > div > .borderClass:last-of-type {
  5871.     clear: both;
  5872.     border-top: 2px solid var(--border);
  5873. }
  5874. #content div[style="padding: 0 0 13px 13px;"] {
  5875.     width: 1025px;
  5876. } */
  5877. .page-common #myanimelist, .page-common #wrapper {
  5878. }
  5879. #header {
  5880.    
  5881. }
  5882. #top {
  5883. }
  5884. .blog_detail_content_wrapper {
  5885.     color: var(--text);
  5886. }
  5887. }
  5888.  
  5889. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/about\\.php") {
  5890. /* ABOUT */
  5891. .page-common #contentWrapper {
  5892.     background: #fff;
  5893.    
  5894.     color: #000;
  5895. }
  5896. .page-common #content { padding-top: 34px !important; }
  5897. #content .about-header-sub { color: #000; }
  5898. }
  5899.  
  5900. @-moz-document regexp(".*/(www\\.|)myanimelist\\.net/(animelist|mangalist)/.*") {
  5901. /* MODERN LISTS */
  5902. }
  5903.  
  5904. @-moz-document url-prefix("https://myanimelist.net/ajaxtb.php") {
  5905. /* END */
  5906. #fancybox-wrap {
  5907. }
  5908. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement