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);
}