MediaWiki:Gadget-ms-Infoboxes.css

/* ========================
   This CSS page controls 
   the GENERAL look of infoboxes.
 
   If you're looking for styles that
   only affect INDIVIDUAL infoboxes,
   please go to MediaWiki:Themes.css
   ========================= */
 
.portable-infobox {
    border:1px solid #e5c076;
    background:#fff;
    color:black;
    width:250px!important;
    line-height:130%;
    padding:5px;
}
.portable-infobox .pi-item-spacing {
     padding:1px 0 0 0;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
    background:#e5c076;
    color:#000;
    font-weight:bold;
    text-align:center;
    text-transform:none;
    letter-spacing:0;
    line-height:140%;
}
.portable-infobox .pi-title {
    font-size: 1.2em;
    padding:10px;
}
.pi-header {
    line-height: 1.2em;
    font-size: 1.0em;
}
.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:#000;
     text-decoration:none;
}
.portable-infobox .pi-header .story-nav {
    background:#fff;
    color:#000;
    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:#000;
     text-decoration:none;
}
.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:none;
}
.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: 12px;
     text-transform:none;
     letter-spacing:0px;
     background-color:#ececec;
     text-align:right;
}
.pi-item:hover > .pi-data-label, 
.pi-item:hover > .pi-data-value {
     background-color:rgba(229, 192, 118, 0.4);
}
.ns-0 .portable-infobox .pi-data-label a,
.ns-0 .portable-infobox .pi-data-label a:link,
.ns-0 .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;
}

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

.ns-0 .portable-infobox .pi-data-label a:hover,
.ns-0 .portable-infobox .pi-data-label a:link:hover,
.ns-0 .portable-infobox .pi-data-label a:visited:hover,
.ns-0 .portable-infobox .pi-data-value a:hover,
.ns-0 .portable-infobox .pi-data-value a:link:hover,
.ns-0 .portable-infobox .pi-data-value a:visited:hover {
        color:#000!important;
        text-decooration:underline;
}
.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 */
}
.ns-0 .portable-infobox .pi-data-label a.new:hover,
.ns-0 .portable-infobox .pi-data-label a.new:visited:hover,
.ns-0 .portable-infobox .pi-data-value a.new:hover,
.ns-0 .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-navigation {
      background-color:#ececec;
      line-height:130%;
}
.pi-navigation:first-of-type { 
      line-height:150%;
      padding: 0 5px 0 5px;
}

.ns-0 .portable-infobox .pi-navigation a,
.ns-0 .portable-infobox .pi-navigation a:link,
.ns-0 .portable-infobox .pi-navigation a:visited,
.ns-0 .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;
}

/* ==========================
   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:10px;
   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:10px;
   border-color:transparent;
   border-width:0;
   width:35px;
   right:3px;
   top:40%;
   display:none;
}

/* ==========================
   Navigation styling 
   ========================== */

.portable-infobox:nth-child(4) {
    border-color: #cda659;
}
.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;
}