MediaWiki:Common.css: Difference between revisions

From Test Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(37 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 */


/********/
/* LOFE */
/********/


/* Basic markup for LOFE images and text */


.lofe-image, .lofe-image img {
/* This styling will be applied to all pages in the LOFE and Library of Formatting Examples namespaces */
  width:100%;
 
}
.ns-3001 #content, .ns-3002 #content, .ns-3003 #content, .ns-3004 #content {background-color:#f6f6f6; }


.lofe-detail-image, .lofe-detail-image img {
.ns-3001 #content .navbar, .ns-3002 #content .navbar, .ns-3003 #content .navbar, .ns-3004 #content .navbar {
   width:100%;
   background-color:white;
  height:auto;
}
}


.lofe-image img {height:auto;}


div.lofe-text {
/* Remove the sidebar from Library pages (3002 namespace) only */
  width:100%;
  max-width:50em;
  margin-top:0;
  background-color: white;
}


div.lofe-text pre {
.ns-3002 #mw-panel {visibility: hidden;}
  background-color: white;
.ns-3002 #content {margin-left:0;}
  margin-top:0;
}


/* Set the min and max widths for the image and text elements in the different layouts  */


/* minimums with m */
/* Div and image styles used on Example pages, Most of these are set by the LOFE Example templates. */


div.lofe-m20 {min-width:20em;}
div.lofe-examples {
div.lofe-m30 {min-width:30em;}
  display:flex;
div.lofe-m35 {min-width:35em;}
  justify-content:center;
div.lofe-m40 {min-width:40em;}
  align-items:flex-start;
div.lofe-m45 {min-width:45em;}
  flex-direction:row;
div.lofe-m50 {min-width:50em;}
  flex-wrap:wrap;
div.lofe-m60 {min-width:60em;}
}


/* maximums with x */
/* Individual example wrappers */


div.lofe-x20 {max-width:20em;}
div.lofe-example {
div.lofe-x30 {max-width:30em;}
  padding:1em;
div.lofe-x40 {max-width:40em;}
}
div.lofe-x50 {max-width:50em;}


/* Support side-by-side images and text. */
/* Image examples */


div.lofe-examples-side-by-side {
.lofe-image, .lofe-image img {
   display:flex;
   width:100%;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:flex-start;
  flex-wrap:nowrap;
}
}


div.lofe-examples {
.lofe-image img {
   display:flex;
   height:auto;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:flex-start;
  flex-wrap:wrap;
}
}


div.lofe-example {
div.lofe-text {
   float:left;
   width:100%;
  margin-top:0;
  background-color: white;
}
}


div.lofe-examples-side-by-side div.lofe-example {
/* Text examples */
   max-width:49%;
 
div.lofe-text pre {
   background-color: white;
  margin-top:0;
}
}
/* Discussion block */


div.lofe-discussion {
div.lofe-discussion {
Line 76: Line 66:
   clear:both;
   clear:both;
   margin-top:1em;
   margin-top:1em;
  background-color: white;
   padding:0.5em;
   padding:0.5em;
}
}
Line 83: Line 72:
/* Allow shrinking side by side text slightly to fit better in medium screens */
/* Allow shrinking side by side text slightly to fit better in medium screens */


div.lofe-small {
div.lofe-size-small {
   font-size:85%;
   font-size:90%;
}
 
div.lofe-size-normal {
  font-size:100%;
}
}


/* This code will be applied to all pages in the LOFE */
/* When migrating to live wiki, need to replace 3000 with actual ID. */


.ns-3000 #content, .ns-3001 #content {background-color:#f6f6f6; }
/* Width classes */
 
/* Set the width in ems for each example image */


.ns-3000 #content .navbar, .ns-3001 #content .navbar {
div.lofe-image-width-15 {width:15em;}
  background-color:white;
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;}


/* Testing the possibility of removing the sidebar */
/* Set the minimum width in ems for each example text block */


.ns-3000 #mw-panel {visibility: hidden;}
div.lofe-text-width-20 {min-width:20em;}
.ns-3000 #content {margin-left:0;}
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;}

Latest revision as of 11:44, 27 December 2025

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

/********/
/* LOFE */
/********/


/* This styling will be applied to all pages in the LOFE and Library of Formatting Examples namespaces */

.ns-3001 #content, .ns-3002 #content, .ns-3003 #content, .ns-3004 #content {background-color:#f6f6f6; }

.ns-3001 #content .navbar, .ns-3002 #content .navbar, .ns-3003 #content .navbar, .ns-3004 #content .navbar {
  background-color:white;
}


/* Remove the sidebar from Library pages (3002 namespace) only */

.ns-3002 #mw-panel {visibility: hidden;}
.ns-3002 #content {margin-left:0;}


/* Div and image styles used on Example pages, Most of these are set by the LOFE Example templates. */

div.lofe-examples {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-direction:row;
  flex-wrap:wrap;
}

/* Individual example wrappers */

div.lofe-example {
  padding:1em;
}

/* Image examples */

.lofe-image, .lofe-image img {
  width:100%;
}

.lofe-image img {
  height:auto;
}

div.lofe-text {
  width:100%;
  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:90%;
}

div.lofe-size-normal {
  font-size:100%;
}


/* Width classes */

/* Set the width in ems for each example image */

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;}

/* Set the minimum width in ems for each example text block */

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;}