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