margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
Make cards separated independent of each other instead of stacked
scanash.com
+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
}