/* =========================================================== ligardi-tts-widget =========================================================== Universal floating audio player for any book on ligardi.ru. Theme-aware (reacts to data-theme="light|dark" on ). Auto-mounts when LigardiTTS.mount() is called or when is set. =========================================================== */ .ltts-fab, .ltts-bar, .ltts-bar * { box-sizing: border-box; font-family: 'IBM Plex Mono', system-ui, -apple-system, sans-serif; } /* ----- Floating play button (collapsed state) ----- */ .ltts-fab { position: fixed; top: 16px; top: max(16px, env(safe-area-inset-top, 16px)); right: 64px; /* sits left of .theme-toggle (right:18px, w:38px) */ z-index: 95; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ltts-rule, #2a3340); background: var(--ltts-bg, #161c25); color: var(--ltts-fg, #e8dcc4); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--ltts-shadow, 0 2px 8px rgba(0,0,0,0.18)); transition: transform .25s, border-color .25s, background .25s, color .25s; } .ltts-fab:hover { transform: rotate(-12deg); border-color: var(--ltts-accent, #d96b7a); color: var(--ltts-accent, #d96b7a); } .ltts-fab svg { width: 18px; height: 18px; } .ltts-fab.hidden { display: none; } /* Inline mode — when mounted inside a topbar slot */ .ltts-fab.ltts-fab--inline { position: static; top: auto; right: auto; bottom: auto; left: auto; width: 34px; height: 34px; box-shadow: none; display: inline-flex; vertical-align: middle; } .ltts-fab.ltts-fab--inline svg { width: 16px; height: 16px; } .ltts-fab.ltts-fab--inline:hover { transform: scale(1.08); } /* ----- Player bar (expanded state) ----- */ .ltts-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; max-width: 560px; margin: 0 auto; padding: 10px 12px; background: var(--ltts-bg, #161c25); border: 1px solid var(--ltts-rule, #2a3340); border-radius: 14px; box-shadow: 0 10px 38px rgba(0,0,0,0.42); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12px; color: var(--ltts-fg, #e8dcc4); letter-spacing: 0.02em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s; pointer-events: none; } .ltts-bar.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .ltts-bar.hidden { display: none; } .ltts-btn { border: 1px solid var(--ltts-rule, #2a3340); background: transparent; color: var(--ltts-fg, #e8dcc4); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s, background .2s; flex-shrink: 0; } .ltts-btn:hover { border-color: var(--ltts-accent, #d96b7a); color: var(--ltts-accent, #d96b7a); } .ltts-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .ltts-btn svg { width: 16px; height: 16px; } .ltts-btn.play { width: 44px; height: 44px; } .ltts-btn.play svg { width: 18px; height: 18px; } .ltts-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ltts-meta { min-width: 0; padding: 0 4px; } .ltts-status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ltts-mute, #a59885); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ltts-progress { height: 4px; background: var(--ltts-rule, #2a3340); border-radius: 2px; overflow: hidden; position: relative; } .ltts-progress-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, var(--ltts-bronze, #d4a85f), var(--ltts-accent, #d96b7a)); transition: width 120ms linear; } .ltts-progress-buffer { position: absolute; inset: 0; width: 0%; background: var(--ltts-rule-strong, #3a4555); opacity: 0.6; } .ltts-aux { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .ltts-aux select, .ltts-aux .ltts-speed { background: transparent; border: 1px solid var(--ltts-rule, #2a3340); color: var(--ltts-fg, #e8dcc4); font-family: inherit; font-size: 11px; padding: 5px 7px; border-radius: 6px; cursor: pointer; outline: none; } .ltts-aux select:hover, .ltts-aux .ltts-speed:hover { border-color: var(--ltts-accent, #d96b7a); } .ltts-speed { min-width: 44px; text-align: center; font-feature-settings: 'tnum'; } /* ----- Inline highlight of currently spoken paragraph ----- */ .ltts-current { background: var(--ltts-highlight, rgba(217, 107, 122, 0.08)); border-left: 2px solid var(--ltts-accent, #d96b7a); padding-left: 12px; margin-left: -14px; transition: background .25s, border-color .25s; } /* ----- Mobile ----- */ @media (max-width: 600px) { .ltts-fab { width: 34px; height: 34px; top: 9px; top: max(9px, env(safe-area-inset-top, 9px)); right: 52px; /* left of .theme-toggle on mobile (right:9px, w:34px) */ } .ltts-fab svg { width: 16px; height: 16px; } .ltts-bar { left: 8px; right: 8px; bottom: 8px; bottom: max(8px, env(safe-area-inset-bottom, 8px)); border-radius: 12px; padding: 8px; font-size: 11px; } .ltts-btn { width: 34px; height: 34px; } .ltts-btn svg { width: 14px; height: 14px; } .ltts-btn.play { width: 40px; height: 40px; } .ltts-aux select { font-size: 10px; padding: 4px 6px; } .ltts-speed { font-size: 10px; min-width: 38px; padding: 4px 6px; } .ltts-status { font-size: 9px; } } @media (max-width: 380px) { .ltts-aux .ltts-voice-select { display: none; } } /* ----- Light theme overrides ----- */ [data-theme="light"] { --ltts-bg: #faf6ec; --ltts-fg: #1c1c1c; --ltts-mute: #6a6256; --ltts-rule: #d4c8b0; --ltts-rule-strong: #b8a98a; --ltts-accent: #6b1e2a; --ltts-bronze: #8a6a3c; --ltts-highlight: rgba(107, 30, 42, 0.06); } /* Dark — provided by browser default OR by [data-theme="dark"] explicit */ [data-theme="dark"], :root:not([data-theme]) { --ltts-bg: #161c25; --ltts-fg: #e8dcc4; --ltts-mute: #a59885; --ltts-rule: #2a3340; --ltts-rule-strong: #3a4555; --ltts-accent: #d96b7a; --ltts-bronze: #d4a85f; --ltts-highlight: rgba(217, 107, 122, 0.10); } @media (prefers-reduced-motion: reduce) { .ltts-fab, .ltts-bar, .ltts-progress-fill { transition: none; } }