Template:Test infobox/styles.css

/***************************/ /**** UNIVERSAL VALUES *****/ /***************************/

/** POSITIONING **/ /* Mobile */ [class*="infobox-"] { display: flex; flex-flow: column wrap; width: 100%; }

/* Everything else */ @media only screen and (min-width: 768px) { [class*="infobox-"] { display: flex; flex-wrap: wrap; float: right; width: 25%; } }

/******** ********/

/** COMPARTMENTS **/ /* Title */ /* [class*="infobox-"] > .top { } */

/* Image */ [class*="infobox-"] > .image { background-color: white; text-align: center; }

/* Universe indicator */ /* [class*="infobox-"] > .universe { } */

/* Group header */ [class*="infobox-"] > .header { overflow: hidden; height: 1%; }

/******** ********/

/** SECTIONS **/ /* Section */ [class*="infobox-"] > .section { display: flex; flex-flow: row; width: 100%; }

/* Data label */ [class*="infobox-"] > .section > .label { word-break: break-all; width: 50%; text-align: center; }

/* Data */ [class*="infobox-"] > .section > .data { width: 100%; padding-left: 6px; }

/***************************/ /********** THEMES *********/ /***************************/

/** DEFAULT THEME **/ /* Border */ .infobox-default { border: 3px solid #4d4d4d; border-radius: 4px; } /******** ********/ /* Title */ .infobox-default > .top { border: 1px solid #4d4d4d; background-color: #999999; text-align: center; font-weight: bold; }

/* Image (border) */ .infobox-default > .image { border: 1px solid #4d4d4d; }

/* Universe indicator */ .infobox-default > .universe { border: 1px solid #4d4d4d; background-color: #bfbfbf; text-align: center; }

/* Group header */ .infobox-default > .header { border: 1px solid #4d4d4d; background-color: #bfbfbf; text-align: center; font-weight: bold; } /******** ********/ /* Data label */ .infobox-default > .section > .label { border: 1px solid #4d4d4d; background-color: #dfdfdf; }

/* Data */ .infobox-default > .section > .data { border: 1px solid #4d4d4d; background-color: white; }