mirror of
https://github.com/remsky/Kokoro-FastAPI.git
synced 2025-04-13 09:39:17 +00:00
Refactor responsive styles, enhance layout structure, and integrate text editor functionality
This commit is contained in:
remsky
parent
fe6c9acaf5
commit
5d48688ab0
7 changed files with 823 additions and 237 deletions
|
|
@ -45,32 +45,18 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
<div class="input-section">
|
||||
<div class="help-icon" title="Tips">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0012 6.5a3.501 3.501 0 00-3.433 2.813l1.962.393A1.5 1.5 0 1112 11.5a1 1 0 00-1 1V14h2v-.645z" fill="currentColor"/>
|
||||
</svg>
|
||||
<div class="tooltip-content">
|
||||
<h4>Tips</h4>
|
||||
<ul>
|
||||
<li>Use <code><<>></code> to add an intentional break between chunks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
id="text-input"
|
||||
placeholder="Enter text to convert to speech..."
|
||||
></textarea>
|
||||
<div class="text-controls">
|
||||
<input type="file" id="file-input" accept=".txt" style="display: none;">
|
||||
<button id="upload-btn" class="clear-btn">
|
||||
Upload Text
|
||||
</button>
|
||||
<button id="clear-btn" class="clear-btn">
|
||||
Clear Text
|
||||
</button>
|
||||
<div class="help-icon" title="Tips">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm2-1.645A3.502 3.502 0 0012 6.5a3.501 3.501 0 00-3.433 2.813l1.962.393A1.5 1.5 0 1112 11.5a1 1 0 00-1 1V14h2v-.645z" fill="currentColor"/>
|
||||
</svg>
|
||||
<div class="tooltip-content">
|
||||
<h4>Tips</h4>
|
||||
<ul>
|
||||
<li>Use <code><<>></code> to add an intentional break between chunks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="text-editor"></div>
|
||||
<div class="controls">
|
||||
<div class="voice-select-container">
|
||||
<input
|
||||
|
|
@ -90,17 +76,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="option-group">
|
||||
<label>
|
||||
<input type="checkbox" id="autoplay-toggle" checked>
|
||||
Auto-play
|
||||
</label>
|
||||
<select id="format-select" class="format-select">
|
||||
<option value="mp3">MP3</option>
|
||||
<option value="wav">WAV</option>
|
||||
<option value="pcm">PCM</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="speed-control">
|
||||
<label for="speed-slider">Speed: <span id="speed-value">1.0</span>x</label>
|
||||
<input type="range" id="speed-slider" min="0.1" max="4" step="0.1" value="1.0">
|
||||
|
|
@ -111,34 +86,44 @@
|
|||
<span class="btn-text">Generate Speech</span>
|
||||
<span class="loader"></span>
|
||||
</button>
|
||||
<div class="generation-options">
|
||||
<label>
|
||||
<input type="checkbox" id="autoplay-toggle" checked>
|
||||
Auto-play
|
||||
</label>
|
||||
<select id="format-select" class="format-select">
|
||||
<option value="mp3">MP3</option>
|
||||
<option value="wav">WAV</option>
|
||||
<option value="pcm">PCM</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="cancel-btn" class="cancel-btn" style="display: none;">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div id="status" class="status"></div>
|
||||
<div class="audio-controls">
|
||||
<div class="player-container">
|
||||
<div class="player-controls">
|
||||
<button id="play-pause-btn" class="player-btn">Play</button>
|
||||
<input type="range" id="seek-slider" class="seek-slider" min="0" max="100" value="0">
|
||||
<div class="volume-control">
|
||||
<svg class="volume-icon" viewBox="0 0 24 24" width="20" height="20">
|
||||
<path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
|
||||
</svg>
|
||||
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
|
||||
</div>
|
||||
<span id="time-display" class="time-display">0:00</span>
|
||||
</div>
|
||||
<div id="wave-container" class="wave-container"></div>
|
||||
</div>
|
||||
<div class="player-container">
|
||||
<div class="player-controls">
|
||||
<button id="play-pause-btn" class="player-btn">Play</button>
|
||||
<input type="range" id="seek-slider" class="seek-slider" min="0" max="100" value="0">
|
||||
<div class="volume-control">
|
||||
<svg class="volume-icon" viewBox="0 0 24 24" width="20" height="20">
|
||||
<path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
|
||||
</svg>
|
||||
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="100">
|
||||
</div>
|
||||
<div id="download-btn" class="download-button" style="display: none;">
|
||||
<div class="download-glow"></div>
|
||||
<div class="download-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M8 11L4 7h8l-4 4z" fill="currentColor"/>
|
||||
<path d="M8 3v8M4 14h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span id="time-display" class="time-display">0:00</span>
|
||||
</div>
|
||||
<div id="wave-container" class="wave-container"></div>
|
||||
<div class="download-placeholder"></div>
|
||||
<div id="download-btn" class="download-button">
|
||||
<div class="download-glow"></div>
|
||||
<div class="download-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M8 11L4 7h8l-4 4z" fill="currentColor"/>
|
||||
<path d="M8 3v8M4 14h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,19 @@ import PlayerState from './state/PlayerState.js';
|
|||
import PlayerControls from './components/PlayerControls.js';
|
||||
import VoiceSelector from './components/VoiceSelector.js';
|
||||
import WaveVisualizer from './components/WaveVisualizer.js';
|
||||
import TextEditor from './components/TextEditor.js';
|
||||
|
||||
export class App {
|
||||
constructor() {
|
||||
this.elements = {
|
||||
textInput: document.getElementById('text-input'),
|
||||
generateBtn: document.getElementById('generate-btn'),
|
||||
generateBtnText: document.querySelector('#generate-btn .btn-text'),
|
||||
generateBtnLoader: document.querySelector('#generate-btn .loader'),
|
||||
downloadBtn: document.getElementById('download-btn'),
|
||||
fileInput: document.getElementById('file-input'),
|
||||
uploadBtn: document.getElementById('upload-btn'),
|
||||
autoplayToggle: document.getElementById('autoplay-toggle'),
|
||||
formatSelect: document.getElementById('format-select'),
|
||||
status: document.getElementById('status'),
|
||||
cancelBtn: document.getElementById('cancel-btn'),
|
||||
clearBtn: document.getElementById('clear-btn')
|
||||
cancelBtn: document.getElementById('cancel-btn')
|
||||
};
|
||||
|
||||
this.initialize();
|
||||
|
|
@ -35,6 +32,16 @@ export class App {
|
|||
this.playerControls = new PlayerControls(this.audioService, this.playerState);
|
||||
this.voiceSelector = new VoiceSelector(this.voiceService);
|
||||
this.waveVisualizer = new WaveVisualizer(this.playerState);
|
||||
|
||||
// Initialize text editor
|
||||
const editorContainer = document.getElementById('text-editor');
|
||||
this.textEditor = new TextEditor(editorContainer, {
|
||||
linesPerPage: 20,
|
||||
onTextChange: (text) => {
|
||||
// Optional: Handle text changes here if needed
|
||||
console.log('Text changed:', text);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize voice selector
|
||||
const voicesLoaded = await this.voiceSelector.initialize();
|
||||
|
|
@ -59,44 +66,10 @@ export class App {
|
|||
this.elements.cancelBtn.addEventListener('click', () => {
|
||||
this.audioService.cancel();
|
||||
this.setGenerating(false);
|
||||
this.elements.downloadBtn.style.display = 'none';
|
||||
this.elements.downloadBtn.classList.remove('ready');
|
||||
this.showStatus('Generation cancelled', 'info');
|
||||
});
|
||||
|
||||
// Clear text button
|
||||
this.elements.clearBtn.addEventListener('click', () => {
|
||||
this.elements.textInput.value = '';
|
||||
this.elements.textInput.focus();
|
||||
});
|
||||
|
||||
// Upload button
|
||||
this.elements.uploadBtn.addEventListener('click', () => {
|
||||
this.elements.fileInput.click();
|
||||
});
|
||||
|
||||
// File input change
|
||||
this.elements.fileInput.addEventListener('change', async (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
if (file.size > 1024 * 1024) { // 1MB limit
|
||||
this.showStatus('File too large. Please choose a file under 1MB', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
this.elements.textInput.value = text;
|
||||
this.showStatus('File loaded successfully', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error reading file:', error);
|
||||
this.showStatus('Error reading file', 'error');
|
||||
}
|
||||
|
||||
// Clear the input so the same file can be loaded again
|
||||
this.elements.fileInput.value = '';
|
||||
});
|
||||
|
||||
// Handle page unload
|
||||
window.addEventListener('beforeunload', () => {
|
||||
this.audioService.cleanup();
|
||||
|
|
@ -108,7 +81,7 @@ export class App {
|
|||
setupAudioEvents() {
|
||||
// Handle download button visibility
|
||||
this.audioService.addEventListener('downloadReady', () => {
|
||||
this.elements.downloadBtn.style.display = 'flex';
|
||||
this.elements.downloadBtn.classList.add('ready');
|
||||
});
|
||||
|
||||
// Handle buffer errors
|
||||
|
|
@ -172,7 +145,7 @@ export class App {
|
|||
}
|
||||
|
||||
validateInput() {
|
||||
const text = this.elements.textInput.value.trim();
|
||||
const text = this.textEditor.getText().trim();
|
||||
if (!text) {
|
||||
this.showStatus('Please enter some text', 'error');
|
||||
return false;
|
||||
|
|
@ -192,12 +165,12 @@ export class App {
|
|||
return;
|
||||
}
|
||||
|
||||
const text = this.elements.textInput.value.trim();
|
||||
const text = this.textEditor.getText().trim();
|
||||
const voice = this.voiceService.getSelectedVoiceString();
|
||||
const speed = this.playerState.getState().speed;
|
||||
|
||||
this.setGenerating(true);
|
||||
this.elements.downloadBtn.style.display = 'none';
|
||||
this.elements.downloadBtn.classList.remove('ready');
|
||||
|
||||
// Just reset progress bar, don't do full cleanup
|
||||
this.waveVisualizer.updateProgress(0, 1);
|
||||
|
|
|
|||
250
web/src/components/TextEditor.js
Normal file
250
web/src/components/TextEditor.js
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
export default class TextEditor {
|
||||
constructor(container, options = {}) {
|
||||
this.options = {
|
||||
charsPerPage: 500, // Default to 500 chars per page
|
||||
onTextChange: null,
|
||||
...options
|
||||
};
|
||||
|
||||
this.container = container;
|
||||
this.currentPage = 1;
|
||||
this.pages = [''];
|
||||
this.charCount = 0;
|
||||
this.fullText = '';
|
||||
this.isTyping = false;
|
||||
|
||||
this.setupDOM();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
setupDOM() {
|
||||
this.container.innerHTML = `
|
||||
<div class="text-editor">
|
||||
<div class="editor-view">
|
||||
<div class="page-navigation">
|
||||
<div class="pagination">
|
||||
<button class="prev-btn">← Previous</button>
|
||||
<span class="page-info">Page 1 of 1</span>
|
||||
<button class="next-btn">Next →</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
class="page-content"
|
||||
placeholder="Enter text to convert to speech..."
|
||||
></textarea>
|
||||
<div class="editor-footer">
|
||||
<div class="file-controls">
|
||||
<input type="file" class="file-input" accept=".txt" style="display: none;">
|
||||
<button class="upload-btn">Upload Text</button>
|
||||
<button class="clear-btn">Clear Text</button>
|
||||
</div>
|
||||
<div class="chars-per-page">
|
||||
<input
|
||||
type="number"
|
||||
class="chars-input"
|
||||
value="500"
|
||||
min="100"
|
||||
max="2000"
|
||||
title="Characters per page"
|
||||
>
|
||||
<span class="chars-label">chars/page</span>
|
||||
<button class="format-btn">Format Pages</button>
|
||||
</div>
|
||||
<div class="char-count">0 characters</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Cache DOM elements
|
||||
this.elements = {
|
||||
pageContent: this.container.querySelector('.page-content'),
|
||||
prevBtn: this.container.querySelector('.prev-btn'),
|
||||
nextBtn: this.container.querySelector('.next-btn'),
|
||||
pageInfo: this.container.querySelector('.page-info'),
|
||||
fileInput: this.container.querySelector('.file-input'),
|
||||
uploadBtn: this.container.querySelector('.upload-btn'),
|
||||
clearBtn: this.container.querySelector('.clear-btn'),
|
||||
charCount: this.container.querySelector('.char-count'),
|
||||
charsPerPage: this.container.querySelector('.chars-input'),
|
||||
formatBtn: this.container.querySelector('.format-btn')
|
||||
};
|
||||
|
||||
// Set initial chars per page value
|
||||
this.elements.charsPerPage.value = this.options.charsPerPage;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// Handle page content changes
|
||||
this.elements.pageContent.addEventListener('input', (e) => {
|
||||
const newContent = e.target.value;
|
||||
this.pages[this.currentPage - 1] = newContent;
|
||||
|
||||
// Only handle empty pages, otherwise just update the text
|
||||
if (!newContent.trim() && this.pages.length > 1) {
|
||||
// Remove the empty page and adjust
|
||||
this.pages.splice(this.currentPage - 1, 1);
|
||||
this.currentPage = Math.min(this.currentPage, this.pages.length);
|
||||
this.updatePageDisplay();
|
||||
}
|
||||
|
||||
// Update full text and char count
|
||||
this.fullText = this.pages.join('\n');
|
||||
this.updateCharCount();
|
||||
|
||||
if (this.options.onTextChange) {
|
||||
this.options.onTextChange(this.fullText);
|
||||
}
|
||||
});
|
||||
|
||||
// Navigation
|
||||
this.elements.prevBtn.addEventListener('click', () => {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.updatePageDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
if (this.currentPage < this.pages.length) {
|
||||
this.currentPage++;
|
||||
this.updatePageDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
// File upload
|
||||
this.elements.uploadBtn.addEventListener('click', () => {
|
||||
this.elements.fileInput.click();
|
||||
});
|
||||
|
||||
this.elements.fileInput.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.setText(e.target.result);
|
||||
if (this.options.onTextChange) {
|
||||
this.options.onTextChange(this.getText());
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear text
|
||||
this.elements.clearBtn.addEventListener('click', () => {
|
||||
this.clear();
|
||||
if (this.options.onTextChange) {
|
||||
this.options.onTextChange('');
|
||||
}
|
||||
});
|
||||
|
||||
// Cache format button
|
||||
this.elements.formatBtn = this.container.querySelector('.format-btn');
|
||||
|
||||
// Characters per page control - just update the value
|
||||
this.elements.charsPerPage.addEventListener('change', (e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
if (value >= 100 && value <= 2000) {
|
||||
this.options.charsPerPage = value;
|
||||
}
|
||||
});
|
||||
|
||||
// Format pages button - trigger the split
|
||||
this.elements.formatBtn.addEventListener('click', () => {
|
||||
const value = parseInt(this.elements.charsPerPage.value);
|
||||
if (value >= 100 && value <= 2000) {
|
||||
this.options.charsPerPage = value;
|
||||
this.splitIntoPages(this.fullText);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
splitIntoPages(text) {
|
||||
if (!text || !text.trim()) {
|
||||
this.pages = [''];
|
||||
this.fullText = '';
|
||||
this.currentPage = 1;
|
||||
this.updatePageDisplay();
|
||||
this.updateCharCount();
|
||||
return;
|
||||
}
|
||||
|
||||
this.fullText = text;
|
||||
const words = text.split(/\s+/);
|
||||
this.pages = [];
|
||||
let currentPage = '';
|
||||
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
const word = words[i];
|
||||
const potentialPage = currentPage + (currentPage ? ' ' : '') + word;
|
||||
|
||||
if (potentialPage.length >= this.options.charsPerPage && currentPage) {
|
||||
this.pages.push(currentPage);
|
||||
currentPage = word;
|
||||
} else {
|
||||
currentPage = potentialPage;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentPage) {
|
||||
this.pages.push(currentPage);
|
||||
}
|
||||
|
||||
if (this.pages.length === 0) {
|
||||
this.pages = [''];
|
||||
this.currentPage = 1;
|
||||
} else {
|
||||
// Keep current page in bounds
|
||||
this.currentPage = Math.min(this.currentPage, this.pages.length);
|
||||
}
|
||||
|
||||
this.updatePageDisplay();
|
||||
this.updateCharCount();
|
||||
}
|
||||
|
||||
setText(text) {
|
||||
// Just set the text without splitting into pages
|
||||
this.fullText = text;
|
||||
this.pages = [text];
|
||||
this.currentPage = 1;
|
||||
this.updatePageDisplay();
|
||||
this.updateCharCount();
|
||||
}
|
||||
|
||||
updatePageDisplay() {
|
||||
this.elements.pageContent.value = this.pages[this.currentPage - 1] || '';
|
||||
this.elements.pageInfo.textContent = `Page ${this.currentPage} of ${this.pages.length}`;
|
||||
|
||||
// Update button states
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === this.pages.length;
|
||||
}
|
||||
|
||||
updateCharCount() {
|
||||
const totalChars = this.fullText.length;
|
||||
this.elements.charCount.textContent = `${totalChars} characters`;
|
||||
}
|
||||
|
||||
prevPage() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.updatePageDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
nextPage() {
|
||||
if (this.currentPage < this.pages.length) {
|
||||
this.currentPage++;
|
||||
this.updatePageDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
getText() {
|
||||
return this.fullText;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.setText('');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,184 @@
|
|||
.textarea-container {
|
||||
position: relative;
|
||||
.text-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
font-family: var(--font-family);
|
||||
font-size: 1rem;
|
||||
resize: none;
|
||||
transition: border-color 0.2s ease;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.page-content:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.page-navigation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.page-navigation .pagination {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.page-navigation .pagination button {
|
||||
padding: 0.25rem 0.75rem;
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.chars-per-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.format-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-light);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: auto;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.format-btn:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: var(--fg-color);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chars-input {
|
||||
width: 70px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chars-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.chars-label {
|
||||
color: var(--text-light);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: var(--fg-color);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
color: var(--text-light);
|
||||
font-size: 0.875rem;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
color: var(--text-light);
|
||||
font-size: 0.875rem;
|
||||
min-width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.file-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.upload-btn,
|
||||
.clear-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-light);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: auto;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.upload-btn:hover,
|
||||
.clear-btn:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: var(--fg-color);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
|
|
@ -33,6 +210,7 @@
|
|||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
z-index: 1000;
|
||||
transition: visibility 0s linear 0.3s, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.help-icon:hover .tooltip-content {
|
||||
|
|
@ -41,10 +219,6 @@
|
|||
transition: visibility 0s linear 0.2s, opacity 0.3s ease 0.2s;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
transition: visibility 0s linear 0.3s, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tooltip-content h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--text);
|
||||
|
|
@ -63,47 +237,137 @@
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
textarea {
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 1.25rem;
|
||||
height: auto;
|
||||
min-height: calc(100vh - 3rem);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.text-editor,
|
||||
.controls,
|
||||
.player-container {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.generation-progress {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
padding: 1rem;
|
||||
height: 4px;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-radius: 2px;
|
||||
margin: 0.75rem 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.generation-progress::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
background: var(--fg-color);
|
||||
border-radius: 2px;
|
||||
animation: progress 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% {
|
||||
left: -30%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar styles */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.text-editor {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
height: calc(100vh - 14rem);
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
height: calc(100vh - 14rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s ease;
|
||||
font-family: var(--font-family);
|
||||
resize: none;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--fg-color);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
textarea::placeholder {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.text-controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.text-controls button {
|
||||
flex: 1;
|
||||
padding: 1.25rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.voice-select-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
height: auto;
|
||||
min-height: 120px;
|
||||
max-height: 200px;
|
||||
flex-shrink: 0;
|
||||
margin: 0.5rem 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.selected-voices {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.5rem;
|
||||
z-index: 1001;
|
||||
margin-top: 0.25rem;
|
||||
height: auto;
|
||||
min-height: 60px;
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
padding: 0.75rem;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 0.25rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
}
|
||||
|
||||
.voice-search {
|
||||
|
|
@ -136,12 +400,15 @@ textarea::placeholder {
|
|||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 200px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
z-index: 1002;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
|
||||
padding: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.voice-select-container:focus-within .voice-dropdown,
|
||||
|
|
@ -152,39 +419,34 @@ textarea::placeholder {
|
|||
.voice-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.2s ease;
|
||||
color: var(--text);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.voice-option:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.selected-voices {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.selected-voice-tag {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
padding: 0.25rem 0.4rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
font-size: 0.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
gap: 0.375rem;
|
||||
border: 1px solid rgba(99, 102, 241, 0.3);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.selected-voice-tag input {
|
||||
width: 3em;
|
||||
padding: 0.1rem 0.2rem;
|
||||
min-height: 1.5em;
|
||||
width: 2.5em;
|
||||
padding: 0.1rem;
|
||||
min-height: 1.25em;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
|
|
@ -303,8 +565,72 @@ textarea::placeholder {
|
|||
color: var(--text);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 0.75rem 1.25rem 1.5rem 1.25rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
height: auto;
|
||||
min-height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
margin: 1rem 0;
|
||||
align-self: start;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.options {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.generation-options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
margin-top: 0.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.generation-options label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-light);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -360,17 +686,4 @@ button:disabled {
|
|||
|
||||
.loading .btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
color: var(--text-light) !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: rgba(99, 102, 241, 0.1) !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
@ -7,11 +7,14 @@
|
|||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
height: calc(100vh - 6rem);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
|
|
@ -24,8 +27,9 @@ main {
|
|||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 8rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
|
|
@ -36,10 +40,25 @@ main {
|
|||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 8rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
background: var(--surface);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 1rem;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#upload-btn {
|
||||
|
|
@ -48,13 +67,45 @@ main {
|
|||
|
||||
@media (max-width: 850px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
min-height: calc(100vh - 6rem);
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.controls {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: sticky;
|
||||
bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.controls,
|
||||
.player-container {
|
||||
max-width: 100%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +1,22 @@
|
|||
.audio-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
position: relative;
|
||||
min-height: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(100px, 1fr) 160px 70px 32px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 40px;
|
||||
padding: 0 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
.seek-slider,
|
||||
|
|
@ -43,7 +31,8 @@
|
|||
}
|
||||
|
||||
.seek-slider {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
|
|
@ -85,15 +74,17 @@
|
|||
.volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 1px solid var(--border);
|
||||
border-left: 1px solid rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.volume-icon {
|
||||
color: var(--fg-color);
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.volume-icon:hover {
|
||||
|
|
@ -109,9 +100,11 @@
|
|||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
flex: 0 0 auto;
|
||||
min-width: 60px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.player-btn:hover {
|
||||
|
|
@ -121,23 +114,25 @@
|
|||
|
||||
.wave-container {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
min-width: 80px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-light);
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 1px solid rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
/* Progress bar styles */
|
||||
.generation-progress {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -146,7 +141,7 @@
|
|||
border: none;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-radius: 3px;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -178,15 +173,23 @@
|
|||
|
||||
.wave-container canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 200%;
|
||||
transform: translateY(-50%) scale(0.5);
|
||||
}
|
||||
|
||||
.download-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0.75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -195,6 +198,13 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.download-button.ready {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.download-glow {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,18 @@
|
|||
width: 6px;
|
||||
}
|
||||
|
||||
.input-section, .player-section {
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.controls,
|
||||
.player-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -58,38 +69,31 @@
|
|||
}
|
||||
|
||||
.player-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.player-controls {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: auto 1fr auto !important;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.player-btn {
|
||||
width: 100%;
|
||||
.seek-slider {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-left: 0;
|
||||
padding-top: 0.75rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.wave-container {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue