Template:Inline box/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 .hgw-inline-box {
 	box-sizing: border-box;
-	border: 1px solid #a2a9b1;
+	border-width: 1px;
-	background-color: #fbfbfb;
+	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);
 }
@@ Line 15: / Line 51: @@
 .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;
+		--default-bg: var(--default-bg-d);
-		border-color: #5e7288;
+		--default-br: var(--default-br-d);
-	}
+		--warning-bg: var(--warning-bg-d);
+		--warning-br: var(--warning-br-d);
-	body.skin-timeless .hgw-inline-box-warning {
+		--critical-bg: var(--critical-bg-d);
-		background-color: #504438;
+		--critical-br: var(--critical-br-d);
-		border-color: #f28500;
+		--info-bg: var(--info-bg-d);
-	}
+		--info-br: var(--info-br-d);
+		--success-bg: var(--success-bg-d);
-	body.skin-timeless .hgw-inline-box-critical {
+		--success-br: var(--success-br-d);
-		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;
 	}
 }
@@ Line 66: / Line 71: @@
 html.skin-citizen-dark .hgw-inline-box {
-	background-color: #36415b;
+	--default-bg: var(--default-bg-d);
-	border-color: #5e7288;
+	--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);
 }
-html.skin-citizen-dark .hgw-inline-box-warning {
+.hgw-inline-box-warning {
-	background-color: #504438;
+    background-color: var(--warning-bg);
-	border-color: #f28500;
+    border-color: var(--warning--br);
 }
+.hgw-inline-box-critical {
-html.skin-citizen-dark .hgw-inline-box-critical {
+    background-color: var(--critical-bg);
-	background-color: #6c4543;
+    border-color: var(--critical--br);
-	border-color: #b32424;
 }
+.hgw-inline-box-info {
-html.skin-citizen-dark .hgw-inline-box-info {
+    background-color: var(--info-bg);
-	background-color: #273241;
+    border-color: var(--info--br);
-	border-color: #36c;
 }
+.hgw-inline-box-success {
-html.skin-citizen-dark .hgw-inline-box-success {
+    background-color: var(--success-bg);
-	background-color: #3c5442;
+    border-color: var(--success--br);
-	border-color: #68a174;
 }