notnite.com
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "InterVariable";
7 src: url("/static/fonts/InterVariable.woff2") format("woff2");
8 font-weight: normal;
9 font-style: normal;
10 font-display: swap;
11 }
12
13 @font-face {
14 font-family: "InterVariable";
15 src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16 font-weight: normal;
17 font-style: italic;
18 font-display: swap;
19 }
20
21 @font-face {
22 font-family: "IBMPlexMono";
23 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
24 font-weight: normal;
25 font-style: italic;
26 font-display: swap;
27 }
28
29 ::selection {
30 @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
31 }
32
33 @layer base {
34 html {
35 font-size: 15px;
36 }
37 @supports (font-variation-settings: normal) {
38 html {
39 font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1;
40 }
41 }
42
43 a {
44 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
45 }
46
47 label {
48 @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
49 }
50 input {
51 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
52 }
53 textarea {
54 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
55 }
56 details summary::-webkit-details-marker {
57 display: none;
58 }
59 }
60
61 @layer components {
62 .btn {
63 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
64 justify-center bg-transparent px-2 pb-[0.2rem] text-base
65 text-gray-900 before:absolute before:inset-0 before:-z-10
66 before:block before:rounded before:border before:border-gray-200
67 before:bg-white before:drop-shadow-sm
68 before:content-[''] hover:before:border-gray-300
69 hover:before:bg-gray-50
70 hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
71 focus:outline-none focus-visible:before:outline
72 focus-visible:before:outline-4 focus-visible:before:outline-gray-500
73 active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]
74 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200
75 disabled:hover:before:bg-white disabled:hover:before:shadow-none
76 dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700
77 dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700
78 dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]
79 dark:focus-visible:before:outline-gray-400
80 dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]
81 dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;
82 }
83 }
84 @layer utilities {
85 .error {
86 @apply py-1 text-red-400 dark:text-red-300;
87 }
88 .success {
89 @apply py-1 text-gray-900 dark:text-gray-100;
90 }
91 }
92}
93
94/* Background */ .bg { color: #4c4f69; background-color: #eff1f5; }
95/* PreWrapper */ .chroma { color: #4c4f69; background-color: #eff1f5; }
96/* Error */ .chroma .err { color: #d20f39 }
97/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
98/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
99/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
100/* LineHighlight */ .chroma .hl { background-color: #bcc0cc }
101/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8c8fa1 }
102/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8c8fa1 }
103/* Line */ .chroma .line { display: flex; }
104/* Keyword */ .chroma .k { color: #8839ef }
105/* KeywordConstant */ .chroma .kc { color: #fe640b }
106/* KeywordDeclaration */ .chroma .kd { color: #d20f39 }
107/* KeywordNamespace */ .chroma .kn { color: #179299 }
108/* KeywordPseudo */ .chroma .kp { color: #8839ef }
109/* KeywordReserved */ .chroma .kr { color: #8839ef }
110/* KeywordType */ .chroma .kt { color: #d20f39 }
111/* NameAttribute */ .chroma .na { color: #1e66f5 }
112/* NameBuiltin */ .chroma .nb { color: #04a5e5 }
113/* NameBuiltinPseudo */ .chroma .bp { color: #04a5e5 }
114/* NameClass */ .chroma .nc { color: #df8e1d }
115/* NameConstant */ .chroma .no { color: #df8e1d }
116/* NameDecorator */ .chroma .nd { color: #1e66f5; font-weight: bold }
117/* NameEntity */ .chroma .ni { color: #179299 }
118/* NameException */ .chroma .ne { color: #fe640b }
119/* NameFunction */ .chroma .nf { color: #1e66f5 }
120/* NameFunctionMagic */ .chroma .fm { color: #1e66f5 }
121/* NameLabel */ .chroma .nl { color: #04a5e5 }
122/* NameNamespace */ .chroma .nn { color: #fe640b }
123/* NameProperty */ .chroma .py { color: #fe640b }
124/* NameTag */ .chroma .nt { color: #8839ef }
125/* NameVariable */ .chroma .nv { color: #dc8a78 }
126/* NameVariableClass */ .chroma .vc { color: #dc8a78 }
127/* NameVariableGlobal */ .chroma .vg { color: #dc8a78 }
128/* NameVariableInstance */ .chroma .vi { color: #dc8a78 }
129/* NameVariableMagic */ .chroma .vm { color: #dc8a78 }
130/* LiteralString */ .chroma .s { color: #40a02b }
131/* LiteralStringAffix */ .chroma .sa { color: #d20f39 }
132/* LiteralStringBacktick */ .chroma .sb { color: #40a02b }
133/* LiteralStringChar */ .chroma .sc { color: #40a02b }
134/* LiteralStringDelimiter */ .chroma .dl { color: #1e66f5 }
135/* LiteralStringDoc */ .chroma .sd { color: #9ca0b0 }
136/* LiteralStringDouble */ .chroma .s2 { color: #40a02b }
137/* LiteralStringEscape */ .chroma .se { color: #1e66f5 }
138/* LiteralStringHeredoc */ .chroma .sh { color: #9ca0b0 }
139/* LiteralStringInterpol */ .chroma .si { color: #40a02b }
140/* LiteralStringOther */ .chroma .sx { color: #40a02b }
141/* LiteralStringRegex */ .chroma .sr { color: #179299 }
142/* LiteralStringSingle */ .chroma .s1 { color: #40a02b }
143/* LiteralStringSymbol */ .chroma .ss { color: #40a02b }
144/* LiteralNumber */ .chroma .m { color: #fe640b }
145/* LiteralNumberBin */ .chroma .mb { color: #fe640b }
146/* LiteralNumberFloat */ .chroma .mf { color: #fe640b }
147/* LiteralNumberHex */ .chroma .mh { color: #fe640b }
148/* LiteralNumberInteger */ .chroma .mi { color: #fe640b }
149/* LiteralNumberIntegerLong */ .chroma .il { color: #fe640b }
150/* LiteralNumberOct */ .chroma .mo { color: #fe640b }
151/* Operator */ .chroma .o { color: #04a5e5; font-weight: bold }
152/* OperatorWord */ .chroma .ow { color: #04a5e5; font-weight: bold }
153/* Comment */ .chroma .c { color: #9ca0b0; font-style: italic }
154/* CommentHashbang */ .chroma .ch { color: #9ca0b0; font-style: italic }
155/* CommentMultiline */ .chroma .cm { color: #9ca0b0; font-style: italic }
156/* CommentSingle */ .chroma .c1 { color: #9ca0b0; font-style: italic }
157/* CommentSpecial */ .chroma .cs { color: #9ca0b0; font-style: italic }
158/* CommentPreproc */ .chroma .cp { color: #9ca0b0; font-style: italic }
159/* CommentPreprocFile */ .chroma .cpf { color: #9ca0b0; font-weight: bold; font-style: italic }
160/* GenericDeleted */ .chroma .gd { color: #d20f39; background-color: #ccd0da }
161/* GenericEmph */ .chroma .ge { font-style: italic }
162/* GenericError */ .chroma .gr { color: #d20f39 }
163/* GenericHeading */ .chroma .gh { color: #fe640b; font-weight: bold }
164/* GenericInserted */ .chroma .gi { color: #40a02b; background-color: #ccd0da }
165/* GenericStrong */ .chroma .gs { font-weight: bold }
166/* GenericSubheading */ .chroma .gu { color: #fe640b; font-weight: bold }
167/* GenericTraceback */ .chroma .gt { color: #d20f39 }
168/* GenericUnderline */ .chroma .gl { text-decoration: underline }
169
170@media (prefers-color-scheme: dark) {
171/* Background */ .bg { color: #cad3f5; background-color: #24273a; }
172/* PreWrapper */ .chroma { color: #cad3f5; background-color: #24273a; }
173/* Error */ .chroma .err { color: #ed8796 }
174/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
175/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
176/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
177/* LineHighlight */ .chroma .hl { background-color: #494d64 }
178/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 }
179/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 }
180/* Line */ .chroma .line { display: flex; }
181/* Keyword */ .chroma .k { color: #c6a0f6 }
182/* KeywordConstant */ .chroma .kc { color: #f5a97f }
183/* KeywordDeclaration */ .chroma .kd { color: #ed8796 }
184/* KeywordNamespace */ .chroma .kn { color: #8bd5ca }
185/* KeywordPseudo */ .chroma .kp { color: #c6a0f6 }
186/* KeywordReserved */ .chroma .kr { color: #c6a0f6 }
187/* KeywordType */ .chroma .kt { color: #ed8796 }
188/* NameAttribute */ .chroma .na { color: #8aadf4 }
189/* NameBuiltin */ .chroma .nb { color: #91d7e3 }
190/* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3 }
191/* NameClass */ .chroma .nc { color: #eed49f }
192/* NameConstant */ .chroma .no { color: #eed49f }
193/* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold }
194/* NameEntity */ .chroma .ni { color: #8bd5ca }
195/* NameException */ .chroma .ne { color: #f5a97f }
196/* NameFunction */ .chroma .nf { color: #8aadf4 }
197/* NameFunctionMagic */ .chroma .fm { color: #8aadf4 }
198/* NameLabel */ .chroma .nl { color: #91d7e3 }
199/* NameNamespace */ .chroma .nn { color: #f5a97f }
200/* NameProperty */ .chroma .py { color: #f5a97f }
201/* NameTag */ .chroma .nt { color: #c6a0f6 }
202/* NameVariable */ .chroma .nv { color: #f4dbd6 }
203/* NameVariableClass */ .chroma .vc { color: #f4dbd6 }
204/* NameVariableGlobal */ .chroma .vg { color: #f4dbd6 }
205/* NameVariableInstance */ .chroma .vi { color: #f4dbd6 }
206/* NameVariableMagic */ .chroma .vm { color: #f4dbd6 }
207/* LiteralString */ .chroma .s { color: #a6da95 }
208/* LiteralStringAffix */ .chroma .sa { color: #ed8796 }
209/* LiteralStringBacktick */ .chroma .sb { color: #a6da95 }
210/* LiteralStringChar */ .chroma .sc { color: #a6da95 }
211/* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4 }
212/* LiteralStringDoc */ .chroma .sd { color: #6e738d }
213/* LiteralStringDouble */ .chroma .s2 { color: #a6da95 }
214/* LiteralStringEscape */ .chroma .se { color: #8aadf4 }
215/* LiteralStringHeredoc */ .chroma .sh { color: #6e738d }
216/* LiteralStringInterpol */ .chroma .si { color: #a6da95 }
217/* LiteralStringOther */ .chroma .sx { color: #a6da95 }
218/* LiteralStringRegex */ .chroma .sr { color: #8bd5ca }
219/* LiteralStringSingle */ .chroma .s1 { color: #a6da95 }
220/* LiteralStringSymbol */ .chroma .ss { color: #a6da95 }
221/* LiteralNumber */ .chroma .m { color: #f5a97f }
222/* LiteralNumberBin */ .chroma .mb { color: #f5a97f }
223/* LiteralNumberFloat */ .chroma .mf { color: #f5a97f }
224/* LiteralNumberHex */ .chroma .mh { color: #f5a97f }
225/* LiteralNumberInteger */ .chroma .mi { color: #f5a97f }
226/* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f }
227/* LiteralNumberOct */ .chroma .mo { color: #f5a97f }
228/* Operator */ .chroma .o { color: #91d7e3; font-weight: bold }
229/* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold }
230/* Comment */ .chroma .c { color: #6e738d; font-style: italic }
231/* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic }
232/* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic }
233/* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic }
234/* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic }
235/* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic }
236/* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic }
237/* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: #363a4f }
238/* GenericEmph */ .chroma .ge { font-style: italic }
239/* GenericError */ .chroma .gr { color: #ed8796 }
240/* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold }
241/* GenericInserted */ .chroma .gi { color: #a6da95; background-color: #363a4f }
242/* GenericStrong */ .chroma .gs { font-weight: bold }
243/* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold }
244/* GenericTraceback */ .chroma .gt { color: #ed8796 }
245/* GenericUnderline */ .chroma .gl { text-decoration: underline }
246}
247
248.chroma .line:has(.ln:target) {
249 @apply bg-amber-400/30 dark:bg-amber-500/20
250}