Template:Inline box/styles.css

.hgw-inline-box { box-sizing: border-box; border: 1px solid #a2a9b1; background-color: #fbfbfb; padding: 0.5em; margin: 0.5em 0; }

.hgw-inline-box-image { vertical-align: top; position: relative; padding-right: 0.5em; top: -1px; }

.hgw-inline-box-text { }

/* specific kinds of box styles should go here */ /* make sure to also add in the dark theme section */ .hgw-inline-box-warning { background-color: #ffe7ce; border-color: #f28500; } .hgw-inline-box-critical { background-color: #fee7e6; border-color: #b32424; } .hgw-inline-box-info { background-color: #d8e8ff; border-color: #36c; } .hgw-inline-box-success { background-color: #d7ffe0; border-color: #68a174; }

@media (prefers-color-scheme: dark) { body.skin-timeless .hgw-inline-box { background-color: #36415b; border-color: #5e7288; }	body.skin-timeless .hgw-inline-box-warning { background-color: #504438; border-color: #f28500; }	body.skin-timeless .hgw-inline-box-critical { background-color: #6c4543; border-color: #b32424; }	body.skin-timeless .hgw-inline-box-info { background-color: #273241; border-color: #36c; }	body.skin-timeless .hgw-inline-box-success { background-color: #3c5442; border-color: #68a174; } }

/* i love duplicate code, oh wait css variables could probably solve this, but meh */

html.skin-citizen-dark .hgw-inline-box { background-color: #36415b; border-color: #5e7288; } html.skin-citizen-dark .hgw-inline-box-warning { background-color: #504438; border-color: #f28500; }

html.skin-citizen-dark .hgw-inline-box-critical { background-color: #6c4543; border-color: #b32424; }

html.skin-citizen-dark .hgw-inline-box-info { background-color: #273241; border-color: #36c; }

html.skin-citizen-dark .hgw-inline-box-success { background-color: #3c5442; border-color: #68a174; }