Este tema fue creado por YesSir13 does not match any existing user name.
Puedes cambiar el color del acento con el siguiente módulo colocado justo después de [[module CSS]]:
:root {
--accentColor: EL COLOR VA AQUÍ;
--accentColor2: EL COLOR RGB VA AQUÍ;
}
Recuerda que el color del acento variará según la Clase del OTS que estés escribiendo. La lista de colores que debes usar según la clase se encuentra aquí:
Clase | Color |
---|---|
Sera | #39873b |
Zenux | #de8014 |
Makhtum | #d41e48 |
Neutral | #5e84ad |
Falias | #f0c5e6 |
Toria | #50aba0 |
Prix | #852bd9 |
No Estándar | #e3d65d |
Por defecto, el color del acento es #b8b8b8, y es el que se quedará en caso de que decidas no utilizar ningún módulo de color.
Se puede crear una regla horizontal con 5 guiones "- - - - -" y se extiende por toda la página si no se coloca dentro de nada (por ejemplo, un bloque de cita). Las líneas que separan las secciones de este documento son reglas horizontales.
Los títulos se pueden crear poniendo entre uno y seis signos de suma "+" al comienzo de la línea.
Primer Título
Segundo Título
Tercer Título
Cuarto Título
Quinto Título
Sexto Título
Esta es una Tab
Hey, mira. Más texto aquí
Qué pintoresco.
Esta es una Tab Larga. Contiene mucho texto.1
Esta es una Tab Larga. Contiene mucho texto.
Esta es una Tab Larga. Contiene mucho texto.
Esta es una Tab Larga. Contiene mucho texto.
Esta es una Tab Larga. Contiene mucho texto.
Esta es una Tab Larga. Contiene mucho texto.
Esta es una Tab Larga. Contiene mucho texto.
Esta es una Tab Larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Esta también es una tab larga. Contiene mucho texto.
Este es un bloque de citas, creado poniendo ">" al comienzo de cada línea.
Más texto
Esa es una regla horizontal
Bloques de cita anidados
Esta es | una tabla |
---|---|
Tu yá deberías | saber cómo es que |
se hacen estas cosas extrañas pero útiles |
La fuente del encabezado es Josefin Sans.
La fuente del cuerpo es Roboto.
La fuente monoespaciada es Fira Code.
Código Fuente:
:root:lang(es) { /* Header */ --header-title: "AGIAT"; --header-subtitle: "Agencia Global de Investigación de Amenazas Taumatúrgicas"; } :root { --accentColor: #b8b8b8; --accentColor2: 184, 184, 184; --lgurl: url("http://agiat.wdfiles.com/local--files/theme%3Aagiat-fixed/logo"); --white-monochrome: #fffbf0; --pale-gray-monochrome: var(--accentColor); --light-gray-monochrome:var(--accentColor); --gray-monochrome: var(--accentColor); --black-monochrome: var(--accentColor); --bright-accent: var(--accentColor2); --medium-accent: var(--accentColor2); --dark-accent: var(--accentColor2); --pale-accent: var(--accentColor2); --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --search-icon-color: var(--accentColor2); --search-icon-hover-color: var(--accentColor2); --search-icon-hover-bg-color: var(--accentColor2); --search-textbox-text-color: 0,0,0,0; /* Focus is when the search box has been clicked on */ --search-icon-focus-color: var(--accentColor2); --search-icon-focus-bg-color: var(--accentColor2); --search-focus-outline-color: var(--accentColor2); --search-focus-textbox-bg-color: var(--accentColor2); --search-focus-textbox-text-color: var(--accentColor2); } @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap); #page-content { font-size: .9rem; } body { font-family: 'Roboto', sans-serif; color: #EDEDED; background-color: #262626; background-image: linear-gradient( to bottom, #2e2e2e, #2e2e2e 90px, #2e2e2e 90px, #262626 200px, #262626 200px, #262626 100%); background-repeat: no-repeat; } #main-content { top: -1.2rem; } #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; } /* ---- SCROLLBAR ---- */ ::-webkit-scrollbar { width: 12px; background: #transparent; } ::-webkit-scrollbar-track { background: #2e2e2e; } ::-webkit-scrollbar-thumb { background: #ededed; border: none; } ::-webkit-scrollbar-thumb:hover { background: var(--accentColor); } #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); font-family: 'Josefin Sans', sans-serif; text-shadow: none; } /* Set the new text's content from variable */ #header h1 a::before { content: var(--header-title, "AGIAT"); font-weight: 300; font-size: 1.3em; } #header h2::before { content: var(--header-subtitle, "Agencia Global de Investigación de Amenazas Taumatúrgicas"); font-weight: 600; font-size: 1em; } div#container-wrap { background-image: url(none); } div#header { background-image: url(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; } #footer, #footer a { background: transparent; color: #ededed; } #license-area { color: #ededed; } /*-- CENTERED PAGE LAYOUT --*/ @media (min-width: 1041px) and (max-width: 1360px) { #main-content { left: calc((-100vw + 1031px)/3); } } @media (min-width: 1361px) { #main-content { left: calc(-11.8% + 12px); } } @media (min-width: 1041px) { #side-bar { left: calc((-100vw + 1040px)/3 + 28px); } } * ---- SIDE BAR ---- */ #side-bar{ clear: both; padding: .8em; background: #2e2e2e; border-radius: 0; text-align: left; box-shadow: none; top: -24px; } #side-bar .heading{ color: #ededed; font-family: 'Josefin Sans', sans-serif; text-align: left; font-size: 0.94rem; border-bottom: solid 1px #ededed; } #side-bar .side-block { border: transparent; text-align: left !important; border-radius: 0; box-shadow: none; background-color: #2e2e2e; } #side-bar .side-block.media { background-color:#2e2e2e; } #side-bar .side-block.resources { background-color:#2e2e2e; } .side-block .menu-item > .image { display: none; } #top-bar div.open-menu a { position: fixed; border-radius: 0; box-shadow: none; color: var(--accentColor); background-color: #2e2e2e; border: solid 1px #2e2e2e; } .open-menu a:hover { text-decoration: none !important; } @media (min-width: 768px) { .open-menu a { display: none; } } @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #2e2e2e; 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 { text-align: left; 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: #2e2e2e; 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: #2e2e2e; 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: #2e2e2e; font-weight: bold; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active{ color: #2e2e2e; background-color: var(--accentColor); } .yui-navset .yui-content { background-color: #2e2e2e; 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: #2e2e2e; --linkColour: #ededed; } /* ---- PAGE RATING ---- */ .page-rate-widget-box { margin: unset; border-radius: 0; border: solid 2px #2e2e2e; box-shadow: 3px 0px 0px 0px var(--accentColor); background-color: #2e2e2e; margin-top: 4px; margin-bottom:4px; margin-right: 3px; } div.page-rate-widget-box .rate-points { background-color: #2e2e2e !important; border: none; color: #ededed !important; text-transform: capitalize; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #2e2e2e; 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: #2e2e2e; color: var(--accentColor); } .page-rate-widget-box .cancel { background: transparent; background-color: #2e2e2e; border: none; } .page-rate-widget-box .cancel a { color: #ededed; } .page-rate-widget-box .cancel a:hover { background: #2e2e2e; color: var(--accentColor); } .page-rate-widget-box { background: #2e2e2e!important; } .rateup a { background: #2e2e2e!important; color: white!important; } .ratedown a { background: #2e2e2e!important; color: white!important; } .cancel a { margin-top: 2px!important; font-size: 90%; color: white!important; } .cancel a:hover { color: var(--accentColor)!important; } /* ---- 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: #2e2e2e; } h1 { color: var(--accentColor); font-family: 'Josefin Sans', sans-serif; font-weight: bold; } h2, h3, h4, h5, h6 { color: #EDEDED; font-family: 'Josefin Sans', sans-serif; font-weight: bold; } #page-title { color: #ededed; font-family: 'Josefin Sans', sans-serif; font-size: 1.65rem; text-align: center; border-color: #ededed; } /* 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: #2e2e2e; border: solid 2px #262626; box-shadow: -3px 0px 0px -0.1px var(--accentColor); } .code { background-color: #F8F8F8; color: white; border: solid 3px #262626; box-shadow: none; } .scp-image-block { border: solid 8px #2e2e2e; border-bottom: solid 0px #2e2e2e; box-shadow: 0px 0.26rem 0px 0px var(--accentColor); box-sizing: border-box; } .scp-image-block .scp-image-caption { background-color: #2e2e2e; border: solid 4px #2e2e2e; color: #ededed; font-size: 0.84rem; } .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; } } #page-content .wiki-content-table tr th { border: solid 1px var(--accentColor)!important; color: var(--accentColor); background-color: #2e2e2e; padding: 28px; margin: -43px; /* set border for table title */ } #page-content .wiki-content-table tr td { border: solid 1px var(--accentColor)!important; /* set border for table content */ } table.wiki-content-table { border: solid 1px var(--accentColor)!important; } /* fancy collapsible */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: #2e2e2e; 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; } /* Selection */ ::selection { background: var(--accentColor); color: #ffffff; } /* Footnotes */ .hovertip { font-size: .9rem; background-color: #2e2e2e !important; border: solid 1px var(--accentColor) !important; } .footnotes-footer { background-color: #2e2e2e; 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; } /* Tags */ #main-content .page-tags a { margin-top: .18rem; } .page-tags span { border-top: 1px solid #ededed; } /* Pop-Up Windows */ .owindow { background-color: #262626!important; border-color: var(--accentColor); } .owindow .modal-header { background-color: #2e2e2e; } .owindow .modal-body img { background-color: #2e2e2e !important; } .owindow .title { background-color: var(--accentColor); color: white; border-bottom: 2px solid var(--accentColor); } .owindow .button-bar a { background-color: #2e2e2e; border-color: var(--accentColor); color: #ededed; } .owindow .button-bar a:hover { background-color: var(--accentColor); } /* Edit Buttons */ .buttons .btn { background-color: #2e2e2e; border-color: var(--accentColor); color: var(--accentColor); padding: 3px 5px; } .buttons .btn:hover { background-color: var(--accentColor); color: #2e2e2e; } /* Edit Lock Info*/ #lock-info { background-color: #2e2e2e; border-color: #ededed; } /* Close Button for Page Source, Rating, Etc */ a.action-area-close:hover { background-color: #2e2e2e; } /* Page-History Current */ .pager .current { background-color: var(--accentColor); border-color: #ededed; } /* ---- INTERWIKI ---- */ iframe.scpnet-interwiki-frame{ height: 12em; } .scpnet-interwiki-frame{ filter: invert(100%) grayscale(100%) contrast(75%); } /* ---- CUSTOM SYNTAX ---- */ #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-repeat: no-repeat; background-position: center 0; opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { top: 0rem; z-index: 1; } #header h1 a::before, #header h1 a::after { } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { top: 2.5rem; z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } } } .sidebox { background: url(https://cdn.discordapp.com/attachments/828528810462674955/828532434752503808/AGIATlogoTransparente.png) center no-repeat ; float: center; border-top: solid 2px var(--accentColor); padding: .14rem; margin-top: 0; margin-bottom: 8px; width: calc((100vw - 870px)/2); max-height: calc(100vh - 18rem); position: absolute; top: 0; left: 103.5%; z-index: 5; overflow: auto; box-sizing: border-box; } /* Sidebox mobile optimization, courtesy of Woed */ @media (max-width: 1290px) { .sidebox { width: auto; max-width: 65vw!important; border: none; padding-left: 0.4rem; padding-right: 0.4rem; top: 0.75rem; right: calc(((100vw - 45.8rem)/2) * -1); left: initial; -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; overflow: visible; } .sidebox::before, .sidebox::after { content: " "; position: absolute; right: 0; } .sidebox::before { top: calc(50% - 0.75rem); width: 0; height: 0; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; border-right: 0.75rem solid var(--accentColor); transition: border 0.1s ease-in-out 0.1s; z-index: 10; } .sidebox::after { top: 0; max-width: 0.75rem; width: 100%; height: 100%; box-shadow: 0.15rem 0 0 0 var(--accentColor); max-height: calc(100vh - 18rem); background-color: #; z-index: -1; transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s; } .sidebox > * { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out 0.2s; -o-transition: opacity 0.2s ease-in-out 0.2s; transition: opacity 0.2s ease-in-out 0.2s; } .sidebox:hover { overflow: visible; -webkit-clip-path: inset(-0.125rem -0.25rem 0 0); clip-path: inset(-0.125rem -0.25rem 0 0); -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; } .sidebox:hover::before { border-top: 0 solid transparent; border-bottom: 0 solid transparent; } .sidebox:hover::after { box-shadow: 0 -0.125rem 0 0 var(--accentColor); right: 0; max-width: 100%; } .sidebox:hover > * { opacity: 1; } } @media (max-width:768px) { .sidebox, .sidebox:hover { right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem); } } .license-area { background-color: var(--accentColor); } .license-area a { color: black; } #who-rated-page-area > div span:nth-of-type(2n+1):is(:hover, :focus-within), #who-rated-page-area > div span:nth-of-type(2n+1):is(:hover, :focus-within) + span[style*="color"] { border-right: 3px solid transparent; } #action-area .page-source { border: 2px solid var(--accentColor2); } /* Mobile Compatibility */ @media (max-width: 878px) { /* ---- TOP BAR ---- */ #top-bar { top: 0rem; left: 6rem; } } #account-options #account-options, a#account-topbutton{ background-color: transparent; border-style: none; color: #ccc!important; margin-top: 7px!important; margin-left: 0.7rem!important; } #account-options #account-options, a#account-topbutton:hover{ color: #aba7a7!important; } /* ===CHECKBOXES=== */ input[type=checkbox] { display: inline-block; position: relative; width: 1em; height: 1em; transition: background-color: #ededed!important; border-color: var(--accentColor)!important; color: #b8b8b8!important; border-radius: 10px; outline: 0 solid rgb(var(--swatch-primary)); cursor: pointer; appearance: none; will-change: box-shadow, border-color; } input[type=checkbox]:checked { border-color: #b8b8b8!important; background-color: transparent!important; outline: 0 solid rgb(var(--swatch-primary)); box-shadow: 0 0 0 0.125rem rgb(var(--swatch-primary)); } #search-top-box input[type=submit] { background-color: white!important; color: transparent; -webkit-mask: var(--search-icon-mask) 0.375rem 0.3125rem/-webkit-calc((var(--search-height) + 0.25rem)/2) -webkit-calc((var(--search-height) + 0.25rem)/2) no-repeat; mask: var(--search-icon-mask) 0.375rem 0.3125rem/calc((var(--search-height) + 0.25rem)/2) calc((var(--search-height) + 0.25rem)/2) no-repeat; } #search-top-box { margin-top: -10px!important; } #side-bar .heading { border-bottom-color: var(--accentColor)!important; } ::-webkit-scrollbar-thumb:hover { background: var(--accentColor)!important; } ::-webkit-scrollbar-thumb { background: #ededed!important; border: none; } blockquote, div.blockquote, #toc { background-color: #2e2e2e!important; border-left: solid 5px var(--accentColor)!important; padding-top: 5px!important; padding-bottom: 5px!important; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { font-weight: bold; } .scp-image-block .scp-image-caption { background-color: #2e2e2e!important; border: solid 4px #2e2e2e!important; color: #ededed!important; font-size: 0.84rem; } .scp-image-block { border: solid 8px #2e2e2e!important; border-bottom: solid 0px #2e2e2e!important; box-shadow: 0px 0.26rem 0px 0px var(--accentColor); box-sizing: border-box; } blockquote blockquote { background-color: #2e2e2e!important; border: solid 2px #262626!important; box-shadow: -3px 0px 0px -0.1px var(--accentColor)!important; } #page-options-bottom { margin-top: 25px!important; padding-top: 30px!important; } #edit-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #pagerate-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #tags-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #history-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #files-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #print-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #site-tools-button { font-size: 80%!important; padding: 15px!important; padding-top: 2px!important; padding-bottom: 1px!important; border:3px solid var(--accentColor)!important; } #more-options-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; border:2.5px solid var(--accentColor)!important; } #edit-sections-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #edit-append-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #edit-meta-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #watchers-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #backlinks-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #view-source-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #parent-page-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #page-block-button { font-size: 80%!important; padding: 05px!important; padding-top: 1px!important; padding-bottom: 1px!important; } #rename-move-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } #delete-button { font-size: 80%!important; padding: 15px!important; padding-top: 7px!important; padding-bottom: 7px!important; } .license-area a { color: white; } .page-files th { padding-left: 10px; } #file-comments { text-align: left!important; padding-left: 10px; } #upload-dfilename { text-align: left!important; } #edit-page-title { text-align: left; padding-left: 10px!important; margin-left: -19px!important; } #edit-page-textarea { border: 2px solid #ededed!important; } #edit-page-textarea:hover { border: 2px solid var(--accentColor)!important; } .wd-editor-toolbar-panel { color: white!important; background-color: #2E2E2E!important; } form#edit-page-form .wd-editor-toolbar-panel a, form#edit-post-form .wd-editor-toolbar-panel a, form#new-post-form .wd-editor-toolbar-panel a, form#new-thread-form .wd-editor-toolbar-panel a { background-color: #B8B8B8!important; color: white!important; } form#edit-page-form .wd-editor-toolbar-panel div>ul>li>ul a, form#edit-post-form .wd-editor-toolbar-panel div>ul>li>ul a, form#new-post-form .wd-editor-toolbar-panel div>ul>li>ul a, form#new-thread-form .wd-editor-toolbar-panel div>ul>li>ul a { background-color: #B8B8B8!important; color: white!important; } #edit-page-comments { border: 2px solid #ededed!important; color: white!important; } form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1):focus-within::before, form#edit-post-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1):focus-within::before, form#new-post-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1):focus-within::before, form#new-thread-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1):focus-within::before { color: white!important; } .page-source { border: 3px dashed var(--accentColor)!important; } #main-content { margin-left: -1rem!important; }