A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1/**
2 * Reader social-action bar (`PostActions`). The component is a `client:only` React
3 * island mounted on the article page, so Astro's component-scoped styles never reach
4 * its DOM — these rules must be global (imported from `[rkey].astro`).
5 */
6.post-actions {
7 max-width: 40rem;
8 margin: 2.5rem auto 0;
9 padding: 1.5rem 1.5rem 0;
10 border-top: 1px solid var(--line);
11}
12.post-actions--loading {
13 color: var(--muted);
14 font-size: 0.95rem;
15}
16.post-actions__bar {
17 display: flex;
18 flex-wrap: wrap;
19 gap: 0.5rem;
20}
21.post-actions__btn {
22 display: inline-flex;
23 align-items: center;
24 gap: 0.35rem;
25 padding: 0.5rem 0.85rem;
26 border: 1px solid var(--line-strong, var(--line));
27 border-radius: 999px;
28 background: transparent;
29 color: var(--ink);
30 font: inherit;
31 font-size: 0.95rem;
32 cursor: pointer;
33}
34.post-actions__btn:hover {
35 border-color: var(--sun);
36}
37.post-actions__btn:disabled {
38 opacity: 0.55;
39 cursor: default;
40}
41.post-actions__btn.is-active {
42 border-color: var(--sun);
43 color: var(--sun);
44}
45.post-actions__composer {
46 margin-top: 1rem;
47}
48.post-actions__composer-label {
49 display: block;
50 font-size: 0.85rem;
51 font-weight: 600;
52 margin-bottom: 0.4rem;
53}
54.post-actions__textarea {
55 width: 100%;
56 box-sizing: border-box;
57 padding: 0.7rem 0.8rem;
58 border: 1px solid var(--line-strong, var(--line));
59 border-radius: 10px;
60 font: inherit;
61 resize: vertical;
62}
63.post-actions__composer-foot {
64 display: flex;
65 align-items: center;
66 justify-content: space-between;
67 margin-top: 0.6rem;
68 gap: 0.75rem;
69}
70.post-actions__count {
71 font-size: 0.85rem;
72 color: var(--muted);
73 font-variant-numeric: tabular-nums;
74}
75.post-actions__count.is-over {
76 color: var(--ember, #c0392b);
77 font-weight: 600;
78}
79.post-actions__composer-btns {
80 display: flex;
81 gap: 0.5rem;
82}
83.post-actions__submit {
84 padding: 0.5rem 1rem;
85 border: none;
86 border-radius: 999px;
87 background: var(--sun);
88 color: var(--paper, #fff);
89 font: inherit;
90 font-weight: 600;
91 cursor: pointer;
92}
93.post-actions__submit:disabled {
94 opacity: 0.5;
95 cursor: default;
96}
97.post-actions__signin {
98 display: flex;
99 flex-wrap: wrap;
100 gap: 0.5rem;
101 margin: 0.5rem 0;
102}
103.post-actions__signin-input {
104 flex: 1 1 14rem;
105 box-sizing: border-box;
106 padding: 0.55rem 0.7rem;
107 border: 1px solid var(--line-strong, var(--line));
108 border-radius: 8px;
109 font: inherit;
110}
111.post-actions__signin-btn {
112 padding: 0.55rem 1.1rem;
113 border: none;
114 border-radius: 999px;
115 background: var(--sun);
116 color: var(--paper, #fff);
117 font: inherit;
118 font-weight: 600;
119 cursor: pointer;
120}
121.post-actions__note {
122 margin: 0.9rem 0 0;
123 font-size: 0.82rem;
124 color: var(--muted);
125}
126.post-actions__error,
127.post-actions__flash--error {
128 color: var(--ember, #c0392b);
129 font-size: 0.9rem;
130}
131.post-actions__flash {
132 margin: 0.9rem 0 0;
133 font-size: 0.9rem;
134}
135.post-actions__flash--success {
136 color: var(--ink-soft, var(--ink));
137}
138.post-actions__thread {
139 display: inline-block;
140 margin-top: 0.75rem;
141 color: var(--sun);
142 font-size: 0.9rem;
143}