custom.css: admonition colors (info boxes)

Author: obx-vivien

src/css/custom.css

@@ -917,3 +917,73 @@ div[class*="docPage"] {
    /*  outline: 30px solid rgb(255, 98, 0) !important;*/
   }
 }
+
+/* ===== 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;
+}