New CSS class alert-info (#9145)

To be used by https://github.com/FreshRSS/FreshRSS/pull/9144

For instance bluish info box in the Origine theme in light mode:
<img width="813" height="196" alt="image" src="https://github.com/user-attachments/assets/1649cf9d-0287-4b18-9cc7-80f457ec4ae0" />

p/themes/Alternative-Dark/adark.css

@@ -36,6 +36,7 @@
 	--empty-feed-color: #e67e22;
 
 	--alert-warn-border-color: #615f20;
+	--alert-info-border-color: #0062b7;
 	--alert-success-border-color: #18521d;
 	--alert-error-border-color: #912621;
 
@@ -447,6 +448,10 @@ a:hover > .spinner {
 	border-color: var(--alert-warn-border-color);
 }
 
+.alert-info {
+	border-color: var(--alert-info-border-color);
+}
+
 .alert-success {
 	border-color: var(--alert-success-border-color);
 }

p/themes/Alternative-Dark/adark.rtl.css

@@ -36,6 +36,7 @@
 	--empty-feed-color: #e67e22;
 
 	--alert-warn-border-color: #615f20;
+	--alert-info-border-color: #0062b7;
 	--alert-success-border-color: #18521d;
 	--alert-error-border-color: #912621;
 
@@ -447,6 +448,10 @@ a:hover > .spinner {
 	border-color: var(--alert-warn-border-color);
 }
 
+.alert-info {
+	border-color: var(--alert-info-border-color);
+}
+
 .alert-success {
 	border-color: var(--alert-success-border-color);
 }

p/themes/Ansum/_components.css

@@ -179,6 +179,12 @@
 	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
 }
 
+.alert-info {
+	background: var(--info-light);
+	color: var(--info-text);
+	border: 1px solid color-mix(in srgb, var(--info-text) 20%, transparent);
+}
+
 .alert-success {
 	background: var(--success-light);
 	color: var(--success-text);

p/themes/Ansum/_components.rtl.css

@@ -179,6 +179,12 @@
 	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
 }
 
+.alert-info {
+	background: var(--info-light);
+	color: var(--info-text);
+	border: 1px solid color-mix(in srgb, var(--info-text) 20%, transparent);
+}
+
 .alert-success {
 	background: var(--success-light);
 	color: var(--success-text);

p/themes/Ansum/_variables.css

@@ -35,6 +35,9 @@
 	--warning-light: #fdfde0;
 	--warning-text: #73762f;
 
+	--info-light: #e6f3ff;
+	--info-text: #1a3d5c;
+
 	--success-bg: #10f5b2;
 	--success-light: #cffdef;
 	--success-text: #0c7556;

p/themes/Ansum/_variables.rtl.css

@@ -35,6 +35,9 @@
 	--warning-light: #fdfde0;
 	--warning-text: #73762f;
 
+	--info-light: #e6f3ff;
+	--info-text: #1a3d5c;
+
 	--success-bg: #10f5b2;
 	--success-light: #cffdef;
 	--success-text: #0c7556;

p/themes/Dark-pink/pinkdark.css

@@ -109,6 +109,10 @@ input:focus {
 	filter: brightness(3);
 }
 
+.alert-info {
+	border-color: #ffb6c1;
+}
+
 .stick .btn-important:first-child {
 	border-right-color: #fd6aae;
 }

p/themes/Dark-pink/pinkdark.rtl.css

@@ -109,6 +109,10 @@ input:focus {
 	filter: brightness(3);
 }
 
+.alert-info {
+	border-color: #ffb6c1;
+}
+
 .stick .btn-important:first-child {
 	border-left-color: #fd6aae;
 }

p/themes/Flat/flat.css

@@ -395,6 +395,12 @@ th {
 	border: 1px solid #eeb;
 }
 
+.alert-info {
+	background: #e6f3ff;
+	color: #1a3d5c;
+	border: 1px solid #b3d9ff;
+}
+
 .alert-success {
 	background: #dfd;
 	color: #484;

p/themes/Flat/flat.rtl.css

@@ -395,6 +395,12 @@ th {
 	border: 1px solid #eeb;
 }
 
+.alert-info {
+	background: #e6f3ff;
+	color: #1a3d5c;
+	border: 1px solid #b3d9ff;
+}
+
 .alert-success {
 	background: #dfd;
 	color: #484;

p/themes/Mapco/_components.css

@@ -166,6 +166,12 @@
 	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
 }
 
+.alert-info {
+	background: var(--info-light);
+	color: var(--info-text);
+	border: 1px solid color-mix(in srgb, var(--info-text) 20%, transparent);
+}
+
 .alert-success {
 	background: var(--success-light);
 	color: var(--success-text);

p/themes/Mapco/_components.rtl.css

@@ -166,6 +166,12 @@
 	border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
 }
 
+.alert-info {
+	background: var(--info-light);
+	color: var(--info-text);
+	border: 1px solid color-mix(in srgb, var(--info-text) 20%, transparent);
+}
+
 .alert-success {
 	background: var(--success-light);
 	color: var(--success-text);

p/themes/Mapco/_variables.css

@@ -38,6 +38,9 @@
 	--warning-light: #fdfde0;
 	--warning-text: #73762f;
 
+	--info-light: #e6f3ff;
+	--info-text: #1a3d5c;
+
 	--success-bg: #10f587;
 	--success-light: #cffde7;
 	--success-text: #0c7540;

p/themes/Mapco/_variables.rtl.css

@@ -38,6 +38,9 @@
 	--warning-light: #fdfde0;
 	--warning-text: #73762f;
 
+	--info-light: #e6f3ff;
+	--info-text: #1a3d5c;
+
 	--success-bg: #10f587;
 	--success-light: #cffde7;
 	--success-text: #0c7540;

p/themes/Nord/nord.css

@@ -43,6 +43,7 @@
 	--accent: var(--nord9-frost);
 	--red: var(--nord11-aurora);
 	--orange: var(--nord13-aurora);
+	--blue: var(--nord9-frost);
 	--green: var(--nord14-aurora);
 	--purple: var(--nord15-aurora);
 
@@ -461,6 +462,10 @@ svg:hover {
 	border-color: var(--orange);
 }
 
+.alert-info {
+	border-color: var(--blue);
+}
+
 .alert-error {
 	border-color: var(--red);
 }

p/themes/Nord/nord.rtl.css

@@ -43,6 +43,7 @@
 	--accent: var(--nord9-frost);
 	--red: var(--nord11-aurora);
 	--orange: var(--nord13-aurora);
+	--blue: var(--nord9-frost);
 	--green: var(--nord14-aurora);
 	--purple: var(--nord15-aurora);
 
@@ -461,6 +462,10 @@ svg:hover {
 	border-color: var(--orange);
 }
 
+.alert-info {
+	border-color: var(--blue);
+}
+
 .alert-error {
 	border-color: var(--red);
 }

p/themes/Origine/origine.css

@@ -42,6 +42,9 @@
 	--alert-warn-background-color: #ffffe0;
 	--alert-warn-font-color: #4b3315;
 	--alert-warn-border-color: #eeb;
+	--alert-info-background-color: #e6f3ff;
+	--alert-info-font-color: #1a3d5c;
+	--alert-info-border-color: #b3d9ff;
 	--alert-success-background-color: #e8ffe8;
 	--alert-success-font-color: #244424;
 	--alert-success-border-color: #cec;
@@ -540,6 +543,12 @@ button:hover .icon,
 	border: 1px solid var(--alert-warn-border-color);
 }
 
+.alert-info {
+	background-color: var(--alert-info-background-color);
+	color: var(--alert-info-font-color);
+	border: 1px solid var(--alert-info-border-color);
+}
+
 .alert-success {
 	background-color: var(--alert-success-background-color);
 	color: var(--alert-success-font-color);
@@ -1285,6 +1294,9 @@ button:hover .icon,
 		--alert-warn-background-color: #ffffe022;
 		--alert-warn-font-color: #ccc;
 		--alert-warn-border-color: #eeb;
+		--alert-info-background-color: #e6f3ff14;
+		--alert-info-font-color: #7fb3d9;
+		--alert-info-border-color: #b3d9ff;
 		--alert-success-background-color: #e8ffe814;
 		--alert-success-font-color: #96c196;
 		--alert-success-border-color: #cec;

p/themes/Origine/origine.rtl.css

@@ -42,6 +42,9 @@
 	--alert-warn-background-color: #ffffe0;
 	--alert-warn-font-color: #4b3315;
 	--alert-warn-border-color: #eeb;
+	--alert-info-background-color: #e6f3ff;
+	--alert-info-font-color: #1a3d5c;
+	--alert-info-border-color: #b3d9ff;
 	--alert-success-background-color: #e8ffe8;
 	--alert-success-font-color: #244424;
 	--alert-success-border-color: #cec;
@@ -540,6 +543,12 @@ button:hover .icon,
 	border: 1px solid var(--alert-warn-border-color);
 }
 
+.alert-info {
+	background-color: var(--alert-info-background-color);
+	color: var(--alert-info-font-color);
+	border: 1px solid var(--alert-info-border-color);
+}
+
 .alert-success {
 	background-color: var(--alert-success-background-color);
 	color: var(--alert-success-font-color);
@@ -1285,6 +1294,9 @@ button:hover .icon,
 		--alert-warn-background-color: #ffffe022;
 		--alert-warn-font-color: #ccc;
 		--alert-warn-border-color: #eeb;
+		--alert-info-background-color: #e6f3ff14;
+		--alert-info-font-color: #7fb3d9;
+		--alert-info-border-color: #b3d9ff;
 		--alert-success-background-color: #e8ffe814;
 		--alert-success-font-color: #96c196;
 		--alert-success-border-color: #cec;

p/themes/Pafat/pafat.css

@@ -66,6 +66,9 @@
 	--alert-warn-background-color: #ffe;
 	--alert-warn-border-color: #eeb;
 	--alert-warn-font-color: #c95;
+	--alert-info-background-color: #e6f3ff;
+	--alert-info-border-color: #b3d9ff;
+	--alert-info-font-color: #1a3d5c;
 	--alert-success-background-color: #dfd;
 	--alert-success-border-color: #cec;
 	--alert-success-font-color: #484;
@@ -436,6 +439,12 @@ th {
 	border: 1px solid var(--alert-warn-border-color);
 }
 
+.alert-info {
+	background: var(--alert-info-background-color);
+	color: var(--alert-info-font-color);
+	border: 1px solid var(--alert-info-border-color);
+}
+
 .alert-success {
 	background-color: var(--alert-success-background-color);
 	color: var(--alert-success-font-color);

p/themes/Pafat/pafat.rtl.css

@@ -66,6 +66,9 @@
 	--alert-warn-background-color: #ffe;
 	--alert-warn-border-color: #eeb;
 	--alert-warn-font-color: #c95;
+	--alert-info-background-color: #e6f3ff;
+	--alert-info-border-color: #b3d9ff;
+	--alert-info-font-color: #1a3d5c;
 	--alert-success-background-color: #dfd;
 	--alert-success-border-color: #cec;
 	--alert-success-font-color: #484;
@@ -436,6 +439,12 @@ th {
 	border: 1px solid var(--alert-warn-border-color);
 }
 
+.alert-info {
+	background: var(--alert-info-background-color);
+	color: var(--alert-info-font-color);
+	border: 1px solid var(--alert-info-border-color);
+}
+
 .alert-success {
 	background-color: var(--alert-success-background-color);
 	color: var(--alert-success-font-color);

p/themes/Swage/swage.css

@@ -530,6 +530,7 @@ li.item.separator {
 	font-size: 1.15em;
 }
 
+.alert-info,
 .alert-warn,
 .alert-success,
 .alert-error {
@@ -541,6 +542,11 @@ li.item.separator {
 	color: var(--color-text-alert);
 }
 
+.alert-info {
+	background-color: var(--color-background-light);
+	color: var(--color-text);
+}
+
 .alert-success {
 	background-color: var(--color-background-light);
 	color: var(--color-text-good);

p/themes/Swage/swage.rtl.css

@@ -530,6 +530,7 @@ li.item.separator {
 	font-size: 1.15em;
 }
 
+.alert-info,
 .alert-warn,
 .alert-success,
 .alert-error {
@@ -541,6 +542,11 @@ li.item.separator {
 	color: var(--color-text-alert);
 }
 
+.alert-info {
+	background-color: var(--color-background-light);
+	color: var(--color-text);
+}
+
 .alert-success {
 	background-color: var(--color-background-light);
 	color: var(--color-text-good);

p/themes/base-theme/base.css

@@ -262,6 +262,9 @@ th {
 .alert-warn {
 }
 
+.alert-info {
+}
+
 .alert-success {
 }
 

p/themes/base-theme/base.rtl.css

@@ -262,6 +262,9 @@ th {
 .alert-warn {
 }
 
+.alert-info {
+}
+
 .alert-success {
 }
 

p/themes/base-theme/frss.css

@@ -936,6 +936,10 @@ input[type="checkbox"]:focus-visible {
 	background: inherit;
 }
 
+.alert-info {
+	background: inherit;
+}
+
 .group-controls .alert {
 	width: 100%
 }

p/themes/base-theme/frss.rtl.css

@@ -936,6 +936,10 @@ input[type="checkbox"]:focus-visible {
 	background: inherit;
 }
 
+.alert-info {
+	background: inherit;
+}
+
 .group-controls .alert {
 	width: 100%
 }