anton.galiglobal.com
Firefox WebExtension (Desktop and Mobile) that lets you share the current tab to Margit.at, frontpage.fyi, etc. with minimal effort.
1* {
2 box-sizing: border-box;
3}
4
5body {
6 margin: 0;
7 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
8 color: #0f172a;
9 background: #f8fafc;
10}
11
12main.popup {
13 width: 320px;
14 padding: 16px;
15 display: flex;
16 flex-direction: column;
17 gap: 12px;
18}
19
20main.popup header {
21 display: flex;
22 align-items: center;
23 justify-content: space-between;
24}
25
26main.popup h1 {
27 font-size: 1.1rem;
28 margin: 0;
29}
30
31main.popup button,
32main.popup input {
33 font: inherit;
34}
35
36#open-options {
37 border: none;
38 background: transparent;
39 cursor: pointer;
40 font-size: 1.1rem;
41 line-height: 1;
42}
43
44form {
45 display: flex;
46 flex-direction: column;
47 gap: 8px;
48}
49
50label {
51 font-size: 0.85rem;
52 font-weight: 600;
53 display: flex;
54 justify-content: space-between;
55 align-items: baseline;
56}
57
58input {
59 padding: 6px 8px;
60 border: 1px solid #cbd5f5;
61 border-radius: 6px;
62 background: white;
63}
64
65button[type="submit"],
66button.secondary {
67 padding: 8px 10px;
68 border-radius: 6px;
69 border: none;
70 cursor: pointer;
71 background: #2563eb;
72 color: white;
73 font-weight: 600;
74}
75
76button[disabled] {
77 opacity: 0.6;
78 cursor: progress;
79}
80
81button.secondary {
82 background: #e2e8f0;
83 color: #0f172a;
84 border: 1px solid #cbd5f5;
85}
86
87.status {
88 min-height: 1.2em;
89 font-size: 0.85rem;
90}
91
92.status.error {
93 color: #dc2626;
94}
95
96.status.success {
97 color: #0f766e;
98}
99
100.counter {
101 font-weight: normal;
102 color: #64748b;
103}
104
105.over-limit {
106 color: #b91c1c;
107}
108
109footer {
110 font-size: 0.85rem;
111}
112
113.tabs {
114 display: flex;
115 gap: 4px;
116 border-bottom: 2px solid #e2e8f0;
117}
118
119.tab {
120 padding: 6px 14px;
121 border: none;
122 border-bottom: 2px solid transparent;
123 background: transparent;
124 cursor: pointer;
125 font: inherit;
126 font-size: 0.9rem;
127 color: #64748b;
128 margin-bottom: -2px;
129}
130
131.tab.active {
132 color: #2563eb;
133 border-bottom-color: #2563eb;
134 font-weight: 600;
135}
136
137textarea {
138 padding: 6px 8px;
139 border: 1px solid #cbd5f5;
140 border-radius: 6px;
141 background: white;
142 font: inherit;
143 resize: vertical;
144}
145
146textarea[readonly] {
147 background: #f1f5f9;
148 color: #475569;
149}
150
151main.options {
152 max-width: 640px;
153 margin: 0 auto;
154 padding: 24px 16px 48px;
155 display: flex;
156 flex-direction: column;
157 gap: 24px;
158}
159
160main.options h1 {
161 margin-bottom: 8px;
162}
163
164main.options section {
165 background: white;
166 border-radius: 12px;
167 padding: 16px 20px;
168 box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
169 display: flex;
170 flex-direction: column;
171 gap: 16px;
172}
173
174main.options form {
175 max-width: 400px;
176}
177
178main.options .tips {
179 margin: 0;
180 padding-left: 20px;
181 color: #475569;
182 font-size: 0.95rem;
183}
184
185.help {
186 margin: 0;
187 color: #475569;
188 font-size: 0.9rem;
189}
190
191a {
192 color: #2563eb;
193}