/* Once Upon A Time WL Theme by IronShears
* Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche
* Paper texture by Brent Leimenstoll and edited by IronShears, released under CC-BY-SA 2.0: https://www.flickr.com/photos/48046976@N08/8416357035
* Header image, gold foil texture, and logo by IronShears, released under CC-BY-SA 3.0
* Fonts used are */
/*dust jacket import*/
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");
/*font-imports*/
@import url('https://fonts.googleapis.com/css2?family=Quintessential&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600');
:root:lang(zh) {
/*Header*/
--gradient-header: url("https://i.imgur.com/8ExFD1y.png");
--logo-image: url("https://i.imgur.com/lQXz8jq.png");
--paper-texture: url("https://i.imgur.com/zypUmPn.png");
--gold-foil: url("https://i.imgur.com/DMm97xi.jpg");
--fancy-hr: url("https://i.imgur.com/jcFoqz4.png");
--fancy-border: url("https://i.imgur.com/PZQEGUh.png");
/* Theme colors*/
--white-monochrome: 44, 33, 25;
/*dark brown page color*/
--light-pale-gray-monochrome: 190, 166, 147;
/* off-white paper edge color */
--gray-monochrome: 133, 63, 66;
/* red */
--dark-gray-monochrome: 177, 104, 71;
/* orange */
--light-gray-monochrome: 204, 134, 80;
/* yellow */
--bright-accent: 241, 194, 85;
/* gold */
--dark-accent: 29, 28, 31;
/* black for Editor text/code/smallest nested blockquotes */
--shadow-accent: 32, 1, 0, .4;
--alt-accent: var(--bright-accent);
--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(--bright-accent);
/* Fonts */
--body-font: 'Quintessential', cursive;
--title-font: 'Quintessential', cursive;
}
/*Header*/
div#extra-div-1 {
background: var(--gradient-header);
background-repeat: repeat;
background-position: center;
background-size: auto 100%;
}
#login-status #account-options{
background-image: var(--paper-texture);
background-repeat: repeat;
background-position: center;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
#header h1 a::before{
text-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
#header h1 a,
#header h1 a::before,
#header h1 a::after {
color: rgb(var(--bright-accent));
}
#header h1 a::after {
background-repeat: repeat;
background-position: center;
background-size: initial;
background-image: var(--gold-foil) !important;
}
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
background-image: var(--gold-foil) !important;
}
.fancyborder {
border-image: var(--fancy-hr) 600 round;
border-image-width: 6;
}
.fancyhr>hr {
background-image: none !important;
border-image-source: var(--fancy-border);
}
hr {
background: var(--gold-foil) !important;
height: .125rem;
border: 0;
border-top: 0.0625rem solid transparent;
background-color: rgba(var(--bright-accent));
background-size: cover;
}
#header::before {
opacity: 1;
}
#top-bar{
--dropdown-bg-color: var(--dark-gray-monochrome);
}
#header div[class*=top-bar]>ul>li ul>li{
background-image: var(--paper-texture) !important;
margin-top: 5px !important;
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
#header div[class*=top-bar]>ul>li ul>li.sfhover{
background-image: var(--paper-texture) !important;
background-image: none !important;
margin-top: 5px !important;
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
#top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type:hover{
background-image: var(--paper-texture) !important;}
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button{
background-color: rgb(var(--light-gray-monochrome)) !important;
}
/*blockquotes*/
blockquote{
background-repeat: repeat;
background-position: center;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 5px 5px 5px rgba(var(--shadow-accent)) !important;
padding:15px;
margin-top: 15px;
margin-left: 3.44%;
margin-right: 3.44%;
background-color: rgb(var(--gray-monochrome)) !important;
background-image: var(--paper-texture);
}
blockquote>blockquote {
background-repeat: repeat;
background-position: center;
background-color: rgb(var(--dark-gray-monochrome)) !important;
padding:15px;
margin: .7vw !important;
background-image: var(--paper-texture);
}
blockquote>blockquote>blockquote {
background-repeat: repeat;
background-position: center;
background-color: rgb(var(--light-gray-monochrome)) !important;
padding:15px;
background-image: var(--paper-texture);
}
blockquote>blockquote>blockquote>blockquote {
background-repeat: repeat;
background-position: center;
background-color: rgb(var(--light-pale-gray-monochrome)) !important;
color: rgb(var(--dark-accent)) !important;
padding:15px;
background-image: var(--paper-texture);
font-family: 'Merienda', cursive !important;
}
/* Side Bar*/
.close-menu::after {
background-color: rgb(var(--gray-monochrome)) !important;
}
#side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded{
box-shadow: none;
border-image: var(--gold-foil) 6 round;
border-bottom: solid rgb(var(--black-monochrome)) !important
}
.side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text{
margin: 5px !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
}
#side-bar {
box-shadow: 3px 3px 3px rgba(var(--shadow-accent)) !important;
background: rgb(var(--white-monochrome)) var(--paper-texture) repeat scroll top center !important;
--sidebar-bg-color: var(--gray-monochrome);
}
.side-block{
padding: 1vw;
background-color: rgb(var(--gray-monochrome)) !important;
background-image: var(--paper-texture) !important;
border-left: none !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
#side-bar div.menu-item .text, #side-bar div.menu-item a, #side-bar div.menu-item a:visited{
background-color: rgb(var(--dark-gray-monochrome)) !important;
background-image: var(--paper-texture) !important;
background-repeat: repeat;
background-position: center;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-left: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
margin-top: 5px !important;
}
#side-bar div.menu-item input.text{
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
/*Page*/
.page-source{
font-family: 'Raleway', sans-serif;
}
/*table*/
table, th, td, tr {
background-image: var(--paper-texture);
background-color: rgb(var(--white-monochrome)) !important;
border-collapse: separate !important;
border-image: var(--gold-foil) 6 round !important;
border-width: 2px !important;
}
#page-content div.b-tables table.wiki-content-table td, #page-content table.wiki-content-table td{
background-image: var(--paper-texture) !important;
border-image: var(--gold-foil) 6 round !important;
}
#page-content div.b-tables table.wiki-content-table th, #page-content table.wiki-content-table th{
background-image: var(--paper-texture) !important;
border-image: var(--gold-foil) 6 round !important;
border-width: 2px !important;
}
/*tabs*/
yui-navset yui-navset-top{
border: none !important;
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome)) !important;
}
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 5px 5px 5px rgba(var(--shadow-accent)) !important;
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome)) !important;
}
.yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before{
border-radius: 0;
}
.yui-navset .yui-nav a:before{
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
box-shadow: 0px 5px 5px rgba(var(--shadow-accent));
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome)) !important;
}
@-webkit-keyframes tab-active {
0% {
margin-top: 0;
margin-right: 0;
padding-top: 0;
}
100% {
margin-top: 0em;
margin-right: 0;
padding-top: 0em;
}
}
@keyframes tab-active {
0% {
margin-top: 0;
margin-right: 0;
padding-top: 0;
}
100% {
margin-top: 0em;
margin-right: 0;
padding-top: 0em;
}
}
.code {
background-repeat: repeat;
background-position: center;
background-color: rgb(var(--light-pale-gray-monochrome)) !important;
color: rgb(var(--dark-accent)) !important;
padding:15px;
background-image: var(--paper-texture);
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 5px 5px 5px rgba(var(--shadow-accent)) !important;
}
.code * {
font-family: 'Merienda', cursive !important;
}
div.page-watch-options a, div.page-watch-options a:visited{
--hover-link-color: var(--dark-accent);
}
#content-wrap {
background-color: rgb(var(--white-monochrome)) !important;
background-image: var(--paper-texture) !important;
}
.content.modal-body{
color: rgb(var(--black-monochrome));
}
body {
background-color: rgb(var(--white-monochrome)) !important;
background-image: var(--paper-texture) !important;
}
#page-content{
font-size: 18px;
}
/*Editor*/
#main-content{
--editor-icon-color: var(--dark-accent);
}
.page-rate-widget-box {
background-image: var(--paper-texture) !important;
background-color: rgb(var(--gray-monochrome)) !important;
background-repeat: repeat;
background-position: center;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
.wd-editor-toolbar-panel{
padding: 10px !important;
}
form#edit-page-form .wd-editor-toolbar-panel{
border: none !important;
}
form#edit-page-form .wd-editor-toolbar-panel div>ul>li>ul a{
background-image: var(--paper-texture) !important;
background-repeat: repeat;
background-color: rgb(var(--gray-monochrome)) !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
border-left: none !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
font-family: 'Raleway', sans-serif;
}
form#edit-page-form .wd-editor-toolbar-panel a{
background-image: var(--paper-texture) !important;
background-repeat: repeat;
background-color: rgb(var(--dark-gray-monochrome)) !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
font-family: 'Raleway', sans-serif;
}
form#edit-page-form, form#edit-page-form :not(#edit-page-textarea)>tbody>tr{
border: none !important;
font-family: 'Raleway', sans-serif;
}
form#edit-page-form #edit-page-textarea{
font-family: 'Raleway', sans-serif!important;
}
textarea#edit-page-comments{
color: rgb(var(--dark-accent)) !important;
font-family: 'Raleway', sans-serif;
}
textarea:not(:placeholder-shown){
font-family: 'Raleway', sans-serif;
background-image: var(--paper-texture) !important;
background-repeat: repeat;
background-color: rgb(var(--light-pale-gray-monochrome));
color: rgb(var(--dark-accent));
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)) !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-radius: 0px;
font-family: 'Merienda', cursive;
}
:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .button, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .btn{
border-radius: 0px;
background-image: var(--paper-texture) !important;
background-repeat: repeat;
background-color: rgb(var(--dark-gray-monochrome)) !important;
color: rgb(var(--dark-accent));
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
font-family: 'Merienda', cursive;
border-right: none !important;
border-bottom: none !important;
}
.wd-editor-toolbar-panel{
border-top: 0px;
border-left: 0px;
border-bottom: 0px;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)) !important;
background-image: var(--paper-texture) !important;
background-color: rgb(var(--swatch-menubg-color)) !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
}
form#edit-page-form table.form:first-of-type td:last-of-type input:not(:placeholder-shown) {
background-color: rgb(var(--dark-gray-monochrome));
background-image: var(--paper-texture) !important;
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
border-radius: 0px;
font-family: 'Raleway', sans-serif;
}
form#edit-page-form:not(.data-form){
background-color: rgb(var(--gray-monochrome));
background-image: var(--paper-texture) !important;
}
form#edit-page-form .wd-editor-toolbar-panel a{
color: rgb(var(--dark-accent));
}
form#edit-page-form{
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:placeholder-shown) {
background-color: rgba(var(--dark-gray-monochrome));
border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-left: none !important;
border-top: none !important;
box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent));
}
/*Footer*/
.footnotes-footer{
background-image: var(--paper-texture);
background-color: rgba(var(--gray-monochrome));
border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 3px 3px 3px rgba(var(--shadow-accent));
}
.footnotes-footer a[href*=javascript]:before{
color: rgb(var(--dark-accent));
}
#footer{
--footer-link-hover-color: var(--dark-accent);
}
#license-area {
--license-link-hover-color: var(--dark-accent);
}
div#footer{
background-image: var(--paper-texture);
background-color: rgb(var(--gray-monochrome));
box-shadow: inset 0px 3px 3px rgba(var(--shadow-accent));
}
#license-area {
background-image: var(--paper-texture);
box-shadow: inset 0px 3px 3px rgba(var(--shadow-accent));
}