MediaWiki:Vector.css

From Eiyuden Chronicle 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.
/* All CSS here will be loaded for users of the Vector skin */
/*********************
* Main page layout   *
* [[Eiyuden Chronicle Wiki]]   *
**********************/

.responsive-image {
	max-width:100%;
	height:auto;
}

/* Big welcome banner */
#mp-banner-container {
	position:sticky;
	border:1px solid var(--wiki-content-border-color);
	border-radius:5px;
	overflow:hidden;
}

#mp-welcome {
	position:relative;
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	justify-content:center;
	height:100%;
	width:100%;
	filter:drop-shadow(0px 2px 5px #ff9898);
	font-family:Marcellus SC;
	font-size: 200%;
	color:#fff;
	z-index:2;
	padding:1em 0;
	box-sizing:border-box;
}

#mp-title {
	text-align:center;
	max-width:70%;
}

#mp-banner {
	position:relative;
	width:100%;
	height:100%;
	top:-100%;
	filter:blur(5px) brightness(50%);
	z-index:1;
	background:url(https://eiyuden.wiki.gg/images/6/6f/MainPageBanner.jpg); /* [[File:MainPageBanner.jpg]] */
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
}

#mp-banner img {
	max-width:100%;
	height:auto;
}

/* end big welcome banner */

#mp-banner-container {grid-area:banner;}
#mp-about-box {grid-area:about;}
#mp-order-box {grid-area:order;}
#mp-wiki-box {grid-area:wiki;}
#mp-comm-box {grid-area:comm;}
#mp-rising-box {grid-area:rising;}
#mp-risingc-box {grid-area:risingc;}

#mp-container {
	display:grid;
	grid-template-areas:"banner" "about" "order" "wiki" "comm" "rising" "risingc";
	grid-template-columns:100%;
	gap:15px;
}

@media screen and (min-width:990px) {
	#mp-container {
		grid-template-areas:"banner banner" "about about" "order order" "wiki wiki" "comm comm" "rising rising" "risingc risingc";
		grid-template-columns:1fr 1fr;
	}
}

@media screen and (min-width:1350px) {
	#mp-container {
		grid-template-areas:"banner banner banner" "about about order" "wiki wiki comm" "rising rising risingc";
		grid-template-columns:1fr 1fr 1fr;
	}
}

.mp-box { 
	display:flex;
	flex-flow:column nowrap;
	width: calc(100% - 2px);
	box-sizing: border-box;
	background: var(--wiki-content-background-color);
	padding:5px;
	border-image-source: var(--theme-main-border, url(/images/c/c5/InfoboxBorder.webp));
    border-image-slice: 52;
    border-image-width: 35px;
    border-image-repeat: repeat;
    border-width: unset;
    border-style: solid;
    border-radius: 0 0 30px 30px;
}

.mp-body {
	height: 100%;
	display: flex;
	padding:0.5em;
	flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
}

.mp-box.has-floating-image {
	display:block;
}

.mp-box.has-floating-image .mp-body {
	height:unset;
	display:block;
}

.mp-header-top {
  background: url(/images/d/d5/Header_Top.png) center no-repeat;
  background-position-y: 0;
  padding-top: 15px;
  width: auto;
}

.mp-heading {
	text-align:center;
	font-size: 200%;
	font-family:Marcellus SC;
	color:var(--wiki-heading-color);
	padding: 0 0 5px 0;
	width:auto;
}

.mp-header-bottom {
  background: url(/images/a/a2/Header_Bottom.png) center no-repeat;
  background-position-y: 0;
  padding-bottom: 15px;
  width: auto;
}

.mp-links > ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin: 2px;
	gap:10px;
}

.mp-links > ul > li {
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	text-align: center;
	box-sizing:border-box;
	flex: max(calc(50% - 5px), 5em) 1 1;
	border:2px solid #5a595a;
	background:url(https://eiyuden.wiki.gg/images/0/05/ButtonHover.webp); /* [[File:ButtonHover.webp]] */
	opacity: 0.8;
	background-color:#000;
	background-size:contain;
	background-repeat:repeat-x;
	background-position:top center;
	border-radius:15px;
	font-size:24px;
	color: #fff;
	transition:0.1s ease-in;
}

.mp-links > ul > li:hover {
	border:2px solid #32679b;
	box-shadow: 0 0 10px 5px #48abe0;
	background:url(https://eiyuden.wiki.gg/images/0/05/ButtonHover.webp); /* [[File:ButtonHover.webp]] */
	opacity: 1.0;
	background-size:contain;
	background-repeat:repeat-x;
	background-position:top center;
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - 5px), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - 5px), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc(33% - 5px), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - 5px), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - 5px), 5em) 1 1;}

.mp-links > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: left;
	height:100%;
	flex:1 1 auto;
	box-sizing:border-box;
	padding:5px;
}

.mp-links > ul > li > a:first-child {
	justify-content:right;
}

.mp-links > ul > li > a:only-child {
	justify-content:center;
}

.mp-links > ul > li > a:not(:first-child) {
	padding-left:5px;
}

.mp-links.stretch,
.mp-links.stretch > ul {
	height:100%;
}

/***********************
* End main page layout *
************************/
Retrieved from "https://eiyuden.wiki.gg/index.php?title=MediaWiki:Vector.css&oldid=8287"