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
Adding DRUID Infobox to replace Portable Infobox. Portable Infobox is causing issues with mw:Extension:Popups, mw:Extension:TextExtracts, and mw:Extension:PageImages
Fixed styling when infobox has no image
 
(10 intermediate revisions by the same user not shown)
Line 7: Line 7:
     --druid-tertiary-background-label-color: var(--color-base);
     --druid-tertiary-background-label-color: var(--color-base);
     --druid-quaternary-background-color: var(--background-color-2b);
     --druid-quaternary-background-color: var(--background-color-2b);
     --druid-quinary-background-color: var(--color-surface-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 93: Line 111:
     width: auto;
     width: auto;
     height: auto;
     height: auto;
     margin: calc(2px + var(--druid-gap)) 0;
     margin: calc(1px + var(--druid-gap)) 0;
    border-radius: var(--druid-inner-border-radius);
}
 
/* Only if no image */
.druid-infobox div.druid-main-image:not(:has(*)) {
    height: var(--druid-gap);
}
}


Line 101: 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 117: 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 137: Line 162:
.druid-grid {
.druid-grid {
     display: grid;
     display: grid;
    gap: var(--druid-gap);
}
}


.druid-grid-item {
.druid-grid-item {
     background: var(--druid-background-color-2);
     background: var(--druid-quinary-background-color);
     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: var(--druid-gap);
}
}


Line 151: Line 178:
.druid-grid-item .druid-label,
.druid-grid-item .druid-label,
.druid-grid-item .druid-data {
.druid-grid-item .druid-data {
padding: 0.3em 0.6em;
     text-align: center;
     text-align: center;
    border-radius: calc(var(--druid-inner-border-radius) - (var(--druid-gap)/2));
}
}


.druid-grid-item .druid-label {
.druid-grid-item .druid-label {
     background: var(--druid-quaternary-background-color);
     background: var(--druid-quaternary-background-color);
    padding: 0.3em 0.6em;
    border-radius: var(--druid-inner-border-radius);
     margin-bottom: var(--druid-gap);
     margin-bottom: var(--druid-gap);
}
}
Line 163: Line 190:
.druid-grid-item .druid-data {
.druid-grid-item .druid-data {
     background: var(--druid-quinary-background-color);
     background: var(--druid-quinary-background-color);
    padding: 0.3em 0.6em;
    border-radius: var(--druid-inner-border-radius);
}
}


Line 193: Line 218:
     width: 20px;
     width: 20px;
     height: 20px;
     height: 20px;
     --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E") no-repeat;
     --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E") no-repeat;
     -webkit-mask: var(--mask);
     -webkit-mask: var(--mask);
     mask: var(--mask);
     mask: var(--mask);
Line 218: Line 243:
}
}


.druid-section-container:last-of-type .druid-row:last-of-type {
.druid-section-container:last-of-type .druid-row:last-of-type,
.druid-section-container:last-of-type .druid-collapsible-collapsed .druid-section {
     margin-bottom: 0;
     margin-bottom: 0;
}
}
Line 236: Line 262:
     background: var(--druid-quinary-background-color);
     background: var(--druid-quinary-background-color);
     border-radius: var(--druid-inner-border-radius);
     border-radius: var(--druid-inner-border-radius);
}
     box-sizing: border-box;
 
.druid-infobox .druid-title {
     font-weight: 700;
}
}


Line 267: 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;
.pi-data-label {
     border-radius: calc(var(--druid-inner-border-radius) - var(--druid-gap));
     color: var(--color-progressive);
     display: inline-block;
     font-family: 'Inter' !important;
     outline: 1px solid rgba(64, 64, 64, 0.3);
     font-weight: 700 !important;
}
 
.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 */
.quality-label.quality-none::before { background: var(--druid-quaternary-background-color); }
.pi-horizontal-group {
.quality-label.quality-gray::before { background: #C7CAB4; }
    margin-bottom: 5px;
.quality-label.quality-green::before { background: #83D083; }
    border: 1px solid transparent !important;
.quality-label.quality-blue::before { background: #95BFCC; }
    border-spacing: 5px 0;
.quality-label.quality-purple::before { background: #A680B1; }
    border-collapse: collapse;
.quality-label.quality-gold::before { background: #C79D39; }
    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"