(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
Make cards separated independent of each other instead of stacked
+27
-8
+6
-1
web/src/css/annotations.css
+6
-1
web/src/css/annotations.css
···
54
54
55
55
.feed > .annotation-card,
56
56
.feed > .card {
57
-
border-radius: 0;
57
+
border-radius: var(--radius-lg);
58
+
border: 1px solid var(--border);
59
+
background: var(--bg-card) !important;
60
+
overflow: hidden;
58
61
}
59
62
63
+
/*
60
64
.feed > .annotation-card:first-child,
61
65
.feed > .card:first-child {
62
66
border-top-left-radius: var(--radius-lg) !important;
···
73
77
.feed > .card:only-child {
74
78
border-radius: var(--radius-lg) !important;
75
79
}
80
+
*/
76
81
77
82
.annotation-header {
78
83
display: flex;
+10
web/src/css/collections.css
+10
web/src/css/collections.css
···
13
13
padding: 10px 20px;
14
14
background: var(--bg-secondary);
15
15
border-bottom: 1px solid var(--border);
16
+
border-top-left-radius: var(--radius-lg);
17
+
border-top-right-radius: var(--radius-lg);
16
18
}
17
19
18
20
.collection-context-inner {
···
328
330
border-color: rgba(255, 69, 58, 0.3);
329
331
color: var(--error);
330
332
}
333
+
334
+
.collection-item-wrapper .card,
335
+
.collection-feed-item .card {
336
+
background: transparent !important;
337
+
border: none !important;
338
+
box-shadow: none;
339
+
border-radius: 0;
340
+
}
+11
-7
web/src/css/feed.css
+11
-7
web/src/css/feed.css
···
1
1
.feed-container {
2
-
background: var(--bg-elevated);
3
-
border: 1px solid var(--border-hover);
4
-
border-radius: var(--radius-xl);
2
+
/* background: var(--bg-elevated); */
3
+
/* border: 1px solid var(--border-hover); */
4
+
/* border-radius: var(--radius-xl); */
5
5
overflow: visible;
6
-
padding: 8px;
6
+
/* padding: 8px; */
7
7
position: relative;
8
8
}
9
9
10
10
.feed {
11
11
display: flex;
12
12
flex-direction: column;
13
-
gap: 0;
13
+
gap: 12px;
14
14
width: 100%;
15
15
overflow: visible;
16
16
border-radius: var(--radius-lg);
···
18
18
}
19
19
20
20
.feed > * {
21
-
border-bottom: 1px solid var(--border);
21
+
background: var(--bg-card);
22
+
border: 1px solid var(--border);
23
+
border-radius: var(--radius-lg);
22
24
position: relative;
25
+
overflow: hidden;
23
26
}
24
27
25
28
.feed > *:last-child {
26
-
border-bottom: none;
29
+
border-bottom: 1px solid var(--border);
27
30
}
28
31
29
32
.feed > *:hover {
···
38
41
from {
39
42
opacity: 0;
40
43
}
44
+
41
45
to {
42
46
opacity: 1;
43
47
}