dragon.gal
Multicolumn Bluesky client powered by Angular
1@import "tailwindcss";
2@import '@angular/cdk/overlay-prebuilt.css';
3@custom-variant theme-dark (&:where([data-theme="dark"] *));
4@custom-variant theme-hacker (&:where([data-theme="hacker"] *));
5
6html, body, .app-container {
7 font-size: 14px;
8 height: 100%;
9 text-align: left;
10 line-height: 1.3;
11 letter-spacing: -0.025em;
12
13 background-color: var(--color-bg);
14 color: var(--color-primary);
15}
16
17app-root * {
18 box-sizing: border-box;
19 scrollbar-width: thin;
20 scrollbar-gutter: stable;
21}
22
23.material-icons {
24 font-family: 'Material Icons';
25 font-weight: normal;
26 font-style: normal;
27 font-size: 16px;
28 display: inline-block;
29 line-height: 1;
30 text-transform: none;
31 letter-spacing: normal;
32 word-wrap: normal;
33 white-space: nowrap;
34 direction: ltr;
35
36 /* Support for all WebKit browsers. */
37 -webkit-font-smoothing: antialiased;
38 /* Support for Safari and Chrome. */
39 text-rendering: optimizeLegibility;
40
41 /* Support for Firefox. */
42 -moz-osx-font-smoothing: grayscale;
43
44 /* Support for IE. */
45 font-feature-settings: 'liga';
46}
47
48.material-icons-outlined {
49 font-family: 'Material Icons Outlined';
50 font-weight: normal;
51 font-style: normal;
52 font-size: 16px;
53 display: inline-block;
54 line-height: 1;
55 text-transform: none;
56 letter-spacing: normal;
57 word-wrap: normal;
58 white-space: nowrap;
59 direction: ltr;
60
61 /* Support for all WebKit browsers. */
62 -webkit-font-smoothing: antialiased;
63 /* Support for Safari and Chrome. */
64 text-rendering: optimizeLegibility;
65
66 /* Support for Firefox. */
67 -moz-osx-font-smoothing: grayscale;
68
69 /* Support for IE. */
70 font-feature-settings: 'liga';
71}
72
73/* VIDEO.JS */
74
75::ng-deep .video-js .vjs-control-bar {
76 background: linear-gradient(to top, rgba(43, 51, 63, 0.7), transparent);
77}
78::ng-deep .video-js > .vjs-remaining-time {
79 height: 0;
80 position: absolute;
81 bottom: 0;
82 right: 0;
83 font-size: 0.75rem;
84 font-family: 'Inter', sans-serif;
85 opacity: 0;
86}
87::ng-deep .video-js.vjs-user-inactive .vjs-remaining-time {
88 height: 2rem;
89 opacity: 1;
90 transition: 1.5s opacity ease;
91}
92
93@theme {
94 --font-mono: "Source Code Pro", monospace;
95 --font-sans: "Source Code Pro", sans-serif;
96
97 --text-sm: 0.9285rem;
98
99 --color-bg: #FFF;
100 --color-primary: #000;
101 --color-secondary: #E1E1E1;
102 --color-repost: #00aa00;
103 --color-like: #F00000;
104 --color-selection-bg: rgba(0, 0, 0, 0.99);
105 --color-selection-text: #FFF;
106 --color-background: #FFF;
107 --color-text: var(--color-base);
108 --color-placeholder: var(--color-base);
109 --color-link: var(--color-base);
110 --color-code-1: #aaaaaa;
111 --color-code-2: #ffffcc;
112 --color-code-3: #F00000;
113 --color-code-4: #F0A0A0;
114 --color-code-5: #0000aa;
115 --color-code-6: #4c8317;
116 --color-code-7: #aa0000;
117 --color-code-8: #000080;
118 --color-code-9: #00aa00;
119 --color-code-10: #888888;
120 --color-code-11: #555555;
121 --color-code-12: #800080;
122 --color-code-13: #00aaaa;
123 --color-code-14: #009999;
124 --color-code-15: #aa5500;
125 --color-code-16: #1e90ff;
126 --color-code-17: #800000;
127 --color-code-18: #bbbbbb;
128}
129
130@custom-variant midnight {
131 &:where([data-theme="midnight"] *) {
132 --color-base: #DBDBDB;
133 --border: dashed 1px rgba(219, 219, 219, 0.9);
134 --color-selection-bg: rgba(219, 219, 219, 0.99);
135 --color-selection-text: #000;
136 --color-background: #000;
137 --color-text: var(--color-base);
138 --color-placeholder: var(--color-base);
139 --color-link: var(--color-base);
140 --color-code-1: #aaaaaa;
141 --color-code-2: #ffffcc;
142 --color-code-3: #F00000;
143 --color-code-4: #F0A0A0;
144 --color-code-5: #b38aff;
145 --color-code-6: #5ba711;
146 --color-code-7: #e4e477;
147 --color-code-8: #000080;
148 --color-code-9: #05ca05;
149 --color-code-10: #888888;
150 --color-code-11: #555555;
151 --color-code-12: #800080;
152 --color-code-13: #00d4d4;
153 --color-code-14: #00c1c1;
154 --color-code-15: #ed9d13;
155 --color-code-16: #1e90ff;
156 --color-code-17: #800000;
157 --color-code-18: #bbbbbb;
158 }
159}
160
161@custom-variant hacker {
162 &:where([data-theme="hacker"] *) {
163 --color-base: #00ff00;
164 --border: dashed 1px rgba(0, 255, 0, 0.9);
165 --color-selection-bg: rgba(0, 255, 0, 0.99);
166 --color-selection-text: #000;
167 --color-background: #000;
168 --color-text: var(--color-base);
169 --color-placeholder: var(--color-base);
170 --color-link: var(--color-base);
171 --color-code-1: #aaaaaa;
172 --color-code-2: #ffffcc;
173 --color-code-3: #F00000;
174 --color-code-4: #F0A0A0;
175 --color-code-5: #b38aff;
176 --color-code-6: #5ba711;
177 --color-code-7: #e4e477;
178 --color-code-8: #000080;
179 --color-code-9: #05ca05;
180 --color-code-10: #888888;
181 --color-code-11: #555555;
182 --color-code-12: #800080;
183 --color-code-13: #00d4d4;
184 --color-code-14: #00c1c1;
185 --color-code-15: #ed9d13;
186 --color-code-16: #1e90ff;
187 --color-code-17: #800000;
188 --color-code-18: #bbbbbb;
189 }
190}
191
192@layer components {
193 .btn-primary {
194 box-sizing: border-box;
195 border: 1px solid;
196 border-color: var(--color-primary);
197 background-color: var(--color-primary);
198 color: var(--color-bg);
199 width: fit-content;
200 text-box: trim-both cap alphabetic;
201 padding: 0.5em 0.75em;
202 cursor: pointer;
203 min-height: 2em;
204
205 &:hover {
206 background-color: var(--color-bg);
207 color: var(--color-primary);
208 }
209
210 &:disabled {
211 pointer-events: none;
212 opacity: 0.3;
213 }
214 }
215
216 .btn-secondary {
217 box-sizing: border-box;
218 border: 1px solid;
219 border-color: var(--color-primary);
220 background-color: var(--color-bg);
221 color: var(--color-primary);
222 width: fit-content;
223 text-box: trim-both cap alphabetic;
224 padding: 0.5em 0.75em;
225 cursor: pointer;
226 min-height: 2em;
227
228 &.active {
229 background-color: color-mix(in oklab, var(--color-primary) /* #000 = #000000 */ 5%, transparent);
230 color: var(--color-primary);
231 }
232
233 &:hover {
234 background-color: color-mix(in oklab, var(--color-primary) /* #000 = #000000 */ 10%, transparent);
235 color: var(--color-primary);
236 }
237
238 &:disabled {
239 pointer-events: none;
240 opacity: 0.3;
241 }
242 }
243
244 .btn-dropdown {
245 box-sizing: border-box;
246 background-color: var(--color-bg);
247 color: var(--color-primary);
248 width: 100%;
249 text-align: left;
250 font-family: var(--font-mono);
251 padding: 0.5em 0.75em;
252 cursor: pointer;
253
254 &:hover {
255 background-color: var(--color-primary);
256 color: var(--color-bg);
257 }
258
259 &:disabled {
260 pointer-events: none;
261 }
262
263 &:focus-visible {
264 outline: none;
265 background-color: var(--color-primary);
266 color: var(--color-bg);
267 }
268 }
269}
270