Toggle search
Toggle menu
1K
1.1K
35
7.2K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Gadget-Infobox.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit
No edit summary
Fixed styling when infobox has no image
 
(4 intermediate revisions by the same user not shown)
Line 8: Line 8:
     --druid-quaternary-background-color: var(--background-color-2b);
     --druid-quaternary-background-color: var(--background-color-2b);
     --druid-quinary-background-color: var(--background-color-1b);
     --druid-quinary-background-color: var(--background-color-1b);
     --druid-border-color: var(--border-color-base);
     --druid-border-color: rgba(var(--color-accent--rgb), 0.5);
     --druid-link-color: var(--background-color-4);
     --druid-link-color: rgba(var(--color-accent--rgb), 0.5);
     --druid-link-label-color: var(--color-base);
     --druid-link-label-color: var(--color-base);
     --druid-outer-border-radius: 10px;
     --druid-outer-border-radius: 10px;
Line 44: Line 44:
}
}


.druid-infobox .druid-title {
.druid-infobox .druid-title,
.druid-infobox .druid-subtitle {
     background: var(--druid-secondary-background-color);
     background: var(--druid-secondary-background-color);
     color: var(--druid-secondary-background-label-color);
     color: var(--druid-secondary-background-label-color);
Line 50: Line 51:
     text-align: center;
     text-align: center;
     font-size: 1.5em;
     font-size: 1.5em;
    font-family: 'PetitPlanet', 'Montserrat', sans-serif;
    padding: 0.15em 0.6em;
}
/* Only when subtitle is immediately after title */
.druid-infobox > div:has(> .druid-title):has(+ div > .druid-subtitle) > .druid-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* Only when no images */
.druid-infobox:not(:has(.druid-main-image, .druid-main-images)) .druid-title {
  margin-bottom: var(--druid-gap);
}
.druid-infobox .druid-subtitle {
    background: rgba(var(--color-accent--rgb), 0.8);
    font-size: 1.2em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
}


Line 56: Line 77:
     color: var(--druid-tertiary-background-label-color);
     color: var(--druid-tertiary-background-label-color);
     text-align: center;
     text-align: center;
     font-size: 1.5em;
     font-size: 1.35em;
}
     font-family: 'PetitPlanet', 'Montserrat', sans-serif;
 
.druid-infobox .druid-section {
     font-size: 1.25em;
    font-weight: 500;
     border-radius: var(--druid-inner-border-radius);
     border-radius: var(--druid-inner-border-radius);
     margin-bottom: var(--druid-gap);
     margin-bottom: var(--druid-gap);
    padding: 0.15em 0.6em;
}
}


Line 89: Line 107:
.druid-main-image img,
.druid-main-image img,
.druid-main-images img {
.druid-main-images img {
background: var(--druid-quinary-background-color);
     max-width: 324px;
     max-width: 320px;
     max-height: 500px;
     max-height: 500px;
     width: auto;
     width: auto;
     height: auto;
     height: auto;
     margin: calc(2px + var(--druid-gap)) 0;
     margin: calc(1px + var(--druid-gap)) 0;
    padding: var(--druid-gap);
     border-radius: var(--druid-inner-border-radius);
     border-radius: var(--druid-inner-border-radius);
}
/* Only if no image */
.druid-infobox div.druid-main-image:not(:has(*)) {
    height: var(--druid-gap);
}
}


Line 104: Line 125:
     flex-wrap: wrap;
     flex-wrap: wrap;
     justify-content: space-evenly;
     justify-content: space-evenly;
     padding: calc(2px + var(--druid-gap)) 0 0 0;
     padding: calc(1px + var(--druid-gap)) 0 0 0;
     gap: var(--druid-gap);
     gap: var(--druid-gap);
}
}
Line 120: Line 141:
     background: var(--druid-link-color);
     background: var(--druid-link-color);
     color: var(--druid-link-label-color);
     color: var(--druid-link-label-color);
    border-color: transparent;
}
}


.druid-main-images-label:not(.focused):hover {
.druid-main-images-label:not(.focused):hover {
     background: var(--druid-quinary-background-color);
     background: rgba(var(--color-accent--rgb), 0.15);
     border-color: var(--druid-link-color);
     border-color: var(--druid-link-color);
}
}
Line 241: Line 263:
     border-radius: var(--druid-inner-border-radius);
     border-radius: var(--druid-inner-border-radius);
     box-sizing: border-box;
     box-sizing: border-box;
}
.druid-infobox .druid-title {
    font-weight: 700;
}
}


Line 272: Line 290:
}
}


/*****************************************
.archive-number {
  TODO:
     padding: calc(var(--druid-gap)/4) var(--druid-gap);
  Delete all Portable Infobox CSS after converting all Portable Infoboxes
     border-radius: var(--druid-inner-border-radius);
  into DRUID Infoboxes
     outline: 1px solid rgba(128, 128, 128, 0.3);
*****************************************/
     margin-right: 0.25em;
 
.portable-infobox {
     min-width: 320px;
     background: var(--background-color-1);
     border-radius: 20px;
     padding: 10px;
}
}


.pi-title {
.archive-number.quality-none { background: var(--druid-secondary-background-color); }
    background-color: var(--color-accent);
.archive-number.quality-gray { background: #C7CAB4; }
    text-align: center;
.archive-number.quality-green { background: #83D083; }
    border-radius: 10px;
.archive-number.quality-blue { background: #95BFCC; }
    color: var(--color-accent-text);
.archive-number.quality-purple { background: #A680B1; }
    margin-bottom: 5px !important;
.archive-number.quality-gold { background: #C79D39; }
}


.pi-data {
.quality-label {
     background-color: var(--background-color-2);
     display: inline-flex;
    border-radius: 10px;
    align-items: center;
     margin-bottom: 5px;
    gap: 0.4rem;
     border: none;
    border-radius: var(--druid-inner-border-radius);
     line-height: 1;
     vertical-align: middle;
}
}


.pi-data:last-child {
.quality-label::before {
     margin-bottom: 0;
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-radius: calc(var(--druid-inner-border-radius) - var(--druid-gap));
     display: inline-block;
    outline: 1px solid rgba(64, 64, 64, 0.3);
}
}


.pi-data-label {
.quality-label.quality-none::before { background: var(--druid-quaternary-background-color); }
    color: var(--color-progressive);
.quality-label.quality-gray::before { background: #C7CAB4; }
    font-family: 'Inter' !important;
.quality-label.quality-green::before { background: #83D083; }
    font-weight: 700 !important;
.quality-label.quality-blue::before { background: #95BFCC; }
}
.quality-label.quality-purple::before { background: #A680B1; }
 
.quality-label.quality-gold::before { background: #C79D39; }
.portable-infobox .pi-data-label {
    flex: 95px;
}
 
.pi-image img {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px !important;
}
 
.pi-media-collection-tabs {
    gap: 5px;
    align-items: stretch !important;
    margin-bottom: 2px !important;
}
 
.pi-media-collection-tabs .current {
    background-color: var(--background-color-4) !important;
}
 
.pi-media-collection-tabs li {
    border-radius: 10px !important;
    background-color: var(--background-color-2) !important;
}
 
.pi-section-navigation .pi-section-tab, .pi-media-collection .pi-tab-link {
    max-width: none !important;
    flex-grow: 1;
}
 
.pi-media-collection .pi-tab-link {
    border: 0;
}
 
.pi-header {
    background-color: transparent !important;
    text-align: center;
    font-weight: 500 !important;
}
 
/* Group styling */
.pi-horizontal-group {
    margin-bottom: 5px;
    border: 1px solid transparent !important;
    border-spacing: 5px 0;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}
 
.pi-horizontal-group {
    td,
    th {
        border-color: var(--background-color-1) !important;
        border-width: 5px !important;
        background-color: var(--background-color-2);
    }
}
 
.pi-group {
    border: none;
}


/* Hide dummy infobox */
/* Hide dummy infobox until extension is removed */
aside.pi-theme-dummy,
aside.pi-theme-dummy,
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
Retrieved from "https://petitplanet.wiki/MediaWiki:Gadget-Infobox.css"