Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/updater.css

3.2 KiB, 1 run

created by r2519314175:1139, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1/* updater.css — the version chip in the header.
2 *
3 * Quiet by default: a muted dot that says "up to date" and asks nothing. It lights up only when
4 * there is something to say -- an update ready (accent, gently pulsing), one waiting on a running
5 * turn (amber), or one just applied (a brief green tick that fades). The states are driven by
6 * data-state on the button, set from updater.js. */
7
8.update-chip {
9 display: flex;
10 align-items: center;
11 justify-content: center;
12 background: none;
13 border: none;
14 color: var(--text-secondary);
15 padding: 5px 7px;
16 border-radius: var(--radius-sm);
17 cursor: default;
18 transition: color 0.2s ease, opacity 0.2s ease;
19}
20.update-chip .ic {
21 width: 18px;
22 height: 18px;
23 fill: none;
24 stroke: currentColor;
25 stroke-width: 2;
26 stroke-linecap: round;
27 stroke-linejoin: round;
28}
29
30/* SILENT, AND STILL 32px WIDE. `hidden` did nothing at all here: an author rule
31 setting `display: flex` beats the browser's own `[hidden] { display: none }`,
32 so the one state that asks for silence -- no version stamp deployed, updater.js
33 `init` -- drew a faint refresh mark anyway. Answered with `visibility` rather
34 than `display` because this chip stands in a row of targets: taking its box
35 away would move About, the guide and the appearance menu 32px while the user
36 is reaching for one of them, which is the fault the row was just laid out to
37 prevent (see .panel-tags in workspace.css). */
38.update-chip[hidden] { visibility: hidden; }
39
40/* Two glyphs, one shown at a time: a refresh mark for every state but "done", a tick for it. */
41.update-chip .ic-check { display: none; }
42.update-chip[data-state="done"] .ic-refresh { display: none; }
43.update-chip[data-state="done"] .ic-check { display: block; }
44
45/* Up to date: present but faint -- a reassurance, not a prompt. */
46.update-chip[data-state="current"] {
47 opacity: 0.4;
48 cursor: default;
49}
50.update-chip[data-state="current"]:hover { opacity: 0.7; background: var(--bg-hover); }
51
52/* Ready: the one state that invites a click. */
53.update-chip[data-state="ready"] {
54 color: var(--accent);
55 opacity: 1;
56 cursor: pointer;
57 animation: update-pulse 2.2s ease-in-out infinite;
58}
59.update-chip[data-state="ready"]:hover { background: var(--bg-hover); color: var(--accent-hover); }
60
61/* Waiting on a running turn: amber, clickable to force, but not urgent. */
62.update-chip[data-state="busy"] {
63 color: var(--warn);
64 opacity: 1;
65 cursor: pointer;
66}
67.update-chip[data-state="busy"]:hover { background: var(--bg-hover); }
68
69/* Out of date and refused by the gateway: red, insistent, clickable to reload now. */
70.update-chip[data-state="stale"] {
71 color: var(--danger);
72 opacity: 1;
73 cursor: pointer;
74 animation: update-pulse 1.4s ease-in-out infinite;
75}
76.update-chip[data-state="stale"]:hover { background: var(--bg-hover); }
77
78/* Just applied: a brief green tick, then it settles back to "current" from updater.js. */
79.update-chip[data-state="done"] {
80 color: var(--ok);
81 opacity: 1;
82 cursor: default;
83}
84
85@keyframes update-pulse {
86 0%, 100% { opacity: 0.55; }
87 50% { opacity: 1; }
88}
89
90/* Respect a reduced-motion preference: keep the colour, drop the pulse. */
91@media (prefers-reduced-motion: reduce) {
92 .update-chip[data-state="ready"],
93 .update-chip[data-state="stale"] { animation: none; opacity: 1; }
94}