diff options
Diffstat (limited to 'public/app.css')
| -rw-r--r-- | public/app.css | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/public/app.css b/public/app.css index ddd472d..44b7c7f 100644 --- a/public/app.css +++ b/public/app.css @@ -37,13 +37,12 @@ html, body { .tile { position: absolute; border-radius: 6px; - overflow: hidden; background: var(--tile); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); cursor: pointer; transition: box-shadow .2s; } -.tile img { width: 100%; height: 100%; object-fit: cover; display: block; } +.tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; } .tile.lock { animation: lock .5s cubic-bezier(.22, 1, .36, 1); } @keyframes lock { @@ -67,20 +66,20 @@ html, body { .nav-btn { position: absolute; pointer-events: auto; - width: 40px; - height: 40px; + width: 44px; + height: 44px; border-radius: 50%; - border: 1px solid rgba(255, 255, 255, .25); - background: rgba(14, 15, 19, .85); - color: var(--ink); - font-size: 15px; - line-height: 1; + border: none; + background: rgba(255, 255, 255, .95); + color: #17181d; cursor: pointer; display: grid; place-items: center; - transition: transform .12s, border-color .12s; + box-shadow: 0 2px 14px rgba(0, 0, 0, .5); + transition: transform .12s, background .12s, box-shadow .12s; } -.nav-btn:hover { border-color: var(--ring); transform: scale(1.12); } +.nav-btn svg { width: 22px; height: 22px; display: block; } +.nav-btn:hover { transform: scale(1.15); background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .55); } .nav-btn[data-dir="N"] { top: 0; left: 50%; translate: -50% -50%; } .nav-btn[data-dir="E"] { top: 50%; right: 0; translate: 50% -50%; } .nav-btn[data-dir="S"] { bottom: 0; left: 50%; translate: -50% 50%; } @@ -91,13 +90,14 @@ html, body { left: 50%; translate: -50%; white-space: nowrap; - font-size: 11px; - letter-spacing: .04em; + font-size: 12px; + font-weight: 500; + letter-spacing: .02em; color: var(--ink); - background: rgba(14, 15, 19, .92); - border: 1px solid rgba(255, 255, 255, .18); - border-radius: 4px; - padding: 2px 7px; + background: rgba(18, 19, 24, .92); + border: 1px solid rgba(255, 255, 255, .14); + border-radius: 999px; + padding: 3px 10px; opacity: 0; transition: opacity .12s; pointer-events: none; |
