diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/style.css | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/web/static/style.css b/web/static/style.css index 755a5cb..61e482a 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -47,6 +47,11 @@ --color-profile-3-6: oklch(58% 0.17 255deg); --color-profile-6-9: oklch(58% 0.2 25deg); --color-profile-9-plus: oklch(0% 0 0deg); + --color-pass-road: oklch(51% 0.14 154deg); + --color-pass-track: oklch(58% 0.11 85deg); + --color-pass-path: oklch(65% 0.17 48deg); + --color-pass-hiking: oklch(52% 0.07 265deg); + --color-pass-unknown: oklch(70% 0.04 155deg); --color-category-1: oklch(65% 0.16 15deg); --color-category-2: oklch(65% 0.16 60deg); --color-category-3: oklch(65% 0.16 105deg); @@ -129,6 +134,11 @@ select { border: 1px solid var(--color-input-border); border-radius: .55rem; pad .ride-map { min-height: 24rem; height: min(65vh, 40rem); } .ride-map-pass-icon { display: grid; place-items: center; width: 1.75rem !important; height: 1.75rem !important; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-leaf); color: var(--color-on-dark); box-shadow: 0 .15rem .4rem var(--color-panel-shadow); } .ride-map-pass-icon svg { width: 1.15rem; height: 1.15rem; } +.ride-map-pass-icon-road { background: var(--color-pass-road); } +.ride-map-pass-icon-track { background: var(--color-pass-track); } +.ride-map-pass-icon-path { background: var(--color-pass-path); } +.ride-map-pass-icon-hiking { background: var(--color-pass-hiking); } +.ride-map-pass-icon-unknown { background: var(--color-pass-unknown); } .ride-map-climb-start-icon, .ride-map-climb-end-icon { display: grid; place-items: center; width: 1.625rem !important; height: 1.625rem !important; border: 2px solid var(--color-surface); box-shadow: 0 .15rem .4rem var(--color-panel-shadow); } .ride-map-climb-start-icon { border-radius: 50%; background: var(--color-forest); color: var(--color-on-dark); } .ride-map-climb-end-icon { border-radius: .3rem; background: var(--color-accent); color: var(--color-on-dark); } |