custom.css: admonition colors (info boxes)

obx-vivien · obx-vivien · commit c39519040f34 · 2025-08-27T12:14:19.000+02:00
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -918,3 +918,72 @@ div[class*="docPage"] {
   }
 }
 
+/* ===== CUSTOM ADMONITION COLORS ===== */
+
+/* Info admonition - Blue (#2A3850) */
+.alert--info {
+  --ifm-alert-background-color: rgba(42, 56, 80, 0.1) !important;
+  --ifm-alert-background-color-highlight: rgba(42, 56, 80, 0.15) !important;
+  --ifm-alert-foreground-color: #2A3850 !important;
+  --ifm-alert-border-color: #2A3850 !important;
+}
+
+/* Tip admonition - Teal (#17A6A6) */
+.alert--tip {
+  --ifm-alert-background-color: rgba(23, 166, 166, 0.1) !important;
+  --ifm-alert-background-color-highlight: rgba(23, 166, 166, 0.15) !important;
+  --ifm-alert-foreground-color: #17A6A6 !important;
+  --ifm-alert-border-color: #17A6A6 !important;
+}
+
+/* Warning admonition - Orange (#F5962D) */
+.alert--warning {
+  --ifm-alert-background-color: rgba(245, 150, 45, 0.1) !important;
+  --ifm-alert-background-color-highlight: rgba(245, 150, 45, 0.15) !important;
+  --ifm-alert-foreground-color: #F5962D !important;
+  --ifm-alert-border-color: #F5962D !important;
+}
+
+/* Note admonition - Keep using blue like info */
+.alert--note {
+  --ifm-alert-background-color: rgba(42, 56, 80, 0.1) !important;
+  --ifm-alert-background-color-highlight: rgba(42, 56, 80, 0.15) !important;
+  --ifm-alert-foreground-color: #2A3850 !important;
+  --ifm-alert-border-color: #2A3850 !important;
+}
+
+/* Success/Caution admonitions - Keep existing colors but ensure consistency */
+.alert--success {
+  --ifm-alert-background-color: rgba(0, 164, 0, 0.1) !important;
+  --ifm-alert-background-color-highlight: rgba(0, 164, 0, 0.15) !important;
+  --ifm-alert-foreground-color: #17A6A6 !important;
+  --ifm-alert-border-color: #17A6A6 !important;
+}
+
+.alert--caution {
+  --ifm-alert-background-color: rgba(255, 230, 0, 0.1) !important;
+  --ifm-alert-background-color-highlight: rgba(255, 230, 0, 0.15) !important;
+  --ifm-alert-foreground-color: #e6a700 !important;
+  --ifm-alert-border-color: #e6a700 !important;
+}
+
+/* Dark mode adjustments for custom admonition colors */
+[data-theme='dark'] .alert--info {
+  --ifm-alert-background-color: rgba(42, 56, 80, 0.2) !important;
+  --ifm-alert-background-color-highlight: rgba(42, 56, 80, 0.25) !important;
+}
+
+[data-theme='dark'] .alert--tip {
+  --ifm-alert-background-color: rgba(23, 166, 166, 0.2) !important;
+  --ifm-alert-background-color-highlight: rgba(23, 166, 166, 0.25) !important;
+}
+
+[data-theme='dark'] .alert--warning {
+  --ifm-alert-background-color: rgba(245, 150, 45, 0.2) !important;
+  --ifm-alert-background-color-highlight: rgba(245, 150, 45, 0.25) !important;
+}
+
+[data-theme='dark'] .alert--note {
+  --ifm-alert-background-color: rgba(42, 56, 80, 0.2) !important;
+  --ifm-alert-background-color-highlight: rgba(42, 56, 80, 0.25) !important;
+}
