margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');
2
3@tailwind base;
4@tailwind components;
5@tailwind utilities;
6
7:root {
8 --bg-primary: #18181b;
9 --bg-secondary: #1e1e22;
10 --bg-tertiary: #27272a;
11 --bg-card: #1e1e22;
12 --bg-elevated: #27272a;
13 --bg-hover: #2e2e33;
14 --text-primary: #fafafa;
15 --text-secondary: #a1a1aa;
16 --text-tertiary: #71717a;
17 --border: rgba(255, 255, 255, 0.08);
18 --border-strong: rgba(255, 255, 255, 0.14);
19 --accent: #3b82f6;
20 --accent-hover: #2563eb;
21 --accent-subtle: rgba(59, 130, 246, 0.12);
22 --success: #34d399;
23 --warning: #fbbf24;
24 --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
25 --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.5);
26}
27
28.light {
29 --bg-primary: #fafafa;
30 --bg-secondary: #ffffff;
31 --bg-tertiary: #f4f4f5;
32 --bg-card: #ffffff;
33 --bg-elevated: #ffffff;
34 --bg-hover: #f4f4f5;
35 --text-primary: #18181b;
36 --text-secondary: #71717a;
37 --text-tertiary: #a1a1aa;
38 --border: rgba(0, 0, 0, 0.08);
39 --border-strong: rgba(0, 0, 0, 0.14);
40 --accent: #2563eb;
41 --accent-hover: #1d4ed8;
42 --accent-subtle: rgba(37, 99, 235, 0.08);
43 --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
44 --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);
45}
46
47body {
48 background: var(--bg-primary);
49 color: var(--text-primary);
50 font-family:
51 'Inter',
52 system-ui,
53 -apple-system,
54 BlinkMacSystemFont,
55 sans-serif;
56 margin: 0;
57 padding: 0;
58 max-width: 100%;
59 min-height: 100vh;
60 overflow: hidden;
61 -webkit-font-smoothing: antialiased;
62 -moz-osx-font-smoothing: grayscale;
63}
64
65html.popup body {
66 width: 400px;
67 height: 540px;
68 min-height: 540px;
69}
70
71* {
72 box-sizing: border-box;
73}
74
75h1,
76h2,
77h3,
78h4,
79h5,
80h6 {
81 font-family: 'Outfit', system-ui, sans-serif;
82 letter-spacing: -0.02em;
83}
84
85::-webkit-scrollbar {
86 width: 5px;
87}
88
89::-webkit-scrollbar-track {
90 background: transparent;
91}
92
93::-webkit-scrollbar-thumb {
94 background: var(--bg-tertiary);
95 border-radius: 10px;
96}
97
98::-webkit-scrollbar-thumb:hover {
99 background: var(--text-tertiary);
100}
101
102button,
103a,
104input,
105textarea {
106 transition: all 0.15s ease;
107}
108
109input:focus,
110textarea:focus {
111 outline: none;
112 box-shadow:
113 0 0 0 2px var(--bg-primary),
114 0 0 0 4px var(--accent);
115}
116
117button:focus-visible {
118 outline: none;
119 box-shadow:
120 0 0 0 2px var(--bg-primary),
121 0 0 0 4px var(--accent);
122}
123
124@keyframes fadeIn {
125 from {
126 opacity: 0;
127 transform: translateY(-4px);
128 }
129
130 to {
131 opacity: 1;
132 transform: translateY(0);
133 }
134}
135
136@keyframes slideUp {
137 from {
138 opacity: 0;
139 transform: translateY(8px);
140 }
141
142 to {
143 opacity: 1;
144 transform: translateY(0);
145 }
146}
147
148@keyframes slideDown {
149 from {
150 opacity: 0;
151 transform: translateY(-8px);
152 }
153
154 to {
155 opacity: 1;
156 transform: translateY(0);
157 }
158}
159
160@keyframes scaleIn {
161 from {
162 opacity: 0;
163 transform: scale(0.96);
164 }
165
166 to {
167 opacity: 1;
168 transform: scale(1);
169 }
170}
171
172@keyframes pulse {
173 0%,
174 100% {
175 opacity: 1;
176 }
177
178 50% {
179 opacity: 0.5;
180 }
181}
182
183@keyframes shimmer {
184 0% {
185 background-position: -200% 0;
186 }
187 100% {
188 background-position: 200% 0;
189 }
190}
191
192.animate-fadeIn {
193 animation: fadeIn 0.2s ease forwards;
194}
195
196.animate-slideUp {
197 animation: slideUp 0.25s ease forwards;
198}
199
200.animate-slideDown {
201 animation: slideDown 0.2s ease forwards;
202}
203
204.animate-scaleIn {
205 animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
206}
207
208.animate-pulse {
209 animation: pulse 1.5s ease-in-out infinite;
210}
211
212.glass {
213 backdrop-filter: blur(12px) saturate(180%);
214 -webkit-backdrop-filter: blur(12px) saturate(180%);
215}
216
217.skeleton {
218 background: linear-gradient(
219 90deg,
220 var(--bg-tertiary) 25%,
221 var(--bg-hover) 50%,
222 var(--bg-tertiary) 75%
223 );
224 background-size: 200% 100%;
225 animation: shimmer 1.5s infinite;
226 border-radius: 6px;
227}