PLACESTYLE CSS |
---|
Přeloženo uživatelem: |
VYTVOŘENO DNE: 08 May 2021 11:52 |
The above page info table is automatically generated by a Listpages module within the authorbox, a left-handed sidebox. This is automatically applied to all pages that include this page, unless you wrap the Placestyle include in a display: none; div. It sits on the left side so that it can seamlessly be used in tandem with traditional sideboxes. It does not display on mobile.

.
-
Info
PLACESTYLE CSS
By:Placeholder McD
Thank you to
Croquembouche,
EstrellaYoshte and
Nagiros for collectively creating most of the code that is included in this theme.
What Is This?
This is Placestyle CSS: a fork of EstrellaYoshte's Penumbra Theme created by
Placeholder McD for use in his articles. It exists so it can be easily updated and applied across a wide range of works. It's basically Penumbra, minus some stuff I didn't want, plus some stuff I like from
HarryBlank's Blankstyle CSS, plus some extra goodies!
It almost certainly will not work with other themes, most of all Black Highlighter. Do not use this unless you know what you're getting into.
How to Use
To use this theme, copy this syntax onto the top of your page:
[[include :scp-wiki:theme:placestyle]]
Note that this theme includes the following components:
- Toggle Sidebar
- Fade-In (set to speed=3)
- ACS Animation
- BetterFootnotes
When using this theme in conjunction with the info-rate module, wrap the module in a [[div]] to ensure that the information panel is not delayed by the Fade-In.
This theme borrows code from PeppersGhost's Image Block Peppo and EstrellaYoshte which centers base images and image-blocks so that they appear more aesthetically on smaller screens (read: mobile). Nigh-all of this theme's code is derived from Penumbra Theme.
Thank you to |
The above table cell is within a normal sidebox. Sideboxes can be attached to only specific sections of text by using the limit div. If you scroll through this page's code, you'll notice the sidebox does not continue past the SOURCE CODE header.
The main differences between PLACESTYLE CSS and Penumbra are:
- body font (Verdana) matches Sigma-9
- header font ('Josefin Sans', BauhausLTDemi) matches Blankstyle
- simplified scp-image-block resembles Sigma-9
- tables have internal padding (except in the sidebox) a la Blankstyle
- table header cells are colored according to accentColor
- tableb div separates cells (and image-captions!) within its tables a la Blankstyle
- transparent sidebox background a la Blankstyle
- bt span bolds and colors text (according to accentColor) a la
NatVoltaic and
stormbreath's Ad Astra Theme (it's actually slightly brighter than whatever accentColor you use, for readability)
- square toggle sidebar button
- BetterFootnotes automatically adjust according to accentColor
- ACS Component is recolored to fit dark themes a la
Nagiros' Night Rush Theme
- ACS Component does not have the "ITEM#:" text in its top-left corner, a la Blankstyle
- Fancy collapsibles with hideLocation="both" display more intuitively
- the authorbox, a left-handed sidebox which displays author info via listpages, is automatically added to any page that uses this theme (unless you wrap the include in a div style="display: none;". They do not interfere with normal sideboxes.

A broken image block.
Title 1
Title 2
Normal body text. bt span text!
A table, with very cool hcell styling | |
---|---|
Whose cells have been separated | by the tableb div! |
It's also got some stylish internal padding | |
Now, if that ain't wild, | I'm not sure what is..A BetterFootnote whose colors have been adjusted to suit the accentColor. |
Patch notes can be found in the discussion thread.
SOURCE CODE:
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ /* This should fix the open-menu button in mobile view */ #top-bar div.open-menu a { background-size: 0 !important; } #top-bar .open-menu a { position: fixed; top: 0.5em; left: 0.5em; z-index: 5; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888; background-color: #fff; border-radius: 3em; color: #888; } @media (min-width: 768px) { .mobile-top-bar, #top-bar .open-menu { display: block; } .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block!important; position: fixed; top: 0; left: -19em; width: 17em; height: 100%; overflow-y: auto; z-index: 10; padding: 0.3em 0.675em; background-color: rgba(0,0,0,0.1); transition: left 0.5s ease-in-out; } #side-bar:target { display: block; left: 0; width: 17em; margin: 0; z-index: 10; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } #top-bar .open-menu a:hover { text-decoration: none; } .close-menu { margin-left: 19em; opacity: 0; } }
/* PLACESTYLE CSS [2021 Wikidot Theme] By Placeholder McD Based on: Penumbra Theme by EstrellaYoshte Paperstack Theme by EstrellaYoshte BLANKSTYLE CSS by Placeholder McD, HarryBlank Ad Astra Theme by NatVoltaic, stormbreath Night Rush Theme by Nagiros */ @import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap); @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap'); #page-content { font-size: .81rem; } body { color: #EDEDED; background-color: #2F333C; background-image: linear-gradient( to bottom, #21252E, #21252E 90px, #21252E 90px, #2F333C 200px, #2F333C 200px, #2F333C 100%); background-repeat: no-repeat; } #main-content { top: -1.2rem; } /* ---- SCROLLBAR ---- */ ::-webkit-scrollbar { width: 12px; background: #transparent; } ::-webkit-scrollbar-track { background: #21252E; } ::-webkit-scrollbar-thumb { background: #ededed; } ::-webkit-scrollbar-thumb:hover { background: var(--accentColor); } /* ---- HEADER ---- */ div#container-wrap, div#header { background-image: none; } div#extra-div-1 { height: 164px; width: 100%; top: 0; position: absolute; background: var(--lgurl); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; z-index: -1; } #header h1, #header h2 { margin-left: 0; float: none; text-align: center; } /* Move the subtitle down a smidge */ #header h2 { margin-top: 0.45rem; } /* Hide the existing text */ #header h1 span, #header h2 span { font-size: 0; display: none; } /* Style the new text */ #header h1 a::before, #header h2::before { color: var(--accentColor); text-shadow: none; letter-spacing: 2pt; font-family: 'Josefin Sans', BauhausLTDemi, 'Nanum Gothic', Arial, sans-serif; } /* Set the new text's content from variable */ #header h1 a::before { content: var(--header-title, "SCP NADACE"); font-weight: 300; font-size: 1.4em; } #header h2::before { content: var(--header-subtitle, "ZAJISTIT - ZADRŽET- CHRÁNIT"); font-weight: 600; font-size: 1.3em; } #login-status { color: #ededed; } #login-status a { color: var(--accentColor); } #login-status ul a { color: #ededed; background: #21252E; } #login-status ul a:hover { color: var(--accentColor); } #account-topbutton{ border: solid 1px var(--accentColor); } #footer, #footer a { background: transparent; color: #ededed; } #license-area { color: #ededed; } #search-top-box { top: 2.2rem!important; right: 8px; } #search-top-box-form > input[type=submit] { border: solid 1px #ededed; background: #21252E!important; box-shadow: none; border-radius: 0; color: #ededed; transition: color 0.15s linear; } #search-top-box-form input[type=submit]:hover { border: solid 1px var(--accentColor); box-shadow: none; color: var(--accentColor); } #search-top-box-form > input[type=text] { display: none; } /* ---- TOP BAR ---- */ #top-bar { top: 8.4rem; display: flex; justify-content: center; right: 0; } #top-bar, #top-bar a { color: #ededed; transition: color 0s; } #top-bar ul li ul { border-color: var(--accentColor); overflow: hidden; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top-color: #2F333C; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #21252E; color: #ededed; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: #21252E; /* top bar hover background color */ color: var(--accentColor); transition: color 0.1s linear; } /* ---- SIDE BAR ---- */ div#side-bar{ background: #21252E; clear: both; padding: .8em; border-radius: 0; box-shadow: none; overflow-x: hidden; } #side-bar .heading{ color: #ededed; font-family: 'Josefin Sans', sans-serif; font-size: 0.94rem; border-bottom: solid 1px #ededed; } #side-bar .side-block { border: transparent; border-radius: 0; box-shadow: none; background-color: #21252E; } #side-bar .side-block.media { background-color:#21252E; } #side-bar .side-block.resources { background-color:#21252E; } .side-block .menu-item > .image { display: none; } #top-bar div.open-menu a { border-radius: 0; box-shadow: none; color: var(--accentColor); background-color: #21252E; border: 1px groove var(--accentColor); } @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #21252E; left: -18.6em; } #side-bar:target { border: none; box-shadow: none; } #side-bar .close-menu { transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s; display: block; position: fixed; width: 100%; height: 100%; top: 0; right: 0; background: rgba(0,0,0,0.3); background-position: 18.6em 50%; z-index: -1; opacity: 0; pointer-events: none; } #side-bar:target .close-menu { width: calc(100% - 18.6em); right: 0; left: auto; opacity: 1; pointer-events: auto; } #side-bar:target .close-menu:hover { background: unset; } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -5.5%; } #side-bar { top: 0; } #side-bar .heading { padding-left: 1em; margin-left: -1em; } #search-top-box { top: 107px; } } /* ---- TABS ---- */ /* ---- YUI TAB BASE ---- */ .yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit} /* ---- YUI TAB CUSTOMIZATION ----*/ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav{ display: flex; flex-wrap: wrap; width: calc(100% - .125rem); margin: 0 auto; border-color: var(--accentColor); box-shadow: none; } .yui-navset .yui-nav a, /* ---- Link Modifier ---- */ .yui-navset .yui-navset-top .yui-nav a{ color: #ededed; font-weight: bold; /* ---- Tab Background Colour | [UNSELECTED] ---- */ background-color: #21252E; border: unset; box-shadow: none; box-shadow: none; transition: background-color 0.15s linear; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ color: #ededed; /* ---- Tab Background Colour | [HOVER] ---- */ background-color: var(--accentColor); } .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */ .yui-navset .yui-navset-top .yui-nav li{ position: relative; display: flex; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; color: #ededed; background-color: #21252E; border-color: transparent; box-shadow: none; } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a{ display: flex; align-items: center; justify-content: center; width: 100%; } .yui-navset .yui-nav li em{ border: unset; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em{ padding: .35em .75em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */ .yui-navset .yui-navset-top .yui-nav .selected{ flex-grow: 2; margin: 0; padding: 0; /* ---- Tab Background Colour | [SELECTED] ---- */ background-color: var(--accentColor); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em{ border: none; } .yui-navset .yui-nav .selected a{ width: 100%; color: #21252E; font-weight: bold; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active{ color: #21252E; background-color: var(--accentColor); } .yui-navset .yui-content { background-color: #21252E; box-shadow: none; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ padding: .5em; border: none; } /*---- TAB ANIMATION by Croquembouche ---- */ .yui-navset .yui-content > div { display: block; top: 0; overflow: hidden; 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; /* The following transition affects the one that DISAPPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s; animation: tab-disappear 0.5s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; /* The following transition affects the one that APPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } @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; } } /* ---- INFO BAR ---- */ body{ --barColour: #21252E; --linkColour: #ededed; } .info-container .collapsible-block-content{ padding: 0 .5em 30px; } .info-container .collapsible-block-content .wiki-content-table{ width: 100%; } /* Ayer's info-bar patch by Monkatraz */ #page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; box-shadow: none; } #page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before { content: " "; display: none; } #page-content .info-container .collapsible-block-content::after { display: none; } /* ---- INFO PANE ---- */ #page-content .creditRate{ margin: unset; margin-top: 4px; margin-bottom: 4px; margin-right: 3px; } #page-content .rate-box-with-credit-button { background-color: #21252E; border: solid 2px #21252E; border-radius: 0; box-shadow: 3px 0px 0px 0px var(--accentColor); } #page-content .rate-box-with-credit-button .creditButton p a { border-left-color: transparent; } #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: #ededed; } #page-content .rate-box-with-credit-button .fa-info:hover { color: var(--accentColor); } #page-content .modalbox { background: #2F333C !important; color: #ededed; box-shadow: none; } .close-credits, .credit-back { filter: grayscale(100%) invert(100%) contrast(275%); } /* ---- PAGE RATING ---- */ .page-rate-widget-box { margin: unset; border-radius: 0; border: solid 2px #21252E; box-shadow: 3px 0px 0px 0px var(--accentColor); background-color: #21252E; margin-top: 4px; margin-bottom:4px; margin-right: 3px; } .page-rate-widget-box .rate-points { background-color: #21252E !important; border: none; color: #ededed !important; text-transform: capitalize; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #21252E; border-top: none; border-bottom: none; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: transparent; color: #ededed; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #21252E; color: var(--accentColor); } .page-rate-widget-box .cancel { background: transparent; background-color: #21252E; border: none; } .page-rate-widget-box .cancel a { color: #ededed; } .page-rate-widget-box .cancel a:hover { background: #21252E; color: var(--accentColor); } /* ---- PAGE ELEMENTS ---- */ .page-source, tt{ font-family: "Fira Code", monospace; font-size: 0.87rem; } .code pre, .code p, .code { font-family: "Fira Code", monospace; font-size: 0.87rem; color: #21252E; } ins, del { color: black; } h1 { font-family: 'Josefin Sans', BauhausLTDemi, 'Nanum Gothic', Arial, sans-serif; color: var(--accentColor); font-weight: bold; letter-spacing: 2pt; } h2, h3, h4, h5, h6 { font-family: 'Josefin Sans', BauhausLTDemi, 'Nanum Gothic', Arial, sans-serif; color: #EDEDED; font-weight: bold; letter-spacing: 2pt; } #page-title { display: none; } /* Clicky links */ a, a.newpage, a:visited, #side-bar a:visited { color: var(--accentColor); transition: color 0.15s linear; } a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover { color: #ffffff; text-decoration: none; background-color: var(--accentColor); } /* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */ #page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover { background: transparent; } .info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link { background: var(--linkColour) !important; } hr{ background-color: var(--accentColor); } blockquote, div.blockquote, #toc { background-color: #21252E; border: solid 2px #2F333C; box-shadow: -3px 0px 0px -0.1px var(--accentColor); } .code { background-color: #F8F8F8; border: solid 3px #2F333C; box-shadow: none; } .scp-image-block { border: 1px solid var(--accentColor); box-sizing: border-box; } .scp-image-block .scp-image-caption { background-color: #21252E; border-top: 1px solid var(--accentColor); color: #ededed; font-size: 0.65rem; padding: 0.1rem; box-sizing: border-box; } .scp-image-block.block-left { margin-left: 0; } .scp-image-block.block-right { margin-right: 0; } @media (max-width: 540px) { .scp-image-block.block-left, .scp-image-block.block-right { float: none; clear: both; margin-left: auto; margin-right: auto; } } /*---- CENTER IMAGES ON MOBILE courtesy of EstrellaYoshte and PeppersGhost ----*/ .imagediv { float: right; margin: 15px } @media (max-width: 540px) { .imagediv { float: none; text-align:center; margin: auto; } } @media only screen and (max-width: 600px) { .scp-image-block.block-right{ float: none; margin: 10px auto; } } #page-content tr th { color: #21252E; background-color: var(--accentColor); border: solid 1px var(--accentColor); padding: 6px; } #page-content tr td { border: solid 1px var(--accentColor); background-color: #21252E; padding: 12px; line-height: 1.4; } /* fancy collapsible */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: #21252E; transition: background 0.25s linear; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; width: min-content; white-space: nowrap; overflow: hidden; margin: auto; } #page-content .collapsible-block-folded .collapsible-block-link::before { content: "▷ "; } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "▽ "; } #page-content .collapsible-block-link { text-decoration: none; color: #ededed; font-weight: bold; } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover { background: var(--accentColor); } #page-content .collapsible-block-unfolded-link { box-shadow: 0px -0.26rem 0px 0px var(--accentColor); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; margin-bottom: 10px; } #page-content .collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::before { content: "△ "; } #page-content .collapsible-block-unfolded > *:nth-child(3) { box-shadow: 0px 0.26rem 0px 0px var(--accentColor); } /* Selection */ ::selection { background: var(--accentColor); color: #ffffff; } /* Footnotes */ .hovertip { font-size: .81rem; background-color: #21252E !important; border: solid 1px var(--accentColor) !important; } .footnotes-footer { background-color: #21252E; padding-left: 1.4rem; padding-right: 1.4rem; padding-bottom: 1.5rem; box-shadow: -0.24rem 0px 0px 0px var(--accentColor); } .footnotes-footer .title { color: #ededed; } .footnote .f-footer, .equation .e-footer, .reference .r-footer { display: none; } .footnotes-footer { display: none; } /* BetterFootnotes Patch */ .fncon { background-color: #21252E; border-color: var(--accentColor); } .fnnum:hover + .fncon { right: calc(-8vw - 4rem); } /* Tags */ #main-content .page-tags a { margin-top: .18rem; } .page-tags span { border-top: 1px solid #ededed; } /* Pop-Up Windows */ .owindow { background-color: #21252E; border-color: var(--accentColor); } .owindow .modal-header { background-color: #21252E; } .owindow .modal-body img { background-color: transparent !important; } .owindow .title { background-color: #21252E; color: #var(--accentColor); border-bottom: 1px solid #2F333C; } .owindow .button-bar a { background-color: #21252E; border-color: var(--accentColor); color: #ededed; } .owindow .button-bar a:hover { background-color: var(--accentColor); } /* Edit Buttons */ .buttons .btn { background-color: #21252E; border-color: var(--accentColor); color: var(--accentColor); padding: 3px 5px; } .buttons .btn:hover { background-color: var(--accentColor); color: #21252E; } /* Edit Lock Info*/ #lock-info { background-color: #21252E; border-color: #ededed; } /* Close Button for Page Source, Rating, Etc */ a.action-area-close:hover { background-color: #21252E; } /* Page-History Current */ .pager .current { background-color: var(--accentColor); border-color: #ededed; } /* ---- INTERWIKI ---- */ .scpnet-interwiki-frame{ filter: invert(100%) grayscale(100%) contrast(75%); } /* ACS COLORS by Nagiros */ :root { --five-color: 255, 34, 67 !important; /* red */ --four-color: 255, 141, 54 !important; /* orange */ --three-color: 255, 226, 82 !important; /* yellow */ --two-color: 117, 167, 242 !important; /* blue */ --one-color: 40, 159, 107 !important; /* green */ --white-bar: 207, 207, 207; --lg-bar: 118, 118, 130; --gray-bg: 66, 66, 72; } .anom-bar > .bottom-box { /* horizontal bar */ box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207) !important; -webkit-box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207) !important; -moz-box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207) !important; box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207)) !important; -webkit-box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207)) !important; -moz-box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207)) !important; } .bottom-box > .diamond-part { /* vertical bar */ box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207) !important; -webkit-box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207) !important; -moz-box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207) !important; box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207)) !important; -webkit-box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207)) !important; -moz-box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207)) !important; } .anom-bar-container.esoteric .text-part .main-class, .anom-bar-container.explained .text-part .main-class, .anom-bar-container.neutralized .text-part .main-class, .anom-bar-container.pending .text-part .main-class { background-color: rgba(66, 66, 72, .5) !important; background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important; border-left-color: rgb(118, 118, 130) !important; border-left-color: rgb(var(--lg-bar, 118, 118, 130)) !important; } .danger-diamond > .arrows, .danger-diamond > .bottom-icon::before { /* inverted arrows, esoteric icons */ filter: invert(90%) !important; -webkit-filter: invert(90%) !important; } .danger-diamond > .quadrants > .bottom-quad, .anom-bar-container.explained .danger-diamond > .quadrants > .top-quad, .anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad, .anom-bar-container.pending .danger-diamond > .quadrants > .top-quad { /* "transparent" bottoms/top icon backgrounds */ background-color: rgb(26, 26, 26) !important; /* body background color */ } .danger-diamond > .bottom-icon, .anom-bar-container.pending .danger-diamond > .top-icon::before { /* esoteric, pending icon backgrounds */ background-color: rgb(3, 3, 3) !important; } .anom-bar > .bottom-box::before { background-color: var(--white-bar); } .top-left-box > .item { display: none; } /* ---- CUSTOM SYNTAX ---- */ .darkbox { background-color: #21252E; border-left: solid 0.26rem var(--accentColor); border-right: solid 0.26rem var(--accentColor); padding: .4rem; margin-top: 12px; margin-bottom:12px; } .lightbox { background-color: #ededed; color: #21252E; border-left: solid 0.26rem var(--accentColor); border-right: solid 0.26rem var(--accentColor); padding: .4rem; margin-top: 12px; margin-bottom:12px; } .lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 { color: #21252E; } #page-content .sidebox tr td, #page-content .sidebox tr th{ padding: .35em; } #page-content .authorbox tr td, #page-content .authorbox tr th{ padding: .35em; } .limit{ margin-bottom: -1rem; } .anchor{ position: sticky; height: 0; top: 0; } .authorbox, .sidebox { 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; } .authorbox { max-width: calc((100vw - 921.2px) / 2) !important; top: .5em; right: 103.5%; } .sidebox{ top: 0; left: 103.5%; padding-left: 1em; } @media (max-width:1079px) { .authorbox, .sidebox { display: none; } } #page-content .bt { color: var(--accentColor); font-weight: bold; filter: brightness(125%); text-decoration-color: inherit; } .tableb .wiki-content-table { border-collapse: separate; border-spacing: 3px; } .tableb .scp-image-block { border: none; } .tableb .scp-image-block img { border: var(--accentColor) 1px solid; box-sizing: border-box; } .tableb .scp-image-block .scp-image-caption { margin-top: 3px; border: var(--accentColor) 1px solid; box-sizing: border-box; } :root { --accentColor: #99bbff; --lgurl: url("https://cdn.discordapp.com/attachments/606893333364604939/820794723991814154/arche2.png"); --posX: calc(50% - 358px - 13rem); --fnColor: var(--accentColor); } div#extra-div-1 { filter: opacity(0.5); } /* ---- WORDS NO LONGER BROKEN, THE CROQUEMBOUCHE HAS SPOKEN ---- */ span, a { word-break: normal !important } .avatar-hover { display: none !important; } #breadcrumbs, .pseudocrumbs { text-align: center; padding-top: 10px; } /* -- FANCY THINGS from Woedenaz's Dustjacket Theme -- */ .fancyhr hr { border-top: 2vw solid transparent; background-color: rgba(var(--bright-accent), 0); height: 0; box-sizing: border-box; border-image-source: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_hr.png'); border-image-repeat: round round; background: none; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; border: 2vw solid rgba(0,0,0,0.5); border-image: url('https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png') 600 round; border-image-width: 6; padding: 2vw; } /*Fix for Common Theme*/ /* Tohle je tady aby ty barevný boxy v sidebaru byly průhledný a netrhaly oči. */ :root { --ct_bg_sidebar-blue: rgba(25, 86, 255, .22); --ct_bg_sidebar-red: rgba(255, 43, 43, .13); --ct_bg_sidebar-green: rgba(31, 219, 31, .15); --ct_bg_sidebar-yellow: rgba(229, 210, 4, .22); } /* Díky tomuhle nezmizí ta ikonka domečku v topbaru, když nad ní přejedeš. */ #top-bar ul li a.homebutton:hover { background: url(https://grombald.github.io/Common-Theme/img/home.png) center 4px no-repeat !important; background-image: var(--ct_bg_topbar-home-hover) !important; -webkit-background-size: 13px 13px !important; -moz-background-size: 13px 13px !important; background-size: 13px 13px !important; color: transparent !important; } /* Díky tomuhle se na ikony sociálních sítí v sidebaru nevztahuje to zvýraznění pozadí, který se zobrazí, když přejedeš nad odkazem. */ #side-bar .side-block.blue a:hover { background: transparent; } /* ---- Common Theme is sometimes so broken, isn't it? ---- */ #top-bar .ct-theme-switch { position: absolute; right: 13px; }