diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 9c0d869..bf4e8e1 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -1271,6 +1271,36 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } /* One app's settings pane, inside its section. */ .app-settings > .settings-row:first-child { margin-top: 0; } +/* The Save button of an app's settings pane. + * + * It was `btn btn-small btn-secondary`, and there is no `.btn` rule at all — + * so it inherited `.btn-secondary`: no background, a transparent border, dim + * grey text. Enabled, it already looked like a disabled control; disabled, it + * was the same thing at 40% opacity. "You cannot always click Save, you do not + * notice, and it does not work" was one sentence describing all of that. + * + * It looks like a button now, and a disabled one looks disabled. */ +.app-save { + display: inline-flex; align-items: center; gap: 6px; + height: 30px; padding: 0 14px; margin-top: 4px; + border: 1px solid var(--accent); border-radius: 6px; + background: var(--accent); color: var(--accent-text); + font-family: inherit; font-size: 0.83em; cursor: pointer; +} +.app-save:hover:not(:disabled) { background: var(--accent-hover); } +/* No transition on the enabled/disabled swap. It animates a colour change that + coincides with a text-colour change, which reads as a flicker — and it made + the state genuinely hard to observe: a measurement taken during it reports a + transparent background on a button that is not transparent. */ +.app-save:disabled { + background: none; color: var(--text-dim); + border-color: var(--border); opacity: 1; cursor: default; +} +/* Why it is inert, beside it — a disabled control that explains itself is the + difference between "nothing changed" and "this is broken". */ +.app-save-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; } +.app-save-why { font-size: 0.82em; color: var(--text-dim); } + .app-settings-sub { margin: 18px 0 4px; font-size: 0.9em; font-weight: 600; padding-top: 12px; border-top: 1px solid var(--border); |