Template:Test infobox/styles.css

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

/** POSITIONING **/ /* Mobile */ [class*="infobox-"] { display: flex; flex-wrap: wrap; float: right; 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 { width: 100%; line-height: 30px; font-size: 20px; }

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

/* Universe indicator */ [class*="infobox-"] > universe { width: 100%; }

/* Section header */ [class*="infobox-"] > header { width: 100%; line-height: 30px; font-size: 17px; }

/* Data label */ [class*="infobox-"] > label { width: 33%; text-align: center; line-height: 25px; }

/* Data */ [class*="infobox-"] > data { width: 62%; line-height: 25px; padding-left: 6px; }

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

/** DIVIDERS **/ /* Horizontal */ [class*="infobox-"] > hdivide { width: 100%; line-height: 2px; }

/* Vertical */ [class*="infobox-"] > vdivide { width: 2px; line-height: 2px; }

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

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

/** DEFAULT THEME **/ /* Border */ .infobox-default { border: 5px solid #4d4d4d; border-radius: 4px; }

/* Title */ .infobox-default > top { background-color: #999999; text-align: center; font-weight: bold; }

/* Universe indicator */ .infobox-default > universe { background-color: #bfbfbf; text-align: center; }

/* Section header */ .infobox-default > header { background-color: #bfbfbf; text-align: center; font-weight: bold; }

/* Data label */ .infobox-default > label { background-color: #dfdfdf; }

/* Data */ .infobox-default > data { background-color: white; }

/* Horizontal */ .infobox-default > hdivide { background-color: #4d4d4d; }

/* Vertical */ .infobox-default > vdivide { background-color: #4d4d4d; }