$note-color: #207495; $abstract-color: #0ca68c; $info-color: #207495; $todo-color: #8d05a8; $tip-color: #19cfb0; $success-color: #04d904; $question-color: #207495; $warning-color: #e38902; $danger-color: #e31a00; $failure-color: #e31a00; $bug-color: #e31a00; $example-color: #b83acf; $quote-color: #918e91; .notice { margin-bottom: 1.5rem; border: 1px solid; padding: 1.5rem; border-color: currentColor; border-radius: 8px; } .notice-head { display: flex; align-items: center; } .notice-head svg { margin-right: 0.75rem; } .notice-head p { font-size: 1.25rem; font-weight: 600; color: currentColor; margin: 0; line-height: 1; } .notice-body { margin-top: 0.75rem; } .notice-body p { margin: 0; color:#444; } .notice.note { color: $note-color; background-color: rgba($note-color, 0.1); } .notice.abstract { color: $abstract-color; background-color: rgba($abstract-color, 0.15); } .notice.info { color: $info-color; background-color: rgba($info-color, 0.15); } .notice.todo { color: $todo-color; background-color: rgba($todo-color, 0.15); } .notice.tip { color: $tip-color; background-color: rgba($tip-color, 0.15); } .notice.success { color: $success-color; background-color: rgba($success-color, 0.15); } .notice.question { color: $question-color; background-color: rgba($question-color, 0.15); } .notice.warning { color: $warning-color; background-color: rgba($warning-color, 0.15); } .notice.failure { color: $failure-color; background-color: rgba($failure-color, 0.15); } .notice.danger { color: $danger-color; background-color: rgba($danger-color, 0.15); } .notice.bug { color: $bug-color; background-color: rgba($bug-color, 0.15); } .notice.example { color: $example-color; background-color: rgba($example-color, 0.15); } .notice.quote { color: $quote-color; background-color: rgba($quote-color, 0.15); } // darkmode .dark .notice-head p { color: #d1d5db; }