gru/zbiorki_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zmiany ux

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-10-09 21:44:53 +02:00
parent 6709681dfd
commit a4fa47e1a2
1 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
static/css/custom.css
View File

@@ -389,41 +389,36 @@ select.form-select:focus {
margin: 10px 0; margin: 10px 0;
} }
/* Tylko ten przycisk: .btn-opis */ /* Tylko ten przycisk: .btn-opis, spójne z dark tokenami */
.btn.btn-outline-light.btn-opis { .btn.btn-outline-light.btn-opis {
/* start: neutralnie, lekki kontrast na ciemnym tle */ color: var(--text);
color: var(--text); /* #e4e4e4 w Twoim motywie */ [attached_file:3] border-color: rgba(255,255,255,0.28);
border-color: rgba(255,255,255,.28);/* subtelna ramka */ [attached_file:3] background-color: rgba(255,255,255,0.02);
background: rgba(255,255,255,0.02); /* leciutka mgiełka */ [attached_file:3]
backdrop-filter: blur(0.5px); /* ledwo wyczuwalne szkło (opcjonalnie) */ [attached_file:3]
transition: transition:
background-color var(--trans), /* 220ms cubic-bezier(.2,.8,.2,1) */ background-color var(--trans),
border-color var(--trans), border-color var(--trans),
color var(--trans), color var(--trans),
box-shadow 180ms ease, box-shadow 180ms ease,
transform 120ms ease; /* zachowuje spójność z innymi btn */ [attached_file:3] transform 120ms ease;
} }
.btn.btn-outline-light.btn-opis:hover, .btn.btn-outline-light.btn-opis:hover,
.btn.btn-outline-light.btn-opis:focus { .btn.btn-outline-light.btn-opis:focus {
/* hover: jasność + ring z akcentem, ale nadal stonowanie */ color: #111;
color: #111; /* czytelny kontrast przy jaśniejszym tle */ [attached_file:3] background-color: rgba(255,255,255,0.10);
background: rgba(255,255,255,0.10); /* delikatne rozjaśnienie */ [attached_file:3]
border-color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.45);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); /* miękki ring */ [attached_file:3] box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
transform: translateY(-1px); /* minimalny „lift” */ [attached_file:3] transform: translateY(-1px);
} }
.btn.btn-outline-light.btn-opis:active { .btn.btn-outline-light.btn-opis:active {
/* klik: krótkie przygaszenie, bez agresywnych skoków */
transform: translateY(0); transform: translateY(0);
background: rgba(255,255,255,0.14); [attached_file:3] background-color: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.55);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); [attached_file:3] box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
} }
.btn.btn-outline-light.btn-opis:focus-visible { .btn.btn-outline-light.btn-opis:focus-visible {
outline: none; outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); /* dostępność, wciąż delikatnie */ [attached_file:3] box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
} }