/* River Bank Theme by IronShears
* Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche
* Header image, river texture, and logo by IronShears, released under CC-BY-SA 3.0
* Fancy Border and Fancy hr Texture by Stygian Blue, edited by IronShears, released under CC-BY-SA 3.0
* Icon by Stygian Blue, released under CC-BY-SA 3.0
* Fonts used are */
/*font imports*/
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
@import url('https://crimone.github.io/typefaces/BaiWuChangKeKeTi/bwckkt.css');
@import url('https://crimone.github.io/typefaces/CangJiGaoDeGuoMiaoHei/cjgdgmh.css');
@import url('https://crimone.github.io/typefaces/JiYingHuiPianHeYuan/jyhphy.css');
/*dust jacket import*/
@import url("https://scp-wiki-cn.wdfiles.com/local--code/wanderers%3Adustjacket-theme/1");
:root:lang(cn) {
/*Header*/
--gold-foil: linear-gradient( rgb(var(--dark-accent)), rgb(var(--gray-monochrome)));
--gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverheader.gif");
--logo-image: url("https://evernight-aquarium.wdfiles.com/local--files/files/LANTERN_PROJECT.png");
/* Theme colors*/
--white-monochrome: 168, 188, 185;
/*offwhite-greenish page color*/
--light-pale-gray-monochrome: 76, 131, 161;
/* off-white paper edge color */
--gray-monochrome: 76, 131, 161;
/* light-blue*/
--dark-gray-monochrome: 23, 34, 58;
/* black*/
--light-gray-monochrome: 48, 80, 49;
/* dark green*/
--bright-accent: 119, 141, 118;
/* light green*/
--dark-accent: 23, 34, 58;
/* black*/
--alt-accent: 237, 220, 183;
--very-light-gray-monochrome: var(--white-monochrome);
--medium-accent: var(--bright-accent);
--swatch-menubg-color: var(--light-gray-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--alt-accent);
--black-monochrome: var(--dark-accent);
-login-myaccount-hover-bg-color: var(--bright-accent);
--rating-module-text-color: var(--alt-accent);
--link-color: var(--light-gray-monochrome);
--rating-module-button-plus-color: var(--white-monochrome);
--rating-module-button-negative-color: var(--dark-gray-monochrome);
--rating-module-button-cancel-color: var(--gray-monochrome);
--rating-module-button-credit-color: var(--swatch-secondary-color);
/*Extra*/
--river-text-content: "河岸 主题版式";
--river-texture: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/waves.png');
--river-texture-trans: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransleft.png');
--river-texture-trans-left: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransright.png');
--fancy-hr: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverhr.png");
--fancy-border: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverborder.png");
/* Fonts */
--body-font: 'Lato', sans-serif;
--title-font: 'Dosis', "JiYingHuiPianHeYuan", sans-serif;
--UI-font: 'Dosis', "JiYingHuiPianHeYuan", sans-serif;
}
/*BODY STUFF*/
#page-content a{
font-weight: bold;
text-decoration: underline;
}
body{
background-color: rgb(var(--white-monochrome));
}
blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
border-style: dashed;
border-radius: 10px;
background-color: rgb(var(--very-light-gray-monochrome));
}
.fancyborder{
border-image-source: var(--fancy-border);
border-image-slice: 300;
border-image-repeat: round;
}
.fancyhr hr{
border-image-source: var(--fancy-hr);
border-top: 4vw solid transparent;
}
div.page-watch-options a, div.page-watch-options a:visited {
--hover-link-color: red;
}
/*header*/
div#extra-div-1 {
background: var(--gradient-header);
background-repeat: repeat;
background-position: left;
background-size: auto 100%;
}
#login-status #account-options {
background-image: none;
background-color: rgb(var(--black-monochrome));
}
#header{
--login-username-color: var(--alt-accent);
--login-myaccount-color: var(--alt-accent);
}
#login-status {
color: rgb(var(--black-monochrome));
}
#login-status #account-topbutton {
background-color: rgb(var(--alt-accent));
}
#header h1 a {
font-family: "CangJiGaoDeGuoMiaoHei", sans-serif;
font-size: 200%;
}
#header h1 a, #header h1 a::before, #header h1 a::after {
color: rgb(var(--white-monochrome));
}
#header h1 a::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
}
#header h1 a::after {
background-repeat: repeat-x;
background-position: center;
background-size: 6rem;
background-image: none;
animation: wave 50s linear infinite;
}
/*Gold foil removal surgery*/
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
background-image: var(--gold-foil);
}
hr {
background: var(--gold-foil);
}
#content-wrap {
background-image: var(--river-texture);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 100px;
animation: wave-bottom 50s linear infinite;
}
/*Animations*/
@keyframes wave{
0% {
background-position: 100% 0;
}
100% {
background-position: -99% 0;
}
}
@keyframes wave-bottom{
0% {
background-position-x: 100%;
}
100% {
background-position-x: -99%;
}
}
@keyframes wave-bottom-left{
0% {
background-position-x: -99%;
}
100% {
background-position-x: 100%;
}
}
/*River Title*/
div.rivertext {
height: 12vw;
}
div.rivertext h1 {
font-family: "CangJiGaoDeGuoMiaoHei", sans-serif !important;
font-size: 10vw !important;
}
div.rivertext h1::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
content: var(--river-text-content);
}
div.rivertext h1::after {
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
background-image: var(--river-texture);
animation: wave 50s linear infinite;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
content: var(--river-text-content);
}
div.rivertext h1,
div.rivertext h1::before,
div.rivertext h1::after {
position: absolute;
left: 0;
right: 0;
}
/*page style*/
#page-content h1{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 500%;
margin-bottom: -20px;
}
#page-content h2{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 400%;
margin-bottom: -15px;
}
#page-content h3{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 300%;
margin-bottom: -12px;px;
}
/*rating bottom page*/
#who-rated-page-area {
background-color: rgb(var(--white-monochrome));
border-radius: 10px;
padding: 9px;
border-style: dashed;
border-color: rgb(var(--bright-accent));
}
/*footer*/
#footer a {
background-color: rgb(var(--black-monochrome));
border-radius: 2px;
margin-left: 10px;
margin-right: 10px;
background-image: none;
}
#license-area a, #license-area a:visited {
pointer-events:auto;
background-color: rgb(var(--black-monochrome));
border-radius: 2px;
margin-left: 10px;
margin-right: 10px;
}
#license-area a:hover{
color: rgb(var(--black-monochrome));
}
#footer {
--footer-bg-color: transparent;
--footer-text-color: rgb(var(--black-monochrome));
--footer-link-color: var(--swatch-text-secondary-color);
--footer-link-hover-color: var(--swatch-primary-darkest);
font-size: 1rem;
height: 100px;
background-image: var(--river-texture-trans-left);
background-position-y: center;
background-size: 100px;
z-index: 1;
position: relative;
margin-top: -60px;
animation: wave-bottom-left 50s linear infinite;
pointer-events: auto;
padding-bottom: 30px;
}
#license-area{
font-size: 1rem;
color: rgb(var(--black-monochrome));
pointer-events: none;
background-color: transparent;
height: 100px;
background-image: var(--river-texture-trans);
background-position-y: center;
background-size: 100px;
z-index: 3;
position: relative;
margin-top: -60px;
animation: wave-bottom 50s linear infinite;
padding-top: 30px;
}
/* === 中文适配 === */
.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a, .rate-box-with-credit-button .page-rate-widget-box .rate-points, .rate-box-with-credit-button .page-rate-widget-box .rateup, .rate-box-with-credit-button .page-rate-widget-box .ratedown, .rate-box-with-credit-button .page-rate-widget-box .cancel, .rate-box-with-credit-button .page-rate-widget-box .rateup a, .rate-box-with-credit-button .page-rate-widget-box .ratedown a, .rate-box-with-credit-button .page-rate-widget-box .cancel a {
line-height: calc(var(--rating-module-height)*1.25);
font-family: var(--UI-font);
}
#u-credit-view div.modalbox>div:first-of-type h2 {
margin-bottom: 0;
}
#u-credit-view div.modalbox>div:first-of-type h2 > span {
font-family: var(--header-font);
font-size: 16.25px;
}
@media only screen and (min-width: 56.25rem) {
#u-credit-view div.modalbox>div:first-of-type h2 > span {
font-size: 26.25px;
}
}
