(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.btn {
2 display: inline-flex;
3 align-items: center;
4 justify-content: center;
5 gap: 6px;
6 padding: 8px 16px;
7 font-size: 0.85rem;
8 font-weight: 500;
9 border-radius: var(--radius-md);
10 transition: all 0.15s ease;
11 white-space: nowrap;
12 border: none;
13 cursor: pointer;
14}
15
16.btn-primary {
17 background: var(--accent);
18 color: white;
19}
20
21.btn-primary:hover {
22 background: var(--accent-hover);
23 box-shadow: var(--shadow-glow);
24}
25
26.btn-secondary {
27 background: var(--bg-tertiary);
28 color: var(--text-primary);
29 border: 1px solid var(--border);
30}
31
32.btn-secondary:hover {
33 background: var(--bg-hover);
34 border-color: var(--border-hover);
35}
36
37.btn-ghost {
38 color: var(--text-secondary);
39 padding: 8px 12px;
40 background: transparent;
41}
42
43.btn-ghost:hover {
44 color: var(--text-primary);
45 background: var(--bg-tertiary);
46}
47
48.btn-bluesky {
49 background: #0085ff;
50 color: white;
51 display: flex;
52 align-items: center;
53 justify-content: center;
54 gap: 8px;
55 transition: all 0.15s;
56}
57
58.btn-bluesky:hover {
59 background: #0070dd;
60}
61
62.btn-sm {
63 padding: 6px 12px;
64 font-size: 0.8rem;
65}
66
67.btn-text {
68 background: none;
69 border: none;
70 color: var(--text-secondary);
71 font-size: 0.85rem;
72 padding: 6px 10px;
73 cursor: pointer;
74 transition: color 0.15s;
75 border-radius: var(--radius-sm);
76}
77
78.btn-text:hover {
79 color: var(--text-primary);
80 background: var(--bg-tertiary);
81}
82
83.btn-block {
84 width: 100%;
85 text-align: left;
86 padding: 10px 14px;
87 color: var(--text-secondary);
88 background: var(--bg-tertiary);
89 border-radius: var(--radius-md);
90 margin-top: 8px;
91 font-size: 0.85rem;
92 cursor: pointer;
93 transition: all 0.15s;
94 border: 1px solid transparent;
95}
96
97.btn-block:hover {
98 background: var(--bg-hover);
99 color: var(--text-primary);
100 border-color: var(--border);
101}
102
103.btn-icon-danger {
104 padding: 8px;
105 background: rgba(255, 69, 58, 0.1);
106 color: var(--error);
107 border: none;
108 border-radius: var(--radius-md);
109 cursor: pointer;
110 transition: all 0.15s ease;
111 display: flex;
112 align-items: center;
113 justify-content: center;
114}
115
116.btn-icon-danger:hover {
117 background: var(--error);
118 color: white;
119}
120
121.btn-danger {
122 background: rgba(255, 69, 58, 0.1);
123 color: var(--error);
124 border: 1px solid rgba(255, 69, 58, 0.2);
125}
126
127.btn-danger:hover {
128 background: var(--error);
129 color: white;
130 border-color: var(--error);
131}
132
133.action-buttons {
134 display: flex;
135 gap: var(--spacing-sm);
136 flex-wrap: wrap;
137}
138
139.action-buttons-end {
140 display: flex;
141 justify-content: flex-end;
142 gap: var(--spacing-sm);
143}