Cloud Journal Center - 云分月刊中心

@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);
}