MediaWiki:Gadget-ms-Infoboxes.css

Clear your cache often around here
After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.
Firefox: hold down Shift while performing a page reload.
Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
Safari users should simultaneously hold down ⌘ + Option + E. You may need to enable the Develop menu first
Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* ========================
   This CSS page controls 
   the GENERAL look of infoboxes.
 
   If you're looking for styles that
   only affect INDIVIDUAL infoboxes,
   please go to MediaWiki:Gadget-ms-Themes.css
   ========================= */
 
.portable-infobox {
    border: 1px solid var(--accent-2);
    background: #fff;
    color: black;
    line-height: 130%;
    padding: 5px;
    margin-top: 1px;
    margin-right: 2.5px;
    border-radius: 1.5px 3px 12px 13px;
}

.portable-infobox:first-of-type {
    padding-bottom: 9px;
}


@media screen and (min-width: 721px) {
	.portable-infobox {
		width: 250px !important;
	}
}
@media screen and (max-width: 720px) {
	.portable-infobox {
		max-width: 400px;
		margin: auto;
        border-radius: 3px;
        clear: both;
	}
    .portable-infobox:first-of-type {
        padding-bottom: 5px;
    }
	.stub-type ~ .portable-infobox {
		margin-top: 35px;
	}
	.portable-infobox + .portable-infobox {
		margin-top: 0;
	}
}
.portable-infobox .pi-item-spacing {
     padding: 1px 0 0 0;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header,
.portable-infobox .pi-title p,
.portable-infobox .pi-header p {
    background: var(--accent-1);
    color: var(--alt-text-color)!important;
    font-weight: bold;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    line-height: 140%;
}
.portable-infobox .pi-title {
    font-size: 1.2em; /* 19.2px at normal font size */
    padding: 10px;
    margin: 0;
}
.portable-infobox .pi-title:after {
    border: none!important;
    margin-bottom: -2px;
}

.pi-header {
    line-height: 1.2em;
    font-size: 1.0em; /* 16px at normal font size */
    border-bottom: none;
}
.pi-horizontal-group .pi-horizontal-group-item,
.pi-horizontal-group .pi-header {
    text-align: center!important;
} 
.portable-infobox .pi-title a,
.portable-infobox .pi-title a:link,
.portable-infobox .pi-title a:visited,
.portable-infobox .pi-title a:hover,
.portable-infobox .pi-header a,
.portable-infobox .pi-header a:visited,
.portable-infobox .pi-header a:link,
.portable-infobox .pi-header a:hover {
     color: var(--alt-text-color);
     text-decoration: underline;
}
.portable-infobox .pi-header .story-nav {
    background-color: var(--accent-1);
    color: var(--alt-text-color);
    border: 0;
}
.portable-infobox .pi-header .story-nav a,
.portable-infobox .pi-header .story-nav a:visited,
.portable-infobox .pi-header .story-nav a:link,
.portable-infobox .pi-header .story-nav a:hover {
     color: var(--alt-text-color);
     text-decoration: underline;
}
.portable-infobox .pi-title a: new,
.portable-infobox .pi-title a: new:visited,
.portable-infobox .pi-header a: new,
.portable-infobox .pi-header a: new:visited,
.portable-infobox .pi-navigation a: new,
.portable-infobox .pi-navigation a: new:visited {    
     color: #eee;
     text-decoration: underline;
}

.subpage-tabs-tab {
    background-color: #e5c687;
}

.portable-infobox .pi-data-label {
     background: #ececec;
     color: #000;
     padding-right: 10px;
        -ms-flex-preferred-size: 70%;
        -webkit-flex-basis: 70%;
        -moz-flex-basis: 70%;
        flex-basis: 70%;
     line-height: 120%;
     font-size: 0.75rem; /* 12px at normal font size */
     text-transform: none;
     letter-spacing: 0px;
     background-color: #ececec;
     text-align: right;
}
.portable-infobox .pi-data-label p {
	color: #000!important;
}
.portable-infobox .pi-data-value p {
	color: #222529!important;
}
.pi-item:hover > .pi-data-label, 
.pi-item:hover > .pi-data-value {
     background-color: rgba(229, 192, 118, 0.4);
}
.portable-infobox .pi-data-label a,
.portable-infobox .pi-data-label a:link,
.portable-infobox .pi-data-label a:visited,
.portable-infobox .pi-data-label a,
.portable-infobox .pi-data-label a:link,
.portable-infobox .pi-data-label a:visited {
        color: #000;
}

.portable-infobox .pi-data-value a,
.portable-infobox .pi-data-value a:link,
.portable-infobox .pi-data-value a:visited {
        color: #000;
}

.portable-infobox .pi-data-label a:hover,
.portable-infobox .pi-data-label a:link:hover,
.portable-infobox .pi-data-label a:visited:hover,
.portable-infobox .pi-data-value a:hover,
.portable-infobox .pi-data-value a:link:hover,
.portable-infobox .pi-data-value a:visited:hover {
        color: #000!important;
}
.portable-infobox .pi-data-label a.new,
.portable-infobox .pi-data-label a.new:visited,
.portable-infobox .pi-data-value a.new,
.portable-infobox .pi-data-value a.new:visited {
        color: #624747!important;
        text-decoration: none!important;
        
                   /* Infobox needs a diff color for 
                   "red" links because infoboxes
                   have light background */
}
.portable-infobox .pi-data-label a.new:hover,
.portable-infobox .pi-data-label a.new:visited:hover,
.portable-infobox .pi-data-value a.new:hover,
.portable-infobox .pi-data-value a.new:visited:hover {
        color: #555;
        text-decoration: none;
}
.portable-infobox .pi-data-value,
.portable-infobox .pi-data-label {
     -webkit-hyphens: none;
     -moz-hyphens: none;
     -ms-hyphens: none;
     hyphens: none;
     line-height: 130%;
}

.portable-infobox .pi-media-collection-tabs .pi-tab-link {
    padding: 4px;
    background: var(--contrast-color-2);
    border-radius: 6px;
    margin-top: 0.02px;
    margin-bottom: -1.8px;
}
.portable-infobox .pi-media-collection-tabs .pi-tab-link:not(.current) {
    border: solid 2.4px white;
}
.portable-infobox .pi-media-collection-tabs .pi-tab-link.current {
    background: var(--contrast-color-1);
}


.portable-infobox .pi-navigation {
      background-color: #ececec;
      line-height: 130%;
}
.pi-navigation:first-of-type { 
      line-height: 150%;
      padding: 0 5px 0 5px;
}

.portable-infobox .pi-navigation a,
.portable-infobox .pi-navigation a:link,
.portable-infobox .pi-navigation a:visited,
.portable-infobox .pi-navigation a:hover,
.portable-infobox .pi-navigation a,
.portable-infobox .pi-navigation a:link,
.portable-infobox .pi-navigation a:visited,
.portable-infobox .pi-navigation a:hover {
      color: #000!important;
}
.portable-infobox img.pi-image-thumbnail {
     width: 250px;
     height: auto;
     padding-top: 4px; 
}
img.pi-image-thumbnail {
    max-width: 100%;
    height: auto;
}

.pi-horizontal-group-item .embedvideo {
    margin-top: 3px;
}
.embedvideo-loader__title {
    display: none;
}
.pi-data-value .embedvideo {
	margin: auto !important;
}

@media screen and (max-width: 720px) {
    .portable-infobox img.pi-image-thumbnail {
        padding-top: 4px;
        width: 320px;
    }
    .pi-data-value .embedvideo {
        width: 324px!important;
        height: 185px!important;
        margin-top: 3px!important;
    }
    .embedvideo-wrapper {
        height: 182px!important;
    }
}

/* ==========================
   Collapsiblity styling 
   ========================== */


.pi-collapse-closed .pi-header:first-child,
.pi-collapse .pi-header:first-child {
    text-align: left !important;
    font-weight: normal;
    padding: 2px 0 2px 10px;
    border-color: #fff!important;
}
.pi-collapse-closed .pi-header: : after {
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   content: '[more]'!important;
   font-size: 0.625rem; /* 10px at normal font size */
   color: #fff;
   border-color: transparent;
   border-width: 0;
   width: 35px;
   right: 3px;
   top: 40%;
   display: none;
}
.pi-collapse .pi-header: after {
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   color: #fff;
   content: '[hide]';
   font-size: 0.625rem; /* 10px at normal font size */
   border-color: transparent;
   border-width: 0;
   width: 35px;
   right: 3px;
   top: 40%;
   display: none;
}

.portable-infobox:nth-of-type(n+2),
.collapsible-navfobox .portable-infobox {
    border-color: var(--accent-1);
}
.portable-infobox .pi-header + .pi-header {
	background: var(--accent-4);
}
.portable-infobox .pi-header:nth-child(n+2) {
    padding: 4px 9px 5px 9px;
    margin-top: 0px;
}
.portable-infobox .pi-header:nth-child(n+3) {
    padding: 2px 9px 2px 9px;
    margin-top: 5px;
}

.portable-infobox .pi-header {
    background: var(--accent-1);
}

.portable-infobox .pi-title p {
	margin: 0;
}

.pi-data-label p,
.portable-infobox .pi-data-value p {
	margin: 0.5em 0;
}
.pi-header p {
	margin: 0.25em 0;
}

/* Colours for navfoboxes */
:root.theme-dark .portable-infobox:nth-of-type(n+2),
:root.theme-dark .collapsible-navfobox .portable-infobox {
    border-color: hsl(var(--H-4) 40% 76%);
}
:root.theme-dark .portable-infobox .pi-header + .pi-header {
    background: hsl(var(--H-4) 39% 70%);
}
.portable-infobox .pi-header:nth-child(n+2) {
    padding: 4px 9px 5px;
    margin-top: 0;
}
.portable-infobox .pi-header:nth-child(n+3) {
    padding: 2px 9px;
    margin-top: 5px;
}
:root.theme-dark .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(3) {
    background: hsl(var(--H-4) 35% 63%);
}
:root.theme-dark .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(4) {
    background: hsl(var(--H-4c) 39% 70%);
}
:root.theme-dark .portable-infobox + .portable-infobox:nth-of-type(3) .pi-header:first-of-type {
    background: hsl(var(--H-4c) 44% 68%);
}

/* This temporary changes to the CSS were primarily created by [[User:Bongolium500]] with some additions from [[User:Spongebob456]] and [[User:SOTO]], and readded by [[User:OncomingStorm12th]]. It aims to emulate the Oasis skin as much as possible and will likely be replaced by an entirely new style sometime in the near future. It is a mixture of imports of old stylesheets, direct copy-pastes of sections of old style sheets and slight edits of old stylesheets. */

/* A few tweaks to infoboxes - in use */
.page-content  .portable-infobox .pi-data-label {
    background: #ececec;
    color: #000;
    padding-right: 10px;
    -ms-flex-preferred-size: 70%;
    -webkit-flex-basis: 70%;
    -moz-flex-basis: 69%;
    flex-basis: 70%;
    line-height: 120%;
    font-size: 0.6875rem; /* 11px at normal font size */
    text-transform: none;
    letter-spacing: 0;
    background-color: #ececec;
    text-align: right;
}
.page-content .portable-infobox .pi-title {
    padding: 5px;
}
.page-content .portable-infobox .pi-header {
    padding: 3px;
}
.wds-tabs__tab {
    color: black;
}
.theme-dark .portable-infobox .pi-caption p,
.theme-light .portable-infobox .pi-caption p {
	color: black;
}
Anonymous

Search

MediaWiki:Gadget-ms-Infoboxes.css

Namespaces

More

Page actions

Navigation

Navigation

Topical pages

Other useful pages

Community

Wiki tools

Wiki tools

Anonymous

Search

MediaWiki:Gadget-ms-Infoboxes.css

Navigation

Wiki tools

Page tools
