MediaWiki:Common.css: Difference between revisions

Latest revision as of 21:44, 17 July 2026

a {
    text-decoration: underline !important;
    color: #9575cd !important;
}

#content {
    text-align: justify !important;
}

#catlinks li {
    padding: 0 .3em;
    margin: 0;
}

#catlinks li a { /* Target the links inside the list items */
    text-decoration: underline;
}

/* You might also want to specify underline for different link states */
#catlinks li a:link,
#catlinks li a:visited {
    text-decoration: underline;
}

#catlinks li a:hover {
    text-decoration: underline; /* Keep underline on hover, or change to 'none' if desired */
}

.mainpage-shadowbox {
	color: white;
	background: rgb(75,75,75);
	background: rgba(0,0,0,7);
	border-radius: 4px;
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
	color: white;
	border:none;
	font-family: sans-serif;
	line-height: 1.2em;
	margin:0;
	padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */
}
.mainpage-shadowbox a {
	color: white;
	font-weight: bold;
}

.banner-image {
    position: relative;
    max-width: 1125px; 
    height: auto;
    margin-bottom: .6em;
}
.banner-image img {
    max-width: 100%;
    height: auto;
    /* width: auto\9; */ /* ie8 */
}
.banner-box-wide {
    width: 80%
}
.banner-box-left,
.banner-box-right {
	padding: 8px 7px;
	background: rgb(16,16,16);
	background: rgba(0,0,0,0.8);
	border-radius: 4px;
	width: 40%;
}
.banner-box-left  { text-align: left; }
.banner-box-right { text-align: right; }
.banner-box-2 {
    position: absolute;
    z-index: 2;
    min-width: 20em;
}

@media screen and ( min-width: 720px ) { /* greater than or equal to */
	.banner-image img.nolink { display: none; } /* can be removed when backward compat is no longer needed */
	.banner-image span[typeof~='mw:File/Frameless'].nolink { display: none; }
	.mainpage-shadowbox h2 {
		font-size: 190%;
	}
	.mainpage-shadowbox h3 {
		font-size: 150%;
	}
	.banner-image {
		overflow: hidden;
	}
	.banner-box-left {
		left: 3%;
	}
	.banner-box-right {
		right: 3%;
	}
	.banner-box-2 {
		margin-top: 2em;
	}
	.banner-box-2 .quote {
	    font-size: 80%;
	    line-height: 1.2em;
	}
}
@media screen and ( max-width: 720px ) {
	.banner-image img:not(.nolink) { display: none; } /* can be removed when backward compat is no longer needed */
	.banner-image span[typeof~='mw:File/Frameless'] img { display: inline-block; } /* can be removed when b/c is no longer needed */
	.banner-image span[typeof~='mw:File/Frameless']:not(.nolink) { display: none; }
	.banner-image > .mainpage-shadowbox {
		width: inherit !important;
		min-height: 100%;
		margin-left: -150%;
		margin-right: 150%;
		opacity: 0;
		background: black;
	}
	.mainpage-shadowbox .quote > a:after {
		content: '\ATap to learn more.';
		white-space: pre; /* needed to make content work. if content is disabled, this can be, too */
	}
	.jcarousel-item:hover .mainpage-shadowbox {
		margin: unset;
		opacity: 1;
		transition: margin 0.5s; /* without this, problem with tap on image still activating links - speed may matter here */
		bottom: 50%; /* relative vertical position; change to top to lower, negative percentages do not work as naively expected */
	}
	.jcarousel-control-prev, .jcarousel-control-next {
		display: none;
		/* hide the carousel arrows */
		/* a kludge resulting from gadgets not working on mobile */
		/* unforunately also targets very narrow desktops, but there can't be too many of those */
		/* and besides, the number buttons still work */
	}
	img.interactiveIcon, /* can be removed when backward compat is no longer needed */
	.interactiveIcon img {
		position: absolute;
		opacity: 0.4;
		height: 75% !important;
		width: auto;
		bottom: 0;
		right: 0;
	}
}




/* carousel */
.jcarousel {
    position: relative;
    overflow: hidden;
}
 
.jcarousel-wrapper {
	max-width: 1125px;
    margin: 0;
    position: relative;
}
 
.jcarousel .jcarousel-list {
    width: 20000em;
    position: relative;
    margin: 0;
    padding: 0;
}
 
.jcarousel .jcarousel-item {
    float: left;
}
 
.jcarousel-item img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
 
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 45%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    border-radius: 30px;
    box-shadow: 0 0 2px #999;
}
 
.jcarousel-control-prev {
    left: -15px;
}
 
.jcarousel-control-next {
    right: -15px;
}
 
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
 
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
 
.jcarousel-pagination {
    position: absolute;
    bottom: 10px;
    left: 15px;
}
 
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    margin-right: 2px;
    opacity: .75;
}
 
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}







/*

Common CSS for all skins

See https://phabricator.wikimedia.org/M82 for standard colors

*/

/* --- Hidden viewport --- */
@media only screen and (max-width: 700px) {
    .mobile_hide { display:none; }
}
@media (min-width:701px) and (max-width:1199px) {
    .tablet_hide { display:none; }
}
@media only screen and (min-width: 1200px) {
    .desktop_hide { display:none; }
}

#sidebar { 
  display: none;
}
@media only screen and (max-width: 990px) {
  #sidebar { 
    display: block;
  }
}



.menu3 {
    border: 1px solid #51516a;
    box-sizing: border-box;
    margin: auto;
    clear: both;
    text-align: left;
    padding: 5px;
    border-left: 5px solid #3d3d4f; 
    border-bottom: 5px solid #3d3d4f; 
    border-radius: 2px;
    border-radius:1em; box-shadow:0.1em 0.1em 0.1em rgba(0,0,0,0.75);
}



.mw-halign-right {
    border: 1px solid #a2a9b1;
    background: #51516a;
    text-align: left;
    padding: 1px;
    border-radius: 2px;
}

/* The main container */
.menu3 {
    border: 1px solid #51516a;
    box-sizing: border-box;
    margin: auto;
    clear: both;
    padding: 10px;
    border-radius: 1em;
    box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.75);
    background: #51516a; /* Unified background */
    width: 90%;
}

/* Individual cells - simplified for clean lines */
.menu3 td {
    border: 1px solid #6d6d8c;
    background: #46465c;
    text-align: left;
    padding: 8px;
}

/* Header cells */
.menu3 th {
    border: 1px solid #a2a9b1;
    background: #3d3d4f;
    text-align: center;
    padding: 10px;
}

/* New class for perfect centering */
.menu3 .center-cell {
    text-align: center !important;
    vertical-align: middle !important;
}






















.menu {
 border: 1px solid #9fc8d1;
 background: #def3fc;
 color: black;
 margin-bottom: 0.5em;
 /* @noflip */
 margin-left: 1em;
 padding: 0.2em;
 /* @noflip */
}

.menu2 {
    border: 1px solid #a2a9b1;
    width: 100%;
    box-sizing: border-box;
    margin: auto;
    clear: both;
    text-align: center;
    padding: 1px;
    border-left: 10px solid #3d3d4f; 
    border-radius: 2px;
}


.menu2 td {
    border: 1px solid #a2a9b1;
    text-align: center;
    padding: 1px;
    border-radius: 2px;
}


.menu2 th {
    border: 1px solid #a2a9b1;
    box-sizing: border-box;
    margin: auto;
    clear: both;
    text-align: center;
    padding: 1px;
    border-radius: 2px;
}






















/* Workaround for T279008 */
.ns-14 .mw-parser-output:after {
	content: none;
}

/* Larger conditions-area in AbuseFilter for some */
#wpFilterRules {
 min-height: 250px;
}

/* Larger notes-area in AbuseFilter for some */
#wpFilterNotes {
 min-height: 150px;
}

/* Style for "notices" */
.notice {
 text-align: justify;
 margin: 1em;
 padding: 0.2em;
}
#disambig {
 border-top: 3px double #c8ccd1;
 border-bottom: 3px double #c8ccd1;
}

/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-toggle-expanded.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-expanded .mw-collapsible-arrowtoggle {
 padding-left: 20px !important;
 background-image: url('//upload.wikimedia.org/wikipedia/commons/1/10/MediaWiki_Vector_skin_action_arrow.png');
 background-repeat: no-repeat;
 background-position: left center;
}
.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
 padding-left: 20px !important;
 background-image: url('//upload.wikimedia.org/wikipedia/commons/4/41/MediaWiki_Vector_skin_right_arrow.png');
 background-repeat: no-repeat;
 background-position: left center;
}

/* Metadata */
table.metadata {
 border: 1px solid #a2a9b1;
 display: none;
 speak: none;
}

/* Class for links with loudspeaker icon next to them */
.audiolink a {
 background: url("//upload.wikimedia.org/wikipedia/commons/f/f7/Loudspeaker.png") center left no-repeat !important;
 padding-left: 16px !important;
 padding-right: 0 !important;
}

/* When this would make a red link, hide it. For links where #ifexist cannot be used due to high number of requests. See [[meta:Help:Page_existence]]
*/
.hidden-redlink a.new {
 display: none;
 speak: none;
}
.client-nojs .scriptonly {
	display: none;
}
.client-js .noscript {
	display: none;
}

/* Infobox templates */
.infobox {
 border: 1px solid #a2a9b1;
 background: #f8f9fa;
 color: black;
 margin-bottom: 0.5em;
 /* @noflip */
 margin-left: 1em;
 padding: 0.2em;
 /* @noflip */
 clear: right;
            text-align:center;
            top:0;
            position:absolute;
            right:0;
}
.infobox td,
.infobox th {
 vertical-align: middle;
}
.infobox caption {
 font-size: larger;
 margin-left: inherit;
}
.infobox.bordered {
 border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
 border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
 border: 0 solid #a2a9b1;
}
.infobox.sisterproject {
 width: 20em;
 font-size: 90%;
}

.archive-box {
 border: 1px solid #aaf;
 background: #f2f2f9;
 color: #000;
 margin-bottom: 0.5em;
 margin-left: 1em;
 padding: 0.2em;
 float: right;
 clear: right;
 text-align: center;
}

/**
 * Customisation of the interface
 */

/* Add a checker background to custom image rendering templates. */
/* For standard thumbnails, galleries, file history, file description preview this happens by default. */
.com-checker img:hover {
 background: url("//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
}

/* Moved upload link from toolbox into the MediaWiki:Sidebar thus suppressing the old duplicate */
#p-tb #t-upload { display: none; }

/* Makes the text of the "save" button bold */
#wpSave { font-weight: bold; }

/* Make sure the license dropdown of the upload form doesn't extend beyond the browser's
 window, even if there are some long license descriptions. (If that happens, the description
 box *also* goes beyond the right edge of the window.)
*/
#wpLicense {
 width: 100%;
 overflow: hidden;
}

/* Give the upload form a little breathing space. */
#upload * td {
 padding-bottom: 8px;
}
#mw-upload-table * td {
 padding-bottom: 8px;
}

/* Styling for Abuse Filter tags */
.mw-tag-markers {
 font-style:italic;
 font-size:90%;
}

/* Override rules that make edit link asymmetrical on talk pages and new section link skinnier than the rest */
#p-cactions #ca-addsection a {
 padding-left: 0.8em;
 padding-right: 0.8em;
}
#p-cactions #ca-edit a {
 padding-left: 0.8em;
 padding-right: 0.8em;
}

/* Something nice for lists in RTL languages */
div.RTL * ul {
 margin-right: 10px;
 display: table;
}
div.RTL * ol {
 margin-right: 10px;
 display: table;
}

/* Special:Search styles */

.mw-search-results li{
 padding: 0.25em 1em;
 border-bottom: 1px solid #d3daed;
}
.mw-search-results li:nth-child(odd) {
 background-color: #f6f8fc;
}

/* Main pages */


/* Hide title and "Nominate for deletion" button when viewing the main page (but not when editing it or viewing the talk page).
 * The "mw-mainpage" class is for all localised main pages in [[MediaWiki:MainPages.js]].
 */

/* Optimise for "Main Page" because the scripts don't apply until after page load so it flashes briefly.
 * Support IE6: ".page" must go after ".action" as IE6 only supports one class per element and uses the last one. If reversed, the rule will hide headings on all pages.
 */
.action-view.page-Main_Page #firstHeading,
.mw-mainpage #firstHeading,
.mw-mainpage #t-ajaxquickdelete,
.mw-mainpage #localNotice,
.mw-mainpage #siteSub,
.mw-mainpage #catlinks {
 display: none;
}

#mainpage-potd a img {
 width: 100%!important;
 -ms-interpolation-mode: bicubic;
 height: auto!important;
 max-width: 600px!important;
}

.utoc .tocnumber {
 display: none;
}
.utoc #toc ul,
.utoc .toc ul {
 line-height: 1.5em;
 list-style-type: square;
 margin: .3em 0 0 1.5em;
 padding: 0;
}

/* Necessary for displaying text in the upper right edge. (Used in [[Template:Shortcut]].) */
#content span.coordinates a.external.text:after, #content span.coordinates a.external.autonumber:after { content: ""; }
#content div.coordinates a.external.text:after, #content div.coordinates a.external.autonumber:after { content: ""; }

#shortcut { display: none; }

/**
 * Style for horizontal lists (separator following item).
 * @source mediawiki.org/wiki/Snippets/Horizontal_lists
 * @revision 6 (2014-05-09)
 * @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
    display: none;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
    content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap;
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}
/* END of HLISTs */

/* Unbulleted lists */
.plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
.plainlist ul li {
    margin-bottom: 0;
}

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
    border: 1px solid #a2a9b1;
    width: 100%;
    box-sizing: border-box;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
.navbox-inner,
.navbox-subgroup {
    width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em;      /* Title, group and above/below styles */
    line-height: 1.5em;
    text-align: center;
}
th.navbox-group {             /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}
.navbox,
.navbox-subgroup {
    background: #fdfdfd;      /* Background color */
}
.navbox-list {
    line-height: 1.8em;
    border-color: #fdfdfd;    /* Must match background color */
}
.navbox th,
.navbox-title {
    background: #ccccff;      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;      /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
    background: transparent;  /* Odd row striping */
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)       */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;        /* Prevent lists from clinging to navboxes */
}

/* Default styling for Navbar template */
.navbar {
    display: inline;
    font-size: 88%;
    font-weight: normal;
}
.navbar ul {
    display: inline;
    white-space: nowrap;
}
.navbar li {
    word-spacing: -0.125em;
}
.navbar.mini li span {
  font-variant: small-caps;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
    font-size: 100%;
}
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    /* intentionally is flipped */
    float: left;
    /* intentionally is flipped */
    text-align: left;
    /* intentionally is flipped */
    margin-right: 0.5em;
    width: 6em;
}

/* Put on gallery_details the same styles as on gallery */
table.gallery_details {
 border: 1px solid #c8ccd1;
 margin: 2px;
 padding: 2px;
 background: #fff;
}
table.gallery_details tr {
 vertical-align: top;
}
table.gallery_details td {
 vertical-align: top;
 background: #f8f9fa;
 border: 2px solid #fff;
}

/* Small font-size for hidden categories,
 per [[Commons:Village_pump/Archive/2010Mar#Hidden_categories:_change_the_default_setting_for_logged-in_users]]
*/
#mw-hidden-catlinks { font-size: 87% !important; }

/* To color the mention "updated since my last visit" in the history */
span.updatedmarker {
 color: #000;
 background: #99D642;
}
/* Geographical coordinates defaults. See [[Template:Coord/link]]
 for how these are used. The classes "geo", "longitude", and
 "latitude" are used by the [[Geo microformat]].
 */
.geo-default, .geo-dms, .geo-dec { display: inline; }
.geo-nondefault, .geo-multi-punct { display: none; }
.longitude, .latitude { white-space: nowrap; }

/* Fix link color in jQuery dialogs */
.ui-dialog a {
 color: #0645AD!important;
}

/* Class for template content that should be shown locally, even if JS is disabled,
 but should not be visible on file pages shown on other sites.
 Use with style="display:none". Interacts with collapsible divs (see above).
*/
div.show-on-commons { display: block !important; }


/* Note that image has annotations at Commons; visible only on other projects.
 See https://commons.wikimedia.org/w/index.php?title=Template_talk:ImageNote&oldid=55319045
*/
.annotationboxforwikipedia,
.hide-on-commons {
	display: none;
}

/* Allow limiting of which header levels are shown in a TOC;
 <div class="toclimit-3">, for instance, will limit to
 showing ==headings== and ===headings=== but no further
 (as long as there are no =headings= on the page, which
 there shouldn't be according to the MoS).
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul { display: none }

/* Redirects in categories, on [[Special:Allpages]], and [[Special:Prefixindex]] */
.redirect-in-category, .allpagesredirect a {
 color: gray;
}

/* Hide deletion-instructions headers inside closed deletion requests (redundant) */
.delh .massdeletionrequest-header { display: none; }

/* Message box templates */
.messagebox {
 border: 1px solid #a2a9b1;
 background: #f8f9fa;
 width: 80%;
 margin: 0 auto 1em;
 padding: 0.2em;
 text-align: justify;
}
.messagebox.merge {
 border: 1px solid #cf9fff;
 background: #f5edf5;
 text-align: center;
}
.messagebox.cleanup {
 border: 1px solid #9f9fff;
 background: #efefff;
 text-align: center;
}
.messagebox.standard-talk {
 border: 1px solid #c0c090;
 background: #f8eaba;
}

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {     /* The message body cell(s) */
    border: none;
    padding: 0.25em 0.9em;       /* 0.9em left/right */
    width: 100%;    /* Make all mboxes the same width regardless of text length */
}
td.mbox-image {                  /* The left image cell */
    border: none;
    padding: 2px 0 2px 0.9em;    /* 0.9em left, 0px right */
    text-align: center;
}
td.mbox-imageright {             /* The right image cell */
    border: none;
    padding: 2px 0.9em 2px 0;    /* 0px left, 0.9em right */
    text-align: center;
}
td.mbox-empty-cell {         /* An empty narrow cell */
    border: none;
    padding: 0;
    width: 1px;
}

/* Article message box styles */
table.ambox {
    margin: 0 10%;   /* 10% = Will not overlap with other elements */
    border: 1px solid #a2a9b1;
    border-left: 10px solid #36c;    /* Default "notice" blue */
    background: #fbfbfb;
}
table.ambox + table.ambox {   /* Single border between stacked boxes. */
    margin-top: -1px;
}
.ambox th.mbox-text,
.ambox td.mbox-text {            /* The message body cell(s) */
    padding: 0.25em 0.5em;       /* 0.5em left/right */
}
.ambox td.mbox-image {           /* The left image cell */
    padding: 2px 0 2px 0.5em;    /* 0.5em left, 0px right */
}
.ambox td.mbox-imageright {      /* The right image cell */
    padding: 2px 0.5em 2px 0;    /* 0px left, 0.5em right */
}

table.ambox-notice {
    border-left: 10px solid #36c;    /* Blue */
}
table.ambox-speedy {
    border-left: 10px solid #b32424;    /* Red */
    background: #fee7e6;                   /* Pink */
}
table.ambox-delete {
    border-left: 10px solid #b32424;    /* Red */
}
table.ambox-content {
    border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
    border-left: 10px solid #fc3;    /* Yellow */
}
table.ambox-move {
    border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
    border-left: 10px solid #a2a9b1;       /* Gray-gold */
}

/* Image message box styles */
table.imbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 3px solid #36c;    /* Default "notice" blue */
    background: #fbfbfb;
}
.imbox .mbox-text .imbox {    /* For imboxes inside imbox-text cells. */
    margin: 0 -0.5em;    /* 0.9 - 0.5 = 0.4em left/right. */
}
.mbox-inside .imbox {    /* For imboxes inside other templates. */
    margin: 4px;
}

table.imbox-notice {
    border: 3px solid #36c;    /* Blue */
}
table.imbox-speedy {
    border: 3px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}
table.imbox-delete {
    border: 3px solid #b32424;    /* Red */
}
table.imbox-content {
    border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
    border: 3px solid #fc3;    /* Yellow */
}
table.imbox-move {
    border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
    border: 3px solid #a2a9b1;       /* Gray-gold */
}
table.imbox-license {
    border: 3px solid #88a;       /* Dark gray */
    background: #f7f8ff;          /* Light gray */
}
table.imbox-featured {
    border: 3px solid #cba135;    /* Brown-gold */
}

/* Category message box styles */
table.cmbox {
    margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
    background: #DFE8FF;    /* Default "notice" blue */
}

table.cmbox-notice {
    background: #D8E8FF;    /* Blue */
}
table.cmbox-speedy {
    margin-top: 4px;
    margin-bottom: 4px;
    border: 4px solid #b32424;    /* Red */
    background: #FFDBDB;          /* Pink */
}
table.cmbox-delete {
    background: #FFDBDB;    /* Red */
}
table.cmbox-content {
    background: #FFE7CE;    /* Orange */
}
table.cmbox-style {
    background: #FFF9DB;    /* Yellow */
}
table.cmbox-move {
    background: #E4D8FF;    /* Purple */
}
table.cmbox-protection {
    background: #EFEFE1;    /* Gray-gold */
}

/* Other pages message box styles */
table.ombox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;       /* Default "notice" gray */
    background: #f8f9fa;
}

table.ombox-notice {
    border: 1px solid #a2a9b1;       /* Gray */
}
table.ombox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}
table.ombox-delete {
    border: 2px solid #b32424;    /* Red */
}
table.ombox-content {
    border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
    border: 1px solid #fc3;    /* Yellow */
}
table.ombox-move {
    border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
    border: 2px solid #a2a9b1;       /* Gray-gold */
}

/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090;    /* Default "notice" gray-brown */
    background: #f8eaba;
}
.mediawiki .mbox-inside .tmbox { /* For tmboxes inside other templates. The "mediawiki" */
    margin: 2px 0;               /* class ensures that this declaration overrides other */
    width: 100%;  /* For Safari and Opera */     /* styles (including mbox-small above) */
}
.mbox-inside .tmbox.mbox-small { /* "small" tmboxes should not be small when  */
    line-height: 1.5em;          /* also "nested", so reset styles that are   */
    font-size: 100%;             /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}
table.tmbox-delete {
    border: 2px solid #b32424;    /* Red */
}
table.tmbox-content {
    border: 2px solid #f28500;    /* Orange */
}
table.tmbox-style {
    border: 2px solid #fc3;    /* Yellow */
}
table.tmbox-move {
    border: 2px solid #9932cc;    /* Purple */
}
table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #a2a9b1;    /* Gray-brown */
}

/* Footer and header message box styles */
table.fmbox {
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
    background: #f8f9fa;     /* Default "system" gray */
}
table.fmbox-system {
    background: #f8f9fa;
}
table.fmbox-warning {
    border: 1px solid #bb7070;  /* Dark pink */
    background: #ffdbdb;        /* Pink */
}
table.fmbox-editnotice {
    background: transparent;
}
/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
#mw-protect-cascadeon {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
    background: #ffdbdb;
    padding: 0.25em 0.9em;
}
/* Div based "system" style fmbox messages.
   Used in [[MediaWiki:Readonly lag]]. */
div.mw-lag-warn-normal,
div.fmbox-system {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #a2a9b1;
    background: #f8f9fa;
    padding: 0.25em 0.9em;
}

/* These mbox-small classes must be placed after all other
   ambox/tmbox/ombox etc classes. "body.mediawiki" is so
   they override "table.ambox + table.ambox" above. */
body.mediawiki table.mbox-small {   /* For the "small=yes" option. */
    clear: right;
    float: right;
    margin: 4px 0 4px 1em;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}
body.mediawiki table.mbox-small-left {   /* For the "small=left" option. */
    margin: 4px 1em 4px 0;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em;
}

#catlinks li {
    padding:0 .3em;
    margin:0;
}
#catlinks li:first-child {
    padding-left:0;
}

/* Babel */
/* @noflip */
table.mw-babel-wrapper {
    margin:0;
    margin-bottom:0.5em;
    margin-left: 1em;
    background-color: transparent;
    width:250px;
    border-spacing:2px;
}

.mw-babel-notabox {
    margin-left: auto;
    margin-right: auto;
    width: 238px;
}

.mw-babel-box-level-N  {
        display: none;
}

div.mw-babel-box table th  {
        font-family: sans-serif;
        text-align:center;
}

div.mw-babel-box table td a {
        font-weight: bold;
}

div.mw-babel-box-N  {
        border:solid #6EF7A7 1px;
}

div.mw-babel-box-4  {
        border:solid #77E0E8 1px;
}

div.mw-babel-box-3  {
        border:solid #99B3FF 1px;
}

div.mw-babel-box-2  {
        border:solid #BCB9EF 1px;
}

div.mw-babel-box-1  {
        border:solid #E0C0E0 1px;
}

div.mw-babel-box-0  {
        border:solid #FFBBBB 1px;
}

div.mw-babel-box-N table  {
        background-color: #C5FCDC;
}

div.mw-babel-box-4 table {
        background-color: #D0F8FF;
}

div.mw-babel-box-3 table  {
        background-color: #E0E8FF;
}

div.mw-babel-box-2 table {
        background-color: #E9E5F9;
}

div.mw-babel-box-1 table {
        background-color: #F3E0F3;
}

div.mw-babel-box-0 table {
        background-color: #FFEEEE;
}

div.mw-babel-box-N table th  {
        background-color: #6EF7A7;
}

div.mw-babel-box-4 table th {
        background-color: #77E0E8;
}

div.mw-babel-box-3 table th  {
        background-color: #99B3FF;
}

div.mw-babel-box-2 table th {
        background-color: #BCB9EF;
}

div.mw-babel-box-1 table th {
        background-color: #E0C0E0;
}

div.mw-babel-box-0 table th {
        background-color: #FFBBBB;
}

/* Highlight clicked reference in blue to help navigation */
ol.references li:target,
sup.reference:target,
span.citation:target {
    background-color: #DEF;
}

/* Styling the parameter fields in [[Template:Information]] and related templates
   also here (besides on [[MediaWiki:Filepage.css]]) to ensure proper preview
   on other pages than those in the file namespace */
.fileinfo-paramfield {
 background: #ccf;
 /* @noflip */
 text-align: right;
 /* @noflip */
 padding-right: 0.4em;
 width: 15%;
 font-weight: bold;
}

/* Allow users to edit the orange on the main page in their personal CSS files */
.bg-orange {
 background:#fad67d;
}

/* Partially support HTML5 bdi tag on old browsers that don't support
   it and reassign its default value on modern browsers,
   needed for better i18n even on old browsers
   isolation on signature-talk will resolve mix of RTL/LTR on RTL UI*/
bdi, .signature-talk {
  unicode-bidi: embed; /* fallback, it is not completely same but will work on most cases */
  unicode-bidi: -webkit-isolate;
  unicode-bidi: -moz-isolate;
  unicode-bidi: isolate;
}

/* NS GWToolset (light grey) */
.ns-490 #content { background-color: #f4f4f4; }
.ns-490 div.thumb { border-color: #f4f4f4; }

/* Turn off some irrelevant MediaWiki help page links */
.mw-special-Upload #mw-indicator-mw-helplink {
  display:none;
}

/* Same as .mw-references-columns (Cite extension)
 * replacement for hardcoded [[Template:Column-width]]
 */
.responsive-columns {
 -webkit-column-width: 35em;
 -moz-column-width: 35em;
 column-width: 35em;
}

/* Allow custom list styles in reference sections */
.reflist ol.references {
  list-style-type: inherit;
}

/* Increase height of upload description field at Special:Upload
 * Applies only when uploading a new file, not for the one-line input box when overwriting.
 */
textarea#wpUploadDescription {
	height: 20em;
}




/* CSS placed here will be applied to all skins */
/* Main Page style */
p {
 line-height: 1.6;
 margin-bottom: 0.8em;
}

.tablebackground {
background-image:url(http://firefly.wikkii.com/bar.jpg)
	font-weight: bold;
	text-align: left
	text-decoration: underline;
	margin: 0px;
	padding: 3px 3px;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
}


.MainTitle {
    margin:0;
    background-color:#E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;; 
    font-family: 'Verdana', Helvetica, sans-serif;
    font-size:120%;
    font-weight:bold;
    border:1px solid #6f7f8e; 
    text-align:left;
    color:#FFF; 
    padding:0.2em 0.4em;
}
.mainHeader {
     background:transparent url() repeat-x scroll 0 0;
     border:1px solid #4A4A4A;
     color:#FFFFFF;
     font-family:Verdana,Helvetica,sans-serif;
     font-size:14px;
     font-weight:bold;
     margin:0;
     padding:7px 5px;
}
#content {
     background: #E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;
}
#p-cactions li.selected a{
     background-color: #E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;;
}
#p-cactions li.selected {
     background-color: #E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;;
     border-color:#004E84;
     font-weight:bold;
     padding:0 0 0.2em;
}
.MainFrame {
    border: 1px solid #E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;;
    padding: .5em 1em; 
    margin: 1em; 
    background-color: #E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;; 
}




















div.sidebar {
    /*display: block;*/
    /*clear: none;*/
    background-color:#E9E2EE;
    width:148px;
    padding: 0 0 0 0;
/*    margin: 0px 0px 0px 0px;*/
    border: 1px solid #aaaaaa;
    overflow:hidden
	font-size:10px;
	margin: 0px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, sans-serif;
}
.sidebarHeader {
    /*clear: none;*/
    background: #6A6170 none repeat scroll 0 0;
}
.sidebarContent {
    /*clear: none;*/
    background: #E9E2EE url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;;
}
.topc {
    /*clear: none;*/
    background: #E9E2EE url(http://firefly.wikkii.com/bar.jpg) repeat-x;
}
div.sidebar h2 {

	font-weight: bold;
	text-align: left
	text-decoration: underline;
	margin: 0px;
	padding: 3px 3px;
	background: url(http://firefly.wikkii.com/bar.jpg) repeat-x;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
}
div.sidebar h3 {
	font-size:10px;
	font-weight: bold;
	margin: 0px;
	padding: 3px 3px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, sans-serif;
}

div.rules {
	font-weight: bold;
	color: #000000;
	font-family: Verdana, sans-serif;
}






 div.sidebar2 {
    /*display: block;*/
    /*clear: none;*/
    background-color:#F5F2F8 url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;;
    width:90%;
    text-align:justify;
    padding: 0 0 0 0;
/*    margin: 0px 0px 0px 0px;*/
    border: 1px solid #aaaaaa;
    overflow:hidden
	font-size:10px;
	margin: 0px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	text-align: left
	text-decoration: none;
	margin: 0px;
	padding: 3px 3px;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #000000;
	font-family: Verdana, sans-serif;
}
.sidebar2Header {
    /*clear: none;*/
    background: #6A6170 none repeat scroll 0 0;
}
.sidebar2Content {
    /*clear: none;*/
    background: #F5F2F8 url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat; none repeat scroll 0 0;
    font-weight: bold;
}
div.sidebar2 h2 {

	font-weight: bold;
	text-align: left
	text-decoration: underline;
	margin: 0px;
	padding: 3px 3px;
	background: url(http://firefly.wikkii.com/bar.jpg) repeat-x;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
}
div.sidebar2 h3 {
	font-size:10px;
	font-weight: bold;
	margin: 0px;
	padding: 3px 3px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, sans-serif;
}

 div.sidebar3 {
	font-weight: bold;
	text-align: left
	text-decoration: underline;
	background: url(http://firefly.wikkii.com/bar.jpg) repeat-x;
	font-size: 12px;
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
}

div.sidebar2 testing {

	font-weight: bold;
	text-align: left
	text-decoration: underline;
	margin: 0px;
	padding: 3px 3px;
	background: url(http://firefly.wikkii.com/bar.jpg) repeat-x;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
}



div.Boxmerge,
div.NavFrame {
        margin: 0px;
        padding: 2px;
        border: 1px solid #aaaaaa;
        text-align: left;
        border-collapse: collapse;
        font-size: 100%;
	font-weight: bold;
	text-align: left
	text-decoration: underline;
	margin: 0px;
	padding: 3px 3px;
	font-family: Verdana, sans-serif;
}
div.Boxmerge div.NavFrame {
        border-style: none;
        border-style: hidden;
}
div.NavFrame + div.NavFrame {
        border-top-style: none;
        border-top-style: hidden;
}
div.NavPic {
        background-color: #ffffff;
        margin: 0px;
        padding: 2px;
        float: left;
}
div.NavFrame div.NavHead {
        border: 1px solid #000000;
        height: 1.6em;
        font-weight: bold;
        font-size: 100%;
        background-color: #fff9ff;
        position:relative;
}
div.NavFrame p {
        font-size: 100%;
}
div.NavFrame div.NavContent {
        font-size: 100%;
}
div.NavFrame div.NavContent p {
        font-size: 100%;
}
div.NavEnd {
        margin: 0px;
        padding: 0px;
        line-height: 1px;
        clear: both;
}
a.NavToggle {
        position:absolute;
        top:0px;
        right:3px;
        font-weight:normal;
        font-size: 100%;
}


 div.sidebar5 {
    /*display: block;*/
    /*clear: none;*/
    background-color:#F5F2F8 url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat;;
    width:90%;
    text-align:justify;
    padding: 0 0 0 0;
/*    margin: 0px 0px 0px 0px;*/
    border: 1px solid #aaaaaa;
    overflow:hidden
	font-size:10px;
	margin: 0px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	text-align: left
	text-decoration: none;
	margin: 0px;
	padding: 3px 3px;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #000000;
	font-family: Verdana, sans-serif;
}
.sidebar5Header {
    /*clear: none;*/
    background: #c0bbc6 none repeat scroll 0 0;
}
.sidebar5Content {
    /*clear: none;*/
    background: #c0bbc6 url(http://firefly.wikkii.com/skins/monobook/fly_purple.jpg) 0 0 no-repeat; none repeat scroll 0 0;
    font-weight: bold;
}
div.sidebar5 h2 {

	font-weight: bold;
	text-align: left
	text-decoration: underline;
	margin: 0px;
	padding: 3px 3px;
	background: url(http://firefly.wikkii.com/bar.jpg) repeat-x;
	border: 1px solid #4A4A4A;
	font-size: 12px;
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
}
div.sidebar5 h3 {
	font-size:10px;
	font-weight: bold;
	margin: 0px;
	padding: 3px 3px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, sans-serif;
}








/* --- MONDO-UI: MASTER VR GAME CARD (BULLETPROOF FILL) --- */

/* 1. Main Card Container */
table.vr-game-card {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 25px auto !important;
    width: 95% !important;
    max-width: 1100px !important;
    background-color: #35354a !important; 
    color: #e0e0e0 !important;
    border: 6px solid #2d2d3a !important; 
    border-radius: 18px !important; 
    overflow: hidden !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5) !important;
    background-clip: padding-box !important;
}

/* 2. Top Title Bar */
.vr-game-card-title {
    background: linear-gradient(180deg, #2d2d3a 0%, #1a1a24 100%) !important;
    color: #ffffff !important;
    padding: 18px !important;
    border-bottom: 1px solid #51516a !important;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/* 3. Thumbnail App Icon */
.vr-game-card-title img {
    vertical-align: middle;
    margin-right: 12px !important;
    border: 2px solid #5e5e80 !important;
    border-radius: 8px !important;
    padding: 2px !important;
    background-color: #2d2d3a !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

.vr-game-card-title img:hover {
    border-color: #a0a0c8 !important;
    box-shadow: 0 0 10px rgba(160, 160, 200, 0.5) !important;
}

/* 4. Hero Screenshot Cell (Fixed 400px width, Absolute Fill) */
.vr-game-hero {
    padding: 0 !important; 
    background-color: #1a1a24 !important;
    border-right: 1px solid #51516a !important;
    
    /* Lock Width */
    width: 400px !important;     /* <--- CHANGE THIS FROM 500px */
    min-width: 400px !important; /* <--- CHANGE THIS FROM 350px */
    
    /* THE ANCHOR: Establishes the boundaries for the absolute image */
    position: relative !important; 
    height: 1px !important; /* Required hack for rowspan height to work */
    
    overflow: hidden !important; 
    border-bottom-left-radius: 12px !important;
}


/* Force ANY wrapper MediaWiki uses to pin to the 4 corners of the cell */
.vr-game-hero a, 
.vr-game-hero span, 
.vr-game-hero div,
.vr-game-hero .mw-file-description {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* Traps the zoom */
    border-bottom-left-radius: 11px !important;
}

/* The Image physically locks to the absolute boundaries and fills them */
.vr-game-hero img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Zooms and crops to ensure 0 empty space */
    object-fit: cover !important; 
    object-position: center !important;
    
    border-bottom-left-radius: 11px !important; 
    transition: transform 0.4s ease-in-out !important;
}

.vr-game-hero img:hover {
    transform: scale(1.2) !important;
}

/* 5. Headers */
table.vr-game-card th {
    padding: 15px !important;
    border: 1px solid #51516a !important; 
    background-color: #2d2d3a !important;
    color: #b3b3c9 !important;
    text-transform: uppercase;
    font-size: 0.85em !important;
    font-weight: bold;
    text-align: center;
}

/* 6. Text Cells */
table.vr-game-card td {
    padding: 15px !important;
    border: 1px solid #51516a !important; 
    vertical-align: top !important;
}

.card-sub-header {
    text-align: left !important;
    color: #ffffff !important;
    background-color: #3d3d4f !important;
}

/* 7. Corner Fixes */
table.vr-game-card tr:last-child td:last-child {
    border-bottom-right-radius: 12px !important;
}

/* 8. Utility Styles */
.mondo-rating {
    font-weight: bold;
    color: #a0a0c8 !important;
    font-size: 1.15em;
}

.center-stat {
    text-align: center !important;
    vertical-align: middle !important;
}
Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Namespaces

More

Page actions

Latest revision as of 21:44, 17 July 2026

Navigation

MondoCat.TV

Common Links

Admin

Wiki tools

Wiki tools

Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Latest revision as of 21:44, 17 July 2026

Navigation

Wiki tools

Page tools
