Este tema está fuertemente inspirado en el Tema Penumbra, de EstrellaYoshte.
Puedes cambiar el color del acento con el siguiente módulo colocado justo después de [[module CSS]]:
:root {
--accentColor: EL COLOR 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.
Included page "component:image-block-base" does not exist (create it now)
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:
/* AGIAT CSS [2021 Wikidot Theme] Created by Agente Shuffle and modified by YesSir13 Special Thanks to: - MrCruz for helping with some codes for the forum - DimitriTiwatLambda for helping with the toogle side-bar Based on: Penumbra Theme by EstrellaYoshte */ @import url("https://agiat.wdfiles.com/local--code/component%3Atheme"); @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); } /* ---- PAGE WRAP ---- */ 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; } #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: 1.22em; } #account-options { border: 1px solid var(--accentColor); } #login-status { color: #ededed; } #login-status a { color: var(--accentColor); } #login-status ul a { color: #ededed; background: #2e2e2e; } #login-status ul a:hover { color: var(--accentColor); } #account-topbutton{ border: solid 1px var(--accentColor); } #footer, #footer a { background: transparent; color: #ededed; } #license-area { color: #ededed; } #search-top-box { top: 2.2rem!important; right: 8px; } #search-top-box-form > input[type=submit] { border: solid 1px #ededed; background: #2e2e2e!important; box-shadow: none; border-radius: 0; color: #ededed; transition: color 0.15s linear; } #search-top-box-form input[type=submit]:hover { border: solid 1px var(--accentColor); box-shadow: none; color: var(--accentColor); } #search-top-box-form > input[type=text] { display: none; } /*-- 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); } } /* ---- TOP BAR ---- */ #top-bar { top: 8.8rem; } #top-bar, #top-bar a { color: #ededed; transition: color 0s; } #top-bar ul li ul { border-color: var(--accentColor); overflow: hidden; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top-color: #262626; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #2e2e2e; color: #ededed; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: #2e2e2e; /* top bar hover background color */ color: var(--accentColor); transition: color 0.1s linear; } /* ---- SIDE BAR ---- */ #side-bar{ clear: both; padding: .8em; background: #2e2e2e; border-radius: 0; box-shadow: none; top: -24px; } #side-bar .heading{ color: #ededed; font-family: 'Josefin Sans', sans-serif; font-size: 0.94rem; border-bottom: solid 1px #ededed; } #side-bar .side-block { border: transparent; border-radius: 0; box-shadow: none; background-color: #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 { 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; } /* ---- INFO PANE ---- */ #page-content .creditRate{ margin: unset; margin-top: 4px; margin-bottom: 4px; margin-right: 3px; } #page-content .rate-box-with-credit-button { background-color: #2e2e2e; border: solid 2px #2e2e2e; border-radius: 0; box-shadow: 3px 0px 0px 0px var(--accentColor); } #page-content .rate-box-with-credit-button .creditButton p a { border-left-color: transparent; } #page-content .rate-box-with-credit-button .page-rate-widget-box .cancel { border-radius: 0; } #page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points { border-left: 0; } .rate-box-with-credit-button .page-rate-widget-box .cancel a:hover { border-radius: 0; } #page-content .rate-box-with-credit-button .fa-info { color: #ededed; } #page-content .rate-box-with-credit-button .fa-info:hover { color: var(--accentColor); } #page-content .modalbox { background: #262626 !important; color: #ededed; box-shadow: none; } .close-credits, .credit-back { filter: grayscale(100%) invert(100%) contrast(275%); } /* ---- PAGE RATING ---- */ .page-rate-widget-box { margin: unset; border-radius: 0; border: solid 2px #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 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); 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); /* set border for table content */ } /* 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: #2e2e2e; border-color: var(--accentColor); } .owindow .modal-header { background-color: #2e2e2e; } .owindow .modal-body img { background-color: transparent !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 ---- */ :root { --accentColor: #b8b8b8; --lgurl: url("http://agiat.wdfiles.com/local--files/theme%3Aagiat-fixed/logo"); } } .limit { margin-bottom: -1rem; z-index: 5; } .anchor { position: sticky; height:0; top: 0; z-index: 5; } .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); } } /*-- CENTERED PAGE LAYOUT --*/ /* Forum Customizations */ .forum-thread-box .description-block { padding: .5em 1em; border-radius: 10px; box-shadow: 0 1px 5px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8), inset 0 10px 5px rgba(255,255,255,.25), inset 0 -15px 30px rgba(0,0,0,.1) } .thread-container .post .head { padding: 0.5em 1em; background-color: gray; background: linear-gradient(to right, #222222, #444444); box-shadow: inset 2px 3px 6px rgba(0,0,0,.15); border-radius: 5px 5px 5px 5px; } /* Forum */ .folded .short { background: rgba(0,0,0,0.12)!important; } .head .description { word-wrap: break-word; } .long .content p { word-wrap: break-word; } .forum-group table td { background: none!important; border: none; padding: 5px 1px; } .forum-group table td.name .title { font-weight: bold; margin-left: 5px; } .action-area { border: var(--action-area-border); background: none; } .thread-container .well { border: var(--forum-thread-border); background-color: gray; background: linear-gradient(to right, #222222, #444444); box-shadow: inset 2px 3px 6px rgba(0,0,0,.15); border-radius: 5px 5px 5px 5px; } .forum-category-box .table { border: none; } .forum-group table td.name .description { color: var(--text-color); font-size: 87%; margin-left: 5px; } .forum-category-box table td { padding: 5px 10px; border: none; background: none; } .forum-category-box table { border-collapse: collapse; } .forum-category-box table .head td { background: gray!important; font-size: 1.1em; font-weight: bold; } .collapsible-block { overflow-wrap: break-word; } /* text boxes you type in */ #thread-description, #np-text, #post-edit, .field-header .form-wiki, .field-content .form-wiki, .text.form-control, #file-comments, .form .text{ background-color: #4d4d4d!important; border: 1px solid #000!important; color: #FFFFFFF!important; } .well { padding: .5em 1em; background-color: gray; background: linear-gradient(to right, #222222, #444444); box-shadow: inset 2px 3px 6px rgba(0,0,0,.15); border-radius: 5px 5px 5px 5px; } /* Forum Stuff */ .forum-thread-box .description-block { margin-left: 0rem; margin-right: 0rem; background-color: gray; background: linear-gradient(to right, #222222, #444444); box-shadow: inset 2px 3px 6px rgba(0,0,0,.15); } .thread-container .post .head { margin-left: 0rem; margin-right: 0rem; padding: 0.5em 1em; background-color: gray; background: linear-gradient(to right, #222222, #444444); box-shadow: inset 2px 3px 6px rgba(0,0,0,.15); border-radius: 5px 5px 5px 5px; } /* Text Box Forms */ #thread-description, #np-text, #post-edit, .field-header .form-wiki, .field-content .form-wiki, .text.form-control, #file-comments, .form .text, #edit-meta-newtag-form .text, .new-page-box .text, #edit-page-textarea, #edit-page-title, #edit-page-comments, .query-area .text, #membership-by-apply-text, .yui-content .text { background: var(--text-box-form-background); border: 1px solid var(--accentColor); color: var(--text-color); } /* Buttons */ #h-perpage, .optionstd a, .new-post .btn, #history-form-1 .btn-sm, .well .btn-sm, .change-textarea-size a, .buttons .btn-small, .action-area .btn-default, .action-area .btn-primary, .col-lg-10 .form-control, .form-actions .btn-danger, .buttons .btn-default, .target a, .buttons .btn-danger, #edit-cancel-button, #edit-save-button, .button-close-message, .button-close-window, .button-cancel, .button-insert-code, #wd-ed-codewizard-type, #wd-ed-imagewizard-position, #wd-ed-imagewizard-uri, #wd-ed-imagewizard-byuri .button, #wd-ed-imagewizard-flickr, #wd-ed-imagewizard-byflickr .button, .query-area .button, .button-close, .button-rename, .button-no\,-cancel, .button-yes\,-delete, #file-upload-form .btn-primary, .button-move, #action-area .buttons .btn-primary, #edit-page-form .buttons .btn-info, #view-diff-div .button, .button-yes\,-revert, .modal-footer .btn-danger, .modal-footer .btn-default, .modal-footer .btn-primary, #mba-apply, .yui-content .button, .btn-warning, #edit-meta-newtag-form div .btn, .new-page-box .button, #page-templates, #recent-posts-category, .forum-recent-posts-box form .btn, .owindow .button-bar .btn { border: 1px solid var(--accentColor); background: #2e2e2e!important; color: white; } #h-perpage:hover, .optionstd a:hover, .new-post .btn:hover, #history-form-1 .btn-sm:hover, .well .btn-sm:hover, .change-textarea-size a:hover, .buttons .btn-small:hover, .action-area .btn-default:hover, .action-area .btn-primary:hover, .col-lg-10 .form-control:hover, .form-actions .btn-danger:hover, .buttons .btn-default:hover, .target a:hover, .buttons .btn-danger:hover, #edit-cancel-button:hover, #edit-save-button:hover, .button-close-message:hover, .button-close-window:hover, .button-cancel:hover, .button-insert-code:hover, #wd-ed-codewizard-type:hover, #wd-ed-imagewizard-position:hover, #wd-ed-imagewizard-uri:hover, #wd-ed-imagewizard-byuri .button:hover, #wd-ed-imagewizard-flickr:hover, #wd-ed-imagewizard-byflickr .button:hover, .query-area .button:hover, .button-close:hover, .button-rename:hover, .button-no\,-cancel:hover, .button-yes\,-delete:hover, #file-upload-form .btn-primary:hover, .button-move:hover, #action-area .buttons .btn-primary:hover, #edit-page-form .buttons .btn-info:hover, #view-diff-div .button:hover, .button-yes\,-revert:hover, .modal-footer .btn-danger:hover, .modal-footer .btn-default:hover, .modal-footer .btn-primary:hover, #mba-apply:hover, .yui-content .button:hover, .btn-warning:hover, #edit-meta-newtag-form div .btn:hover, .new-page-box .button:hover, #page-templates:hover, #recent-posts-category:hover, .forum-recent-posts-box form .btn:hover, .owindow .button-bar .btn:hover { border: 1px solid var(--accentColor)!important; background: #575555!important; color: white; text-decoration: none; } /* Forum Lines */ .post-container .post-container { border-left: 2px solid var(--accentColor); padding-left: .75rem; } /* text boxes you type in */ #thread-description, #np-text, #post-edit, .field-header .form-wiki, .field-content .form-wiki, .text.form-control, #file-comments, .form .text{ background-color: #2e2e2e!important; border: 1px solid var(--accentColor)!important; color: white!important; } .license-area { background-color: var(--accentColor); } .license-area a { color: black; } hr { margin-left: 0em; margin-right: 0em; } #side-bar hr { margin-left: 2em; margin-right: 2em; } /* Mobile Compatibility */ @media (max-width: 878px) { /* ---- TOP BAR ---- */ #top-bar { top: 8.8rem; left: 1rem; } } @media only screen and (min-width: 769px) @supports (display: grid) #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } @media only screen and (max-width: 56.25rem) @supports (display:grid) #header div.open-menu>p, #header div.open-menu>p>a { --wght: 700; display: flex; flex: 2 0 100%; align-items: center; justify-content: center; border: none!important; font-weight: var(--wght); letter-spacing: .016em; text-align: center; text-decoration: none; } #header div.open-menu{ display: flex; width: var(--topbar-height-on-mobile); height: var(--topbar-height-on-mobile) } #header div.open-menu>p{ display: inline-flex; align-content: stretch; align-items: stretch; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 2.5em }