aboutsummaryrefslogtreecommitdiff
path: root/public/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/app.css')
-rw-r--r--public/app.css58
1 files changed, 8 insertions, 50 deletions
diff --git a/public/app.css b/public/app.css
index cdb2226..cf44f2a 100644
--- a/public/app.css
+++ b/public/app.css
@@ -71,8 +71,8 @@ html, body {
.nav-btn {
position: absolute;
- width: 46px;
- height: 46px;
+ width: 40px;
+ height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .1);
@@ -81,14 +81,14 @@ html, body {
display: grid;
place-items: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
- opacity: .16;
+ opacity: .18;
transition: opacity .15s, background .15s, color .15s, box-shadow .15s;
}
-.nav-btn svg { width: 20px; height: 20px; display: block; }
-.nav-zone-N .nav-btn { top: 0; left: 50%; translate: -50% -50%; }
-.nav-zone-E .nav-btn { top: 50%; right: 0; translate: 50% -50%; }
-.nav-zone-S .nav-btn { bottom: 0; left: 50%; translate: -50% 50%; }
-.nav-zone-W .nav-btn { top: 50%; left: 0; translate: -50% -50%; }
+.nav-btn svg { width: 18px; height: 18px; display: block; }
+.nav-zone-N .nav-btn { top: 10px; left: 50%; translate: -50% 0; }
+.nav-zone-E .nav-btn { top: 50%; right: 10px; translate: 0 -50%; }
+.nav-zone-S .nav-btn { bottom: 10px; left: 50%; translate: -50% 0; }
+.nav-zone-W .nav-btn { top: 50%; left: 10px; translate: 0 -50%; }
.nav-zone:hover .nav-btn {
opacity: 1;
background: rgba(255, 255, 255, .22);
@@ -97,47 +97,6 @@ html, body {
box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
-.nav-label {
- position: absolute;
- left: 50%;
- translate: -50%;
- white-space: nowrap;
- font-size: 12px;
- font-weight: 500;
- letter-spacing: .02em;
- color: var(--ink);
- 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;
-}
-.nav-btn[data-dir="N"] .nav-label { bottom: calc(100% + 8px); }
-.nav-btn[data-dir="S"] .nav-label { top: calc(100% + 8px); }
-.nav-btn[data-dir="E"] .nav-label { top: 50%; left: calc(100% + 10px); translate: 0 -50%; }
-.nav-btn[data-dir="W"] .nav-label { top: 50%; right: calc(100% + 10px); translate: 0 -50%; }
-.nav-btn:hover .nav-label { opacity: 1; }
-
-#flash {
- position: fixed;
- top: 18px;
- left: 50%;
- translate: -50%;
- font-size: 14px;
- letter-spacing: .06em;
- color: var(--ink);
- background: rgba(14, 15, 19, .88);
- border: 1px solid rgba(255, 255, 255, .22);
- border-radius: 6px;
- padding: 6px 14px;
- opacity: 0;
- pointer-events: none;
- transition: opacity .25s;
-}
-#flash.show { opacity: 1; }
-
#splash {
position: fixed;
inset: 0;
@@ -171,5 +130,4 @@ html, body {
@media (prefers-reduced-motion: reduce) {
#world { transition: none; }
.tile.lock { animation: none; }
- #flash { transition: none; }
}