MediaWiki:Common.css: Difference between revisions
From LOTR-TCG Wiki
No edit summary |
No edit summary |
||
(47 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
#mw-content-block.ts-inner { | |||
max-width: 125em; | |||
} | |||
.whitebg { | .whitebg { | ||
background: #ffffff; | 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; | |||
} | } | ||
Line 8: | Line 21: | ||
} | } | ||
.outerquote { | |||
display: table; | |||
} | |||
.quote { | .quote { | ||
background-color: #FAEBD7; | background-color: #FAEBD7; | ||
Line 16: | Line 31: | ||
border-style: solid; | border-style: solid; | ||
border-width:0 0 0 3px; | border-width:0 0 0 3px; | ||
} | } | ||
Line 57: | Line 73: | ||
} | } | ||
/* | |||
.card-infobox-container a[title="Toggle thumbnails"] { | .card-infobox-container a[title="Toggle thumbnails"] { | ||
display:none; | display:none; | ||
} | }*/ | ||
.card-infobox-container .oo-ui-buttonElement { | .card-infobox-container .oo-ui-buttonElement { | ||
Line 121: | Line 138: | ||
min-height: 497px; | min-height: 497px; | ||
min-width: 350px; | 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 | |||
} | } | ||
Line 132: | Line 179: | ||
} | } | ||
.card_tab { | .card_tab { | ||
min-width: | min-width: 65px; | ||
text-align: center; | text-align: center; | ||
padding: 0. | padding: 0.3em 0.3em 0.3em 0.3em; | ||
margin: 5px -1px 0px -1px; | margin: 5px -1px 0px -1px; | ||
Line 159: | Line 206: | ||
} | } | ||
.card_tab_filler { | .card_tab_filler { | ||
flex-grow: 0. | flex-grow: 0.1; | ||
height: inherit; | height: inherit; | ||
margin-top: 5px; | margin-top: 5px; | ||
Line 183: | Line 230: | ||
.card_tab.card_tab_active .tab-icon { | .card_tab.card_tab_active .tab-icon { | ||
display:inline; | 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; | |||
} | } |
Latest revision as of 00:44, 1 February 2023
/* 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;
}