MediaWiki:Common.css: Difference between revisions

No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
No edit summary
Tags: Mobile edit Mobile web edit Advanced mobile edit
Line 1: Line 1:
/* Version 12.0 - Stable Miraheze Reconstruction */
/* Version 14.0 - Miraheze Reconstruction (Stable Build) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap');


Line 20: Line 20:
h2::before, h3::before { content: "\1F343\0020" !important; }
h2::before, h3::before { content: "\1F343\0020" !important; }


/* 2. PORTABLE INFOBOXES (The Final Fix) */
/* 2. PORTABLE INFOBOXES */
.portable-infobox {
.portable-infobox {
     background-color: #fff !important;
     background-color: #fff !important;
Line 27: Line 27:
     float: right !important;
     float: right !important;
     margin: 0 0 1em 1em !important;
     margin: 0 0 1em 1em !important;
     display: flex !important;
     display: block !important;  
    flex-direction: column !important; /* Forces vertical stacking for headers/images */
    border-collapse: collapse !important;
}
}


/* Force Title, Header, and Image to stretch 100% */
/* Force top elements to be full width (No squishing) */
.portable-infobox .pi-title,  
.portable-infobox .pi-title,  
.portable-infobox .pi-header,  
.portable-infobox .pi-header,  
Line 58: Line 56:
}
}


/* Side-by-Side Data Row Logic */
/* Data Row Alignment */
.pi-item.pi-data {
.pi-item.pi-data {
     display: flex !important;
     display: flex !important;
Line 67: Line 65:


.pi-data-label {
.pi-data-label {
     flex: 0 0 40% !important; /* Label takes 40% */
     flex: 0 0 40% !important;  
     background-color: #f2f2f2 !important;
     background-color: #f2f2f2 !important;
     padding: 8px !important;
     padding: 8px !important;
Line 77: Line 75:


.pi-data-value {
.pi-data-value {
     flex: 1 !important; /* Value fills the remaining 60% */
     flex: 1 !important;  
     padding: 8px !important;
     padding: 8px !important;
     background-color: #fff !important;
     background-color: #fff !important;
}
}


/* 3. DESKTOP CARD LAYOUT (1024px+) */
/* 3. DESKTOP CARD LAYOUT */
@media screen and (min-width: 1024px) {
@media screen and (min-width: 1024px) {
     #cosmos-content {
     #cosmos-content {
Line 101: Line 99:
         float: right !important;
         float: right !important;
     }
     }
}
/* 4. HEADER COLORS */
#cosmos-header, .header-container {
    background-color: var(--kh-green) !important;
    border-bottom: 3px solid var(--kh-yellow) !important;
}
}