/*
Dark Dealings Theme
[2022 Wikidot Theme]
by TheDarkArtist, based on
the Classy Victoria Theme by Fish^12
*/
/* -- IMPORTS -- */
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif+Caption&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
/* -- VARIABLES -- */
:root {
--header-title: var(--headerTitle);
--headerTitle: "ĐÊM XUỐNG";
--header-subtitle: var(--headerSubtitle);
--headerSubtitle: "Ai Rồi Cũng Sẽ Lụi Tàn Trong Màn Đêm";
--lgurl: none;
--logoURL: url('https://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/moon1.png');
--accentColor: #e01421;
--titleColor: var(--accentColor);
--subtitleColor: var(--accentColor);
--textColor: #b9b9b9;
--darkColor: #070a10;
--blackColor: #02060b;
--decorativeFont: 'Playball', serif;
--bodyFont: 'Roboto', sans-serif;
}
/* -- HEADER -- */
h1, h2, h3, h4, h5, h6, #page-title, .meta-title, #header h1 a::before, #header h2::before {
font-family: var(--decorativeFont);
text-shadow: 0px 0px 10px var(--darkColor),
-1px -1px 10px var(--darkColor),
1px 1px 10px var(--darkColor),
1px -1px 10px var(--darkColor),
-1px 1px 10px var(--darkColor),
0px 4px 10px var(--darkColor),
0px 6px 10px var(--darkColor),
0px 8px 10px var(--darkColor),
0px -4px 10px var(--darkColor),
0px -6px 10px var(--darkColor),
0px -8px 10px var(--darkColor),
4px 0px 10px var(--darkColor),
6px 0px 10px var(--darkColor),
8px 0px 10px var(--darkColor),
-4px 0px 10px var(--darkColor),
-6px 0px 10px var(--darkColor),
-8px 0px 10px var(--darkColor);
}
div#container-wrap {
background-image: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/nightfall-header-5.png");
background-repeat: repeat-x;
}
#page-title {
border-color: #a9a9a9;
}
/* -- BODY -- */
body {
color: var(--textColor);
background: #090c12;
font-family: var(--bodyFont);
font-size: 15px;
}
h1, h2, #page-title, .meta-title {color: var(--accentColor);}
h3, h4, h5, h6 {color: var(--textColor);}
#page-content a {
color: var(--textColor);
box-shadow: 0px 2px 0px 0px var(--accentColor);
padding-left: 2px;
padding-right: 2px;
}
#page-content a.newpage {
--accentColor: #1ff9eb;
}
#page-content a:hover {
text-decoration: none;
color: var(--darkColor);
padding-top: 1px;
background: var(--accentColor);
transition: background-color 0.25s ease,
box-shadow 0.25s ease;
}
/* ACS Link Fix */
#page-content .danger-diamond a {
--accentColor: transparent;
color: transparent;
}
::selection {
color: #ededed;
background-color: var(--accentColor);
text-shadow: none;
}
blockquote,
div.blockquote {
background-color: var(--blackColor);
border: solid 2px var(--blackColor);
box-shadow: -3px 0px 0px 0px var(--accentColor);
}
.code pre, .code p, .code {
background-color: var(--blackColor);
color: var(--textColor);
}
tt,
.hl-code,
.hl-identifier,
.hl-brackets,
.hl-reserved,
.hl-special,
.hl-string,
.hl-number {
font-family: 'Cutive Mono', monospace;
}
.code {border-color: var(--accentColor);}
.hl-code,
.hl-identifier,
.hl-brackets,
.hl-reserved {
color: var(--textColor);
}
.hl-special, .hl-string {color: #37c6ff;}
.hl-number {color: var(--accentColor);}
hr {
background: transparent;
border-bottom: var(--accentColor) 2px solid;
}
/* -- EXTRA CONTENT/DIVS -- */
.gradient hr {
background: linear-gradient(to right, transparent, var(--accentColor) 30%, var(--accentColor) 70%, transparent 100%);
border-bottom: none;
}
.bt {
font-family:var(--decorativeFont);
color: var(--accentColor);
}
.roman {
font-family: var(--decorativeFont);
font-size: 105%;
}
.fancybox {
box-sizing: border-box;
padding: 2vw;
border: 2vw solid rgba(0, 0, 0, 0.5);
border-image: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/fancybox.png") 600 round;
border-image-width: 6;
}
.justified {text-align: justify;}
.indented {text-indent: 2.4em;}
.nightfall {
--accentColor: #e00614;
}
.vesper {
--accentColor: #f37229;
}
.sunset {
--accentColor: #ffd879;
}
/* -- USER -- */
#account-options {
background-color: var(--textColor);}
}
/* -- BOTTOM BAR -- */
.page-options-bottom {
background: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/nightfall-footer-3.png");
background-repeat: repeat-x;
}
#page-options-container a {
font-family: var(--decorativeFont);
font-size: 13px;
}
a,
a:visited {
color: var(--accentColor);
}
#edit-button {text-transform: lowercase;}
#site-tools-button {text-transform: uppercase;}
#license-area {
color: var(--textColor);
background-color: var(--divColor);
border-top: solid 0.1rem var(--accentColor);
}
#footer-bar {
border: none;
padding: 0 0 1em;
margin: 0;
max-width: 100%;
background-color: var(--divColor);
}
#footer {
background: transparent;
color: var(--textColor);
align-items: center;
}
#footer > a {
color: var(--textColor);
}
/* -- SCROLL BAR -- */
::-webkit-scrollbar-track {
background: var(--blackColor);
border-left: var(--accentColor) 1px solid;
}
::-webkit-scrollbar-thumb {
background: var(--accentColor);
border: none;
}
/* -- SEARCH BOX -- */
#search-top-box-input {
display: none;
}
#search-top-box-form > input[type=submit] {
border: solid 1px var(--accentColor);
background: var(--darkColor)!important;
box-shadow: none;
border-radius: 0;
color: var(--textColor);
transition: color 0.15s linear;
}
/* -- WIKIDOT WINDOWS -- */
#lock-info,
.hovertip,
.owindow,
.owindow .title,
.owindow .button-bar a {
background-color: var(--darkColor) !important;
color: var(--textColor) !important;
border: 1px solid var(--accentColor) !important;
}
.owindow .modal-header {
background-color: var(--darkColor);
}
.owindow .modal-body img {
background-color: transparent !important;
}
.owindow .button-bar a:hover {
background-color: var(--textColor);
}
.owindow.owait .content {
background-image: none;
padding: 0.25rem 1.5rem 1.5rem;
}
.owindow.owait .content::after {
content: " ";
display: block;
width: 1.6rem;
height: 1.6rem;
margin: -1rem auto;
margin-top: 0.85rem;
border-radius: 50%;
border: 0.375rem solid black;
border-color: var(--accentColor) var(--darkColor) var(--darkColor);
animation: loading 0.75s linear infinite;
}
/* Absolutely forked from Penumbra, absolutely. */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* -- FOOTNOTE FIX -- */
#page-content sup.footnoteref a {
padding-top: unset;
color: var(--accentColor);
box-shadow: none;
}
#page-content sup.footnoteref a:hover {
color: var(--blackColor);
transition: color 0.25s ease;
}
/* ----------------------- */
/* ---= FORKINGS =--- */
/* ----------------------- */
/* -- SIDEBAR -- */
/* Forked from Ad Abyssum by Yossipossi */
#side-bar a,
#side-bar a:visited {color: var(--textColor);}
#side-bar a::before {
content: "‡ ";
font-family: var(--decorativeFont);
}
#side-bar a:hover {
text-decoration: none;
color: var(--darkColor);
padding: 2px;
background-color: var(--textColor);
transition: background-color 0.2s ease;
}
#side-bar .side-block.media {
background-color: var(--blackColor);
background-image: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/nightfall-sidebar-2.png");
}
#side-bar .side-block.media a::before {content: none;}
#side-bar .side-block.media a:hover {
background-color: transparent;
}
#side-bar .side-block .heading {
color: #ededed;
background-color: #373a40;
font-size: 110%;
font-family: 'PT Serif Caption', serif;
font-style: small-caps;
border-color: transparent;
}
#side-bar .side-block {
border-radius: 0px;
border-color: var(--accentColor);
box-shadow: none;
}
#side-bar .side-block.resources {
background-color: #16191f;
background-image: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/nightfall-sidebar-2.png");
background-position-y: -11.6em;
background-size: 100%;
}
#side-bar .side-block {
background-color: #16191f;
background-image: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/nightfall-sidebar-2.png");
background-size: 100%;
}
#interwiki .side-block {
background-color: #16191f;
background-image: url("http://scp-wiki.wdfiles.com/local--files/theme:dark-dealings/nightfall-sidebar-2.png");
background-position: bottom;
background-size: 100%;
}
#interwiki .side-block .menu-item a {
color: #16191f;
}
/* -- AUTHORBOX -- */
/* Forked from PLACESTYLE CSS by Placeholder McD */
.anchor{
position: sticky;
height: 0;
top: 0;
}
.inc-authorbox {display: none;}
.place-authorbox {
position: absolute;
width: calc((100vw - 870px) / 2);
max-height: calc(100vh - 18rem);
margin: 0 8px 0 0;
padding: .14rem;
box-sizing: border-box;
overflow: auto;
z-index: 5;
max-width: calc((100vw - 921.2px) / 2) !important;
top: .5em;
right: 103.5%;
}
#page-content .place-authorbox a {
color: var(--accentColor);
box-shadow: 0px 2px 0px 0px transparent;
padding: none;
}
.tableb .wiki-content-table {
border-collapse: separate;
border-spacing: 3px;
}
#page-content tr th {
color: var(--blackColor);
background-color: var(--accentColor);
border: solid 1px var(--accentColor);
padding: 6px;
}
#page-content tr td {
border: solid 1px var(--accentColor);
padding: 12px;
line-height: 1.4;
}
@media (max-width:1079px) {
.place-authorbox {
display: none;
}
}
/* -- IMAGE BLOCK -- */
/* Forked from Penumbra by EstrellaYoshte */
.scp-image-block {
border: solid 8px var(--blackColor);
border-bottom: solid 0px var(--blackColor);
box-shadow: 0px 0.26rem 0px 0px var(--accentColor);
box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
background-color: var(--blackColor);
border: solid 4px var(--blackColor);
color: var(--textColor);
font-size: 0.84rem;
}
/* -- FANCY COLLAPSIBLE -- */
/* Forked From Flopstyle: DARK by Lt Flops */
.collapsible-block-folded,
.collapsible-block-unfolded-link{
margin: 1rem auto;
padding: .53rem 1rem;
background: var(--blackColor);
transition: all .2s ease-in-out;
text-align: center;
}
.collapsible-block-unfolded-link{
border-top: thick solid var(--accentColor);
transition: all .2s ease-in-out;
}
.collapsible-block-unfolded > *:nth-child(3){
border-top: 0;
border-bottom: thick solid var(--accentColor);
}
.collapsible-block-link{
font: 1.35rem var(--decorativeFont);
letter-spacing: 1px;
}
@media (max-width: 767px){
.collapsible-block-link{
font-size: .85rem;
}
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover{
background-color: var(--accentColor);
transition: all .2s ease-in-out;
}
#page-content .collapsible-block-folded:hover .collapsible-block-link,
#page-content .collapsible-block-unfolded-link:hover .collapsible-block-link {
color: var(--blackColor);
}
#page-content .collapsible-block-link:hover{
padding: .067rem;
color: var(--blackColor);
border-bottom: thin solid var(--blackColor);
transition: all .2s ease-in-out;
}
.licensebox .collapsible-block-link{
border-bottom-color: inherit;
}
.licensebox .collapsible-block-link::before,
.licensebox .collapsible-block-unfolded-link::before,
.licensebox .collapsible-block-link::after,
.licensebox .collapsible-block-unfolded-link::after{
content: "";
}
/* -- RATING/INFO MODULE(S) -- */
/* Forked From Penumbra Theme by EstrellaYoshte */
.authorlink-wrapper {
--author-top-adjust: -0.2rem !important;
}
#page-content .authorlink-wrapper a {
box-shadow: none;
}
#page-content .authorlink-wrapper a:hover {
color: var(--accentColor);
background: transparent;
transition: color 0.2s ease;
}
.authorlink-wrapper > a:hover::before {
color: var(--accentColor);
transition: color 0.2s ease;
}
.page-rate-widget-box {
margin: unset;
border-radius: 0;
border: solid 2px var(--blackColor);
background-color: var(--blackColor);
margin-top: 4px;
margin-bottom:4px;
margin-right: 3px;
box-shadow: -3px 0px 0px 0px var(--accentColor), 3px 0px 0px 0px var(--accentColor);
}
#page-content .page-rate-widget-box a {
box-shadow: 0px 2px 0px 0px transparent;
}
div.page-rate-widget-box .rate-points {
background-color: var(--blackColor);
border: none;
color: var(--textColor);
text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--blackColor);
border-top: none;
border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: var(--textColor);
}
#page-content .page-rate-widget-box .rateup a:hover,
#page-content .page-rate-widget-box .ratedown a:hover,
#page-content .rate-box-with-credit-button .creditButton p a:hover {
background: var(--blackColor);
color: var(--accentColor);
}
.page-rate-widget-box .cancel {
background: transparent;
background-color: var(--blackColor);
border: none;
}
.page-rate-widget-box .cancel a {
color: var(--textColor);
}
#page-content .page-rate-widget-box .cancel a:hover {
background: var(--blackColor);
color: var(--accentColor);
}
#page-content .creditRate{
margin: unset;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
background-color: var(--blackColor);
border: solid 2px var(--blackColor);
border-radius: 0;
box-shadow: -3px 0px 0px 0px var(--accentColor), 3px 0px 0px 0px var(--accentColor);
}
#page-content .rate-box-with-credit-button .creditButton p a {
border-left-color: transparent;
box-shadow: none;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
border-left: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
border-radius: 0;
}
#page-content .rate-box-with-credit-button .fa-info {
color: var(--textColor);
}
#page-content .rate-box-with-credit-button .fa-info:hover {
color: var(--accentColor);
}
#page-content .creditButtonStandalone p a {
background-color: var(--blackColor);
border: solid 2px var(--blackColor);
border-radius: 0;
box-shadow: 3px 0px 0px 0px var(--accentColor);
color: var(--textColor);
}
#page-content .creditButtonStandalone p a:hover {
color: var(--accentColor);
}
#page-content .modalbox {
background: var(--darkColor) !important;
color: var(--textColor);
box-shadow: none;
border-radius: 0;
}
.close-credits,
.credit-back {
filter: grayscale(100%) invert(100%) contrast(275%);
}
/* -- TOP BAR -- */
/* Forked From Penumbra Theme by EstrellaYoshte */
#top-bar {
top: 8.4rem;
display: flex;
justify-content: center;
right: 0;
}
#top-bar .open-menu a {
background-color: var(--blackColor);
border: 0.2em solid transparent;
color: var(--accentColor);
}
@media (max-width: 768px) {
.mobile-top-bar {
display: flex;
justify-content: center;
max-width: 100%;
width: 100%;
left: 0;
}
}
#top-bar, #top-bar a {
color: #ededed;
transition: color 0s;
}
#top-bar ul li ul,
#top-bar ul li ul li ul {
border-color: var(--accentColor);
box-shadow: none;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
border-top-color: var(--darkColor);
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
background: var(--blackColor);
color: #ededed;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
background: var(--blackColor);
color: var(--accentColor);
transition: color 0.1s linear;
}