Difference between revisions of "MediaWiki:Common.css"

From emcawiki
Jump to: navigation, search
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
 +
 +
pre {
 +
    display: inline-block;
 +
    white-space: pre;
 +
}
  
 
.fluidMedia {
 
.fluidMedia {
 
     position: relative;
 
     position: relative;
     padding-bottom: 16.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
+
     padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
 
     padding-top: 30px;
 
     padding-top: 30px;
 
     height: 0;
 
     height: 0;
Line 15: Line 20:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 +
}
 +
 +
/* Content in columns with CSS instead of tables ([[Template:Columns]]) */
 +
div.columns-2 div.column {
 +
    /* @noflip */
 +
    float: left;
 +
    width: 50%;
 +
    min-width: 300px;
 +
}
 +
div.columns-3 div.column {
 +
    /* @noflip */
 +
    float: left;
 +
    width: 33.3%;
 +
    min-width: 200px;
 +
}
 +
div.columns-4 div.column {
 +
    /* @noflip */
 +
    float: left;
 +
    width: 25%;
 +
    min-width: 150px;
 +
}
 +
div.columns-5 div.column {
 +
    /* @noflip */
 +
    float: left;
 +
    width: 20%;
 +
    min-width: 120px;
 
}
 
}

Latest revision as of 09:12, 18 June 2023

/* CSS placed here will be applied to all skins */

pre {
    display: inline-block;
    white-space: pre;
}

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

/* Content in columns with CSS instead of tables ([[Template:Columns]]) */
div.columns-2 div.column {
    /* @noflip */
    float: left;
    width: 50%;
    min-width: 300px;
}
div.columns-3 div.column {
    /* @noflip */
    float: left;
    width: 33.3%;
    min-width: 200px;
}
div.columns-4 div.column {
    /* @noflip */
    float: left;
    width: 25%;
    min-width: 150px;
}
div.columns-5 div.column {
    /* @noflip */
    float: left;
    width: 20%;
    min-width: 120px;
}