Jump to content

MediaWiki:Gadget-Infobox.css: Difference between revisions

From The Petit Planet Wiki
No edit summary
Reduced min-width
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/*infobox*/
.portable-infobox {
.portable-infobox {
     background: var(--theme-color-1);
    min-width: 320px;
     background: var(--background-color-1);
     border-radius: 20px;
     border-radius: 20px;
     padding: 10px;
     padding: 10px;
Line 7: Line 7:


.pi-title {
.pi-title {
     background-color: var(--theme-accent-color);
     background-color: var(--color-accent);
     text-align: center;
     text-align: center;
     border-radius: 10px;
     border-radius: 10px;
     color: var(--page-text-color);
     color: var(--color-accent-text);
     margin-bottom: 5px !important;
     margin-bottom: 5px !important;
}
.skin-theme-clientpref-night .pi-title {
    color: var(--page-background-color);
}
}


.pi-data {
.pi-data {
     background-color: var(--theme-color-3);
     background-color: var(--background-color-2);
     border-radius: 10px;
     border-radius: 10px;
     margin-bottom: 5px;
     margin-bottom: 5px;
     border: none;
     border: none;
}
.pi-data:last-child {
    margin-bottom: 0;
}
}


.pi-data-label {
.pi-data-label {
     color: var(--theme-link-color);
     color: var(--color-progressive);
     font-family: 'Inter' !important;
     font-family: 'Inter' !important;
     font-weight: 700 !important;
     font-weight: 700 !important;
}
}


.pi-data:last-child {
.portable-infobox .pi-data-label {
     margin-bottom: 0;
     flex: 95px;
}
}


Line 48: Line 48:


.pi-media-collection-tabs .current {
.pi-media-collection-tabs .current {
     background-color: var(--theme-color-6) !important;
     background-color: var(--background-color-4) !important;
}
}


.pi-media-collection-tabs li {
.pi-media-collection-tabs li {
     border-radius: 10px !important;
     border-radius: 10px !important;
     background-color: var(--theme-color-3) !important;
     background-color: var(--background-color-2) !important;
}
}


Line 59: Line 59:
     max-width: none !important;
     max-width: none !important;
     flex-grow: 1;
     flex-grow: 1;
}
.pi-media-collection .pi-tab-link {
    border: 0;
}
}


Line 67: Line 71:
}
}


/* Group Styling */
/* Group styling */
.pi-horizontal-group {
.pi-horizontal-group {
     margin-bottom: 5px;
     margin-bottom: 5px;
Line 78: Line 82:


.pi-horizontal-group {
.pi-horizontal-group {
     td , th {
     td,
         border-color: var(--theme-color-1) !important;
    th {
         border-color: var(--background-color-1) !important;
         border-width: 5px !important;
         border-width: 5px !important;
         background-color: var(--theme-color-3);
         background-color: var(--background-color-2);
     }
     }
}
}
Line 87: Line 92:
.pi-group {
.pi-group {
     border: none;
     border: none;
}
/* Hide dummy infobox */
aside.pi-theme-dummy,
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
aside.pi-theme-dummy ~ aside.portable-infobox + p:empty + p > br:first-child {
    display: none;
}
}

Latest revision as of 08:23, 4 December 2025

.portable-infobox {
    min-width: 320px;
    background: var(--background-color-1);
    border-radius: 20px;
    padding: 10px;
}

.pi-title {
    background-color: var(--color-accent);
    text-align: center;
    border-radius: 10px;
    color: var(--color-accent-text);
    margin-bottom: 5px !important;
}

.pi-data {
    background-color: var(--background-color-2);
    border-radius: 10px;
    margin-bottom: 5px;
    border: none;
}

.pi-data:last-child {
    margin-bottom: 0;
}

.pi-data-label {
    color: var(--color-progressive);
    font-family: 'Inter' !important;
    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 */
.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 */
aside.pi-theme-dummy,
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
aside.pi-theme-dummy ~ aside.portable-infobox + p:empty + p > br:first-child {
    display: none;
}