Scp Offices Sigma

/*
Sigma-9 SCP Offices Theme
[2020 Wikidot Theme]
By Dr Lekter and DrMacro
Adapted from BHL SCP Offices Theme by Woedenaz
Based on SCP Sigma 9 Theme created by Aelanna and Dr Devan
*/

@import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700');

:root {
—body-font: 'IBM Plex Mono', monospace;
—header-font: 'IBM Plex Mono', sans-serif;
—title-font: 'IBM Plex Mono', monospace;
—mono-font: "IBM Plex Mono", monospace;
—white-monochrome: 238, 238, 216;
—pale-gray-monochrome: 233, 231, 204;
—light-gray-monochrome: 147, 147, 147;
—gray-monochrome: 127, 127, 127;
—dark-gray-monochrome: 101, 101, 101;
—black-monochrome: 25, 20, 16;
—bright-accent: 145, 179, 153;
—medium-accent: 145, 179, 153;
—dark-accent: 105, 133, 111;

gradient-header: linear-gradient(0deg,rgb(var(medium-accent)) 0%,rgb(var(black-monochrome)) 90%,rgb(var(black-monochrome)));
gradient-sidemenu-header: linear-gradient(10deg, rgba(var(medium-accent), 0.45), rgba(var(—medium-accent), 0.55));

scrollbar-color: rgba(var(white-monochrome), 1) rgba(var(bright-accent), 0.50);
}

/* HEADER */
div#container-wrap {
background-image:
repeating-linear-gradient(45deg,hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),

repeating-linear-gradient(180deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),

linear-gradient(to bottom,
rgba(var(black-monochrome), 1) 8.75rem,
rgba(var(light-gray-monochrome), 1) 7.625rem,
rgba(var(gray-monochrome), 1) calc(91% - 0.125rem),
rgba(var(dark-gray-monochrome), 1) calc(99% - 0.125rem));

background-size: 100% 8.7rem, 100% 8.7rem, 100% 10.08rem;
background-repeat: no-repeat;
}

#header {
background: url(/local—files/theme:scp-offices-sigma/scpoffices_logo.svg) 13px 41px no-repeat;
background-size: 94px 94px;
}

#header h1 a {
font-size: 150%;
color: rgb(var(white-monochrome));
font-family: var(title-font);
font-weight: 900;
text-shadow: .063rem .063rem .063rem #0c0c0c;
letter-spacing: -.02em;
line-height: 0;
}

#header h2 span {
color: rgb(var(bright-accent));
font-family: var(title-font);
text-shadow: .063rem .063rem .063rem #0c0c0c;
font-weight: 400;
line-height: 0;
font-size: .945rem;
}

@media (max-width: 767px) {
#header {
background: url(/local—files/debhlisation/scpoffices_logo.svg) 2px 72px no-repeat;
background-size: 50px 50px;
}
#header h1 a {
font-size: 80%;
}
#header h2 span {
font-size: .700rem;
}
}

/* LOG-IN INFO */
#login-status {
color: rgb(var(white-monochrome));
}
#login-status a {
color: rgb(var(white-monochrome));
}

#login-status ul a {
color: rgb(var(bright-accent));
background: rgb(var(white-monochrome));
}

#login-status ul a:hover {
color: rgb(var(—dark-accent));
font-weight: bold;
}

/* SEARCH BAR */
#search-top-box-input {
background-color: rgb(var(gray-monochrome));
}
#search-top-box-input:hover, #search-top-box-input:focus {
border: solid 1px rgb(var(white-monochrome));
color: rgb(var(white-monochrome));
background-color: rgb(var(light-gray-monochrome));
box-shadow: inset 1px 1px 3px rgba(0,0,0,.8);
}
#search-top-box-form input[type=submit] {
background: rgb(var(bright-accent));
color: rgb(var(white-monochrome));
transition: background 0.25s;
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
background: rgb(var(dark-accent));
color: rgb(var(white-monochrome));
}

/* TITLE */
#page-title {
font-size: 210%;
font-family: 'IMB Plex Mono';
font-weight: 600;
}

h1, h2, h3, h4, h5, h6, #page-title {
font-family: var(title-font);
color: rgb(var(black-monochrome));
}
h1 {
margin: .7em 0 .6em;
padding: 0 0 .25em;
font-weight: 700;
}
h2, h3, h4, h5, h6 {
margin: .5em 0 .4em;
padding: 0;
font-weight: 900;
letter-spacing: .063rem;
}

@media (max-width: 767px) {
#page-title {
font-size: 180%
}
}

/* TOP-BAR SETTINGS */
#top-bar ul li ul {
border: 0px;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
border-top: 1px solid transparent;
padding: 0.3em;
padding-left: 0.5em;
color: rgb(var(white-monochrome));
}
#top-bar ul li a {
color: rgb(var(white-monochrome));
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
background: rgb(var(dark-gray-monochrome));
color: rgb(var(white-monochrome));
}
#top-bar ul li ul a, #top-bar a:hover {
color: rgb(var(pale-grey-monochrome));
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
background: rgb(var(dark-gray-monochrome));
}
#top-bar ul li ul.sfhover a:hover,
#top-bar ul li ul:hover a:hover {
background: rgb(var(gray-monochrome));
color: rgb(var(white-monochrome));
font-weight: bold;
}
.c_topbar_arrow {
color: rgb(var(—white-monochrome));
}

/* SIDE-BAR SETTINGS */
#side-bar .side-block {
border-color: rgb(var(dark-accent));
background-color: rgb(var(white-monochrome));
box-shadow: 0 2px 6px rgba(var(—dark-accent),.5);
}

#side-bar .side-block.media {
background-color: rgb(var(—pale-gray-monochrome)) !important;
}

#side-bar .side-block.resources {
background-color: rgb(232, 229, 197) !important;
}

div.scpnet-interwiki-wrapper {
filter: hue-rotate(90deg);
}

#side-bar .heading {
color: rgb(var(dark-accent));
border-bottom-color: rgb(var(dark-accent));
}

/* SIDE-BAR IMAGES */
.side-block .menu-item > .image {
filter: hue-rotate(-171deg);
}

/* Patch pour hover imbriqué */
#top-bar ul li ul li ul {
left: 159px;
}

/* MOBILE SIDE-BAR */
@media (max-width: 767px) {
#side-bar {
background-color: rgb(var(white-monochrome))
}
.open-menu a {
border: 0.2em solid rgb(var(bright-accent)) !important;
background-color: rgb(var(white-monochrome)) !important;
color: rgb(var(bright-accent)) !important;
}
}

/* BODY */
body {
background-color: rgb(var(—white-monochrome));
font-family: var( —body-font);
}

/* FOOTER */
#footer {
background: rgb(var(—dark-accent));
}

/* OTHER STRUCTURAL ELEMENTS */

/* LINKS */
a {
color: rgb(var(bright-accent));
font-weight: bold;
}
a:visited {
color: rgb(var(dark-accent));
}
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage {
color: rgb(var(—dark-accent));
}

/* POP-UP WINDOWS */
.owindow {
background-color: rgb(var(—white-monochrome));
}

.owindow .modal-header {
background-color: rgb(var(—white-monochrome));
}

.owindow .modal-body img {
background-color: transparent !important;
}

.owindow .title {
background-color: rgb(var(—pale-gray-monochrome));
}

.owindow .button-bar a {
background-color: rgb(var(—pale-gray-monochrome));
}

/* CODE */
.code {
background-color: rgb(var(—pale-gray-monochrome));
}

/* RATING MODULE */
.page-rate-widget-box .rate-points {
background-color: rgb(var(dark-accent)) !important;
border-color: rgb(var(dark-accent));
color: rgb(var(pale-gray-monochrome));
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: rgb(var(pale-gray-monochrome));
border-top-color: rgb(var(dark-accent));
border-bottom-color: rgb(var(dark-accent));
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: rgb(var(dark-accent));
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: rgb(var(dark-accent));
color: rgb(var(pale-gray-monochrome));
}
.page-rate-widget-box .cancel {
background: transparent;
background-color: rgb(var(dark-accent));
border-color: rgb(var(dark-accent));
}
.page-rate-widget-box .cancel a {
color: rgb(var(bright-accent));
}
.page-rate-widget-box .cancel a:hover {
background-color: rgb(var(dark-accent));
color: rgb(var(pale-gray-monochrome));
}

/* CREDIT MODULE */
#page-content .rate-box-with-credit-button {
background-color: rgb(var(dark-accent));
border-color: rgb(var(dark-accent));
}
#page-content .rate-box-with-credit-button .creditButton p a {
border-left-color: rgb(var(bright-accent))
}
#page-content .rate-box-with-credit-button .creditButton a {
color: rgb(var(white-monochrome));
}
#page-content .rate-box-with-credit-button .creditButton a:hover {
color: rgb(var(—bright-accent));
}

#page-content .modalbox {
background: rgb(var(white-monochrome)) !important;
color: rgb(var(black-monochrome));
box-shadow: 0 2px 6px rgba(var(—dark-accent),.5);
}

.close-credits,
.credit-back {
filter: hue-rotate(-171deg);
}

/* PAGE ELEMENTS */

/* BLOCKQUOTES */
blockquote,
div.blockquote {
background-color: rgb(var(—pale-gray-monochrome));
}

/* TABLES */
table.wiki-content-table th {
color: rgb(var(white-monochrome));
background-color: rgb(var(light-gray-monochrome));
}

/* TABVIEW */
.yui-navset .yui-content {
background-color: rgb(237, 236, 213);
font-weight: normal;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-image: none;
background-color: rgb(var(pale-gray-monochrome));
font-weight: normal;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background: rgb(var(dark-accent));
color: rgb(var(white-monochrome));
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* Pas d'effet focus/hover pour tab sélectionné */
.yui-navset .yui-nav .selected a:hover {
background-image: none !important;
background: rgb(var(bright-accent));
border-color: rgb(var(dark-accent));
color: rgb(var(white-monochrome));
}
.yui-navset li {
line-height: normal;
}

/* IMAGE BLOCK */
.scp-image-block .scp-image-caption {
background-color: rgb(var(—pale-gray-monochrome));
}

/* ANIMATIONS */

#header h1 *,
#page-title * {
will-change: opacity;
transition: opacity 0.2s ease-in-out;
}

#header h1 a:hover,
#page-title:hover {
-webkit-animation: flicker 20s linear infinite;
-moz-animation: flicker 20s linear infinite;
animation: flicker 20s linear infinite;
}

@-webkit-keyframes flicker {
0% {
opacity: .2;
}

5% {
opacity: .9;
}

6% {
opacity: 1;
}

11% {
opacity: .4;
}

11.25% {
opacity: .6;
}

11.5% {
opacity: .4;
}

18% {
opacity: 1;
}

18.5% {
opacity: .9;
}

22% {
opacity: 1;
}

38.5% {
opacity: 1;
}

39% {
opacity: .8;
}

42% {
opacity: 1;
}

60% {
opacity: 1;
}

60.5% {
opacity: 0;
}

62% {
opacity: 0;
}

63% {
opacity: .2;
}

63.25% {
opacity: 0;
}

65% {
opacity: 1;
}

73% {
opacity: 1;
}

75% {
opacity: .8;
}

79% {
opacity: 1;
}

100% {
opacity: 1;
}
}
}