:root {
--md-admonition-icon--o-auth: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon--e-mail-registration: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-e-mail-verification: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-user-login: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-qr-code: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-search-check: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-sun-moon: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-notebook-pen: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-loader: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-search: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-binoculars: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-search-code: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-move-horizontal: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-package-serach: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-eye: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-view: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-wrench: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-package-plus: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-drill: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-trash-2: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-chart-line: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-message-circle-more: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-banknote: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-receipt: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-circle-dollar-sign: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-lock: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-wallet: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon-droplet: url('data:image/svg+xml;charset=utf-8,');
}
/* Common style */
.md-typeset .admonition,
.md-typeset details {
border-radius: 6px;
}
.md-typeset details summary:hover {
background-color: rgba(255, 255, 255, 0.05);
transition: background-color 0.25s ease;
cursor: pointer;
}
/* OAuth (mint green) */
.md-typeset .admonition.o-auth,
.md-typeset details.o-auth {
border-color: #3ad29f;
}
.md-typeset .o-auth > .admonition-title,
.md-typeset .o-auth > summary {
background-color: rgba(58, 210, 159, 0.1);
}
.md-typeset .o-auth > .admonition-title::before,
.md-typeset .o-auth > summary::before {
background-color: #3ad29f;
mask-image: var(--md-admonition-icon--o-auth);
-webkit-mask-image: var(--md-admonition-icon--o-auth);
}
/* Email Registration (blue) */
.md-typeset .admonition.e-mail-registration,
.md-typeset details.e-mail-registration {
border-color: #4b9ce2;
}
.md-typeset .e-mail-registration > .admonition-title,
.md-typeset .e-mail-registration > summary {
background-color: rgba(75, 156, 226, 0.1);
}
.md-typeset .e-mail-registration > .admonition-title::before,
.md-typeset .e-mail-registration > summary::before {
background-color: #4b9ce2;
mask-image: var(--md-admonition-icon--e-mail-registration);
-webkit-mask-image: var(--md-admonition-icon--e-mail-registration);
}
/* Email Verification (teal) */
.md-typeset .admonition.e-mail-verification,
.md-typeset details.e-mail-verification {
border-color: #36cfc9;
}
.md-typeset .e-mail-verification > .admonition-title,
.md-typeset .e-mail-verification > summary {
background-color: rgba(54, 207, 201, 0.1);
}
.md-typeset .e-mail-verification > .admonition-title::before,
.md-typeset .e-mail-verification > summary::before {
background-color: #36cfc9;
mask-image: var(--md-admonition-icon-e-mail-verification);
-webkit-mask-image: var(--md-admonition-icon-e-mail-verification);
}
/* Username Login (purple) */
.md-typeset .admonition.user-login,
.md-typeset details.user-login {
border-color: #9b7ede;
}
.md-typeset .user-login > .admonition-title,
.md-typeset .user-login > summary {
background-color: rgba(155, 126, 222, 0.1);
}
.md-typeset .user-login > .admonition-title::before,
.md-typeset .user-login > summary::before {
background-color: #9b7ede;
mask-image: var(--md-admonition-icon-user-login);
-webkit-mask-image: var(--md-admonition-icon-user-login);
}
/* 2FA / QR Code (orange) */
.md-typeset .admonition.qr-code,
.md-typeset details.qr-code {
border-color: #f39c12;
}
.md-typeset .qr-code > .admonition-title,
.md-typeset .qr-code > summary {
background-color: rgba(243, 156, 18, 0.1);
}
.md-typeset .qr-code > .admonition-title::before,
.md-typeset .qr-code > summary::before {
background-color: #f39c12;
mask-image: var(--md-admonition-icon-qr-code);
-webkit-mask-image: var(--md-admonition-icon-qr-code);
}
/* Search Check (cyan blue) */
.md-typeset .admonition.search-check,
.md-typeset details.search-check {
border-color: #00c4cc;
}
.md-typeset .search-check > .admonition-title,
.md-typeset .search-check > summary {
background-color: rgba(0, 196, 204, 0.1);
}
.md-typeset .search-check > .admonition-title::before,
.md-typeset .search-check > summary::before {
background-color: #00c4cc;
mask-image: var(--md-admonition-icon-search-check);
-webkit-mask-image: var(--md-admonition-icon-search-check);
}
/* Sun-Moon (dual mode toggle - violet pink) */
.md-typeset .admonition.sun-moon,
.md-typeset details.sun-moon {
border-color: #d16be0;
}
.md-typeset .sun-moon > .admonition-title,
.md-typeset .sun-moon > summary {
background-color: rgba(209, 107, 224, 0.08);
}
.md-typeset .sun-moon > .admonition-title::before,
.md-typeset .sun-moon > summary::before {
background-color: #d16be0;
mask-image: var(--md-admonition-icon-sun-moon);
-webkit-mask-image: var(--md-admonition-icon-sun-moon);
}
/* Notebook Pen (lavender blue) */
.md-typeset .admonition.notebook-pen,
.md-typeset details.notebook-pen {
border-color: #7e8cea;
}
.md-typeset .notebook-pen > .admonition-title,
.md-typeset .notebook-pen > summary {
background-color: rgba(126, 140, 234, 0.08);
}
.md-typeset .notebook-pen > .admonition-title::before,
.md-typeset .notebook-pen > summary::before {
background-color: #7e8cea;
mask-image: var(--md-admonition-icon-notebook-pen);
-webkit-mask-image: var(--md-admonition-icon-notebook-pen);
}
/* Loader (electric indigo) */
.md-typeset .admonition.loader,
.md-typeset details.loader {
border-color: #7c3aed;
}
.md-typeset .loader > .admonition-title,
.md-typeset .loader > summary {
background-color: rgba(124, 58, 237, 0.08);
}
.md-typeset .loader > .admonition-title::before,
.md-typeset .loader > summary::before {
background-color: #7c3aed;
mask-image: var(--md-admonition-icon-loader);
-webkit-mask-image: var(--md-admonition-icon-loader);
}
/* Search (royal blue) */
.md-typeset .admonition.search,
.md-typeset details.search {
border-color: #4169e1;
}
.md-typeset .search > .admonition-title,
.md-typeset .search > summary {
background-color: rgba(65, 105, 225, 0.08); /* subtle background */
}
.md-typeset .search > .admonition-title::before,
.md-typeset .search > summary::before {
background-color: #4169e1;
mask-image: var(--md-admonition-icon-search);
-webkit-mask-image: var(--md-admonition-icon-search);
}
/* Binoculars (steel blue) */
.md-typeset .admonition.binoculars,
.md-typeset details.binoculars {
border-color: #4682b4; /* steel blue */
}
.md-typeset .binoculars > .admonition-title,
.md-typeset .binoculars > summary {
background-color: rgba(70, 130, 180, 0.1); /* subtle background */
}
.md-typeset .binoculars > .admonition-title::before,
.md-typeset .binoculars > summary::before {
background-color: #4682b4;
mask-image: var(--md-admonition-icon-binoculars);
-webkit-mask-image: var(--md-admonition-icon-binoculars);
}
/* Search Code (indigo) */
.md-typeset .admonition.search-code,
.md-typeset details.search-code {
border-color: #5c6ac4; /* indigo */
}
.md-typeset .search-code > .admonition-title,
.md-typeset .search-code > summary {
background-color: rgba(92, 106, 196, 0.1);
}
.md-typeset .search-code > .admonition-title::before,
.md-typeset .search-code > summary::before {
background-color: #5c6ac4;
mask-image: var(--md-admonition-icon-search-code);
-webkit-mask-image: var(--md-admonition-icon-search-code);
}
/* Move Horizontal (cool gray) */
.md-typeset .admonition.move-horizontal,
.md-typeset details.move-horizontal {
border-color: #6c757d; /* cool gray */
}
.md-typeset .move-horizontal > .admonition-title,
.md-typeset .move-horizontal > summary {
background-color: rgba(108, 117, 125, 0.1);
}
.md-typeset .move-horizontal > .admonition-title::before,
.md-typeset .move-horizontal > summary::before {
background-color: #6c757d;
mask-image: var(--md-admonition-icon-move-horizontal);
-webkit-mask-image: var(--md-admonition-icon-move-horizontal);
}
/* Package Search (amber gold) */
.md-typeset .admonition.package-search,
.md-typeset details.package-search {
border-color: #f0b429; /* amber/goldenrod */
}
.md-typeset .package-search > .admonition-title,
.md-typeset .package-search > summary {
background-color: rgba(240, 180, 41, 0.1);
}
.md-typeset .package-search > .admonition-title::before,
.md-typeset .package-search > summary::before {
background-color: #f0b429;
mask-image: var(--md-admonition-icon-package-serach);
-webkit-mask-image: var(--md-admonition-icon-package-serach);
}
/* Eye (sky blue) */
.md-typeset .admonition.eye,
.md-typeset details.eye {
border-color: #50c2f0;
}
.md-typeset .eye > .admonition-title,
.md-typeset .eye > summary {
background-color: rgba(80, 194, 240, 0.1);
}
.md-typeset .eye > .admonition-title::before,
.md-typeset .eye > summary::before {
background-color: #50c2f0;
mask-image: var(--md-admonition-icon-eye);
-webkit-mask-image: var(--md-admonition-icon-eye);
}
/* View (light indigo) */
.md-typeset .admonition.view,
.md-typeset details.view {
border-color: #7f8ff4;
}
.md-typeset .view > .admonition-title,
.md-typeset .view > summary {
background-color: rgba(127, 143, 244, 0.1);
}
.md-typeset .view > .admonition-title::before,
.md-typeset .view > summary::before {
background-color: #7f8ff4;
mask-image: var(--md-admonition-icon-view);
-webkit-mask-image: var(--md-admonition-icon-view);
}
/* Wrench (steel blue) */
.md-typeset .admonition.wrench,
.md-typeset details.wrench {
border-color: #4682b4; /* steel blue */
}
.md-typeset .wrench > .admonition-title,
.md-typeset .wrench > summary {
background-color: rgba(70, 130, 180, 0.1);
}
.md-typeset .wrench > .admonition-title::before,
.md-typeset .wrench > summary::before {
background-color: #4682b4;
mask-image: var(--md-admonition-icon-wrench);
-webkit-mask-image: var(--md-admonition-icon-wrench);
}
/* Package Plus (emerald green) */
.md-typeset .admonition.package-plus,
.md-typeset details.package-plus {
border-color: #34d399; /* emerald green */
}
.md-typeset .package-plus > .admonition-title,
.md-typeset .package-plus > summary {
background-color: rgba(52, 211, 153, 0.1); /* matching green tint */
}
.md-typeset .package-plus > .admonition-title::before,
.md-typeset .package-plus > summary::before {
background-color: #34d399;
mask-image: var(--md-admonition-icon-package-plus);
-webkit-mask-image: var(--md-admonition-icon-package-plus);
}
/* Drill (slate blue) */
.md-typeset .admonition.drill,
.md-typeset details.drill {
border-color: #64748b; /* slate blue-gray */
}
.md-typeset .drill > .admonition-title,
.md-typeset .drill > summary {
background-color: rgba(100, 116, 139, 0.1); /* light slate tint */
}
.md-typeset .drill > .admonition-title::before,
.md-typeset .drill > summary::before {
background-color: #64748b;
mask-image: var(--md-admonition-icon-drill);
-webkit-mask-image: var(--md-admonition-icon-drill);
}
/* Trash / Deletion (crimson red) */
.md-typeset .admonition.trash-2,
.md-typeset details.trash-2 {
border-color: #e63946; /* strong crimson */
}
.md-typeset .trash-2 > .admonition-title,
.md-typeset .trash-2 > summary {
background-color: rgba(230, 57, 70, 0.1);
}
.md-typeset .trash-2 > .admonition-title::before,
.md-typeset .trash-2 > summary::before {
background-color: #e63946;
mask-image: var(--md0admonition-icon-trash-2);
-webkit-mask-image: var(--md0admonition-icon-trash-2);
}
/* Chart Line (sky blue for analytics) */
.md-typeset .admonition.chart-line,
.md-typeset details.chart-line {
border-color: #4fc3f7; /* sky blue */
}
.md-typeset .chart-line > .admonition-title,
.md-typeset .chart-line > summary {
background-color: rgba(79, 195, 247, 0.1);
}
.md-typeset .chart-line > .admonition-title::before,
.md-typeset .chart-line > summary::before {
background-color: #4fc3f7;
mask-image: var(--md-admonition-icon-chart-line);
-webkit-mask-image: var(--md-admonition-icon-chart-line);
}
/* Message Circle More (medium violet) */
.md-typeset .admonition.message-circle-more,
.md-typeset details.message-circle-more {
border-color: #9c6ade; /* medium violet */
}
.md-typeset .message-circle-more > .admonition-title,
.md-typeset .message-circle-more > summary {
background-color: rgba(156, 106, 222, 0.1); /* matching violet tint */
}
.md-typeset .message-circle-more > .admonition-title::before,
.md-typeset .message-circle-more > summary::before {
background-color: #9c6ade;
mask-image: var(--md-admonition-icon-message-circle-more);
-webkit-mask-image: var(--md-admonition-icon-message-circle-more);
}
/* Banknote (rich green) */
.md-typeset .admonition.banknote,
.md-typeset details.banknote {
border-color: #2ecc71; /* emerald green */
}
.md-typeset .banknote > .admonition-title,
.md-typeset .banknote > summary {
background-color: rgba(46, 204, 113, 0.1); /* green tint */
}
.md-typeset .banknote > .admonition-title::before,
.md-typeset .banknote > summary::before {
background-color: #2ecc71;
mask-image: var(--md-admonition-icon-banknote);
-webkit-mask-image: var(--md-admonition-icon-banknote);
}
/* Receipt (deep teal) */
.md-typeset .admonition.receipt,
.md-typeset details.receipt {
border-color: #1abc9c; /* teal */
}
.md-typeset .receipt > .admonition-title,
.md-typeset .receipt > summary {
background-color: rgba(26, 188, 156, 0.1); /* teal tint */
}
.md-typeset .receipt > .admonition-title::before,
.md-typeset .receipt > summary::before {
background-color: #1abc9c;
mask-image: var(--md-admonition-icon-receipt);
-webkit-mask-image: var(--md-admonition-icon-receipt);
}
/* Circle Dollar Sign (rich green) */
.md-typeset .admonition.circle-dollar-sign,
.md-typeset details.circle-dollar-sign {
border-color: #2ecc71; /* rich green */
}
.md-typeset .circle-dollar-sign > .admonition-title,
.md-typeset .circle-dollar-sign > summary {
background-color: rgba(46, 204, 113, 0.1); /* soft green tint */
}
.md-typeset .circle-dollar-sign > .admonition-title::before,
.md-typeset .circle-dollar-sign > summary::before {
background-color: #2ecc71;
mask-image: var(--md-admonition-icon-circle-dollar-sign);
-webkit-mask-image: var(--md-admonition-icon-circle-dollar-sign);
}
/* Lock (security blue) */
.md-typeset .admonition.lock,
.md-typeset details.lock {
border-color: #3a8edb; /* security blue */
}
.md-typeset .lock > .admonition-title,
.md-typeset .lock > summary {
background-color: rgba(58, 142, 219, 0.1); /* matching blue tint */
}
.md-typeset .lock > .admonition-title::before,
.md-typeset .lock > summary::before {
background-color: #3a8edb;
mask-image: var(--md-admonition-icon-lock);
-webkit-mask-image: var(--md-admonition-icon-lock);
}
/* Wallet (deep teal) */
.md-typeset .admonition.wallet,
.md-typeset details.wallet {
border-color: #00796b; /* deep teal */
}
.md-typeset .wallet > .admonition-title,
.md-typeset .wallet > summary {
background-color: rgba(0, 121, 107, 0.1); /* subtle teal tint */
}
.md-typeset .wallet > .admonition-title::before,
.md-typeset .wallet > summary::before {
background-color: #00796b;
mask-image: var(--md-admonition-icon-wallet);
-webkit-mask-image: var(--md-admonition-icon-wallet);
}
/* Droplet (cool blue) */
.md-typeset .admonition.droplet,
.md-typeset details.droplet {
border-color: #2196f3; /* blue 500 */
}
.md-typeset .droplet > .admonition-title,
.md-typeset .droplet > summary {
background-color: rgba(33, 150, 243, 0.1); /* light blue background */
}
.md-typeset .droplet > .admonition-title::before,
.md-typeset .droplet > summary::before {
background-color: #2196f3;
mask-image: var(--md-admonition-icon-droplet);
-webkit-mask-image: var(--md-admonition-icon-droplet);
}