/*
这是 The Nationarea 的维基默认版式，
由 SwitzerCandy 改编自 The Backrooms 后室中文。
2025.8.1
*/
/* 1.1 版式基础代码 */
@import url("https://nationarea.wikidot.com/local--files/special:main/normalize-archived.css");
@import url("https://nationarea.wikidot.com/local--files/special:main/bhl-archived.css");
@import url("https://nationarea.wikidot.com/local--files/special:main/sidebar.css");
/* 1.2 版式调整代码 */
@import url("https://nationarea.wikidot.com/local--files/special:main/colstyle.min.css");
@import url("https://nationarea.wikidot.com/local--files/special:main/font-awesome.min.css");
/* 1.4 导入基本字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
:root {
/* 2 设置版式信息 */
--theme-base: "black-highlighter";
--theme-id: "oceanic-sunset";
--theme-name: "Oceanic Sunset Theme";
/* 3.1.1 版头的主标题内容 */
--header-title: "The Nationarea";
/* 3.1.2 版头的副标题内容 */
--header-subtitle: "夕照海";
/* 3.1.3 版头的图标 */
--logo-image: url("http://nationarea.wikidot.com/local--files/theme:socialism-daylight/nothin");
/* 3.1.5 字体 */
/* 版头：标题字体 */
/*--header-font: */
/* 正文：标题字体 */
--title-font: 'Noto Serif SC', sans-serif;
/* 正文：等宽字体 */
--mono-font: 'Noto Serif SC', Consolas, monaco, monospace;
/* 正文：行文字体 */
--body-font: 'Noto Serif SC', sans-serif;
/* 4.2.1 White Monochrome */
/* 这会影响：Darkblock 的文字颜色 */
--white-monochrome: 255, 255, 255;
/* 4.2.2 Pale Gray Monochrome */
/* 这会影响：Dark Styled Quote 的侧面色条 */
--pale-gray-monochrome: 175, 155, 130;
/* 4.2.3 Light Gray Monochrome */
/* 这会影响：不明 */
--light-gray-monochrome: 115, 101, 82;
/* 4.2.4 Gray Monochrome */
/* 这会影响：Styled Quote 的侧面色条 顶栏颜色 Dark Block 的背景 */
--gray-monochrome: 115, 101, 82;
/* 4.2.4 Black Monochrome */
/* 这会影响：页面的文字颜色 */
--black-monochrome: 0, 0, 0;
/* 4.2.4 Bright Accent */
/* 这会影响：触碰顶栏和侧栏按钮时的变换色 框选正文时的显示色 */
--bright-accent: 110, 96, 77;
/* 4.2.5 Medium Accent */
/* 这会影响：版头的彩色圆点（被移除）*/
--medium-accent: 82, 62, 52;
/* 4.2.6 Dark Accent */
/* 这会影响：版头的背景颜色 页面按钮 */
--dark-accent: 82, 62, 52;
/* 4.2.7 Pale Accent */
/* 这会影响：不明*/
--pale-accent: 144, 96, 73;
--sidebar-title-background-color: rgba(var(--gray-monochrome), 0.90) 50%;
/* 4.3 模块颜色配置 */
/* 这会影响：顶栏部分的边框颜色*/
--swatch-topmenu-border-color: 0, 0, 0;
/* 这会影响：顶栏块的背景颜色*/
--swatch-menubg-dark-color: 82, 62, 52;
/* 这会影响：链接/无效链接/已访问链接的颜色 */
--link-color: 220, 131, 60;
--hover-link-color: 255, 255, 255;
--visited-link-color: 186, 131, 74;
/* 这会影响：评分模块按钮的颜色 */
--rating-module-button-plus-color: 10, 156, 96;
--rating-module-button-negative-color: 179, 11, 63;
--rating-module-button-cancel-color: 219, 219, 219;
--rating-module-button-credit-color: 79, 182, 212;
/* 这会影响：页面正文的颜色 */
--swatch-text-dark: 255, 255, 255;
--sidebar-internal-border-thickness: var(--black-monochrome);
--swatch-border-color: var(--dark-accent);
/* 这会影响：页面背景的颜色 */
--swatch-background: 82, 62, 52;
/* 这会影响：版头的颜色配置 */
--swatch-primary-darker: 82, 62, 52;
--background-gradient-distance: 0rem;
--gradient-header: linear-gradient(
to top,
rgba(var(--gray-monochrome)) 0%,
rgba(var(--medium-accent), 0.90) 100%
);
--diagonal-stripes: linear-gradient(transparent 0);
/* 引用块透明度设置 */
--quotes-white: 82, 62, 52, 0.5;
}
/* 使标题居中 */
#page-title {
text-align: center;
}
/* 侧栏 */
#side-bar {
direction: rtl;
left: 2rem;
padding-left: 0;
top: 0;
}
#side-bar div.side-block {
direction: ltr;
border-right: var(--sidebar-internal-border-thickness) solid rgba(var(--swatch-border-color), .08);
}
#side-bar div.side-block,
#side-bar div.side-block .heading {
margin-top: 0;
}
#side-bar div.menu-item.small a {
justify-content: center;
width: auto;
padding: 0 0.25em;
text-indent: 0;
white-space: nowrap;
}
#side-bar div.menu-item a {
justify-content: flex-start;
padding: 0 0 0 calc(var(--base-font-size)*.93333);
}
#side-bar div.menu-item,
#side-bar div.menu-item>p {
display: flex;
flex-shrink: 0;
flex-basis: 100%;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
height: 1.5rem;
min-height: 1.5rem;
margin: 0;
padding: 0;
box-shadow: inset 0 calc(var(--sidebar-internal-border-thickness)*-1) 0 0 rgba(var(--swatch-border-color));
font-size: 0;
}
#side-bar div.menu-item>:last-child {
flex-grow: 2;
}
#side-bar div.menu-item a:not(a:first-child) {
border-left: var(--sidebar-internal-border-thickness) solid rgba(var(--swatch-border-color), .08)
}
#side-bar div.menu-item a::before {
left: 0;
transform: translateX(calc(-100%));
width: calc(100% + 6rem);
}
#side-bar div.menu-item a:hover::before {
transform: translateX(calc(0rem));
}
#side-bar div.scpnet-interwiki-wrapper {
min-height: 220px;
transform: translate(0, 0);
}
/* 移动端适配 */
@media screen and (min-width: 56.25rem) {
.paper { width: 65%; padding: 2em }
}
/* 移除版头彩色圆点 */
#skrollr-body {
background-image: none;
}
@media only screen and (min-width: 768px) {
div.scpnet-interwiki-wrapper,
iframe.scpnet-interwiki-frame {
width: 100%;
}
}
/* Tab 颜色 */
#main-content {
--tabs-bg: var(--gray-monochrome);
--tabs-hover-bg: var(--bright-accent);
--tabs-selected-bg: var(--pale-accent);
--tabs-selected-outline: var(--pale-accent);
--tabs-bottom-border-color: var(--bright-accent);
}
@media only screen and (max-width: 768px) {
#side-bar {
left: calc(var(--sidebar-width-on-mobile)*-1);
}
#side-bar:target,
#skrollr-body:target #side-bar {
left: -0.5rem;
}
#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
letter-spacing: 0.016em;
}
#side-bar div.scpnet-interwiki-wrapper {
width: calc(var(--sidebar-width-on-mobile) - 0.5rem);
max-width: calc(80vw + var(--base-font-size)*.5);
}
hr {
background-color: rgba(var(--pale-accent), 0.6);
}
#side-bar:target .close-menu,
#skrollr-body:target .close-menu {
margin-left: calc(var(--sidebar-width-on-mobile) - 0.5rem);
width: calc(100% - var(--sidebar-width-on-mobile) + 0.5rem);
}
}
/* 以下是仍然等待注释的代码 */
#header, #top-bar {
background-attachment: scroll;
}
div#page-options-bottom-2 > a, div#page-options-bottom > a {
border-radius: 0em;
-moz-border-radius: 0em;
border: none;
}
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
border: none;
-moz-border-radius: 0em;
border: none;
}
#header {
background-image: none;
}
#header::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-image: var(--logo-image);
background-size: auto 16rem;
background-position: center;
background-repeat: no-repeat;
opacity: 0.4;
}
#header h1, #header h1 a {
position: absolute;
top: 1rem;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 0;
}
#header h2, #header h2 span, #header h2 span::before {
position: absolute;
top: 2rem;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
}
#header h1 a::before, #header h2 span::before {
text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
a.newpage {
background: transparent;
text-decoration: none
}
a.newpage {
color: rgb(var(--pale-gray-monochrome));
}
/* 背景图片设置 */
body {
background-image: url(http://nationarea.wikidot.com/local--files/theme:oceanic-sunset/example);
background-repeat: no-repeat;
background-position: center;
background-blend-mode: normal;
background-attachment: fixed;
background-size: cover;
}
#container {
background-image: radial-gradient(circle, transparent 50%, transparent 0);
background-size: 0.25em 0.25em;
background-repeat: repeat;
background-attachment: fixed;
}
/* 样式块配置：Blockquote */
blockquote, div.blockquote {
background-color: rgba(var(--pale-gray-monochrome), 0.35);
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0, 0, 0, .25);
border: none;
}
/* 样式块配置：Styled Quote */
.styled-quote {
background-color: rgba(var(--pale-gray-monochrome), 0.35);
border-left: 0.5rem solid rgba(var(--dark-accent));
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
/* 样式块配置：Dark Styled Quote */
.dark-styled-quote {
background-color: rgba(var(--dark-accent), 0.35);
border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
color: rgb(var(--white-monochrome));
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
.dark-styled-quote a {
color: rgba(var(--swatch-menubg-dark-color), 0.35);
}
/* 样式块配置：Light Block */
.lightblock {
background-color: rgba(var(--white-monochrome), 0.35);
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
/* 样式块配置：Darkblock */
.darkblock {
background-color: rgba(var(--dark-accent), 0.35);
color: rgb(var(--white-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.darkblock a {
color: rgba(var(--swatch-menubg-dark-color), 0.35);
}
/* 样式块配置：Classic Blockquote */
div.classic-blockquote {
border: dashed 0.0625rem rgba(var(--dark-accent), 0.35);
box-shadow: none;
background: transparent;
}
.footnotes-footer {
background-color: rgba(var(--quotes-white));
border-left: 0.5rem solid rgba(var(--gray-monochrome));
}
#search-top-box input.empty:hover {
color: rgb(var(--pale-gray-monochrome));
}
blockquote, .blockquote, .styled-quote, .footnotes-footer {
--link-color: var(--dark-accent);
--hover-link-color: var(--dark-accent);
--visited-link-color: var(--bright-accent);
}
darkblock, .darkblock, .dark-styled-quote {
--link-color: var(--bright-accent);
--hover-link-color: var(--bright-accent);
--visited-link-color: var(--bright-accent);
}
code, .code {
background-color: rgb(var(--pale-gray-monochrome));
}
#login-status {
color: rgb(var(--light-gray-monochrome));
}
/* 去除用户信息中头像白边 */
#odialog-container .owindow>div.modal-body>img[style*="padding: 2px 8px;"]:first-child {
background-color: initial !important;
}
/* 搜索框修改 */
#search-top-box-input {
display: none;
}
@media only screen and (max-width: 768px) {
#search-top-box:not(:focus-within):before {
top: calc(var(--header-height-on-mobile)/2 + 0.5em);
}
}
#side-bar .heading {
background-color: var(--gray-monochrome);
}
/* 论坛样式修改 */
.thread-container .post .long .content .image:not(.collapsible-block .image) {
object-fit: cover;
max-height: 2em;
width: 100%;
transition: max-height 0.5s;
}
.thread-container .post .long .content .image:hover:not(.collapsible-block .image) {
max-height: 100em;
}
.bblock:hover{
color: rgb(121,137,143);
}
