MediaWiki:Common.css: Difference between revisions

Revision as of 13:01, 3 June 2023

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

/******************

MOBILE RESPONSIVE

******************/
/* common breakpoints:
mobile: 320px - 720px (max-width: 720px)
tablet: 720px - 1000px (min-width: 720px, max-width: 1000px)
desktop: 1000px; wide desktop: 1200px; extrawide desktop: 2000px; (min-width: 1000px)
*/

/* desktop */
@media screen and (min-width: 720px) {
	.mobileresponsive, .mobileblock, .mobiletable, .mobilecell {
		display: none;
	}
	.desktopresponsive, .desktopblock {
		display: block;
	}
	.desktoptable {
		display: table;
	}
	.desktopgrid {
		display: grid;
	}
	
	ul {
		margin: 0.1em 0 0 1.2em;
	}
	.eventtable {
		text-align: right;
		margin-right: 10%;
		margin-top: -0.5em;
	}
	.eventdiv {
		margin:0;
		margin-bottom: 1.5em;
	}
}
.home-category > tbody > tr > td {
	padding: 0.7em 1em;
}
.home-section > tbody > tr > td {
	padding: 0.1em 0.3em;
}
.home-section .noicon {
	padding: 0.2em 0.3em;
}

/* mobile */
@media screen and (max-width: 720px) {
	.desktopresponsive, .desktopblock, .desktoptable, .desktopgrid, .desktopcell {
		display: none;
	}
	.mobileresponsive, .mobileblock {
		display: block;
	}
	.mobiletable {
		display: table;
	}
	.mobilecell {
		display: table-cell;
	}

	ul {
		margin: 0.2em 0.5em !important;
		padding-left: 0.4em;
		line-height: 1.4em;
	}
	li {
		margin-bottom: 0.3em;
	}
	.eventtable {
		text-align: right;
	}
	.eventdiv {
		margin: 0.3em 0 1.2em 0;
	}
}


/******************

GENERAL

******************/

/* Background */
body.mediawiki {
    background-image: url("https://static.miraheze.org/ranchstorywiki/6/69/Ranchstoryclouds2.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #FFFFFF;
    background-size:cover !important;
    background-position:right !important;
}

#mw-page-base { background: transparent; }

/* Blockquotes */
blockquote {
	border-left: 4px solid #eaecf0;
	padding-left: 1em;
}

/* Clearfix */
.mw-parser-output {
	overflow: auto;
}

/******************

HEADINGS + TOC

******************/

#toc {
    padding: 7px;
    background-color: #FFFFFF;
    border: 1px solid #00000;
    margin: 1.5em 0 1em;
}
 

/***** Internal Links *****/
a {
	color:#005896; 
}

a:visited {
	color:#333333;
}

/* Navigation Background */

.pBody {
    background: #FFFFFF;
}

/******************
 
PERSONAL MENU
 
******************/

#p-personal {
  color: #000000;
}

#p-personal h5 {
  color: #000000;
}

#p-personal .portlet {
  color: #000000;
}

#p-personal .pBody {
  color: #FFFFFF;
}

/* this is the ul contained in the portlet */

#p-personal ul {
  color: #000000;
}

#p-personal li, li#pt-userpage, li#pt-anonuserpage, li#pt-login {
  color: #000000;
}

#p-linkbacks-left {
  color: #000000;
}

#p-linkbacks-right {
  color: #000000;
}

div.portlet {
  border: #000000;
}

div.portlet ul li, div.portlet ul li.selected {
  border: #000000;
}

div.portlet ul li span, div.portlet ul li.selected span {
  border: #000000;
}

div.portlet li span a {
  color: #000000;
}

div.portlet span a:visited {
  color: #000000;
}

div.vectorTabs li.selected span a {
  color: #000000 !important;
}

div.portlet li.new span a {
  color: #000000;
}

div.portlet li.new span a:visited {
  color: #000000;
}

div.portlet span a:active {
  background: transparent;
  color: #000000;
}

div.portlet h3 {
  color: #000000;
}

div.portlet h2 {
  color: #000000;
}

#p-cactions {
  color: #000000;
}

#p-cactions .hiddenStructure {
  color: #000000;
}

#p-cactions {
  color: #000000;
}

#p-cactions ul {
  color: #000000;
}

#p-cactions li {
  color: #000000;
}

#p-cactions li.selected {
  color: #000000;
}

#p-cactions li a {
  color: #000000;
}

#p-cactions li.selected a {
  color: #000000;
}

#p-cactions .new a {
  color: #000000;
}

#p-cactions li a:hover {
  color: #000000;
}

#p-cactions h5 {
  color: #000000;
}

#p-cactions li.istalk {
  color: #000000;
}

#p-cactions li.istalk a {
  color: #000000;
}

#p-cactions #ca-addsection a {
  color: #000000;
}

/***** External Links *****/
a.external.text, a.extiw {
	color:#005896 !important;
}
a.external.text:hover, a.external.text:active, a.extiw:hover, a.extiw:active {
	color:#005896 !important;
}
a.external.text:visited, a.extiw:visited {
	color:#005896 !important;
}

/*** Category ***/
 
.catlinks {
   background: #FFFFFF
}

/*** Headings ***/
h1, h2, h3, h4, h5, abbr, acronym, .explain {
   color: #000000;
}

/*** Tables ***/
.theme-table {
    background-image:url('https://static.miraheze.org/ranchstorywiki/6/69/Ranchstoryclouds2.gif');
    background-repeat: repeat;
    background-attachment: fixed;
    background-color: #FFFFFF;
    min-height: 100%;
    min-width: 100%;
    background-size:cover !important;
    background-position:right !important;
    overflow: visible;
    border: 1px solid #FFFFFF;
    padding-right:50px;
    padding-left:50px;
}

/*** Back To Top ***/

.BackToTop {
  background-color: #FFFFFF;
  position:fixed;
  border: #000000;
  bottom:32px;
  right:2%;
  z-index:9999;
  padding:0;
  margin:0;
  border: 1px solid #FFFFFF;
  color:blue;
  font-face:sans-serif;
  font-size:8pt;
  padding:0;
  font-weight:bolder;
  border-radius:8px;
}

/*** Media Player ***/
#mw-tmh-player {
    display: block;
}

/*** Styles ***/
.infobox {
	float: right;
	border-collapse: separate;
	font-size: 95%;
	margin:10px 0px 10px 10px;
	border: 1px solid #C0C0C0;
	border-radius: 10px;
	width:25%;
	min-width:250px;
	background: white;
}

/*** Image Resizing ***/
.imgwrapper {
  width: 100%;
  position: relative;
  margin: auto;
}

.imgwrapper img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  display: inline-block;
}

/*** Tabber ***/
.infobox .tabber__tabs {
	width: 100%;
	justify-content: space-around;
}
.infobox .tabber__tab {
	justify-content: center;
	flex: 1;
}

.infobox .tabber__panel {
	overflow-x: unset;
}