diff --git a/src/public/upload.css b/src/public/upload.css index 22174ab..557ce9e 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -92,72 +92,89 @@ h1 { } .upload-panel { - width: min(100%, 360px); - margin: clamp(18px, 4vw, 30px) auto 0; + width: min(100%, 420px); + margin: clamp(18px, 4vw, 28px) auto 0; } .upload-panel__today { - margin: 0 0 clamp(20px, 4vw, 30px); + display: flex; + align-items: center; + justify-content: center; + gap: clamp(10px, 2.4vw, 16px); + margin: 0 0 clamp(18px, 3.6vw, 26px); color: #4f4f4f; - font-size: clamp(24px, 5vw, 38px); + font-size: clamp(24px, 4.8vw, 35px); line-height: 1.15; font-weight: 400; - letter-spacing: 0.1em; + letter-spacing: 0.08em; white-space: nowrap; } -.file-picker { - display: block; - width: 100%; - margin-bottom: 10px; - padding: 10px 12px 12px; - border: 1px solid var(--line); - background: rgba(255, 255, 255, 0.88); - color: #333333; +.upload-panel__today::before, +.upload-panel__today::after { + content: ""; + flex: 0 0 clamp(28px, 6vw, 42px); + height: clamp(16px, 3.4vw, 24px); + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 36'%3E%3Cg fill='none' stroke='%2389a69e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 28c13-12 27-20 47-23'/%3E%3Cpath d='M25 22c-9-1-15-7-17-15 10 1 17 6 20 14' fill='%2389a69e' fill-opacity='.5'/%3E%3Cpath d='M42 13c-7-1-12-5-14-12 8 0 14 4 17 11' fill='%2389a69e' fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; + opacity: 0.78; } -.file-picker__label { - display: block; - margin-bottom: 7px; - font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; - font-size: 14px; - font-weight: 700; -} - -input[type="file"] { - width: 100%; - color: #444444; - font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; - font-size: 12px; +.upload-panel__today::after { + transform: scaleX(-1); } .upload-button { + position: relative; display: grid; place-items: center; width: 100%; - min-height: 76px; + min-height: clamp(68px, 12vw, 86px); border: 0; - border-radius: 8px; - padding: 16px 22px; + border-radius: 7px; + padding: 15px 24px; background: - linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 28% 72%, rgba(255, 255, 255, 0.06)), - linear-gradient(180deg, #1d625b 0%, var(--deep) 100%); + radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.13), transparent 58%), + linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 30% 70%, rgba(255, 255, 255, 0.05)), + linear-gradient(180deg, #1c5d57 0%, #155149 100%); box-shadow: - 0 10px 20px rgba(17, 72, 66, 0.22), - inset 0 1px 0 rgba(255, 255, 255, 0.18); + 0 14px 24px rgba(22, 72, 67, 0.17), + inset 0 1px 0 rgba(255, 255, 255, 0.2), + inset 0 -8px 16px rgba(0, 0, 0, 0.09); color: #ffffff; font: inherit; - font-size: clamp(27px, 5.4vw, 38px); + font-size: clamp(27px, 5.2vw, 37px); line-height: 1.1; font-weight: 400; - letter-spacing: 0.06em; + letter-spacing: 0.08em; cursor: pointer; } +.file-picker input[type="file"] { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; +} + +.submit-fallback { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; +} + .upload-button:hover { background: - linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 28% 72%, rgba(255, 255, 255, 0.08)), - linear-gradient(180deg, #216f67 0%, var(--deep-dark) 100%); + radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 58%), + linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 30% 70%, rgba(255, 255, 255, 0.07)), + linear-gradient(180deg, #216d65 0%, var(--deep-dark) 100%); } .upload-button:focus-visible, @@ -185,10 +202,10 @@ input[type="file"] { } .upload-panel { - width: min(100%, 320px); + width: min(100%, 300px); } .upload-panel__today { - font-size: clamp(23px, 7vw, 30px); + font-size: clamp(23px, 6.5vw, 29px); } } diff --git a/src/public/upload.html b/src/public/upload.html index 9551d9b..d12bb20 100644 --- a/src/public/upload.html +++ b/src/public/upload.html @@ -22,16 +22,23 @@
+