pyrox.dev
1@import "tailwindcss";
2
3@import "./mocha.css";
4
5.mocha {
6 --callout-blend-mode: lighten;
7}
8
9@theme {
10 /* Remove initial variables we don't need */
11 --blur-*: initial;
12 --perspective-*: initial;
13 --drop-shadow-*: initial;
14 --shadow-*: initial;
15 --inset-shadow-*: initial;
16 --ease-*: initial;
17 --animate-*: initial;
18 --font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
19 --font-serif: "IBM Plex Serif", "ui-serif", "serif";
20
21 /* Flag Colors */
22 --color-trans-blue: #5bcffa;
23 --color-trans-pink: #f5abb9;
24 --color-lesbian-orange1: #d62900;
25 --color-lesbian-orange2: #ff790d;
26 --color-lesbian-orange3: #ff9b55;
27 --color-lesbian-pink1: #d462a6;
28 --color-lesbian-pink2: #ef5496;
29 --color-lesbian-pink3: #a50062;
30}
31
32@layer components {
33 [data-editor-file] {
34 @apply transition-all rounded-md;
35 pointer-events: auto;
36 }
37 [data-editor-file]:hover {
38 @apply transition-all outline-ctp-blue outline-2 outline-offset-4
39 bg-ctp-blue/10 pl-1;
40 }
41}
42
43@utility h-entry {
44 a {
45 @apply text-ctp-blue underline;
46 }
47
48 h2 {
49 @apply text-2xl font-sans;
50 }
51
52 p {
53 @apply mb-6;
54 }
55
56 blockquote {
57 @apply border-l-2 pl-6 relative border-ctp-overlay0 italic;
58 left: -0.5rem;
59 }
60
61 div.callout-content > p {
62 @apply mb-0;
63 }
64
65 h2:has(a.header-anchor) {
66 @apply text-3xl text-ctp-mauve relative mb-8;
67 left: -1.75rem;
68 }
69
70 h3:has(a.header-anchor) {
71 @apply text-2xl text-ctp-mauve relative mb-6;
72 left: -1.75rem;
73 }
74
75 a.header-anchor::before {
76 @apply relative mr-1 inline-block;
77 font-family: "bootstrap-icons";
78 content: "\F40A";
79 top: 0.225rem;
80 }
81}
82
83@utility header-anchor {
84 @apply text-ctp-mauve!;
85}
86
87/* Disable <detail> folding on non-folding admonitions */
88@utility no-fold {
89 pointer-events: none;
90}
91
92/* Callouts/Admonitions */
93@utility callout {
94 @apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
95 outline-color: --alpha(var(--callout-color) / 50%);
96 margin: 1em 0;
97 mix-blend-mode: var(--callout-blend-mode);
98 background-color: --alpha(var(--callout-color) / 15%);
99
100 .callout-title {
101 @apply text-lg mb-2 flex gap-2 items-start font-semibold w-full;
102 color: rgb(var(--callout-color));
103
104 &::before {
105 @apply flex items-center text-xl leading-7 mr-1;
106 flex: 0 0 auto;
107 font-family: "bootstrap-icons";
108 content: var(--callout-icon);
109 }
110
111 .no-fold &::after {
112 content: "" !important;
113 }
114
115 &::after {
116 margin-left: auto;
117 font-family: "bootstrap-icons";
118 background-color: rgb(var(--callout-color));
119 content: "\F285";
120 }
121
122 [open] &::after {
123 margin-left: auto;
124 font-family: "bootstrap-icons";
125 background-color: rgb(var(--callout-color));
126 content: "\F282";
127 }
128 }
129
130 .callout-content {
131 @apply overflow-x-auto pl-2;
132
133 [data-editor-file]:hover {
134 @apply relative top-2 mr-2;
135 }
136 }
137 &[data-callout="note"] {
138 --callout-color: var(--color-ctp-blue);
139 --callout-icon: "\F4CB";
140 }
141
142 &[data-callout="todo"] {
143 --callout-color: var(--color-ctp-blue);
144 --callout-icon: "\F26B";
145 }
146
147 &[data-callout="info"] {
148 --callout-color: var(--color-ctp-blue-700);
149 --callout-icon: "\F431";
150 }
151
152 &[data-callout="success"],
153 &[data-callout="check"],
154 &[data-callout="done"] {
155 --callout-color: var(--color-ctp-green);
156 --callout-icon: "\F272";
157 }
158
159 &[data-callout="warning"],
160 &[data-callout="caution"],
161 &[data-callout="attention"] {
162 --callout-color: var(--color-ctp-yellow);
163 --callout-icon: "\F33B";
164 }
165
166 &[data-callout="question"] {
167 --callout-color: var(--color-ctp-yellow-900);
168 --callout-icon: "\F505";
169 }
170
171 &[data-callout="danger"],
172 &[data-callout="error"] {
173 --callout-color: var(--color-ctp-maroon-400);
174 --callout-icon: "\F46F";
175 }
176
177 &[data-callout="failure"] {
178 --callout-color: var(--color-ctp-maroon-800);
179 --callout-icon: "\F659";
180 }
181
182 &[data-callout="bug"] {
183 --callout-color: var(--color-ctp-maroon);
184 --callout-icon: "\F1DC";
185 }
186
187 &[data-callout="tip"],
188 &[data-callout="hint"] {
189 --callout-color: var(--color-ctp-teal);
190 --callout-icon: "\F7F6";
191 }
192
193 &[data-callout="example"] {
194 --callout-color: var(--color-ctp-mauve);
195 --callout-icon: "\F478";
196 }
197
198 &[data-callout="abstract"],
199 &[data-callout="summary"],
200 &[data-callout="tldr"] {
201 --callout-color: var(--color-ctp-sky);
202 --callout-icon: "\F727";
203 }
204
205 &[data-callout="quote"],
206 &[data-callout="cite"] {
207 --callout-color: var(--color-ctp-overlay0);
208 --callout-icon: "\F6B0";
209 }
210}
211
212/* Start Footnotes */
213
214@utility fn {
215 @apply mb-2;
216 p {
217 @apply inline;
218 }
219 [data-editor-file] {
220 @apply inline;
221 }
222}
223
224@utility fn-backref {
225 &::before {
226 @apply inline-block text-ctp-blue align-bottom;
227 content: "\F131";
228 font-family: "bootstrap-icons";
229 }
230}
231
232/* End Footnotes */
233
234/* Start ToC */
235
236@utility toc {
237 @apply mt-3 mb-8;
238}
239
240@utility toc-l1 {
241 @apply border-l-2 border-ctp-overlay0 pl-2 ml-1 text-xl;
242}
243
244@utility toc-l2 {
245 @apply text-base border-l-2 pl-2 border-ctp-surface2 first-of-type:mt-1 last-of-type:mb-1;
246}
247
248/* End ToC */
249
250/* Extra arbitrary styles */
251details.callout .callout-title {
252 margin: 0;
253 cursor: pointer;
254}
255
256details.callout > .callout-title > .callout-fold::after {
257 content: "\F285";
258}
259
260details[open].callout > .callout-title > .callout-fold::after {
261 content: "\F282";
262}