/*
Sigma-9 La Rue Macabre Theme
[2020 Wikidot Theme]
By Dr Lekter
Adapted from BHL La Rue Macabre Theme by MalyceGraves
Based on SCP Sigma 9 Theme created by Aelanna and Dr Devan
*/
@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Parisienne|Rubik&display=swap');
:root {
/* Header */
--ct_bg_header-logo: url(http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/sigil2.png);
/* Module de notation */
--ct_col_rate-primary: linear-gradient(to top, rgba(var(--bright-accent), 0.25) 0, rgba(var(--medium-accent), 0.15) 100%);
--ct_brd_rate-primary: solid 1px rgb(var(--dark-accent));
--ct_col_rate-secondary: rgb(var(--pale-gray-monochrome));
--ct_col_rate-cancel: #966;
--ct_col_rate-link-hover: #e5e1d8;
/* Bloc d'image */
--ct_brd_image-block: solid 0px transparent;
--ct_col_image-block-contrast: rgb(var(--dark-accent));
--body-font: 'Rubik', sans-serif;
--header-font: 'Parisienne', cursive;
--title-font: 'Parisienne', cursive;
--mono-font: pennsylvania, monospace;
--white-monochrome: 255, 250, 240;
--pale-gray-monochrome: 244, 244, 244;
--light-pale-gray-monochrome: 244, 244, 244;
--very-light-gray-monochrome: 215, 215, 215;
--light-gray-monochrome: 215, 215, 215;
--gray-monochrome: 156, 148, 132;
--dark-gray-monochrome: 115, 94, 55;
--black-monochrome: 13, 12, 10;
--black-monochrome-alt: 54, 48, 43;
--bright-accent: 255, 230, 179;
--medium-accent: 207, 159, 45;
--dark-accent: 70, 56, 33;
--newpage-color: 224, 224, 209;
--swatch-text-light: 115, 94, 55;
--background-gradient-color: var(--dark-accent, 70, 56, 33);
--header-gradient-color-bottom: var(--dark-accent);
--header-gradient-color-middle: var(--black-monochrome);
--header-gradient-color-top: var(--black-monochrome);
--gradient-header: linear-gradient(30deg,
rgb(var(--header-gradient-color-bottom)) 0%,
rgb(var(--header-gradient-color-middle)) 90%,
rgb(var(--header-gradient-color-top)) 100%);
--background-gradient-distance: 40rem;
--swatch-background: var(--black-monochrome, 26, 25, 24);
--gradient-background: linear-gradient(180deg,rgba(var(--background-gradient-color),1) 0,rgba(var(--background-gradient-color),0.987) calc(0.008*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.951) calc(0.029*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.896) calc(0.064*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.825) calc(0.11*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.741) calc(0.166*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.648) calc(0.231*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.550) calc(0.304*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.450) calc(0.383*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.352) calc(0.467*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.259) calc(0.554*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.175) calc(0.644*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.104) calc(0.735*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.049) calc(0.825*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0.013) calc(0.914*var(--background-gradient-distance)),rgba(var(--background-gradient-color),0) var(--background-gradient-distance));
/* For header patch - some may stay unused */
--head-top: 0, 0, 0; /* Black */
--head-bottom: 103, 61, 61; /* Brown */
--bar-top: var(--gray-monochrome); /* Light gray */
--bar-bottom: 124, 124, 118; /* Dark gray */
--bar-shadow-top: 95, 60, 60; /* Dark brown */
--bar-shadow-bottom: 157, 157, 157; /* Very light gray */
--body: 255, 255, 255; /* White */
}
#extra-div-1 {
height: 100vh;
width: 100vw;
position: absolute;
top: 161px;
z-index: -1;
background-color: rgba(0, 0, 0, 0.5);
background-image: url(http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/tilewood.jpg);
background-size: 10%, 31.250rem;
mix-blend-mode: difference;
background-blend-mode: difference;
background-repeat: repeat, repeat-x;
-webkit-mask: var(--gradient-background);
mask: var(--gradient-background);
}
#extra-div-2 {
background-image: linear-gradient(to bottom, black, black);;
background-repeat: repeat, repeat-x;
z-index: -2;
height: 94%;
width: 100vw;
position: absolute;
top: 161px;
}
#header {
background-size: 130px;
background-position: -8px 14px;
}
/*
CSS gradient to replace Sigma-9 body-bg image
By 7happy7, Dr Lekter and Styrius
Based on code by Woedenaz
*/
@supports (background-blend-mode: screen) {
div#container-wrap {
background-image:
linear-gradient(90deg,#463821 0,#0c0c0c 75%,#0C0C0B),
linear-gradient(180deg, hsla(0,0%,100%,0) 0,
hsla(0,0%,100%,0) 7.5rem, #0c0c0c 0, #424248 7.625rem,
rgba(66,66,72,.95) calc(100% - 0.125rem), #424248 calc(100% - 0.125rem), #0c0c0c),
linear-gradient(0deg,#d7d7d7 0, hsla(0,0%,84.3%,.987) 0.32rem,
hsla(0,0%,84.3%,0.951) 1.16rem,
hsla(0,0%,84.3%,.896) 2.56rem,
hsla(0,0%,84.3%,.825) 4.4rem,
hsla(0,0%,84.3%,.741) 6.64rem,
hsla(0,0%,84.3%,.648) 9.24rem,
hsla(0,0%,84.3%,.55) 12.16rem,
hsla(0,0%,84.3%,.45) 15.32rem,
hsla(0,0%,84.3%,.352) 18.68rem,
hsla(0,0%,84.3%,.259) 22.16rem,
hsla(0,0%,84.3%,.175) 25.76rem,
hsla(0,0%,84.3%,.104) 29.4rem,
hsla(0,0%,84.3%,.049) 33rem,
hsla(0,0%,84.3%,.013) 36.56rem,
hsla(0,0%,84.3%,0) 40rem),
linear-gradient(to bottom,rgba(var(--bar-bottom), 1) 10.1rem,
rgba(var(--bar-shadow-bottom), 1) 11.225rem,
rgba(var(--body), 1) 10.345rem);
url(http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/sigil2.png) 6px 13px no-repeat;
background-size: 100% 8.73rem, 100% 7.1rem, 100% 8.1rem, 100% 10.07rem, 80% 7rem;
background-repeat: no-repeat;
}
}
/* Logo */
#header {
background:
background-size: 128px 128px;
}
/* TITRES */
#header h1 a {
color: transparent;
text-shadow: none;
padding: 68px 0 25px;
font-size: 130%;
font-family: var( --header-font);
}
#header h1 a::before {
content: "La Rue Macabre";
color: rgb(var(--bright-accent));
background: url(http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/wood.png);
-webkit-background-size: cover;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 150%;
font-family: var( --header-font);
letter-spacing: -.02em;
line-height: 0;
}
#header h2 span {
color: transparent;
text-shadow: none;
font-size: 150%;
font-family: var( --body-font);
}
#header h2 span::before {
content: "On se raconte nos histoires et on s'enchante";
color: rgb(var(--white-monochrome));
font-family: var( --body-font);
font-weight: 400;
line-height: 0;
font-size: .945rem;
}
@media (max-width: 767px) {
#header {
background: url(http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/sigil2.png) 2px 72px no-repeat;
background-size: 50px 50px;
}
#header h1 a {
font-size: 80%;
}
#header h2 span {
font-size: .700rem;
}
}
/* Texte blanc */
#main-content {
color: rgb(var(--white-monochrome));
}
/* LOG-IN INFO */
#login-status {
color: rgb(var(--light-gray-monochrome));
}
#login-status a {
color: rgb(var(--gray-monochrome));
}
#login-status ul a {
color: rgb(var(--black-monochrome));
background: rgb(var(--pale-gray-monochrome));
}
#login-status ul a:hover {
color: rgb(var(--black-monochrome));
}
/* SEARCH BAR */
#search-top-box-input {
background-color: rgb(var(--gray-monochrome));
color: rgb(var(--dark-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] {
border-color: rgb(var(--gray-monochrome));
color: rgb(var(--gray-monochrome));
background: rgb(var(--dark-accent));
transition: background 0.25s;
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
border-color: rgb(var(--light-gray-monochrome));
color: rgb(var(--light-gray-monochrome));
background: rgb(var(--dark-gray-monochrome));
}
/* TITLE */
#page-title {
font-size: 210%;
font-family: var( --body-font);
font-weight: 600;
}
h1, h2, h3, h4, h5, h6, #page-title {
font-family: var(--body-font);
color: rgb(var(--white-monochrome));
}
h1 {
color: rgb(var(--bright-accent));
}
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%
}
}
/* TOPBAR */
#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(--bright-accent));
color: rgb(var(--medium-accent));
font-weight: bold;
}
.topbar_arrow {
color: rgb(var(--white-monochrome));
}
/* Patch pour hover imbriqué */
#top-bar ul li ul li ul {
left: 159px;
}
/* SIDEBAR */
#side-bar .side-block {
color: rgb(var(--light-gray-monochrome));
border-color: rgb(var(--black-monochrome));
background-color: rgb(var(--black-monochrome-alt));
box-shadow: 0 2px 6px rgba(var(--dark-accent),.5);
}
#side-bar .side-block.media {
background-color: rgb(var(--dark-accent)) !important;
}
#side-bar .side-block.resources {
background-color: rgb(88, 75, 55) !important;
}
iframe.scpnet-interwiki-frame {
filter: invert(0.9) hue-rotate(222deg) saturate(1.5) contrast(1);
}
#side-bar .heading {
margin-top: 0.6em;
margin-bottom: 0.8em;
padding-left: 0em;
font-size: 1.25rem;
color: rgb(var(--bright-accent));
border-bottom: none;
font-family: var(--header-font);
text-align: center;
}
#side-bar .heading p,
#side-bar .side-block > .collapsible-block .collapsible-block-link {
letter-spacing: 0.05rem;
position: relative;
display: initial;
color: rgb(255, 219, 90);
background: url(http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/wood.png);
-webkit-background-size: cover;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#side-bar .heading p::after,
#side-bar .side-block > .collapsible-block .collapsible-block-link::after,
#side-bar .heading p::before,
#side-bar .side-block > .collapsible-block .collapsible-block-link::before {
content: " ";
position: absolute;
width: 100%;
left: -0.1rem;
top: 1.6rem;
height: 0.58rem;
background-image: url("http://fondationscp.wdfiles.com/local--files/theme%3Alaruetheme/elegantdivider.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Images color */
#side-bar .menu-item p::before,
#side-bar .collapsible-block-link::before, #side-bar .colmod-link-top a::before {
filter: hue-rotate(-104deg) brightness(8.5);
}
/* MOBILE SIDEBAR */
@media (max-width: 767px) {
#side-bar {
background-color: rgb(var(--dark-gray-monochrome))
}
.open-menu a {
border: 0.2em solid rgb(var(--dark-accent)) !important;
background-color: rgb(var(--dark-gray-monochrome)) !important;
color: rgb(var(--medium-accent)) !important;
}
}
/* BODY */
body {
background-color: rgb(var(--white-monochrome));
font-family: var( --body-font);
font-size: 82%;
}
/* FOOTER */
#footer {
background: rgb(var(--dark-accent));
}
/* OTHER ELEMENTS */
/* LINKS */
a { color: rgb(var(--medium-accent)); }
a:hover { color: rgb(var(--bright-accent)); }
a:visited { color: #a57f24; }
a:newpage { color: rgb(var(--dark-gray-monochrome)); }
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage {
color: rgb(var(--light-gray-monochrome));
}
/* POP-UP WINDOWS */
.owindow {
background-color: rgb(var(--bright-accent));
border-color: rgb(var(--dark-accent));
}
.owindow .modal-header {
background-color: rgb(var(--dark-gray-monochrome));
color: rgb(var(--bright-accent));
}
.owindow .modal-body img {
background-color: transparent !important;
}
.owindow .title {
background-color: rgb(var(--dark-accent));
color: rgb(var(--medium-accent));
}
.owindow .button-bar a {
background-color: rgb(var(--dark-gray-monochrome));
color: rgb(var(--bright-accent));
transition: background 0.25s;
}
.owindow .button-bar a:hover {
background-color: rgb(var(--dark-accent));
}
/* CODE */
.code {
background-color: rgb(var(--dark-accent));
color: rgb(157, 142, 115);
}
.yui-content .code {
background-color: rgb(var(--dark-gray-monochrome));
color: rgb(var(--light-gray-monochrome));
}
.hl-code, .yui-content .hl-code { color: rgb(var(--light-gray-monochrome)); }
.hl-brackets, .yui-content .hl-brackets { color: rgb(var(--white-monochrome)); }
.hl-var, .yui-content .hl-var { color: rgb(var(--bright-accent)); }
.hl-number, .yui-content .hl-number { color: rgb(var(--pale-gray-monochrome)); }
.hl-reserved, .hl-identifier, .yui-content .hl-reserved, .yui-content .hl-identifier { color: rgb(var(--medium-accent)); }
.hl-string, .yui-content .hl-string { color: rgb(214, 192, 152); }
.hl-special, .yui-content .hl-special { color: rgb(157, 142, 115); }
/* RATING MODULE */
.rateup, .ratedown {
background: linear-gradient(to top, rgba(var(--bright-accent), 0.25) 0, rgba(var(--medium-accent), 0.15) 100%) !important;
}
.rateup a:hover, .ratedown a:hover {
color: var(--ct_col_rate-link-hover);
}
.page-rate-widget-box .rate-points {
background-color: transparent;
color: rgb(var(--bright-accent));
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: rgb(var(--pale-gray-monochrome));
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: rgb(var(--bright-accent));
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: rgb(var(--dark-accent));
color: rgb(var(--bright-accent));
}
.page-rate-widget-box .cancel {
background: transparent;
}
.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(--bright-accent));
}
/* CREDIT MODULE */
#page-content .rate-box-with-credit-button {
font-family: var(--mono-font);
opacity: 90%;
}
.creditButton, .page-rate-widget-box {
background: linear-gradient(to top, rgba(var(--bright-accent), 0.25) 0, rgba(var(--medium-accent), 0.15) 100%) !important;
}
#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);
}
.modalbox-title h2 {
color: rgb(var(--black-monochrome));
}
.modalbox .page-rate-widget-box .rate-points,
.modalbox .page-rate-widget-box .rateup a, .modalbox .page-rate-widget-box .ratedown a,
.modalbox .page-rate-widget-box .cancel {
color: rgb(var(--black-monochrome));
}
/* PAGE ELEMENTS */
/* Quoteblocks */
blockquote, .blockquote,
.yui-content blockquote, .yui-content .blockquote {
color: rgb(var(--light-pale-gray-monochrome)) !important;
border-radius: 10px !important;
border: dashed 1px rgb(var(--black-monochrome-alt)) !important;
background: rgb(var(--dark-gray-monochrome)) !important;
}
/* Tables */
table.wiki-content-table th {
color: rgb(var(--white-monochrome));
background-color: rgba(var(--black-monochrome),.5);
}
/* Tabview */
.yui-navset .yui-content {
border-color: rgb(var(--dark-gray-monochrome));
border-top-color: rgb(var(--medium-accent));
background-color: rgb(var(--dark-accent));
font-weight: normal;
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: rgb(var(--medium-accent)); }
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-image: none;
background-color: rgb(var(--black-monochrome));
color: rgba(var(--medium-accent),.8);
font-weight: normal;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background: rgb(var(--dark-accent));
color: rgb(var(--dark-gray-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(--medium-accent));
border-color: rgb(var(--medium-accent));
color: rgb(var(--white-monochrome));
}
.yui-navset li {
line-height: normal;
}
/* Bordures onglets */
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
border: 1.2px solid rgb(var(--medium-accent));
padding: 0.15em;
}
.yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em {
border: none !important;
}
/* Image block */
.scp-image-block img {
border: 0.5rem solid rgba(var(--black-monochrome));
}
.scp-image-caption {
background-color: rgb(var(--dark-accent));
color: rgb(var(--white-monochrome));
}
/* Table of contents */
#toc { background-color: rgb(var(--dark-gray-monochrome)); }
#toc a { color: rgb(var(--bright-accent)); }
#toc .title { color: rgb(var(--bright-accent)); }
/* Footnotes */
.footnotes-footer {
padding: 1.7em;
padding-top: 1em;
margin: 3em;
background-color: rgba(var(--light-gray-monochrome),.25);
border: 0.1em solid rgb(var(--medium-accent));
}
#lock-info, #action-area input {
background-color: rgb(var(--dark-accent));
color: rgb(var(--white-monochrome));
border-color: rgb(var(--black-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;
}
/* Scrollbar */
::-webkit-scrollbar { background: rgb(var(--black-monochrome)); }
::-webkit-scrollbar-thumb { background: rgb(var(--gray-monochrome)); }
::-webkit-scrollbar-track { background: rgba(var(--black-monochrome),.1); }
@supports (-moz-appearance:meterbar) and ((display:-webkit-flex) or (display:flex)) {
#header {
-webkit-filter: initial;
filter: none
}
}