@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
:root {
--theme-base: "black-highlighter";
--theme-id: "cloudmonths";
--theme-name: "Cloud months Theme";
/* 版头设置 */
--logo-image: url("https://backroom-wiki-cn.wikidot.com/local--files/main/logo-main.png");
--header-title: "THE CLOUDROOMS";
--header-subtitle: "为您呈现";
--header-height-on-mobile: 20rem;
--header-height-on-desktop: var(--header-height-on-mobile);
--header-height-on-mobile-bhl: var(--header-height-on-desktop-bhl);
--header-height-on-desktop-bhl: 9rem;
--h1-fs: 2rem;
--body-font: Inter, "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
--header-font: "Josefin Sans", sans-serif;
--title-font: var(--header-font);
--mono-font: Recursive, "Noto Serif SC", "Noto Serif TC", Consolas, monaco, monospace;
--header-title-color: 35, 31, 27;
--swatch-headerh1-color: 35, 31, 27;
--swatch-headerh2-color: 35, 31, 27;
--swatch-menutxt-light-color: 35, 31, 27;
--swatch-text-light: 35, 31, 27 ;
--white-monochrome: 236,232,223;
--pale-gray-monochrome: 0,0,0;
--light-gray-monochrome: 180, 177, 170;
--gray-monochrome: 100, 98, 94;
--black-monochrome: 40, 38, 36;
--bright-accent: 210, 100, 100;
--medium-accent: 170, 80, 80;
--dark-accent: 140, 60, 60;
--pale-accent: 230, 180, 180;
--link-color: 200, 80, 80;
--hover-link-color: 180, 60, 60;
--visited-link-color: 160, 70, 70;
--swatch-topmenu-border-color: rgba(var(--gray-monochrome), 0.5);
--background-gradient-distance: 0rem;
--gradient-header: linear-gradient(to top,
rgba(var(--medium-accent), 0.8) 0%,
rgba(var(--medium-accent), 0.6) 100%);
--diagonal-stripes: linear-gradient(transparent 0);
}
/* 适配 */
html{
background-color: rgb(var(--white-monochrome));/* 我要是页面溢出你不炸了吗😭 */
}
#skrollr-body {
background-image: radial-gradient(circle, rgba(var(--light-gray-monochrome), 0.2) 50%, transparent 0);
background: linear-gradient(
to bottom,
rgb(245, 220, 220) 0%,
rgb(180, 177, 170) 100%
);
background-repeat: no-repeat;
background-size: 0.25em 0.25em;
width: 100%;
height: 7.5rem;
}
#container {
background-image: radial-gradient(circle, transparent 50%, transparent 0);
background-size: 0.25em 0.25em;
background-repeat: repeat;
background-attachment: fixed;
background-color: rgb(var(--white-monochrome));
}
div[id*=page-options-bottom]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
background-color: rgb(var(--white-monochrome));
color: rgb(var(--black-monochrome));
}
div[id*=page-options-bottom]:not(:is(.page-rate-widget-box,#search-top-box-form))>a.btn {
box-shadow: -.125rem 0 .25rem 0 rgba(var(--swatch-tertiary-color), .25), inset 0 -.0625rem 0 0 rgba(var(--swatch-tertiary-color), .75), 0 0 0 0 rgb(var(--ui-button-hover-outline)), inset var(--icon-size) 0 0 0 rgb(var(--bright-accent));
}
div[id*=page-options-bottom]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn:is(:hover, :active, :focus, :focus-within) {
box-shadow: none;
background-color: rgb(var(--bright-accent));
color: rgb(var(--header-title-color));
}
:is(#header,#owindow-1) .btn,
a.action-area-close.btn,
#action-area td:nth-of-type(1),
.optionstd a,
a#rename-show-backlinks,
#action-area [style="padding-left:3em;"] a,
p#edit-meta-addbutton a,
:is(#page-options-bottom,#page-options-bottom-2) .btn:is(:hover,:active,:focus,:focus-within){
color: rgb(var(--white-monochrome))!important;
}
textarea#edit-page-comments{
background-color: rgb(var(--white-monochrome))!important;
}
table.edit-page-bottomtable .sub{display: none;}
#action-area td:nth-of-type(1),
#action-area #show-upload-button{
background-color: rgb(var(--bright-accent))!important;
}
.btn:is(:hover,:active,:focus,:focus-within),:not(.page-options-bottom) > .btn a:is(:hover,:active,:focus,:focus-within){
background-color: rgb(var(--bright-accent))!important;
transition: background-color 0.1s ease-in;
}
:is(input.text,textarea):not(:placeholder-shown) {
background-color: rgb(var(--white-monochrome));
}
:is(form#edit-page-form,form#edit-post-form,form#new-post-form,form#new-thread-form) .wd-editor-toolbar-panel,
#license-area {
background-color: rgb(var(--white-monochrome));
}
:is(form#edit-page-form,form#edit-post-form,form#new-post-form,form#new-thread-form) table.form:first-of-type tr td:first-of-type {
background-color: rgb(var(--white-monochrome));
}
:is(form#edit-page-form,form#edit-post-form,form#new-post-form,form#new-thread-form) .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:placeholder-shown) {
background-color: rgb(var(--bright-accent));
color: rgb(var(--swatch-menutxt-general-color));
border: 1px solid rgb(var(--bright-accent));
}
:is(form#edit-page-form,form#edit-post-form,form#new-post-form,form#new-thread-form) .edit-page-bottomtable tr>td:first-of-type>div:first-of-type {
background-color: rgb(var(--white-monochrome));
}
:is(form#edit-page-form,form#edit-post-form,form#new-post-form,form#new-thread-form) .edit-page-bottomtable tr>td:first-of-type>div:first-of-type:before {
background-color: rgb(var(--bright-accent));
border: 1px solid rgb(var(--bright-accent));
color: rgb(var(--white-monochrome));
}
textarea, input.text, input.checkbox, div.note, #lock-info {
background-color: rgb(var(--white-monochrome));
}
:not(:is(.page-rate-widget-box,#search-top-box-form))>div.buttons input {
border-radius: 4px;
border-color: rgb(var(--bright-accent));
background-color: rgb(var(--white-monochrome));
font-weight: bold;
text-align: center;
}
:not(:is(.page-rate-widget-box,#search-top-box-form))>div.buttons input:is(:hover,:active,:focus,:focus-within) {
font-weight: bold;
background-color: rgb(var(--white-monochrome));
color: rgb(var(--white-monochrome));
text-align: center;
}
/* style */
#top-bar{
backdrop-filter: blur(1rem);
}
#header h1{
position: relative;
top: calc((var(--header-height-on-desktop) - var(--header-height-on-desktop-bhl)) / 2 + 1rem);
height: auto;
}
#header h2{
position: relative;
top: calc((var(--header-height-on-desktop) - var(--header-height-on-desktop-bhl)) / 2 + var(--h1-fs));
height: auto;
}
#page-title{
margin: 0;
}
.mobile-top-bar .open-menu{
background-color: transparent;
}
.mobile-top-bar .open-menu:hover{
transition:all 0.2s ease;
border-radius: 2px;
transform: scale(1.1);
background-color: rgb(var(--bright-accent));
}
#top-bar :is(div.top-bar,div.mobile-top-bar) > ul > li > a{
transition: background 0.2s ease, transform 0.3s ease;
}
#top-bar :is(div.top-bar,div.mobile-top-bar) > ul > li:hover > a{
background-color: rgb(var(--bright-accent));
transform: scale(1.1);
border-radius: 2px;
}
#top-bar div.top-bar > ul > li:hover > a {
background-color: rgb(var(--bright-accent));
transform: scale(1);
border-radius: 2px;
}
#top-bar :is(div.top-bar,div.mobile-top-bar) > ul > li > ul > li > a{
background-color: rgb(var(--white-monochrome));
border: solid 1px rgb(var(--bright-accent));
transition: background 0.2s ease, transform 0.3s ease;
}
#top-bar :is(div.top-bar,div.mobile-top-bar) > ul > li > ul > li:hover > a{
background-color: rgb(var(--white-monochrome));
border-color: rgb(var(--bright-accent));
transform: translateY(-5px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#top-bar div.top-bar > ul > li > ul,
#top-bar div.mobile-top-bar > ul > li > ul {
background-color: rgb(var(--white-monochrome));
}
#footer {
color: rgb(236 232 223);
background-color: #d26464;
}
#footer a {
color: rgb(236 232 223);
}
#footer .options a {
box-shadow: .0625rem 0 0 0 rgb(236 232 223);
}
#header h1 a::before,
#header h1 a::after,
#header h2 span::before,
#header h2 span::after {
text-shadow: none !important;
-webkit-text-stroke: 0 !important;
text-stroke: 0 !important;
}
/* content */
#page-content table.wiki-content-table :is(th,td) {
border: .0625rem solid rgb(200 80 80) !important;
}
#page-content table.wiki-content-table {
background-color: rgb(236 232 223);
}
#page-content table.wiki-content-table th {
--wght: calc(var(--ui-wght) + 200);
background: rgb(210 100 100);
color: rgb(236 232 223);
font-weight: var(--wght);
text-align: center;
padding: .5em 1em;
}
/* toc */
#toc #toc-list {
--toc-bg: rgb(236, 232, 223);
--toc-border: #d26464;
--toc-shadow: rgba(210, 100, 100, 0.1);
background-color: var(--toc-bg);
border-radius: 8px;
border: 2px solid var(--toc-border);
box-shadow: 0 2px 8px var(--toc-shadow);
padding: 12px;
margin: 8px 0;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
position: relative;
}
#toc #toc-list:hover {
border-color: darken(#d26464, 10%);
box-shadow: 0 4px 12px rgba(210, 100, 100, 0.15);
transform: translateY(-2px);
}
#toc #toc-list::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 6px;
border: 1px solid transparent;
pointer-events: none;
transition: all 0.4s ease;
}
#toc #toc-list:hover::after {
border-color: rgba(210, 100, 100, 0.3);
animation: borderPulse 2s infinite;
}
@keyframes borderPulse {
0% { box-shadow: 0 0 0 0 rgba(210, 100, 100, 0.3); }
70% { box-shadow: 0 0 0 5px rgba(210, 100, 100, 0); }
100% { box-shadow: 0 0 0 0 rgba(210, 100, 100, 0); }
}
#toc #toc-list::-webkit-scrollbar {
width: 6px;
}
#toc #toc-list::-webkit-scrollbar-track {
background: rgba(236, 232, 223, 0.5);
border-radius: 3px;
}
#toc #toc-list::-webkit-scrollbar-thumb {
background: #d26464;
border-radius: 3px;
}
#toc #toc-list::-webkit-scrollbar-thumb:hover {
background: darken(#d26464, 10%);
}
#toc #toc-list div {
margin: 6px 0;
}
#toc #toc-list a {
padding: 5px 10px;
border-radius: 3px;
transition: all 0.2s ease;
}
@media (max-width: 768px) {
#toc #toc-list {
border-radius: 6px;
border-width: 1px;
margin: 6px 0;
}
}
#toc .title {
background-color: #d26464;
}
#toc #toc-action-bar a:is(:hover,:active,:focus,:focus-within) {
color: rgb(236 232 223);
background-color: #d26464;
}
#toc #toc-action-bar a {
color: rgb(236 232 223);
background-color: #d26464;
}
#main-content .page-tags {
box-shadow: 0 -.125rem 0 0 rgb(210 100 100);
}
#main-content .page-tags:before {
background-color: rgb(210 100 100);
color: rgb(236 232 223);
}
/* div */
.darkblock {
color: rgb(236 232 223);
}
.dark-styled-quote {
color: rgb(var(--white-monochrome));
border-left: solid 6px rgb(217 213 203);
}