A more modern layout for Anime News Network. Its main goal is to make readability easier.
目前为
/* ==UserStyle==
@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
@License MIT License
==/UserStyle== */
@-moz-document domain("animenewsnetwork.com"),
domain("animenewsnetwork.co.uk") {
#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;
}
}
@-moz-document domain("animenewsnetwork.com"),
domain("animenewsnetwork.co.uk") {
::-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;
}
}