polats Claude Opus 4.8 (1M context) commited on
Commit
dbd7553
·
1 Parent(s): 750ca83

Settings presets: real padding (beat Gradio reset) + readable active hover

Browse files

Gradio's button reset was zeroing the preset buttons' padding, so the text sat
against the edges — restore it with !important (14px 16px), like the other
persona buttons. Also: a selected button turns light on hover, so force its text
to ink (dark) on hover instead of staying light-on-light.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files changed (1) hide show
  1. web/shell/persona.css +8 -5
web/shell/persona.css CHANGED
@@ -261,12 +261,15 @@
261
  .tac-quality { display: flex; flex-direction: column; gap: 12px; }
262
  .tac-preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
263
  .tac-preset-btn {
264
- flex: 1 1 120px; display: flex; flex-direction: column; gap: 3px; text-align: left;
265
- background: var(--p-card); border: 1.5px solid var(--p-ink); border-radius: 0;
266
- padding: 9px 11px; cursor: pointer; color: var(--p-ink); transition: background .12s;
 
267
  }
268
- .tac-preset-btn:hover:not(:disabled) { background: var(--p-paper-2); }
269
- .tac-preset-btn.active { background: var(--p-ink); color: var(--p-paper); box-shadow: 2px 2px 0 var(--p-transmit); }
 
 
270
  .tac-preset-btn:disabled { cursor: default; }
271
  .tac-preset-name { font-family: var(--p-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
272
  .tac-preset-sub { font-family: var(--p-mono); font-size: 10px; opacity: .7; }
 
261
  .tac-quality { display: flex; flex-direction: column; gap: 12px; }
262
  .tac-preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
263
  .tac-preset-btn {
264
+ flex: 1 1 120px; display: flex; flex-direction: column; gap: 4px; text-align: left;
265
+ background: var(--p-card) !important; border: 1.5px solid var(--p-ink) !important; border-radius: 0 !important;
266
+ padding: 14px 16px !important; cursor: pointer; color: var(--p-ink) !important; transition: background .12s, color .12s;
267
+ height: auto !important; min-height: 0 !important;
268
  }
269
+ .tac-preset-btn:hover:not(:disabled) { background: var(--p-paper-2) !important; }
270
+ .tac-preset-btn.active { background: var(--p-ink) !important; color: var(--p-paper) !important; box-shadow: 2px 2px 0 var(--p-transmit); }
271
+ /* A selected button turns light on hover — keep its text dark so it stays readable. */
272
+ .tac-preset-btn.active:hover:not(:disabled) { color: var(--p-ink) !important; }
273
  .tac-preset-btn:disabled { cursor: default; }
274
  .tac-preset-name { font-family: var(--p-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
275
  .tac-preset-sub { font-family: var(--p-mono); font-size: 10px; opacity: .7; }