/* Purple /v/ theme w/ animated grid */
/* Based on /sm/ v2.5.1 */

@import "./syntax/ascetic.css";
:root {
  --background-color: #aaa2d8;
  --background-gradient: #e4e4f9;
  --contrast-color: #c9c4ea;
  --menu-color: #e4e4f9;
  --background-highlight-color: #a590ce;
  --horizon-sep-color: #b7c5d9; /* CHANGED from #a590ce to #b7c5d9 */

  --marked-color: #b8b1e3;
  --marked-border-color: #b8b1e3;
  --marked-text-color: var(--text-color);

  --board-title-color: #452981;
  --index-text-color: #000333;

  --navbar-text-color: #34345C;
  --subject-color: #090910;
  --role-color: #a10705;

  --thread-navbar-background: transparent; /* CHANGED from #7239b3 to transparent */
  --thread-navbar-color: #743944;
  
   /* v  8chan logo   v */
  --logo-image: url("/.static/logo/logo_hispa_pink.png");
  
   /* v  Home Page Colors   v */
  --fieldsetlegend-background-color: white; /* #FFE3E2 */
  --fieldsetlegend-border-color: #F58EA8; /* #FFE3E2 */
  --fieldsetlegend-text-color: white; /* #FFE3E2 */
  
  /* v  Catalog Colors   v */
  --catalogCell-background-color: #FFFFFF; /* #FFE3E2 */
  --catalogCell-border-color: #F5F5F5; /* #FFE3E2 */
  --catalogCell-text-color: white; /* #FFE3E2 */
      
   /* v  Nav Colors   v */
  --nav-background-color: linear-gradient(to right, #FF9899, #FEDDE4); /* #FFE3E2 */
  --nav-border-color: #BD5A88; /* #FFE3E2 */
  --nav-text-color: #541D2F; /* #FFE3E2 */
  
   /* v   Post Field Colors   v */
  --newPostFieldset-color: rgba(255, 227, 226, 0.6); /* #FFE3E2 */
    
   /* v   Post Form Colors   v */
   --PostingForm-background-color: #AF153C; /* #FFE3E2 */
   --PostingForm-border-color: #935565; /* #FFE3E2 */
   --PostingForm-text-color: white; /* #FFE3E2 */
  
   /* v   Post Tags Colors   v */
  --doomtext-color: #9E2517;  /* <  RIP & TEAR  */
  --greentext-color: #39740E;  /* <  >greentext  */
  --pinktext-color: #921590;  /* <  <pinktext  */
  --redtext-color: #A31B1F;  /* <  SRZ BIZNIZ  */

   /* v  OP Post Colors   v */
  --innerOP-background-color: rgba(255, 255, 255, 0.6); /* #FFE3E2 */
  --innerOP-border-color: rgba(255, 255, 255, 0.6); /* #FFE3E2 */
  --innerOP-text-color: #9E2517;  /* <  RIP & TEAR  */
  --subject-color: #950895;  /* <  RIP & TEAR  */

   /* v  Non-OP Post Colors   v */
  --innerPost-background-color: white;  /* <  RIP & TEAR  */
  --innerPost-background-marked-color: #FFE3E2;  /* <  RIP & TEAR  */
  --innerPost-border-color: ghostwhite;  /* <  RIP & TEAR  */
  --innerPost-marked-border-color: #F1ADBA;  /* <  RIP & TEAR  */
  --innerPost-text-color: #9E2517;  /* <  RIP & TEAR  */
  
   /* v   Reload Button Colors   v */
 --reload-button-bg-color: #ecebe5;
 --reload-button-border-color: #8f8f9d;
 --reload-button-font-color: #000000;
 --reload-button-hover-bg-color: #d8d0c4;
 --reload-button-hover-border-color: var(--reload-button-border-color);
 --reload-button-hover-font-color: var(--reload-button-font-color);
 --reload-button-press-bg-color: #9C9488;
 --reload-button-press-border-color: var(--reload-button-border-color);
 --reload-button-press-font-color: white;
  
   /* v   Report Menu Button Colors   v */
  --report-menu-background-color: #FFE3E2;
  
   /* v   Oekai Button Colors   v */
  --oekaki-button-color: #EA98B9;
  --oekaki-button-boxshadow-color: #D698B1;
  --oekaki-button-active-color: #C198A8;
  --oekaki-button-focus-color: #FED7E6;
  --oekaki-button-icon-color: white;
  --oekaki-button-icon-active-color: whitesmoke;
  
   /* v   Link Colors   v */
   --link-color: #683143;   /* <  Hyperlinks  */
   --link-hover-color: #000000;   /* <  Hyperlinks hovering  */
   --link-press-color: #683143;   /* <  Hyperlinks clicked on  */
  
   --a-link-color: #683143;   /* <  Hyperlinks  */
   --a-link-hover-color: #000000;   /* <  Hyperlinks hovering  */
   --a-link-press-color: #683143;   /* <  Hyperlinks clicked on  */

   /* v   Misc. Colors   v */
  --noEmailName-color: #650A00;  /* <  'Anonymous' in posts  */
  --span-labelCreated-color: #000000;  /* <  Date & Time in posts  */
  --hr-border-color: #A6516E;  /* <  Date & Time in posts  */
  --labelName-color: #800A32;  /* <  'Anonymous' in posts  */
  --labelDescription-color: #800A32;  /* <  'Anonymous' in posts  */
  --panelMessage-color: #E12188;  /* <  'Anonymous' in posts  */
  --navfade-background-color: transparent;  /* <  'Anonymous' in posts  */
  --board-title-color: #A6516E;  /* <  'Anonymous' in posts  */
}


/* --------------- ADDITIONS TO YOTSUBA P START HERE --------------- */

nav.navHeader > .nav-fade {
  background-image: linear-gradient(to right, #0000, var(--navfade-background-color));
  border-right: 0.5em solid var(--navfade-background-color);
}

.innerUtility.top a {
  color: var(--thread-navbar-color);
}

div p#labelName{
    color: var(--labelName-color);
}

p#labelDescription{
    color: var(--labelDescription-color);
}

div#quick-reply.floatingMenu.focused form table tbody tr th.handle{
  border: 1px solid var(--PostingForm-border-color);
    background: var(--PostingForm-background-color);
    color: var(--PostingForm-text-color);
}

div#dropzoneQr.dropzone {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
div#dropzoneQr.dropzone:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-hover-font-color);
}
div#dropzoneQr.dropzone:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-press-font-color);
}

.oekaki-btn {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13)), radial-gradient(90% 7% at 50% 8%, rgba(255, 255, 255, 0.47) 25%, rgba(255, 255, 255, 0) 50%), var(--oekaki-button-color);
  border: 0;
  border-radius: 0.375em;
  box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.47), 0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27), 0 0.1em 0 0.1em rgba(255, 255, 255, 0.27), -0.2em 0 0.2em var( --oekaki-button-boxshadow-color) inset, 0 0.2em 0.2em rgba(255, 255, 255, 0.27) inset, 0.2em 0 0.2em rgba(255, 255, 255, 0.27) inset, 0 -0.2em 0.2em var( --oekaki-button-boxshadow-color) inset;
  color: var(--oekaki-button-icon-color);
  cursor: pointer;
  font-size: 16px;
  margin: 0 auto;
  padding: 0.75em 1em;
  text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.47);
  transition-property: box-shadow;
  -webkit-tap-highlight-color: transparent;
}
.oekaki-btn, .oekaki-btn span {
  display: block;
  transition-duration: 0.1s;
  transition-timing-function: linear;
}
.oekaki-btn:focus, .oekaki-btn span:focus {
  outline: none;
}
.oekaki-btn span {
  transition-property: transform;
  will-change: transform;
}
.oekaki-btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.47), 0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27), 0 0.1em 0 0.1em rgba(255, 255, 255, 0.27), -0.2em 0 0.2em var(--oekaki-button-active-color) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.27) inset, 0.2em 0 0.2em rgba(0, 0, 0, 0.27) inset, 0 -0.2em 0.2em var(--oekaki-button-active-color) inset;
  color: var(--oekaki-button-icon-active-color);
}
.oekaki-btn:active span {
  transform: scale(0.95);
}
.oekaki-btn:focus {
  color: var(--oekaki-button-focus-color);
  text-shadow: 0 0 0.2em rgba(157, 196, 255, 0.47);
}

.floatingList, .floatingMenu, .modalForm {
  background: var(--report-menu-background-color);
}

.splitField > * {
  background: white;
}

#indexWrapper > fieldset {
  background: transparent;
  border: transparent;
}

fieldset legend {
  background: var(--PostingForm-background-color);
  color: var(--PostingForm-text-color);
  border: 1px solid var(--PostingForm-border-color);
}

.titleFieldset legend {
	margin-left: -17px;
	padding-right: 28px;
}

nav.navHeader {
  color: var(--nav-text-color);
  background: var(--nav-background-color);
  border-bottom: 1px solid var(--nav-border-color);
}

#newPostFieldset legend {
  border: 1px solid var(--PostingForm-border-color);
    background: var(--PostingForm-background-color);
    color: var(--PostingForm-text-color);
}

#postingForm th, .modalTableBody th {
  background: var(--PostingForm-background-color);
  color: var(--PostingForm-text-color);
  border: 1px double var(--PostingForm-border-color);
}

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

body {
background-image: url("/.media/fe7fd26a1f0466ce4041844cf8b26a06ca4712b3768d81a7afffa2ce48d4d727.png");
background-color: #FCDFEB;
background-repeat: repeat-x;
  background-attachment: fixed;
      -webkit-animation: scrolling 15s linear infinite;
  -moz-animation: scrolling 15s linear infinite;
  -o-animation: scrolling 15s linear infinite;
  animation: scrolling 15s  linear infinite;
}

/* Below are directions for the moving background. */
@-webkit-keyframes scrolling {
  from {
    background-position: top right;
  }
  to {
    background-position: top left;
  }
}

hr {
    border: 1px dashed var(--hr-border-color);
}

div.innerOP {
    background: var(--innerOP-background-color); /* E4E4F9 */
    border: 1px solid var(--innerOP-border-color);
    border-radius: 6px;
}

.innerPost,
.inlineQuote .innerPost {
    background: var(--innerPost-background-color); /* #CEC9EC */
    border: 1px solid var(--innerPost-border-color);
    border-radius: 6px;
}

.postCell:target .innerPost,
.markedPost {
    background: var(--innerPost-background-marked-color); /* #B8B1E3 */
    border-color: var(--innerPost-marked-border-color);
    color: var(--marked-text-color);
}

#newPostFieldset {
    background: rgba(249, 228, 228, 0.6); /* E4E4F9 */
    border: 1px dashed var(--border-color);
    border-radius: 6px;
}

#sideCatalogDiv {
    background: rgba(228, 228, 249, 0.6); /* E4E4F9 */
    border: 1px black;
    border-style: none none none solid;
    padding: 0.25em;
}

.linkThumb img {
    border: 1px solid var(--marked-color);
    border-radius: 6px;
}

.catalogCell {
    background: var(--catalogCell-background-color); /* #CEC9EC */
    border: 1px solid var(--catalogCell-border-color);
    border-radius: 6px;
}

#settingsMenu,
#watchedMenu,
#quick-reply {
    border-radius: 6px;
    padding: 0.25em;
    background: rgba(249, 228, 228, 0.6);
}

.sideCatalogMarkedCell,
.sideCatalogCell {
    border: 1px black;
}

.imgFlag {
  max-width: none;
  max-height: 24px;
}

/* --------------- ADDITIONS TO YOTSUBA P END HERE --------------- */


#bannerImage {
    max-width: 100%;
    border: 1px solid var(--marked-color);
    border-radius: 6px;
}

/* CHANGE: borders re-enabled, file transparency removed */
.uploadCell img:not(.imgExpanded) {
    max-width: 225px;
    max-height: 225px;
    object-fit: contain;
    border: 1px solid var(--contrast-color);
    border-radius: 6px;
}

#boardContentLinks.innerUtility,
div#actionsForm,
#dynamicAnnouncement table,
.boardLinks,
.threadBottom,
span#labelAutoIndicator,
div#footer,
.boardHeader p { /* CHANGE: added a lot of things on top of ".boardHeader p" */
  font-weight: bold;
}

.quoteLink {
  color: #a10705;
}

#panelMessage {
  color: var(--panelMessage-color);
}

.noEmailName,
.noEmailName:hover {
  color: var(--noEmailName-color);
}

.greenText {
  color: var(--greentext-color);
}

.pinkText {
  color: var(--pinktext-color);
}

div#dropzone.dropzone {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
div#dropzone.dropzone:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-hover-font-color);
}
div#dropzone.dropzone:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-press-font-color);
}
input[type="submit"] {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
input[type="submit"]:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-hover-border-color);
 color:var(--reload-button-hover-font-color);
}
input[type="submit"]:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-press-border-color);
 color:var(--reload-button-press-font-color);
}
input[value="Cancel"] {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
input[value="Cancel"]:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 
 color:var(--reload-button-hover-font-color);
}
input[value="Cancel"]:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 color:var(--reload-button-press-font-color);
}
input[value="Reload"] {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
input[value="Reload"]:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 color:var(--reload-button-hover-font-color);
}
input[value="Reload"]:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 color:var(--reload-button-press-font-color);
}
input#refreshButton {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
input#refreshButton:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 color:var(--reload-button-hover-font-color);
}
input#refreshButton:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 color:var(--reload-button-press-font-color);
}
button {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
button:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 color:var(--reload-button-hover-font-color);
}
button:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 
 color:var(--reload-button-press-font-color);
}
a,
.glowOnHover {
 color: var(--a-link-color);
 text-shadow: none;
}
a:hover,
.glowOnHover:hover {
 color: var(--a-link-hover-color);
 text-shadow: 1px 0px 20px var(--text-shadow-color);
}
a:active,
.glowOnHover:active {
 color: var(--a-link-press-color);
 text-shadow: 1px 0px 20px var(--text-shadow-press-color);
}