Usage
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
On any wiki:
[[include :scp-wiki:component:black-highlighter-theme-dev]]
[[include :scptestwiki:pentagram-theme]]
Examples
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
This is a tab view.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The Header font is Alegreya.
The Body font is Lato.
The Monospace font used is PT Mono.
@import url('https://fonts.googleapis.com/css?family=Alegreya'); @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap'); /* Ethics Committee Theme [2020 Wikidot Theme] Theme by Laminade. Uses code by Stormbreath and Woedenaz, credit for those portions of code goes to them. Logo licensed under CC BY-SA 3.0. */ @supports(--css:variables) { :root { /* Intro */ --theme-base: "nuscp" --theme-id: "ethics-committee-theme" --theme-name: "Ethic's Committee Theme"; --body-font: 'Lato', sans-serif; --title-font: 'Lato', sans-serif; --mono-font: 'IBM Plex Mono', monospace; /* Header */ --logo-image: url("http://scp-sandbox-3.wdfiles.com/local--files/component%3Aethics-committee-theme-viro/fas"); --header-title: "The Ethics Committee"; --header-subtitle: "FIAT JUSTITIA, ET PEREAT MUNDUS"; --header-gradient-color-bottom: 75, 155, 181; --header-gradient-color-middle: 75, 167, 181; --header-gradient-color-top: 154, 226, 237; --diagonal-stripes: unset; --gradient-header: linear-gradient(to top, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-middle)) 70%, rgb(var(--header-gradient-color-top)) 100%); /* Colors */ --pale-gray-monochrome: 204, 222, 221; /* EC's Quote Color (Light Blue)*/ --light-pale-gray-monochrome: 244, 244, 244; --white-monochrome: 252, 252, 252; --gray-monochrome: 75, 75, 75; --swatch-menubg-light-color: 244, 244, 244; --bright-accent: 17, 196, 247; /* bright blue*/ --medium-accent: 16, 178, 187; /* medium red */ --dark-accent: 16, 139, 187; /* dark red */ --newpage-color: 16, 139, 187; /* pale blue */ --dark-gray-monochrome: var(--gray-monochrome); --swatch-topmenu-bg-color: var(--gray-monochrome); --swatch-topmenu-border-color: var(--gray-monochrome); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--black-monochrome); --pale-accent: var(--dark-accent); /* Visited Link Color*/ --barColour: var(--medium-accent); /* Ayer's Info Module */ } --header-height-on-desktop: 11rem; --header-height-on-mobile: 7.5rem; --topbar-height-on-desktop: 1.875rem; --topbar-height-on-mobile: 3.5rem; hr { background: none; border-bottom: none; border-top: dashed 1px rgb(var(--dark-accent)) !important; } /* SIDE-BAR */ .page-rate-widget-box { background: linear-gradient(to top, rgba(var(--pale-gray-monochrome),1) 0%, rgba(var(--pale-gray-monochrome), 1) 100%); border-color: rgb(var(--gray-monochrome)); } #page-content .rate-box-with-credit-button { background: linear-gradient(to top, rgba(var(--pale-gray-monochrome),1) 0%, rgba(var(--pale-gray-monochrome), 1) 100%); border-color: rgb(var(--gray-monochrome)); } #page-content .rate-box-with-credit-button > .creditButton > p > a::before { background-color: rgb(var(--black-monochrome)); } #page-content .rate-box-with-credit-button > .creditButton:hover { background: rgba(var(--bright-accent), 0.8); } #page-content .modalbox { background: rgb(var(--pale-gray-monochrome)) !important; color: rgb(var(--EC-text)); border-radius: 0; box-shadow: 0 2px 6px rgba(var(--bright-accent), 0.5); } /* RECOLOR THE QUOTEBLOCK */ blockquote, .blockquote { border-color: rgb(var(--dark-accent)); background-color: rgb(var(--light-pale-gray-monochrome)); } .code { border-color: rgb(var(--dark-accent)); } #toc { border-color: rgb(var(--dark-accent)); background-color: rgb(var(--light-pale-gray-monochrome)); box-shadow: 0em 0.063em 0.125em rgba(0, 0, 0, 0.1); padding: 0 1em; } /* TRANSLATION BLOCK */ iframe.scpnet-interwiki-frame { filter: hue-rotate(140deg) brightness(150%); -webkit-filter: hue-rotate(140deg) brightness(150%); } /* RECOLOR THE TABLES */ #page-content .wiki-content-table tr th {background-color: rgb(var(--medium-accent)); color: white; border-color: rgb(var(--black-monochrome));} /* TABS */ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: rgb(var(--gray-monochrome)); box-shadow: 0 calc(0.0625rem * 5) 0 0 rgb(var(--gray-monochrome)); } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { /* tab background */ border-color: transparent! important; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background-color: rgb(var(--dark-accent)); color: rgb(var(--white-monochrome)); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { background-color: rgb(var(--EC-body)); border-color: transparent; box-shadow: 0 0 0 0.0625rem rgb(var(--medium-accent)); } /* Selected Tab */ .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgb(var(--medium-accent)); } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { background-color: rgb(var(--bright-accent)); color: rgb(var(--dark-accent)); } .yui-navset .yui-nav .selected a:hover { background-color: rgb(var(--EC-subtitle)); color: rgb(var(--white-monochrome)); } .yui-navset .yui-content { background-color: rgba(var(--EC-body),0.25); /* content background color */ } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { border-color: rgb(var(--gray-monochrome)); /* content border */ } .yui-navset-left .yui-content { border-left-color: rgb(var(--gray-monochrome)); /* different border color */ } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { --box-shadow: rgb(var(--dark-accent)); -webkit-box-shadow: 0 -webkit-calc(0.0625rem * 5) 0 0 var(--box-shadow); -moz-box-shadow: 0 -moz-calc(0.0625rem * 5) 0 0 var(--box-shadow); box-shadow: 0 calc(0.0625rem * 5) 0 0 var(--box-shadow); } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { --box-shadow: rgb(var(--dark-gray-monochrome)); -webkit-box-shadow: 0 0 0 .0625rem var(--box-shadow); -moz-box-shadow: 0 0 0 .0625rem var(--box-shadow); box-shadow: 0 0 0 .0625rem var(--box-shadow); -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); -moz-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); overflow: hidden; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgb(var(--gray-monochrome)); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { background-color: rgba(0, 0, 0, 0) !important; } .yui-navset .yui-nav *, .yui-navset .yui-nav *:hover { -webkit-transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .yui-navset .yui-nav li:hover * { color: rgb(var(--white-monochrome)); } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background-color: rgba(var(--dark-accent), 0.1); } .yui-navset .yui-nav a::before, .yui-navset .yui-nav .selected a::before { content: " "; width: 125%; height: 100%; position: absolute; top: 0; background-color: rgb(var(--dark-accent), 1); opacity: 1; z-index: 0; -webkit-clip-path: polygon(0.00% .00%, 100% 0, 90% 100%, 0 100%); clip-path: polygon(0.00% .00%, 100% 0, 90% 100%, 0 100%); -webkit-transform: translateX(-webkit-calc(-100% - 4rem)); -moz-transform: translateX(-moz-calc(-100% - 4rem)); -ms-transform: translateX(calc(-100% - 4rem)); -o-transform: translateX(calc(-100% - 4rem)); transform: translateX(calc(-100% - 4rem)); -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1), -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none } .yui-navset .yui-nav a:hover::before, .yui-navset .yui-nav a:focus::before, .yui-navset .yui-nav .selected a:hover::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } /* Topbar */ #top-bar div.top-bar > ul > li:hover, #top-bar div.mobile-top-bar > ul > li:hover { background-color: rgb(var(--gray-monochrome)); } #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { color: rgb(var(--white-monochrome)) !important; } #top-bar div.top-bar > ul > li > a::before, #top-bar div.top-bar > ul > li > a::after, #top-bar div.mobile-top-bar > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > a::after { background-color: rgb(var(--dark-accent)); } #top-bar div.top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li.sfhover > a, #top-bar div.top-bar > ul > li.sfhover > a, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li.sfhover > a, #top-bar div.mobile-top-bar > ul > li.sfhover > a { color: rgb(var(--white-monochrome)) !important; } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { background-color: rgb(var(--dark-gray-monochrome)); background-image: var(--gradient-header); -webkit-box-shadow: inherit; -moz-box-shadow: inherit; box-shadow: inherit; } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul, #top-bar div.top-bar > ul > li > ul > li, #top-bar div.mobile-top-bar > ul > li > ul > li { border-color: rgb(var(--light-gray-monochrome)); } #top-bar div.top-bar > ul > li > ul > li > a, #top-bar div.mobile-top-bar > ul > li > ul > li > a { font-weight: 600; } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before, #top-bar div.mobile-top-bar > ul > li > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.mobile-top-bar > ul > li > ul > li > a:hover::before { background-color: rgb(var(--dark-accent)); }