Template:Infobox/styles.css

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

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

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

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

/** 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 { border: none; font-size: 1em; overflow: hidden; height: 1%; }

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

/** SECTIONS **/ /* Section */ [class*="infobox-"] > .cluster { display: flex; flex-flow: column; }

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

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

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

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

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

/* Image */ .infobox-default > .image { padding: 3px 0; }

/* Universe */ .infobox-default > .universe { padding: 3px 0; margin-bottom: 3px; }

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

/* Group header */ .infobox-default > .header { margin-bottom: 3px; background-color: #cccccc; text-align: center; font-weight: bold; cursor: pointer }

.infobox-default > .header::after { content: " ᐱ"; }

.infobox-default > .header.closed::after { content: " ᐯ"; } /******** ********/ /* Section */ .infobox-default > .cluster > .section { margin-bottom: 3px; }

/* Data label */ .infobox-default > .cluster > .section > .label { background-color: #ebebeb; padding: 3px; font-size: 0.9em; }

/* Data */ .infobox-default > .cluster > .section > .data { background-color: white; padding: 3px; font-size: 0.9em; }