sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): restore longest qso card styling

Browse Source 
Override the global button chrome on longest-QSO cards so they keep
the intended card layout instead of inheriting fixed control sizing.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-14 17:57:57 +01:00
parent abae110ecd
commit e9cb2852be
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+15 -4
View File
@@ -1327,7 +1327,7 @@ small { color: var(--text-muted); }
color: var(--text-muted); color: var(--text-muted);
font-size: 0.82rem; font-size: 0.82rem;
} }
.map-qso-card { button.map-qso-card {
display: flex; display: flex;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -1339,6 +1339,8 @@ small { color: var(--text-muted); }
margin: 0; margin: 0;
padding: 0.8rem 0.85rem; padding: 0.8rem 0.85rem;
box-sizing: border-box; box-sizing: border-box;
min-height: 0;
height: auto;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid color-mix(in srgb, var(--border-light) 74%, transparent); border: 1px solid color-mix(in srgb, var(--border-light) 74%, transparent);
background: color-mix(in srgb, var(--card-bg) 78%, transparent); background: color-mix(in srgb, var(--card-bg) 78%, transparent);
@@ -1347,19 +1349,28 @@ small { color: var(--text-muted); }
line-height: inherit; line-height: inherit;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
box-shadow: none;
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
} }
.map-qso-card:hover { button.map-qso-card:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--accent-green) 38%, var(--border-light)); border-color: color-mix(in srgb, var(--accent-green) 38%, var(--border-light));
background: color-mix(in srgb, var(--card-bg) 70%, transparent); background: color-mix(in srgb, var(--card-bg) 70%, transparent);
box-shadow: none;
} }
.map-qso-card.is-selected { button.map-qso-card.is-selected {
border-color: color-mix(in srgb, var(--accent-green) 62%, var(--border-light)); border-color: color-mix(in srgb, var(--accent-green) 62%, var(--border-light));
background: color-mix(in srgb, var(--accent-green) 10%, var(--card-bg)); background: color-mix(in srgb, var(--accent-green) 10%, var(--card-bg));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-green) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-green) 18%, transparent);
} }
.map-qso-card:active { button.map-qso-card:active:not(:disabled) {
transform: translateY(1px); transform: translateY(1px);
background: color-mix(in srgb, var(--card-bg) 66%, transparent);
border-color: color-mix(in srgb, var(--accent-green) 46%, var(--border-light));
box-shadow: none;
}
button.map-qso-card:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-green) 52%, transparent);
outline-offset: 2px;
} }
.map-qso-card-head { .map-qso-card-head {
display: flex; display: flex;