aboutsummaryrefslogtreecommitdiff
path: root/public/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/app.css')
-rw-r--r--public/app.css104
1 files changed, 2 insertions, 102 deletions
diff --git a/public/app.css b/public/app.css
index 5f4aaab..079139b 100644
--- a/public/app.css
+++ b/public/app.css
@@ -192,21 +192,9 @@ html, body {
}
.direct-hint a:hover { border-bottom-color: var(--ring); }
-#file {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0 0 0 0);
- border: 0;
- opacity: 0;
-}
#import-state h1 { margin: 0; font-size: 44px; font-weight: 300; letter-spacing: .18em; }
#import-state h1 .dot { color: var(--ring); }
#import-state p { max-width: 34ch; color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
-/* app.css?v=38 */
#start {
margin-top: 10px;
padding: 10px 34px;
@@ -231,56 +219,15 @@ html, body {
padding: 10px 22px;
font-size: 14px;
letter-spacing: .06em;
+ text-decoration: none;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
background: transparent;
color: var(--ink);
cursor: pointer;
- opacity: 0;
- transform: translateY(6px);
- transition: opacity .4s, transform .4s, border-color .15s, background .15s;
-}
-#import:not([hidden]) { opacity: 1; transform: translateY(0); }
-#import svg {
- width: 17px;
- height: 17px;
- fill: none;
- stroke: currentColor;
- stroke-width: 1.7;
- stroke-linecap: round;
- stroke-linejoin: round;
+ transition: border-color .15s, background .15s;
}
#import:hover { border-color: var(--ring); background: rgba(125, 211, 252, .08); }
-#import.busy {
- border-color: var(--ring);
- color: var(--ring);
- pointer-events: none;
- animation: pulse 1.1s ease-in-out infinite;
-}
-#import[hidden] { display: none; }
-
-@keyframes pulse {
- 0%, 100% { opacity: .55; }
- 50% { opacity: 1; }
-}
-
-#drop {
- position: fixed;
- inset: 0;
- z-index: 9;
- display: grid;
- place-content: center;
- background: rgba(14, 15, 19, .82);
- border: 2px dashed rgba(125, 211, 252, .55);
- color: var(--ink);
- font-size: 16px;
- letter-spacing: .1em;
- opacity: 0;
- visibility: hidden;
- pointer-events: none;
- transition: opacity .15s, visibility .15s;
-}
-#drop.show { opacity: 1; visibility: visible; pointer-events: auto; }
#toast {
position: fixed;
@@ -304,54 +251,7 @@ html, body {
#toast.show { opacity: 1; visibility: visible; pointer-events: auto; }
#toast.err { border-color: rgba(248, 113, 113, .6); color: #fca5a5; }
-#progress {
- position: fixed;
- left: 50%;
- bottom: 26px;
- transform: translateX(-50%);
- z-index: 40;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 9px;
- min-width: 280px;
- max-width: 70vw;
- padding: 13px 18px;
- border: 1px solid rgba(255, 255, 255, .18);
- border-radius: 10px;
- background: rgba(14, 15, 19, .95);
-}
-#progress[hidden] { display: none; }
-#progress-track {
- width: 100%;
- height: 6px;
- border-radius: 3px;
- background: rgba(255, 255, 255, .12);
- overflow: hidden;
-}
-#progress-fill {
- height: 100%;
- width: 0%;
- border-radius: 3px;
- background: var(--ring);
- transition: width .15s ease;
-}
-#progress.indeterminate #progress-fill {
- width: 40%;
- animation: progress-slide 1.1s linear infinite;
-}
-@keyframes progress-slide {
- 0% { transform: translateX(-110%); }
- 100% { transform: translateX(360%); }
-}
-#progress-text {
- font-size: 12px;
- letter-spacing: .04em;
- color: var(--muted);
-}
-
@media (prefers-reduced-motion: reduce) {
#world { transition: none; }
.tile.lock { animation: none; }
- #upload.busy { animation: none; }
}