fix+feat: input focus ring + queue item polish + toast + button class collision
Polish round 3, plus a class-collision fix. Fix first: the new X-close button class introduced in 4.6.21 was called .btn-icon, which collided with an EXISTING .btn-icon class already used by the top-bar Refresh button (and elsewhere). The second declaration partially overrode the first, leaving Refresh with the wrong hover state (red instead of purple-tinted). Renamed the close-button class to .btn-close and updated the two call sites (btnStreamerBulkRemove + vodFilterClearBtn). Refresh now hovers correctly with a purple tint + a 180deg SVG icon spin on hover. Polish bundle: - Input focus ring globally: every text/search/number/password input + textarea + select picks up a 3px rgba purple ring on focus, with a smooth 180ms transition on border-color, box-shadow, and background. Focus state finally reads as intentional instead of the OS default blue glow. - Queue items: 3px left border that color-codes by status (purple while downloading, green when complete, red on error), faint purple-tinted background when downloading, soft glow on the status dot. The queue list now reads as a status timeline at a glance. - Top-bar Refresh button picks up a 1px border, purple-tint hover background, and the SVG arrow spins on hover for the "refresh" feel. - Header search box (Add streamer): consistent border-radius (6px vs 4px) and the + button gets a hover shadow + active-press micro-bounce. - App toast: gradient background, accent-color left border (purple for info, amber for warn, red for error), animated slide-in from the right instead of vertical, backdrop blur for content legibility over busy backgrounds, and an extra .error variant class. Feels modern instead of like a notice strip from 2010. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE
parent
f6905fae82
commit
17b715ab24
@ -241,7 +241,7 @@
|
||||
|
||||
<div class="section-title" id="streamerSectionTitle" style="display:flex; align-items:center; gap:6px; justify-content:space-between;">
|
||||
<span id="streamerSectionTitleText">Streamer</span>
|
||||
<button id="btnStreamerBulkRemove" class="btn-icon" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
|
||||
<button id="btnStreamerBulkRemove" class="btn-close" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
|
||||
</div>
|
||||
<input type="text" id="streamerListFilter" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none; width:calc(100% - 16px); margin:0 8px 8px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:4px; padding:4px 8px; color:var(--text); font-size:12px;">
|
||||
<div class="streamers" id="streamerList"></div>
|
||||
@ -283,7 +283,7 @@
|
||||
<div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
|
||||
<div class="vod-filter-row" style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
|
||||
<input type="text" id="vodFilterInput" placeholder="Filter VODs..." oninput="onVodFilterInput()" style="flex:1; min-width:180px; background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:8px 12px; color: var(--text); font-size:13px;">
|
||||
<button id="vodFilterClearBtn" class="btn-icon" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
|
||||
<button id="vodFilterClearBtn" class="btn-close" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
|
||||
<label id="vodSortLabel" for="vodSortSelect" style="color: var(--text-secondary); font-size:12px; margin-left:8px;">Sort:</label>
|
||||
<select id="vodSortSelect" onchange="onVodSortChange()" style="background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:7px 10px; color: var(--text); font-size:13px;">
|
||||
<option value="date_desc">Newest first</option>
|
||||
|
||||
164
src/styles.css
164
src/styles.css
@ -249,11 +249,19 @@ body {
|
||||
.add-streamer input {
|
||||
flex: 1;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
|
||||
}
|
||||
|
||||
.add-streamer input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
background: rgba(145, 70, 255, 0.08);
|
||||
box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18);
|
||||
}
|
||||
|
||||
.add-streamer input::placeholder {
|
||||
@ -263,11 +271,47 @@ body {
|
||||
.add-streamer button {
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
width: 36px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
|
||||
}
|
||||
|
||||
.add-streamer button:hover {
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 4px 14px rgba(145, 70, 255, 0.35);
|
||||
}
|
||||
|
||||
.add-streamer button:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
GLOBAL TEXT-INPUT POLISH — focus ring + smooth transitions
|
||||
============================================ */
|
||||
input[type="text"],
|
||||
input[type="search"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
textarea,
|
||||
select {
|
||||
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18);
|
||||
}
|
||||
|
||||
/* Queue Section */
|
||||
@ -338,11 +382,27 @@ body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
padding: 10px 8px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
border-left: 3px solid transparent;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.queue-item:has(.status.downloading) {
|
||||
border-left-color: var(--accent);
|
||||
background: rgba(145, 70, 255, 0.06);
|
||||
}
|
||||
|
||||
.queue-item:has(.status.error) {
|
||||
border-left-color: var(--error);
|
||||
}
|
||||
|
||||
.queue-item:has(.status.completed) {
|
||||
border-left-color: var(--success);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.queue-item .status {
|
||||
@ -350,12 +410,14 @@ body {
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.queue-item .status.pending { background: var(--warning); }
|
||||
.queue-item .status.downloading { background: var(--accent); animation: pulse 1s infinite; }
|
||||
.queue-item .status.completed { background: var(--success); }
|
||||
.queue-item .status.error { background: var(--error); }
|
||||
.queue-item .status.pending { background: var(--warning); box-shadow: 0 0 6px rgba(255, 167, 38, 0.5); }
|
||||
.queue-item .status.downloading { background: var(--accent); animation: pulse 1s infinite; box-shadow: 0 0 8px rgba(145, 70, 255, 0.6); }
|
||||
.queue-item .status.completed { background: var(--success); box-shadow: 0 0 6px rgba(0, 200, 83, 0.5); }
|
||||
.queue-item .status.error { background: var(--error); box-shadow: 0 0 6px rgba(255, 70, 70, 0.5); }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
@ -596,38 +658,44 @@ body {
|
||||
|
||||
.header-search input {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.header-search input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
.header-search input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.header-search button {
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.header-search button:hover {
|
||||
opacity: 0.9;
|
||||
background: var(--accent-hover);
|
||||
box-shadow: 0 4px 14px rgba(145, 70, 255, 0.35);
|
||||
}
|
||||
|
||||
.header-search button:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: var(--bg-card);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
@ -635,10 +703,27 @@ body {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: #2a2a2e;
|
||||
background: rgba(145, 70, 255, 0.12);
|
||||
border-color: rgba(145, 70, 255, 0.45);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-icon:hover svg {
|
||||
animation: btn-icon-spin 0.6s ease-out;
|
||||
}
|
||||
|
||||
.btn-icon:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
@keyframes btn-icon-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(180deg); }
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -1156,9 +1241,10 @@ body {
|
||||
color: #ff8a8a;
|
||||
}
|
||||
|
||||
/* .btn-icon — square X-close button for filter clears, inline removals.
|
||||
1.6em wide, transparent base, hover only colours the X. */
|
||||
.btn-icon {
|
||||
/* .btn-close — square X-close button for filter clears, inline removals.
|
||||
Renamed from .btn-icon to avoid clashing with the existing top-bar
|
||||
icon+text button class that's used for Refresh. */
|
||||
.btn-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -1174,7 +1260,7 @@ body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-icon:hover:not(:disabled) {
|
||||
.btn-close:hover:not(:disabled) {
|
||||
background: rgba(255, 70, 70, 0.10);
|
||||
border-color: rgba(255, 70, 70, 0.45);
|
||||
color: #ff6b6b;
|
||||
@ -2198,27 +2284,35 @@ body.theme-light .modal {
|
||||
bottom: 16px;
|
||||
z-index: 2200;
|
||||
max-width: min(90vw, 520px);
|
||||
background: rgba(20, 20, 24, 0.96);
|
||||
background: linear-gradient(135deg, rgba(28, 28, 34, 0.98), rgba(20, 20, 24, 0.98));
|
||||
color: #e6e6ea;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px 12px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(145, 70, 255, 0.12);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transform: translateX(20px);
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.app-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app-toast.warn {
|
||||
border-color: rgba(255, 167, 38, 0.7);
|
||||
border-left-color: var(--warning);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 167, 38, 0.25);
|
||||
}
|
||||
|
||||
.app-toast.error {
|
||||
border-left-color: var(--error);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 70, 70, 0.25);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
Loading…
Reference in New Issue
Block a user