/*
Newspaper Theme Vietnam
[2021 Wikidot Theme]
By StupifPotato
Based on:
Newspaper Theme by MalyceGraves and EstrellaYoshte
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');
:root {
--accentColor: #014f8a;
--lgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newslogo.png");
--bgurl: url("http://scp-wiki.wdfiles.com/local--files/theme%3Anewspaper/newshead.png");
--primaryBackgroundColor: #f3f3f3;
--textColor: #090B0C;
--headerColor: #161B33;
--selectionColor: #a5ecfa;
--header-font: 'Merriweather', serif;
--link-timing: 0.125s ease-out;
}
#content-wrap {
margin: 0.65em auto 0;
box-sizing: border-box;
}
#page-content { font-size: 1rem; }
body {
font-family: 'Montserrat', sans-serif;
color: var(--textColor);
background-color: #e9f8ff;
background-image: none;
background-repeat: no-repeat;
}
tt {
background-color: var(--primaryBackgroundColor);
}
code {
font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source {
font-size: 90%;
}
a:not(.rate-box-with-credit-button a, .page-rate-widget-box a, yui-nav a) {
color: var(--accentColor);
}
#page-content div {
clear: unset;
}
/* Selection */
::selection {
background: var(--selectionColor);
color: var(--textColor);
}
/* ---- HEADER ---- */
div#container-wrap {
background-image: none;
}
div#header {
background-image: none;
height: 240px;
}
div#header-extra-div-1 {
height: 164px;
width: 100%;
top: 0;
position: absolute;
background: none;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 1;
z-index: -1;
}
div#extra-div-1 {
height: 164px;
width: 100%;
top: 0;
position: absolute;
background: none;
background-size: cover;
background-repeat: no-repeat;
background-position: center 0;
z-index: -2;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
}
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
#header h1 a {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
#header h2 {
margin-top: 0.5rem;
font-size: 0.75rem;
font-style: italic;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
color: var(--headerColor);
font-family: var(--header-font);
text-shadow: none;
}
#header h2::before { color: var(--textColor); }
/* Set the new text's content from variable */
#header h1 a::before {
content: var(--header-title, "SCP基金會月刊");
font-weight: 300;
font-size: 1em;
}
#header h2::before {
content: var(--header-subtitle, "SCP Foundation Monthly");
font-weight: 600;
font-size: 0.75em;
}
#login-status {
color: var(--textColor);
background-color: #FEFBF8;
padding: 0.3rem 0.25rem 0.4rem 0.5rem;
border-radius: 0 0 0.5rem 0.5rem;
box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
top: 0;
}
#login-status a {
color: var(--accentColor);
}
#account-topbutton {
border: none;
margin-left: -0.1rem;
}
div#account-options {
background-color: var(--primaryBackgroundColor);
border: none;
border-radius: 0.35rem;
box-shadow: 0 0 4px 1px rgba(0,0,0,0.25);
top: 1.85rem;
display: block!important;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
#account-topbutton:focus + #account-options,
#account-topbutton:active + #account-options,
#account-options:focus-within {
opacity: 1;
pointer-events: all;
}
/* Without this, touchscreen doesn't work */
@media (pointer: coarse) {
#account-topbutton:hover + #account-options,
#account-options:hover {
opacity: 1;
pointer-events: all;
}
}
#account-options li a,
#account-options li a:hover {
color: var(--accentColor);
}
/* ---- SEARCH ---- */
div#search-top-box {
top: 2.25rem;
right: 0.5rem;
width: 1.6rem;
}
div#search-top-box::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0; right: 0.05rem;
background-color: var(--accentColor);
pointer-events: none;
z-index: 2;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-size: 1rem;
mask-size: 1rem;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: 1;
transition: opacity 0.25s ease;
}
div#search-top-box:focus-within::before { opacity: 0; }
div#search-top-box form {
display: flex;
justify-content: flex-end;
}
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
position: relative;
color: transparent;
cursor: pointer;
display: inline-block;
font-family: var(--body-font);
width: 1.6rem;
height: 1.6rem;
padding: 0.1em 0.5em;
box-sizing: border-box;
border-radius: 0.35rem;
border: none;
box-shadow: 0 0 2px 1.5px var(--shadow);
}
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover,
div#search-top-box form input[type="text"]:focus {
background-color: var(--primaryBackgroundColor)!important;
color: var(--textColor);
display: inline-block;
border: none;
height: 1.6rem;
width: 9rem;
transition: width .25s;
outline: none;
}
div#search-top-box form input[type="submit"] {
display: none;
}
/* ---- TOP BAR ---- */
#top-bar {
top: 8.5rem;
display: flex;
justify-content: center;
right: 0;
}
@media (max-width: 768px) {
.mobile-top-bar {
display: flex;
justify-content: center;
max-width: 100%;
width: 100%;
left: 0;
}
}
/* div[class*=top-bar] is to select both regular and mobile top bar that exist in #top-bar */
#top-bar div[class*=top-bar] > ul > li > a {
color: var(--textColor);
}
#top-bar div[class*=top-bar] ul li ul li a {
color: var(--accentColor);
}
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a {
background-color: transparent;
background: none;
}
#top-bar div[class*=top-bar] > ul > li,
#top-bar div[class*=top-bar] > ul > li.sfhover {
background-color: transparent;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within {
background-color: transparent;
background-size: 100% 100%;
}
#top-bar div[class*=top-bar] ul li ul {
background-color: var(--primaryBackgroundColor);
border: none;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
border-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
#top-bar div[class*=top-bar] ul li ul li,
#top-bar div[class*=top-bar] ul li ul li a {
background: transparent;
border: none;
}
#top-bar div[class*=top-bar] ul li ul li a:hover,
#top-bar div[class*=top-bar] ul li ul li a:focus {
background-color: #FEFBF8;
}
/* keyboard navigation compatibility */
#top-bar div[class*=top-bar] ul > li > ul > li > a {
height: auto;
max-height: none;
line-height: 1.5!important;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
#top-bar div[class*=top-bar] > ul > li > ul {
visibility: visible;
opacity: 0;
pointer-events: none;
}
#top-bar div[class*=top-bar] > ul > li:hover > ul,
#top-bar div[class*=top-bar] > ul > li > ul:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within > ul,
#top-bar div[class*=top-bar] > ul > li > ul:focus-within {
opacity: 1;
pointer-events: all;
}
/* ---- SIDE BAR ---- */
div#side-bar{
background: #FEFBF8;
clear: both;
padding: .8em;
border: none;
border-radius: 0;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
overflow-x: hidden;
}
#side-bar .heading{
color: var(--headerColor);
font-family: var(--header-font);
font-size: 0.94rem;
border-bottom: solid 1px var(--headerColor);
border-top: solid 1px var(--headerColor);
margin-top: 1.35rem;
padding-left: 0;
text-align: center;
}
#side-bar .side-block {
border: transparent;
border-radius: 0;
box-shadow: none;
background-color: #FEFBF8;
}
#side-bar .side-block.media {
background-color:#FEFBF8;
}
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
}
#side-bar .side-block.resources {
background-color:#FEFBF8;
}
.side-block .menu-item > .image {
display: none;
}
#side-bar div.menu-item a {
color: var(--accentColor);
}
#top-bar div.open-menu a {
border-radius: 0.35rem;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
color: var(--accentColor);
background-color: #FEFBF8;
border: none;
padding: 0.15rem;
user-select: none;
}
/* ---- MAIN CONTENT ---- */
#main-content {
background-color: #FEFBF8;
padding: 0.5em 2em 0.75em;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
width: 100%;
max-width: 880px;
margin: -0.4rem auto 0;
border-radius: 0;
box-sizing: border-box;
}
/* ---- PAGE TITLE ---- */
#page-title, .meta-title {
color: var(--headerColor);
font-family: var(--header-font);
font-size: 3em;
text-align: center;
display: flex;
align-items: center;
text-align: center;
border-bottom: none;
margin: 0.25rem 0;
padding-bottom: 0;
}
#page-title::before,
#page-title::after,
.meta-title::before,
.meta-title::after {
content: "";
flex-grow: 1;
height: 0.25rem;
margin: auto auto auto 0.65rem;
background-color: transparent;
border-top: solid 0.125rem var(--headerColor);
border-bottom: solid 0.125rem var(--headerColor);
}
#page-title::before,
.meta-title::before {
margin: auto 0.65rem auto auto;
}
/* ---- BREADCRUMBS ---- */
#breadcrumbs, #page-content .pseudocrumbs {
font-size: 0.85rem;
font-family: var(--header-font);
margin-top: -1.05em;
}
#page-content .pseudocrumbs * { text-decoration-color: var(--accentColor)!important; }
/* ---- TABS ---- */
/* ---- YUI TAB BASE ---- */
.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 TAB CUSTOMIZATION ----*/
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav{
display: flex;
flex-wrap: wrap;
width: calc(100% - .125rem);
margin: 0 auto;
border-width: 0;
box-shadow: none;
}
.yui-navset .yui-nav a, /* ---- Link Modifier ---- */
.yui-navset .yui-navset-top .yui-nav a{
color: var(--textColor);
font-weight: bold;
/* ---- Tab Background Colour | [UNSELECTED] ---- */
background-color: transparent;
border: unset;
box-shadow: none;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
/* ---- Tab Background Colour | [HOVER] ---- */
background-color: transparent;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
.yui-navset .yui-navset-top .yui-nav li{
position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0.25rem;
padding: 0;
color: #d6d6d6;
background-color: var(--primaryBackgroundColor);
border-color: transparent;
border-radius: 0.35rem;
box-shadow: none;
}
.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%;
border-radius: 0.35rem;
}
.yui-navset .yui-nav li em{
border: unset;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em{
padding: .35em .75em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
.yui-navset .yui-navset-top .yui-nav .selected{
flex-grow: 2;
margin: 0;
padding: 0;
border-radius: 0.35rem;
/* ---- Tab Background Colour | [SELECTED] ---- */
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em{
border: none;
}
.yui-navset .yui-nav .selected a{
width: 100%;
color: #ffffff;
font-weight: bold;
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active{
color: #ffffff;
background-color: var(--accentColor);
}
.yui-navset .yui-content {
border: none;
background-color: transparent;
box-shadow: none;
margin-top: 0.25rem;
box-sizing: border-box;
border-radius: 1rem;
padding: 0.35rem 0;
border-top: solid 0.2rem var(--accentColor);
border-bottom: solid 0.2rem var(--accentColor);
}
/* ---- INFO PANE ---- */
:root {
--linkColor: var(--selectionColor);
--radius-adjust: 0.325rem;
--shadow: rgba(0,0,0,0.2);
}
#page-content .creditRate{
margin: unset;
margin-bottom: 1rem;
}
#page-content .rate-box-with-credit-button {
background-color: var(--primaryBackgroundColor);
border: none;
box-shadow: 0 0 3px 1px var(--shadow);
border-radius: var(--radius-adjust);
padding: 0.275rem;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
#page-content a.fa {
transform: none;
}
#page-content .rate-box-with-credit-button .fa-info {
border: none;
color: var(--textColor);
padding-top: 0.25rem;
padding-bottom: 0.0725rem;
width: 0.9rem;
margin-left: -0.1rem;
margin-right: 0.1rem;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .rate-box-with-credit-button .fa-info:focus {
background-size: 100% 100%;
}
.rate-box-with-credit-button .cancel {
border: solid 1px var(--primaryBackgroundColor);
}
#page-content .creditButtonStandalone {
margin: 0.125rem 0;
}
#page-content .creditButtonStandalone p a {
border-radius: 1rem;
color: var(--textColor);
text-align: center;
background: initial;
box-shadow: 0 0 2px 1px var(--shadow);
padding: 0.24rem;
background: none;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size var(--link-timing);
}
#page-content .creditButtonStandalone p a:hover,
#page-content .creditButtonStandalone p a:focus {
text-decoration: none;
background: none;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* ---- PAGE RATING ---- */
.page-rate-widget-box {
box-shadow: none;
margin: unset;
margin-bottom: 1rem;
background-color: var(--primaryBackgroundColor);
border-radius: var(--radius-adjust);
box-shadow: 0 0 3px 1px var(--shadow);
padding: 0.275rem;
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .rateup a:focus,
.page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:hover, .page-rate-widget-box .cancel a:focus {
color: var(--textColor);
background: unset;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 100% 100%;
background-position: 0 100%;
background-repeat: no-repeat;
border-radius: 0;
}
.page-rate-widget-box .rate-points {
background-color: var(--primaryBackgroundColor) !important;
color: var(--textColor) !important;
border: solid 1px var(--primaryBackgroundColor);
border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--primaryBackgroundColor);
border-top: solid 1px var(--primaryBackgroundColor);
border-bottom: solid 1px var(--primaryBackgroundColor);
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
color: var(--textColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
.page-rate-widget-box .cancel {
background-color: var(--primaryBackgroundColor);
border: solid 1px var(--primaryBackgroundColor);
border-radius: 0;
}
.page-rate-widget-box .cancel a {
color: var(--textColor);
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
/* ---- PAGE ELEMENTS ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--headerColor);
font-family: var(--header-font);
font-weight: normal;
margin: 0.45em 0;
}
h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.45em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
hr {
height: 0.25rem;
margin: 1.75rem 0;
background-color: transparent;
border-top: solid 0.125rem var(--headerColor);
border-bottom: solid 0.125rem var(--headerColor);
clear: both;
}
blockquote,
div.blockquote {
background-color: var(--primaryBackgroundColor);
border: none;
border-left: solid 0.2rem var(--headerColor);
padding: 0.1rem 1rem;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
position: relative;
}
blockquote::before, blockquote::after,
div.blockquote::before, div.blockquote::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
left: 0;
background-color: var(--headerColor);
}
blockquote::before, div.blockquote::before {
top: 0;
transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
blockquote::after, div.blockquote::after {
bottom: 0;
transform: translate(calc(-50% - 0.1rem),50%) rotate(45deg);
}
#toc {
display: block;
background-color: #FEFBF8;
border: none;
padding: 0.1rem 1rem;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
border-right: solid 0.2rem var(--headerColor);
padding: 0.75em;
position: relative;
}
#toc::before, #toc::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
right: 0;
background-color: var(--headerColor);
}
#toc::before {
top: 0;
transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
#toc::after {
bottom: 0;
transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#toc-list {
font-family: var(--header-font);
}
#toc-list > div[style*="margin-left: 1em;"] { margin-left: 0.5em!important; }
#toc-list > div:not([style*="margin-left: 1em;"]) { display: none; }
.scp-image-block {
border: solid 8px var(--primaryBackgroundColor);
box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
box-sizing: border-box;
position: relative;
z-index: 0;
}
.scp-image-block::before, .scp-image-block::after {
content:'';
position: absolute;
pointer-events: none;
border: solid 0.25rem var(--headerColor);
transform: rotate(25deg);
}
.scp-image-block::before {
right: -0.135rem;
height: 36px;
width: 9px;
top: -14.25px;
border-radius: 0 0 2rem 2rem;
border-top: none;
}
.scp-image-block::after {
top: -25px;
right: -0.94rem;
height: 16px;
width: 14px;
border-radius: 2rem 2rem 0 0;
border-bottom: solid 0.55rem transparent;
z-index: -1;
}
.scp-image-block .scp-image-caption {
background-color: var(--primaryBackgroundColor);
border-top: solid 4px var(--primaryBackgroundColor);
color: var(--textColor);
}
.scp-image-block.block-left,
.scp-image-block.block-right {
margin: 0.25rem 2rem 0.625rem;
}
.scp-image-block.block-left { margin-left: 0.5rem; }
.scp-image-block.block-right { margin-right: 0.5rem; }
@media (max-width: 640px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
#page-content .wiki-content-table tr th {
border: solid 1px var(--headerColor);
color: var(--headerColor);
background-color: var(--primaryBackgroundColor);
/* set border for table title */
}
#page-content .wiki-content-table tr td {
border: solid 1px var(--headerColor);
/* set border for table content */
}
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
background-color: var(--primaryBackgroundColor);
border-radius: 0.35rem;
width: min-content;
white-space: nowrap;
overflow: hidden;
margin: auto;
}
#page-content .collapsible-block-folded {
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100% ;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-folded:focus-within {
background-size: 100% 100% ;
transition: background-size var(--link-timing);
}
#page-content .collapsible-block-unfolded-link {
background-color: var(--accentColor);
box-shadow: 0 0 0 0.2rem var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
margin-top: 10px;
margin-bottom: 10px;
}
#page-content .collapsible-block-link {
display: inline-flex;
padding: 0.5rem 1rem;
text-decoration: none;
color: var(--textColor);
font-weight: bold;
}
#page-content .collapsible-block-unfolded-link .collapsible-block-link {
color: var(--primaryBackgroundColor);
}
/* Footnotes */
a.footnoteref {
padding: 0 0.25em 1px;
margin-left: -0.15em;
}
.hovertip {
font-size: 1.25em;
background-color: #FEFBF8 !important;
border: none !important;
border-left: solid 0.2rem var(--accentColor)!important;
color: var(--textColor) !important;
border-radius: 0 1rem;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
padding: 0.35rem;
box-sizing: border-box;
width: min(24rem, 60vw)!important;
top: initial!important;
left: initial!important;
position: fixed! important;
display: block!important;
bottom: 2rem;
right: -25rem;
transition: right 0.45s cubic-bezier(.6,.18,.27,.88);
transition-delay: 0.455s;
z-index: 29;
}
.hovertip::before {
content: "";
display: block;
height: 0.5rem;
width: 0.5rem;
position: absolute;
left: 0;
top: 0;
background-color: var(--accentColor);
transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
div[id$="button-hovertip"] { transition-delay: 0s; }
.hovertip[style*="display: block"],
.hovertip:hover {
z-index: 30;
right: 1rem;
transition-delay: 0s;
}
.footnote .f-heading {
font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
display: none;
}
.footnotes-footer {
border: none;
border-left: solid 0.2rem var(--accentColor);
padding: 0.1rem 1rem 1rem 1.25rem;
position: relative;
border-radius: 0 1.25rem;
}
.footnotes-footer::before {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
left: 0; top: 0;
background-color: var(--accentColor);
transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg);
}
.footnotes-footer .title {
color: var(--textColor);
font-family: var(--header-font);
margin: 0 0 0.625rem 0;
}
/*-- tags --*/
#main-content .page-tags a {
height: 0.8125rem;
font-size: 0.6875rem;
background-color: var(--primaryBackgroundColor);
color: var(--textColor);
border-radius: 0.35rem;
margin: .25rem .2rem;
padding: 0.21rem 0.35rem 0.22rem 0.3rem;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
background-size: 0 100%;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--link-timing);
}
#main-content .page-tags a:hover,
#main-content .page-tags a:focus {
background-size: 100% 100%;
text-decoration: none;
}
#main-content .page-tags a:before {
content: "⬤";
font-size: 4px;
padding-right: 0.2rem;
display: inline-block;
}
.page-tags span {
border-top: solid 0.125rem var(--primaryBackgroundColor);
}
/* Pop-Up Windows */
.owindow {
background-color: var(--primaryBackgroundColor);
border: none;
}
.owindow .modal-header {
background-color: transparent;
}
.owindow .modal-body img {
background-color: transparent !important;
}
.owindow .title {
background-color: transparent;
color: var(--headerColor);
border-bottom: 1px solid var(--headerColor);
}
.owindow .button-bar a {
background-color: var(--primaryBackgroundColor);
border-color: var(--accentColor);
color: var(--accentColor);
}
.owindow .button-bar a:hover {
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
#page-content .modalbox {
background: #FEFBF8;
border: none;
border-radius: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.35);
}
#page-content .modalbox hr { margin: 0.75rem 1rem; }
/* Edit Buttons */
.buttons .btn {
background-color: var(--primaryBackgroundColor);
border-color: var(--accentColor);
color: var(--accentColor);
padding: 3px 5px;
}
.buttons .btn:hover {
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
background-color: var(--accentColor);
color: var(--primaryBackgroundColor);
}
/* Page-History Current */
.pager .current {
background-color: var(--accentColor);
border-color: var(--primaryBackgroundColor);
}
/* ---- CUSTOM SYNTAX ----*/
#page-content .section-header {
display: flex;
align-items: center;
text-align: center;
margin-top: 3.5rem;
margin-bottom: 0.75rem;
clear: both;
}
#page-content .breaker + .section-header {
margin-top: 1.5rem;
}
.section-header::before, .section-header::after {
content: "";
flex-grow: 1;
height: 0.175rem;
margin: auto -0.625rem auto auto;
background-color: var(--primaryBackgroundColor);
}
.section-header::after {
margin: auto auto auto -0.625rem;
}
.section-header h1 {
width: max-content;
margin: 0 auto;
text-align: center;
padding: 0.05rem 1.5rem;
border-radius: 0rem 0.875rem;
border-bottom: solid 0.2rem var(--accentColor);
border-top: solid 0.2rem var(--accentColor);
position: relative;
}
.section-header h1::before {
content: "";
background-color: var(--accentColor);
display: block;
width: 0.6rem; height: 0.6rem;
position: absolute;
top: 0;
left: 0;
transform: translate(-0.3rem, -0.4rem) rotate(45deg);
}
.section-header h1::after {
content: "";
background-color: var(--accentColor);
display: block;
width: 0.6rem; height: 0.6rem;
position: absolute;
bottom: 0;
right: 0;
transform: translate(0.3rem, 0.4rem) rotate(45deg) ;
}
.section-header h1 span {
width: max-content;
margin: auto;
}
/*-----------------*/
.s-title {
font-size: 110%;
font-weight: bold;
display: inline;
padding: 0 0.15em;
padding-bottom: 0.1em;
border-bottom: solid 0.1rem currentColor;
border-top: solid 0.1rem currentColor;
}
.gallery-frame {
box-sizing: border-box;
background-color: #e9faff;
padding: 0.75rem;
border: inset 0.325rem var(--headerColor);
box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
margin: auto;
}
.gallery-frame > img { box-shadow: 0 0 3px 1px rgba(0,0,0,0.3); }
.hover:hover {
text-decoration: none;
}
.hover span { display: none; }
.hover:hover span {
position: absolute;
display: inline;
height: auto;
max-width: 25%;
background-color: var(--headerColor);
color: #FEFBF8;
font-weight: bold;
padding: 0.5em 1.5em;
border-bottom-right-radius: 1rem;
}
.f-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.f-flex > div {
flex-basis: 18rem;
flex-grow: 1;
}
.f-flex.three > div {
flex-basis: 13rem;
flex-grow: 1;
}
.f-flex.data > div {
padding: 0.65rem 0.375rem;
}
.f-flex.data > div:hover {
z-index: 9;
}
.f-con {
border: none;
padding: 0.15rem 0.75rem 1.5rem;
margin: 0.85rem;
position: relative;
border-radius: 0 1.25rem;
background-color: #e9faff;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#page-content .f-flex .f-con { max-width: 25rem; }
.f-con h4 {
background-color: #b8eeff;
color: #242424;
padding: 0.1rem 0;
border-radius: 0 0.625rem;
}
.placard {
display: inline-block;
position: relative;
padding: 0.45rem 0.65rem;
margin: -1.05rem -0.5rem -1.3rem;
border: solid 1em transparent;
background: var(--primaryBackgroundColor) padding-box;
clip-path: polygon(0 3em, 3em 0, 100% 0, 100% calc(100% - 3em), calc(100% - 3em) 100%, 0 100%);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.placard::before, .placard::after {
position: absolute;
width: 3em;
height: .35em;
background: radial-gradient(at 50% 0, rgba(0,0,0,0.17), rgba(0,0,0,0) 65%);
content: "";
}
.placard::before {
top: 0.45em;
left: -0.95em;
transform: rotate(-45deg);
}
.placard::after {
bottom: 0.45em;
right: -0.95em;
transform: rotate(135deg);
}
/*---- Side ToC setup ----*/
.anchor {
position: sticky;
height:0;
top: 0.5rem;
z-index: 4;
}
.tocbox {
margin-top: 0;
position: absolute;
top: 0;
right: max(-18.75rem, -17vw);
z-index: 4;
box-sizing: border-box;
width: max-content;
pointer-events: none;
}
#page-content .tocbox .toc-u {
padding: 0.5rem;
background-color: #FEFBF8;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
border-right: solid 0.2rem var(--headerColor);
position: relative;
width: 15rem;
max-height: calc(98vh - 2rem);
max-width: calc((30vw - 50% - 6rem)/1.2);
margin-right: 0; margin-left: auto;
pointer-events: all;
}
.toc-u #toc::before, .toc-u #toc::after { display: none; }
.toc-u::before, .toc-u::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
right: 0;
background-color: var(--headerColor);
}
.toc-u::before {
top: 0;
transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
.toc-u::after {
bottom: 0;
transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#page-content .tocbox .toc-u #toc-list {
overflow-y: auto;
overflow-x: hidden;
max-height: 84vh;
padding: 0 0.5em 1em;
scrollbar-width: thin;
}
#page-content .tocbox .toc-u #toc-list::-webkit-scrollbar {
width: 6px;
}
.tocbox table,
.tocbox tbody,
.tocbox tr,
.tocbox td,
.tocbox #toc {
display: contents;
}
#toc-list > div { position: relative; }
#toc-list > div[style*="1em"]::before {
content: "•";
display: inline-block;
position: absolute;
left: -0.75em;
color: var(--accentColor);
}
@media (max-width: 1340px) {
.anchor {
filter: none;
transition: filter 0.2s ease-out;
}
.tocbox {
right: -1rem;
width: unset;
}
.tocbox::before {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 1.5rem; height: 100%;
top: 0; right: -0.25rem;
pointer-events: all;
}
.tocbox::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0; height: 0;
border: solid 1rem transparent;
border-left-width: 0.5rem;
border-right-color: var(--headerColor);
top: calc(50% - 1rem); right: 0;
pointer-events: all;
transition: border-right-width 0.15s ease-out;
}
#page-content .tocbox .toc-u {
width: -moz-fit-content;
width: fit-content;
max-width: 60vw;
box-shadow: none;
clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem));
transition: clip-path 0.2s ease-out;
pointer-events: none;
}
.anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); }
.tocbox:hover {
pointer-events: all;
}
.tocbox:hover::after {
border-right-width: 0;
}
#page-content .tocbox:hover .toc-u {
pointer-events: all;
clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem);
}
}
/* ---- FOOTER & LICENSE AREA ---- */
#footer, #license-area {
background-color: #e9faff;
color: var(--textColor);
}
#footer a { color: var(--accentColor); }
#footer {
padding-top: 1rem;
}
#license-area {
padding-top: 0;
}
/* ---- INTERWIKI ---- */
.scpnet-interwiki-frame{
filter: invert(100%) grayscale(100%) contrast(75%);
}
/* ---- MOBiLE QUERY ---- */
@media (max-width: 767px) {
div#header, div#top-bar {
width: 100%;
max-width: 100%;
}
#login-status {
padding-top: 0rem;
padding-left: 0.3rem;
}
#login-status span.printuser {
font-size: 0;
}
#login-status span.printuser img {
font-size: 0;
transform: translate(6px, 5px);
}
#login-status a#my-account {
display: none;
}
#main-content {
padding: 0.5em 1.75em 0.75em;
}
#side-bar .close-menu {
opacity: 0;
margin-left: 18.75em;
}
#side-bar:target .close-menu:hover {
background: unset;
}
:root {
--header-title: "SCP基金會月刊";
}
#page-title, .meta-title { font-size: 2.4em; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.05em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }
}
