MediaWiki:Fusion/stylesheets/portable infobox.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
• Opera: Strg+F5

.portable-infobox {
    width:210px;
    padding:3px;
    border:1px solid #3c3c43;
    box-sizing:border-box;
    font-size:10px;
    line-height:12px;
    margin:0 0 16px 16px;
}
.portable-infobox.pi-background {
    background-color:#222226;
}
.portable-infobox .pi-secondary-background {
    background-color:transparent;
}
.portable-infobox .pi-border-color {
    border-color:transparent;
}
.portable-infobox .pi-font,.portable-infobox .pi-secondary-font,.portable-infobox .pi-title, .portable-infobox .pi-header {
    font-size:inherit;
    line-height:inherit;
}
.portable-infobox .pi-item-spacing {
    padding:0;
}

.portable-infobox .pi-title {
    cursor:pointer;
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #0e1519), color-stop(50%, #3a5766), color-stop(100%, #0e1519));
    background: -webkit-linear-gradient(left center, #0e1519 0%, #3a5766 50%, #0e1519 100%);
    background: -moz-linear-gradient(left center, #0e1519 0%, #3a5766 50%, #0e1519 100%);
    background: -o-linear-gradient(left center, #0e1519 0%, #3a5766 50%, #0e1519 100%);
    background: linear-gradient(left center, #0e1519 0%, #3a5766 50%, #0e1519 100%);
    padding: 4px;
    text-align: center;
    font-weight:900;
    color:inherit;
}
.portable-infobox .pi-image-thumbnail {
    max-width:100%;
    height:auto;
}
.portable-infobox .pi-data {
    justify-content:space-between;
}
.portable-infobox .pi-data-label {
    text-align:right;
    flex-basis:49%;
    color:inherit;
}
.portable-infobox .pi-data-value {
    flex-basis:49%;
    padding:0;
}
.portable-infobox .pi-data-value dd {
    margin:0;
}
.portable-infobox .pi-group {
    margin:1em 0;
}
.portable-infobox .pi-navigation {
    text-align:center;
    margin-top:1.5em;
}

.portable-infobox .pi-collapse {
    overflow:hidden;
    animation-name:open;
    animation-duration:200ms;
    animation-timing-function:ease-in;
    max-height:none;
    margin:.4em 0 .5em 0;
}
.portable-infobox .pi-collapse.pi-collapse-closed {
    animation-name:close;
    animation-duration:200ms;
    animation-timing-function:ease-out;
    max-height:1.4em;
    margin:.4em 0 0 0;
}
.portable-infobox .pi-collapse .pi-header {
    margin:0 0 .5em 0;
    width:49%;
    text-align:right;
    color:rgb(213,213,212);
    transition:color 200ms linear;
    cursor: pointer;
}
.portable-infobox .pi-collapse.pi-collapse-closed .pi-header {
    color:#6bf
}
.portable-infobox .pi-collapse .pi-header .pi-collapse-dots {
    opacity:0;
    transition:opacity 200ms linear;
}
.portable-infobox .pi-collapse.pi-collapse-closed .pi-header .pi-collapse-dots {
    opacity:1;
}
.portable-infobox .pi-collapse .pi-header:first-child::after {
    display:none;
}
.portable-infobox .pi-collapse.pi-collapse-closed .pi-data {
    display:flex;
}
@keyframes close {
    0% {max-height:20em}
    100% {max-height:1.4em}
}
@keyframes open {
    0% {max-height:1.4em}
    100% {max-height:20em}
}