margin.at
Margin is an open annotation layer for 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: #020617;
9 --bg-secondary: #0f172a;
10 --bg-tertiary: #1e293b;
11 --bg-card: #0f172a;
12 --bg-elevated: #1e293b;
13 --bg-hover: #334155;
14 --text-primary: #f8fafc;
15 --text-secondary: #94a3b8;
16 --text-tertiary: #64748b;
17 --border: rgba(148, 163, 184, 0.12);
18 --border-strong: rgba(148, 163, 184, 0.2);
19 --accent: #8b5cf6;
20 --accent-hover: #a78bfa;
21 --accent-subtle: rgba(139, 92, 246, 0.15);
22 --success: #34d399;
23 --warning: #fbbf24;
24}
25
26.light {
27 --bg-primary: #f8fafc;
28 --bg-secondary: #ffffff;
29 --bg-tertiary: #f1f5f9;
30 --bg-card: #ffffff;
31 --bg-elevated: #ffffff;
32 --bg-hover: #e2e8f0;
33 --text-primary: #0f172a;
34 --text-secondary: #64748b;
35 --text-tertiary: #94a3b8;
36 --border: rgba(100, 116, 139, 0.15);
37 --border-strong: rgba(100, 116, 139, 0.25);
38 --accent: #7c3aed;
39 --accent-hover: #6d28d9;
40 --accent-subtle: rgba(124, 58, 237, 0.12);
41}
42
43body {
44 background: var(--bg-primary);
45 color: var(--text-primary);
46 font-family:
47 'Inter',
48 system-ui,
49 -apple-system,
50 BlinkMacSystemFont,
51 sans-serif;
52 margin: 0;
53 padding: 0;
54 max-width: 100%;
55 min-height: 100vh;
56 overflow: hidden;
57 -webkit-font-smoothing: antialiased;
58 -moz-osx-font-smoothing: grayscale;
59}
60
61html.popup body {
62 width: 380px;
63 height: 520px;
64 min-height: 520px;
65}
66
67* {
68 box-sizing: border-box;
69}
70
71::-webkit-scrollbar {
72 width: 6px;
73}
74
75::-webkit-scrollbar-track {
76 background: transparent;
77}
78
79::-webkit-scrollbar-thumb {
80 background: var(--bg-tertiary);
81 border-radius: 3px;
82}
83
84::-webkit-scrollbar-thumb:hover {
85 background: var(--text-tertiary);
86}
87
88button,
89a,
90input,
91textarea {
92 transition: all 0.15s ease;
93}
94
95input:focus,
96textarea:focus,
97button:focus-visible {
98 outline: none;
99 box-shadow:
100 0 0 0 2px var(--accent-subtle),
101 0 0 0 4px var(--accent);
102}
103
104@keyframes fadeIn {
105 from {
106 opacity: 0;
107 transform: translateY(-4px);
108 }
109
110 to {
111 opacity: 1;
112 transform: translateY(0);
113 }
114}
115
116@keyframes slideUp {
117 from {
118 opacity: 0;
119 transform: translateY(8px);
120 }
121
122 to {
123 opacity: 1;
124 transform: translateY(0);
125 }
126}
127
128@keyframes slideDown {
129 from {
130 opacity: 0;
131 transform: translateY(-8px);
132 }
133
134 to {
135 opacity: 1;
136 transform: translateY(0);
137 }
138}
139
140@keyframes pulse {
141 0%,
142 100% {
143 opacity: 1;
144 }
145
146 50% {
147 opacity: 0.5;
148 }
149}
150
151.animate-fadeIn {
152 animation: fadeIn 0.2s ease forwards;
153}
154
155.animate-slideUp {
156 animation: slideUp 0.25s ease forwards;
157}
158
159.animate-slideDown {
160 animation: slideDown 0.2s ease forwards;
161}
162
163.animate-pulse {
164 animation: pulse 1.5s ease-in-out infinite;
165}