(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
2
3:root {
4 --bg-primary: #0a0a0d;
5 --bg-secondary: #121216;
6 --bg-tertiary: #1a1a1f;
7 --bg-card: #0f0f13;
8 --bg-elevated: #18181d;
9 --bg-hover: #1e1e24;
10
11 --glass-border: rgba(234, 234, 238, 0.08);
12 --glass-bg: rgba(10, 10, 13, 0.92);
13
14 --text-primary: #eaeaee;
15 --text-secondary: #b7b6c5;
16 --text-tertiary: #6e6d7a;
17
18 --border: rgba(183, 182, 197, 0.12);
19 --border-hover: rgba(183, 182, 197, 0.2);
20 --accent: #957a86;
21 --accent-hover: #a98d98;
22 --accent-subtle: rgba(149, 122, 134, 0.15);
23 --accent-text: #c4a8b2;
24
25 --success: #7fb069;
26 --error: #d97766;
27 --warning: #e8a54b;
28 --info: #6eb5ff;
29
30 --radius-xs: 4px;
31 --radius-sm: 6px;
32 --radius-md: 8px;
33 --radius-lg: 12px;
34 --radius-xl: 16px;
35 --radius-full: 9999px;
36
37 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
38 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
39 --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
40 --shadow-glow: 0 0 20px rgba(149, 122, 134, 0.2);
41
42 --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
43 --font-display: "IBM Plex Sans", sans-serif;
44 --font-mono: "IBM Plex Mono", monospace;
45
46 --nav-bg: rgba(10, 10, 13, 0.95);
47
48 --sidebar-width: 200px;
49 --right-sidebar-width: 260px;
50 --content-max-width: 600px;
51 --spacing-xs: 4px;
52 --spacing-sm: 8px;
53 --spacing-md: 12px;
54 --spacing-lg: 20px;
55 --spacing-xl: 28px;
56}
57
58[data-theme="light"] {
59 --bg-primary: #f8f8fa;
60 --bg-secondary: #ffffff;
61 --bg-tertiary: #f0f0f4;
62 --bg-card: #ffffff;
63 --bg-elevated: #ffffff;
64 --bg-hover: #eeeef2;
65
66 --glass-border: rgba(92, 73, 90, 0.1);
67 --glass-bg: rgba(248, 248, 250, 0.95);
68
69 --text-primary: #18171c;
70 --text-secondary: #5c495a;
71 --text-tertiary: #8a8494;
72
73 --border: rgba(92, 73, 90, 0.12);
74 --border-hover: rgba(92, 73, 90, 0.22);
75
76 --accent: #7a5f6d;
77 --accent-hover: #664e5b;
78 --accent-subtle: rgba(149, 122, 134, 0.12);
79 --accent-text: #5c495a;
80
81 --shadow-sm: 0 1px 3px rgba(92, 73, 90, 0.06);
82 --shadow-md: 0 4px 12px rgba(92, 73, 90, 0.08);
83 --shadow-lg: 0 8px 24px rgba(92, 73, 90, 0.1);
84 --shadow-glow: 0 0 20px rgba(149, 122, 134, 0.1);
85
86 --nav-bg: rgba(255, 255, 255, 0.95);
87}
88
89* {
90 margin: 0;
91 padding: 0;
92 box-sizing: border-box;
93}
94
95html {
96 font-size: 16px;
97 -webkit-text-size-adjust: 100%;
98 overflow-x: hidden;
99}
100
101body {
102 font-family: var(--font-sans);
103 background: var(--bg-primary);
104 color: var(--text-primary);
105 line-height: 1.55;
106 min-height: 100vh;
107 -webkit-font-smoothing: antialiased;
108 -moz-osx-font-smoothing: grayscale;
109 overflow-x: hidden;
110 max-width: 100vw;
111 font-size: 0.9375rem;
112}
113
114h1,
115h2,
116h3,
117h4,
118h5,
119h6 {
120 font-family: var(--font-display);
121 font-weight: 600;
122 letter-spacing: -0.02em;
123 color: var(--text-primary);
124 line-height: 1.3;
125}
126
127h1 {
128 font-size: 1.5rem;
129}
130h2 {
131 font-size: 1.25rem;
132}
133h3 {
134 font-size: 1.1rem;
135}
136
137p {
138 color: var(--text-secondary);
139 line-height: 1.6;
140}
141
142a {
143 color: inherit;
144 text-decoration: none;
145 transition: color 0.2s ease;
146}
147
148button {
149 font-family: inherit;
150 cursor: pointer;
151 border: none;
152 background: none;
153}
154
155input,
156textarea,
157select {
158 font-family: inherit;
159 font-size: inherit;
160 color: var(--text-primary);
161}
162
163::selection {
164 background: var(--accent-subtle);
165 color: var(--accent-text);
166}
167
168::-webkit-scrollbar {
169 width: 10px;
170 height: 10px;
171}
172
173::-webkit-scrollbar-track {
174 background: var(--bg-secondary);
175}
176
177::-webkit-scrollbar-thumb {
178 background: var(--bg-hover);
179 border-radius: var(--radius-full);
180 border: 2px solid var(--bg-secondary);
181}
182
183::-webkit-scrollbar-thumb:hover {
184 background: var(--text-tertiary);
185}
186
187:focus-visible {
188 outline: 2px solid var(--accent);
189 outline-offset: 3px;
190}
191
192.text-sm {
193 font-size: 0.9rem;
194}
195
196.text-xs {
197 font-size: 0.8rem;
198}
199
200.font-medium {
201 font-weight: 500;
202}
203
204.font-semibold {
205 font-weight: 600;
206}
207
208.font-mono {
209 font-family: var(--font-mono);
210}
211
212.text-muted {
213 color: var(--text-secondary);
214}
215
216.text-faint {
217 color: var(--text-tertiary);
218}
219
220.card {
221 background: var(--bg-card);
222 border-radius: var(--radius-lg);
223 border: 1px solid var(--border);
224}