MediaWiki:Common.css
From The Walkscape Walkthrough
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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');
@import url("https://walkscape.miraheze.org/wiki/MediaWiki:Leaflet.css")
/* 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 1px 1px #00000000);
}
.shadowbutton:hover {
transform: translate(0px, -6px) scale(1.06);
filter: drop-shadow(0px 10px 10px #00000090) 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;
}