Spaces:
Running
Running
Settings presets: real padding (beat Gradio reset) + readable active hover
Browse filesGradio'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>
- 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:
|
| 265 |
-
background: var(--p-card); border: 1.5px solid var(--p-ink); border-radius: 0;
|
| 266 |
-
padding:
|
|
|
|
| 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; }
|