jbc.lol
unoffical wafrn mirror
wafrn.net
atproto
social-network
activitypub
1@use '@angular/material' as mat;
2@use './app/styles/basic-html.scss';
3@use './app/styles/dialog.scss';
4@use './app/styles/material-overrides.scss';
5@use './app/styles/post-card.scss';
6@use './app/styles/settings.scss';
7@use './app/styles/quil.scss';
8@use './app/styles/theme-switcher.scss';
9@use './app/styles/viewer.min.css';
10@use './app/styles/viewer-overrides.scss';
11@use './app/styles/vlite.css';
12@use './app/styles/vlite-overrides.scss';
13@use './app/styles/tags.scss';
14
15// Color scheme default
16@import './assets/themes/default.css';
17@import './assets/fonts/inter.css';
18@import './assets/fonts/firacode.css';
19
20html {
21 color-scheme: light dark;
22 @include mat.theme(
23 (
24 color: mat.$violet-palette,
25 density: 0
26 )
27 );
28}
29
30// HACK: Have to make dummy theme to initialize typography
31$theme: mat.define-theme(
32 (
33 color: (
34 primary: mat.$violet-palette
35 )
36 )
37);
38
39@include mat.typography-hierarchy($theme);
40
41:root {
42 @include mat.badge-overrides(
43 (
44 background-color: var(--mat-button-filled-container-color, var(--mat-sys-primary))
45 )
46 );
47}
48
49// Variables
50:root {
51 --wafrn-blue: light-dark(#125e59, #96d8d1);
52 --mat-sys-label-small-size: 0.688rem;
53
54 --info-card-info-background: light-dark(#d5e3fe, #3a475d);
55 --info-card-warning-background: light-dark(#d7c3b8, #52443c);
56 --mat-dialog-container-max-width: 960px;
57}
58
59// Fonts overrides
60// I don't think this is defined anywhere else, should be fine either way.
61// I hope to not use !important here eventually, so...
62// TODO: No !important
63
64:root,
65body,
66html {
67 font-family: Inter, sans-serif !important;
68 font-feature-settings:
69 'liga' 1,
70 'calt' 1,
71 'tnum' 1,
72 'case' 1,
73 'zero' 1,
74 'ss01' 0,
75 'ss02' 1 !important;
76}
77
78@supports (font-variation-settings: normal) {
79 :root,
80 body,
81 html {
82 font-family: InterVariable, sans-serif !important;
83 font-feature-settings:
84 'liga' 1,
85 'calt' 1,
86 'tnum' 1,
87 'case' 1,
88 'zero' 1,
89 'ss01' 0,
90 'ss02' 1 !important;
91 }
92}
93
94code {
95 font-family: 'Fira Code', 'Fira Mono', monospace !important;
96}
97
98// Global style fixes
99* {
100 box-sizing: border-box;
101 scrollbar-color: var(--mat-sys-outline-variant) transparent;
102 scrollbar-width: thin;
103}
104
105html {
106 height: 100%;
107 background-color: var(--mat-sys-surface);
108 overflow-wrap: anywhere;
109 overflow-y: scroll;
110}
111
112body {
113 min-height: 100%;
114 margin: 0;
115}
116
117.wafrn-container {
118 max-width: 800px;
119}
120
121.wafrn-container-wide {
122 max-width: 1200px;
123}
124
125.wafrn-container-header {
126 border-bottom: 2px dashed var(--mat-sys-outline-variant);
127}
128
129.wafrn-container-footer {
130 border-top: 2px dashed var(--mat-sys-outline-variant);
131}
132
133.wafrn-content {
134 padding-top: 1.5rem;
135 padding-bottom: calc(64px + 1em);
136 transition: margin 200ms ease-out;
137}
138
139// No JavaScript
140#no-js {
141 position: fixed;
142 inset: 0;
143 background: var(--mat-sys-background);
144 cursor: wait;
145 z-index: 99999999; // Go on top of splash screen!
146
147 & .text-muted {
148 color: var(--mat-sys-outline);
149 }
150}
151
152// Pre-splash / Indieweb content
153#indieweb {
154 position: relative;
155 min-height: 100dvh;
156 inset: 0;
157}
158
159#microformats {
160 max-width: 800px;
161 border: 1px solid black;
162 margin: 2em;
163 padding: 1em;
164
165 .h-card {
166 display: flex;
167 flex-flow: row wrap;
168
169 border: 1px solid black;
170 margin: 1em;
171
172 .u-featured {
173 object-fit: cover;
174 order: 1;
175 flex: 1 100%;
176 }
177
178 .u-photo {
179 object-fit: contain;
180 max-height: 5em;
181 order: 2;
182 }
183
184 .p-name {
185 order: 3;
186 flex: 3 0px;
187 align-self: center;
188 padding: 1em;
189 text-decoration: none;
190 }
191 }
192
193 .h-entry {
194 padding: 1em;
195 border: 1px solid black;
196 margin-bottom: 2em;
197 }
198
199 .u-uid,
200 .dt-pubished,
201 .u-in-reply-to {
202 text-align: right;
203 display: block;
204 }
205}
206
207// Splashscreen
208#splash {
209 position: relative;
210 min-height: 100dvh;
211 inset: 0;
212}
213
214#splash {
215 background: var(--mat-sys-background);
216 cursor: wait;
217 z-index: 2; // Minimum
218 transition: display, opacity;
219 transition-duration: 120ms;
220 transition-behavior: allow-discrete;
221 transition-timing-function: ease-in;
222}
223
224#splash-icon,
225#splash-icon img {
226 pointer-events: none;
227 user-select: none;
228}
229
230#splash-text {
231 margin: 0;
232 margin-inline: 1rem;
233 height: 0; // Do not shift image based on text height
234 max-width: 40ch;
235 text-align: center;
236 color: var(--mat-sys-outline);
237}
238
239#splash-content {
240 min-height: 100dvh;
241 display: flex;
242 flex-direction: column;
243 justify-content: center;
244 align-items: center;
245 gap: 1rem;
246 transition: translate 120ms ease-in;
247}
248
249#indieweb.loaded,
250#splash.loaded {
251 display: none;
252 opacity: 0;
253
254 & #splash-content {
255 translate: 0 -6px;
256 }
257
258 & #microformats {
259 translate: 0 -6px;
260 }
261}
262
263// Utility styles
264.subtle-link {
265 text-decoration: none;
266
267 &:hover {
268 text-decoration: underline;
269 }
270}
271
272.force-comic-sans {
273 font-family: 'Comic Sans MS', cursive, sans-serif;
274}
275
276/* Small-Screen media queries. */
277/* Currently encompasses the bottom-sheet style for dialogs, as well as the full-width post style for narrow screens.*/
278@media screen and (max-width: 800px) {
279 /* START bottom-sheet */
280 :root {
281 --mat-dialog-container-shape: 16px 16px 0px 0px;
282 }
283
284 .cdk-global-overlay-wrapper {
285 align-items: flex-end !important;
286 }
287
288 [id*='mat-mdc-dialog-'] {
289 animation: 300ms slideup;
290 --mat-dialog-transition-duration: 0ms !important;
291 }
292
293 @keyframes slideup {
294 0% {
295 transform: translateY(200%);
296 }
297
298 100% {
299 transform: translateY(0%);
300 }
301 }
302
303 /* END bottom-sheet */
304 /* START fullwidth post style */
305 mat-card {
306 border-radius: 0px !important;
307 margin-inline: 0px !important;
308 }
309
310 /* END fullwidth post style */
311
312 /* Flush first post to match 0 margin sides*/
313 .wafrn-content {
314 padding-top: 0;
315 }
316}
317
318.shortened-post {
319 max-height: 450px;
320 overflow: hidden;
321}
322
323/* Horizontal Media Carousel. Disabled by default. */
324.media-gallery.media-carousel {
325 --media-height: 100%;
326 flex-direction: row !important;
327 overflow-x: scroll;
328 gap: 12px !important;
329 align-items: center;
330
331 app-wafrn-media {
332 box-sizing: border-box;
333 width: fit-content;
334 flex-shrink: 0;
335 border-radius: var(--mat-sys-corner-large);
336 max-width: 95%;
337 }
338
339 .media-container {
340 border-radius: var(--mat-sys-corner-large);
341 max-height: var(--media-height);
342 }
343
344 .media-content-container {
345 display: flex;
346 align-items: center;
347 justify-content: center;
348 height: var(--media-height);
349 border-radius: var(--mat-sys-corner-large);
350 }
351
352 .media-content-container:has(.v-video) {
353 height: fit-content;
354 }
355
356 .displayed-image {
357 max-height: var(--media-height);
358 border-radius: var(--mat-sys-corner-large) !important;
359 }
360}
361
362.quoted-post .emojireact-button {
363 background-color: var(--mat-sys-surface-container-highest) !important;
364}
365
366.w-50 {
367 width: 50%;
368}
369
370.snappy-hide {
371 display: none;
372}
373
374.tag {
375 word-break: break-word;
376}
377
378mat-tab-header {
379 margin-bottom: 12px;
380}
381
382// Workaround for bug with matTooltip
383.mat-mdc-tooltip-trigger {
384 touch-action: auto !important;
385 -webkit-user-drag: auto !important;
386}
387
388.sr-only {
389 position: absolute !important;
390 width: 1px !important;
391 height: 1px !important;
392 padding: 0 !important;
393 margin: -1px !important;
394 overflow: hidden !important;
395 clip: rect(0 0 0 0) !important;
396 white-space: nowrap !important;
397 border: 0 !important;
398}
399
400.sr-only-focusable {
401 position: absolute;
402 width: 1px;
403 height: 1px;
404 padding: 0;
405 margin: -1px;
406 overflow: hidden;
407 clip: rect(0 0 0 0);
408 white-space: nowrap;
409 border: 0;
410
411 &:focus,
412 &:active {
413 position: static;
414 width: auto;
415 height: auto;
416 margin: 0;
417 overflow: visible;
418 clip: auto;
419 white-space: normal;
420 }
421}
422
423.wafrn-toolbar {
424 position: fixed;
425 bottom: 0;
426 width: 100%;
427 z-index: 2;
428 justify-content: space-between;
429 box-shadow: var(--mat-sys-level4);
430 border-top: 1px solid var(--mat-sys-outline-variant);
431 --mat-list-list-item-one-line-container-height: 52px;
432 --mat-sys-hover-state-layer-opacity: 0;
433
434 // Notch fixes
435 --mat-toolbar-standard-height: calc(64px + env(safe-area-inset-bottom));
436 --mat-toolbar-mobile-height: calc(56px + env(safe-area-inset-bottom));
437 :root & {
438 padding-bottom: env(safe-area-inset-bottom);
439 }
440}
441
442.wafrn-toolbar-section {
443 display: flex;
444 gap: 0.25rem;
445}
446
447.vertical-rule {
448 border-right: 1px solid var(--mat-sys-outline-variant);
449}