Last active
June 16, 2024 16:47
-
-
Save MaxWolf-01/b4075592ce551ed7e37c8c33f8b2609b to your computer and use it in GitHub Desktop.
Obsidian Custom Callout Styles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .callout { | |
| border-radius: 10px; /* round the edges more */ | |
| padding: 10px; | |
| } | |
| .callout-title { | |
| padding: 0px 2px; | |
| margin-top: 0px; | |
| } | |
| .callout-content { | |
| padding-top: 0px; | |
| padding-bottom: 0px; | |
| } | |
| .callout p { | |
| margin-top: 8px; | |
| margin-bottom: 1px; | |
| margin-left: 4px; | |
| margin-right: 4px; | |
| } | |
| .callout[data-callout="idea"] { | |
| --callout-color: 125, 142, 172; /* bluish-grey */ | |
| --callout-icon: lucide-lightbulb; | |
| } | |
| .callout[data-callout="open-question"] { | |
| --callout-color: 235, 189, 52; /* yellow */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="open-question"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(235, 189, 52)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="green-faq"] { | |
| --callout-color: 52, 211, 153; /* green */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="green-faq"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(52, 211, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="summary"] { | |
| --callout-color: 147, 112, 219; /* purple-grayish */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="summary"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(147, 112, 219)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9.5 8h5'/%3E%3Cpath d='M9.5 12H16'/%3E%3Cpath d='M9.5 16H14'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="methodology"] { | |
| --callout-color: 255, 165, 0; /* orange */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="methodology"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 165, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5V3L9 9'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="conclusion"] { | |
| --callout-color: 46, 204, 113; /* green */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="conclusion"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 204, 113)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="interpretation"] { | |
| --callout-color: 155, 89, 182; /* purple */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="interpretation"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(155, 89, 182)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3Ccircle cx='12' cy='21' r='1'/%3E%3Crect x='7' y='7' width='4' height='2'/%3E%3Crect x='13' y='15' width='4' height='2'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="definition"] { | |
| --callout-color: 52, 152, 219; /* blue */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="definition"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(52, 152, 219)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="todo"] { | |
| --callout-color: 186, 124, 110; /* red */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="todo"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(186, 124, 110)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='6' height='6' rx='1'/%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="info"] { | |
| --callout-color: 100, 181, 246; /* lighter blue */ | |
| --callout-icon: none; | |
| } | |
| .callout[data-callout="info"] .callout-title { | |
| padding-left: 24px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(100, 181, 246)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: 24px 24px; | |
| background-position: 0 center; | |
| } | |
| .callout[data-callout="note"] { | |
| --callout-color: 222, 184, 135; /* light beige */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment