MediaWiki:Fusion/stylesheets/portable infobox.css: Unterschied zwischen den Versionen

aus Memory Alpha, der freien deutschen Star-Trek-Datenbank
Spring zu: Navigation, suche
imported>Trollocool
imported>Trollocool
Zeile 112: Zeile 112:
 
     0% {max-height:1.4em}
 
     0% {max-height:1.4em}
 
     100% {max-height:20em}
 
     100% {max-height:20em}
 +
}
 +
 +
/*Episoden-Sidebar-spezifisches CSS*/
 +
.pi-theme-Episode .pi-header {
 +
    text-align:center;
 +
    color:inherit;
 +
    font-size:115%;
 +
    margin-top:1.5em;
 +
}
 +
.pi-theme-Episode .pi-navigation .sub-sidebar {
 +
    margin-top:.3em;
 +
    text-align:left;
 +
}
 +
.pi-theme-Episode .pi-navigation .sub-sidebar dt {
 +
    display:none;
 +
}
 +
.pi-theme-Episode > .pi-navigation {
 +
    text-align:left;
 
}
 
}

Version vom 4. September 2017, 16:56 Uhr

.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:0 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;
    margin-bottom:1px;
}
.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 {
    font-weight:normal;
    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}
}

/*Episoden-Sidebar-spezifisches CSS*/
.pi-theme-Episode .pi-header {
    text-align:center;
    color:inherit;
    font-size:115%;
    margin-top:1.5em;
}
.pi-theme-Episode .pi-navigation .sub-sidebar {
    margin-top:.3em;
    text-align:left;
}
.pi-theme-Episode .pi-navigation .sub-sidebar dt {
    display:none;
}
.pi-theme-Episode > .pi-navigation {
    text-align:left;
}