MediaWiki:Common.css: Difference between revisions

From LOTR-TCG Wiki
(adding no-select tags to the classes used for twilight and culture icons so that they don't get included when selecting text)
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 21: Line 21:
}
}


.outerquote {
display: table;
}
.ruling {
    background-color: #81bdf4;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px;
    margin: 5px;
    border-style: solid;
    border-width:0 0 0 3px;
}
.rulingtitle {
background-color: #96CCFF;
    margin: -0px -0px -5px 5px;
padding: 0px 0px 0px 7px;
}
.rulingsource {
    background-color: #96CCFF;
    margin: -0px -3px -10px -7px;
padding: 0px 0px 0px 20px;
}
.clarification {
    background-color: #c1f9bd;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px;
    margin: 5px;
    border-style: solid;
    border-width:0 0 0 3px;
}
.clarificationtitle {
background-color: #9dff96;
    margin: -0px -0px -5px 5px;
padding: 0px 0px 0px 7px;
}
.clarificationsource {
    background-color: #9dff96;
    margin: -0px -3px -10px -7px;
padding: 0px 0px 0px 20px;
}
.overruling {
    background-color: #f9b6c6;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px;
    margin: 5px;
    border-style: solid;
    border-width:0 0 0 3px;
}
.overrulingtitle {
background-color: #ff96b0;
    margin: -0px -0px -5px 5px;
padding: 0px 0px 0px 7px;
}
.overrulingsource {
    background-color: #ff96b0;
    margin: -0px -3px -10px -7px;
padding: 0px 0px 0px 20px;
}


.quote {
.quote {
Line 29: Line 97:
     border-style: solid;  
     border-style: solid;  
     border-width:0 0 0 3px;
     border-width:0 0 0 3px;
   
}
}



Latest revision as of 15:04, 18 April 2025

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


.ruling {
    background-color: #81bdf4;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px; 
    margin: 5px; 
    border-style: solid; 
    border-width:0 0 0 3px;
}

.rulingtitle {
	background-color: #96CCFF;
    margin: -0px -0px -5px 5px;
	padding: 0px 0px 0px 7px;
}

.rulingsource {
    background-color: #96CCFF;
    margin: -0px -3px -10px -7px;
	padding: 0px 0px 0px 20px;

}

.clarification {
    background-color: #c1f9bd;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px; 
    margin: 5px; 
    border-style: solid; 
    border-width:0 0 0 3px;
}

.clarificationtitle {
	background-color: #9dff96;
    margin: -0px -0px -5px 5px;
	padding: 0px 0px 0px 7px;
}

.clarificationsource {
    background-color: #9dff96;
    margin: -0px -3px -10px -7px;
	padding: 0px 0px 0px 20px;
}

.overruling {
    background-color: #f9b6c6;
    border-color: darkcyan;
    padding: 3px 3px 3px 7px; 
    margin: 5px; 
    border-style: solid; 
    border-width:0 0 0 3px;
}

.overrulingtitle {
	background-color: #ff96b0;
    margin: -0px -0px -5px 5px;
	padding: 0px 0px 0px 7px;
}

.overrulingsource {
    background-color: #ff96b0;
    margin: -0px -3px -10px -7px;
	padding: 0px 0px 0px 20px;
}

.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; 
}