MediaWiki:Mobile.css

CSS and Javascript changes must comply with the wiki design rules.

---

Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Clear the cache in Tools → Preferences

/* CSS placed here will affect users of the mobile site */


/* Main page */

body.page-Main_Page h1.firstHeading {
	display: none;
}

.mp-portal-row {
	display: flex;
	flex-flow: row nowrap;
	margin: 0;
	align-items: self-start;
	justify-content: space-around;
	text-align: center;
	font-weight: bold;
	max-width: 100%;
}

.mp-portal-row div {
	flex: 0 1 auto;
	margin: 4px;
}

.mp-portal-icon a img {
	width: 100%;
	min-width: 50px;
	max-width: 150px;
	height: auto;
}

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

.mp-menu-item {
	text-align: left;
	width: 195px;
	display: inline-block;
	margin: 15px 25px;
	vertical-align: top;
}

.mp-menu-item-header {
	border-bottom: 1px solid #505050;
	font-size: 150%;
	font-variant: small-caps;
	color: black;
	padding-bottom: 5px;
}

.mp-menu-item-body {
	column-count: 1;
	margin-top: 5px;
}

.mp-menu-item-body>ul {
	margin-top: 0;
}

.mp-news-container {
	width: 100%;
    max-height:250px;
    overflow:hidden;
    text-overflow: ellipsis;
    content: "";
    position:relative;
}

.mp-news-container:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(transparent 200px, white);
    pointer-events: none;
}

.mp-container-small,
.mp-container-large {
	width: 100%;
}

/* Panel */

#bodyContent .panel {
    background-color: #fff;
}

.panel {
	border: 1px solid #528e52;
	margin: 2px;
}

.panel-heading {
	position: relative;
	text-align: center;
	font-weight: bold;
	color: #1f4c1f;
	margin: 5px;
	font-size: 1.5em;
	font-variant-caps: small-caps;
}

.panel-body {
	position: relative;
    padding: 5px 15px;;
}



/* mw ui button tweaks */

.mw-ui-button-group {
	display: inline-flex;
}
.mw-ui-button-group > * {
	min-width: 46px;
	float: none;
}

.mw-ui-button-group > *:last-child {
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mw-ui-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* MISC */

.character-grid-entry {
    width: 150px;
    text-align: center;
    border: 1px solid green;
    padding: 10px 5px;
    margin: 12px;
    transition: opacity 1s linear;
}

.character-grid-entry.hidden {
	position: absolute;
	opacity: 0;
}