forked from
me.webbeef.org/browser.html
Rewild Your Web
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:host {
4 display: block;
5 font-family: var(--font-family-base);
6}
7
8:host(:not([has-media])) {
9 display: none;
10}
11
12.panel {
13 padding: var(--spacing-md);
14}
15
16/* Mobile notification sheet: hide when no media */
17:host(.inline:not([has-media])) {
18 display: none;
19}
20
21.media-device {
22 font-size: var(--font-size-xs);
23 color: var(--color-text-tertiary);
24 margin-bottom: var(--spacing-xs);
25}
26
27.media-info {
28 margin-bottom: var(--spacing-xs);
29 overflow: hidden;
30}
31
32.media-title {
33 font-size: var(--font-size-menu);
34 font-weight: var(--font-weight-bold);
35 color: var(--color-text);
36 white-space: nowrap;
37 overflow: hidden;
38 text-overflow: ellipsis;
39}
40
41.media-artist {
42 font-size: var(--font-size-sm);
43 color: var(--color-text-secondary);
44 white-space: nowrap;
45 overflow: hidden;
46 text-overflow: ellipsis;
47}
48
49.media-buttons {
50 display: flex;
51 align-items: center;
52 justify-content: center;
53 gap: var(--spacing-sm);
54}
55
56.media-btn {
57 background: none;
58 border: none;
59 color: var(--color-text);
60 cursor: pointer;
61 padding: var(--spacing-xs);
62 border-radius: var(--radius-sm);
63 display: flex;
64 align-items: center;
65 justify-content: center;
66}
67
68.media-btn:hover {
69 background: var(--bg-hover);
70}
71
72.play-btn lucide-icon {
73 font-size: larger;
74}
75
76.media-progress {
77 display: flex;
78 align-items: center;
79 gap: var(--spacing-xs);
80 margin-top: var(--spacing-xs);
81}
82
83.media-time {
84 font-size: var(--font-size-xs);
85 color: var(--color-text-tertiary);
86 min-width: 3em;
87 text-align: center;
88}
89
90.media-progress-bar {
91 flex: 1;
92 height: 4px;
93 background: var(--color-border);
94 border-radius: 2px;
95 overflow: hidden;
96}
97
98.media-progress-fill {
99 height: 100%;
100 background: var(--color-primary);
101 border-radius: 2px;
102}