CodexAuth/src/ui/theme.css at main · GboyCode/CodexAuth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* Shared graphite palette and motion across the three desktop surfaces. */
:root {
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
  --ink: #18181b;
  --muted: #71717a;
  --paper: #f5f5f5;
  --paper-strong: #fff;
  --line: #dedee2;
  --line-soft: #e8e8eb;
  --surface: #fff;
  --surface-strong: #fff;
  --soft: #f4f4f5;
  --accent: #27272a;
  --accent-deep: #09090b;
  --accent-soft: #f0f0f2;
  --accent-gradient: linear-gradient(160deg, #454549 0%, #27272a 48%, #18181b 100%);
  --accent-hover: linear-gradient(160deg, #525258 0%, #333338 48%, #202024 100%);
  --meter-gradient: linear-gradient(90deg, #27272a, #71717a);
  --meter-estimated: repeating-linear-gradient(120deg, #71717a 0 5px, #94949c 5px 8px);
  --danger: #b42318;
  --danger-soft: #fff3f2;
  --shadow: 0 1px 2px #18181b04, 0 4px 12px #18181b03;
  --shadow-button: inset 0 1px 0 #ffffff24, 0 1px 2px #00000016, 0 3px 6px #0000000a;
  --focus-ring: 0 0 0 3px #18181b1f;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);
}

button, a, input, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
  transform: none !important;
  box-shadow: none !important;
}
::selection { color: var(--ink); background: #dedee2; }

@keyframes surface-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Keep motion event-driven; no idle shimmer or continuously running effects. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  button { border: 1px solid ButtonText !important; }
  .meter span, .account-quota-meter span, .all-account-meter span { background: Highlight !important; }
}