MediaWiki:Common.css: Difference between revisions

simplify duplicates
(try 40/60)
(simplify duplicates)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* <source lang="css"> */
/* <source lang="css"> */


Line 1,066: Line 1,065:
     width: 29%;
     width: 29%;
}
}
@media only screen and (max-width: 800px) {
    /* Decouple the columns on narrow screens */
    .portal-column-left,
    .portal-column-right,
    .portal-column-left-wide,
    .portal-column-right-narrow,
    .portal-column-left-extra-wide,
    .portal-column-right-extra-narrow {
        float: inherit;
        width: inherit;
    }
/* </source> */


/* Additional portal column widths for new layouts */
/* Additional portal column widths for new layouts */
Line 1,086: Line 1,071:
     width: 33.3%;
     width: 33.3%;
}
}
.portal-column-left-75 {
.portal-column-left-75 {
     float: left;
     float: left;
Line 1,095: Line 1,079:
     width: 24%; /* 25% minus 1% gap */
     width: 24%; /* 25% minus 1% gap */
}
}
.portal-column-left-60 {
.portal-column-left-60 {
     float: left;
     float: left;
Line 1,104: Line 1,087:
     width: 39%; /* 40% minus 1% gap */
     width: 39%; /* 40% minus 1% gap */
}
}
.portal-column-left-25 {
.portal-column-left-25 {
     float: left;
     float: left;
Line 1,113: Line 1,095:
     width: 74%; /* 75% minus 1% gap */
     width: 74%; /* 75% minus 1% gap */
}
}
/* Mobile fallback – collapse everything on narrow screens (extend existing @media block) */
@media only screen and (max-width: 800px) {
    .portal-column-33,
    .portal-column-left-75, .portal-column-right-25,
    .portal-column-left-60, .portal-column-right-40,
    .portal-column-left-25, .portal-column-right-75 {
        float: none !important;
        width: 100% !important;
    }
}
/* 40/60 portal column widths */
.portal-column-left-40 {
.portal-column-left-40 {
     float: left;
     float: left;
Line 1,135: Line 1,104:
}
}


/* Mobile fallback (append to existing @media block) */
/* Mobile fallback – collapse everything on narrow screens */
@media only screen and (max-width: 800px) {
@media only screen and (max-width: 800px) {
     .portal-column-left-40,
    /* Decouple the columns on narrow screens */
     .portal-column-right-60 {
    .portal-column-left,
    .portal-column-right,
     .portal-column-left-wide,
    .portal-column-right-narrow,
    .portal-column-left-extra-wide,
    .portal-column-right-extra-narrow,
    .portal-column-33,
    .portal-column-left-75, .portal-column-right-25,
    .portal-column-left-60, .portal-column-right-40,
     .portal-column-left-25, .portal-column-right-75,
    .portal-column-left-40, .portal-column-right-60 {
         float: none !important;
         float: none !important;
         width: 100% !important;
         width: 100% !important;
     }
     }
}
}
/* </source> */