Este tema fue creado originalmente por Agente Shuffle y modificado posteriormente por YesSir13 y BinaryCube, y está inspirado en el Tema Penumbra, de EstrellaYoshte.
Puedes cambiar el color del acento y el texto del área de licencia (El texto que te dice que todo está bajo Creative Commons) con el siguiente módulo colocado justo después de [[module CSS]]:
:root {
--accentColor: EL COLOR VA AQUÍ;
--licenseColor: EL COLOR VA AQUÍ;
}
Recuerda que normalmente el color del acento variará según la Clase del OTS que estés escribiendo, aunque puedes utilizarlo en tus relatos para dar un toque estético adicional que pueda poner una atmósfera distinta al leerlo. La lista de colores que debes usar según la clase se encuentra aquí:
Clase | Color |
---|---|
Sera | #39873b |
Zenux | #de8014 |
Makhtum | #d41e48 |
Neutral | #acb7c4 |
Falias | #333aee |
Toria | #9516fe |
Prix | #CD1BC8 |
Kharma | #00aa99 |
No Estándar | #e3d65d |
Por lo general, el acento de la licencia no necesitará ser modificado, salvo que por algún motivo sea estrictamente necesario cambiarlo.
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. El color del texto de la licencia es #1a1a1a.
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 Play.
La fuente del cuerpo es Source Sans Pro.
La fuente monoespaciada es Fira Code.
Código Fuente:
/* AGIAT CSS [2021 Wikidot Theme] Created by Agente Shuffle and modified by YesSir13 and BinaryCube. 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); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Play&display=swap'); @import url('https://fonts.gstatic.com/s/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2'); @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); #page-content { font-size: .9rem; } body { font-family: 'Source Sans Pro', sans-serif; color: #EDEDED; background-color: var(--accentColor); background-image: linear-gradient(to bottom, #141414, #141414 90px, #141414 90px, #262626 200px, #262626 100%); background-repeat: no-repeat; } #main-content { top: -1.2rem; margin-right: 50px; } #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-color: transparent; } ::-webkit-scrollbar-track { background: rgb(23, 23, 23); } ::-webkit-scrollbar-thumb { background: #ededed; border: solid 3px rgb(23, 23, 23); border-radius: 6px; } ::-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: 'Play', sans-serif; text-shadow: none; } /* Set the new text's content from variable */ #header h1 a::before { content: var(--header-title, "AGIAT"); font-weight:bold; 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 { font-family: 'Play', serif; color: var(--licenseColor) } #license-area a:link{ font-weight: bold; } #search-top-box { /* top: 2.2rem!important; */ right: 8px; top: -100px; } #search-top-box-form > input[type=submit] { border: solid 1px transparent; 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-color: var(--accentColor); background-image: linear-gradient(to bottom, rgb(23, 23, 23), rgb(24, 24, 24)); /*background-image: linear-gradient(to bottom, #3e3e3e, #2e2e2e);*/ background-blend-mode: multiply; border: solid 1px; border-color: var(--accentColor); border-radius: 6px; /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4), -2px -2px 1px rgba(0, 0, 0, 0.4) inset, 2px 2px 1px rgba(128,128, 128, 0.4) inset;*/ top: -24px; background-opacity: 0.4; } #side-bar .heading{ color: #ededed; font-family: 'Play', 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: transparent; } #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: 50%; box-shadow: none; color: var(--accentColor); background-color: #2e2e2e; border: solid 1px var(--accentColor); } .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: var(--accentColor); background-image: linear-gradient(to bottom, #2e2e2e, #262626); background-blend-mode: multiply; 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: solid 1px; 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; border: solid 1px var(--accentColor); } .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: var(--accentColor); 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] ---- */ border: solid 1px var(--accentColor); 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; border: solid 2px; border-color: var(--accentColor); } /*---- 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: 'Play', sans-serif; font-weight:bold; } h2, h3, h4, h5, h6 { color: #EDEDED; font-family: 'Play', sans-serif; font-weight: bold; } #page-title { color: #ededed; font-family: 'Play', sans-serif; font-size: 1.65rem; text-align: center; border-color: #ededed; font-weight:bold; } /* Clicky links */ a,p 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 !important; border: solid 3px #262626; box-shadow: none; } /* Standard AGIAT Image Block starts here */ .agiat-image-block { width: 300px; border: solid 8px #2e2e2e; border-bottom: solid 0px #2e2e2e; box-shadow: 0px 0.26rem 0px 0px var(--accentColor); box-sizing: border-box; } .agiat-image-block.block-right { float: right; clear: right; margin: 0 2em 1em; } .agiat-image-block.block-left { float: left; clear: left; margin: 0 2em 1em 0; } .agiat-image-block.block-center { margin-right: auto; margin-left: auto; } .agiat-image-block img { border: 0; width: 300px; } .agiat-image-block .agiat-image-caption { background-color: #2e2e2e; border-top: solid 1px #666; border: solid 4px #2e2e2e; color: #ededed; font-size: 0.84rem; padding: 2px 0; font-weight: bold; text-align: center; width: 300px; } .agiat-image-block > p { margin: 0; } .agiat-image-block .agiat-image-caption > p { margin: 0; padding: 0 10px; } .agiat-image-block.block-left { margin-left: 0; } .agiat-image-block.block-right { margin-right: 0; } @media (max-width: 540px) { .agiat-image-block.block-left, .agiat-image-block.block-right { float: none; clear: both; margin-left: auto; margin-right: auto; } } /* Standard AGIAT Image Block ends here */ #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; --licenseColor: #1a1a1a; --lgurl: url("http://agiat.wdfiles.com/local--files/theme%3Aagiat-fixed/logo"); --imgWrap: url("https://agiat.wikidot.com/local--files/recursos-comunes/ContainerWrapImage"); } } .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: solid 1px; border-radius: 5px 5px 5px 5px; border-color: var(--accentColor); } /* 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: solid 1px; border-radius: 5px 5px 5px 5px; border-color: var(--accentColor); } .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; } .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); border: solid 1px; border-radius: 5px 5px 5px 5px; border-color: var(--accentColor); } .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: white; border: 1px solid var(--accentColor); color: black; } /* 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: white !important; border: 1px solid var(--accentColor)!important; color: black !important; } .license-area { background-color: var(--accentColor); } .license-area a { color: var(--licenseColor) font-weight: bold; } hr { margin-left: 0em; margin-right: 0em; } #side-bar hr { margin-left: 2em; margin-right: 2em; } .checkbox input, #rev-type-title, #rev-type-all, #rev-type-source, #rev-type-move, #rev-type-tags, #rev-type-meta, #rev-type-files, .radio, #\31 46126552, #rev-type-new, #rev-category, #rev-perpage { filter: invert(70%); background-color: var(--accentColor); } #action-area > p > a[onclick*="PageRateModule.listeners"] { display: block; width: max-content; margin: 0 auto; } #who-rated-page-area > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr) 1.75rem); font-size: calc(var(--true-font-size)*0.925); } #who-rated-page-area > div br { display: none; } #who-rated-page-area > div span:nth-of-type(2n+1) { padding-left: 0.75rem; border-left: 2px solid var(--accentColor); transition: background-color 0.175s ease-out; position: relative; align-items: center; } #who-rated-page-area > div span:nth-of-type(2n+1)::after { content: ""; display: block; position: absolute; top: 0; left: 100%; width: 1.75rem; height: 100%; } #who-rated-page-area > div span[style*="color"] { display: grid; place-items: center; color: #EDEDED; font-weight: bold; text-align: center; font-size: 1.25em; transition: background-color 0.175s ease-out; } #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 var(--accentColor); #history-form-1 { display: grid; grid-template-columns: 1fr 11.25em; grid-template-rows: auto auto auto; column-gap: 1.25rem; } #revision-list { grid-column: 1/3; } #history-form-1 > table.form, #history-form-1 > table.form > tbody { display: contents; } #history-form-1 > table.form > tbody > tr:first-child { display: flex; flex-direction: column; grid-row: span 2; } #history-form-1 > table.form > tbody > tr:first-child::before { content: ""; display: block; width: 100%; height: 0.25rem; background-color: var(--accentColor); } #history-form-1 > table.form > tbody > tr:first-child > td:first-child { display: block; width: max-content; padding: 0.5ch 0.75ch 0; font-size: 0.75em; border: 1px solid var(--accentColor); color: rgb(var(--basalt-light-text-color)); font-family: var(--UI-font); text-transform: uppercase; order: -1; } #history-form-1 > table.form > tbody > tr:first-child > td:nth-child(2) { display: grid; grid-template-columns: repeat(auto-fill, 1.25em minmax(9.875em, 1fr)); grid-auto-rows: auto; text-indent: -0.5ex; grid-gap: 0.325em 0.375em; align-items: center; margin: 0.375em 0; } #history-form-1 > table.form > tbody > tr:first-child > td:nth-child(2) input.checkbox { display: inline-block; margin: 0 0 0 auto; } #history-form-1 > table.form > tbody > tr:nth-child(2) { display: flex; flex-direction: column; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td { position: relative; padding: 0; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:first-child { text-align: center; font-size: 0.75em; padding: 0.425ch 0 0.125ch; position: relative; text-transform: uppercase; transition: color 0.125s ease-out; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:first-child::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 0; z-index: -1; transition: height 0.125s ease-out; } #history-form-1 > table.form > tbody > tr:nth-child(2):focus-within > td:first-child { color: rgb(var(--basalt-light-text-color)); } #history-form-1 > table.form > tbody > tr:nth-child(2):focus-within > td:first-child::before { height: 100%; } #h-perpage { text-align: center; appearance: none; width: 100%; padding-left: 0rem; border: 1px solid var(--accentColor); outline: solid 0 rgb(var(--basalt-UI-dark-palette)); } #h-perpage:focus { border-color: rgb(var(--basalt-UI-dark-palette)); outline-width: 0; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::before, #history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::after { content: ""; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 1.625em; height: 100%; background-color: rgb(var(--basalt-UI-dark-palette)); pointer-events: none; z-index: 1; transition: all 0.125s ease-out; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::before { height: 0; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2)::after { clip-path: polygon(25% 40%, 75% 40%, 50% 70%); } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2):focus-within::before { height: 100%; } #history-form-1 > table.form > tbody > tr:nth-child(2) > td:nth-child(2):focus-within::after { background-color: rgb(var(--basalt-light-text-color)); } #history-form-1 > div.buttons { display: flex; flex-wrap: wrap; padding: 0; margin: 1rem 0; grid-gap: 0.5rem; justify-content: center; align-items: center; height: min-content; align-self: center; } #history-form-1 > div.buttons > input.btn { cursor: pointer; flex-grow: 1; flex-basis: min(12em, 47.5vw); display: flex; justify-content: center; align-items: center; height: 1.875em; } #main-content .pager { display: grid; position: relative; grid-template-areas: "pgno pgno pgno pgno pgno pgno pgno pgno pgno pgno pgno" "prv . . . . . . . . . nxt" "prv . . . . . . . . . nxt"; grid-template-columns: 7.75em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 7.75em; grid-template-rows: 2em auto; margin: 0; z-index: 0; } #main-content .pager > * { display: flex; text-align: center; flex-grow: 1; height: 1.875em; align-items: center; justify-content: center; } #main-content .pager .pager-no { grid-area: pgno; position: static; height: auto; width: max-content; padding: 0 0.75ch; box-sizing: border-box; border-bottom: 2px solid var(--accentColor); background-color: inherit; text-transform: uppercase; } #main-content .pager .pager-no::after { content: ""; display: block; background-color: inherit; position: absolute; top: calc(2em - 0.25rem); left: 0; width: 100%; height: 0.25rem; } #main-content .pager > span.current { background-color: transparent; border-bottom: 2px solid var(--accentColor); font-weight: bold; border: none; margin: 0; padding: 0; } #main-content .pager span.target { display: contents; } #main-content .pager > span.target > a { display: flex; height: 100%; width: 100%; min-height: 1.875em; align-items: center; justify-content: center; position: relative; text-decoration: none; border: none; margin: 0; padding: 0; transition: color 0.1s ease-out; } #main-content .pager span > a::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 0; background-color: rgb(var(--basalt-focus-color)); z-index: -1; transition: height 0.125s ease-out; } #main-content .pager span > a:is(:hover, :focus) { color: rgb(var(--basalt-light-text-color)); } #main-content .pager span > a:is(:hover, :focus)::before { height: 100%; } #main-content .pager > span.target:nth-child(2) > a { grid-area: prv; } #main-content .pager > span.target:last-child > a { grid-area: nxt; } #main-content .pager > span.target:is(:nth-child(2), :last-child) > a { font-weight: bold; min-width: max-content; padding: 0 1ch; margin: 0; box-sizing: border-box; } #main-content .pager > span.target:is(:nth-child(2), :last-child) > a::before { height: 100%; width: 0; transition: width 0.125s ease-out; } #main-content .pager > span.target:last-child > a::before { right: 0; left: unset; } #main-content .pager > span.target:is(:nth-child(2), :last-child) > a:is(:hover, :focus)::before { width: 100%; } #main-content .pager::before, #main-content .pager::after { grid-area: nxt; display: flex; align-items: center; justify-content: center; margin-right: 10px; background: #2e2e2e!important; color: white; opacity: 0.375; font-weight: bold; z-index: -1; cursor: not-allowed; } #main-content .pager::before { content: "« previous"; grid-area: prv; } #action-area .page-source { border: 2px solid var(--accentColor); } .code { color: black !important; padding: 1em; border-width: 0.162rem; border-style: solid; border-color: var(--accentColor); background-color: white; font-family: var(--mono-font); word-break: break-word; hyphens: auto; } .code * { --MONO: 1; --calt: 0; max-width: 90vw; font-family: var(--mono-font); color: white!important; } .code pre { white-space: pre-wrap; color: white !important; } .code, .code * { font-variation-settings: "wght" var(--mono-wght), "slnt" var(--slnt), "CASL" var(--CASL), "CRSV" var(--CRSV), "MONO" var(--MONO); } .code i, .code i *, .code em, .code em *, .code .italic, .code .italic *, .code [style*="italic"], .code [style*="italic"] *, .code [style*="oblique"], .code [style*="oblique"] * { --slnt: -15; color: white !important; } .code p, .code pre { margin: 0; color: white !important; } /* 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 } } /*----BinaryCube additions----*/ div#container-wrap { background: var(--imgWrap) center no-repeat; background-size: 25vw 25vw; background-attachment: fixed; float: center; } #top-bar div.open-menu a:hover { box-shadow: 0px 0px 20px 5px var(--accentColor); } @media (max-width: 767px) { div#container-wrap { background-size: 35vw 35vw; } } /*-----Divs de uso común por BinaryCube-----*/ .log{ background: url(https://agiat.wikidot.com/local--files/recursos-comunes/AGIAT-logo-Transparente.png) center top no-repeat; float: center; border: solid 5px var(--accentColor); padding: 5vw; padding-top: 2vw; padding-bottom: 2vw; background-size: contain; background-color: #2e2e2e; background-position: center; } .analysis{ position: relative; border: 10px gray; border-style: ridge groove groove ridge; margin-bottom: 10px; background-color: #d9d6d0; color: black; font-family: Times; font-size: 15px; padding: 5vw; padding-top: 2vw; padding-bottom: 2vw; } .analysis::before{ position: absolute; content: " "; padding: 5px; margin: 1px; top: 5px; right: 5px; display: block; background: url("https://agiat.wikidot.com/local--files/recursos-comunes/AGIATCircleMask1.png"); background-size: 7vw 7vw; background-color: transparent; width: 7vw; height: 7vw; background-position: center; background-repeat: no-repeat; border: solid 1px transparent; border-radius: 50%; } .analysis h1, .analysis h2, .analysis h3, .analysis h4, .analysis h5, .analysis h6 { color: black; } @media (max-width: 767px) { .analysis::before{ background-size: 14vw 14vw; width: 14vw; height: 14vw; } .analysis{ padding-top: 16vw; } } .record1{ position: relative; padding: 1vw; padding-top: 2vw; padding-bottom: 2vw; border: solid 2px var(--accentColor); font-family: Courier; background: url("https://agiat.wikidot.com/local--files/recursos-comunes/AGIATCircleMask1.png") center no-repeat; background-color: #1a1a1a; background-size: contain; background-position: center; } .record1 h1, .record1 h2, .record1 h3, .record1 h4, .record1 h5, .record1 h6 { color: #ededed; font-style: italic; font-weight: bold; } .record2{ position: relative; padding: 1vw; padding-top: 2vw; padding-bottom: 2vw; border: solid 2px var(--accentColor); font-family: Courier; background: url("https://agiat.wikidot.com/local--files/recursos-comunes/AGIATCircleMask1.png") center no-repeat; background-color: #d0d0d0; background-size: contain; background-blend-mode: overlay; color: black; } .record2 hr{ background-color: black; } .record2 h1, .record2 h2, .record2 h3, .record2 h4, .record2 h5, .record2 h6 { color: black; font-style: italic; font-weight: bold; } .warn1{ background-color: #E10815; border: solid 2px brown; padding: 2px 2px; } .warn1 h1, .warn1 h2, .warn1 h3, .warn1 h4, .warn1 h5, .warn1 h6 { color: white; font-weight: bold; } .warn2{ border: solid 5px #FFFFFF; padding: 25px 25px; margin: 10px 10px 10px 10px; background-color: #181818; color: white; } .warn2 h1, .warn2 h2, .warn2 h3, .warn2 h4, .warn2 h5, .warn2 h6 { color: darkred; font-weight: bold; } .warn3{ background-color: black; color: white; font-family: monospace; font-size: 16px; padding: 2%; border-radius: 5px; border: 10px solid transparent; border-image: repeating-linear-gradient(45deg, #ffe138 0%, #ffe138 1%, #000000 1%, #000000 2%, #ffe138 2%, #ffe138 3%, #000000 3%, #000000 4%); border-image-width: 10px; border-image-slice: 10; animation: warning linear 1s infinite; } .warn3 h1, .warn3 h2, .warn3 h3, .warn3 h4, .warn3 h5, .warn3 h6 { color: yellow; } @keyframes warning{ 0% {border-image: repeating-linear-gradient(45deg, #ffe138 0%, #ffe138 1%, #000000 1%, #000000 2%, #ffe138 2%, #ffe138 3%, #000000 3%, #000000 4%); border-image-width: 10px; border-image-slice: 10;} 49% {border-image: repeating-linear-gradient(45deg, #ffe138 0%, #ffe138 1%, #000000 1%, #000000 2%, #ffe138 2%, #ffe138 3%, #000000 3%, #000000 4%); border-image-width: 10px; border-image-slice: 10;} 50% {border-image: repeating-linear-gradient(45deg, #000000 0%, #000000 1%, #ffe138 1%, #ffe138 2%, #000000 2%, #000000 3%, #ffe138 3%, #ffe138 4%); border-image-width: 10px; border-image-slice: 10;} 99% {border-image: repeating-linear-gradient(45deg, #000000 0%, #000000 1%, #ffe138 1%, #ffe138 2%, #000000 2%, #000000 3%, #ffe138 3%, #ffe138 4%); border-image-width: 10px; border-image-slice: 10;} 100% {border-image: repeating-linear-gradient(45deg, #ffe138 0%, #ffe138 1%, #000000 1%, #000000 2%, #ffe138 2%, #ffe138 3%, #000000 3%, #000000 4%); border-image-width: 10px; border-image-slice: 10;} } .ops-abstract{ background: url(https://agiat.wikidot.com/local--files/recursos-comunes/AGIAT-simbolo-b-n-20-o.png) center top no-repeat; float: center; border: double 5px var(--accentColor); padding: 5vw; padding-top: 2vw; padding-bottom: 2vw; background-size: 20vw; background-color: #d0d0d0; background-position: center; color: black; font-family: Times; } .ops-abstract hr { background-color: black; } .ops-abstract h1, .ops-abstract h2, .ops-abstract h3, .ops-abstract h4, .ops-abstract h5, .ops-abstract h6 { color: Black; font-family: Times; font-weight: bold; } .notification{ background-color: #2e2e2e; border: solid 1px var(--accentColor); border-radius: 20px; color: #fff; width: 450px; margin: 0 auto; font-size: 120%; text-align: center; line-height: 100%; padding: 10px; font-weight: bold; background-image: linear-gradient(to bottom, #404040, #202020); background-color: var(--accentColor); background-blend-mode: screen; box-shadow: -5px -5px 10px rgba(16, 16, 16, 0.5) inset, 0px 0px 5px 5px rgba(32, 32, 32, 0.5) inset, 5px 5px 10px rgba(96, 96, 96, 0.5) inset; } @font-face { font-family: Shadows Into Light; src: url(https://fonts.gstatic.com/s/shadowsintolight/v15/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD5.woff2); } .note1 { margin: 0 0 0.6em; font-family: 'Shadows Into Light'; font-weight: bold; color: #020003; border:solid 1px transparent; background:#FFFABC !important; padding: 25px; margin-bottom: 10px; font-size: 1.0rem !important; } .note1 h1, .note1 h2, .note1 h3, .note1 h4, .note1 h5, .note1 h6 { font-weight: bold; font-family: 'Shadows Into Light'; color: #020003; } .corrupcion { display: inline-block; animation: rotate 1s linear infinite; font-size: .9rem; padding: 0px; margin-top: 0px; margin-bottom: 0px; outline: 0px none; } @keyframes rotate{ 0% {transform: rotatey(0deg);} 50% {transform: rotatey(7200deg);} 100% {transform: rotatey(14400deg);} } .note2{ background:#F2D5E0; padding:5px; margin-bottom: 10px; color: black background-color: #F2D5E0; color: black; font-family: Times; border: solid 5px black; border-style: ridge groove groove ridge; padding: 30px } .note2 h1, .note2 h2, .note2 h3, .note2 h4, .note2 h5, .note2 h6 { font-family: Times; color: black; } .ots{ border: solid 3px var(--accentColor); padding: 1px 25px; margin: 10px 10px 10px 10px; background: url("https://agiat.wdfiles.com/local--files/recursos-comunes/placeholder_riesgo.png") center no-repeat; background-size: 20vw 20vw; background-color: #2e2e2e; position: relative; border-radius: 1vw; /*box-shadow: -5px -5px 10px #101010 inset, 0px 0px 5px 5px #202020 inset, 5px 5px 10px #606060 inset;*/ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4), -4px -4px 1px rgba(0, 0, 0, 0.4) inset, 4px 4px 1px rgba(128,128, 128, 0.4) inset; } /* .ots::before{ display: inline-block; content: " "; background: url("https://agiat.wikidot.com/local--files/recursos-comunes/AGIATCircleMask.png") center no-repeat; background-size: 8vw 8vw; background-color: transparent; height: 10vw; width: 100%; } */ .ots::before{ display: inline-block; content: " "; background: var(--imgClass) center no-repeat; background-size: 8vw 8vw; background-color: transparent; height: 10vw; width: 100%; } @media (max-width:768px) { .ots{ background-size: 35vw 35vw; border-radius: 3vw; } .ots::before{ background-size: 18vw 18vw; height: 20vw; } } .ponencia{ background: url(https://agiat.wikidot.com/local--files/recursos-comunes/AGIAT-logo-Transparente.png) center top no-repeat; background-size: contain; border: double 8px; padding: 5vw; padding-top: 2vw; padding-bottom: 2vw; } .bestiary{ border-style:solid; border-width: 2px; border-color: #7E7E7E; padding: 30px; } /*----Divs de uso común acaban aquí----*/