MediaWiki:Common.css: Difference between revisions

Revision as of 10:18, 6 April 2026

/* 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

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

hr {
    margin: 0.5em;
    height: 0.3px;
    background-color: darkgrey;
    border: inherit;
}

/* 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:#41726e; 
}

a:visited {
    color:#36625f;
}

.mw-collapsible-toggle-default .mw-collapsible-text {
    color: #41726e;
}

/* 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;
    color:#202122;
}

/*** 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 {
    border-collapse: separate;
    font-size: 95%;
    margin:10px 0px 10px 10px;
    border: 1px solid #C0C0C0;
    border-radius: 10px;
    background: white;
} 

/* desktop */
@media screen and (min-width: 720px) {
    .infobox {
        float: right;
        width:30%;
        min-width:250px;
        max-width: 280px;
    }
}

/* mobile */
@media screen and (max-width: 720px) {
    .infobox {
        float: none;
        width: fit-content;
    }
}

/*** Image Resizing ***/
.imgwrapper, .imgwrapper-boxart {
  position: relative;
  margin: auto;
}

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

@media screen and (min-width: 720px) {
    .imgwrapper, .imgwrapper-boxart {
      width: 100%;
      height: 100%;
    }
}

@media screen and (max-width: 720px) {
    .imgwrapper {
      width: 50%;
    }

    .imgwrapper-boxart {
      width: 75%;
    }
}

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

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