(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.card {
2 background: var(--bg-primary);
3 border: none;
4 border-radius: 0;
5 transition: all 0.15s ease;
6 position: relative;
7 overflow: visible;
8}
9
10.semble-badge {
11 display: flex;
12 align-items: center;
13 gap: 4px;
14 font-size: 0.75rem;
15 color: var(--text-tertiary);
16 margin-right: 4px;
17}
18
19.semble-badge img {
20 width: 14px;
21 height: 14px;
22}
23
24.bookmark-preview {
25 display: block;
26 padding: 14px 16px;
27 background: linear-gradient(
28 135deg,
29 var(--bg-tertiary) 0%,
30 var(--bg-secondary) 100%
31 );
32 border: 1px solid var(--border);
33 border-left: 3px solid var(--accent);
34 border-radius: var(--radius-md);
35 text-decoration: none;
36 transition: all 0.2s ease;
37 position: relative;
38 z-index: 1;
39}
40
41.bookmark-preview:hover {
42 background: var(--bg-hover);
43 border-left-color: var(--accent-hover);
44}
45
46.bookmark-preview-content {
47 display: flex;
48 flex-direction: column;
49 gap: 4px;
50}
51
52.bookmark-preview-site {
53 display: flex;
54 align-items: center;
55 gap: 6px;
56 font-size: 0.7rem;
57 color: var(--text-tertiary);
58 text-transform: uppercase;
59 letter-spacing: 0.06em;
60 font-weight: 500;
61}
62
63.bookmark-preview-site svg {
64 color: var(--accent);
65}
66
67.bookmark-preview-title {
68 font-size: 0.95rem;
69 font-weight: 600;
70 color: var(--text-primary);
71 line-height: 1.35;
72 margin: 0;
73 display: -webkit-box;
74 -webkit-line-clamp: 2;
75 -webkit-box-orient: vertical;
76 overflow: hidden;
77}
78
79.bookmark-preview-desc {
80 font-size: 0.8rem;
81 color: var(--text-secondary);
82 line-height: 1.45;
83 margin: 0;
84 display: -webkit-box;
85 -webkit-line-clamp: 2;
86 -webkit-box-orient: vertical;
87 overflow: hidden;
88}
89
90.bookmark-card .annotation-content {
91 padding-left: 0;
92 overflow: visible;
93}
94
95.bookmark-card {
96 overflow: visible !important;
97}
98
99.bookmark-card:hover {
100 z-index: 100 !important;
101 overflow: visible !important;
102}
103
104.bookmark-site {
105 display: flex;
106 align-items: center;
107 gap: 6px;
108 font-size: 0.8rem;
109 color: var(--text-tertiary);
110 text-transform: uppercase;
111 letter-spacing: 0.02em;
112}
113
114.bookmark-title {
115 font-size: 1rem;
116 font-weight: 600;
117 color: var(--text-primary);
118 line-height: 1.4;
119 margin: 0;
120}
121
122.bookmark-desc {
123 font-size: 0.875rem;
124 color: var(--text-secondary);
125 line-height: 1.5;
126 margin: 0;
127 display: -webkit-box;
128 -webkit-line-clamp: 2;
129 -webkit-box-orient: vertical;
130 overflow: hidden;
131}
132
133.edit-form {
134 display: flex;
135 flex-direction: column;
136 gap: 8px;
137}
138
139.edit-textarea,
140.edit-input {
141 width: 100%;
142 padding: 10px 12px;
143 background: var(--bg-primary);
144 border: 1px solid var(--border);
145 border-radius: var(--radius-md);
146 color: var(--text-primary);
147 font-family: inherit;
148 font-size: 0.9rem;
149 transition: border-color 0.15s ease;
150}
151
152.edit-textarea {
153 resize: vertical;
154 min-height: 80px;
155}
156
157.edit-textarea:focus,
158.edit-input:focus {
159 outline: none;
160 border-color: var(--accent);
161}
162
163.edit-actions {
164 display: flex;
165 justify-content: flex-end;
166 gap: 8px;
167}
168
169.color-edit-form {
170 display: flex;
171 align-items: center;
172 gap: 8px;
173 padding: 10px 12px;
174 background: var(--bg-secondary);
175 border: 1px solid var(--border);
176 border-radius: var(--radius-md);
177}
178
179.color-picker-wrapper {
180 position: relative;
181 width: 28px;
182 height: 28px;
183 flex-shrink: 0;
184}
185
186.color-preview {
187 width: 100%;
188 height: 100%;
189 border-radius: 50%;
190 border: 2px solid var(--bg-card);
191 box-shadow: 0 0 0 1px var(--border);
192}
193
194.color-input {
195 position: absolute;
196 top: 0;
197 left: 0;
198 width: 100%;
199 height: 100%;
200 opacity: 0;
201 cursor: pointer;
202}
203
204.color-edit-form .edit-input {
205 margin: 0;
206 flex: 1;
207 padding: 6px 10px;
208 height: 32px;
209 border: none;
210 background: transparent;
211}
212
213.btn-icon {
214 padding: 0 10px;
215 height: 32px;
216 min-width: auto;
217}
218
219.history-panel {
220 padding: 12px;
221 background: var(--bg-secondary);
222 border: 1px solid var(--border);
223 border-radius: var(--radius-md);
224}
225
226.history-header {
227 display: flex;
228 justify-content: space-between;
229 align-items: center;
230 margin-bottom: 12px;
231}
232
233.history-title {
234 font-size: 0.9rem;
235 font-weight: 600;
236 color: var(--text-primary);
237}
238
239.history-status {
240 font-size: 0.85rem;
241 color: var(--text-tertiary);
242 font-style: italic;
243}
244
245.history-list {
246 list-style: none;
247 padding: 0;
248 margin: 0;
249 display: flex;
250 flex-direction: column;
251 gap: 8px;
252}
253
254.history-item {
255 padding: 8px 10px;
256 background: var(--bg-tertiary);
257 border-radius: var(--radius-sm);
258}
259
260.history-date {
261 font-size: 0.75rem;
262 color: var(--text-tertiary);
263 margin-bottom: 4px;
264}
265
266.history-content {
267 font-size: 0.85rem;
268 color: var(--text-secondary);
269 line-height: 1.5;
270}