LizardByte.github.io/_sass/admonition.scss at aff9351838e911c088fad38135a041c1fc1a4786 · LizardByte/LizardByte.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// credit: https://www.adamsdesk.com/posts/admonitions-jekyll
$primary-color: #fc0;
$primary-bgcolor: rgba(55.59%, 44.41%, 0%, .4);

// Light theme admonition title colors
$admonitions-light:
    ('attention', '#ffebee')
    ('caution', '#fff3e0')
    ('danger', '#ffebee')
    ('error', '#ffebee')
    ('hint', '#e8f5e9')
    ('important', '#fff3e0')
    ('note', '#e3f2fd')
    ('seealso', '#e3f2fd')
    ('tip', '#e8f5e9')
    ('todo', '#f5f5f5')
    ('warning', '#fff3e0')
;

// Dark theme admonition title colors
$admonitions-dark:
    ('attention', '#564444')
    ('caution', '#564b3c')
    ('danger', '#564444')
    ('error', '#564444')
    ('hint', '#294040')
    ('important', '#433a38')
    ('note', '#293d52')
    ('seealso', '#293d52')
    ('tip', '#294040')
    ('todo', '#3a3a3a')
    ('warning', '#564b3c')
;

$admonitions:
    //class (type), icon filename, icon/border color
    // TODO: Can we use font-awesome directly without keeping the svg files in our repo?
    ('attention', 'exclamation-triangle-solid.svg', '#ff5252')
    ('caution', 'bolt-solid.svg', '#ff9100')
    ('danger', 'bolt-solid.svg', '#ff5252')
    ('error', 'times-circle-solid.svg', '#ff5252')
    ('hint', 'question-circle-solid.svg', '#00c953')
    ('important', 'fire-solid.svg', '#ff9100')
    ('note', 'pen-solid.svg', '#00b0ff')
    ('seealso', 'info-circle-solid.svg', '#00b0ff')
    ('tip', 'info-circle-solid.svg', '#00c953')
    ('todo', 'pen-solid.svg', '#9e9e9e')
    ('warning', 'exclamation-triangle-solid.svg', '#ff9100')
;
.admonition {
	margin: 1.5625em 0;
	overflow: hidden;
	color: var(--text-col);
	page-break-inside: avoid;
	background-color: var(--navbar-col);
	border-left: .3rem solid $primary-color;
	border-radius: .1rem;
}
.admonition p {
    padding: 0 1rem;
}
.admonition .admonition-title {
    color: var(--text-col);
    background-color: $primary-bgcolor;
    font-weight: 700;
    line-height: 3rem;
}

// Light theme - keep title text dark
[data-bs-theme="light"] .admonition .admonition-title {
    color: #212529;
}

.admonition-title::before {
    margin-right: .5rem;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    content: '';
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: $primary-color;
    vertical-align: text-bottom;
}
@each $name, $icon, $icon-color in $admonitions {
    @if $icon-color {
        .admonition.#{$name} {
            border-left-color: #{$icon-color};
        }
    }
    .admonition.#{$name} .admonition-title::before {
        -webkit-mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%;
        mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%;
        @if $icon-color {
            background-color: #{$icon-color};
        }
    }
}

// Apply light theme title backgrounds
@each $name, $light-bg in $admonitions-light {
    [data-bs-theme="light"] .admonition.#{$name} .admonition-title {
        background-color: #{$light-bg};
    }
}

// Apply dark theme title backgrounds
@each $name, $dark-bg in $admonitions-dark {
    [data-bs-theme="dark"] .admonition.#{$name} .admonition-title {
        background-color: #{$dark-bg};
    }
}