accidental.cc
offline-first, p2p synced, atproto enabled, feed reader
1@layer system {
2 :root {
3 --safe-top: env(safe-area-inset-top, 0px);
4 --safe-bottom: env(safe-area-inset-bottom, 0px);
5 --safe-left: env(safe-area-inset-left, 0px);
6 --safe-right: env(safe-area-inset-right, 0px);
7
8 --layout-header-height: 56px;
9 --layout-sidebar-width: 360px;
10 --layout-drawer-mini: 64px;
11 --layout-drawer-midi: 40dvh;
12 }
13
14 html {
15 &.force-dark { color-scheme: dark; }
16 &.force-light { color-scheme: light; }
17
18 color-scheme: light dark;
19
20 --light-bg: ghostwhite;
21 --light-color: darkslategray;
22 --light-accent: tomato;
23
24 --dark-bg: #223;
25 --dark-color: ghostwhite;
26 --dark-accent: gold;
27
28 --theme-bg: light-dark(var(--light-bg), var(--dark-bg));
29 --theme-color: light-dark(var(--light-color), var(--dark-color));
30 --theme-accent: light-dark(var(--light-accent), var(--dark-accent));
31
32 /* defaults */
33
34 font-size: 14px;
35 color: var(--theme-color);
36 background: var(--theme-bg);
37 }
38
39 /*
40 put content on the page that js can use to detect breakpoints
41 @see app/primitives/useBreakpoint
42 */
43
44 body:before {
45 content: 'bp:phone';
46 display: none;
47 }
48
49 @media (--tablet) {
50 body:before {
51 content: 'bp:tablet';
52 }
53 }
54
55 @media (--desktop) {
56 body:before {
57 content: 'bp:desktop';
58 }
59 }
60}