Skip to main content

max / makenotwork

7.7 KB · 238 lines History Blame Raw
1 /* ===========================================
2 LONG-TAIL CLEANUP, shared utilities promoted from the final inline-style sweep.
3 Each rule replaces ≥2 inline-style instances across templates.
4 =========================================== */
5
6 /* Tab-spinner loading indicator (used by 3+ dashboards). */
7
8 /* Inline-block secondary action link styled as a button. */
9 .btn-link {
10 display: inline-block;
11 padding: var(--gap-peer) var(--gap-section);
12 text-decoration: none;
13 }
14 .btn-link--sm { padding: var(--gap-peer) var(--gap-section); }
15
16 /* Username-availability spinner (wizards + standalone account form). */
17 .username-spinner { font-size: var(--text-note); }
18
19 /* Centered foot-link beneath wizard cards. */
20 .foot-link--centered { margin-top: var(--gap-section); text-align: center; }
21
22 /* Health-page status dots. */
23 .health-indicator-dot { width: 8px; height: 8px; margin-right: var(--gap-peer); }
24 .health-error-text { color: var(--danger); }
25
26 /* Inline error fragments (login_error, error_fragment) toggle this on. */
27 .error-message.is-active { display: block; }
28
29 /* Cart count badge in nav. */
30 .cart-badge-count { font-size: var(--text-fine); }
31
32 /* Empty-row inside a data table. */
33 .table-empty-row { text-align: center; opacity: 0.6; }
34
35 /* Discover grid: card wrapper + body anchor. */
36 .discover-grid-card { position: relative; }
37 .discover-card-link {
38 text-decoration: none;
39 color: inherit;
40 display: flex;
41 flex-direction: column;
42 flex: 1;
43 }
44 .discover-filter-checkbox {
45 display: flex;
46 align-items: center;
47 gap: var(--gap-peer);
48 cursor: pointer;
49 font-size: var(--text-note);
50 }
51
52 /* Tag suggestion list. */
53 .tag-suggest-label {
54 font-size: var(--text-fine);
55 opacity: 0.7;
56 margin-bottom: var(--gap-peer);
57 overflow-wrap: anywhere;
58 }
59 .tag-suggest-pill {
60 background: var(--surface-sunken);
61 border: 1px solid var(--border);
62 padding: var(--gap-bound) var(--gap-peer);
63 font-size: var(--text-fine);
64 cursor: pointer;
65 margin: var(--gap-bound);
66 }
67
68 /* Dashboard-export header layout + Export-all CTA. */
69 .dashboard-export-header {
70 display: flex;
71 justify-content: space-between;
72 align-items: flex-start;
73 }
74 .export-all-btn {
75 white-space: nowrap;
76 margin-top: var(--gap-peer);
77 }
78
79 /* Tiny inline action button (admin-metrics, dashboard-item share). */
80 .dashboard-item-share-btn {
81 font-size: var(--text-fine);
82 padding: var(--gap-bound) var(--gap-peer);
83 opacity: 0.6;
84 }
85
86 /* Monospaced page sub-headers. */
87 .section-mono-meta {
88 font-family: var(--font-mono);
89 font-size: var(--text-note);
90 opacity: 0.6;
91 margin-bottom: var(--gap-pane);
92 }
93 /* Email-result single-card page. */
94 .email-result-wrap {
95 max-width: 600px;
96 margin: 50px auto;
97 padding: 20px;
98 }
99
100 /* Admin lottery form (admin-waitlist). */
101 .lottery-form {
102 display: flex;
103 gap: var(--gap-section);
104 align-items: flex-end;
105 }
106
107 /* Login screen: "or" divider + passkey button + error slot. */
108 .login-divider {
109 text-align: center;
110 margin: var(--gap-pane) 0 var(--gap-section);
111 opacity: 0.5;
112 font-size: var(--text-note);
113 }
114 /* The passkey offer is out only where the browser can do WebAuthn.
115 `page-login-2.js` asks and states the answer; the region's own markup is the
116 renderer's, so there is no class for a script to take off. */
117 #passkey-login { display: none; }
118 #passkey-login[data-supported] { display: block; }
119
120 .login-passkey-btn { width: 100%; }
121 .login-passkey-error { margin-top: var(--gap-peer); }
122
123 /* Upload-progress sibling text (item_audio_upload). */
124 .upload-speed-text {
125 font-size: var(--text-fine);
126 opacity: 0.6;
127 margin-top: var(--gap-bound);
128 }
129
130 /* Faded "Following" follow-button state. */
131 .follow-btn.is-selected { opacity: 0.7; }
132
133 /* Compact alert / paragraph margin variants used 2+ times. */
134
135 /* Paywall trust line. */
136 .paywall-trust {
137 font-size: var(--text-note);
138 opacity: 0.7;
139 margin-top: var(--gap-section);
140 line-height: 1.4;
141 }
142
143 /* Confirm-delete: button background already covered by .danger class.
144 The wizard step uses `.primary` and inlines the danger background; we just
145 change the class instead. No CSS rule needed here. */
146
147 /* Paywall-style centered narrow form-group used inside project_paywall. */
148 .form-group--centered-narrow {
149 max-width: 240px;
150 margin: var(--gap-section) auto;
151 }
152
153 /* Inline-form margin-left for adjacent pills (collection.html private badge). */
154 .badge--inline-l { margin-left: var(--gap-peer); }
155
156 /* ===== Team page ===== */
157
158 /* The whole block below this line went with `templates/pages/team.html` when
159 `/team` moved to the description layer. What is left is the measure, which a
160 described document carries on <main> rather than on a container div: the
161 screen has no `.container`, exactly as `.feed-page main` found. The intro
162 paragraph, the section spacing, the card's parts and the bio disclosure are
163 all drawn by the design system now, off `Node::text`, `Node::section`,
164 `Node::list` and a selective region. */
165 .team-page main { max-width: 56rem; margin: 0 auto; }
166
167 /* ── SyncKit billing panel ──
168 Per-app accordion shown inside the SyncKit dashboard tab (both user and
169 project levels). The .synckit-billing root carries pricing constants as
170 data-attrs that static/synckit-billing.js reads to mirror monthly_price_cents.
171 */
172 .synckit-billing {
173 background: var(--surface-raised);
174 border: 1px solid var(--border);
175 border-radius: var(--radius-control);
176 padding: var(--gap-peer) var(--gap-section);
177 min-width: 220px;
178 }
179 .synckit-billing-summary {
180 cursor: pointer;
181 display: flex;
182 align-items: center;
183 gap: var(--gap-section);
184 font-size: var(--text-note);
185 }
186 .synckit-billing-toggle { margin-left: auto; color: var(--content-muted); }
187 .synckit-billing-status {
188 display: inline-block;
189 padding: 2px var(--gap-peer);
190 border-radius: var(--radius-fine);
191 font-size: var(--text-fine);
192 font-weight: 600;
193 }
194 .synckit-billing-status--draft { background: var(--surface-sunken); }
195 .synckit-billing-status--active { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); color: var(--success); }
196 .synckit-billing-status--past-due { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
197 .synckit-billing-status--canceled { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); color: var(--danger); }
198 .synckit-billing-price { font-weight: 600; }
199 .synckit-billing-body {
200 padding-top: var(--gap-section);
201 display: flex;
202 flex-direction: column;
203 gap: var(--gap-section);
204 }
205 .synckit-billing-section { display: flex; flex-direction: column; gap: var(--gap-peer); }
206 .synckit-billing-subheading { font-size: var(--text-note); margin: 0; font-weight: 600; }
207 .synckit-knob-row {
208 display: flex;
209 align-items: center;
210 gap: var(--gap-peer);
211 flex-wrap: wrap;
212 }
213 .synckit-knob-row label { min-width: 110px; }
214 .synckit-knob-row input[type="range"] { flex: 1 1 160px; min-width: 120px; }
215 .synckit-radio { display: inline-flex; align-items: center; gap: var(--gap-bound); min-width: 0; }
216 .synckit-billing-summary-line {
217 display: flex;
218 align-items: baseline;
219 gap: var(--gap-peer);
220 padding-top: var(--gap-peer);
221 border-top: 1px solid var(--border);
222 }
223 .synckit-price-preview { font-size: var(--text-lead); font-weight: 600; }
224 .synckit-billing-actions { display: flex; gap: var(--gap-peer); }
225 .synckit-billing-manage { flex-direction: row; gap: var(--gap-peer); }
226 .synckit-billing-status-msg { font-size: var(--text-note); min-height: 1.25em; }
227 .synckit-billing-status-msg--info { color: var(--content-muted); }
228 .synckit-billing-status-msg--error { color: var(--danger); }
229 .synckit-billing-period { margin: 0; }
230 .synckit-gauge { display: flex; flex-direction: column; gap: 2px; }
231 .synckit-gauge-label {
232 display: flex;
233 justify-content: space-between;
234 font-size: var(--text-fine);
235 }
236 .synckit-gauge-value { color: var(--content-muted); }
237
238