Perplexity-tts/content.css at main · sena-labs/Perplexity-tts · GitHub

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
/* Perplexity TTS — injected UI (play button, mini-player, toast).
   Indigo accent to match the extension; tuned for both Perplexity themes. */

/* ─── Play Button ─────────────────────────────────────────────────────────── */
.ptts-play-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
  margin-right: 6px; vertical-align: middle; user-select: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ptts-play-btn:hover:not(:disabled) { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.75); }
.ptts-play-btn:active:not(:disabled) { transform: scale(0.96); }
.ptts-play-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ptts-play-btn[data-state="playing"] { background: rgba(99, 102, 241, 0.20); border-color: #4f46e5; color: #4338ca; }
.ptts-play-btn[data-state="loading"] { background: rgba(99, 102, 241, 0.06); }

.ptts-icon { font-size: 11px; line-height: 1; }
.ptts-label { font-size: 12px; }

/* ─── Button Wrapper (fallback injection) ─────────────────────────────────── */
.ptts-btn-wrapper { display: flex; align-items: center; margin-bottom: 8px; }

/* ─── Mini Player ─────────────────────────────────────────────────────────── */
#ptts-mini-player {
  position: fixed; bottom: 20px; right: 20px; z-index: 2147483647;
  display: flex; align-items: center;
  background: #15171d; border: 1px solid rgba(99, 102, 241, 0.55);
  border-radius: 13px; padding: 11px 15px;
  box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.7);
  min-width: 224px; max-width: 280px;
  font-family: system-ui, -apple-system, sans-serif;
  animation: ptts-slide-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ptts-slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.ptts-player-inner { display: flex; align-items: center; gap: 11px; width: 100%; }
.ptts-player-label { font-size: 11px; font-weight: 700; color: #a5b4fc; white-space: nowrap; letter-spacing: 0.03em; }
.ptts-player-progress-wrap { flex: 1; }
.ptts-player-progress-bar { height: 3px; background: rgba(99, 102, 241, 0.22); border-radius: 999px; overflow: hidden; }
.ptts-player-progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 999px; width: 0%; transition: width 0.3s linear; }
.ptts-ctrl-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 3px 5px; border-radius: 6px; color: #a5b4fc; line-height: 1; transition: color 0.15s, background 0.15s; }
.ptts-ctrl-btn:hover { color: #fff; background: rgba(99, 102, 241, 0.28); }

/* ─── Error Toast ─────────────────────────────────────────────────────────── */
.ptts-toast {
  position: fixed; bottom: 84px; right: 20px; z-index: 2147483647;
  padding: 11px 16px; border-radius: 11px; font-size: 13px; max-width: 340px;
  font-family: system-ui, -apple-system, sans-serif;
  box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.7);
  animation: ptts-slide-in 0.22s ease-out;
}
.ptts-toast-error { background: #2a1416; border: 1px solid #f87171; color: #fecaca; }

/* ─── Dark Perplexity theme: brighten the injected pill ───────────────────── */
@media (prefers-color-scheme: dark) {
  .ptts-play-btn { color: #818cf8; border-color: rgba(129, 140, 248, 0.55); }
  .ptts-play-btn[data-state="playing"] { color: #a5b4fc; }
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #ptts-mini-player, .ptts-toast { animation: none; }
  .ptts-play-btn, .ptts-player-progress-fill { transition: none; }
}