Skip to content

g1t/apps/sudo/app/app.css

165 lines4,476 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Billing accounts, terms and enterprises; g1t is no longer free1@import "tailwindcss" source(".");
2@import "@g1t/theme/tokens.css";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look3@import "@g1t/theme/fonts.css";
Billing accounts, terms and enterprises; g1t is no longer free4
5/* Tailwind's names for the shared g1t tokens, as in apps/web. */
6@theme {
7 --font-sans: var(--g1t-font-sans);
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look8 --font-display: var(--g1t-font-display);
Billing accounts, terms and enterprises; g1t is no longer free9 --font-mono: var(--g1t-font-mono);
10
11 --color-bg: var(--g1t-bg);
12 --color-surface: var(--g1t-surface);
13 --color-raised: var(--g1t-raised);
14 --color-line: var(--g1t-line);
15 --color-line-strong: var(--g1t-line-strong);
16
17 --color-fg: var(--g1t-fg);
18 --color-fg-soft: var(--g1t-fg-soft);
19 --color-muted: var(--g1t-muted);
20 --color-faint: var(--g1t-faint);
21
22 --color-accent: var(--g1t-accent);
Merge branch 'worktree-agent-ad7c6d88d93adc817'23 --color-accent-hover: var(--g1t-accent-hover);
Billing accounts, terms and enterprises; g1t is no longer free24 --color-accent-dim: var(--g1t-accent-dim);
25
Merge branch 'worktree-agent-ad7c6d88d93adc817'26 --color-success: var(--g1t-success);
27 --color-success-dim: var(--g1t-success-dim);
28
Billing accounts, terms and enterprises; g1t is no longer free29 --color-info: var(--g1t-info);
30 --color-merged: var(--g1t-merged);
31 --color-warn: var(--g1t-warn);
32 --color-danger: var(--g1t-danger);
33}
34
35html {
36 color-scheme: dark;
37}
38
39body {
40 @apply bg-bg font-sans text-fg antialiased;
41}
42
43::selection {
Merge branch 'worktree-agent-ad7c6d88d93adc817'44 background: color-mix(in srgb, var(--color-accent) 35%, transparent);
Billing accounts, terms and enterprises; g1t is no longer free45}
46
47@layer base {
48 :focus-visible {
Merge branch 'worktree-agent-ad7c6d88d93adc817'49 outline: 2px solid var(--color-accent);
Billing accounts, terms and enterprises; g1t is no longer free50 outline-offset: 2px;
51 }
52
53 .grid > * {
54 min-width: 0;
55 }
56
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look57 /* Page titles in the headline face, as on g1t.sh. */
58 :where(h1) {
59 font-family: var(--font-display);
60 font-optical-sizing: auto;
61 }
62
Billing accounts, terms and enterprises; g1t is no longer free63 :root {
Merge branch 'worktree-agent-ad7c6d88d93adc817'64 accent-color: var(--color-accent);
Billing accounts, terms and enterprises; g1t is no longer free65 }
66
67 /* Figures line up in columns of money. */
68 .tabular {
69 font-variant-numeric: tabular-nums;
70 }
71}
Costs: the plan's included usage counts as paid for the usage it covered, out of what plans leave for running g1t; the run button shows it is running with CSS alone (sudo ships no JavaScript)72
73/*
74 * sudo ships no JavaScript, so a long-running button says it is running
75 * with CSS alone: a clicked button keeps focus while the old page waits for
76 * the response. `:focus-visible` is left out, so tabbing to it does not
77 * read as running.
78 */
79.run-button .run-busy,
80.run-button + .run-note {
81 display: none;
82}
83.run-button:focus:not(:focus-visible) .run-idle {
84 display: none;
85}
86.run-button:focus:not(:focus-visible) .run-busy {
87 display: inline-flex;
88 align-items: center;
89 gap: 0.5rem;
90}
91.run-button:focus:not(:focus-visible) + .run-note {
92 display: inline;
93}
94.run-spinner {
95 width: 0.8rem;
96 height: 0.8rem;
97 border-radius: 9999px;
98 border: 2px solid currentColor;
99 border-right-color: transparent;
100 animation: run-spin 0.8s linear infinite;
101}
102@keyframes run-spin {
103 to {
104 transform: rotate(360deg);
105 }
106}
107@media (prefers-reduced-motion: reduce) {
108 .run-spinner {
109 animation: none;
110 }
111}
sudo: a billing reset runs the costs analysis again so every figure is fresh; every submit button shows it is working (CSS only); no margin percentage on less than a cent sold112
113/*
114 * Every other submit button says it is working the same way: a clicked
115 * button keeps focus while the page waits for the answer, so it dims
116 * and shows a spinner. The page that comes back is
117 * fresh (every action redirects), and says what happened. Nothing may
118 * stop pointer events here: focus comes on mouse-down, before the click.
119 */
120form button[type="submit"]:not(.run-button):focus:not(:focus-visible) {
121 opacity: 0.75;
122}
123form button[type="submit"]:not(.run-button):focus:not(:focus-visible)::before {
124 content: "";
125 flex: none;
126 width: 0.8rem;
127 height: 0.8rem;
128 border-radius: 9999px;
129 border: 2px solid currentColor;
130 border-right-color: transparent;
131 animation: run-spin 0.8s linear infinite;
132}
133form button[type="submit"]:not(.run-button):focus:not(:focus-visible) > svg {
134 display: none;
135}
136@media (prefers-reduced-motion: reduce) {
137 form button[type="submit"]:focus:not(:focus-visible)::before {
138 animation: none;
139 }
140}
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging141
142/*
143 * The credit and terms forms (components/billing.tsx) show a field only for the
144 * choice it belongs to, with CSS alone: the custom amount and the slug for
145 * Custom, a refund's details for Refund, the expiry for anything else, and
146 * the date for "On a date". Where `:has()` is not supported (or without
147 * CSS) every field shows, and the server ignores the ones that do not apply.
148 */
149@supports selector(:has(*)) {
150 .credit-form .when-custom,
151 .credit-form .when-refund,
152 .credit-form .when-date,
153 .terms-form .when-custom {
154 display: none;
155 }
156 .credit-form:has(input[name="preset"][value="custom"]:checked) .when-custom,
157 .terms-form:has(input[name="preset"][value="custom"]:checked) .when-custom,
158 .credit-form:has(input[name="kind"][value="refund"]:checked) .when-refund,
159 .credit-form:has(input[name="expires"][value="date"]:checked) .when-date {
160 display: block;
161 }
162 .credit-form:has(input[name="kind"][value="refund"]:checked) .when-not-refund {
163 display: none;
164 }
165}

This file's history is long; its oldest lines are credited to the oldest commit read.