Hugging Face's logo

Spaces:
bep40
/
vai-market
Running

App Files Community
bep40 commited on
Commit
4640aaa
·
verified ·
1 Parent(s): d224048

Add BIG SALE CSS styles file

Browse files
Files changed (1) hide show
  1. big_sale.css +229 -0
big_sale.css ADDED
@@ -0,0 +1,229 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* BIG SALE Floating Promotion Styles for V.AI AVATAR2 */
2
+ /* Space: bep40/vai-avatar2 */
3
+
4
+ /* Floating button */
5
+ .big-sale-floating {
6
+ position: fixed;
7
+ bottom: 100px;
8
+ right: 24px;
9
+ z-index: 200;
10
+ background: linear-gradient(135deg, #ff6b35, #fec137);
11
+ border-radius: 50px;
12
+ padding: 12px 24px;
13
+ box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
14
+ color: white;
15
+ font-family: 'Inter', sans-serif;
16
+ animation: bigSaleFloat 3s ease-in-out infinite;
17
+ display: flex;
18
+ align-items: center;
19
+ gap: 12px;
20
+ backdrop-filter: blur(10px);
21
+ border: 2px solid rgba(255, 255, 255, 0.3);
22
+ }
23
+
24
+ .big-sale-floating:hover {
25
+ transform: translateY(-4px) scale(1.05) !important;
26
+ box-shadow: 0 12px 35px rgba(255, 107, 53, 0.5);
27
+ }
28
+
29
+ @keyframes bigSaleFloat {
30
+ 0%, 100% { transform: translateY(0px); }
31
+ 50% { transform: translateY(-10px); }
32
+ }
33
+
34
+ .big-sale-badge {
35
+ background: rgba(255, 255, 255, 0.2);
36
+ border-radius: 20px;
37
+ padding: 4px 12px;
38
+ font-size: 0.7rem;
39
+ font-weight: 700;
40
+ text-transform: uppercase;
41
+ letter-spacing: 1px;
42
+ }
43
+
44
+ .big-sale-title {
45
+ font-size: 0.85rem;
46
+ font-weight: 600;
47
+ margin: 0;
48
+ }
49
+
50
+ .big-sale-count {
51
+ font-size: 0.7rem;
52
+ opacity: 0.9;
53
+ margin-left: 4px;
54
+ }
55
+
56
+ /* Sale panel */
57
+ .big-sale-panel {
58
+ position: fixed;
59
+ bottom: 180px;
60
+ right: 24px;
61
+ width: 350px;
62
+ max-height: 400px;
63
+ background: #fff;
64
+ border-radius: 20px;
65
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
66
+ z-index: 199;
67
+ overflow: hidden;
68
+ opacity: 0;
69
+ visibility: hidden;
70
+ transform: translateY(20px);
71
+ transition: all 0.3s ease;
72
+ border: 1px solid #e2e8f0;
73
+ }
74
+
75
+ .big-sale-panel.open {
76
+ opacity: 1;
77
+ visibility: visible;
78
+ transform: translateY(0);
79
+ }
80
+
81
+ .big-sale-header {
82
+ background: linear-gradient(135deg, #ff6b35, #fec137);
83
+ color: white;
84
+ padding: 16px 20px;
85
+ display: flex;
86
+ justify-content: space-between;
87
+ align-items: center;
88
+ }
89
+
90
+ .big-sale-header h3 {
91
+ font-size: 1.1rem;
92
+ font-weight: 700;
93
+ margin: 0;
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 8px;
97
+ }
98
+
99
+ .big-sale-close {
100
+ width: 32px;
101
+ height: 32px;
102
+ border: none;
103
+ background: rgba(255, 255, 255, 0.2);
104
+ color: white;
105
+ border-radius: 50%;
106
+ cursor: pointer;
107
+ font-size: 1.2rem;
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ transition: background 0.2s;
112
+ }
113
+
114
+ .big-sale-close:hover {
115
+ background: rgba(255, 255, 255, 0.3);
116
+ }
117
+
118
+ /* Products list */
119
+ .big-sale-products {
120
+ padding: 12px;
121
+ max-height: 300px;
122
+ overflow-y: auto;
123
+ }
124
+
125
+ .big-sale-product {
126
+ display: flex;
127
+ align-items: center;
128
+ gap: 12px;
129
+ padding: 10px 12px;
130
+ border-bottom: 1px solid #f1f5f9;
131
+ cursor: pointer;
132
+ transition: background 0.2s;
133
+ }
134
+
135
+ .big-sale-product:last-child {
136
+ border-bottom: none;
137
+ }
138
+
139
+ .big-sale-product:hover {
140
+ background: #f8fafc;
141
+ }
142
+
143
+ .big-sale-product-info {
144
+ flex: 1;
145
+ min-width: 0;
146
+ }
147
+
148
+ .big-sale-product-name {
149
+ font-size: 0.8rem;
150
+ font-weight: 600;
151
+ color: #1e293b;
152
+ overflow: hidden;
153
+ text-overflow: ellipsis;
154
+ white-space: nowrap;
155
+ }
156
+
157
+ .big-sale-product-code {
158
+ font-size: 0.65rem;
159
+ color: #64748b;
160
+ font-family: monospace;
161
+ }
162
+
163
+ .big-sale-product-meta {
164
+ font-size: 0.65rem;
165
+ color: #64748b;
166
+ margin-top: 2px;
167
+ }
168
+
169
+ .big-sale-product-price-container {
170
+ flex-shrink: 0;
171
+ text-align: right;
172
+ }
173
+
174
+ .big-sale-product-price {
175
+ font-size: 0.75rem;
176
+ color: #003f62;
177
+ font-weight: 700;
178
+ }
179
+
180
+ .big-sale-product-bigprice {
181
+ text-decoration: line-through;
182
+ font-size: 0.65rem;
183
+ color: #64748b;
184
+ margin-right: 8px;
185
+ }
186
+
187
+ .big-sale-product-discount {
188
+ background: #fff1f2;
189
+ color: #dc2626;
190
+ padding: 2px 8px;
191
+ border-radius: 10px;
192
+ font-size: 0.65rem;
193
+ font-weight: 600;
194
+ margin-left: 8px;
195
+ display: inline-block;
196
+ }
197
+
198
+ .big-sale-status {
199
+ background: #dcfce7;
200
+ color: #166534;
201
+ padding: 1px 8px;
202
+ border-radius: 8px;
203
+ font-size: 0.65rem;
204
+ font-weight: 600;
205
+ margin-left: 4px;
206
+ }
207
+
208
+ /* New badge */
209
+ .big-sale-new-badge {
210
+ background: #fef3c7;
211
+ color: #92400e;
212
+ padding: 1px 8px;
213
+ border-radius: 8px;
214
+ font-size: 0.65rem;
215
+ font-weight: 600;
216
+ margin-left: 4px;
217
+ }
218
+
219
+ /* Responsive */
220
+ @media (max-width: 480px) {
221
+ .big-sale-panel {
222
+ width: 300px;
223
+ bottom: 160px;
224
+ }
225
+ .big-sale-floating {
226
+ bottom: 120px;
227
+ right: 16px;
228
+ }
229
+ }