MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* A-B Testing */
div.lofe-size-a {font-size:75%;}
div.lofe-size-b {font-size:80%;}
div.lofe-size-c {font-size:85%;}
/* LOFE */
/* Overall wrapper, enclosing the example image and text. */
div.lofe-examples {
display:flex;
justify-content:center;
align-items:flex-start;
}
div.lofe-flexible {
flex-direction:row;
flex-wrap:wrap;
}
div.lofe-side-by-side {
flex-direction:row;
flex-wrap:nowrap;
}
div.lofe-top-and-bottom {
flex-direction:column;
flex-wrap:nowrap;
}
/* Old method --DEPRECATED, DELETE */
div.lofe-examples-side-by-side {
display:flex;
flex-direction:row;
justify-content:center;
align-items:flex-start;
flex-wrap:nowrap;
}
div.lofe-examples-flex {
display:flex;
flex-direction:row;
justify-content:center;
align-items:flex-start;
flex-wrap:wrap;
}
div.lofe-example-old {
float:left;
margin-left:auto;
margin-right:auto;
}
/* Individual example wrappers */
div.lofe-example {
padding:1em;
}
div.lofe-side-by-side div.lofe-example {
max-width:49%;
}
/* Image examples */
.lofe-image, .lofe-image img {
width:100%;
}
.lofe-image img {height:auto;}
div.lofe-text {
width:100%;
max-width:50em;
margin-top:0;
background-color: white;
}
/* Text examples */
div.lofe-text pre {
background-color: white;
margin-top:0;
}
/* Discussion block */
div.lofe-discussion {
display:block;
clear:both;
margin-top:1em;
padding:0.5em;
}
/* Allow shrinking side by side text slightly to fit better in medium screens */
div.lofe-size-small {
font-size:85%;
}
div.lofe-size-normal {
font-size:100%;
}
/* Width classes */
/* Set along with the lofe-example class to set the width of the image and text for each example */
div.lofe-image-width-15 {width:15em;}
div.lofe-image-width-20 {width:20em;}
div.lofe-image-width-25 {width:25em;}
div.lofe-image-width-30 {width:30em;}
div.lofe-image-width-35 {width:35em;}
div.lofe-image-width-40 {width:40em;}
div.lofe-image-width-45 {width:45em;}
div.lofe-image-width-50 {width:50em;}
div.lofe-image-width-55 {width:55em;}
div.lofe-image-width-60 {width:60em;}
div.lofe-image-width-65 {width:65em;}
div.lofe-image-width-70 {width:70em;}
div.lofe-text-width-20 {min-width:20em;}
div.lofe-text-width-25 {min-width:25em;}
div.lofe-text-width-30 {min-width:30em;}
div.lofe-text-width-35 {min-width:35em;}
div.lofe-text-width-40 {min-width:40em;}
div.lofe-text-width-45 {min-width:45em;}
div.lofe-text-width-50 {min-width:50em;}
div.lofe-text-width-55 {min-width:55em;}
div.lofe-text-width-60 {min-width:60em;}
div.lofe-text-width-65 {min-width:65em;}
div.lofe-text-width-70 {min-width:70em;}
div.lofe-text-width-75 {min-width:75em;}
div.lofe-text-width-100 {min-width:100em;}
div.lofe-image-width-x30 {max-width:30em;}
div.lofe-image-width-x40 {max-width:40em;}
div.lofe-image-width-20-30 {min-width:20em;max-width:30em;}
div.lofe-example-width-20 {min-width:20em;}
div.lofe-example-width-none{}
/* LEGACY CODE--TO BE DELETED */
/* Set the min and max widths for the image and text elements */
/* Currently the image gets ONLY a max and the text ONLY a min. */
/* minimums with m */
div.lofe-m20 {min-width:20em;}
div.lofe-m25 {min-width:25em;}
div.lofe-m30 {min-width:30em;}
div.lofe-m35 {min-width:35em;}
div.lofe-m40 {min-width:40em;}
div.lofe-m45 {min-width:45em;}
div.lofe-m50 {min-width:50em;}
div.lofe-m55 {min-width:55em;}
div.lofe-m60 {min-width:60em;}
div.lofe-m65 {min-width:65em;}
div.lofe-m70 {min-width:70em;}
/* maximums with x */
div.lofe-x20 {max-width:20em;}
div.lofe-x25 {max-width:25em;}
div.lofe-x30 {max-width:30em;}
div.lofe-x35 {max-width:35em;}
div.lofe-x40 {max-width:40em;}
div.lofe-x45 {max-width:45em;}
div.lofe-x50 {max-width:50em;}
div.lofe-x55 {max-width:55em;}
div.lofe-x60 {max-width:60em;}
div.lofe-x65 {max-width:65em;}
div.lofe-x70 {max-width:70em;}
/* This code will be applied to all pages in the LOFE */
.ns-3002 #content, .ns-3001 #content {background-color:#f6f6f6; }
.ns-3002 #content .navbar, .ns-3001 #content .navbar {
background-color:white;
}
/* Remove the sidebar from LOFE pages */
.ns-3002 #mw-panel {visibility: hidden;}
.ns-3002 #content {margin-left:0;}