MediaWiki:Common.css

From Super Snail Wiki
Jump to navigation Jump to search

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 
	This means everything on the website btw 
	Please talk about changing this before changing it */
/* 
Theme Styling 
*/
.theme-light,
:root {
	--background-img: url(images/a/a9/Site-Background.jpg);
	--background-color: #e3d3ba;
	
	--content-background-color: rgba(240, 233, 215, .9);
	--content-text-color: #694D5D;
	--content-border-color: #756c53;
	--content-heading-color: #F3AE58;

    --sidebar-background-color: rgba(240, 233, 215, .9);
	--sidebar-heading-color: #694D5D;
	--sidebar-link-color: #ffffff;
	
	--wiki-watch-icon:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAZCAYAAADe1WXtAAAABmJLR0QA/wDKAEWpqdp6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QsBDQAresRe4AAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABq0lEQVRIx+3Vu2tUURTF4W+ckGgkggQlgkVMEay0jA8wCD4gNoKgYCEWIv4Dgr3Y2JnCwlrBpLJQEKbwVQmCDywkRBAVEYQ0Go0aWDYnehlnSIQrNm7YcLlrnx9n373OPY0k6o5V/kL8U2gDa+uG7sQ1DNUJPYxDBV4LdD32YKaAG3VAt2MQV7BrJZ9gJdAJvEarDGvHcgt6Ks/DWNem92M/pkr7T3EELzuw5vC2Ct2IaWzFAr5XihdwH4u4idO4XNE3YFPRTmBREkn6k5xLMpfkTpIDSbaV3JKkUep6kgxUcneSh0leJTm5VLcElaSZZCLJkyStJKMVrT0bSfYleVE2MVbVOy0YTTKV5HGS8Q56M8mZJLNJJpMMtdd028lAAd9I0temjSR5k+R8kt5O67tZ6gvW4B2+tp39D+X9PL79iU+Hi+lbGMBZ3MJRfMa9YrXVy/m0GmPFVu9xCeO4i4sYKX49hs2YXQm0gb3owyQ+4Tge4SAu4GPln/AbtNOQBpM8TzLfZbpL7lhMcrXi4Z/Zrf3beIbrHYYxg1N4gF40y2n71er/i6/2+AHyp4jy6N4f1wAAAABJRU5ErkJggg==);
    --wiki-unwatch-icon:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAZCAYAAADe1WXtAAAABmJLR0QA/wDKAEWpqdp6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QsBDQARvMiHUgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABW0lEQVRIx+3VsUoeQRSG4WdXI5JGISAGLBRtVDBFUAhaCXaKpjFVUCxsvAQbscktpAm5DCWthcSQJoWIhSDYJARsFESja3N+MiyrrrDBJh8MnLPDvDtnzrezWbE3o2nl/oGeFJqjp2noKvbxqmnoC6w0BR3AcMRv66ypA11AR8QvMdYE9H0St5XySrUn8RR6S/PdGEUWeYF32K1gHeMbZPFFjeA7OmNhWSn0Jka6+xw/0Y+LVvm/sJMAs9JI4W14lowsXrKNy/RMf2MWm7jCdU2rFTgPyy23KkgbdYkNzMXOr0tlpmodwQEm8emh7n/B6wDfpQxfMYEfdS11Gk3L7gFf4OwxPp1EVwladsV4WK42dLHCRicRFzH3PI6pFjTHTCwsosw1DOED/sTzHEt1oYPoi/gIb/Ax3LGO+bAgTFcx2u8o/zC6ulrRjK24Vz9H3hHV/LXG/x9f47oF4j9I7hdXhi4AAAAASUVORK5CYII=);
    --wiki-more-icon:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAeCAYAAADD0FVVAAAABmJLR0QA/wDKAEWpqdp6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QsBDQACOHbGjAAAAElJREFUSMdj/H/KlYHagImBBmDU0FFDRw0d9Iay4JH7T4R+RlJdykiOgcR4n5EcC5nI8CIjtSKKkVgDSY19xtHEP2roqKHDxlAAZ4sDVYqTz3kAAAAASUVORK5CYII=);
/*Colouring for relics, organs, etc*/
	--green-text: #03bd00;
	--blue-text: #00aacc;
	--purple-text: #bf4d9e;
	--orange-text: #d98000;
	--red-text: #f66;
	--yellow-text: #fcfc55;
	--white-bg: #9c9c9c;
	--green-bg: #7de87f;
	--blue-bg: #7de8e6;
	--purple-bg: #f3b5e1;
	--orange-bg: #ffb066;
	--red-bg: #f66;
	--yellow-bg: #e8e47d;
}
/*end theme styling
functionality until I know how to use multiple css files lmao*/
/*background items*/
body {
	background: var(--background-img) top center/cover no-repeat fixed;
	background-color: var(--background-color);
}
/* main content */
.mw-body {
	background-color: var(--content-background-color);
	border: var(--content-border-color);
	color: var(--content-text-color);
}
.mw-footer {
	background-color: var(--content-background-color);
	border: var(--content-border-color);
	color: var(--content-text-color);
}
/* Side Bar CSS */
.vector-menu {
	background-color: var(--sidebar-background-color);
	--sidebar-link-color);
}
.vector-menu-heading {
	color: var(--sidebar-heading-color);
}
.vector-menu-content a {
	color: var(--sidebar-link-color);
}





/*	Wiki-Table	*/

.wikitable {
    background: var(--background-color);
    border-color: var(--content-border-color);
    color: var(--content-text-color);
}

.wikitable th,
.wikitable tr th,
.wikitable > tr > th,
.wikitable > * > tr > th{
    background: #f6f6f6;
    color:var(--wiki-table-header-text-color);
    border: 1px solid var(--content-border-color);
}

.wikitable td,
.wikitable tr td,
.wikitable > tr > td,
.wikitable > * > tr > td {
    border: 1px solid var(--content-border-color);
}
/* tabs for wiki-table (for right now I am at work) */
.tabber__tab {
	text-decoration: underline;
}










/*	Main-Displays	*/
.fp-main {
    display: grid;
    grid-gap: 10px;
    grid-template-areas: "a"
                         "b"
                         "c"
                         "d"
                         "e"
                         "f"
                         "g"
                         "h";
    grid-template-columns: 1fr;
}
@media screen and (min-width:1290px) {
    .fp-main {
        grid-template-areas: "a a c"
                             "b b c"
                             "d e g"
                             "d e h"
                             "f f h";
        grid-template-columns: 1fr 1fr 25%;
    }
}
@media screen and (min-width:1887px) {
    .fp-main {
        grid-template-areas: "a a c"
                             "b b g"
                             "d e h"
                             "f f f";
    }
}
@media screen and (min-width:2100px) {
    .fp-main {
        grid-template-areas: "a a c"
                             "b b g"
                             "d e h"
                             "f f h";
    }
}
@media screen and (max-width:1069px) {
    #fp-file {
        display: none;
    }
}
.fp-main .fp-header {
    display: grid;
    grid-template-areas: "aa" "ab";
    grid-template-columns: 1fr;
    height: 100%;
}
.fp-main .fp-header #fp-file {
    grid-area: aa;
    margin-bottom: auto;
    margin-top: auto;
}
.fp-main .fp-header #fp-file img {
    height: auto;
    max-width: 200px;
}
@media screen and (min-width:1070px) {
    .fp-main .fp-header {
        grid-template-areas: "aa ab";
        grid-template-columns: 1fr 3fr;
    }
    .fp-main .fp-header #fp-file img {
        max-width: 100%;
        height: auto;
    }
}
.fp-main .fp-header #fp-text {
    grid-area: ab;
    margin: auto 0;
    text-align: center;
}

/* Sections */
.border-menu {
	border: 5px solid var(--content-heading-color);
	border-radius: 15px;
	color: var(--content-text-color);
	margin: 20px 5px 0px 5px;
	padding: 20px 5px 5px 5px;
	position: relative;
	text-align: center;
}
.border-menu a,
.border-menu a:visited,
.border-menu a.external,
.border-menu a.external:visited {
	color: #1d0f00;
	font-weight: 600;
	text-shadow: none;
}
.border-menu a:hover {
	color: #744818;
}

/* Section title */
.menu-title {
	background-color: var(--content-heading-color);
	border-radius: 10px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 800;
	height: 35px;
	left: -10px;
	line-height: 1.9;
	padding: 0px 10px;
	position: absolute;
	text-align: left;
	top: -20px;
	width: auto;
}
/*end functionality*/
/* Discord */


div.discordbutton {
	text-align:center;
}
/* end discord */

/*birb says this is incredibly important plz don't touch until he tests and says so <3 */
#mw-page-base {
background-color: transparent;
background-size: 0%;
}

.vector-search-box form {
margin: 0;
}

/* Aside */
aside.callout {
    border-left: 4px solid var(--white-bg);
    display: block;
    padding-left: 2em;
}
/* end Aside */

/* Table alignment */
.defaultleft { text-align:left; }
.defaultcenter { text-align:center; }
.defaultright { text-align:right; }

.col1left td:nth-child(1),
.col2left td:nth-child(2),
.col3left td:nth-child(3),
.col4left td:nth-child(4),
.col5left td:nth-child(5),
.col6left td:nth-child(6),
.col7left td:nth-child(7),
.col8left td:nth-child(8),
.col9left td:nth-child(9),
.col10left td:nth-child(10) { text-align:left; }

.col1center td:nth-child(1),
.col2center td:nth-child(2),
.col3center td:nth-child(3),
.col4center td:nth-child(4),
.col5center td:nth-child(5),
.col6center td:nth-child(6),
.col7center td:nth-child(7),
.col8center td:nth-child(8),
.col9center td:nth-child(9),
.col10center td:nth-child(10) { text-align:center; }

.col1right td:nth-child(1),
.col2right td:nth-child(2),
.col3right td:nth-child(3),
.col4right td:nth-child(4),
.col5right td:nth-child(5),
.col6right td:nth-child(6),
.col7right td:nth-child(7),
.col8right td:nth-child(8),
.col9right td:nth-child(9),
.col10right td:nth-child(10) { text-align:right; }