/*
Theme of the Doctor's Doki Doki Friend Series No.1831
[2022 Wikidot Theme]
--source: http://pseudo-scp-jp.wikidot.com/bas:hakase-friend-no1831-theme
--author: Blood_and_Salt
--license: CC BY-SA 3.0 ( http://creativecommons.org/licenses/by-sa/3.0 )
Based on:
雑踏テーマ by sendoh-oroka
東弊舎テエマ by RTa_technology and SOYA-001
MC&D Theme by Randomini and stormbreath
新世代東弊重工テーマ by RTa_technology and SOYA-001
Flopstyle CSS by Lt Flops
Penumbra Theme by EstrellaYoshte
Dustjacket Sigma-9 Theme by DrMacro
Image Credits:
博士.png
--source: http://scp-jp.wikidot.com/goi-icon
--author: tsucchii0301
--license: CC BY-SA 3.0
--release-year: 2017
[Untitled]
--source: https://pixabay.com/illustrations/a-heart-eye-transparent-background-2501404/
--author: Alexey_Hulsov
--license: CC0
--release-year: 2017
wl_hr.png
--source: http://wanderers-library.wikidot.com/component:theme
--author: Woedenaz
--license: CC BY-SA 3.0
--release-year: 2021
*/
/* Japanese Font */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/* English Font */
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
/*
Sigma9 Customizable Header
--source: http://scp-jp-sandbox3.wikidot.com/draft:3396310-168-9905
--author: ukwhatn
--license: CC BY-SA 3.0 ( http://creativecommons.org/licenses/by-sa/3.0 )
*/
#container-wrap {
--c-header: linear-gradient(180deg, #d4ba62 0%, #d89ee4 100%);
--c-topbar: #181b39;
}
div#container-wrap {
background: var(--c-header) top left repeat-x;
background-size: 100px 141px;
}
div#container-wrap::after {
content: "";
display: block;
position: absolute;
top: 140px;
left: 0;
width: 100%;
height: 21px;
box-shadow: 0px 0px 0px #000;
background: var(--c-topbar) top left repeat-x;
}
/* COLORS */
:root {
/*
Inspired by:
大正150年 テーマ by Mishary
Anderson Robotics Theme by Croquembouche
Thanatomania テーマ by KanKan
Dr. Wondertainment Theme by DarkStuff and taylor_itkin
Just Girly Things Theme by stormbreath
*/
--body-bg: #e6e6e6;
--top-menu-bg: rgba(24, 27, 57, 0.85);
--toc-corner-shadow: rgba(36, 49, 81, 0.1);
--code-border: #9400d3;
--code-bg: #fff5ee;
--pop-up-title-bg: #effdf5;
--pop-up-button-fg: #131b39;
--pop-up-shade: #3e5166;
--kachiiro: #181b39;
--neriiro: #ebe0ce;
--hakudou: #d3dbe2;
--aitetsu: #003a47;
--aonibi: #324356;
--suzumecha: #954039;
--geppaku: #eaf4fc;
--nuregarasu: #000b00;
--ginnezu: #bbbcbf;
--fukaai: #004150;
--white-accent-1: #fff;
--white-accent-2: #fdfdf5;
--white-accent-3: #f0f8ff;
--gray-accent: #ccc;
--dark-gray-accent: #555;
--black-accent: #180614;
--blue-accent: #243151;
--vivid-blue-accent: #406694;
--light-blue-accent: #abbfef;
--mcd-accent-1: #3e2646;
--mcd-accent-2: #603b6c;
--mcd-accent-3: #282053;
--mcd-accent-4: #af4fcf;
--mcd-accent-5:linear-gradient(to bottom, #371f3d, #282053, #8d6ba9);
--mcd-accent-6: #87a96b;
--mcd-accent-7:linear-gradient(to bottom, #7e608a, #946ba9, #8c3ca6);
--ar-light-accent: #295183;
--thanatoma-accent: #5a5e8e;
--wonder-accent: #780d8e;
--girl-accent: #f986b6;
--girl-light-accent: #f9ddf2;
/*
#f0f8ff - Alice Blue
#fff5ee - Seashell
#9400d3 - Dark Violet
*/
--image-align: center;
--image-width: 200px;
}
body {
color: #181b39;
background: #e6e6e6;
font-family: 'Oxygen', 'Noto Sans JP', sans-serif;
}
a {
color: #406694;
text-decoration: none;
}
a.newpage {
color: #abbfef;
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: transparent;
}
/* HEADER */
#header {
background: url('http://scp-jp.wdfiles.com/local--files/goi-icon/%E5%8D%9A%E5%A3%AB.png') 10px 40px no-repeat;
background-size: 100px 100px;
}
@media (max-width: 479px) {
#header {
background-position: 0 5.5em;
background-size: 55px 55px;
}
}
@media (min-width: 480px) and (max-width: 580px) {
#header {
background-position: 0.5em 4.5em;
background-size: 66px 66px;
}
}
@media (min-width: 581px) and (max-width: 767px) {
#header {
background-position: 0.5em 4em;
background-size: 77px 77px;
}
}
#header h1 a span {
font-size: 0px;
}
#header h1 a:before {
content: "博士のわくわく実験ラボ";
color: #406694;
text-shadow: 0px 0px 0px #000;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 700;
}
#header h2 span {
font-size:0px;
padding: 4px;
}
#header h2:after {
content: "楽しもうね！";
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 500;
color: #243151;
padding: 19px 0;
text-shadow: 0px 0px 0px #000;
white-space: pre;
font-size: 120%;
}
@media (max-width: 479px) {
#header h1 a:before {
font-size: 85%;
}
#header h2:after {
font-size: 105%;
padding: 11px 0;
}
}
#search-top-box {
top: 32px;
bottom: auto;
}
#search-top-box-input {
border: solid 1px #3e2646;
color: #ebe0ce;
background-color: #603b6c;
box-shadow: none;
}
#search-top-box-input:hover,
#search-top-box-input:focus {
border: solid 1px #fdfdf5;
color: #fff;
background-color: #282053;
box-shadow: none;
}
#search-top-box-form input[type=submit] {
border: solid 1px #af4fcf;
color: #ebe0ce;
background-color: #282053;
background: linear-gradient(to bottom, #371f3d, #282053, #8d6ba9);
box-shadow: none;
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
border: solid 1px #fdfdf5;
color: #fff;
background-color: #87a96b;
background: linear-gradient(to bottom, #7e608a, #946ba9, #8c3ca6);
box-shadow: none;
}
#login-status {
color: #243151;
}
#login-status a {
background: transparent;
color: #406694;
}
#login-status ul a {
color: #406694;
}
#account-topbutton, #account-options {
background-color: #ebe0ce;
border: 1px solid #243151;
}
/* TOP BAR */
#top-bar a {
color: #fff;
}
#top-bar ul li ul {
border: solid 1px #181b39;
border-top: none;
overflow: hidden;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
background: rgba(24, 27, 57, 0.85) !important;
border-right: solid 1px #181b39;
border-left: solid 1px #181b39;
color: #fff;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
border-top: solid 1px #fff;
font-family: 'Oxygen', 'Noto Sans JP', sans-serif;
font-weight: 400;
}
#top-bar ul li a,
#top-bar ul li.sfhover a {
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 500;
}
/* SIDE BAR */
#side-bar .side-block {
border-radius: 0;
position: relative;
border: none;
box-shadow: 0px 0px 4px #181b39;
color: #181b39;
background-color: #d3dbe2 !important;
}
#side-bar .side-block a {
color: #295183;
}
#side-bar .collapsible-block-unfolded-link,
#side-bar .collapsible-block-unfolded {
border-color: #243151;
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
color: #243151;
}
#side-bar .heading {
border-color: #d3dbe2;
color: #181b39;
}
#side-bar div.menu-item img {
filter: hue-rotate(180deg);
}
#side-bar .collapsible-block-folded,
#side-bar .collapsible-block-unfolded-link {
position: relative;
z-index: 0;
}
#side-bar .collapsible-block-folded::before,
#side-bar .collapsible-block-unfolded-link::before {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: inherit;
filter: hue-rotate(180deg) brightness(1.7);
z-index: -1;
}
#side-bar hr {
background-color: #243151;
}
#side-bar .side-block hr {
background-color: #243151;
}
img.image[title="SCP-JP Discord Chat"],
img.image[title="SCP-JP Twitter"] {
filter: hue-rotate(310deg) !important;
}
#side-bar:target .close-menu {
background: rgb(1, 134, 255 / 14%) 1px 1px repeat;
}
@media (max-width: 767px) {
#side-bar {
background-color: rgba(20, 20, 70, 0.85);
}
#side-bar hr {
background-color: #324356;
}
}
div.open-menu a {
color: #243151 !important;
border-color: #243151 !important;
background: #ebe0ce !important;
}
/* INTERWIKI */
#side-bar .scpnet-interwiki-wrapper iframe.scpnet-interwiki-frame {
border: none;
border-radius: 0;
box-shadow: 0px 0px 4px #181b39;
color: #181b39;
background-color: #d3dbe2 !important;
}
/* PAGE RATING MODULE */
.page-rate-widget-box {
box-shadow: 0px 0px 0px #000;
}
.page-rate-widget-box .rate-points {
background-color: #243151 !important;
border: solid 1px #243151;
color: #ebe0ce;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: #f0f8ff;
border-bottom: solid 1px #243151;
border-top: solid 1px #243151;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
color: #243151;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: #243151;
color: #243151;
}
.page-rate-widget-box .cancel {
background-color: #243151;
border: solid 1px #243151;
}
.page-rate-widget-box .cancel a {
color: #f0ffff;
}
.page-rate-widget-box .cancel a:hover {
background: #243151;
color: #f0ffff;
}
.creditRate.creditModule .creditButton {
background-color: #243151;
border: solid 1px #243151;
box-shadow: 0px 0px 0px #000;
}
.creditRate.creditModule .creditButton a:hover {
color: #243151;
}
.modalbox .modalbox-title {
background: #004150 !important;
color: #fff !important;
border-radius: 0 !important;
}
.modalbox {
box-shadow: 0 2px 6px #ccc !important;
border-radius: 0 !important;
background-color: #fff !important;
}
.modalbox > .modalbox-title > h2 > span {
color: #fff;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
}
/* TITLES */
h1, #page-title {
color: #406694;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 700;
}
h2, h3, h4, h5, h6, h7 {
color: #181b39;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 700;
}
#page-title {
font-size: 1.65rem;
border-bottom: 1px solid #243151;
}
/* SECTION HEADERS */
.header-it {
margin: 20px 0;
padding: 0 10px;
background-color: #ebe0ce;
background-image: linear-gradient(225deg, #243151 16px, transparent 0);
border: solid 2px #243151;
color: #243151;
}
.header-it h1 {
margin: 18px 0 14px;
text-align: center;
color: #243151;
font-family: 'Noto Serif JP', 'MS PMincho', 'ＭＳ Ｐ明朝', serif;
font-weight: 700;
font-size: 22px;
}
.header-2020-jp {
padding: 10px;
margin: 40px 0 20px;
border-top:solid 1px #243151;
border-bottom: solid 1px #243151;
text-align: center;
color: #780d8e;
line-height: 1.2;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 700;
font-size: 20px;
}
.header-2020-jp p {
margin: 0;
padding: 0;
}
/* DIVIDERS */
.bas-divider-eye {
background-image: url('http://scp-jp-storage.wdfiles.com/local--files/file%3A7255862-63-mnwi/heart-eye.png');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-color: transparent;
background-size: 70px;
height: 50px;
margin: 6px auto;
padding: 0px;
width: 70px;
filter: hue-rotate(240deg) saturate(78%) brightness(44%);
}
.bas-divider-wl {
background-image: url('http://scp-jp-storage.wdfiles.com/local--files/file%3A7255862-64-699g/wl-hr.png');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-color: transparent;
background-size: contain;
height: 35px;
margin: 20px auto;
padding: 0px;
width: 100%;
filter: hue-rotate(250deg) saturate(160%) brightness(60%);
}
/* HORIZONTAL RULES */
hr {
background-color: #243151;
height: 1px;
margin: 1em 0;
}
/* BLOCK QUOTES */
blockquote, div.blockquote {
background: #d3dbe2;
border: solid 1px #243151;
}
/* TABLE OF CONTENTS */
#toc {
position: relative;
padding: 0.1px 10px 0.1px 10px;
background: #d3dbe2;
box-shadow: inset 2px 2px #243151, inset -2px -2px #243151;
border: none;
}
#toc:before {
position: absolute;
top: 0;
right: 0;
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #e6e6e6 #e6e6e6 #5a5e8e #5a5e8e;
box-shadow: -1px 1px 2px #2431511a;
content: '';
}
#toc .title {
font-size: 0;
}
#toc .title:before {
content: "エピソード目次";
text-align: center;
color: #5a5e8e;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 700;
font-size: 0.9rem;
}
/* CODE */
.code {
background-color: #fff5ee;
border: dashed 1px #9400d3;
}
/* SEXY BOXES */
div.sexy-box {
background: #f9ddf2;
border: outset 3px #f986b6;
padding: 0 1em;
margin: 3em 0;
}
div.sexy-box div.image-container {
text-align: var(--image-align);
}
div.sexy-box div.image-container img {
background: transparent;
border: solid 1px #f986b6;
padding: 2px;
margin: 1em;
width: var(--image-width);
}
/* IMAGE BLOCK */
.scp-image-block {
border-color: #003a47;
box-shadow: none;
}
.scp-image-block .scp-image-caption {
border-color: #003a47;
background-color: #d3dbe2;
}
/* TABLES */
table.wiki-content-table th {
background-color: #d3dbe2;
border: solid 1px #003a47;
}
table.wiki-content-table td {
background-color: #fdfdf5;
border: 1px solid #003a47;
}
/* TABS */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-color: inherit;
background-image: inherit;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background: inherit;
text-decoration: inherit;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
color: inherit;
background: inherit;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: inherit;
}
.yui-navset li {
line-height: inherit;
}
.yui-navset * {
transition:
color 80ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
display: flex;
flex-wrap: wrap;
width: calc(100% - 0.125rem);
margin: 0 auto;
border-color: #243151;
box-shadow: 0 calc(0.0625rem * 5) 0 0 #243151;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
color: #243151;
background-color: #ebe0ce;
background-image: none;
border: unset;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 500;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
color: #ebe0ce;
background-color: #406694;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 500;
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0;
padding: 0;
background-color: #ebe0ce;
border-color: transparent;
box-shadow: 0 0 0 0.0625rem #243151;
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.yui-navset .yui-nav li em{
border: unset;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
padding: 0.35em 0.75em;
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
flex-grow: 2;
margin: 0;
padding: 0;
background-color: #243151;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
border-color: #243151;
}
.yui-navset .yui-nav .selected a {
width: 100%;
color: #ebe0ce !important;
background-image: none;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 500;
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
color: #ebe0ce;
background-color: #243151;
font-family: 'EB Garamond', 'Kaisei Decol', serif;
font-weight: 500;
}
.yui-navset .yui-nav .selected a:hover {
cursor: default;
}
.yui-navset-left .yui-content {
background-color: #ebe0ce;
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
background-color: #ebe0ce;
border-color: #954039;
}
/* FOOTNOTES */
.hovertip {
width: 20em;
padding: 0.5em;
border: solid 2px #eaf4fc !important;
background: #eaf4fc !important;
z-index: 100;
color: #181b39;
animation: hoverfade .5s ease-in-out both;
border-radius: 7px;
}
@keyframes hoverfade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.hovertip .f-heading {
color: #000b00;
}
.footnotes-footer {
background-color: #d3dbe2;
padding-left: 1.4rem;
padding-right: 1.4rem;
padding-bottom: 1.5rem;
box-shadow: -0.24rem 0px 0px 0px #243151;
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.footnotes-footer .title {
color: #000b00;
}
/* FOOTER */
#footer {
background: #181b39;
color: #fff;
padding: 8px 3px;
}
#license-area {
color: #fff;
background: #180614;
border-top: solid 1px #fff;
}
/* WINDOWS */
div.owindow {
background: #e6e6e6;
border: solid 2px #fff;
color: #181b39;
}
.owindow .title.modal-header {
background: #004150;
border-bottom: solid 1px #555;
color: #fff;
}
div.owindow > div.content > img {
background: transparent !important;
}
div.owindow > div.content > h1 {
color: #004150;
}
.owindow .button-bar a:hover {
background: #bbbcbf;
}
.owindow .button-bar a {
background: #d3dbe2;
color: #131b39;
transition: .3s;
}
.owindow .title {
background-color: #effdf5;
}
.odialog-shader {
background-color: #3e5166;
filter: alpha(opacity=80);
opacity: .3;
}
#lock-info {
background-color: #180614;
border: solid 3px #ccc;
color: #fff;
}
/* SCROLLBAR */
::-webkit-scrollbar {
border: none;
}
#side-bar::-webkit-scrollbar {
width: 10px;
}
