@import url("http://vivarium.wdfiles.com/local--files/backrooms%3Avivtheme/stylesheet.css");
:root {
--theme-base: "black-highlighter";
--theme-id: "dark-p-r-i";
--theme-name: "Dark P.R.I. Theme";
--logo-image: url("https://s1.ax1x.com/2023/01/14/pSMUy1H.png");
--header-title: "P. R. I.";
--header-subtitle: "因探求而凝聚,因合作而共存";
--body-font: punctuation-marks,proxima-nova, sans-serif;
--header-font: 'CKTKingKong','uni_sansheavy_caps', sans-serif;
--title-font: 'CKTKingKong','uni_sansheavy_caps', sans-serif;
--mono-font: 'Fantasque Sans Mono', monospace;
--white-monochrome: 240, 242, 242;
--pale-gray-monochrome: 138, 166, 158;
--light-gray-monochrome: 167, 217, 217;
--very-light-gray-monochrome: var(--dark-gray-monochrome);
--gray-monochrome: 101, 129, 140;
--black-monochrome: 33, 37, 46;
--bright-accent: 182, 219, 242;
--dark-accent: 34, 50, 64;
--medium-accent: 34, 68, 89;
--pale-accent: 34, 68, 89;
--swatch-topmenu-border-color: var(--dark-gray-monochrome);
--swatch-topmenu-bg-color: var(--dark-gray-monochrome);
--swatch-background: var(--dark-gray-monochrome);
--swatch-text-general: var(--swatch-text-light);
--link-color: var(--bright-accent);
--hover-link-color: var(--white-monochrome);
--visited-link-color: var(--bright-accent);
--newpage-color: var(--light-gray-monochrome);
--background-gradient-distance: 40rem;
--gradient-header: linear-gradient(to bottom,
rgba(var(--dark-accent)) 0%,
rgba(var(--dark-gray-monochrome)) 7.5rem
);
--gradient-topmenu: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) var(--header-height-on-desktop),
rgba(var(--dark-gray-monochrome),1) calc(var(--header-height-on-desktop) + 0.375rem),
rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.2rem),
rgba(var(--bright-accent), 1) calc(100% - 0.2rem),
rgba(var(--bright-accent), 1) 100%);
--gradient-topmenu-mobile: linear-gradient(
to bottom,
rgba(var(--dark-gray-monochrome),1) 0,
rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.2rem),
rgba(var(--bright-accent), 1) calc(var(--topbar-height-on-mobile) - 0.2rem),
rgba(var(--bright-accent),1) var(--topbar-height-on-mobile));
--sidebar-transition-timing: 0.1s ease-in-out 0.1s;
}
@keyframes logo-appear
{
from {
opacity: 0;}
to {
opacity: 0.4;
}
}
@-webkit-keyframes logo-appear /* Safari and Chrome */
{
from { top:-16rem;
opacity: 0;
}
to { top:-0rem;
opacity: 0.4;
}
}
@keyframes top-appear
{
from {
opacity: 0;}
to {
opacity: 1;
}
}
-webkit-@keyframes top-appear
{
from {
opacity: 0;}
to {
opacity: 1;
}
}
@keyframes h1-appear
{
from {
opacity: 0;}
to {
opacity: 1;
}
}
@-webkit-keyframes h1-appear /* Safari and Chrome */
{
from {
opacity: 0;}
to {
opacity: 1;
}
}
@keyframes h2-appear
{
from {
opacity: 0;}
to {
opacity: 1;
}
}
@-webkit-keyframes h2-appear /* Safari and Chrome */
{
from {
opacity: 0;}
to {
opacity: 1;
}
}
@keyframes tab-disappear {
0% { max-height: 9999rem; }
1% { max-height: 100vh; }
100% { max-height: 0; }
}
@keyframes tab-appear {
0% { max-height: 0; }
99% { max-height: 100vh; }
100% { max-height: 9999rem; }
}
@-webkit-keyframes tab-disappear {
0% { max-height: 9999rem; }
1% { max-height: 100vh; }
100% { max-height: 0; }
}
@-webkit-keyframes tab-appear {
0% { max-height: 0; }
99% { max-height: 100vh; }
100% { max-height: 9999rem; }
}
body {
background-color: rgba(var(--black-monochrome));
max-width:100%!important;
}
#skrollr-body {
width: auto;
position: relative;
top: 0;
left: 0;
background-image: linear-gradient(
to bottom,
rgba(var(--dark-accent), 1),
rgba(var(--dark-gray-monochrome),1));
background-repeat: repeat-x;
background-size: cover;
background-position: center, center;
}
#top-bar{
animation:top-appear 3s ease-in-out alternate;
-webkit-animation:top-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}
#side-bar:hover,
#side-bar:active,
#side-bar:focus-within {
background-color: rgb(var(--black-monochrome));
}
#side-bar .menu-item a, #side-bar:hover,
#side-bar:active,
#side-bar:focus-within a{
color:rgb(var(--white-monochrome))!important;
}
#header h1 a::before, #header h2 span::before {
text-shadow: none;
}
#header::before {
animation:logo-appear 3s ease-in-out alternate;
-webkit-animation:logo-appear 3s ease-in-out alternate; /*Safari and Chrome*/
background-size: auto 8.5rem;
}
#header h1, #header h1 a {
animation:h1-appear 3s ease-in-out alternate;
-webkit-animation:h1-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}
#header h2, #header h2 span, #header h2 span::before {
animation:h2-appear 3s ease-in-out alternate;
-webkit-animation:h2-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}
div.top-bar>ul>li>ul>li>a{
transition: color 0.3s ease-out;
-webkit-transition: color 0.3s ease-out;
}
div.top-bar>ul>li>ul>li>a:hover{
color: rgb(var(--black-monochrome))!important;
}
#container {
background-image: none;
}
#toc {
background-color:rgb(var(--gray-monochrome));
color:rgb(var(--white-monochrome));
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
border: none;
padding: 0.5rem
}
#toc a {
color: rgb(var(--swatch-menubg-medium-color));
}
#main-content a {
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out; /* Safari */
}
#page-title{
text-align: center;
color: rgb(var(--light-gray-monochrome));
border-bottom: 5px solid rgb(var(--light-gray-monochrome));
}
#main-content h1 {
color: rgb(var(--light-gray-monochrome));
border-bottom: 5px 5px solid rgb(var(--light-gray-monochrome));
}
.code {
background-color: rgb(var(--dark-gray-monochrome));
border: none;
border-left: 0.125rem rgb(var(--light-gray-monochrome))!important;
box-shadow: none;
}
blockquote, div.blockquote {
border: none;
border-left: 0.125rem rgb(var(--light-gray-monochrome))!important;
background-color: rgb(var(--dark-gray-monochrome));
}
.scp-image-caption {
background-color: rgb(var(--gray-monochrome));
}
.page-rate-widget-box {
border: none;
border-left: 3px soild rgb(var(--light-gray-monochrome))!important;
background-image: none;
background-color:rgb(var(--light-gray-monochrome));
box-shadow: none
}
.page-rate-widget-box span.rate-points {
letter-spacing: -12px;
color: transparent !important;
}
.page-rate-widget-box .rate-points:before, .page-rate-widget-box .rate-points span {
content: "综合评分指数:";
letter-spacing: 0;
color: rgb(var(--black-monochrome));
}
table.wiki-content-table td,
table.wiki-content-table th,
table.wiki-content-table tr {
border: .1rem solid rgb(var(--gray-monochrome)) !important;
background-color:rgb(var(--dark-accent))!important;
}
table.wiki-content-table th {
color:rgb(var(--black-monochrome))!important;
background-color:rgb(var(--light-gray-monochrome))!important;
}
.scp-image-caption {
background-color: rgb(var(--gray-monochrome))!important;
}
/* TABVIEW */
.yui-navset .yui-content {
background-color:inherit;
border:none;
border-bottom: 0.3rem solid rgba(var(--bright-accent), 1);
}
/*未选择的tab*/
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-color: rgba(var(--dark-accent), 1);
color:rgb(var(--white-monochrome));
}
/*鼠标移上去的tab*/
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background-color: rgba(var(--dark-gray-monochrome), 1);
color:rgb(var(--white-monochrome));
}
/*选了的tab*/
#page-content .yui-navset .yui-nav .selected,
#page-content .yui-navset .yui-navset-top .yui-nav .selected {
background-color: rgba(var(--dark-gray-monochrone), 1);
}
#page-content .yui-navset .yui-nav .selected a:focus,
#page-content .yui-navset .yui-nav .selected a:active {
background-color: rgba(var(--dark-gray-monochrome), 1);
}
.yui-navset .yui-content > div {
padding: 0.25em 0.5em;
display: block;
top: 0;
overflow: hidden;
transform-origin: 0 0;
}
#owindow{
background-color: rgba(var(--dark-accent), 1);
color:rgb(var(--white-monochrome));
}
#page-content .yui-navset .yui-content > div > * {
transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div[style*="none"] {
display: block !important;
flex: 0;
max-height: 0;
padding: 0 0.5em;
border-width: 0;
transition: padding 0s linear 0.5s,
border-width 0s linear 0.5s,
flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
animation: tab-disappear 1s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
display: block !important;
flex: 1;
max-height: 9999rem;
transition: padding 0s linear 0.5s,
border-width 0s linear 0.5s,
flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
animation: tab-appear 1s ease-in-out 0.5s 1 both;
}
.footnotes-footer {
border-color: rgb(var(--bright-accent));
}
.lightblock {
background-color:rgb(var(--gray-monochrome));
}
.styled-quote {
background-color:rgb(var(--gray-monochrome));
border-left:0.2rem solid rgb(var(--bright-accent));
}
.darkblock {
background-color:rgb(var(--dark-accent));
}
.dark-styled-quote {
background-color:rgb(var(--dark-accent));
border-left:0.2rem solid rgb(var(--bright-accent));
}
.titleblock {
background-color:rgb(var(--gray-monochrome));
padding: 0.5rem 1rem 0.10rem;
margin: 1.5rem 0rem 0.5rem 0rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
border-top: solid rgb(var(--bright-accent)) 0.3rem;
}
.dark-titlebox{
position: relative;
top: -1.6rem;
background-color:rgb(var(--gray-monochrome));
padding: 0.25rem 1rem;
line-height: 0.1rem;
}
.dark-titleblock {
background-color:rgb(var(--dark-accent));
padding: 0.5rem 1rem 0.10rem;
margin: 1.5rem 0rem 0.5rem 0rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
border-top: solid rgb(var(--bright-accent)) 0.3rem;
}
.titlebox{
position: relative;
top: -1.6rem;
background-color:rgb(var(--dark-accent));
color: rgb(var(--white-monochrome));
padding: 0.25rem 1rem;
line-height: 0.1rem;
}
.glassblock {
background-image: linear-gradient(-30deg,
rgba(var(--bright-accent),.8) -80%,
rgba(var(--white-monochrome),.4) 100%);
border: solid rgb(var(--pale-accent)) 2px;
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.hoverblock{
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.hoverblock:hover,.hoverblock:focus{
box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
transform: translateY(-.3em);
}
.light-hoverblock{
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out; /* Safari */
}
.light-hoverblock:hover,.light-hoverblock:focus{
background-color: rgb(var(--gray-monochrome));
box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
transform: translateY(-.3em);
}
.dark-hoverblock{
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out; /* Safari */
}
.dark-hoverblock:hover,.dark-hoverblock:focus{
background-color: rgb(var(--dark-accent));
box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
transform: translateY(-.3em);
}
.transparent-hoverblock{
color:transparent;
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out; /* Safari */
}
.transparent-hoverblock:hover,.transparent-hoverblock:focus{
color: rgb(var(--white-monochrome));
box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
transform: translateY(-.3em);
}
.white-hoverblock{
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out; /* Safari */
}
.white-hoverblock:hover,.white-hoverblock:focus{
color: rgb(var(--black-monochrome));
background-color: rgb(var(--white-monochrome));
box-shadow: 0px 4px 10px 0 rgba(var(--white-monochrome), .25);
transform: translateY(-.3em);
}
.white-hoverblock:hover a:hover{
color: rgb(var(--black-monochrome));
}
.inset-hoverblock{
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.inset-hoverblock:hover,.hoverblock:focus{
box-shadow: inset 0px 4px 10px 0 rgba(var(--bright-accent), .25);
transform: translateY(.3em);
}
.color{
min-height:90px;
}
.image-background {
background-image: url(http://cicnsandbox.wikidot.com/local--files/component:destruction-sequence-agreement-css/body-url);
border: solid rgb(89,47,46) 2px;
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0rem;
box-shadow: 0px 0px 20px 0px rgba(var(--dark-accent), .25);
filter: invert(85%);
color: rgb(var(--black-monochrome));
}
.colors-container {
width: 98%;
display: flex;
flex-direction: column;
margin: 0 auto;
font-weight: 700;
font-family: var(--title-font, Verdana);
color: black;
}
.colors-container .colors, .colors-container .subcolors {
width: 100%;
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
}
.colors-container .color {
flex-grow: 2;
padding: 0.5rem;
margin: 0.5rem;
color: rgb(var(--swatch-text-dark, 0, 0, 0));
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.colors-container .colors .color {
height: 7rem;
min-width: 4rem;
flex-basis: calc((100% / 2) - 2rem);
}
.colors-container .subcolors .color {
height: 4rem;
min-width: 4rem;
font-size: 75%;
text-align: center;
flex-basis: calc((100% / 6) - 2rem);
}
.colors-container .css-variable {
font-size: 75%;
letter-spacing: 0.1em;
font-family: var(--body-font, Verdana);
}
/* Hide a colour that's not been provided by seeing if the variable starts with "{$" */
.colors-container [data-variable^=\{\$] {
display: none;
}
.colors-container [data-has-light-text="1"] {
color: white;
color: rgb(var(--swatch-text-light, 255, 255, 255));
}
.owindow, .title.modal-header {
background-color: rgb(44 44 44);
color: #ffffff;
}