Template:Inline box/styles.css

.hgw-inline-box { box-sizing: border-box; border-width: 1px; border-style: solid; padding: 0.5em; margin: 0.5em 0; --default-bg-l: #fbfbfb; --default-br-l: #a2a9b1; --warning-bg-l: #fae3ca; --warning-br-l: #f28500; --critical-bg-l: #fcd7d5; --critical-br-l: #b32424; --info-bg-l: #dae9ff; --info-br-l: #3065d0; --success-bg-l: #d1f9da; --success-br-l: #469a58; --default-bg-d: #2a2f3c; --default-br-d: #6c8bac; --warning-bg-d: #412e1b; --warning-br-d: #e8860f; --critical-bg-d: #3b2220; --critical-br-d: #c31919; --info-bg-d: #152842; --info-br-d: #1c5ee2; --success-bg-d: #263d2c; --success-br-d: #569c64;

--default-bg: var(--default-bg-l); --default-br: var(--default-br-l); --warning-bg: var(--warning-bg-l); --warning-br: var(--warning-br-l); --critical-bg: var(--critical-bg-l); --critical-br: var(--critical-br-l); --info-bg: var(--info-bg-l); --info-br: var(--info-br-l); --success-bg: var(--success-bg-l); --success-br: var(--success-br-l); background-color: var(--default-bg); border-color: var(--default-br); }

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

.hgw-inline-box-text { }

@media (prefers-color-scheme: dark) { body.skin-timeless .hgw-inline-box { --default-bg: var(--default-bg-d); --default-br: var(--default-br-d); --warning-bg: var(--warning-bg-d); --warning-br: var(--warning-br-d); --critical-bg: var(--critical-bg-d); --critical-br: var(--critical-br-d); --info-bg: var(--info-bg-d); --info-br: var(--info-br-d); --success-bg: var(--success-bg-d); --success-br: var(--success-br-d); } }

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

html.skin-citizen-dark .hgw-inline-box { --default-bg: var(--default-bg-d); --default-br: var(--default-br-d); --warning-bg: var(--warning-bg-d); --warning-br: var(--warning-br-d); --critical-bg: var(--critical-bg-d); --critical-br: var(--critical-br-d); --info-bg: var(--info-bg-d); --info-br: var(--info-br-d); --success-bg: var(--success-bg-d); --success-br: var(--success-br-d); }

.hgw-inline-box-warning { background-color: var(--warning-bg); border-color: var(--warning-br); } .hgw-inline-box-critical { background-color: var(--critical-bg); border-color: var(--critical-br); } .hgw-inline-box-info { background-color: var(--info-bg); border-color: var(--info-br); } .hgw-inline-box-success { background-color: var(--success-bg); border-color: var(--success-br); }