Примечание:
Эта страница содержит визуальную тему, используемую на данной вики.
Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы):
[[include theme:true-basalt]]
Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.
/* ____ _ _ */ /* | _ \ | | | */ /* | |_) | __ _ ___ __ _| | |_ */ /* | _ < / _` / __|/ _` | | __| */ /* | |_) | (_| \__ \ (_| | | |_ */ /* |____/ \__,_|___/\__,_|_|\__| */ /* */ /* ============================== */ /* */ /* [2021 Wikidot Theme] */ /* Version 2.1.0 */ /* */ /* by Liryn, Placeholder McD */ /* with thanks to EstrellaYoshte */ /* */ /* Built on Bedrock */ /* */ /*-----------------*/ /*---- IMPORTS ----*/ /*-----------------*/ @import url('https://files.scpfoundation.net/local--files/theme:basalt/normalize-min.css'); @import url('https://files.scpfoundation.net/local--files/theme:basalt/basalt-bedrock-min.css'); @import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root { /*----------------------*/ /*---- BEDROCK VARS ----*/ /*----------------------*/ --header-logo: var(--logo); --logo: url('https://files.scpfoundation.net/local--files/theme:basalt/basalt_scp_logo-for_lightmode.svg'); --header-title: var(--title); --header-subtitle: var(--subtitle); --title: "SCP Foundation"; --subtitle: "SECURE - CONTAIN - PROTECT"; --main-content-width: 60rem; --main-content-top-margin: 1.5rem; --base-font-size: .875rem; --bottom-area-padding: calc(var(--true-font-size)*2); --side-bar-width: 17rem; --basalt-page-content-font-weight: 440; --header-font-primary: var(--UI-font-primary); --UI-font-primary: 'Sofia Sans'; --basalt-overtone: 10, 10, 11; --basalt-undertone: var(--basalt-bright-element-color); --basalt-UI-dark-palette: 50, 50, 51; --basalt-bright-element-color: 150, 24, 43; --basalt-dark-element-color: 105, 17, 30; --basalt-alternate-color: 221, 119, 17; --basalt-primary-color: 252, 252, 252; --basalt-secondary-color: 240, 240, 244; --basalt-tertiary-color: 229, 229, 238; --basalt-main-text-color: 35, 35, 38; --title-border-color: var(--basalt-overtone); --license-area-divider-color: var(--basalt-overtone); --footer-divider-color: var(--basalt-overtone); --search-icon-color: var(--basalt-overtone); --hr-color: var(--general-border-color); --general-border-color: 220, 220, 220; --rate-module-cancel-color: var(--basalt-alternate-color); --scrollbar-thumb-color: var(--basalt-dark-element-color); --modal-fader-background-color: 0, 0, 0; --side-bar-heading-background-color: 0, 0, 2, 0.07; --side-bar-media-background-color: none; /* Disabled by default */ --side-bar-resources-background-color: none; /* Disabled by default */ --side-bar-button-background-hover: none; /* Disabled by default */ --side-bar-heading-text-color-hover: 255, 255, 255, 0.4; --side-bar-button-color-hover: var(--side-bar-button-color); /*---------------------*/ /*---- BASALT VARS ----*/ /*---------------------*/ --basalt-UI-background-color: var(--basalt-secondary-color); --header-background-color: var(--basalt-UI-background-color); --side-bar-background-color: var(--basalt-UI-background-color); --bottom-area-background-color: var(--basalt-UI-background-color); --edit-area-ancillary-background-color: var(--basalt-UI-background-color); --edit-area-toolbar-background-color: var(--basalt-UI-background-color); --button-background-color: var(--basalt-UI-background-color); --basalt-UI-text-color: var(--basalt-main-text-color); --header-title-color: var(--basalt-UI-text-color); --header-subtitle-color: var(--basalt-UI-text-color); --top-bar-link-color: var(--basalt-UI-text-color); --search-icon-color: var(--basalt-UI-text-color); --side-bar-heading-text-color: var(--basalt-UI-text-color); --side-bar-link-color: var(--basalt-UI-text-color); --bottom-area-text-color: var(--basalt-UI-text-color); --edit-area-ancillary-text-color: var(--basalt-UI-text-color); --edit-area-toolbar-icon-color: var(--basalt-UI-text-color); --button-text-color: var(--basalt-UI-text-color); --basalt-sub-text-color: var(--basalt-UI-text-color); --ACS-font: var(--header-font); --basalt-th-background-color: var(--basalt-UI-dark-palette); --basalt-th-text-color: var(--basalt-light-text-color); --image-caption-text-color: var(--basalt-main-text-color); --authorbox-background-color: var(--basalt-primary-color); --floatbox-background-color: var(--basalt-secondary-color); --document-background-color: 253, 253, 253; --darkdocument-background-color: 30, 30, 35; --header-drop-shadow-opacity: 0.1; --window-border-radius: 8px; /*-----------------------*/ /*---- EXTERNAL VARS ----*/ /*-----------------------*/ /* Info Bar */ --linkColour: rgb(var(--basalt-light-text-color)) !important; --barColour: rgb(var(--basalt-undertone)) !important; --fnColor: rgb(var(--basalt-bright-element-color)); /* BetterFootnotes */ --posX: 6vw; --fnLinger: 0.33s; /* ACS */ --one-color: 0, 159, 107; --two-color: 0, 135, 189; --three-color: 255, 211, 0; --four-color: 255, 109, 0; --five-color: 196, 2, 51; --six-color: 173, 77, 191; } /*------------------------*/ /*---- BASALT CLASSES ----*/ /*------------------------*/ :is(div.blockquote, blockquote) { color: rgb(var(--basalt-main-text-color)); overflow: auto; } :is(div.blockquote, blockquote):has(div.floatbox) { overflow: unset; } #page-content div.notation { max-width: 45rem; } div.notation { display: block; margin-inline: auto; margin-block: 1.4rem; padding-inline: 1.1rem; padding-block: 0.9rem; background-color: rgb(var(--basalt-secondary-color)); border-left: solid 0.25rem rgb(var(--general-border-color)); border-right: solid 0.25rem rgb(var(--general-border-color)); color: rgb(var(--basalt-main-text-color)); } #page-content div.modal { max-width: 57rem; } div.modal { display: block; margin-inline: auto; margin-block: 1.4rem; padding-inline: 1.5rem; padding-block: 0.5rem; background-color: rgb(var(--basalt-primary-color)); border: solid 0.2rem rgb(var(--general-border-color)); color: rgb(var(--basalt-main-text-color)); } #page-content div.smallmodal { max-width: 47rem; } div.smallmodal { display: block; margin-inline: auto; margin-block: 1.4rem; padding-inline: 1rem; padding-block: 0.2rem; background-color: rgb(var(--basalt-primary-color)); border: solid 0.15rem rgb(var(--general-border-color)); color: rgb(var(--basalt-main-text-color)); } #page-content div:is(.jotting, .transcript) { max-width: 42rem; } div:is(.jotting, .transcript) { display: block; margin-inline: auto; margin-block: 1.4rem; padding-inline: 1.5rem; padding-block: 0.2rem; background-color: rgb(var(--basalt-secondary-color)); border: dashed 0.15rem rgb(var(--general-border-color)); color: rgb(var(--basalt-main-text-color)); } #page-content div.papernote { max-width: 30rem; } div.papernote { display: block; margin-inline: auto; margin-block: 1.4rem; padding: 1rem 2rem; background-color: rgb(var(--basalt-tertiary-color)); color: rgb(var(--basalt-main-text-color)); } #page-content div:is(.document, .darkdocument) { max-width: 45rem; } div:is(.document, .darkdocument) { display: block; margin-inline: auto; margin-block: 1.5em; padding: 1.5rem; position: relative; --posX: -20vw; } div.document { background-color: rgb(var(--document-background-color)); box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.2); color: rgb(50, 50, 53); } div.darkdocument { background-color: rgb(var(--darkdocument-background-color)); box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 10, 0.8), 0px 6px 15px -4px rgba(0, 0, 7, 0.9); color: rgb(195, 195, 200); } div:is(.document, .darkdocument)::before, div:is(.document, .darkdocument)::after { content: ""; height: 98%; position: absolute; width: 98%; z-index: -1; } div:is(.document, .darkdocument)::before { left: -5px; top: 4px; transform: rotate(-2.5deg); } div:is(.document, .darkdocument)::after { right: -3px; top: 1px; transform: rotate(1.4deg); } div:is(.document)::before, div:is(.document)::after { background-color: rgb(var(--document-background-color)); } div:is(.darkdocument)::before, div:is(.darkdocument)::after { background-color: rgb(var(--darkdocument-background-color)); opacity: 90%; } div.document::before { box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.1); } div.document::after { box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.05); } div.darkdocument::before { box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 10, 0.8), 0px 6px 15px -4px rgba(0, 0, 7, 0.9); } div.darkdocument::after { box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 10, 0.8), 0px 6px 15px -4px rgba(0, 0, 7, 0.05); } @media only screen and (max-width: 1020px) { div:is(.document, .darkdocument)::before, div:is(.document, .darkdocument)::after { display: none; } } div[class$="_memo"] { background: var(--memo-logo) rgba(var(--memo-color), 1); background-size: contain; background-position: top center; background-repeat: no-repeat; min-height: 4rem; margin-inline: auto; margin-block: 2rem; padding-inline: 20px; padding-block: 10px; border: solid 2px rgba(0, 0, 0, 0.1); text-align: center; } div[class$="_memo"]::before { content: var(--memo-heading); font-family: var(--UI-font); font-weight: 900; font-size: 1.3em; text-align: center; margin: 0 auto 1rem auto; display: flex; flex-direction: column; padding-top: 0.5em; } div.raisa_memo { --memo-heading: "NOTICE FROM THE RECORDS AND INFORMATION SECURITY ADMINISTRATION"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/RAISA_LIGHTLOGO.png); --memo-color: 255, 243, 173; } div.classification_memo { --memo-heading: "CLASSIFICATION COMMITTEE MEMORANDUM"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/CLASSIFICATION_LIGHTLOGO.png); --memo-color: 237, 245, 243; } div.ettra_memo { --memo-heading: "NOTICE FROM THE EMERGENT THREAT TACTICAL RESPONSE AUTHORITY"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/ETTRA_LIGHTLOGO.png); --memo-color: 245, 215, 215; } div.ethics_memo { --memo-heading: "ETHICS COMMITTEE MEMORANDUM"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/ETHICS_LIGHTLOGO.png); --memo-color: 255, 219, 196; } div.temporal_memo { --memo-heading: "TEMPORAL ANOMALIES DEPARTMENT"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/DELTA_T_LIGHTLOGO.png); --memo-color: 255, 255, 255; } div.overwatch_memo { --memo-heading: "OVERWATCH COMMAND"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/O5_LIGHTLOGO.png); --memo-color: 227, 227, 227; } div.miscomm_memo { --memo-heading: "NOTICE FROM THE DEPARTMENT OF MISCOMMUNICATIONS"; --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/MISCOMM_LIGHTLOGO.png); --memo-color: 238, 237, 250; } .table1 { --basalt-th-background-color: var(--one-color); } .table2 { --basalt-th-background-color: var(--two-color); } .table3 { --basalt-th-background-color: var(--three-color); --basalt-th-text-color: var(--basalt-main-text-color); } .table4 { --basalt-th-background-color: var(--four-color); } .table5 { --basalt-th-background-color: var(--five-color); } .table6 { --basalt-th-background-color: var(--six-color); } div:is(.table1, .table2, .table3, .table4, .table5, .table6) .scp-image-block { border-bottom-color: rgba(var(--basalt-th-background-color), 0.75); } div.tableb :is(#page-content table:not(.form), table.wiki-content-table) { border-collapse: separate; border-spacing: 4px; } span:is(.bigtext, .bt) { font-family: var(--header-font); font-weight: bold; } span:is(.specialtext, .st) { font-family: var(--UI-font); font-weight: bold; } :is(.table1, .table2, .table3, .table4, .table5, .table6) span:is(.st, .specialtext) { color: rgb(var(--basalt-th-background-color)); } #page-content div.floatbox { background-color: rgb(var(--floatbox-background-color)); float: left; max-width: calc(var(--main-content-width)/2.25); box-sizing: border-box; margin: 0.25rem 1.25rem; margin-left: clamp(calc(var(--main-content-width)/-4.5), calc((87.5vw - 95%)/-2), 0rem); padding-inline: 1.2rem; padding-block: 0.5rem; font-size: 0.9125em; border-radius: 7px; border: solid 0.12rem rgba(var(--general-border-color), 0.4); } #page-content div.floatbox.right { float: right; margin-left: 1.25rem; margin-right: clamp(calc(var(--main-content-width)/-4.5), calc((87.5vw - 95%)/-2), 0rem); } @media only screen and (max-width: 640px) { #page-content div:is(.floatbox, .floatbox.right) { float: none; margin: 0.5rem auto; width: 100%; } } :is(.table-no-border, .authorbox) td { border-color: transparent !important; } /*--------------*/ /*---- MISC ----*/ /*--------------*/ html { scroll-behavior: smooth; overflow-x: hidden; } body, li, p { line-height: 1.55; } @supports (font-feature-settings: inherit) { *, *::before, *::after { font-feature-settings: "zero" var(--zero, 0); } } ::selection { text-shadow: none !important; } #page-content { font-size: calc(var(--true-font-size) * 1.13); } :where(#main-content) [id] { scroll-margin-top: calc(var(--header-final-height) + 1rem); } /* MISC --> Header alterations */ #header { background: linear-gradient(0deg, rgba(var(--header-background-color), 0.85) 0%, rgb(var(--header-background-color)) 100%); border-bottom: none; box-shadow: 0px 0px 8.5px -1px rgba(0, 0, 0, var(--header-drop-shadow-opacity)), 0px 0px 68px -21px rgba(0, 0, 0, calc(var(--header-drop-shadow-opacity) * 4)); -webkit-backdrop-filter: blur(var(--basalt-UI-blur)); backdrop-filter: blur(var(--basalt-UI-blur)); font-family: var(--header-font); } #header h1 a { padding-left: calc(var(--base-header-height)*0.25); padding-right: calc(var(--base-header-height)*0.5); } #header h1 a span::before { font-weight: 900; } #header h1 a span::after { margin-bottom: 6px; font-weight: 600; } #header h1 a span { align-items: unset; text-align: unset; } #top-bar div[class*="top-bar"] ul li ul li a { box-shadow: none; } #login-status span.printuser>a img { filter: drop-shadow(0rem 0.2rem 0.35rem rgba(0, 0, 0, 0.19)); } div#account-options>ul>li>a { transition: color 0.4s; } /* MISC --> Side bar alterations */ #side-bar:is(:hover, :focus-within)::before { height: calc(var(--base-header-height) + var(--header-border-width)); } :is(#side-bar, #interwiki) .heading { background-color: rgb(var(--side-bar-heading-background-color)); font-weight: 900; color: rgba(var(--side-bar-heading-text-color), 0.8); } #side-bar:is(:hover, :focus-within)::after { opacity: 40%; } #side-bar::after { transition: background-color var(--side-bar-transition), opacity var(--side-bar-transition); } /* MISC --> Various UI alterations */ form#edit-page-form table.form td:nth-of-type(1) { display: none; } #edit-page-title { background-color: rgba(var(--edit-area-ancillary-background-color)) !important; border: solid var(--edit-area-border-width) rgb(var(--edit-area-border-color), 0.5) !important; border-top-right-radius: var(--window-border-radius); border-top-left-radius: var(--window-border-radius); font-weight: 900; text-align: center; } #edit-page-textarea { font-family: var(--mono-font); font-size: 110%; height: 47vh; } .wd-editor-toolbar-panel ul li a::after, #edit-page-form .wd-editor-toolbar-panel a:is(:hover, :focus)::after, #edit-page-form .wd-editor-toolbar-panel div>ul>li.sfhover>a:not(:hover, :focus)::after, #edit-page-form .wd-editor-toolbar-panel div>ul>li:focus-within>a:not(:hover, :focus)::after { background-color: rgb(var(--edit-area-toolbar-icon-color)); } #edit-page-form .wd-editor-toolbar-panel a::after { -webkit-mask-size: 70%; mask-size: 70%; } #wd-editor-toolbar-panel>div { grid-gap: calc(var(--edit-area-toolbar-icon-size)/1.6); } #edit-page-form>.buttons.alignleft>input[type="button"] { font-size: var(--true-font-size); padding: 1ch; } #edit-page-title, #lock-info, #edit-page-comments { color: rgb(var(--edit-area-ancillary-text-color)); } #lock-info { border: solid 0.12rem rgba(var(--general-border-color), 0.4); } #action-area div.buttons> :is([name="save"], [name="save-continue"], [onclick*="PageTagsModule.listeners.save(event)"]) { --button-text-color: var(--basalt-positive-color); font-weight: bold; } #footer { color: rgb(var(--bottom-area-text-color)); border-top: solid 2px rgb(var(--basalt-tertiary-color)); } #footer-bar { display: none; } #license-area::before, #license-area::after { margin-bottom: 10px; } div[id*="page-options-bottom"]>a { font-family: var(--UI-font); color: rgb(var(--basalt-main-text-color)); } #more-options-button { background-color: rgb(var(--basalt-tertiary-color)); color: inherit; } form#edit-page-form>table.form { position: relative; } form#edit-page-form>table.form::before { content: "Title"; display: block; position: absolute; bottom: 30%; width: calc(100% - 15px); padding-left: 15px; pointer-events: none; opacity: 50%; font-family: var(--UI-font); font-weight: 900 !important; font-size: 11px; color: rgb(var(--edit-area-ancillary-text-color)); } #edit-page-textarea:focus-visible { border-color: rgb(var(--basalt-dark-element-color)); } #action-area>h1 { font-weight: 900; } #action-area>p { font-size: 0.9em; text-align: center; } #footer .options { border-right: solid var(--footer-divider-thickness) rgba(var(--footer-divider-color), 0.1); } #license-area::before { background: rgba(var(--license-area-divider-color), 0.1); } .autocomplete-list li.yui-ac-highlight { background-color: rgb(var(--basalt-secondary-color)); } #revision-list .page-history tr[id*="revision-row"] td:nth-child(1)::before { background-color: rgb(var(--basalt-undertone)); } #revision-list .page-history tr[id*="revision-row"]::before { background: rgb(var(--basalt-undertone)); } .owindow { border-radius: var(--window-border-radius); font-family: var(--UI-font); } .owindow .button-bar>a[onclick*="cleanAll"] { border-top-right-radius: var(--window-border-radius); } .owindow .title { font-family: var(--UI-font); background-color: transparent; height: 2rem; justify-content: center; opacity: 60%; color: rgb(var(--basalt-main-text-color)); } .owindow div[style*="margin-top"] { margin-bottom: 12px; margin-top: 20px !important; } .owindow> :not(.button-bar, .title)>img { height: 5em; border-radius: var(--window-border-radius); } .owindow .button-bar>a[onclick*="cleanAll"]::after { background: rgb(var(--basalt-main-text-color)); transition-property: background; transition-duration: 0.3s; } .owindow .button-bar>a[onclick*="cleanAll"]:hover::after { background: rgb(var(--basalt-light-text-color)); } .owindow>.content.modal-body>img+h1+table>tbody>tr>td { text-align: inherit; } #odialog-container[style*="block"] { background-color: rgb(var(--modal-fader-background-color), 0.65); } #search-top-box::before { background-color: rgb(var(--basalt-UI-dark-palette)); } #search-top-box-input { outline: solid 0 rgb(var(--basalt-UI-dark-palette)); } #main-content .page-tags span::before { content: "TAGS"; font-weight: 800; opacity: 80%; margin-inline: 10px; align-self: center; font-size: 10px; } #main-content>.page-tags>span { grid-gap: 0.6rem; font-family: var(--UI-font); font-size: calc(var(--true-font-size)*0.85); } #history-subarea, #action-area { font-family: var(--UI-font); } #action-area>h1 { margin: 0.425rem 0 1rem; } .preview-message { border: 0.15rem dashed rgb(var(--general-border-color)); background-color: rgba(var(--basalt-secondary-color)); } .diff-box table.page-compare th { font-family: unset; } input[type="checkbox"], [type="radio"] { cursor: pointer; } .warning-top-box { background-color: rgb(var(--basalt-primary-color)); border: 0.2rem solid rgb(var(--general-border-color)); border-radius: 0.5rem; padding: 0.7rem 1.5rem; } .warning-top-box h1 { color: rgb(var(--basalt-main-text-color)); } /* MISC --> Content alterations */ #page-content { padding-block: 2em; font-weight: var(--basalt-page-content-font-weight); } #page-title, .meta-title { border-bottom: solid 0.15rem rgba(var(--title-border-color), 0.1); font-weight: 800; color: rgba(var(--basalt-main-text-color), 0.75); letter-spacing: -0.05rem; } #page-title { display: block !important; } #breadcrumbs, .pseudocrumbs { font-size: 1em; margin: 0.7em 0 0 0; } h1, h2 { font-weight: 800; } h3, h4, h5, h6 { font-weight: 700; } .footer-wikiwalk-nav { margin-top: 3em; font-family: var(--UI-font); font-size: 0.9em; font-weight: 800; word-spacing: 0.3em; } .licensebox { margin-bottom: 1rem; font-size: 0.9em; text-align: center; } .licensebox :is(blockquote, .blockquote) { text-align: left; } hr { height: 2px; margin-block: 1rem; margin-inline: 1rem; overflow: auto; } .bibitems .title, .footnotes-footer .title { text-transform: none; } .bibitems, .footnotes-footer { margin: 4rem 0; } .anom-bar-esoteric .text-part > .main-class > .second-class > .class-category { font-size: 0.75em !important; } :is(.anom-bar-container, .anom-bar-esoteric) + :not(.acs-extra), .acs-extra + * { margin-top: 1.2rem !important; } .anom-bar-container, .anom-bar-container *, .acs-extra { font-family: var(--ACS-font), var(--body-font) !important; font-weight: 800; } .anom-bar-container.ekhi .danger-diamond>.quadrants>.left-quad, .anom-bar-container.danger .danger-diamond>.quadrants>.right-quad { background-color: rgba(255, 109, 0, 0.25); background-color: rgb(var(--four-color), 0.25) !important; } div:is(.class1, .item1)>div { font-family: var(--ACS-font), var(--header-font); font-weight: 900; } div.class1>div { font-size: 2em; } div.item1>div { font-size: 1.7em; text-transform: uppercase; } #delete-button:is(:hover, :focus) { background-color: rgb(var(--basalt-negative-color)); } .yui-ac-content { background: rgb(var(--basalt-primary-color)); border: 1px solid rgb(var(--basalt-tertiary-color)); } /* BetterFootnotes adjusted to make better use of space on wider screens, at the cost of slide-in animation */ /* Plus some cosmetic adjustments */ .fncon { background-color: rgb(var(--basalt-primary-color)); border: solid 2px rgb(var(--basalt-tertiary-color)); border-left: none; box-shadow: -8px 0px var(--fnColor); line-height: inherit; font-size: 0.9em; font-weight: var(--basalt-page-content-font-weight); right: var(--posX); transition: opacity 0.15s linear var(--fnLinger), visibility 0.01s linear var(--fnInteract); } .fnnum:hover+.fncon, .fncon:hover { transition: opacity 0.15s linear; } .fncon::before { color: rgba(255, 255, 255, 0.8); top: -2px; left: initial; right: 100%; transform: none; font-size: 1.125rem; text-align: right; font-family: var(--mono-font); } @media only screen and (max-width: 1279px) { .fncon { left: 10%; } } .collection .collapsible-block { background-color: rgb(var(--basalt-background-color)); border: none; } .collection :is(.collapsible-block-unfolded-link, .collapsible-block-folded) a { border: none; } sub, sup { line-height: inherit; } .scp-image-block.block-left, .scp-image-block.block-right { clear: both; } .scp-image-block .scp-image-caption { font-weight: 600; color: rgb(var(--image-caption-text-color)); } /* .scp-image-block>a { pointer-events: none; } */ .authorbox { background-color: rgb(var(--authorbox-background-color)) !important; color: rgb(var(--basalt-main-text-color)) !important; filter: drop-shadow(0rem 0.4rem 0.7rem rgba(0,0,0,0.2)) !important; } .authorbox::before { border-color: transparent transparent rgb(var(--authorbox-background-color)) transparent !important; } .authorlink-wrapper { --author-top-adjust: 0rem; --author-bottom-adjust: 1.5rem; } .authorlink-wrapper>a { margin-left: 0.4em; font-weight: bold !important; font-size: 80%; } .authorlink-wrapper>a::after { width: 0.7rem !important; height: 0.7rem !important; margin-left: 0.4em !important; } :is(#page-content table:not(.form), table.wiki-content-table) { table-layout: fixed; } @supports (-webkit-touch-callout: none) /* Targets iOS only */ { :is(#page-content table:not(.form), table.wiki-content-table) { max-width: none; width: auto; min-width: 100%; } } :is(#page-content table:not(.form), table.wiki-content-table) th { font-family: var(--body-font); padding: 0.45em 0.7em; background-color: rgb(var(--basalt-th-background-color)); border-color: rgb(var(--basalt-th-background-color)); color: rgb(var(--basalt-th-text-color)); letter-spacing: 0.033rem; text-align: center; } #page-content .quadrants > div { top: 2.25%; left: 18.5%; } .printuser a { font-weight: 600; } div.page-rate-widget-box span.btn>a::before, div.rate-box-with-credit-button .creditButton>p>a::before, div.rate-box-with-credit-button .creditButton>p>a::after, div.creditButtonStandalone>p>a::before, div.creditButtonStandalone>p> a::after { background-color: rgb(var(--rate-module-text-color)); } /*-------------------------------------------------*/ /*----- END OF DEFAULT STYLING ("LIGHT MODE") -----*/ /*-------------------------------------------------*/
:root { /*----------------------*/ /*---- BEDROCK VARS ----*/ /*---- (DARK MODE) -----*/ /*----------------------*/ --logo: url(https://files.scpfoundation.net/local--files/theme:basalt/basalt_scp_logo-for_darkmode.svg); --basalt-overtone: 180, 180, 181; --basalt-UI-dark-palette: 55, 55, 56; --basalt-bright-element-color: 234, 46, 52; --basalt-dark-element-color: 226, 60, 63; --basalt-primary-color: 13, 13, 15; --basalt-secondary-color: 26, 26, 28; --basalt-tertiary-color: 44, 44, 45; --basalt-main-text-color: 195, 195, 195; --general-border-color: 55, 55, 55; --modal-fader-background-color: var(--basalt-secondary-color); --button-hover-text-color: var(--basalt-main-text-color); --top-bar-link-color-hover: var(--basalt-main-text-color); --top-bar-link-background-hover: var(--basalt-dark-element-color); --login-status-link-background-hover: var(--basalt-undertone); --login-status-text-color: var(--basalt-main-text-color); --selection-background-color: var(--basalt-undertone); --selection-text-color: var(--basalt-main-text-color); --rate-module-info-icon-color: var(--basalt-main-text-color); --tab-focus-text-color: var(--basalt-main-text-color); --side-bar-heading-background-color: 253, 253, 253, 0.07; --side-bar-heading-text-color: var(--basalt-main-text-color); --side-bar-link-color-hover: var(--basalt-main-text-color); --basalt-negative-color: 209, 38, 38; --basalt-focus-color: var(--basalt-tertiary-color); --linkColour: rgb(var(--basalt-main-text-color)) !important; --swatch-menubg-black-color: 59, 60, 63; --swatch-menutxt-dark-color: 100, 100, 100; /*-----------------------------*/ /*---- THEME-SPECIFIC VARS ----*/ /*---- (DARK MODE) ------------*/ /*-----------------------------*/ --basalt-th-text-color: var(--basalt-main-text-color); --authorbox-background-color: var(--basalt-secondary-color); --header-drop-shadow-opacity: 0.32; } :is(#u-credit-view, div#u-credit-otherwise) .modalbox { --basalt-light-text-color: var(--basalt-main-text-color); } .owindow .button-bar>a[onclick*="cleanAll"]::after, .owindow .button-bar>a[onclick*="cleanAll"]:hover::after { background: rgb(var(--basalt-main-text-color)); } div[id*="page-options-bottom"]>a:is(:hover, :focus) { color: rgb(var(--basalt-main-text-color)); } #more-options-button:is(:hover, :focus) { color: rgb(var(--basalt-main-text-color)); background-color: rgb(var(--general-border-color)); } form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(1)>div:nth-of-type(1):focus-within { color: rgb(var(--basalt-main-text-color)); } :is(#file-upload-form table.form, form[onsubmit*="setParent"] > table.form, #rename-option-rename table.form)>tbody>tr>td:nth-child(1) { color: rgb(var(--basalt-main-text-color)) !important; } .bibitems .title, .footnotes-footer .title { color: rgb(var(--basalt-main-text-color)); } .yui-navset.yui-navset-top>ul.yui-nav>li:not(li.selected)>a:hover { color: rgb(var(--basalt-light-text-color)); } .hovertip .content .footnote .f-heading, .hovertip .content .reference .r-heading { color: rgb(var(--basalt-main-text-color)); } .hovertip { border: solid 0.125rem rgb(var(--basalt-UI-dark-palette)) !important; } #main-content :is(.pager .pager-no, .pager>span.current) { color: rgb(var(--main-text-color)); } #revision-list .page-history tr[id*="revision-row"] td:nth-child(3)>span::before { background: rgb(var(--basalt-undertone)); } #history-form-1>table.form>tbody>tr:first-child>td:first-child { color: rgb(var(--basalt-main-text-color)); } .diff-box table.page-compare th { color: rgb(var(--basalt-main-text-color)); } #main-content .pager span>a:is(:hover, :focus) { color: rgb(var(--basalt-main-text-color)); } [type="checkbox"]:checked { border-color: rgb(var(--basalt-undertone)); background-color: rgb(var(--basalt-undertone)); } input[type="checkbox"], [type="radio"] { border: solid 0.25em rgba(255, 255, 255, 0.35); } [type="radio"]:checked { border: solid 0.425em rgb(var(--basalt-dark-element-color)); } #page-options-container .page-watch-options { color: rgba(var(--basalt-main-text-color, 0.2)); } /*---------------------*/ /*---- BASALT DIVS ----*/ /*---- (DARK MODE) ----*/ /*---------------------*/ div[class$="_memo"] { background-color: rgba(var(--basalt-secondary-color), 1); border: solid 2px rgba(var(--memo-color), 1); } div[class$="_memo"]::before { color: rgb(var(--memo-color)); } div.raisa_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/RAISA_DARKLOGO.png); } div.classification_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/CLASSIFICATION_DARKLOGO.png); } div.ettra_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/ETTRA_DARKLOGO.png); } div.ethics_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/ETHICS_DARKLOGO.png); } div.temporal_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/DELTA_T_DARKLOGO.png); --memo-color: 195, 195, 200; } div.overwatch_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/O5_DARKLOGO.png); } div.miscomm_memo { --memo-logo: url(https://files.scpfoundation.net/local--files/theme:basalt/MISCOMM_DARKLOGO.png); } :is(.table1, .table2, .table3, .table4, .table5, .table6) { --basalt-th-text-color: var(--basalt-light-text-color); } :is(div.table1, div.table2, div.table3, div.table4, div.table5, div.table6) span:is(.specialtext, .st) { filter: brightness(1.2); } :is(.table1, .table2, .table3, .table4, .table5, .table6) h1 { color: rgb(var(--basalt-th-background-color)); } /*--------------*/ /*---- MISC ----*/ /*--------------*/ .fncon::before { color: rgba(0, 0, 0, 0.75); } /*--------------------------------------*/ /*----- END OF "DARK MODE" STYLING -----*/ /*--------------------------------------*/
#page-title { display: none !important; }
#page-title, .meta-title, #breadcrumbs, .pseudocrumbs { text-align: center; } .pseudocrumbs { justify-content: center; }
.top-left-box>.item { display: none; }
:root { --main-content-width: 70rem; --posX: 4vw; } #page-content div.modal { max-width: 100%; }
On any page:[[include :scp-wiki:theme:basalt]]
Info
Basalt is an aesthetic theme for the SCP Wiki by Пользователь 'Liryn' не существует and Пользователь 'Placeholder McD' не существует functioning as an extension of Bedrock, a base theme created specifically for this project. Visit Bedrock's wiki page or its home on GitHub for more info, including all of the CSS variables it offers.Theme settings
Add theme settings to your [[include]] module to modify aspects of Basalt.[[include :scp-wiki:theme:basalt themesetting]]
[[include :scp-wiki:theme:basalt themesetting|another-themesetting]]
All theme settings as of the current version:darkmode=a
Applies dark modewide=a
Widens pagehidetitle=a
Removes page titlecentertitle=a
Centers page titleacs-itemnum=a
Restores ACS "ITEM#:" textdisable-acs-anim=a
Disables ACS Animation component
Page elements
[[span class="st"]] [[span class="specialtext"]][[span class="bt"]] [[span class="bigtext"]][[div class="blockquote"]]
[[div class="notation"]]
[[div class="jotting"]]
[[div class="modal"]]
[[div class="smallmodal"]]
[[div class="papernote"]]
[[div class="floatbox"]]
This is a floatbox. You can put all kinds of content inside them (except BetterFootnotes, for now). They'll float at one side of the page relative to what's around them.
[[div class="floatbox right"]]
[[div class="document"]]
[[div class="darkdocument"]]
[[div class="raisa_memo"]]
First Title
Second Title
Third Title
Fourth Title
Fifth Title
Sixth Title
- Tabulator
- Tabulation
- Long Tab
- This tab has a really long name for some odd reason. I wonder why? It is very strange.
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
- Empty Tab
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 tab with footnote2
I miss when we could trust each other.
This is a | table |
---|---|
You should know | how to make these |
already | |
But do you? |
Coloring
Some elements can be colored withtableX
classes.This system is designed to connect with the Anomaly Classification System; each color signifies a different security clearance level. .table1 |
---|
Text here |
Text here |
Text here |
.table2 |
---|
Text here |
Text here |
Text here |
.table3 |
---|
Text here |
Text here |
Text here |
.table4 |
---|
Text here |
Text here |
Text here |
.table5 |
---|
Text here |
Text here |
Text here |
.table6 |
---|
Text here |
Text here |
Text here |
Included with Basalt
- BetterFootnotes by Пользователь 'EstrellaYoshte' не существует
- ACS Animation by Пользователь 'EstrellaYoshte' не существует
Header and UI font is Sofia Sans.
Body font is Inter.Monospace font is JetBrains Mono.