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: #ffe7ce;
	--warning-br-l: #f28500;
	--critical-bg-l: #fee7e6;
	--critical-br-l: #b32424;
	--info-bg-l: #d8e8ff;
	--info-br-l: #36c;
	--success-bg-l: #d7ffe0;
	--success-br-l: #68a174;
	
	--default-bg-d: #36415b;
	--default-br-d: #5e7288;
	--warning-bg-d: #504438;
	--warning-br-d: #f28500;
	--critical-bg-d: #6c4543;
	--critical-br-d: #b32424;
	--info-bg-d: #273241;
	--info-br-d: #36c;
	--success-bg-d: #3c5442;
	--success-br-d: #68a174;

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