Hugging Face's logo

Spaces:
triflix
/
uploader
Running

App Files Community
triflix commited on
Commit
80bc627
·
verified ·
1 Parent(s): ff0ea13

Create app/static/style.css

Browse files
Files changed (1) hide show
  1. app/static/style.css +176 -0
app/static/style.css ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* app/static/style.css */
2
+ :root {
3
+ --bg-color: #121212;
4
+ --card-bg: #1e1e1e;
5
+ --primary-color: #007bff;
6
+ --primary-hover: #0056b3;
7
+ --text-color: #e0e0e0;
8
+ --text-muted: #888;
9
+ --border-color: #333;
10
+ --success-color: #28a745;
11
+ --error-color: #dc3545;
12
+ }
13
+
14
+ * {
15
+ box-sizing: border-box;
16
+ margin: 0;
17
+ padding: 0;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Inter', sans-serif;
22
+ background-color: var(--bg-color);
23
+ color: var(--text-color);
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ min-height: 100vh;
28
+ padding: 1rem;
29
+ }
30
+
31
+ .container {
32
+ width: 100%;
33
+ max-width: 500px;
34
+ text-align: center;
35
+ }
36
+
37
+ header {
38
+ margin-bottom: 2rem;
39
+ }
40
+
41
+ header h1 {
42
+ font-size: 2.5rem;
43
+ font-weight: 600;
44
+ margin-bottom: 0.5rem;
45
+ }
46
+
47
+ header p {
48
+ color: var(--text-muted);
49
+ font-size: 1.1rem;
50
+ }
51
+
52
+ .card {
53
+ background-color: var(--card-bg);
54
+ border: 1px solid var(--border-color);
55
+ border-radius: 12px;
56
+ padding: 2rem;
57
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .uploader-state {
62
+ display: none;
63
+ flex-direction: column;
64
+ align-items: center;
65
+ gap: 1.5rem;
66
+ animation: fadeIn 0.5s ease;
67
+ }
68
+
69
+ .uploader-state.active {
70
+ display: flex;
71
+ }
72
+
73
+ @keyframes fadeIn {
74
+ from { opacity: 0; transform: translateY(10px); }
75
+ to { opacity: 1; transform: translateY(0); }
76
+ }
77
+
78
+ .drop-zone {
79
+ width: 100%;
80
+ border: 2px dashed var(--border-color);
81
+ border-radius: 8px;
82
+ padding: 2.5rem;
83
+ display: flex;
84
+ flex-direction: column;
85
+ align-items: center;
86
+ justify-content: center;
87
+ gap: 1rem;
88
+ transition: background-color 0.2s ease, border-color 0.2s ease;
89
+ }
90
+
91
+ .drop-zone.drag-over {
92
+ background-color: rgba(0, 123, 255, 0.1);
93
+ border-color: var(--primary-color);
94
+ }
95
+
96
+ .icon {
97
+ width: 50px;
98
+ height: 50px;
99
+ color: var(--primary-color);
100
+ }
101
+ .icon.success { color: var(--success-color); }
102
+ .icon.error { color: var(--error-color); }
103
+
104
+ .btn {
105
+ background-color: var(--primary-color);
106
+ color: white;
107
+ border: none;
108
+ padding: 0.75rem 1.5rem;
109
+ border-radius: 6px;
110
+ font-size: 1rem;
111
+ font-weight: 500;
112
+ cursor: pointer;
113
+ transition: background-color 0.2s ease, transform 0.1s ease;
114
+ text-decoration: none;
115
+ display: inline-block;
116
+ }
117
+
118
+ .btn:hover {
119
+ background-color: var(--primary-hover);
120
+ }
121
+ .btn:active {
122
+ transform: scale(0.98);
123
+ }
124
+
125
+ .btn-secondary {
126
+ background-color: transparent;
127
+ color: var(--text-color);
128
+ border: 1px solid var(--border-color);
129
+ }
130
+ .btn-secondary:hover {
131
+ background-color: var(--border-color);
132
+ }
133
+
134
+ .file-info {
135
+ font-size: 1.1rem;
136
+ word-break: break-all;
137
+ }
138
+
139
+ .progress-bar-container {
140
+ width: 100%;
141
+ height: 12px;
142
+ background-color: var(--border-color);
143
+ border-radius: 6px;
144
+ overflow: hidden;
145
+ }
146
+
147
+ .progress-bar {
148
+ width: 0%;
149
+ height: 100%;
150
+ background-color: var(--primary-color);
151
+ border-radius: 6px;
152
+ transition: width 0.3s ease-out;
153
+ }
154
+
155
+ .status-text {
156
+ color: var(--text-muted);
157
+ }
158
+ .subtle-text {
159
+ font-size: 0.9rem;
160
+ color: #666;
161
+ }
162
+
163
+ /* Spinner */
164
+ .spinner {
165
+ border: 4px solid var(--border-color);
166
+ border-top: 4px solid var(--primary-color);
167
+ border-radius: 50%;
168
+ width: 40px;
169
+ height: 40px;
170
+ animation: spin 1s linear infinite;
171
+ }
172
+
173
+ @keyframes spin {
174
+ 0% { transform: rotate(0deg); }
175
+ 100% { transform: rotate(360deg); }
176
+ }