|
1 | 1 | [data-md-color-scheme="slate"] { |
2 | | - --admonition-border-color: transparent; |
3 | | - --admonition-expanded-border-color: rgba(255, 255, 255, 0.1); |
4 | | - --note-bg-color: rgba(43, 110, 98, 0.2); |
5 | | - --terminal-bg-color: #0c0c0c; |
6 | | - --terminal-title-bg-color: #000; |
7 | | - --deep-dive-bg-color: rgba(43, 52, 145, 0.2); |
8 | | - --you-will-learn-bg-color: #353a45; |
9 | | - --pitfall-bg-color: rgba(182, 87, 0, 0.2); |
| 2 | + --admonition-border-color: transparent; |
| 3 | + --admonition-expanded-border-color: rgba(255, 255, 255, 0.1); |
| 4 | + --note-bg-color: rgba(43, 110, 98, 0.2); |
| 5 | + --terminal-bg-color: #0c0c0c; |
| 6 | + --terminal-title-bg-color: #000; |
| 7 | + --deep-dive-bg-color: rgba(43, 52, 145, 0.2); |
| 8 | + --you-will-learn-bg-color: #353a45; |
| 9 | + --pitfall-bg-color: rgba(182, 87, 0, 0.2); |
10 | 10 | } |
11 | 11 | [data-md-color-scheme="default"] { |
12 | | - --admonition-border-color: rgba(0, 0, 0, 0.08); |
13 | | - --admonition-expanded-border-color: var(--admonition-border-color); |
14 | | - --note-bg-color: rgb(244, 251, 249); |
15 | | - --terminal-bg-color: rgb(64, 71, 86); |
16 | | - --terminal-title-bg-color: rgb(35, 39, 47); |
17 | | - --deep-dive-bg-color: rgb(243, 244, 253); |
18 | | - --you-will-learn-bg-color: rgb(246, 247, 249); |
19 | | - --pitfall-bg-color: rgb(254, 245, 231); |
| 12 | + --admonition-border-color: rgba(0, 0, 0, 0.08); |
| 13 | + --admonition-expanded-border-color: var(--admonition-border-color); |
| 14 | + --note-bg-color: rgb(244, 251, 249); |
| 15 | + --terminal-bg-color: rgb(64, 71, 86); |
| 16 | + --terminal-title-bg-color: rgb(35, 39, 47); |
| 17 | + --deep-dive-bg-color: rgb(243, 244, 253); |
| 18 | + --you-will-learn-bg-color: rgb(246, 247, 249); |
| 19 | + --pitfall-bg-color: rgb(254, 245, 231); |
20 | 20 | } |
21 | 21 |
|
22 | 22 | .md-typeset details, |
23 | 23 | .md-typeset .admonition { |
24 | | - border-color: var(--admonition-border-color) !important; |
25 | | - box-shadow: none; |
| 24 | + border-color: var(--admonition-border-color) !important; |
| 25 | + box-shadow: none; |
26 | 26 | } |
27 | 27 |
|
28 | 28 | .md-typeset :is(.admonition, details) { |
29 | | - margin: 0.55em 0; |
| 29 | + margin: 0 0; |
30 | 30 | } |
31 | 31 |
|
32 | 32 | .md-typeset .admonition { |
33 | | - font-size: 0.7rem; |
| 33 | + font-size: 0.7rem; |
34 | 34 | } |
35 | 35 |
|
36 | 36 | .md-typeset .admonition:focus-within, |
37 | 37 | .md-typeset details:focus-within { |
38 | | - box-shadow: none !important; |
| 38 | + box-shadow: none !important; |
39 | 39 | } |
40 | 40 |
|
41 | 41 | .md-typeset details[open] { |
42 | | - border-color: var(--admonition-expanded-border-color) !important; |
| 42 | + border-color: var(--admonition-expanded-border-color) !important; |
43 | 43 | } |
44 | 44 |
|
45 | 45 | /* |
46 | 46 | Admonition: "summary" |
47 | 47 | React Name: "You will learn" |
48 | 48 | */ |
49 | 49 | .md-typeset .admonition.summary { |
50 | | - background: var(--you-will-learn-bg-color); |
51 | | - padding: 0.8rem 1.4rem; |
52 | | - border-radius: 0.8rem; |
| 50 | + background: var(--you-will-learn-bg-color); |
| 51 | + padding: 0.8rem 1.4rem; |
| 52 | + border-radius: 0.8rem; |
53 | 53 | } |
54 | 54 |
|
55 | 55 | .md-typeset .summary .admonition-title { |
56 | | - font-size: 1rem; |
57 | | - background: transparent; |
58 | | - padding-left: 0.6rem; |
59 | | - padding-bottom: 0; |
| 56 | + font-size: 1rem; |
| 57 | + background: transparent; |
| 58 | + padding-left: 0.6rem; |
| 59 | + padding-bottom: 0; |
60 | 60 | } |
61 | 61 |
|
62 | 62 | .md-typeset .summary .admonition-title:before { |
63 | | - display: none; |
| 63 | + display: none; |
64 | 64 | } |
65 | 65 |
|
66 | 66 | .md-typeset .admonition.summary { |
67 | | - border-color: #ffffff17 !important; |
| 67 | + border-color: #ffffff17 !important; |
68 | 68 | } |
69 | 69 |
|
70 | 70 | /* |
71 | 71 | Admonition: "abstract" |
72 | 72 | React Name: "Note" |
73 | 73 | */ |
74 | 74 | .md-typeset .admonition.abstract { |
75 | | - background: var(--note-bg-color); |
76 | | - padding: 0.8rem 1.4rem; |
77 | | - border-radius: 0.8rem; |
| 75 | + background: var(--note-bg-color); |
| 76 | + padding: 0.8rem 1.4rem; |
| 77 | + border-radius: 0.8rem; |
78 | 78 | } |
79 | 79 |
|
80 | 80 | .md-typeset .abstract .admonition-title { |
81 | | - font-size: 1rem; |
82 | | - background: transparent; |
83 | | - padding-bottom: 0; |
84 | | - color: rgb(68, 172, 153); |
| 81 | + font-size: 1rem; |
| 82 | + background: transparent; |
| 83 | + padding-bottom: 0; |
| 84 | + color: rgb(68, 172, 153); |
85 | 85 | } |
86 | 86 |
|
87 | 87 | .md-typeset .abstract .admonition-title:before { |
88 | | - font-size: 1.1rem; |
89 | | - background: rgb(68, 172, 153); |
| 88 | + font-size: 1.1rem; |
| 89 | + background: rgb(68, 172, 153); |
90 | 90 | } |
91 | 91 |
|
92 | 92 | /* |
93 | 93 | Admonition: "warning" |
94 | 94 | React Name: "Pitfall" |
95 | 95 | */ |
96 | 96 | .md-typeset .admonition.warning { |
97 | | - background: var(--pitfall-bg-color); |
98 | | - padding: 0.8rem 1.4rem; |
99 | | - border-radius: 0.8rem; |
| 97 | + background: var(--pitfall-bg-color); |
| 98 | + padding: 0.8rem 1.4rem; |
| 99 | + border-radius: 0.8rem; |
100 | 100 | } |
101 | 101 |
|
102 | 102 | .md-typeset .warning .admonition-title { |
103 | | - font-size: 1rem; |
104 | | - background: transparent; |
105 | | - padding-bottom: 0; |
106 | | - color: rgb(219, 125, 39); |
| 103 | + font-size: 1rem; |
| 104 | + background: transparent; |
| 105 | + padding-bottom: 0; |
| 106 | + color: rgb(219, 125, 39); |
107 | 107 | } |
108 | 108 |
|
109 | 109 | .md-typeset .warning .admonition-title:before { |
110 | | - font-size: 1.1rem; |
111 | | - background: rgb(219, 125, 39); |
| 110 | + font-size: 1.1rem; |
| 111 | + background: rgb(219, 125, 39); |
112 | 112 | } |
113 | 113 |
|
114 | 114 | /* |
115 | 115 | Admonition: "info" |
116 | 116 | React Name: "Deep Dive" |
117 | 117 | */ |
118 | 118 | .md-typeset .admonition.info { |
119 | | - background: var(--deep-dive-bg-color); |
120 | | - padding: 0.8rem 1.4rem; |
121 | | - border-radius: 0.8rem; |
| 119 | + background: var(--deep-dive-bg-color); |
| 120 | + padding: 0.8rem 1.4rem; |
| 121 | + border-radius: 0.8rem; |
122 | 122 | } |
123 | 123 |
|
124 | 124 | .md-typeset .info .admonition-title { |
125 | | - font-size: 1rem; |
126 | | - background: transparent; |
127 | | - padding-bottom: 0; |
128 | | - color: rgb(136, 145, 236); |
| 125 | + font-size: 1rem; |
| 126 | + background: transparent; |
| 127 | + padding-bottom: 0; |
| 128 | + color: rgb(136, 145, 236); |
129 | 129 | } |
130 | 130 |
|
131 | 131 | .md-typeset .info .admonition-title:before { |
132 | | - font-size: 1.1rem; |
133 | | - background: rgb(136, 145, 236); |
| 132 | + font-size: 1.1rem; |
| 133 | + background: rgb(136, 145, 236); |
134 | 134 | } |
135 | 135 |
|
136 | 136 | /* |
137 | 137 | Admonition: "example" |
138 | 138 | React Name: "Terminal" |
139 | 139 | */ |
140 | 140 | .md-typeset .admonition.example { |
141 | | - background: var(--terminal-bg-color); |
142 | | - border-radius: 0.4rem; |
143 | | - overflow: hidden; |
144 | | - border: none; |
| 141 | + background: var(--terminal-bg-color); |
| 142 | + border-radius: 0.4rem; |
| 143 | + overflow: hidden; |
| 144 | + border: none; |
| 145 | + margin: 0.5rem 0; |
145 | 146 | } |
146 | 147 |
|
147 | 148 | .md-typeset .example .admonition-title { |
148 | | - background: var(--terminal-title-bg-color); |
149 | | - color: rgb(246, 247, 249); |
| 149 | + background: var(--terminal-title-bg-color); |
| 150 | + color: rgb(246, 247, 249); |
150 | 151 | } |
151 | 152 |
|
152 | 153 | .md-typeset .example .admonition-title:before { |
153 | | - background: rgb(246, 247, 249); |
| 154 | + background: rgb(246, 247, 249); |
154 | 155 | } |
155 | 156 |
|
156 | 157 | .md-typeset .admonition.example code { |
157 | | - background: transparent; |
158 | | - color: #fff; |
159 | | - box-shadow: none; |
| 158 | + background: transparent; |
| 159 | + color: #fff; |
| 160 | + box-shadow: none; |
160 | 161 | } |
0 commit comments