MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Font Imports Below */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');




/* COLORS */
/* ignore errors in this section, it's correct */
:root {
    --test: red;
    
    --primary-main: #dfdbc2;
    --primary-light1: #f6efd2;
    --primary-light2: #efeabe;
    --primary-dark1: #d5d0ba;
    --primary-dark2: #cacab0;
    --primary-dark3: #cfc9a4;
    --primary-dark4: #beb694;
    --primary-dark5: #807657;
    
    --secondary-main: #1f5d04;
    --secondary-dark1: #003715;
    --secondary-dark2: #2f523d;
    --secondary-light1: #337800;
    --secondary-light2: #439407;
    --secondary-semitransparent: #1f5d0420;
    
    --textcolor-main: #000000;
    --textcolor-secondary: #807657;
}

/* Dark Mode colors */
:root.client-darkmode {
	--test: cyan;
	
	--primary-main: #262d36;
	--primary-dark1: #1d232c;
	--primary-dark2: #142f30;
    --primary-dark4: #050d1a;
    --primary-dark5: #000000;
	
	--textcolor-main: #dfdbc2;
	--textcolor-secondary: #7a99a5;
}

.bg-test {
	background-color: var(--test);
}
.bg-primary-main {
	background-color: var(--primary-main);
}
.bg-primary-dark1 {
	background-color: var(--primary-dark1);
}







/* Fix the editor fonts misbehaving */
body {
	font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
}

body * {
	font-family: 'Work Sans';
}

/* make the wikitext syntax highlighting retain the font */
.CodeMirror-code {
    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
}

/* make the font bigger */
.wikiEditor-ui .ace_editor {
    font-size: 14px;
}

.wikiEditor-ui-text {
    font-size: 16px;
}

/* make then indent guides semi-transparent blue */
.ace-tm .ace_indent-guide {
    border-right: 1px solid #0000ff20;
    margin-right: -1px;
    background: none;
}

/* Font Classes */

.fatfont {
font-family: 'Luckiest Guy', cursive;
}

.amaticfont {
font-family: 'Amatic SC', cursive;
}




/*classes that show/hide content on pc and mobile depending on the screen size. If you use a very narrow window on pc, the mobile class will trigger.*/

@media only screen and (max-width: 850px) {
.onlypc {
display: none;
}
}

@media only screen and (min-width: 850px) {
.onlymobile {
display: none;
}
}

/* classes that show/hide content depending on dark/light mode */

:root:not(.client-darkmode) .onlydarkmode {
display: none;
}

.client-darkmode .onlylightmode {
display: none;
}





span.gradient-text {
    font-size: var(--pcsize);
}



@media only screen and (max-width: 850px) {
span.gradient-text {
    font-size: var(--mobilesize);
}
}



/* class that makes the image grayscale */
.grayscale img {
filter: grayscale(100%);
}







/* classes that resize images to % of component. They are used in many templates already */
.res-img img {
	width: 22%;
	height:auto;
}

.animations img {
	max-width:40%;
	height:auto;
}

.sto img {
	max-width:100%;
	height:auto;
}

.seven img {
	max-width:70%;
	height:auto;
}

.imgmax-w img {
    width: 100%;
    height: auto;
}

.imgmax-h img {
	height: 100%;
	width: auto;
}

/* workaround for the built in code that broke imgmax-h */
.mw-body .imgmax-h a img {
    height: 100% !important;
}












/*             ANIMATIONS             */


/* Fairy hover effect */
.hover {
transition: filter 0.2s;
filter: drop-shadow(0px 0px 0px #00000000);
}

.hover:hover {
	filter: drop-shadow(0px 0px 5px #fff8c4ff);
}



/* Fairy tilt animation */
@keyframes mymove {
  0%   {transform: rotate(7deg);}
  5%   {transform: rotate(10deg);}
  50%   {transform: rotate(10deg);}
  55% {transform: rotate(7deg);}
  100% {transform: rotate(7deg);}
}



/* main page image animation */
@keyframes openscroll {
 0% {transform: scaleY(0.0001);}
 50% {transform: scaleY(0.0001);}
 80% {transform: scaleY(1);}
 90% {transform: scaleY(0.95);}
 100% {transform: scaleY(1);}
}




/* image panel animation */
@keyframes ipanel {
 0% {transform: translate(-50%, 0) scale(0.0001);}
 50% {transform: translate(-50%, 0) scale(0.0001);}
 80% {transform: translate(-50%, 0) scale(1);}
 90% {transform: translate(-50%, 0) scale(0.95);}
 100% {transform: translate(-50%, 0) scale(1);}
}



/* fade-in animation */
@keyframes fade-in {
 0% {opacity: 0%;}
 100% {opacity: 100%;}
}




/* top alignment animation */
@keyframes scrollpos-top {
 0% {top: var(--scrolltop-from, -150%);}
 100% {top: var(--scrolltop-to, -70%);}
}


















/* rotate on hover class */
.tiltbutton {
  transition: transform 0.2s;
}

.tiltbutton:hover {
  transform: rotate(5deg);
}



/* rise and shadow on hover */

.shadowbutton {
  transition: transform 0.2s, filter 0.25s;
  filter: drop-shadow(0px 0px 5px #FFFFFF99);
}

.shadowbutton:hover {
  transform: translate(0px, 0px) scale(1.06);
  filter: drop-shadow(0px 0px 10px #FFFFFF99) brightness(110%);
}





/* facebook button */
.facebookbutton {
    padding: 0.6em;
    border-radius: 5px;
    background-color: #3b5998;
    font-weight: bold;
    color: white !important;
    background-image: url(https://static.miraheze.org/dragontamerwiki/d/dd/Facebook-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 2.6em;
    margin: 0.4em;
    display: inline-block;
    border-bottom: 3px solid #334d82;
}

.facebookbutton > a {
color: white !important;
}








/* box background class */
.bg-image {
background-image: url(https://static.miraheze.org/walkscapewiki/d/d4/BoxBackground.png);
background-size: var(--size, cover);
background-position: var(--position, center);
background-repeat: var(--repeat, no-repeat);
}



/*username colors!*/
/* Xena */
a[href$=":Xena"],
a[href$="/Xena"] {
    color: #578c00 !important;
}
/* Yoru */
a[href$=":Yoru"],
a[href$="/Yoru"] {
    color: #7148b8 !important;
}
/* Crysmon */
a[href$=":BoulderKuzon"],
a[href$="/BoulderKuzon"] {
    color: #943b3b !important;
}
/* Mae50ul */
a[href$=":Mae50ul"],
a[href$="/Mae50ul"] {
    color: #5b636b !important;
}
/* Neda */
a[href$=":Neda"],
a[href$="/Neda"] {
    color: #c54924 !important;
}
/* Wusoth */
a[href$=":Wusoth"],
a[href$="/Wusoth"] {
    color: #919b00 !important;
}




/*makes all page titles display higher than the overlay*/
#firstHeading { 
	position: relative;
	z-index: 3;
}

/* makes the image crop to the container */
.crop img {
-webkit-object-fit: cover
}

/* transparency gradient mask that makes things under it clickable */
.Mask {
-webkit-mask-image: linear-gradient(to top, #ffffff00 0%, #ffffff16, #ffffff90 100%);
mask-image: linear-gradient(to top, #ffffff00 0%, #ffffff16, #ffffff90 100%);
}

/* makes the content unselectable */
.unselectable {
pointer-events: none !important;
}

/* has a tileable checkerboard background */
.transparent {
background-image: url(https://static.miraheze.org/dragontamerwiki/8/8c/Transparent.png);
background-size: contain;
}


/* mobile and pc width/height classes */

.mobilepcwidth {
width: var(--pcwidth, 70%);
}

@media only screen and (max-width: 850px) {
.mobilepcwidth {
width: var(--mobilewidth, 93%);
}
}

.mobilepcheight {
height: var(--pcheight, auto);
}

@media only screen and (max-width: 850px) {
.mobilepcheight {
height: var(--mobileheight, auto);
}
}


/* float only on pc */

.pcfloat {
float: none;
}

@media only screen and (min-width: 850px) {
.pcfloat {
float: var(--pcfloat, right);
}
}





/* TOC classes */
.toclimit-1 li.toclevel-2 {
display: none;
}









/* Sleek Gallery Class */

/* img rounded corners and size correction */
.sleek .thumb img {
border-radius: 5px;
width: -webkit-fill-available;
height: auto;
}

/* take off the max width limit from nolines and traditional galleries */
ul.gallery.mw-gallery-nolines.sleek, ul.gallery.mw-gallery-traditional.sleek {
max-width: none !important;
}

/* disable left gallerybox margins, and force the width */
.sleek li.gallerybox {
margin-left: 0;
width: var(--sleekpcwidth, var(--sleekwidth)) !important;
vertical-align: var(--align, top);
}

@media only screen and (max-width: 850px) {
.sleek li.gallerybox {
margin-left: 0;
width: var(--sleekmobilewidth, var(--sleekwidth)) !important;
}
}

.sleek div {
width: auto !important;
}

/* gallerytext */
.sleek .gallerytext {
background: linear-gradient(180deg,#beb69480,transparent);
border-radius: 5px;
border: none;
}

.sleek .gallerytext p {
font-weight: bold;
color: #807657;
}

/* remove thumb border */
.sleek .thumb {
border-width: 0px !important;
}









/* class that centers content on mobile */

@media only screen and (max-width: 850px) {
.mobilecenter {
    text-align: -webkit-center;
}
}



























/* calendar CSS */

/* negate the max-width from Common.css */
.fc table {
    display: table;
    max-width: 100% !important;
}

.fc-button {
    filter: invert(0.7) sepia(1) saturate(1.6) contrast(1.8) hue-rotate(52deg);
}

.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover {
    border-color: #ada091;
}

.fc th {
    padding: 6px !important;
}

.fc-event, .fc-event a, .fc-event:hover, .ui-widget .fc-event {
    color: white !important;
}

.fc-event {
    padding: 5px;
    transition: 0.4s;
    filter: sepia(0.4) saturate(1.5);
}

.fc-event:hover {
    filter: brightness(1.1);
}

.event-title {
   text-shadow: 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242, 0 0 0.2em #424242;
   mix-blend-mode: luminosity;
    letter-spacing: .03em;
}

.event-subtle {
opacity: 0.6;
}

.fc-row > div:first-child {
    border-width: 0px;
}

.fc-sat {
    background-color: #008eff0d;
}

.fc-sun {
    background-color: #ff00000a;
}

th.fc-day-header {
    background-image: linear-gradient(180deg, #245105, #356812);
    color: #9bff90;
    border-color: #3d7217;
}

td.fc-head-container.fc-widget-header {
    border-color: #3d7217;
}

#eventcalendar-1 > .fc-view-container {
    background-image: linear-gradient(180deg, #3d7217, #af9678 20%);
    padding: 4px;
}

.fc-day-grid.fc-unselectable {
    background-image: linear-gradient(180deg, #d5d0ba, #d5d0baef);
}

.fc-today {
    background: #f5f2df !important;
    font-weight: 900;
    color: green;
}

.fc-today.fc-sat {
    background: #d3e7ff !important;
}

.fc-today.fc-sun {
    background: #ffe1d3 !important;
}

div.fc {
    max-width: 1000px;
}

@media only screen and (max-width: 850px) {
div.fc {
font-size: 60%;
}
}






/* Discussion bubble frames! */

/* all bubbles */
article.flow-post-content.mw-parser-output {
    border: 0px solid transparent;
    border-image-source: url(https://static.miraheze.org/dragontamerwiki/8/81/Tiger_bubble-slice.png);
    border-image-repeat: stretch;
    border-image-slice: 60 49 17 36 fill;
    border-image-width: 60px 49px 17px 36px;
    padding: 30px 25px 10px 30px;
    width: fit-content;
}

/* overwrite main post bubbles to Raging Fire frame */
div.flow-post:nth-of-type(2) article.flow-post-content.mw-parser-output {
    border-image-source: url(https://static.miraheze.org/dragontamerwiki/f/f6/Raging_Fire_bubble-slice.png);
}


/* discussion pre */
.flow-post-content pre {
    background-color: #00000020;
    border-color: #00000040;
}