/* fuente: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ #top-bar .open-menu a { position: fixed; top: 0.5em; left: 0.5em; z-index: 5; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888; background-color: #fff; border-radius: 3em; color: #888; } @media (min-width: 768px) { #top-bar .mobile-top-bar { display: block; } #top-bar .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block; position: fixed; top: 0; left: -20em; width: 17.75em; height: 100%; margin: 0; overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; background-color: rgba(0,0,0,0.1); transition: left 0.4s ease-in-out; scrollbar-width: thin; } #side-bar:target { left: 0; } #side-bar:focus-within:not(:target) { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin-left: 19.75em; opacity: 0; z-index: -1; visibility: visible; } #side-bar:not(:target) .close-menu { display: none; } #top-bar .open-menu a:hover { text-decoration: none; } /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */ @supports (-moz-appearance:none) { #top-bar .open-menu a { pointer-events: none; } #side-bar:not(:target) .close-menu { display: block; pointer-events: none; user-select: none; } /* This pseudo-element is meant to overlay the regular sidebar button so the fixed positioning (top, left, right and/or bottom) has to match */ #side-bar .close-menu::before { content: ""; position: fixed; z-index: 5; display: block; top: 0.5em; left: 0.5em; border: 0.2em solid transparent; width: 30px; height: 30px; font-size: 30px; line-height: 0.9em; pointer-events: all; cursor: pointer; } #side-bar:focus-within { left: 0; } #side-bar:focus-within .close-menu::before { pointer-events: none; } } }
Uso
Este es el Tema MARATÓNICO, basado en las terminales del videojuego Marathon y creado para su uso en fichas, en específico, la de extasis.
Para importar este tema, pon lo siguiente en la parte más alta de tu artículo:
[[include theme:maratonico]]
Uso de Variaciones de Color
Este tema cuenta con variaciones de color, es decir, versiones alternativas del mismo tema pero con algunos, o todos, sus colores cambiados. Este tema cuenta con 3 variaciones de color distintas.
Comic Bunnies
Esta variación ofrece colores rosados, morados y verdes. Inspirado por la estética vista en el canon de Observando Estrellas Muertas.
Para importar la variación Cosmic Bunnies, pon lo siguiente en la parte más alta de tu artículo:
[[include theme:maratonico |cosmic-bunnies= --]]]
Cyan Love
Esta variación ofrece colores cian, turquesa y rosados. Inspirado por la relación amorosa de los personajes de El Escritor y Amalia Mondragón.
Para importar la variación Cyan Love, pon lo siguiente en la parte más alta de tu artículo:
[[include theme:maratonico |cyan-love= --]]]
The Color Behind The Slaughter
Esta variación ofrece colores morados, púrpuras y amarillos. Inspirado por el personaje del Hombre Morado de la saga de videojuegos Five Nights at Freddy's.
Para importar la variación The Color Behind The Slaughter, pon lo siguiente en la parte más alta de tu artículo:
[[include theme:maratonico |the-color-behind-the-slaughter= --]]]
Ejemplos
Una línea horizontal como la de arriba puede ser creada con cuatro guiones, así: "----". Un pequeño pero grueso guion de separación puede ser creado si se coloca lo siguiente: "+ -----".
Esto es un tab.
Oye, mira, hay más texto por aquí.
Qué intrigante.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta es una tab larga. Contiene un montón de texto.
Esta no estaba vacía. El capataz se enterará de esto.
Esto es un cuadro de citas, creado al poner "> "al inicio de cada línea. Nótese que el espacio luego del símbolo siempre es necesario ponerlo, incluso cuando solo se pone una línea vacía para separar párrafos.
Más texto
Esta es una línea horizontal. Cuánto estilo.
Y esto es lo que llamamos Inception3.
| Esto es una | tabla |
|---|---|
| Siempre olvido | como usar estas cosas |
| aunque no es tan difícil como parece | |
Código Fuente
/* ROOT */ :root { --color-prota: #FF0000; --color-secundario: #370000; --color-acento: #00FF00; --color-texto-general: #A3A3A3; --color-oscuro: #212121; --color-mas-oscuro: #000000; --header: url('https://lafundacionscp.wdfiles.com/local--files/theme%3Amaratonico/header.png'); --logo: url('https://lafundacionscp.wdfiles.com/local--files/theme%3Amaratonico/logo.png'); --loader: url('https://lafundacionscp.wdfiles.com/local--files/theme%3Amaratonico/maraton_loader.gif'); } /* FONDO DE CABECERA */ div#container-wrap { background: var(--header) top left repeat-x; } #header { height: 20rem; position: relative; z-index: 10; padding-bottom: 22px; background-repeat: no-repeat; background-size: 175px; background-position: 1rem 3rem; background-image: none; } #header::before { position: absolute; width: 100%; height: 100%; content: ""; background-image: var(--logo); background-size: 157px; background-repeat: no-repeat; background-position: center 25%; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } #header h1 span, #header h2 span{ display: none; } #header h1 a::before, #header h2::before{ text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--color-acento); font-size: 115%; font-weight: 700; } #header h2::before{ position: relative; top: .1em; color: var(--color-prota); font-size: 130%; font-weight: 600; } #header h1 a::before{ top: 9.5rem; font-family: "Courier New"; content: "EXTASIS"; } #header h2::before{ top: 10rem; font-family: "Courier New"; content: "Aut viam inveniam aut faciam"; } /* BARRA SUPERIOR */ #top-bar { top: 18rem !important; right: 0; display: flex; justify-content: center; height: 3rem; line-height: 3rem; font-size: 15px; padding-top: 6px; } @media (max-width: 767px) { #top-bar { top: 12.3rem; } } #top-bar a { color: var(--color-prota); font-weight: normal; } #top-bar ul li a { border: none; text-decoration: none; box-shadow: none; padding-top: 10px; padding-bottom: 10px; line-height: 1px; max-height: 1px; overflow: hidden; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background-color: var(--color-secundario); color: var(--color-prota); border-left: solid 1px var(--color-prota); border-right: solid 1px var(--color-prota); } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-width: 0; width: 150px; line-height: 160%; height: auto; max-height: none; padding-top: 0; padding-bottom: 0; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: var(--color-prota); text-decoration: none; color: var(--color-secundario); } #top-bar ul li ul { border: none; box-shadow: none; } #top-bar ul li ul li ul { border: none; box-shadow: none; } .topbar_arrow { color: var(--color-prota) !important; } /* CUENTA */ #login-status { top: 0.5rem; right: initial; color: var(--color-prota); font-size: 15px; } #login-status a { color: var(--color-prota); } #account-topbutton { border: none; } #account-topbutton:focus { background: var(--color-prota); color: black; } #account-options { border: solid 0px var(--color-secundario); background-color: var(--color-secundario); color: var(--color-prota); } #account-options a { color: var(--color-prota); } #login-status ul a { color: var(--color-prota); background-color: var(--color-secundario); } #login-status ul a:hover { color: var(--color-secundario); background-color: var(--color-prota); } /* BUSCADOR */ #search-top-box { top: 0.5rem; } #search-top-box-input, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:focus { background: none; box-shadow: none; border-radius: 0px; color: var(--color-prota); border: none; font-size: 14px; font-family: "Courier New"; font-weight: normal; padding-left: 5px; } #search-top-box-input:hover, #search-top-box-form input[type=submit]:hover { background: var(--color-prota); box-shadow: none; border-radius: 0px; color: black; border: none; font-size: 14px; font-family: "Courier New"; font-weight: normal; padding-left: 5px; } #search-top-box-input:focus, #search-top-box-form input[type=submit]:focus { background: none; box-shadow: none; border-radius: 0px; color: var(--color-prota); border: none; font-size: 14px; font-family: "Courier New"; font-weight: normal; padding-left: 5px; } /* BARRA SUPERIOR */ #top-bar { top: 13.95rem; right: 0; height: 3rem; line-height: 3rem; } @media (max-width: 767px) { #top-bar { top: 12.3rem; } } /* TÍTULO DE PÁGINA */ #page-title { display: none; } /* PUNTUACIÓN */ .page-rate-widget-box { margin-right: 0px; border: solid 2px var(--color-secundario) !important; } .creditRate { margin-right: 0px!important; } .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { background-color: transparent !important; border: 0; text-transform: capitalize; font-weight: bold; color: var(--color-prota)!important; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { margin-right: 0px; margin-left: 0px; } div.page-rate-widget-box { background-color: var(--color-secundario)!important; border: solid var(--color-secundario) 1px!important; border-radius: 0px; box-shadow: none; } div.page-rate-widget-box span.rate-points, div.page-rate-widget-box span.cancel { background-color: var(--color-secundario) !important; border: 1px var(--color-secundario); } div.page-rate-widget-box span.rateup, div.page-rate-widget-box span.ratedown { background-color: var(--color-secundario) !important; margin-right: 0px; margin-left: 0px; color: var(--color-prota) !important; } div.page-rate-widget-box span.rateup a, div.page-rate-widget-box span.ratedown a { color: var(--color-prota) !important; } div.page-rate-widget-box span.rateup a:hover { background: var(--color-mas-oscuro) !important; color: var(--color-acento) !important; } div.page-rate-widget-box span.ratedown a:hover { background: var(--color-mas-oscuro) !important; color: var(--color-prota) !important; } div.page-rate-widget-box span.cancel a { color: var(--color-prota) !important; } div.page-rate-widget-box span.cancel a:hover { background: var(--color-prota) !important; color: var(--color-mas-oscuro) !important; border-radius: 0px; } /* PUNTUACIÓN CON INFO */ #page-content .rate-box-with-credit-button { background-color: var(--color-secundario); border: 1px solid var(--color-secundario); box-shadow: 1px 1px 3px rgba(0,0,0,.5); border-radius: 0px; box-shadow: none; } #page-content .rate-box-with-credit-button .creditButton p a { border-left-color: var(--color-prota); } #page-content .rate-box-with-credit-button .fa-info { border-color: var(--color-prota); color: var(--color-prota); } #page-content .rate-box-with-credit-button .fa-info:hover a { color: var(--color-prota); } .creditButton p a:hover { color: var(--color-acento) !important; } .close-credits, .credit-back { filter: hue-rotate(0deg); } #page-content .modalbox { box-shadow: 0 2px 6px rgba(0,30,0,.5); } /* CUERPO */ body { background-color: black; font-family: "Courier New"; font-size: 14px; color: white; } #footer { background-color: var(--color-secundario); color: var(--color-prota); font-size: 12px; padding-top: 10px; padding-bottom: 10px; } #footer a, #footer a:visited { color: var(--color-prota); } #license-area { display: none; } /* TÍTULOS */ h1 { color: var(--color-prota); font-family: "Courier New"; } h2, h3, h4, h5, h6 { color: white; font-family: "Courier New"; } a, a:visited, a.newpage { color: var(--color-prota); } /* IMAGE BLOCK */ .scp-image-block { border: none; } .scp-image-caption { background-color: var(--color-secundario); border: solid 1px var(--color-secundario); color: var(--color-prota); } .scp-image-block .scp-image-caption { background-color: var(--color-secundario); border-top: solid 1px var(--color-secundario); } .scp-image-block .scp-image-caption > p { background-color: var(--color-secundario); } /* BARRA LATERAL */ #side-bar .side-block { padding: 10px; border-top: solid 1px var(--color-secundario); border-left: solid 1px var(--color-secundario); border-right: solid 1px var(--color-secundario); border-bottom: solid 1px var(--color-secundario); margin-bottom: -1px; border-radius: 0px; box-shadow: none; background-color: var(--color-secundario); font-size: 110%; } #side-bar .side-block a, #side-bar .side-block a:visited, #side-bar .side-block a.newpage { color: var(--color-prota); } #side-bar .side-block.media { border-top: none; background: var(--color-secundario); } #side-bar .side-block.nuevos { background-color: var(--color-secundario); } #side-bar .side-block.guias { background-color: var(--color-secundario); } #side-bar .side-block.borradores { background-color: var(--color-secundario); } #side-bar .side-block.cc { background-color: var(--color-secundario); font-family: "Courier New"; font-size: 110%; font-weight: bold; } #side-bar .side-block.recurso { background-color: var(--color-secundario); } #side-bar .heading { color: var(--color-prota); border-bottom: solid 1px var(--color-prota); } #side-bar, #side-bar:is(:hover,:active,:focus-within) { scrollbar-color: var(--color-secundario) var(--color-mas-oscuro); } /* MENÚ BARRA LATERAL */ @media (max-width: 767px) { #side-bar { opacity: 1; background: var(--color-secundario); } } .open-menu a, #top-bar .open-menu a { border: solid 5px var(--color-mas-oscuro) !important; background-color: var(--color-secundario) !important; color: var(--color-prota) !important; } .open-menu a:hover, #top-bar .open-menu a:hover { text-decoration: none !important; -webkit-box-shadow: 0px 0px 20px 3px rgba(255,0,25,.7); -moz-box-shadow: 0px 0px 20px 3px rgba(255,0,0,.7); -ms-box-shadow: 0px 0px 20px 3px rgba(255,0,0,.7); -o-box-shadow: 0px 0px 20px 3px rgba(255,0,0,.7); box-shadow: 0px 0px 20px 3px rgba(255,0,0,.7); } /* MODALBOX */ .modalbox { background: var(--color-mas-oscuro) !important; border-radius: 0px; } .modalbox h2 { font-weight: bold; font-size: 230%; margin-bottom: 0.4em; margin-top: 0.4em; color: var(--color-prota); } .modalbox hr { background-color: #FFFFFF; background-image: none; } /* TABS */ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: var(--color-secundario); display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; box-shadow: none; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border-color: var(--color-secundario); } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { border: unset; box-shadow: none; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { background: var(--color-secundario); color: var(--color-prota); border-left: solid 1px var(--color-prota); border-right: solid 1px var(--color-prota); } .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background: var(--color-secundario); color: var(--color-prota); border-top: 0; border-left: 0; border-right: 0; } .yui-navset .yui-nav a:focus, .yui-navset .yui-nav a:hover { background: var(--color-prota); color: var(--color-secundario); } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em { border: 0px; padding: .35em .75em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { display: flex; flex-grow: 2; max-width: 100%; align-items: center; justify-content: center; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { margin: 0; } .yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { position: relative; display: flex; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; } .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-content { background-color: var(--color-mas-oscuro); border-bottom: solid 25px var(--color-secundario); border-left: solid 0px var(--color-prota); border-right: solid 0px var(--color-prota); border-top: solid 0px var(--color-prota); position: relative; } /* TABLAS */ table.wiki-content-table th { background-color: var(--color-secundario); color: var(--color-prota); border: solid 1px var(--color-prota); } table.wiki-content-table td { border: solid 1px var(--color-prota); } /* BARRA SEPARADORA */ hr { background-color: #FFFFFF; } /* BLOCKQUOTE */ blockquote, div.blockquote { background-color: var(--color-secundario); border: solid 2px var(--color-mas-oscuro); color: var(--color-prota); padding-top: 7px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; } blockquote blockquote { border: solid 2px var(--color-prota); } blockquote a.footnoteref { background-color: var(--color-prota); color: var(--color-secundario); } div.blockquote a.footnoteref { background-color: var(--color-prota); color: var(--color-secundario); } blockquote hr { background-color: var(--color-prota); } div.blockquote hr { background-color: var(--color-prota); } /* CODE */ .code { background-color: var(--color-mas-oscuro); border: none; color: var(--color-acento); } .hl-identifier { color: var(--color-acento); } .hl-code { color: var(--color-acento); } .hl-brackets { color: var(--color-acento); } .hl-reserved { color: var(--color-acento); } .hl-special { color: var(--color-acento); } .hl-string { color: var(--color-acento); } .hl-number { color: var(--color-acento); } /* FOOTNOTES */ .footnotes-footer .title { color: var(--color-prota); } .hovertip { background-color: var(--color-mas-oscuro) !important; border: 1px solid var(--color-mas-oscuro) !important; color: var(--color-prota); } .footnote .f-heading, .equation .e-heading, .reference .r-heading { background-color: var(--color-secundario) !important; margin: 0px !important; } .footnote .f-content, .reference .r-content { color: #ffffff; } .footnote .f-footer, .equation .e-footer, .reference .r-footer { background-color: var(--color-secundario) !important; margin: 0px !important; content: 'lol' !important; } a.footnoteref { font-weight: bold; background-color: var(--color-secundario); margin-right: 2px; margin-left: 2px; font-size: 113%; color: var(--color-prota); padding: 2px; } /* OWINDOW */ .owindow { background-color: var(--color-mas-oscuro); color: var(--color-acento); border-top: solid 0px var(--color-secundario); border-right: solid 0px var(--color-mas-oscuro); border-left: solid 0px var(--color-mas-oscuro); border-bottom: solid 0px var(--color-mas-oscuro); } .owindow a { color: var(--color-acento); } .owindow h1 { color: var(--color-acento); } .owindow .title { background-color: var(--color-secundario); color: var(--color-prota); } .owindow img { background-color: var(--color-mas-oscuro) !important; } .owindow .button-bar { margin: 0px; background-color: var(--color-secundario); } .owindow .button-bar a { background-color: var(--color-secundario); color: var(--color-prota); border: solid 1px var(--color-secundario); } .owindow .button-bar a:hover { background-color: var(--color-prota); color: var(--color-secundario); border: solid 1px var(--color-prota); } .owindow.owait .content{ padding-bottom: 2rem; background-image: var(--loader); filter: invert(.4) sepia(.5) saturate(1000%) hue-rotate(var(--tint)); } /* SELECCIÓN CON MOUSE */ ::selection { background: var(--color-acento); color: var(--color-mas-oscuro); } /* SCROLLBAR */ ::-webkit-scrollbar-thumb { background: var(--color-secundario); } ::-webkit-scrollbar-track { background: var(--color-mas-oscuro); } /* EDITOR DE TEXTO */ input.text, input.text:focus, input.text:hover{ color: var(--color-texto-general); border-color: var(--color-texto-general); background-color: var(--color-oscuro); } .wd-editor-toolbar-panel div { filter: hue-rotate(62deg) invert(83%); } textarea { color: var(--color-texto-general); border-color: var(--color-texto-general); background-color: var(--color-oscuro); } .change-textarea-size a{ color: var(--color-texto-general); border-color: var(--color-texto-general); background-color: var(--color-oscuro); } div#lock-info{ background-color: var(--color-secundario); color: var(--color-prota); border-color: var(--color-secundario); } div.buttons input, input.button, button, file, a.button { color: var(--color-texto-general); border-color: var(--color-texto-general); background-color: var(--color-oscuro); }













