Link to article: Shattered Thoughts Theme.
@import url(https://scp-wiki.wikidot.com/theme:shattered-thoughts/code/1);
padding: 1px; margin-left: 10px;
:scp-wiki:theme:shattered-thoughts
component:image-block
[[module CSS]] @import url(https://scp-wiki.wikidot.com/theme:shattered-thoughts/code/1); [[/module]] [[include :scp-wiki:component:interwiki-style | priority=1 | theme=https://scp-wiki.wikidot.com/theme:shattered-thoughts/code/1 ]] [[iftags +theme]] [[>]] [[module Rate]] [[/>]] [[=]] > //All normal life, Peter, consciously or otherwise, resent domination. If the domination is by an inferior, or by a supposed inferior, the resentment becomes stronger.// @@ @@ @@ @@ //And so it goes, and so it goes This primal thing had been indisposed Its tomb had been sealed Its coffin now closed// //Once eternal, its end came swift And the scales towards Order did drift Yet Its day will come// //**[https://scp-wiki.wikidot.com/paradigm-shift A Paradigm Shift]**// [[/=]] @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ ---- This theme was made for the Shattered Thoughts series, beginning with [https://scp-wiki.wikidot.com/scp-3426 SCP-3426]. To import this theme to your page, put the following text anywhere inside it: [[span style="padding: 1px; margin-left: 10px;"]]{{@@[[include :scp-wiki:theme:shattered-thoughts]]@@}}[[/span]] Below are examples of different properties of this theme. @@ @@ @@ @@ @@ @@ [[include component:image-block name=https://scp-wiki.wikidot.com/local--files/scp-3426/exoplanet.jpg|caption=A spooky image with a spooky caption.]] + Header 1 ++ Header 2 +++ Header 3 ++++ Header 4 +++++ Header 5 ++++++ Header 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [https://scp-wiki.wikidot.com/scp-3426 Ut enim ad minim veniam], //quis nostrud// **exercitation ullamco** //**laboris nisi ut aliquip**// ex ea commodo consequat. Duis aute irure dolor in reprehenderit[[footnote]]Footnote[[/footnote]] in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [[collapsible show="Collapsible!" hide="~ hide collapsible ~"]] [[/collapsible]] > One Fish > >> Two Fish >> >>> Dead Fish >>> >>>> Blue Fish @@ @@ [[tabview]] [[tab Content Tab]] Once I have gone, they will return to their slumber, and madness shall end until the cycle repeats. [[/tab]] [[tab Empty Tab]] [[/tab]] [[tab Long Content Tab]] I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about I thought about [[/tab]] [[tab Stuff In Tabs Tab]] + Header in the Tabber +++ Header in the Tabber But Smaller Text — [https://scp-wiki.wikidot.com/scp-3426 Link] ---- > Quote One >> (Quote Two) [[/tab]] [[/tabview]] @@ @@ ||~ The Tables ||~ Mason || || what || do they || || mean?! || @@ @@ [[footnoteblock]] @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ @@ [[code type="css"]] @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); body { background-color: #363940; color: #ffffff; font-family: 'Open Sans', sans-serif; } #content-wrap { text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; } /* -=- HEADER -=- */ #header { background-image: none; padding-bottom: 1.875rem; } #header h1 a span, #header h2 span { display: none; } #header h1 a::before { color: #ffffff; content: "Shattered Thoughts"; font-family: 'Open Sans', sans-serif; font-size: 2.3rem; text-shadow: 0rem 0rem 0.3125rem #000000; } #header h2::before { color: #ffffff; content: "Broken Minds"; font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-style: italic; font-weight: bold; margin-left: 2.5rem; position: relative; top: 0.625rem; } /* -=- HEADER BACKGROUND -=- */ div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ashattered-thoughts/shatteredthoughtsbackground_smaller.png) top left repeat-x; background-size: 100%; } /* -=- LINKS -=- */ a, a.newpage { color: #0eadf7; } a:visited { color: #2f96ff; } /* -=- BLOCKQUOTE -=- */ div.blockquote, blockquote { background: rgba(9, 0, 135, 0.11); border: 0.125rem dotted #a0c7ff; } /* -=- OWINDOWS -=- */ .owindow, .owindow h1, .owindow .button-bar a { color: #000000; text-shadow: none; } /* This simply changed the karma bar colors in that user info pop-up menu. No functional purpose besides it looks neat, really. */ .modal-body td img[src*="userkarma.php"] { filter: hue-rotate(150deg); } .owindow ::selection { background: #cfeaff; } /* -=- RATING MODULE -=- */ .page-rate-widget-box { box-shadow: 0.0625rem 0.0625rem 0.1875rem #000000; margin-top: 0.625rem; } .page-rate-widget-box .rate-points, .page-rate-widget-box > *, .rate-box-with-credit-button { background-color: rgba(0, 0, 132, 0.4) !important; border: none !important; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { background: transparent; color: #ffffff; transition-duration: 1s; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover { background: rgba(226, 238, 255, 0.1); transition-duration: 1s; } /* For the info module on some pages. */ .modalbox { text-shadow: none; color: #000000; } /* -=- PAGE TITLE AND H1 -=- */ #page-content h1, #page-title, #action-area h1 { color: #e0ebff; } #page-title, #action-area h1 { margin: auto; text-align: center; } /* -=- SEARCH BAR -=- */ #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus { background-color: #00235e; border-color: #333333; border-radius: 0.3125rem; color: #3f87ff; opacity: 0.8; padding: 0.125rem; } #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { background-color: #002970; border: none; border-radius: 0rem; color: #ffffff; background-image: none; } /* -=- TOP BAR -=- */ #top-bar { background: linear-gradient(to right, transparent 60%, #0b1d51 85%, transparent 100%); padding-right: 3.125rem; } #top-bar ul li a { border: none; color: #4bb1ff; } #top-bar ul li:hover a, #top-bar ul li:hover ul li a { background: rgba(0, 85, 155, 0.9); border: none; color: #ffffff; } #top-bar ul li:hover a:hover { background: #00559b; color: #e6e6e6; } #top-bar ul li:hover ul li a { padding-bottom: 0.0938rem; padding-top: 0.0938rem; } #top-bar ul li ul { border: 0.0625rem solid #2477ac; } #top-bar .open-menu a { background-color: #e4e9ff; border-color: #6677a8; color: #6677a8; } /* -=- SIDEBAR -=- */ #side-bar .heading { color: #cce7ff; font-size: 130%; border-color: #000000; } #side-bar div.menu-item img { background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ashattered-thoughts/diamondblue.png"); box-sizing: border-box; padding-left: 0.8125rem; } #side-bar div.side-block, #side-bar .side-block.media, #side-bar .side-block.resources { background: #494c56; border: 0.3125rem double #1d2124; box-shadow: 0 0.125rem 0.375rem #1d2124; opacity: 0.8; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; } #side-bar a, #side-bar a:visited { color: #00c2ff; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: #cce7ff; } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px #000000; } #interwiki .side-block { background: #494c56; border: 0.3125rem double #1d2124; box-shadow: 0 0.125rem 0.375rem #1d2124; opacity: 0.8; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; } #interwiki .side-block .heading { color: #cce7ff; font-size: 130%; border-color: #000000; } #interwiki .side-block .menu-item a, #interwiki .side-block .menu-item a:visited { color: #00c2ff; } #interwiki .side-block .menu-item img { background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ashattered-thoughts/diamondblue.png"); box-sizing: border-box; padding-left: 0.8125rem; } /* -=- TABBERS -=- */ .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { background-color: rgb(69, 171, 249, 0.7); background-image: none; border: none; } .yui-navset .yui-nav a, .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background-color: #0074ff4f; background-image: none; border: none; color: #ffffff; } .yui-navset .yui-content { background: rgba(9, 0, 135, 0.11); border: 0.125rem dotted #5878b2; } .yui-navset .yui-nav { border: none; padding-bottom: 0.0625rem; } .yui-navset .yui-nav a em { border: none; } /* -=- USER INFO -=- */ #login-status, #login-status a { color: #12b4ff; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; font-weight: bold; } #account-options li a, #account-options li a:hover { color: #e4f7ff; text-shadow: none; } #account-options { border: none; } #account-options ul { background-color: #1f68d2; opacity: 0.8; } /* -=- IMAGES -=- */ .scp-image-block .scp-image-caption { background-color: #747474; } /* -=- TABLES -=- */ table.wiki-content-table td { border: 0.0625rem dotted #a0c7ff; background: rgba(9, 0, 135, 0.11); } table.wiki-content-table th { border: 0.0625rem solid #bbb; background: #747474; } /* -=- CODE MODULE -=- */ .code { text-shadow: none; } /* -=- MISCELLANEOUS -=- */ /* In the files, when the menu is expanded, .highlight's background is #EEE, which gives poor constrast with the link color. */ table.page-files .highlight { background-color: transparent; } /* Changes the top border of the tags section, which is typically colored #888, to match the theme better. */ .page-tags span { border-top: solid 0.0625rem #2477ac; } /* Changes the colors of the layout in the History tab of the page, which constrasts heavily with the background theme. */ .pager a, .pager a:hover, .optionstd a, .optionstd a:hover { color: #ffffff; background: rgba(0, 85, 155, 0.9); border: solid 0.0625rem #2477ac; } /* While the page is saving and loading, there is a popup on the screen. This popup was difficult to read due to the body's properties (color being white), so this changed the background to be more thematically appropriate and legible. */ .owait, .osuccess { background-color: #00559b; color: #ffffff; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; border: solid 0.0625rem #2477ac; opacity: 0.95; } /* Similar to above, but required an !important and different target apparently. */ .owait div.modal-body { color: #ffffff !important; } /* The text below the editing menu, specifically "Max 200 characters [...]" and "You have an exclusive 15-minute lock[...]" */ form div.sub { color: #b7b7b7; } /* Specifically the "You have an exclusive[...]" text box. Changes color and text-shadow for legibility. */ #lock-info { color: #3d3d3d; text-shadow: none; } /* The grow/shrink buttons on the bottom right of the editor. Changes to be more legible. */ .change-textarea-size a.btn { color: #000000; text-shadow: none; } /* Changes color of aforementioned buttons on hover. */ .change-textarea-size a:hover { text-decoration: none; background: #ffffff; } /* When a page is parented, its parent is listed as a "breadcrumb" for some reason. This modifies the parented page backlink near the top. Can be seen here: https://scp-wiki.wikidot.com/exploration-log-3426 */ #breadcrumbs { margin: 0.5em 0 1em; font-size: 80%; text-align: center; } /* Changes selection color. */ ::selection { background: #004777; } /* Changes seleciton color for specific menus to increase legibility of highlighted text. */ textarea::selection, input.text::selection, #lock-info::selection, span#lock-timer::selection, .code span::selection { background-color: #8ac8f9; } /* Preview message when previewing a page in the upper-right corner. */ .preview-message { background-color: #00559b; color: #ffffff; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; border: solid 0.0625rem #2477ac; opacity: 0.95; } /* Changes the color of the text at the very bottom of the page. */ #license-area { color: #ffffff; } /* -=- FOOTNOTES -=- */ .hovertip { background: #00559b !important; border: solid 0.0625rem #2477ac !important; color: #ffffff; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000; opacity: 0.94; } /* -=- MEDIA SELECTORS -=- */ @media screen and (max-width: 50rem) { #header h1 a::before { font-size: 1.7rem; } #header h1 { margin-left: 0rem; } #header h2 { margin-left: 0.75rem; } #top-bar { background: linear-gradient(to right, transparent 0%, #0b1d51 5%, #0b1d51 60%, transparent 85%); padding-right: 0rem; } #side-bar { position: fixed; z-index: 30; background-color: rgba(11, 29, 81, 0.93); } } [[/code]] [[/iftags]]