theme / theme.css
 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* ardegazu-theme — the shared look of the ardegazu.ro suite.
 *
 * one plain css file: the color tokens (dark-first, cream for people who
 * ask for light), the base reset + typography, and the small components
 * every app shares — the quiet two-tap buttons and the toast.
 *
 * apps bundle it as a sha-pinned git dependency and
 * `import "ardegazu-theme/theme.css"`; anything else can hot-link the
 * mirror at https://cdn.ardegazu.ro/theme/v1/theme.css.
 *
 * the version-dir contract: the /v1/ in the cdn path is this package's
 * major version. token values may be tuned in place (same names, same
 * feel); a breaking change — renamed or removed tokens, different
 * semantics — bumps the major and lands at /v2/, so hot-linked pages
 * never shift under anyone's feet.
 *
 * layout is per-app: this file sets colors and type on body, never
 * padding, margins or overflow.
 */

/* dark-first: night is the default, cream only for people who ask for light */
:root {
  color-scheme: dark;
  --paper: #171520;
  --ink: #eae6f2;
  --ink-soft: #a49fb5;
  --line: #2b2838;
  --card: #1e1c2a;
  --code-bg: #272334;
  --horizon-op: .38;
  --shadow: 0 10px 26px -14px rgba(0,0,0,.7);

  --rose:   #e8a09a; --rose-d:   #d98b85; --rose-l:   #f4c8c4;
  --peach:  #f0b877; --peach-d:  #dda45f; --peach-l:  #f9dcb4;
  --sage:   #93c1a5; --sage-d:   #7fae93; --sage-l:   #c4dfcf;
  --lilac:  #b3a4d4; --lilac-d:  #9c8cc2; --lilac-l:  #d7cdea;
  --sky:    #8fb8d8; --sky-d:    #7ba3c6; --sky-l:    #c2d9ec;
  --gold:   #e6c26e; --gold-d:   #cfa94f; --gold-l:   #f5e3b4;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --paper: #faf6ee;
    --ink: #35322c;
    --ink-soft: #6f6a5e;
    --line: #e5ddcd;
    --card: #fffdf8;
    --code-bg: #f1ead9;
    --horizon-op: .5;
    --shadow: 0 10px 26px -18px rgba(60,50,30,.45);

    --rose-d: #c97f7a; --peach-d: #cf9552; --sage-d: #6fa284;
    --lilac-d: #9181b8; --sky-d: #6f97ba; --gold-d: #bf9a3f;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* base body: colors + type only — layout padding/overflow is per-app */
body {
  background: var(--paper); color: var(--ink);
  font: 16.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* buttons — quiet, bordered; destructive actions take two taps: the first
   arms the button (rose warning state), the second fires */
.btn {
  font: 600 13.5px/1 inherit; color: var(--ink);
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 14px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.btn:hover { border-color: var(--sage); transform: translateY(-1px); }
.btn.armed { border-color: var(--rose); color: var(--rose); }

/* toast — a short-lived confirmation, bottom-center */
.soc-flash {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px; font-size: 14px; z-index: 999;
  box-shadow: var(--shadow); animation: soc-toast-in .25s ease;
}
@keyframes soc-toast-in { from { transform: translate(-50%, 10px); opacity: 0; } }

static mirror of HEAD · about · clone: git clone https://git.ardegazu.ro/theme.git