Hugging Face's logo

Spaces:
bitsnaps
/
TranStudio
Paused

App Files Community
bitsnaps commited on
Commit
a13449b
·
verified ·
1 Parent(s): cf71139

Upload style.css

Browse files
Files changed (1) hide show
  1. static/css/style.css +165 -0
static/css/style.css ADDED
@@ -0,0 +1,165 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .segments-container {
2
+ max-height: 300px;
3
+ overflow-y: auto;
4
+ border: 1px solid #ddd;
5
+ padding: 10px;
6
+ border-radius: 4px;
7
+ }
8
+
9
+ .segment-box {
10
+ padding: 10px;
11
+ margin: 5px 0;
12
+ border: 1px solid #eee;
13
+ border-radius: 4px;
14
+ cursor: pointer;
15
+ transition: all 0.2s;
16
+ }
17
+
18
+ .segment-box:hover {
19
+ background-color: #f5f5f5;
20
+ }
21
+
22
+ .segment-box.is-active {
23
+ border-color: #3273dc;
24
+ background-color: #e8f0fe;
25
+ }
26
+
27
+ .segment-time {
28
+ font-size: 0.8em;
29
+ color: #666;
30
+ margin-bottom: 5px;
31
+ }
32
+
33
+ .segment-text {
34
+ margin: 5px 0;
35
+ }
36
+
37
+ .segment-actions {
38
+ text-align: right;
39
+ }
40
+ .audio-player {
41
+ position: fixed;
42
+ bottom: 0;
43
+ left: 0;
44
+ right: 0;
45
+ background: white;
46
+ padding: 1rem;
47
+ box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
48
+ z-index: 100;
49
+ margin-top: 2rem;
50
+ }
51
+
52
+ .waveform-container {
53
+ margin: 1rem 0;
54
+ padding: 0 1rem;
55
+ }
56
+
57
+ .waveform {
58
+ position: relative;
59
+ height: 10vh;
60
+ background: #f0f0f0;
61
+ border-radius: 4px;
62
+ overflow: hidden;
63
+ }
64
+
65
+ .progress-waveform {
66
+ position: absolute;
67
+ top: 0;
68
+ left: 0;
69
+ height: 100%;
70
+ background: rgba(50, 115, 220, 0.3);
71
+ pointer-events: none;
72
+ }
73
+
74
+ .player-controls {
75
+ display: flex;
76
+ align-items: center;
77
+ gap: 0.5rem;
78
+ margin-bottom: 0.5rem;
79
+ }
80
+
81
+ .segment-marker {
82
+ position: absolute;
83
+ height: 100%;
84
+ background: rgba(50, 115, 220, 0.2);
85
+ cursor: pointer;
86
+ transition: background 0.2s;
87
+ border-left: 1px solid #3273dc;
88
+ border-right: 1px solid #3273dc;
89
+ }
90
+
91
+ .segment-marker:hover {
92
+ background: rgba(50, 115, 220, 0.4);
93
+ }
94
+
95
+ .segment-tooltip {
96
+ position: absolute;
97
+ bottom: 100%;
98
+ background: #333;
99
+ color: white;
100
+ padding: 0.25rem 0.5rem;
101
+ border-radius: 3px;
102
+ font-size: 0.8rem;
103
+ white-space: nowrap;
104
+ display: none;
105
+ }
106
+
107
+ .segment-marker:hover .segment-tooltip {
108
+ display: block;
109
+ }
110
+
111
+ .current-time {
112
+ text-align: center;
113
+ font-size: 0.9rem;
114
+ color: #666;
115
+ margin-top: 0.5rem;
116
+ }
117
+ .control-btn {
118
+ /* padding: 0.5rem; */
119
+ transition: all 0.2s;
120
+ }
121
+
122
+ .control-btn:hover {
123
+ transform: scale(1.1);
124
+ }
125
+ .selection-info {
126
+ margin: 10px 0;
127
+ display: flex;
128
+ align-items: center;
129
+ }
130
+
131
+ .slider-tick {
132
+ width: 2px;
133
+ height: 12px;
134
+ background-color: currentColor;
135
+ border-radius: 1px;
136
+ }
137
+
138
+ /* Customize the range slider track */
139
+ .b-slider.is-info .b-slider-track {
140
+ background: rgba(50, 115, 220, 0.3);
141
+ }
142
+
143
+ /* Style for the selected range */
144
+ .b-slider.is-info .b-slider-fill {
145
+ background: #3273dc;
146
+ }
147
+ .navbar-end {
148
+ margin-top: 10vh;
149
+ }
150
+
151
+ .upload-stats {
152
+ font-size: 0.9rem;
153
+ color: #4a4a4a;
154
+ margin-top: 1rem;
155
+ }
156
+
157
+ .upload-stats p {
158
+ margin-bottom: 0.5rem;
159
+ display: flex;
160
+ align-items: center;
161
+ }
162
+
163
+ .upload-stats .icon {
164
+ margin-right: 0.5rem;
165
+ }