| # | |
| # https://huggingface.co/spaces/D3vShoaib/pocket-tts | |
| # | |
| CSS = """ | |
| footer { | |
| visibility: hidden; | |
| } | |
| .gradio-container { | |
| max-width: 100% !important; | |
| padding: 0 !important; | |
| } | |
| @media (min-width: 768px) { | |
| .gradio-container { | |
| padding-left: 2% !important; | |
| padding-right: 2% !important; | |
| } | |
| } | |
| .header-section { | |
| text-align: left; | |
| margin-bottom: 1.5rem; | |
| } | |
| .main-title { | |
| color: #10b981; | |
| font-weight: 800; | |
| font-size: 1.8rem; | |
| margin: 5px 0; | |
| } | |
| @media (min-width: 768px) { | |
| .main-title { | |
| font-size: 2.2rem; | |
| } | |
| } | |
| .logo-container { | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 0; | |
| } | |
| .logo-img { | |
| height: 40px; | |
| border-radius: 8px; | |
| } | |
| @media (min-width: 768px) { | |
| .logo-img { | |
| height: 50px; | |
| } | |
| .logo-container { | |
| gap: 15px; | |
| } | |
| } | |
| .links-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| gap: 8px; | |
| margin: 5px 0 10px 0; | |
| font-size: 0.85rem; | |
| } | |
| @media (min-width: 768px) { | |
| .links-row { | |
| gap: 10px; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| .links-row a { | |
| color: #10b981; | |
| text-decoration: none; | |
| padding: 3px 10px; | |
| border: 1px solid #10b981; | |
| border-radius: 15px; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .links-row a:hover { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .disclaimer { | |
| text-align: center; | |
| font-size: 10px; | |
| line-height: 1.4; | |
| color: #9ca3af; | |
| margin-top: 30px; | |
| padding: 15px; | |
| border-top: 1px solid currentColor; | |
| } | |
| @media (min-width: 768px) { | |
| .disclaimer { | |
| margin-top: 40px; | |
| padding: 20px; | |
| } | |
| } | |
| .disclaimer-copyright { | |
| opacity: 0.8; | |
| } | |
| .disclaimer-warning { | |
| font-size: 8px; | |
| opacity: 0.7; | |
| } | |
| .accent-link { | |
| color: #10b981; | |
| text-decoration: none; | |
| } | |
| #voice-mode .wrap { | |
| display: flex !important; | |
| flex-direction: row !important; | |
| width: 100% !important; | |
| } | |
| #voice-mode .wrap label { | |
| flex: 1 !important; | |
| justify-content: center !important; | |
| text-align: center !important; | |
| } | |
| .example-prompts { | |
| padding: 16px 0 8px 0; | |
| } | |
| .example-prompts h3 { | |
| margin: 0 0 8px 0; | |
| font-size: 1.1em; | |
| } | |
| .example-prompts p { | |
| margin: 0; | |
| opacity: 0.7; | |
| font-size: 0.9em; | |
| } | |
| .character-count { | |
| text-align: right; | |
| padding: 4px 0; | |
| } | |
| .character-count span { | |
| color: var(--body-text-color-subdued); | |
| font-size: 0.85em; | |
| } | |
| """ |