MediaWiki:Portable infobox.css: Unterschied zwischen den Versionen

aus Memory Alpha, der freien deutschen Star-Trek-Datenbank
Spring zu: Navigation, suche
(Die Seite wurde neu angelegt: „.portable-infobox { width:210px; padding:3px; border:1px solid #3c3c43; box-sizing:border-box; font-size:10px; line-height:12px; ma…“)
 
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 13: Zeile 13:
 
.portable-infobox .pi-secondary-background {
 
.portable-infobox .pi-secondary-background {
 
     background-color:transparent;
 
     background-color:transparent;
 +
    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%);
 
}
 
}
 
.portable-infobox .pi-border-color {
 
.portable-infobox .pi-border-color {
Zeile 34: Zeile 39:
 
     padding: 4px;
 
     padding: 4px;
 
     text-align: center;
 
     text-align: center;
     font-weight:900;
+
     font-weight:700;
 
     color:inherit;
 
     color:inherit;
 
}
 
}
Zeile 83: Zeile 88:
 
.portable-infobox .pi-collapse .pi-header {
 
.portable-infobox .pi-collapse .pi-header {
 
     margin:0 0 .5em 0;
 
     margin:0 0 .5em 0;
     width:49%;
+
     width:100%;
     text-align:right;
+
     text-align:center;
 
     color:rgb(213,213,212);
 
     color:rgb(213,213,212);
 
     transition:color 200ms linear;
 
     transition:color 200ms linear;
Zeile 90: Zeile 95:
 
}
 
}
 
.portable-infobox .pi-collapse.pi-collapse-closed .pi-header {
 
.portable-infobox .pi-collapse.pi-collapse-closed .pi-header {
     color:#6bf
+
     color:#e69710;
 
}
 
}
 
.portable-infobox .pi-collapse .pi-header .pi-collapse-dots {
 
.portable-infobox .pi-collapse .pi-header .pi-collapse-dots {
Zeile 125: Zeile 130:
 
     width:auto;
 
     width:auto;
 
     height:auto;
 
     height:auto;
 +
}
 +
 +
.pi-data-value:not(:first-child){
 +
padding-left: 10px;
 
}
 
}
  

Aktuelle Version vom 2. November 2019, 21:45 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;
    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%);
}
.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:700;
    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:100%;
    text-align:center;
    color:rgb(213,213,212);
    transition:color 200ms linear;
    cursor: pointer;
}
.portable-infobox .pi-collapse.pi-collapse-closed .pi-header {
    color:#e69710;
}
.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}
}

.portable-infobox .releases .article-thumb{
    margin:0;
    max-width:100%;
    width:auto !important;
    height:auto;
}

.portable-infobox .releases .article-thumb img{
    max-width:100%;
    width:auto;
    height:auto;
}

.pi-data-value:not(:first-child){
	padding-left: 10px;
}

/*Releases*/
.portable-infobox .releases .sub-sidebar {display:flex!important; flex-direction:row-reverse; margin-top:.7em}
.portable-infobox .releases dt {display:none}
.portable-infobox .releases dd {margin-left:4px; width:97px}
.portable-infobox .releases dl {text-align:left; flex-basis:97px; margin:0; flex-grow:0; order:1}
.portable-infobox .releases figcaption {display:none}
.portable-infobox .releases figure {flex-basis:100px; order:2}