Anime News Network - Reimagined

A more modern layout for Anime News Network. Its main goal is to make readability easier.
当前为 2024-03-11 提交的版本，查看最新版本。
换行
/* ==UserStyle==
@name           Anime News Network - Reimagined
@namespace      https://github.com/ft-scobra
@version        1.2.1
@description    A more modern layout for Anime News Network. Its main goal is to make readability easier.
@author         Scøbra
@supportURL 	https://github.com/ft-scobra/Anime-News-Network-Reimagined/issues
@license        MIT
==/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;
	}

	a
	{
		text-decoration: none;
		transition: ease 0.2s;
	}

	a:hover
	{
		text-decoration: underline;
		background-color: #0c1223a1;
		transition: ease 0.2s;
	}
}

@-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;
	}

	nav#mega > div.menu > div
	{
		background-color: #0b0b1a;
		margin: 0 20px;
	}

	nav#mega > div.menu.on > span
	{
		background-color: #0b0b1a;
	}

	#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);
	}

	.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);
	}

	.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);
	}

	#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;
	}

	form.search input.rounded-textbox
	{
		background: #20203a
	}

	#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%;
	}

	/* 	Highlight Panel */
	#mainfeed #aside
	{
		background-color: #0b0b1a;
		display: grid !important;
		grid-template-columns: auto !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.herald-boxes .box
	{
		grid-row: 1;
	}

	#mainfeed #aside .more:nth-last-of-type(n)
	{
		grid-row: 2;
	}

	#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;
	}

	/* 	"Subscribe to ANN Newsletter" Color Change */
	.info
	{
		color: #fff;
		background: #0b0b1a;
	}

	.info.box
	{
		display: block;
		border: none;
		box-shadow: 3px 3px 5px 0px #00000042;
	}

	/* Weird Gradient Fix */
	html.grid-mode-not-1 .grid-view .mainfeed-section .herald.box .snippet:before
	{
		display: none;
	}
}

@-moz-document url-prefix("https://www.animenewsnetwork.com/encyclopedia/"),
url-prefix("https://www.animenewsnetwork.com/review/"),
url-prefix("https://www.animenewsnetwork.com/this-week-in-games/"),
url-prefix("https://www.animenewsnetwork.com/interest/"),
url-prefix("https://www.animenewsnetwork.com/daily-briefs/"),
url-prefix("https://www.animenewsnetwork.com/news/")
{

	/*	"Have you Seen This" */
	.my-anime-rating,
	.encyc-interactive
	{
		background-color: #0b0b1a !important;
		border: none !important;
		box-shadow: 3px 3px 5px 0px #00000042;
		padding: 20px 10px !important;
	}

	.my-anime-rating,
	.encyc-interactive a
	{
		padding: 7px;
		color: rgb(91, 252, 223) !important;
		line-height: 1.5rem;
		transition: ease 0.07s;
	}

	.my-anime-rating,
	.encyc-interactive a:hover
	{
		background-color: #2b5c61;
		transition: ease 0.07s;
	}

	/* 	Herald Boxes / Sidebar */
	#sidebar
	{
		padding: 5px 12px;
	}

	#sidebar > div
	{
		background-color: #fff0;
		box-shadow: none;
		margin-top: 60px;
	}

	#sidebar > div > div.herald-boxes
	{
		background: #131322;
	}

	#sidebar .box
	{
		background: #20203a;
	}

	#sidebar .options-menu
	{
		background: #131322;
		padding: 2px 12px;
		min-width: 100%;
	}

	#sidebar .options-menu div.icon,
	.open-preferences div.icon
	{
		background-color: #fff0;
		font-size: 18px;
		width: 20px;
		height: 18px;
		transition: ease 0.2s;
	}

	#sidebar .options-menu div.icon:hover,
	.open-preferences div.icon:hover
	{
		background-color: #08253cbd;
		transition: ease 0.2s;
		font-size: 20px;
		width: 20px;
		height: 18px;
	}

	.herald-boxes
	{
		display: grid;
		grid-template-columns: repeat(1, 1fr) !important;
		width: 100%;
		gap: 17px;
		padding: 5px 12px;
	}

	/* Main Content */
	#maincontent #page-title,
	#content-zone
	{
		margin: 5px;
	}



	/* Ad Nag */
	#maincontent > div:last-child
	{
		background: #131324d9 !important;
	}

	#maincontent > div:last-child .adblock_nag
	{
		background: #1c1c33 !important;
		border: solid 2px #0e0e1a;
		border-radius: 10px;
		box-shadow: #00000073 3px 3px 10px 3px;
	}
}