Hugging Face's logo

Spaces:
akhaliq
/
whisper-tiny-anycoder
Running

App Files Community
akhaliq HF Staff commited on
Commit
6e4c2c6
·
verified ·
1 Parent(s): bb1fe7d

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +113 -50
style.css CHANGED
@@ -1,76 +1,139 @@
 
1
  * {
2
- box-sizing: border-box;
3
- padding: 0;
4
- margin: 0;
5
- font-family: sans-serif;
6
  }
7
 
8
- html,
9
  body {
10
- height: 100%;
 
 
 
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- align-items: center;
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
 
 
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
 
 
 
 
 
 
 
 
 
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
 
 
 
 
 
 
44
  }
45
 
46
- #upload {
47
- display: none;
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
 
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
 
 
 
 
68
  }
69
 
70
- .bounding-box-label {
71
- color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
1
+ /* style.css */
2
  * {
3
+ box-sizing: border-box;
 
 
 
4
  }
5
 
 
6
  body {
7
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
8
+ background-color: #f7f9fc;
9
+ color: #333;
10
+ line-height: 1.6;
11
+ margin: 0;
12
+ padding: 0;
13
  }
14
 
15
+ .container {
16
+ max-width: 900px;
17
+ margin: 2rem auto;
18
+ padding: 2rem;
19
+ background-color: white;
20
+ border-radius: 12px;
21
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
22
  }
23
 
24
+ h1 {
25
+ text-align: center;
26
+ color: #2c3e50;
27
+ margin-bottom: 1rem;
 
 
28
  }
29
 
30
+ p {
31
+ text-align: center;
32
+ color: #7f8c8d;
33
+ margin-bottom: 2rem;
34
+ }
35
 
36
+ .input-section,
37
+ .options-section,
38
+ .player-section,
39
+ .output-section {
40
+ margin-bottom: 1.8rem;
41
+ }
42
 
43
+ label {
44
+ display: block;
45
+ margin-bottom: 0.6rem;
46
+ font-weight: 600;
47
+ color: #2c3e50;
48
+ }
49
+
50
+ #audioInput {
51
+ width: 100%;
52
+ padding: 0.6rem;
53
+ border: 1px solid #bdc3c7;
54
+ border-radius: 8px;
55
+ font-size: 1rem;
56
+ }
57
 
58
+ #useSample {
59
+ margin-top: 0.8rem;
60
+ padding: 0.6rem 1rem;
61
+ background-color: #3498db;
62
+ color: white;
63
+ border: none;
64
+ border-radius: 8px;
65
+ cursor: pointer;
66
+ font-size: 0.95rem;
67
+ transition: background-color 0.2s;
68
  }
69
 
70
+ #useSample:hover {
71
+ background-color: #2980b9;
72
  }
73
 
74
+ .options {
75
+ display: flex;
76
+ gap: 1rem;
77
+ flex-wrap: wrap;
78
  }
79
 
80
+ .options label {
81
+ font-weight: normal;
82
+ display: flex;
83
+ align-items: center;
84
+ font-size: 0.95rem;
85
  }
86
 
87
+ .player-section audio {
88
+ width: 100%;
89
  }
90
 
91
+ #status {
92
+ margin-bottom: 1rem;
93
+ padding: 0.8rem;
94
+ background-color: #f1f1f1;
95
+ border-radius: 8px;
96
+ font-size: 0.95rem;
97
+ color: #555;
98
+ text-align: center;
99
  }
100
 
101
+ .output-section h2 {
102
+ margin-bottom: 0.8rem;
103
+ color: #2c3e50;
104
+ font-size: 1.2rem;
105
+ }
106
+
107
+ #output {
108
+ background-color: #2c3e50;
109
+ color: #ecf0f1;
110
+ padding: 1.2rem;
111
+ border-radius: 8px;
112
+ font-family: 'Courier New', Courier, monospace;
113
+ font-size: 0.9rem;
114
+ max-height: 400px;
115
+ overflow-y: auto;
116
+ white-space: pre-wrap;
117
+ }
118
+
119
+ /* Responsive */
120
+ @media (max-width: 600px) {
121
+ .container {
122
+ padding: 1.2rem;
123
+ margin: 1rem;
124
+ border-radius: 8px;
125
+ }
126
+
127
+ h1 {
128
+ font-size: 1.5rem;
129
+ }
130
+
131
+ .options {
132
+ flex-direction: column;
133
+ gap: 0.5rem;
134
+ }
135
+
136
+ #useSample {
137
+ font-size: 0.9rem;
138
+ }
139
  }