Personal website
helpimnotdrowning.net
1/*
2 This file is part of NKK.
3
4 NKK is free software: you can redistribute it and/or modify it under the
5 terms of the GNU Affero General Public License as published by the Free
6 Software Foundation, either version 3 of the License, or (at your option)
7 any later version.
8
9 NKK is distributed in the hope that it will be useful, but WITHOUT ANY
10 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
11 FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
12 more details.
13
14 You should have received a copy of the GNU Affero General Public License
15 along with NKK. If not, see <http://www.gnu.org/licenses/>.
16*/
17
18/* PrismJS 1.30.0
19https://prismjs.com/download#themes=prism&languages=markup+css+clike+javascript+bash+batch+c+cpp+css-extras+diff+http+javastacktrace+json+json5+markdown+powershell+python+rust+yaml&plugins=autolinker+custom-class+show-language+autoloader+command-line+toolbar+copy-to-clipboard+match-braces */
20/**
21 * prism.js AO-Dark Violet theme
22 * Based on Ancient One Dark (https://github.com/sigvt/ancient-one-dark)
23 * Using the prism.js default theme as a base
24 * @author Lea Verou (base)
25 * @author uetchy@github (original)
26 * @author helpimnotdrowning (tailwind-ification, ao-dark port to prism.js)
27 */
28
29@theme {
30 --color-ao-violet-darker: #19152a;
31 --color-ao-violet: #2b203f;
32 --color-ao-violet-lighter: #56417e;
33 --color-ao-violet-even-lighter: #7c62ad;
34
35 --color-ao-white-darker: #a094b7;
36 --color-ao-white: #ede9f5;
37
38 --color-ao-gold: #fec955;
39}
40
41:not(pre) > code {
42 @apply text-ao-white bg-ao-violet mx-[0.3ch];
43 @apply text-ao-violet-darker bg-ao-white mx-[0.3ch];
44 font-weight: bolder;
45
46 &::selection, & ::selection {
47 @apply bg-ao-violet-lighter;
48 }
49}
50
51pre > code {
52 @apply border-2 text-ao-white border-ao-gold bg-ao-violet;
53 scrollbar-width: auto;
54 scrollbar-color: var(--color-ao-violet-even-lighter) var(--color-ao-violet);
55}
56
57code[class*="language-"],
58pre[class*="language-"] {
59 text-align: left;
60 word-spacing: normal;
61 line-height: 1.5;
62 @apply whitespace-pre break-normal wrap-normal;
63
64 tab-size: 4;
65
66 @apply hyphens-none;
67}
68
69pre[class*="language-"], code[class*="language-"] {
70 &::selection, & ::selection {
71 @apply bg-ao-violet-lighter;
72 }
73}
74
75/* Inline code */
76:not(pre) > code[class*="language-"] {
77 @apply rounded-sm whitespace-normal;
78}
79
80.token {
81 /*
82 &.keyword, &.operator {
83 color: #c7a8ed;
84 }
85
86 &.builtin, &.class-name &{
87 color: #e678e8
88 }
89
90 &.number {
91 color: #fc6a9d;
92 }
93
94 &.string, &.char, &.attr-value {
95 color: #e6be7d;
96 }
97
98 &.symbol, &.variable {
99 color: #c07cff;
100 }
101
102 &.regex {
103 color: #c0bbcb;
104 }
105
106 &.constant {
107 color: #b573b4;
108 }
109
110 &.property {
111 color: #c07cff;
112 }
113
114 &.punctuation {
115 color: #6C607A;
116 }
117
118 &.comment, &.prolog, &.doctype, &.cdata {
119 color: #73688d;
120 }
121
122 &.tag {
123 color: #bba5d4;
124 }
125
126 &.attr-name {
127 color: #8c76c0;
128 }
129
130 &.bold {
131 font-style: bold;
132 }
133
134 &.italic {
135 font-style: italic;
136 }
137
138 &.selector {
139 color: #bcaee5;
140 }
141
142 &.inserted {
143 color: #96bd65;
144 }
145
146 &.deleted {
147 color: #d36666;
148 }
149
150 &.function, &.boolean, &.url,
151 &.important, &.namespace, &.entity,
152 &.atrule
153 */
154
155 &.comment
156 { @apply text-[#73688d]; }
157 &.string
158 { @apply text-[#e6be7d]; }
159 &.function, &.class-name
160 { @apply text-[#e678e8]; }
161 &.namespace
162 { @apply text-[#e678e8] italic; }
163 &.boolean
164 { @apply text-[#b573b4]; }
165 &.variable
166 { @apply text-[#c07cff]; }
167 &.keyword, &.operator
168 { @apply text-[#c7a8ed]; }
169 &.punctuation
170 { @apply text-[#c7a8ed]; }
171 &.directive
172 { @apply italic; }
173 &.number
174 { @apply text-[#fc6a9d]; }
175 &.tag
176 { @apply text-[#bba5d4]; }
177 &.attr-name
178 { @apply text-ao-white; }
179 &.attr-value, &.markup-attr-quotes
180 { @apply text-[#ddb672]; }
181}
182
183/* .token {
184 &.comment,
185 &.prolog,
186 &.doctype,
187 &.cdata {
188 color: slategray;
189 }
190
191 &.punctuation {
192 color: #999;
193 }
194
195 &.namespace {
196 opacity: .7;
197 }
198
199 &.property, &.tag, &.boolean,
200 &.number, &.constant, &.symbol,
201 &.deleted {
202 color: #905;
203 }
204
205 &.selector, &.attr-name, &.string,
206 &.char, &.builtin, &.inserted {
207 color: #690;
208 }
209
210 &.operator, &.entity, &.url,
211 .language-css &.string,
212 .style &.string {
213 color: #9a6e3a;
214 background: hsla(0, 0%, 100%, .5);
215 }
216
217 &.atrule, &.attr-value, &.keyword {
218 color: #07a;
219 }
220
221 &.function, &.class-name {
222 color: #DD4A68;
223 }
224
225 &.regex, &.important, &.variable {
226 color: #e90;
227 }
228
229 &.important, &.bold {
230 font-weight: bold;
231 }
232
233 &.italic {
234 font-style: italic;
235 }
236
237 &.entity {
238 cursor: help;
239 }
240
241 & a {
242 color: inherit;
243 }
244} */
245
246div.code-toolbar {
247 position: relative;
248
249 & > .toolbar {
250 transition: opacity 0.3s ease-in-out;
251
252 @apply absolute right-4 top-[0.4em] z-10;
253 @apply gap-[1ch] flex opacity-0;
254 }
255
256 &:hover > .toolbar {
257 @apply opacity-100;
258 }
259
260 & > .toolbar > .toolbar-item {
261 @apply inline-block cursor-default;
262
263 & > button, & > a {
264 @apply cursor-pointer;
265 }
266 }
267
268 & > .toolbar > .toolbar-item {
269 font-size: .8em;
270 padding: 0 .5em;
271 @apply rounded-md;
272
273 @apply bg-ao-violet text-ao-white;
274
275 &:has(> button, > a) {
276 @apply border-2 border-ao-gold;
277 }
278
279 & > span {
280 @apply align-sub;
281 }
282 }
283
284 & > .toolbar > .toolbar-item {
285 &:hover, &:focus {
286 @apply bg-ao-violet-lighter;
287 }
288 }
289}
290
291/* *** *** *** */
292
293.token.treeview-part {
294 & .entry-line {
295 @apply relative indent-[-99em] inline-block align-top w-[1.2em];
296 }
297
298 & .entry-name {
299 @apply relative inline-block align-top;
300 @apply ml-[0ch];
301 }
302
303 & .entry-line + .entry-name {
304 @apply ml-[0.5ch];
305 }
306
307 & .entry-name.dotfile {
308 @apply opacity-60;
309 }
310
311 & .entry-name.dir:after {
312 content: "/";
313
314 @apply text-ao-white-darker;
315 }
316
317 & .entry-line:before,
318 & .line-h:after {
319 content: "";
320 @apply absolute top-0 left-1/2 w-1/2 h-full;
321 }
322
323 & .line-h:before,
324 & .line-v:before {
325 @apply border-l border-ao-white-darker;
326 }
327
328 & .line-v-last:before {
329 @apply h-1/2 border-l border-b border-ao-white-darker;
330 }
331
332 & .line-h:after {
333 @apply h-1/2 border-b border-ao-white-darker;
334 }
335}