aboutsummaryrefslogtreecommitdiff
path: root/public/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/app.css')
-rw-r--r--public/app.css34
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;