// ==UserScript== // @name Anime News Network - Reimagined // @namespace https://userstyles.world/user/ft-scobra // @version 1.0.0 // @description A more modern layout for Anime News Network. Its main goal is to make readability easier. // @author Scøbra // @grant GM_addStyle // @run-at document-start // @match *://*.animenewsnetwork.com/* // @match *://*.animenewsnetwork.co.uk/* // @downloadURL none // ==/UserScript== (function() { let css = ""; if ((location.hostname === "animenewsnetwork.com" || location.hostname.endsWith(".animenewsnetwork.com")) || (location.hostname === "animenewsnetwork.co.uk" || location.hostname.endsWith(".animenewsnetwork.co.uk"))) { css += ` #canvas div { max-width: 1240px!important; } #canvas > div, #main { width: 1280px !important; margin: auto; background: rgb(28, 26, 46); color: rgb(255, 255, 255); } body { background-image: unset !important; background-color: #1c1a2e !important; } `; } if ((location.hostname === "animenewsnetwork.com" || location.hostname.endsWith(".animenewsnetwork.com")) || (location.hostname === "animenewsnetwork.co.uk" || location.hostname.endsWith(".animenewsnetwork.co.uk"))) { css += ` ::-webkit-scrollbar { background: #161425; width: 13px; height: 7px; border-radius: 50px; } ::-webkit-scrollbar-thumb { background: #243556!important; border: solid 3px #141222; border-radius: 50px; } .ror-css h1#page_header { color: rgb(88, 203, 255); } .ror-css #page-title { color: rgb(88, 203, 255); border-bottom: 2px solid rgb(88, 203, 255); } .ror-css cite.e a:link, .ror-css a.ENCYC:link { color: rgb(91, 252, 223)!important; text-decoration: none; } .ror-css a:link { color: rgb(163, 194, 255); } nav#mega { display: block; color: #5bfcdf; font-weight: bold; background-color: rgb(40, 40, 40); position: relative; border-radius: 5px; } #marquee { background: #fff; border-radius: 5px; } body.mobile-mode-0 #mainfeed .controls { background-color: rgb(16, 16, 16); border-radius: 5px; } #mainfeed .filters { color: rgb(91, 252, 223)!important; } #mainfeed .section-title { border-top: 0px; color: rgb(255, 255, 255); } #mainfeed .filters .selected { color: rgb(163, 194, 255)!important; } a[href*="/"] { color: rgb(91, 252, 223); } a[href*="/"]:hover { color: rgb(91, 252, 223); } .herald-boxes .herald.box .wrap .preview .full { color: rgb(255, 255, 255); } .herald-boxes .herald.box .thumbnail .overlay { background: transparent; } .herald-boxes .herald.box .thumbnail .overlay .comments { background: #181818c4 } #aside.herald-boxes .box { background: rgb(40, 40, 40); } h1 a:visited, h2 a:visited, h3 a:visited { color: rgb(91, 252, 223)!important; } a[href*="/2018"]:visited { color: rgb(91, 252, 223)!important; } h1 a, h2 a, h3 a { color: rgb(91, 252, 223); } #sidebar .box { background: rgb(16, 16, 16); } #sidebar .options-menu { background: rgb(16, 16, 16); } #mainfeed.grid-view .mainfeed-section .preview-only.herald.box .preview:before, html.grid-mode-not-1 .grid-view .mainfeed-section .herald.box .preview:before, html.grid-mode-not-1.sidebar-mode-0 #sidebar .herald.box .preview:before { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 85%, rgba(16, 16, 16, 0.9) 100%); } #aside .preview-only.herald.box .preview:before { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 85%, rgba(40, 40, 40, 0.9) 100%); } #header .buttons .social-button.facebook { background-image: url(https://www.animenewsnetwork.com/stylesheets/img/iconmap.png); background-position: -485px -5px; } #header .buttons .social-button.twitter { background-image: url(https://www.animenewsnetwork.com/stylesheets/img/iconmap.png); background-position: -517px -5px; } .ror-css .interest.area #page-title, .ror-css .interest.area #page-title h1 { color: rgb(88, 203, 255); border-color: rgb(88, 203, 255); } .php-css a:visited { color: rgb(88, 203, 255)!important; } .php-css a:link { color: rgb(88, 203, 255); } .php-css .encyc-info-type.articles .S2, .php-css .encyc-info-type.articles .S2 a { color: rgb(88, 203, 255); } .php-css .encyc-info-type.articles .S1, .php-css .encyc-info-type.articles .S1 a { color: rgb(88, 203, 255); } .php-css .my-anime-rating, .php-css .encyc-interactive { background-color: rgb(87, 87, 87); border: 1px solid rgb(198, 198, 198); } .php-css #page-title h1#page_header.same-width-as-main { color: rgb(88, 203, 255); border-bottom: 2px solid rgb(88, 203, 255); } h3, a { color: rgb(88, 203, 255); } .herald-boxes .herald.box .thumbnail .comments { background: rgba(0, 0, 0, 0.65); } h1, h2, h3 { color: rgb(88, 203, 255); } .php-css .nav { color: rgb(255, 255, 255); } .php-css .gen, .php-css .genmed, .php-css .gensmall { color: rgb(255, 255, 255); } .php-css .forumzone a:link, .php-css .forumzone a:visited { color: rgb(88, 203, 255)!important; } .php-css td.row2, .php-css td.row1 { background-color: rgb(85, 85, 85); } .php-css .postdetails { color: rgb(255, 255, 255); } .php-css .postbody { color: rgb(255, 255, 255); } .php-css .name { color: rgb(147, 241, 251); } .php-css td.cat, .php-css td.catHead, .php-css td.catBottom { height: 29px; border-width: 0; background: rgb(87, 87, 87); } .php-css #maincontent .forumline th { background-color: rgb(88, 203, 255); background-image: none; color: #000; } .php-css th.thLeft, .php-css td.catLeft { border-width: 0 0 0 0; } .php-css th.thHead, .php-css th.thSides, .php-css th.thTop, .php-css th.thLeft, .php-css th.thRight, .php-css th.thBottom, .php-css th.thCornerL, .php-css th.thCornerR { border: 0; } .php-css .copyright { color: rgb(255, 255, 255); } #main .forum.area table.forumline { min-width: 900px; } .php-css #page-title { border-bottom: 2px solid rgb(88, 203, 255); margin-bottom: 10px; padding-bottom: 3px; } .php-css font, .php-css th, .php-css td, .php-css p { font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255); } .ror-css cite.e a:visited, .ror-css a.ENCYC:visited { color: rgb(91, 252, 174)!important; } #searchbox { background: rgb(16, 16, 16); } #mainfeed .controls { background: #0b0b1a; border-radius: 5px; } .gsc-webResult.gsc-result, .gsc-webResult.gsc-result:hover, .gsc-control-cse, .gsc-control-cse .gsc-table-result { background: rgb(16, 16, 16); border: none; } .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b, .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b { color: rgb(91, 252, 223)!important; } .gs-webResult.gs-result:hover a.gs-title:link, .gs-webResult.gs-result:hover a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult:hover a.gs-title:link b, .gs-webResult.gs-result:hover a.gs-title:visited, .gs-webResult.gs-result:hover a.gs-title:visited b, .gs-imageResult:hover a.gs-title:visited, .gs-imageResult:hover a.gs-title:visited b:hover { color: rgb(0, 255, 60); } .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl { color: rgb(201, 237, 230); } .gsc-preview-reviews, .gsc-control-cse .gs-snippet, .gsc-control-cse .gs-promotion em, .gsc-control-cse .gs-snippet, .gsc-control-cse .gs-promotion em { color: rgb(255, 255, 255); } .gsc-results-wrapper-visible { background: rgb(16, 16, 16); border: rgb(40, 40, 40)!important; } .gsc-tabHeader.gsc-tabhActive { background: rgb(40, 40, 40)!important; color: white; border-width: 1px 0; } .gsc-tabHeader.gsc-tabhInactive, .gsc-refinementHeader.gsc-refinementhInactive { background: rgb(16, 16, 16)!important; color: white; border-width: 1px 0; } .gsc-tabHeader.gsc-tabhInactive:hover, .gsc-refinementHeader.gsc-refinementhInactive:hover { background: rgb(40, 40, 40)!important; } .gsc-above-wrapper-area { border: none; } .gsc-tabsArea { border-color: rgb(40, 40, 40); } a[href*="/"] { color: rgb(91, 252, 223); } .php-css a.postlink:visited { color: rgb(91, 252, 223)!important; } .php-css a.postlink:link { color: rgb(91, 252, 223)!important; } .php-css .quote { background: rgb(59, 59, 59); color: white; } nav#mega span { cursor: pointer!important; } nav#mega span:hover { background: #2b5c61; } #header { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 20px; padding-right: 20px; z-index: 300; position: fixed; min-width: 100%; padding-top: 9px; padding-bottom: 9px; background: #0b0b1a !important; } #header .logo img { opacity: 0; } #header > div.left.half > div > div.actionable.logo { background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Anime_News_Network_logo.svg/512px-Anime_News_Network_logo.svg.png)no-repeat; background-size: 100%; height: 40px; } .middle-area { margin-top: 58px !important; } #content #main { padding-top: 50px; } #menu { min-width: 100% !important; position: fixed; z-index: 200; left: 0; padding: 10px; background: #20203a; box-shadow: #0b0b1acc 0px 0px 5px 1px; } #menu nav { background: #20203a; max-width: 1200px; margin: auto; padding: 0 20px; } .herald-boxes .more { background: rgb(30, 30, 30); text-decoration: none; } .herald-boxes .more:hover { background: rgb(30, 30, 30); text-decoration: underline; color: rgb(91, 252, 223); } .herald-boxes .herald { background-color: #20203a; margin: 10px; border-radius: 5px; box-shadow: #0000003b 5px 5px 3px 0px; width: auto !important; } #header > div.right.half > div > div.actionable.buttons { filter: invert(1) hue-rotate(180deg); } #header .edition .button { background: #234d82; color: rgb(255, 255, 255); border: none; text-shadow: none; } #header .edition ul { background-color: #0b0b1a; border: none; box-shadow: #5bfcdf2b 0px 0px 5px 1px; } #header .edition ul li { padding: 10px; } #prompt-message { background: rgb(87, 87, 87); border-color: rgb(91, 252, 223); } #prompt-message > del { color: rgb(91, 252, 223); line-height: 20px; font-size: 20px; transition: .2s; } #prompt-message > del:hover { background: transparent; text-shadow: 0px 0px 5px; transition: .2s; } #sidebar > div > div.herald-boxes { background: rgba(16, 16, 16) } .gsc-search-box-tools .gsc-search-box .gsc-input { background: rgb(16, 16, 16)!important; color: white; } input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus { border-color: rgb(40, 40, 40); } .gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus { background: rgb(16, 16, 16); border-color: rgb(40, 40, 40); border-radius: 0; height: 33px; } .gsc-results .gsc-cursor-box .gsc-cursor-page { background: rgb(40, 40, 40); border-radius: 14px; padding: 7px; } .gsc-results .gsc-cursor-box .gsc-cursor-current-page { color: rgb(91, 252, 223); } #content-zone > div > table:nth-child(3) > tbody > tr > td { margin-top: 0px!important; } #header #searchbox { width: 300px !important; } #header #searchbox input { border: 1px solid rgba(253, 253, 253, .2); background: #20203a; color: white; width: 260px; padding: 5px 10px; } #searchbox form.search button { background-color: #163358bd; border: 0; cursor: pointer; background-position: -120px -3px; background-size: 3500%; filter: brightness(2); height: 100%; right: 0; top: 0; bottom: 0; width: 35px; transition: ease 0.3s; } #searchbox form.search button:hover { background-color: #08253cbd; transition: ease 0.3s; } #searchbox > form > ul { border: none; padding-top: 10px; } form.search .search-suggest li { padding: 10px 15px; background: #212158!important; } form.search .search-suggest li.selected, form.search .search-suggest li:hover { background: #2e2e67!important; } .ror-css .star_rating .stars { background: url(https://i.imgur.com/2T9gzbl.png) repeat!important; background-size: 20% 100%!important; } .ror-css .star_rating.no-rating { background: rgb(40, 40, 40); } .ror-css .star_rating { background: rgb(40, 40, 40); } /* 3 Column Grid */ .herald-boxes { display: grid; grid-template-columns: repeat(3, 1fr) !important; width: 100%; } #mainfeed #aside { background-color: #0b0b1a; display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 5px; padding: 10px; margin-bottom: 20px; width: 1180px !important; box-shadow: #0b0b1a4d 5px 5px 10px 1px; border-radius: 10px 10px 10px 10px; } #mainfeed #aside .hook { font-size: 1rem; } #mainfeed #aside .more { background-color: #20203a; } #mainfeed #aside .more:hover { background-color: #2b5c61; } #mainfeed #aside.herald-boxes .box { background-color: #20203a; margin: 0; padding: 5px; } /* Load More */ #load-more{ display: block; } #load-more .button{ display: grid; background: #0b0b1a; border: none; box-shadow: #0000004a 3px 3px 5px 0px; height: 40px; font-size: 1.2rem; align-items: center; justify-content: space-around; } #load-more .button:hover{ background: #20203a; } /* Weird Gradient Fix */ html.grid-mode-not-1 .grid-view .mainfeed-section .herald.box .snippet:before { display: none; } `; } if (typeof GM_addStyle !== "undefined") { GM_addStyle(css); } else { const styleNode = document.createElement("style"); styleNode.appendChild(document.createTextNode(css)); (document.querySelector("head") || document.documentElement).appendChild(styleNode); } })();