@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
/* Basic Colors */
--background-color: 248, 248, 248;
--text-color: 30, 30, 30;
/* Deco Colors */
--light-color-1: var(--background-color);
--light-color-2: 235, 235, 235;
--dark-color-1: 180, 180, 180;
--dark-color-2: 90, 90, 90;
--dark-color-3: var(--text-color);
--dark-color-4: var(--text-color);
/* Special Colors */
--warning-color: 193, 44, 50;
--accept-color: 20, 169, 32;
--neutral-color: 193, 147, 44;
--warning-text-color: var(--light-color-2);
--accept-text-color: var(--warning-text-color);
--neutral-text-color: var(--warning-text-color);
/* Link Colors */
--link-color: 68, 123, 230;
--hover-link-color: 24, 80, 187;
--visited-link-color: 23, 24, 120;
--newpage-color: 68, 23, 230;
/* Select Colors */
--selected-background-color: 67, 98, 197;
--selected-text-color: 253, 253, 253;
/* Scrollbar Colors */
--scrollbar-color: var(--dark-color-1), 0.75;
--scrollbar-background-color: var(--dark-color-1), 0.15;
/* Note Colors */
--note-background-color: var(--light-color-1);
/* General Buttons */
--general-button-background-color: var(--general-dark-background-color);
--general-hover-button-background-color: var(--general-medium-background-color);
/* Header Colors */
--header-background-bottom: var(--background-color), 0;
--header-background-top: var(--dark-color-1), 0.3;
--header-extra-background-image: none;
--header-text-color: var(--general-dark-text-color);
/* Topbar Colors */
--topbar-background-color: var(--dark-color-4);
--topbar-hover-background-color: var(--dark-color-2);
--topbar-drop-text-color: var(--text-color);
--topbar-drop-background-color: var(--background-color), 0.75;
--topbar-drop-hover-background-color: var(--general-dark-background-color);
/* User Account Colors */
--header-username-color: var(--general-dark-text-color);
--account-button-text-color: var(--general-dark-text-color);
--account-button-hover-text-color: var(--general-medium-text-color);
--account-button-background-color: var(--general-dark-background-color);
--account-button-hover-background-color: var(--general-medium-background-color);
/* Page Title Colors */
--page-title-text-color: var(--general-dark-text-color);
/* Page Tag Colors */
--page-tag-border-color: var(--general-dark-background-color);
/* Footer Colors */
--footer-background-color: var(--general-dark-background-color);
/* Sidebar Colors */
--sidebar-background-color: var(--light-color-1);
--sidebar-media-background-color: var(--background-color);
--sidebar-title-background-color: var(--general-dark-background-color);
--sidebar-hover-text-color: var(--general-dark-text-color);
--sidebar-hover-background-color: var(--general-medium-background-color);
/* Action Colors */
--action-area-info-background-color: var(--general-dark-background-color);
/* Edit Area Colors */
--edit-area-textarea-background-color: var(--background-color);
/* Rating Module Colors */
--rating-rateup-color: var(--dark-color-3);
--rating-ratedown-color: var(--dark-color-3);
--rating-cancel-color: var(--dark-color-3);
/* Popups Colors */
--popup-background-color: var(--background-color);
/* The 4 */
--dark-styled-quote-border-color: var(--dark-color-2);
/* Header Vs */
--main-header-height: 12rem;
--main-header-height-on-mobile: 12rem;
--header-title: "THE BACKROOMS";
--header-title-font-size: 2.65rem;
--header-title-font-size-on-mobile: 2rem;
--header-subtitle: "真理隐于几何之间";
--header-subtitle-font-size: 1rem;
--header-subtitle-font-size-on-mobile: 1rem;
/* Topbar Vs */
--topbar-height: 2.5rem;
--topbar-height-on-mobile: 2.5rem;
--topbar-font-size-on-mobile: 0.8rem;
/* Font Set */
--body-font: "Montserrat", sans-serif;
--header-font: "Raleway", sans-serif;
--title-font: var(--header-font);
--mono-font: "PT Mono", monospace;
}
html {
background: unset;
}
body {
background: linear-gradient(to bottom, rgba(var(--dark-color-1), .4), rgba(var(--background-color)) 40rem);
}
#extra-div-1 {
position: absolute;
width: 100%;
height: 10rem;
top: 1rem;
left: 0;
background: linear-gradient(-5deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 150%);
clip-path: polygon(0 0, 100% 8rem, 100% 100%, 0 2rem);
z-index: -1;
}
#extra-div-2 {
position: absolute;
width: 100%;
height: 6rem;
top: -3rem;
left: 0;
background: linear-gradient(120deg, rgb(var(--dark-color-3)) 20%, rgba(var(--dark-color-1)) 200%);
clip-path: polygon(100% 0, 0 calc(100% - 2rem), 0 100%, 100% 2rem);
z-index: -4;
}
#extra-div-3 {
position: absolute;
width: 100%;
height: 25rem;
top: -16rem;
left: 0;
background: linear-gradient(-85deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 80%);
clip-path: polygon(0 calc(100% - 2rem), 100% 0, 100% 2rem, 0 100%);
z-index: -3;
}
#extra-div-4 {
--gap: 17vh;
position: absolute;
background-image: repeating-linear-gradient(-15deg, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-1)) var(--gap), rgba(var(--dark-color-1)) calc(var(--gap) + 3px));
width: 100%;
height: 100%;
top: 0;
z-index: -4;
opacity: 0.4;
mask: linear-gradient(175deg, black 0, transparent 25rem, transparent calc(100% - 60rem), black calc(100% - 0rem));
}
#extra-div-5 {
--gap: 10vh;
position: absolute;
background-image: repeating-linear-gradient(16deg, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-2), 1) var(--gap), rgba(var(--dark-color-2), 1) calc(var(--gap) + 1rem));
mask: linear-gradient(175deg, black 0, transparent 80%);
width: 100%;
height: 32rem;
top: 0;
z-index: -5;
opacity: 0.6;
}
#extra-div-6 {
--gap: 25vh;
position: absolute;
background-image: repeating-linear-gradient(10deg, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-1)) var(--gap), rgba(var(--dark-color-1)) calc(var(--gap) + 1px));
width: 100%;
height: 100%;
top: 0;
z-index: -4;
opacity: 0.4;
mask: linear-gradient(175deg, transparent 40rem, black 100rem, black calc(100% - 120rem), transparent calc(100% - 50rem));
}
#header-extra-div-1 {
position: absolute;
width: 100%;
height: 6.4rem;
top: 9rem;
left: 0;
background: linear-gradient(175deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-1)) 150%);
clip-path: polygon(0 0, 100% calc(100% - 2rem), 100% 100%, 0 2rem);
}
#header-extra-div-2 {
position: absolute;
width: 100%;
height: 11rem;
top: -2rem;
left: 0;
background: linear-gradient(60deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 250%);
clip-path: polygon(0 calc(100% - 2rem), 100% 0rem, 100% 2rem, 0 100%);
}
#header-extra-div-3 {
position: absolute;
width: 100%;
height: 8rem;
top: 6rem;
left: 0;
background: linear-gradient(50deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-1)) 250%);
clip-path: polygon(0 calc(100% - 2rem), 100% 0rem, 100% 2rem, 0 100%);
}
#header {
position: sticky;
top: -12rem;
}
#header h1 a span {
font-weight: 300;
text-shadow: 0 0 0.3rem rgb(var(--dark-color-3)), 0 0 0.5rem rgb(var(--dark-color-3));
}
#header h1 a span::after {
font-weight: 400;
}
#header h2 span::before {
filter: drop-shadow(0 0 0.4rem rgb(var(--dark-color-1)));
opacity: 0.8;
background-position: center 0.5rem;
background-size: auto 85%;
position: relative;
top: 0.8rem;
}
#login-status {
text-shadow: 0 0 0.5rem rgb(var(--dark-color-3));
}
#account-options {
display: grid !important;
grid-template-columns: 1fr 1fr;
width: 100%;
text-shadow: none;
}
#top-bar {
background: linear-gradient(90deg, rgb(var(--dark-color-3)), rgba(var(--dark-color-2)) 150%);
box-shadow: 0 0 0.5rem rgb(var(--dark-color-1), .2);
}
#top-bar::before {
content:"";
display: block;
background: inherit;
width: 100%;
height: 1rem;
position: absolute;
bottom: 100%;
left: 0;
clip-path: polygon(0 100%, 100% 0, 100% 100%);
z-index: -1;
}
#top-bar::after {
content:"";
display: block;
background: inherit;
width: 100%;
height: 1rem;
position: absolute;
top: 100%;
left: 0;
clip-path: polygon(0 100%, 100% 0, 0 0);
z-index: -1;
}
#content-wrap {
overflow-x: hidden;
}
#main-content {
margin: 0 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
#main-content > div:not(#page-title) {
width: min(var(--body-width), calc(100% - 2rem));
}
#page-title, .meta-title {
padding: 2.5rem 0;
text-align: center;
border-bottom: unset;
background: linear-gradient(-141deg, rgb(var(--dark-color-3)) 50%, rgba(var(--dark-color-2)) 120%);
clip-path: polygon(0 2.5rem, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}
#page-title {
width: 100%;
padding: 2.5rem var(--body-margin);
box-sizing: border-box;
}
#page-content a:not(div.page-rate-widget-box a, div.creditButton p a, div.creditButtonStandalone p a, .licensebox a, .pager a), .page-watch-options a {
text-shadow: 0 0 0.2rem rgb(var(--dark-color-1));
transition: color 0.15s, text-shadow 0.15s cubic-bezier(0.4, 0.0, 1, 1);
}
#page-content a:not(div.page-rate-widget-box a, div.creditButton p a, div.creditButtonStandalone p a, .licensebox a, .pager a):hover, .page-watch-options a:hover {
text-shadow: 0 0 0.5rem rgb(var(--dark-color-1));
text-decoration: none;
}
.overflow-wrapper-wrapper {
width: 0;
margin: auto;
}
.overflow-wrapper {
margin-left: -51vw; margin-right: -51vw;
}
.classic {
width: min(var(--body-width), calc(100% - 2rem));
margin-left: auto; margin-right: auto;
}
.l {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
clip-path: polygon(0 1rem, 100% 0, 100% calc(100% - 1rem), 0 100%);
}
.r {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
clip-path: polygon(100% 1rem, 0 0, 0 calc(100% - 1rem), 100% 100%);
}
.borderblock {
margin: 1rem 0;
padding: 1rem 1.5rem;
border-top: 0.3rem solid rgb(var(--general-dark-border-color));
border-bottom: 0.3rem solid rgb(var(--general-dark-border-color));
}
.footnotes-footer, .bibitems {
height: fit-content;
}
.page-tags span a {
border-radius: 0;
}
.owindow.owait {
--gap: 3%;
background-image: repeating-linear-gradient(to bottom right, rgba(var(--light-color-1), 0) 0, rgba(var(--light-color-1), 0) var(--gap), rgba(var(--dark-color-1), .4) var(--gap), rgba(var(--dark-color-1), .4) calc(var(--gap) + 3px));
background-size: 1000% 1000%;
animation: saving-page-animation infinite ease-in-out 3s alternate;
justify-content: center;
}
.owindow.owait .content{
display: none;
}
@keyframes saving-page-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 10% 10%;
}
}
