@import "./syntax/a11y-light.css";

/* Artemis 8  */
/* Puerto de un tema de Hispachan. */
:root {
--background-color:#cff0ff;
--background-gradient:none;
--text-color:#000;
--text-shadow-color:#0b41ab;
--contrast-color:#b6d9ff;
--background-highlight-color:none;
--horizon-sep-color:#b6d9ff;
--marked-color:#6bb4e1;
--marked-border-color:#555;
--marked-text-color:var(--text-color);
--link-color:#0f4343;
--link-hover-color:teal;
--navbar-text-color:#0b41ab;
--subject-color:var(--link-color);
--role-color:var(--red-text-color);
--thread-navbar-background:#004f7e;
--thread-navbar-color:#fff;
--border-color:#555;
--logo-image:url(/.media/.static/logo/logo_hispa_blue.png);
--button-push-color:#0b41ab;
--button-color:#34345c;
--reload-button-color:#ecebe5;
--reload-button-push-color:#d8d0c4;
--reload-button-border-color:#8f8f9d;
--green-text-color:#0a5a0a;
--red-text-color:#8a0303;
--pink-text-color:#c133a8;
--name-color:#58111a;
--post-border-color:#555;
scrollbar-color:var(--thread-navbar-background) var(--contrast-color)
}

/* --------------- LAS ADICIONES AL TEMA COMIENZAN AQUÍ --------------- */
nav.navHeader {
background-color:var(--contrast-color);
box-shadow:0 2px 4px -1px #0d1016ff 4px 5px 0 #0d1016ff 1px 10px 0 #0d101633;
color:var(--text-color);
text-align:right
}

.boardHeader #labelName {
color:var(--link-color)
}

.boardHeader p,#overboardId {
color:var(--link-color)
}

.innerUtility.top {
border-radius:5px
}

#newPostFieldset legend {
background:var(--contrast-color);
border-color:var(--border-color);
border-radius:5px;
color:var(--text-color)
}

input[type=text],input[type=password],input[type=number],input[type=url],textarea {
background:var(--background-color);
border-color:var(--field-border-color);
border-radius:5px
}

#postingForm th {
background:var(--contrast-color);
border-color:var(--border-color);
border-radius:5px;
color:var(--text-color)
}

.modalTableBody th {
background:var(--thread-navbar-background);
border:none;
border-radius:5px;
color:var(--thread-navbar-color)
}

a,.glowOnHover {
color:var(--link-color);
text-shadow:none
}

a:hover,.glowOnHover:hover {
color:var(--link-hover-color);
text-shadow:1px 0 20px var(--text-shadow-color)
}

.dropzone {
background:var(--reload-button-color);
border:1px solid var(--reload-button-border-color);
border-radius:5px;
color:#000
}

.dropzone:hover {
background:var(--reload-button-push-color);
border:1px solid var(--reload-button-border-color);
border-radius:5px;
color:#000
}

input[type="submit"] {
background:var(--button-color)!important;
border:none;
border-radius:5px;
color:var(--background-color)
}

input[type="submit"]:hover {
background:var(--button-push-color)!important;
border:none;
border-radius:5px;
color:var(--background-color)
}

input[value="Cancel"] {
background:var(--button-color)!important;
border:none;
border-radius:5px;
color:var(--background-color)
}

input[value="Cancel"]:hover {
background:var(--button-push-color)!important;
border:none;
border-radius:5px;
color:var(--background-color)
}

input[value="Reload"] {
background-color:var(--reload-button-color)!important;
border:1px solid var(--reload-button-border-color);
border-radius:5px;
color:#000
}

input[value="Reload"]:hover {
background-color:var(--reload-button-push-color)!important;
border:1px solid var(--reload-button-border-color);
border-radius:5px;
color:#000
}

button {
background-color:var(--reload-button-color)!important;
border:1px solid var(--reload-button-border-color);
border-radius:5px;
color:#000
}

button:hover {
background-color:var(--reload-button-push-color)!important;
border:1px solid var(--reload-button-border-color);
border-radius:5px;
color:#000
}

body {
background:var(--background-color)
}

.innerPost {
border:1px solid var(--border-color);
border-radius:5px;
padding:5px
}

span.labelCreated {
color:var(--link-color)
}

.linkName {
color:var(--name-color)
}

.linkSelf,.linkQuote,.labelStats {
color:var(--link-color);
font-weight:700;
text-decoration:none
}

.floatingList,.floatingMenu,.modalForm {
background:var(--contrast-color);
border-color:var(--border-color);
color:var(--text-color)
}

.quoteLink {
color:var(--link-color)
}

#panelMessage {
color:var(--red-text-color)
}

.noEmailName {
color:var(--link-hover-color)
}

.noEmailName:hover {
color:var(--link-hover-color);
text-shadow:none
}

.greenText {
color:var(--green-text-color)
}

.pinkText {
color:var(--pink-text-color)
}

.redText {
color:var(--red-text-color)
}

.diceRoll {
color:var(--red-text-color)
}

.containPages {
border-color:var(--marked-border-color);
border-radius:5px
}

#indexWrapper > fieldset {
border-radius:5px
}

#indexWrapper > fieldset:not(#welcomeMessage) {
border-color:var(--thread-navbar-background);
border-radius:5px
}

.titleFieldset {
border-color:var(--thread-navbar-background)
}

.jsenabled .catalogCell {
background:var(--contrast-color);
border-color:var(--border-color);
border-radius:5px
}

#quick-reply {
background:var(--contrast-color);
border-color:var(--border-color);
border-radius:5px
}

#quick-reply th {
background:var(--thread-navbar-background);
border-radius:5px;
border:none;
color:var(--thread-navbar-color)
}

#quick-reply .close-btn.coloredIcon {
color:var(--thread-navbar-color);
text-shadow:none
}

#quick-reply .close-btn.coloredIcon:hover {
color:var(--link-hover-color);
text-shadow:none
}

.modalForm {
border-radius:5px
}

.captchaImage {
border-radius:5px
}

.floatingMenu {
border-radius:5px
}

div#multiboardMenu.floatingMenu {
border-radius:5px
}

.floatingMenu hr {
border-color:var(--thread-navbar-background)
}

.floatingList ul li {
background:var(--contrast-color);
border-bottom:1px solid var(--text-color)
}

.floatingList ul li:hover {
background-color:var(--marked-color)
}

.splitField > * {
border-radius:5px
}

.labelCreated:after {
content:" (UTC)"
}

.linkSelf {
display:none
}

.linkQuote:before {
content:"/#/";
font-weight:bolder
}

input[type=text],input[type=password],input[type=number],input[type=url],textarea {
border-color:var(--post-border-color);
color:var(--text-color)
}

#themeSelector {
color:#000
}

.titleFieldset legend {
background:var(--thread-navbar-background);
border-color:var(--thread-navbar-background);
border-top-left-radius:5px;
border-top-right-radius:5px;
color:var(--thread-navbar-color);
margin-left:-17px;
padding-right:28px
}

/* Corner Mascot & Background */
body {
background-image:url(/.media/db2fa191d8187fd849ac8a45cb7f3307f58de01a519f4b7d902e609ec71cae6e.png),conic-gradient(#94d8daa6,#94d8daa6);
background-repeat:no-repeat,no-repeat;
background-attachment:fixed,fixed;
background-position:right bottom,center,center;
background-blend-mode:normal,normal;
background-size:25vmin,auto,50vmin
}

/* Estrella Favorita */
label#favoriteButtonLabel:after {
content:" ";
font-size:0
}

label#favoriteButtonLabel::before {
content:"✹";
font-size:35px;
color:#000
}

label#favoriteButtonLabel:hover:before {
content:"❇";
font-size:35px;
color:#6262dd
}

/* Reemplaza el (You) por (Tú) */
.youName::after {
content:' (Tú)';
font-style:italic;
font-family:comic sans ms;
color:#000;
text-shadow:1px 1px #fff
}

/* Reemplaza el (You) por (Yo) en citados */
.quoteLink.you:after {
content:" (Yo)"
}

#bannerImage {
max-width:100%;
border-radius:8px;
border-style:double
}

/* Spoiler mejorado */
span.spoiler,span.spoiler a {
background:transparent;
color:transparent;
text-shadow:0 0 5px black,0 0 7px black,0 0 8px #000;
padding:0 1px;
transition:1s
}

span.spoiler:hover {
background:transparent;
color:#FFF
}

/* Mejorar nombre del tablón y mensaje */
#panelMessage div {
white-space:pre-wrap;
font-size:15px;
border:dotted 2px;
border-radius:2px;
padding:10px;
color:maroon
}

/*Para tener la pestaña de posteo abierta en celular*/
#newPostFieldset form {
display:block
}

/*Mejorar firma de DT (Gracias /404/)*/
.labelRole {
font-weight:700;
animation:rainbow 1.5s linear infinite;
padding-left:2px;
padding-top:2px;
text-shadow:1px 1px #452981
}

.labelRole:before {
content:"∞ ";
animation:rainbow 1.5s linear infinite;
padding-left:4px;
text-shadow:1px 1px #452981
}

.labelRole:after {
content:"(DT)";
animation:rainbow 1.5s linear infinite;
padding-left:4px;
text-shadow:1px 1px #452981
}

/*Tags personalizados (Gracias /404/) */
@keyframes shake {
0% {
transform:translate(1px,1px) rotate(0deg)
}

10% {
transform:translate(-1px,-2px) rotate(-1deg)
}

20% {
transform:translate(-3px) rotate(1deg)
}

30% {
transform:translate(3px,2px) rotate(0deg)
}

40% {
transform:translate(1px,-1px) rotate(1deg)
}

50% {
transform:translate(-1px,2px) rotate(-1deg)
}

60% {
transform:translate(-3px,1px) rotate(0deg)
}

70% {
transform:translate(3px,1px) rotate(-1deg)
}

80% {
transform:translate(-1px,-1px) rotate(1deg)
}

90% {
transform:translate(1px,2px) rotate(0deg)
}
}

span.boardText {
color:#fff;
font-weight:700;
font-size:1.5rem;
font-family:Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px #0000001a 0 5px #0000001a 1px 3px #0000004d 3px 5px #0003 5px 10px #00000040 10px 10px #0003 20px 20px #00000026
}

strong span.boardText {
animation:shake .5s infinite;
display:inline-block
}

strong .redText {
display:inline;
font-size:1.5rem;
font-weight:700;
animation:rainbold 1.5s linear infinite;
padding-left:4px
}

@keyframes rainbold {
0%,100% {
color:red;
text-shadow:-1px 0 0 orange,-2px 0 0 yellow,-3px 0 0 lime,-4px 0 0 green,-5px 0 0 blue,-6px 0 0 #f0f
}

14% {
color:orange;
text-shadow:-1px 0 0 yellow,-2px 0 0 lime,-3px 0 0 green,-4px 0 0 blue,-5px 0 0 magenta,-6px 0 0 red
}

28% {
color:#ff0;
text-shadow:-1px 0 0 lime,-2px 0 0 green,-3px 0 0 blue,-4px 0 0 magenta,-5px 0 0 red,-6px 0 0 orange
}

43% {
color:lime;
text-shadow:-1px 0 0 green,-2px 0 0 blue,-3px 0 0 magenta,-4px 0 0 red,-5px 0 0 orange,-6px 0 0 #ff0
}

57% {
color:green;
text-shadow:-1px 0 0 blue,-2px 0 0 magenta,-3px 0 0 red,-4px 0 0 orange,-5px 0 0 yellow,-6px 0 0 lime
}

71% {
color:blue;
text-shadow:-1px 0 0 magenta,-2px 0 0 red,-3px 0 0 orange,-4px 0 0 yellow,-5px 0 0 lime,-6px 0 0 green
}

86% {
color:#f0f;
text-shadow:-1px 0 0 red,-2px 0 0 orange,-3px 0 0 yellow,-4px 0 0 lime,-5px 0 0 green,-6px 0 0 blue
}
}