kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace noisy striped direction arrows with clean circular indicators

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-15 19:53:56 +01:00
parent 1b1460fd45
commit 3c9ae03cb6
1 changed files with 14 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
public/css/components.css
View File

@@ -684,65 +684,27 @@ body.dark-mode .departure-card {
/* Direction arrow indicator */ /* Direction arrow indicator */
.direction-arrow-box { .direction-arrow-box {
width: 32px; width: 28px;
height: 32px; height: 28px;
border-radius: 4px; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.4em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border: none;
border: 1.5px solid rgba(255, 255, 255, 0.3); box-shadow: none;
} }
.direction-arrow-box.left { .direction-arrow-box.left {
background: repeating-linear-gradient( background: rgba(255, 140, 0, 0.2);
45deg, color: #ff9800;
#fff5e6,
#fff5e6 4px,
#ffe6cc 4px,
#ffe6cc 8px
);
color: #ff6600;
border-color: #ff6600;
} }
.direction-arrow-box.right { .direction-arrow-box.right {
background: repeating-linear-gradient( background: rgba(79, 195, 247, 0.2);
45deg,
#e6f2ff,
#e6f2ff 4px,
#cce6ff 4px,
#cce6ff 8px
);
color: #0066cc;
border-color: #0066cc;
}
body.dark-mode .direction-arrow-box.left {
background: repeating-linear-gradient(
45deg,
#664422,
#664422 4px,
#553311 4px,
#553311 8px
);
color: #ff8800;
border-color: #ff8800;
}
body.dark-mode .direction-arrow-box.right {
background: repeating-linear-gradient(
45deg,
#223366,
#223366 4px,
#112255 4px,
#112255 8px
);
color: var(--color-accent); color: var(--color-accent);
border-color: var(--color-accent);
} }
/* Destination text */ /* Destination text */
@@ -1505,9 +1467,9 @@ body.dark-mode .config-search-input:focus-visible {
} }
.direction-arrow-box { .direction-arrow-box {
width: 26px; width: 24px;
height: 26px; height: 24px;
font-size: 1.1em; font-size: 1em;
} }
/* Weather responsive */ /* Weather responsive */
@@ -1598,8 +1560,8 @@ body.dark-mode .config-search-input:focus-visible {
} }
.direction-arrow-box { .direction-arrow-box {
width: 22px; width: 20px;
height: 22px; height: 20px;
font-size: 0.9em; font-size: 0.9em;
} }