diff options
Diffstat (limited to 'public/app.css')
| -rw-r--r-- | public/app.css | 37 |
1 files changed, 16 insertions, 21 deletions
diff --git a/public/app.css b/public/app.css index 3a8f684..d5f12dc 100644 --- a/public/app.css +++ b/public/app.css @@ -70,32 +70,27 @@ html, body { position: absolute; pointer-events: auto; } -.nav-zone-N { top: -44px; left: 0; width: 100%; height: calc(30% + 44px); } -.nav-zone-S { bottom: -44px; left: 0; width: 100%; height: calc(30% + 44px); } -.nav-zone-E { top: 30%; right: -44px; width: calc(30% + 44px); height: 40%; } -.nav-zone-W { top: 30%; left: -44px; width: calc(30% + 44px); height: 40%; } +.nav-zone-N { top: 0; left: 0; width: 100%; height: 30%; } +.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 30%; } +.nav-zone-E { top: 30%; right: 0; width: 30%; height: 40%; } +.nav-zone-W { top: 30%; left: 0; width: 30%; height: 40%; } -.nav-chev { +.nav-edge { position: absolute; - width: 44px; - height: 44px; - color: rgba(255, 255, 255, .85); - opacity: .3; - filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)); + background: linear-gradient(rgba(255, 255, 255, .9), rgba(125, 211, 252, .55)); + opacity: .35; pointer-events: none; - transition: opacity .15s, filter .15s, color .15s; + transition: opacity .15s, filter .15s; } -.nav-chev svg { width: 100%; height: 100%; display: block; } -.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -100%; } -.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 100% -50%; } -.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 100%; } -.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -100% -50%; } -.nav-zone:hover .nav-chev { - opacity: 1; - color: #fff; - filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6)); +.nav-zone-N .nav-edge { top: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; } +.nav-zone-S .nav-edge { bottom: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; } +.nav-zone-E .nav-edge { right: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; } +.nav-zone-W .nav-edge { left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; } +.nav-zone:hover .nav-edge { + opacity: .95; + filter: drop-shadow(0 0 7px rgba(125, 211, 252, .8)); } -.nav-zone.preview .nav-chev { +.nav-zone.preview .nav-edge { opacity: 0; } |