MediaWiki:Common.css

From Brawlhalla 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.
.custom-dropdown{display:inline-block;padding:1px 8px}.custom-dropdown > :first-child:after{background-image:url(data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D);border-color:var(--theme-accent-label-color) transparent transparent;border-style:solid;border-width:4px;content:"";display:inline-block;height:1px;margin-left:4px;margin-top:2px;position:relative;vertical-align:middle;width:1px}.custom-dropdown:hover{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-1px}.custom-dropdown ul{display:none;list-style:none outside none;margin:0;min-width:100%;position:absolute;top:auto;z-index:100}.custom-dropdown:hover ul,.custom-dropdown.wikia-menu-button:hover ul{display:block}.custom-dropdown li a{font-size:12px;line-height:14px}.WikiaArticle{overflow:visible}.custom-dropdown.wikia-menu-button{background-color:var(--theme-accent-color);border:1px solid var(--theme-accent-color);border-radius:4px;color:var(--theme-accent-label-color);cursor:pointer;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:12px;height:19px;line-height:20px;white-space:nowrap;list-style:none;margin:0;position:relative;text-align:left}.custom-dropdown.wikia-menu-button a{text-decoration:none}.custom-dropdown.wikia-menu-button ul{background:var(--theme-page-background-color);border:1px solid var(--theme-accent-color);box-shadow:1px 2px 12px 0 #000;display:none;left:-1px;margin:0;position:absolute;z-index:100}.custom-dropdown.wikia-menu-button ul a,.custom-dropdown.wikia-menu-button ul .mw-selflink{color:var(--theme-page-text-color);display:block;padding:9px 9px 7px}.custom-dropdown.wikia-menu-button ul a:hover{background-color:var(--theme-page-background-color--secondary);color:var(--theme-page-text-color)}.custom-dropdown.wikia-menu-button ul li{border-top:1px solid var(--theme-border-color);line-height:normal;margin:0}.custom-dropdown.wikia-menu-button ul li:first-child{border:0}.custom-dropdown.wikia-menu-button .WikiaMenuElement{margin:0}.custom-dropdown:active ul,.custom-dropdown.wikia-menu-button:active ul{display:block}

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

@media all and (max-width: 900px) {
	#main-grid { grid-template-columns: 100% !important; }
}

/***************************
/* Template example styles *
/***************************/
span.templateexmaple {
  font-family: fixed-width;
}

span.templateexample span.templatelink {
  font-weight: bold;
}

span.templateexample span.paramname {
}

span.templateexample span.paramvalue {
  color: #777777;
  font-style: italic;
}

/********************
/* Notice templates *
/********************/
.topNotice {
  border: 2px solid #ff9900;
  background: #ffffff;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
  overflow: auto;
}

.topNotice .heading {
  color: #222222;
  font-size: 132%;
  font-weight: bold;
  margin: 0 0 8px 0;
  padding: 0;
}

.topNotice.delete {
  border: 2px solid #ff0000;
}

.topNotice.move, .topnotice.merge, .topnotice.split {
  border: 2px solid #bb8800;
}

.topNotice.pagestub, .topNotice.imagerequest, .topNotice.nowalkthrough {
  border: 2px solid #008000;
}

/******************
/* Image licenses *
/******************/
div.imageLicense {
  border: 2px solid #ff6600;
  background: #ffffff;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
}

div.imageLicense.nolicense {
  border: 2px solid #ff0000;
}


/******************
/* General styles *
/******************/
.contentbox {
  border: 1px solid #aaaaaa;
  background: #eeeeee;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
  overflow: auto;
}

span.bullet {
  background: transparent no-repeat center 60%;
  width: 9px;
  font-size: 11px;
  vertical-align: baseline;
}

.dablink {
  padding: 2px 36px 10px 36px;
  font-style: italic;
}

span.ghost {
  color: #777777; /* For any text that appear fainter for some reason */
}

.columns {
  padding: 0;
  margin: 10px 0 0 0;
  overflow: hidden;
}

.columns .leftcol {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.columns .centercol {
  float: left;
  margin: 0;
  padding: 0;
}

.columns .rightcol {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

.infobox {
	width: 25em;
	background: #101010;
	border: 2px solid #044fae;
	padding: 3px;
	float: right;
	margin-left: 1em;
	margin-bottom: 0.5em;
}

.infobox-swapper-button {
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: background-color,color;
	transition-property: background-color, color;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

.infobox-swapper-button:hover {
	color: var(--theme-link-color);
	background-color: rgba(var(--theme-link-color--rgb),.15);
}

img[src$=".png?format=original"], img[src$=".webp"]{
  max-width:100%;
}

.page-content h2{
  overflow: hidden;
}

table {
	display: table;
	white-space: unset;
}

.front-page-wrapper {
	display: grid;
  grid-template-columns: 11fr 5fr;
  grid-template-rows: 1fr;
  gap: 0px 30px;
  grid-auto-flow: row;
  grid-template-areas:
    'Main Side';
  margin-top: 30px
}

.front-page-main {
	grid-area: Main;
}

.front-page-side {
	grid-area: Side;
}

.front-page-content-lists {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
	  "A B C D";
}

.apng a img {
	height: 100%;
	width: auto;
}

.apngw a img {
	height: auto;
	width: 100%;
}

@media only screen and (max-width: 1100px) {
	.front-page-wrapper {
		display: block;
	}
	
	.front-page-side {
		display: block;
		grid-area: unset;
	}
	
	.front-page-content-lists {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
		  "A B"
		  "C D";
	}
}

#p-logo a {
    background-size: contain;
}

td.epic-bg {
	background: url(https://brawlhalla.wiki.gg/images/0/06/Epic_BG_2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

td.mythic-bg {
	background: url(https://brawlhalla.wiki.gg/images/e/e7/Mythic_BG.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.clearfix-mobile { display:none; }

/* Brawl of the Week table formatting */
.botwtable{max-width:1000px;}
.botwtable td:first-child{text-align:center;}
.botwtable td:nth-child(4){white-space:nowrap;}

@media all and (max-width: 500px) {
	.clearfix-mobile { clear:both;display:block; }
}

img.bg-white {
	background: white;
}
img.bg-black {
	background: black;
}
img.bg-checker {
	background: url(/resources/src/mediawiki.action/images/checker.svg?ff513) repeat;
}