File size: 2,437 Bytes
06685cd b8bcb6d 06685cd b8bcb6d 06685cd 1f59f51 06685cd b8bcb6d 06685cd b8bcb6d 06685cd b8bcb6d 06685cd 1f59f51 06685cd b8bcb6d 06685cd b8bcb6d 06685cd b8bcb6d 06685cd 1f59f51 06685cd 1f59f51 06685cd 1f59f51 06685cd b8bcb6d 06685cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
:root { color-scheme: dark; }
body, .gradio-container {
background: #0E1014 !important;
color: #EAECEF !important;
--ghost-surface: #0F1420;
--ghost-border: #243049;
--ghost-ink: #EAECEF;
--ghost-accent: #10B981; /* emerald */
--ghost-accent-2: #8B5CF6; /* violet */
--ghost-accent-3: #F59E0B; /* amber */
--ghost-accent-4: #38BDF8; /* sky */
}
* { color: var(--ghost-ink) !important; }
label, p, span, h1, h2, h3, h4, h5, h6 { color: var(--ghost-ink) !important; }
input, textarea, select {
background: #151922 !important;
color: var(--ghost-ink) !important;
border: 1px solid #2A3142 !important;
border-radius: 10px !important;
}
button.gr-button {
background: linear-gradient(180deg, #1E3A8A, #1D4ED8) !important;
color: #FFFFFF !important;
border: 1px solid #2947A3 !important;
border-radius: 12px !important;
padding: 10px 16px !important;
font-weight: 700 !important;
transition: transform 0.06s ease-out, background 0.2s ease;
}
button.gr-button:hover { transform: translateY(-1px); background: linear-gradient(180deg, #1F49A8, #2563EB) !important; }
button.gr-button:focus { outline: 3px solid var(--ghost-accent) !important; }
.slider > input { accent-color: var(--ghost-accent-3) !important; }
.header {
text-align:center; padding: 12px 16px;
border-bottom: 2px solid var(--ghost-accent);
}
.header h1 { font-size: 28px; margin: 6px 0 0 0; }
.header .logo { font-size: 44px; }
.input-container, .settings-container, .output-container, .logs-container {
max-width: 1200px; margin: 16px auto; padding: 16px;
background: var(--ghost-surface);
border: 1px solid var(--ghost-border); border-radius: 12px;
}
/* Responsive grid for style buttons */
#genre-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
/* style buttons – make them compact and colorful */
#genre-grid .style-btn.gr-button {
min-height: 44px;
background: linear-gradient(180deg, #0EA5E9, #0369A1) !important; /* blue-ish */
border-color: #0C4A6E !important;
}
#genre-grid .style-btn.gr-button:hover {
background: linear-gradient(180deg, #22D3EE, #0EA5E9) !important;
}
.group-container { border: 1px solid var(--ghost-border); border-radius: 12px; padding: 16px; }
.gradio-container .prose a { color: var(--ghost-accent-2) !important; text-decoration: underline; } |