| |
|
|
| |
| |
| |
| :root { |
| --primary-color: #4f46e5; |
| --primary-light: #6366f1; |
| --primary-dark: #3730a3; |
| --secondary-color: #9333ea; |
| --accent-color: #ec4899; |
| --text-color: #0f172a; |
| --text-light: #64748b; |
| --bg-color: #f8fafc; |
| --card-bg: #ffffff; |
| --border-color: #e2e8f0; |
| --shadow: 0 4px 6px -1px rgba(0,0,0,.1), |
| 0 2px 4px -1px rgba(0,0,0,.06); |
| --transition: all 0.3s ease; |
| --radius: 12px; |
| --header-gradient: linear-gradient( |
| 135deg, |
| var(--primary-color), |
| var(--secondary-color) |
| ); |
| } |
|
|
| |
| .dark { |
| --text-color: #e2e8f0; |
| --text-light: #94a3b8; |
| --bg-color: #0f172a; |
| --card-bg: #1e293b; |
| --border-color: #334155; |
| } |
|
|
| |
| |
| |
| .gradio-container { |
| font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, |
| "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| background: var(--bg-color); |
| color: var(--text-color); |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| border-radius: var(--radius); |
| box-shadow: var(--shadow); |
| animation: fadeIn 0.6s ease-in-out; |
| } |
|
|
| |
| |
| |
| .header-container { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| justify-content: center; |
| background: var(--header-gradient); |
| padding: 2rem; |
| border-radius: var(--radius); |
| box-shadow: var(--shadow); |
| margin-bottom: 2rem; |
| color: white; |
| } |
|
|
| .header-container img { |
| width: 90px; |
| height: 90px; |
| filter: drop-shadow(0 0 8px rgba(255,255,255,.5)); |
| transition: var(--transition); |
| } |
|
|
| .header-container img:hover { |
| transform: scale(1.05) rotate(5deg); |
| } |
|
|
| .header-container h1 { |
| font-size: 2.4rem; |
| font-weight: 700; |
| margin-bottom: 0.4rem; |
| background: linear-gradient(45deg,#fff,#e0e7ff); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| .header-container a { |
| color: white; |
| font-weight: 600; |
| text-decoration: none; |
| border-bottom: 2px solid rgba(255,255,255,.4); |
| transition: var(--transition); |
| } |
|
|
| .header-container a:hover { |
| border-color: white; |
| } |
|
|
| |
| |
| |
| .gr-accordion { |
| background: var(--card-bg); |
| border-radius: var(--radius); |
| box-shadow: var(--shadow); |
| margin-bottom: 1.5rem; |
| overflow: hidden; |
| } |
|
|
| .gr-accordion-title { |
| background: var(--primary-color); |
| color: white !important; |
| padding: 1rem 1.5rem; |
| font-weight: 600; |
| } |
|
|
| |
| |
| |
| .gr-input, |
| .gr-textarea, |
| .gr-text-input { |
| width: 100%; |
| padding: 0.75rem 1rem; |
| border-radius: var(--radius); |
| border: 1px solid var(--border-color); |
| background: var(--card-bg); |
| color: var(--text-color); |
| transition: var(--transition); |
| } |
|
|
| .gr-input:focus, |
| .gr-textarea:focus { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px rgba(79,70,229,.2); |
| outline: none; |
| } |
|
|
| |
| |
| |
| .upload-box { |
| min-height: 120px; |
| border: 2px dashed var(--border-color); |
| border-radius: var(--radius); |
| padding: 1rem; |
| } |
|
|
| |
| |
| |
| .gr-button.gr-button-primary, |
| button.generate-btn { |
| width: 100%; |
| background: var(--header-gradient) !important; |
| color: white !important; |
| border: none !important; |
| border-radius: var(--radius) !important; |
| padding: 0.9rem !important; |
| font-size: 1rem !important; |
| font-weight: 700 !important; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| cursor: pointer; |
| transition: var(--transition); |
| box-shadow: 0 4px 10px rgba(79,70,229,.4); |
| } |
|
|
| .gr-button.gr-button-primary:hover, |
| button.generate-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 18px rgba(79,70,229,.45); |
| } |
|
|
| .gr-button.gr-button-primary:active, |
| button.generate-btn:active { |
| transform: translateY(1px); |
| } |
|
|
| |
| |
| |
| .gr-gallery { |
| background: var(--card-bg); |
| border-radius: var(--radius); |
| padding: 1rem; |
| box-shadow: var(--shadow); |
| min-height: 300px; |
| } |
|
|
| .gr-gallery img { |
| border-radius: calc(var(--radius) - 4px); |
| object-fit: contain !important; |
| transition: var(--transition); |
| } |
|
|
| .gr-gallery img:hover { |
| transform: scale(1.02); |
| } |
|
|
| |
| |
| |
| .output-text { |
| background: var(--card-bg); |
| padding: 1.2rem; |
| border-radius: var(--radius); |
| box-shadow: var(--shadow); |
| min-height: 100px; |
| } |
|
|
| |
| |
| |
| .gr-examples-header { |
| font-size: 1.5rem !important; |
| font-weight: 600 !important; |
| color: var(--primary-light) !important; |
| margin: 2rem 0 1rem !important; |
| } |
|
|
| .gr-examples { |
| display: grid; |
| grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); |
| gap: 1rem; |
| } |
|
|
| .gr-sample { |
| background: var(--card-bg); |
| border-radius: var(--radius); |
| overflow: hidden; |
| box-shadow: var(--shadow); |
| transition: var(--transition); |
| } |
|
|
| .gr-sample:hover { |
| transform: translateY(-2px); |
| } |
|
|
| |
| |
| |
| @media (max-width: 768px) { |
| .gradio-container { |
| padding: 1rem; |
| } |
|
|
| .header-container { |
| flex-direction: column; |
| text-align: center; |
| } |
|
|
| .header-container h1 { |
| font-size: 2rem; |
| } |
|
|
| .gr-examples { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--primary-light); |
| border-radius: 4px; |
| } |
|
|
| |
| |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
