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
55
.feed > .annotation-card,
56
.feed > .card {
57
-
border-radius: 0;
58
}
59
60
.feed > .annotation-card:first-child,
61
.feed > .card:first-child {
62
border-top-left-radius: var(--radius-lg) !important;
···
73
.feed > .card:only-child {
74
border-radius: var(--radius-lg) !important;
75
}
76
77
.annotation-header {
78
display: flex;
···
54
55
.feed > .annotation-card,
56
.feed > .card {
57
+
border-radius: var(--radius-lg);
58
+
border: 1px solid var(--border);
59
+
background: var(--bg-card) !important;
60
+
overflow: hidden;
61
}
62
63
+
/*
64
.feed > .annotation-card:first-child,
65
.feed > .card:first-child {
66
border-top-left-radius: var(--radius-lg) !important;
···
77
.feed > .card:only-child {
78
border-radius: var(--radius-lg) !important;
79
}
80
+
*/
81
82
.annotation-header {
83
display: flex;
+10
web/src/css/collections.css
+10
web/src/css/collections.css
···
13
padding: 10px 20px;
14
background: var(--bg-secondary);
15
border-bottom: 1px solid var(--border);
16
+
border-top-left-radius: var(--radius-lg);
17
+
border-top-right-radius: var(--radius-lg);
18
}
19
20
.collection-context-inner {
···
330
border-color: rgba(255, 69, 58, 0.3);
331
color: var(--error);
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
.feed-container {
2
-
background: var(--bg-elevated);
3
-
border: 1px solid var(--border-hover);
4
-
border-radius: var(--radius-xl);
5
overflow: visible;
6
-
padding: 8px;
7
position: relative;
8
}
9
10
.feed {
11
display: flex;
12
flex-direction: column;
13
-
gap: 0;
14
width: 100%;
15
overflow: visible;
16
border-radius: var(--radius-lg);
···
18
}
19
20
.feed > * {
21
-
border-bottom: 1px solid var(--border);
22
position: relative;
23
}
24
25
.feed > *:last-child {
26
-
border-bottom: none;
27
}
28
29
.feed > *:hover {
···
38
from {
39
opacity: 0;
40
}
41
to {
42
opacity: 1;
43
}
···
1
.feed-container {
2
+
/* background: var(--bg-elevated); */
3
+
/* border: 1px solid var(--border-hover); */
4
+
/* border-radius: var(--radius-xl); */
5
overflow: visible;
6
+
/* padding: 8px; */
7
position: relative;
8
}
9
10
.feed {
11
display: flex;
12
flex-direction: column;
13
+
gap: 12px;
14
width: 100%;
15
overflow: visible;
16
border-radius: var(--radius-lg);
···
18
}
19
20
.feed > * {
21
+
background: var(--bg-card);
22
+
border: 1px solid var(--border);
23
+
border-radius: var(--radius-lg);
24
position: relative;
25
+
overflow: hidden;
26
}
27
28
.feed > *:last-child {
29
+
border-bottom: 1px solid var(--border);
30
}
31
32
.feed > *:hover {
···
41
from {
42
opacity: 0;
43
}
44
+
45
to {
46
opacity: 1;
47
}