| body { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| font-family: system-ui, -apple-system, sans-serif; | |
| background: #f5f5f5; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #2d3748; | |
| margin-bottom: 2rem; | |
| } | |
| #container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem; | |
| border: 2px dashed #cbd5e0; | |
| border-radius: 1rem; | |
| background: white; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| transition: border-color 0.3s ease; | |
| } | |
| #thumb { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem; | |
| } | |
| #container:hover { | |
| border-color: #4a5568; | |
| } | |
| #container svg { | |
| margin-bottom: 1rem; | |
| opacity: 0.7; | |
| } | |
| #container div { | |
| margin-top: 1.5rem; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| input[type="text"] { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| transition: border-color 0.3s ease; | |
| background: #f8fafc; | |
| } | |
| input[type="text"]:focus { | |
| outline: none; | |
| border-color: #4a5568; | |
| box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1); | |
| } | |
| #example { | |
| display: inline-block; | |
| margin-top: 0.5rem; | |
| color: #4299e1; | |
| cursor: pointer; | |
| font-size: 0.875rem; | |
| transition: color 0.3s ease; | |
| } | |
| #example:hover { | |
| color: #2b6cb0; | |
| text-decoration: underline; | |
| } | |
| #status { | |
| display: block; | |
| margin-top: 1.5rem; | |
| text-align: center; | |
| color: #4a5568; | |
| font-size: 0.875rem; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| background: #edf2f7; | |
| } | |
| #upload { | |
| display: none; | |
| } | |
| @media (max-width: 640px) { | |
| body { | |
| padding: 1rem; | |
| } | |
| #container { | |
| padding: 1.5rem; | |
| } | |
| } |