MediaWiki:Common.css

From LOTR-TCG Wiki

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.
/* CSS placed here will be applied to all skins */


#mw-content-block.ts-inner {
	max-width: 125em;
}


.whitebg {
    background: #ffffff;
	/* This ensures that icons do not insert filenames into copy-pasted text.*/
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.redbg {
    background: #dd0000;
}

.outerquote {
	display: table;
}
.quote {
    background-color: #FAEBD7;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px; 
    margin: 5px; 
    border-style: solid; 
    border-width:0 0 0 3px;
    
}

.quotetitle {
	background-color: #dddddd;
    margin: -0px -0px -5px 5px;
	padding: 0px 0px 0px 7px;
	
}

.quotesource {
    background-color: #dddddd;
    margin: -0px -3px -10px -7px;
	padding: 0px 0px 0px 20px;

}


.tooltip {
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip span, .tooltip title {
    display:none;
}
.tooltip:hover span:not(.click-disabled),.tooltip:active span:not(.click-disabled) {
    display:block;
    position:fixed;
    overflow:visible;
    background-color: #FAEBD7;
    width:auto;
    z-index:9999;
}
/* This prevents tooltip images from automatically shrinking if they are near the window edge.*/
.tooltip span > a > img {
	max-width:none !important;
}

.card-infobox-container .gallery.mw-gallery-slideshow{
	min-height:350px;
}

/*
.card-infobox-container a[title="Toggle thumbnails"] {
	display:none;
}*/

.card-infobox-container .oo-ui-buttonElement {
	margin:0;
	width:auto;
}



.card-infobox-container ul.gallery.mw-gallery-slideshow,
.card-infobox-container ul .gallery .mw-gallery-slideshow div,
.card-infobox-container ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons,
.card-infobox-container .mw-gallery-slideshow,
/*.card-infobox-container .gallerycarousel,*/
.card-infobox-container ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled,
.card-infobox-container .mw-gallery-slideshow .mw-gallery-slideshow-buttons div,
.card-infobox-container .gallery,
.card-infobox-container .mw-gallery-slideshow-caption,
.card-infobox-container  .thumb > div
{
	margin: 0 !important;
	padding: 0 !important;
}

.card-infobox-container .mw-gallery-slideshow-caption .gallerytext p {
	font-weight:bold;
	font-size: 130%;
	border-style: groove none groove none; 
	background-color: #efefef;
}

.card-infobox-container .gallerytext p {
	margin:0;
}

.card-infobox-container .gallery .mw-gallery-slideshow .gallerybox,
.card-infobox-container .gallery .mw-gallery-slideshow .gallerybox > div,
.card-infobox-container .gallery .mw-gallery-slideshow .gallerybox > div > div,
.card-infobox-container .gallery .mw-gallery-slideshow .gallerybox > div > div > div,
.card-infobox-container ul.gallery.mw-gallery-slideshow .gallerybox,
.card-infobox-container ul.gallery.mw-gallery-slideshow .gallerybox > div,
.card-infobox-container div > .thumb,
.card-infobox-container div > .thumb > div{
	width: auto !important;
}

.card-infobox-container .gallerybox {
	padding: 0.25em;
}

.card-infobox-container .gallerytext {
	padding: 0.5em;	
	text-align: center;
	margin:0;
}


.card-infobox-container a .image,
.card-infobox-container .gallerycarousel,
.card-infobox-container .gallery .mw-gallery-slideshow-img-container{
	min-height: 497px;
	min-width: 350px;
}

@media only screen and (max-width: 600px) {

	.card-infobox-container {
		width:99%!important;
	}
}

/*
Dynamic table output of cargo queries
*/
.cargoDynamicTable  th.sorting {
	min-width:120px;
}

.cargoQueryTable tr:hover {
	background-color: #F3F3F3 !important
}

.cargoQueryTable thead {
	background-color: #FFFFFF !important
}

.cargoQueryTable tbody td {
	border-top: 1px solid #ddd;
}

.cargoQueryTable tr:nth-child(odd) {
	background-color: #f9f9f9
}


/* Tabs */
.card_tab_container {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-bottom: 5px;
}
.card_tab {
	min-width: 65px;
	text-align: center;
	padding: 0.3em 0.3em 0.3em 0.3em;
	margin: 5px -1px 0px -1px;
	
	background-color: #EAECF0;
	border-bottom: solid #B32424 2px;
	border-top: solid #B32424 1.5px;
	border-left: solid #B32424 1.5px;
	border-right: solid #B32424 1.5px;
}

.card_tab_active {
	border-bottom: none !important;
	border-top: solid #B32424 2px !important;
	border-left: solid #B32424 2px !important;
	border-right: solid #B32424 2px !important;
	background-color: transparent !important;
}

.card_tab_separator {
	height: inherit;
	width: 5px;
	
	border-bottom: solid #B32424 2px;
}
.card_tab_filler {
	flex-grow: 0.1;
	height: inherit;
	margin-top: 5px;
	
	border-bottom: solid #B32424 2px;
}

.card_tab_filler_right {
	flex-grow: 20;
	height: inherit;
	margin-top: 5px;
	
	border-bottom: solid #B32424 2px;
}
.card_tab_active {
	margin: 0px -0.5px 0px -0.5px;
}

/* These two ensure the culture icon shows for just the active tab of card pages*/
.card_tab .tab-icon {
	display:none;
}
.card_tab.card_tab_active .tab-icon {
	display:inline;
}


/*
Image tiles
*/

.image-tile div.floatleft{
	margin:0;
	padding:0;
}
.image-tile img:hover{
	opacity: 0.5;
}


/*
Main page
*/
@media only screen and (min-width: 851px) {
	.page-Main_Page #mw-content-block {
		max-width:100%;
	}
}

body.page-Main_Page #mw-related-navigation,
body.page-Main_Page .firstHeading { 
	display: none; 
}

/*
Page form boxes
*/

.sidebar {
	background-color: var(--theme-page-accent-mix-color);
    border: 21px solid transparent;
    padding: 1px;
    margin: 5px;
	border-image: url('https://wiki.lotrtcgpc.net/images/form-section-border.png') 21 round;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
	max-width:400px
}

.sidebar .title {
	font-weight: bold;
	font-size: 1.5em;
}

.sidebar .heading {
	font-weight: bold;
	font-size: 1.2em;
}

.flex {
	display:flex; 
	flex-flow: row wrap; 
	gap:0px; 
}