optimized-react-component-library-xyz123 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -3
- package/src/css/styles.css +591 -588
- package/src/css/global.css +0 -1126
package/src/css/styles.css
CHANGED
|
@@ -1,178 +1,181 @@
|
|
|
1
|
+
/* Globala stilar för alla komponenter */
|
|
2
|
+
@import url('https://assets.soracom.io/fonts/aeonik/Aeonik.css');
|
|
3
|
+
|
|
1
4
|
/* ---------- GENERAL ---------- */
|
|
2
5
|
|
|
3
6
|
html {
|
|
4
|
-
|
|
7
|
+
font-size: 62.5%; /* 1rem = 10px */
|
|
5
8
|
}
|
|
6
9
|
|
|
7
10
|
body {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
margin: 0;
|
|
12
|
+
font-family: Arial;
|
|
13
|
+
font-size: 1.6rem;
|
|
14
|
+
font-weight: 400;
|
|
15
|
+
background-color: #dddddd;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
min-height: 100vh;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
body a {
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
text-decoration: underline;
|
|
23
|
+
text-underline-offset: 0.3rem;
|
|
21
24
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
color: #6e3282;
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
body a:hover {
|
|
28
|
-
|
|
31
|
+
text-decoration: underline 0.2rem;
|
|
29
32
|
}
|
|
30
33
|
|
|
31
34
|
h1,
|
|
32
35
|
h2,
|
|
33
36
|
h3 {
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
margin: 0;
|
|
38
|
+
margin-bottom: 3.6rem;
|
|
36
39
|
}
|
|
37
40
|
|
|
38
41
|
h1 {
|
|
39
|
-
|
|
42
|
+
font-size: 2.4rem;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
h2 {
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
font-size: 2rem;
|
|
47
|
+
width: 100%;
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
h3 {
|
|
48
|
-
|
|
51
|
+
font-size: 1.6rem;
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
h4 {
|
|
52
|
-
|
|
53
|
-
|
|
55
|
+
margin: 0;
|
|
56
|
+
font-size: 1.6rem;
|
|
54
57
|
}
|
|
55
58
|
|
|
56
59
|
#main-content {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
padding-top: 3.6rem;
|
|
61
|
+
padding-bottom: 6.4rem;
|
|
62
|
+
max-width: 860px;
|
|
63
|
+
margin-left: auto;
|
|
64
|
+
margin-right: auto;
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
section {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
background-color: #ffffff;
|
|
71
|
+
padding: 3.6rem;
|
|
72
|
+
margin-bottom: 1.6rem;
|
|
73
|
+
border-radius: 0.4rem;
|
|
74
|
+
margin-left: 0.8rem;
|
|
75
|
+
margin-right: 0.8rem;
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
.pts-first-category-section {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
+
padding-top: 0;
|
|
80
|
+
border-top-left-radius: 0;
|
|
81
|
+
border-top-right-radius: 0;
|
|
79
82
|
}
|
|
80
83
|
|
|
81
84
|
.pts-form-step-header {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
background-color: #ffffff;
|
|
88
|
+
padding: 3.6rem;
|
|
89
|
+
margin-bottom: 0;
|
|
90
|
+
border-radius: 0.4rem;
|
|
91
|
+
margin-left: 0.8rem;
|
|
92
|
+
margin-right: 0.8rem;
|
|
93
|
+
padding-bottom: 0;
|
|
94
|
+
border-bottom-left-radius: 0;
|
|
95
|
+
border-bottom-right-radius: 0;
|
|
93
96
|
}
|
|
94
97
|
|
|
95
98
|
.pts-form-step-header p {
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
margin: 0px;
|
|
100
|
+
margin-bottom: 36px;
|
|
98
101
|
}
|
|
99
102
|
|
|
100
103
|
fieldset {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
+
border: none;
|
|
105
|
+
padding: 0;
|
|
106
|
+
margin: 0;
|
|
104
107
|
}
|
|
105
108
|
|
|
106
109
|
.pts-root-question {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
margin-bottom: 1.6rem;
|
|
113
|
+
max-width: 624px;
|
|
111
114
|
}
|
|
112
115
|
|
|
113
116
|
.pts-root-categoryDescription,
|
|
114
117
|
.pts-root-stepDescription {
|
|
115
|
-
|
|
118
|
+
margin-bottom: 3.6rem;
|
|
116
119
|
}
|
|
117
120
|
|
|
118
121
|
.pts-root-question legend,
|
|
119
122
|
.pts-root-question label,
|
|
120
123
|
.pts-radio-option {
|
|
121
|
-
|
|
124
|
+
margin-bottom: 0.8rem;
|
|
122
125
|
}
|
|
123
126
|
|
|
124
127
|
.pts-root-about {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
128
|
+
font-size: 1.4rem;
|
|
129
|
+
color: #545454;
|
|
130
|
+
margin: 0;
|
|
131
|
+
margin-bottom: 0.4rem;
|
|
129
132
|
}
|
|
130
133
|
|
|
131
134
|
.pts-root-question input[type='text']:focus,
|
|
132
135
|
.pts-root-question input[type='email']:focus,
|
|
133
136
|
.pts-root-question input[type='tel']:focus {
|
|
134
|
-
|
|
137
|
+
border: 0.2rem solid #6e3282;
|
|
135
138
|
}
|
|
136
139
|
|
|
137
140
|
.pts-root-error {
|
|
138
|
-
|
|
139
|
-
|
|
141
|
+
display: flex;
|
|
142
|
+
margin-top: 0.4rem;
|
|
140
143
|
}
|
|
141
144
|
|
|
142
145
|
.errorDot {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
146
|
+
display: flex;
|
|
147
|
+
font-size: 1.6rem;
|
|
148
|
+
font-weight: 700;
|
|
149
|
+
width: 1.8rem;
|
|
150
|
+
height: 1.8rem;
|
|
151
|
+
border-radius: 1rem;
|
|
152
|
+
justify-content: center;
|
|
153
|
+
color: #ffffff;
|
|
154
|
+
background-color: #8e0039;
|
|
155
|
+
margin-right: 9px;
|
|
153
156
|
}
|
|
154
157
|
|
|
155
158
|
.errorText,
|
|
156
159
|
.pts-root-mandatoryAsterisk {
|
|
157
|
-
|
|
160
|
+
color: #8e0039;
|
|
158
161
|
}
|
|
159
162
|
|
|
160
163
|
.pts-root-question-input-error-border,
|
|
161
164
|
.pts-root-question-input-error-border,
|
|
162
165
|
.pts-root-question-input-error-border {
|
|
163
|
-
|
|
166
|
+
border: 0.2rem solid #8e0039 !important;
|
|
164
167
|
}
|
|
165
168
|
|
|
166
169
|
.sr-only {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
170
|
+
position: absolute;
|
|
171
|
+
width: 1px;
|
|
172
|
+
height: 1px;
|
|
173
|
+
padding: 0;
|
|
174
|
+
margin: -1px;
|
|
175
|
+
overflow: hidden;
|
|
176
|
+
clip: rect(0, 0, 0, 0);
|
|
177
|
+
white-space: nowrap;
|
|
178
|
+
border: 0;
|
|
176
179
|
}
|
|
177
180
|
|
|
178
181
|
button:focus-visible,
|
|
@@ -180,11 +183,11 @@ a:focus-visible,
|
|
|
180
183
|
input:focus-visible,
|
|
181
184
|
textarea:focus-visible,
|
|
182
185
|
.filePickLabel:focus-visible {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
186
|
+
outline-offset: 0 !important;
|
|
187
|
+
outline-style: solid !important;
|
|
188
|
+
outline-color: #fff !important;
|
|
189
|
+
outline-width: 2px !important;
|
|
190
|
+
box-shadow: 0 0 0 4px #000 !important;
|
|
188
191
|
}
|
|
189
192
|
|
|
190
193
|
.using-mouse input:focus-visible,
|
|
@@ -192,124 +195,124 @@ textarea:focus-visible,
|
|
|
192
195
|
.using-mouse textarea:focus-visible,
|
|
193
196
|
.using-mouse a:focus-visible,
|
|
194
197
|
.using-mouse .filePickLabel:focus-visible {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
+
outline: none;
|
|
199
|
+
outline-width: 0px !important;
|
|
200
|
+
box-shadow: 0 0 0 0px #000 !important;
|
|
198
201
|
}
|
|
199
202
|
|
|
200
203
|
.pts-radioMultiple-container,
|
|
201
204
|
.pts-multipleCheckboxes-container {
|
|
202
|
-
|
|
205
|
+
padding-bottom: 2rem;
|
|
203
206
|
}
|
|
204
207
|
|
|
205
208
|
.pts-root-question input[type='text'],
|
|
206
209
|
.pts-root-question input[type='email'],
|
|
207
210
|
.pts-root-question input[type='tel'] {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
211
|
+
max-width: 100%;
|
|
212
|
+
font-size: 1.6rem;
|
|
213
|
+
padding-left: 1.6rem;
|
|
214
|
+
padding-right: 1.6rem;
|
|
215
|
+
border-radius: 0.8rem;
|
|
216
|
+
border: 1px solid #545454;
|
|
217
|
+
height: 4.8rem;
|
|
215
218
|
}
|
|
216
219
|
|
|
217
220
|
/* ---------- SERVICE HEADLINE AND BODY ---------- */
|
|
218
221
|
|
|
219
222
|
.pts-serviceHeadlineAndBody-container li {
|
|
220
|
-
|
|
223
|
+
margin-bottom: 0.8rem;
|
|
221
224
|
}
|
|
222
225
|
|
|
223
226
|
.pts-serviceHeadlineAndBody-container ul {
|
|
224
|
-
|
|
227
|
+
padding-left: 2rem;
|
|
225
228
|
}
|
|
226
229
|
|
|
227
230
|
.pts-serviceHeadlineAndBody-container a {
|
|
228
|
-
|
|
231
|
+
margin-bottom: 2.8rem;
|
|
229
232
|
}
|
|
230
233
|
|
|
231
234
|
.pts-moreinfo-list {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
+
margin: 0 !important;
|
|
236
|
+
list-style: none;
|
|
237
|
+
padding: 0 !important;
|
|
235
238
|
}
|
|
236
239
|
|
|
237
240
|
.pts-moreinfo-list svg {
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
241
|
+
width: 1.6rem;
|
|
242
|
+
height: 1.6rem;
|
|
243
|
+
background-color: #6e3282;
|
|
244
|
+
border-radius: 50%;
|
|
245
|
+
padding: 0.4rem;
|
|
246
|
+
flex-shrink: 0;
|
|
247
|
+
margin-right: 1.6rem;
|
|
245
248
|
}
|
|
246
249
|
|
|
247
250
|
/* ---------- STEPPER ---------- */
|
|
248
251
|
|
|
249
252
|
.pts-stepper-container {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
+
display: flex;
|
|
254
|
+
width: 100%;
|
|
255
|
+
margin-top: 2rem;
|
|
253
256
|
}
|
|
254
257
|
|
|
255
258
|
.pts-stepper-step {
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
align-items: center;
|
|
262
|
+
flex: 1;
|
|
263
|
+
position: relative;
|
|
261
264
|
}
|
|
262
265
|
|
|
263
266
|
.pts-stepperDot {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
267
|
+
width: 2.4rem;
|
|
268
|
+
height: 2.4rem;
|
|
269
|
+
line-height: 2.4rem;
|
|
270
|
+
font-size: 1.8rem;
|
|
271
|
+
background-color: #747474;
|
|
272
|
+
color: #ffffff;
|
|
273
|
+
border-radius: 50%;
|
|
274
|
+
margin-bottom: 1.2rem;
|
|
275
|
+
display: flex;
|
|
276
|
+
justify-content: center;
|
|
277
|
+
align-items: center;
|
|
275
278
|
}
|
|
276
279
|
|
|
277
280
|
.pts-stepperDotActive {
|
|
278
|
-
|
|
281
|
+
background-color: #dc7d0a;
|
|
279
282
|
}
|
|
280
283
|
|
|
281
284
|
.pts-stepperDotDone {
|
|
282
|
-
|
|
285
|
+
background-color: #6e3282;
|
|
283
286
|
}
|
|
284
287
|
|
|
285
288
|
.pts-stepper-step:not(:last-child)::after {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
289
|
+
content: '';
|
|
290
|
+
position: absolute;
|
|
291
|
+
top: 1.2rem;
|
|
292
|
+
left: calc(50% + 3.6rem);
|
|
293
|
+
right: calc(-50% + 3.6rem);
|
|
294
|
+
height: 0.2rem;
|
|
295
|
+
background-color: #747474;
|
|
293
296
|
}
|
|
294
297
|
|
|
295
298
|
/* ---------- STEPPER BUTTON ---------- */
|
|
296
299
|
|
|
297
300
|
.pts-stepperButtons-container {
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
+
display: flex;
|
|
302
|
+
justify-content: end;
|
|
303
|
+
margin-right: 0.8rem;
|
|
301
304
|
}
|
|
302
305
|
|
|
303
306
|
.pts-forwardButton,
|
|
304
307
|
.pts-backButton {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
308
|
+
background-color: #6e3282;
|
|
309
|
+
border: 2px solid #6e3282;
|
|
310
|
+
color: #ffffff;
|
|
311
|
+
padding: 8px 20px;
|
|
312
|
+
border-radius: 8px;
|
|
313
|
+
font-size: 16px;
|
|
314
|
+
cursor: pointer;
|
|
315
|
+
margin-left: 1.6rem;
|
|
313
316
|
}
|
|
314
317
|
|
|
315
318
|
.pts-backButton:focus,
|
|
@@ -318,443 +321,443 @@ textarea:focus-visible,
|
|
|
318
321
|
.pts-forwardButton:hover,
|
|
319
322
|
.btn-upload:focus,
|
|
320
323
|
.btn-upload:hover {
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
324
|
+
background-color: #ffffff;
|
|
325
|
+
border: 2px solid #6e3282;
|
|
326
|
+
color: #6e3282;
|
|
327
|
+
transition: 0.2s;
|
|
325
328
|
}
|
|
326
329
|
|
|
327
330
|
/* ---------- RADIO MULTIPLE ---------- */
|
|
328
331
|
|
|
329
332
|
.pts-radioMultiple-container input[type='radio'] {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
333
|
+
appearance: none;
|
|
334
|
+
width: 1.8rem;
|
|
335
|
+
height: 1.8rem;
|
|
336
|
+
border: 1.5px solid #545454;
|
|
337
|
+
border-radius: 3.1rem;
|
|
338
|
+
margin: 0;
|
|
339
|
+
margin-right: 0.8rem;
|
|
340
|
+
vertical-align: -2px;
|
|
341
|
+
position: relative;
|
|
342
|
+
cursor: pointer;
|
|
340
343
|
}
|
|
341
344
|
|
|
342
345
|
.pts-radioMultiple-container input[type='radio']:checked::before {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
346
|
+
content: '';
|
|
347
|
+
position: absolute;
|
|
348
|
+
top: 50%;
|
|
349
|
+
left: 50%;
|
|
350
|
+
transform: translate(-50%, -50%);
|
|
351
|
+
width: 1rem;
|
|
352
|
+
height: 1rem;
|
|
353
|
+
border-radius: 50%;
|
|
354
|
+
background-color: #6e3282;
|
|
352
355
|
}
|
|
353
356
|
|
|
354
357
|
.pts-radioMultiple-container label {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
+
position: relative;
|
|
359
|
+
top: -1px;
|
|
360
|
+
cursor: pointer;
|
|
358
361
|
}
|
|
359
362
|
|
|
360
363
|
/* ---------- MULTIPLE CHECKBOXES ---------- */
|
|
361
364
|
|
|
362
365
|
.pts-multipleCheckboxes-container input[type='checkbox'] {
|
|
363
|
-
|
|
366
|
+
-webkit-appearance: none;
|
|
364
367
|
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
368
|
+
width: 1.8rem;
|
|
369
|
+
height: 1.8rem;
|
|
370
|
+
margin-right: 0.8rem;
|
|
371
|
+
flex-shrink: 0;
|
|
369
372
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
+
background-color: #ffffff;
|
|
374
|
+
border: 0.15rem solid #545454;
|
|
375
|
+
border-radius: 0.2rem;
|
|
373
376
|
|
|
374
|
-
|
|
377
|
+
cursor: pointer;
|
|
375
378
|
}
|
|
376
379
|
|
|
377
380
|
.pts-multipleCheckboxes-container input[type='checkbox']:checked {
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
+
background-color: #6e3282;
|
|
382
|
+
border: none;
|
|
383
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
|
|
381
384
|
}
|
|
382
385
|
|
|
383
386
|
.pts-multipleCheckboxes-container label {
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
+
cursor: pointer;
|
|
388
|
+
margin: 0;
|
|
389
|
+
padding-top: 0.1rem;
|
|
387
390
|
}
|
|
388
391
|
|
|
389
392
|
.pts-multipleCheckboxes-container ul {
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
+
padding-left: unset;
|
|
394
|
+
margin-top: 0;
|
|
395
|
+
margin-bottom: 0.8rem;
|
|
393
396
|
}
|
|
394
397
|
|
|
395
398
|
.pts-multipleCheckboxes-container li {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
+
display: flex;
|
|
400
|
+
margin-bottom: 0.8rem;
|
|
401
|
+
align-items: center;
|
|
399
402
|
}
|
|
400
403
|
|
|
401
404
|
/* ---------- HEADER ---------- */
|
|
402
405
|
|
|
403
406
|
.pts-skipLink-container a {
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
407
|
+
position: absolute;
|
|
408
|
+
top: -1000px;
|
|
409
|
+
left: 1.8rem;
|
|
410
|
+
transition: top 0.3s ease-in-out;
|
|
411
|
+
background-color: #ffffff;
|
|
412
|
+
color: #6e3282;
|
|
410
413
|
}
|
|
411
414
|
|
|
412
415
|
.pts-skipLink-container a:focus {
|
|
413
|
-
|
|
416
|
+
top: 1.8rem;
|
|
414
417
|
}
|
|
415
418
|
|
|
416
419
|
.pts-header-container {
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
420
|
+
display: flex;
|
|
421
|
+
height: 80px;
|
|
422
|
+
padding: 0px 70px;
|
|
423
|
+
align-items: center;
|
|
424
|
+
justify-content: space-between;
|
|
425
|
+
background-color: #ffffff;
|
|
423
426
|
}
|
|
424
427
|
|
|
425
428
|
.pts-languageButton {
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
429
|
+
display: flex;
|
|
430
|
+
background: transparent;
|
|
431
|
+
border: transparent;
|
|
432
|
+
color: #6e3282;
|
|
430
433
|
}
|
|
431
434
|
|
|
432
435
|
/* ---------- FOOTER ---------- */
|
|
433
436
|
|
|
434
437
|
.pts-footer-container {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
438
|
+
display: flex;
|
|
439
|
+
height: 14rem;
|
|
440
|
+
align-items: center;
|
|
441
|
+
width: 100%;
|
|
442
|
+
background-color: #200827;
|
|
440
443
|
}
|
|
441
444
|
|
|
442
445
|
.pts-footer-logo {
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
446
|
+
width: 154.444px;
|
|
447
|
+
height: 40px;
|
|
448
|
+
padding-left: 70px;
|
|
449
|
+
flex-shrink: 0;
|
|
450
|
+
position: absolute;
|
|
448
451
|
}
|
|
449
452
|
|
|
450
453
|
.pts-footer-linkList {
|
|
451
|
-
|
|
452
|
-
|
|
454
|
+
flex: 1;
|
|
455
|
+
justify-content: center;
|
|
453
456
|
}
|
|
454
457
|
|
|
455
458
|
.pts-footer-linkList ul {
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
459
|
+
padding: 0;
|
|
460
|
+
padding-top: 15px;
|
|
461
|
+
margin: 0;
|
|
462
|
+
list-style: none;
|
|
463
|
+
display: flex;
|
|
464
|
+
justify-content: center;
|
|
465
|
+
line-height: 25px;
|
|
463
466
|
}
|
|
464
467
|
|
|
465
468
|
.pts-footer-linkList a {
|
|
466
|
-
|
|
467
|
-
|
|
469
|
+
color: #ffffff;
|
|
470
|
+
text-underline-offset: 3px;
|
|
468
471
|
}
|
|
469
472
|
|
|
470
473
|
.pts-footer-linkList a span {
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
+
padding-left: 36px;
|
|
475
|
+
padding-right: 36px;
|
|
476
|
+
color: #ffffff;
|
|
474
477
|
}
|
|
475
478
|
|
|
476
479
|
.pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
480
|
+
content: '';
|
|
481
|
+
width: 1px;
|
|
482
|
+
height: 24px;
|
|
483
|
+
border: 0.5px solid;
|
|
484
|
+
color: #ffffff;
|
|
485
|
+
position: absolute;
|
|
486
|
+
box-sizing: border-box;
|
|
484
487
|
}
|
|
485
488
|
|
|
486
489
|
/* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
|
|
487
490
|
|
|
488
491
|
.pts-question-hasAbout label {
|
|
489
|
-
|
|
490
|
-
|
|
492
|
+
margin-bottom: 0.4rem;
|
|
493
|
+
line-height: 1.4rem;
|
|
491
494
|
}
|
|
492
495
|
|
|
493
496
|
.pts-about {
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
+
margin-bottom: 0.4rem;
|
|
498
|
+
color: #545454;
|
|
499
|
+
font-size: 1.4rem;
|
|
497
500
|
}
|
|
498
501
|
|
|
499
502
|
/* ---------- TEXTAREA ---------- */
|
|
500
503
|
|
|
501
504
|
.pts-textArea-container textarea {
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
505
|
+
height: 16rem;
|
|
506
|
+
padding: 1.2rem 1.6rem;
|
|
507
|
+
flex-shrink: 0;
|
|
508
|
+
font-family: arial;
|
|
509
|
+
font-size: 1.6rem;
|
|
510
|
+
border-radius: 8px;
|
|
511
|
+
border: 0.1px solid #545454;
|
|
509
512
|
}
|
|
510
513
|
|
|
511
514
|
.pts-textArea-container textarea:focus {
|
|
512
|
-
|
|
515
|
+
border: 0.2rem solid #6e3282;
|
|
513
516
|
}
|
|
514
517
|
|
|
515
518
|
.pts-textarea-counter-error-container {
|
|
516
|
-
|
|
519
|
+
display: flex;
|
|
517
520
|
}
|
|
518
521
|
|
|
519
522
|
.pts-character-counter {
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
+
text-align: right;
|
|
524
|
+
width: 100%;
|
|
525
|
+
margin-top: 0.4rem;
|
|
523
526
|
}
|
|
524
527
|
|
|
525
528
|
.pts-textarea-counter-error-container .pts-root-error {
|
|
526
|
-
|
|
529
|
+
width: 100%;
|
|
527
530
|
}
|
|
528
531
|
|
|
529
532
|
/* ---------- EDIT PREVIEW LINK ---------- */
|
|
530
533
|
|
|
531
534
|
.pts-editPreviewLink-container {
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
535
|
+
display: flex;
|
|
536
|
+
justify-content: end;
|
|
537
|
+
width: 100%;
|
|
538
|
+
margin-left: 1rem;
|
|
539
|
+
align-self: flex-start;
|
|
537
540
|
}
|
|
538
541
|
|
|
539
542
|
.pts-editPreviewLink-container button {
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
543
|
+
display: flex;
|
|
544
|
+
align-items: center;
|
|
545
|
+
background-color: transparent;
|
|
546
|
+
color: #6e3282;
|
|
547
|
+
border: none;
|
|
548
|
+
cursor: pointer;
|
|
549
|
+
font-size: 1.3rem;
|
|
550
|
+
gap: 0.2rem;
|
|
548
551
|
}
|
|
549
552
|
|
|
550
553
|
.pts-editPreviewLink-container svg {
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
+
height: 1.6rem;
|
|
555
|
+
width: 1.6rem;
|
|
556
|
+
flex-shrink: 0;
|
|
554
557
|
}
|
|
555
558
|
|
|
556
559
|
/* ---------- GRANSKA ---------- */
|
|
557
560
|
|
|
558
561
|
.pts-question-preview,
|
|
559
562
|
.addFilesPreviewContainer {
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
563
|
+
display: flex;
|
|
564
|
+
justify-content: space-between;
|
|
565
|
+
border-bottom: 1px solid #ddd;
|
|
566
|
+
margin-bottom: 24px;
|
|
567
|
+
margin-top: 0;
|
|
565
568
|
}
|
|
566
569
|
|
|
567
570
|
.pts-question-preview h3,
|
|
568
571
|
.addFilesPreviewContainer h3 {
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
+
margin-bottom: 8px;
|
|
573
|
+
width: 33%;
|
|
574
|
+
padding-right: 3.6rem;
|
|
572
575
|
}
|
|
573
576
|
|
|
574
577
|
.pts-root-answer,
|
|
575
578
|
.answer {
|
|
576
|
-
|
|
577
|
-
|
|
579
|
+
width: 66%;
|
|
580
|
+
margin-bottom: 8px;
|
|
578
581
|
}
|
|
579
582
|
|
|
580
583
|
.pts-root-answer ul {
|
|
581
|
-
|
|
582
|
-
|
|
584
|
+
margin: 0;
|
|
585
|
+
padding: 0;
|
|
583
586
|
}
|
|
584
587
|
|
|
585
588
|
.pts-root-answer li {
|
|
586
|
-
|
|
589
|
+
margin-bottom: 0.8rem;
|
|
587
590
|
}
|
|
588
591
|
|
|
589
592
|
.stepInfoText {
|
|
590
|
-
|
|
591
|
-
|
|
593
|
+
margin: 0;
|
|
594
|
+
margin-bottom: 36px;
|
|
592
595
|
}
|
|
593
596
|
|
|
594
597
|
.h3andPreviewLink {
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
598
|
+
display: flex;
|
|
599
|
+
align-items: center;
|
|
600
|
+
justify-content: space-between;
|
|
601
|
+
width: 100%;
|
|
599
602
|
}
|
|
600
603
|
|
|
601
604
|
#section-heading-0 {
|
|
602
|
-
|
|
605
|
+
width: 100%;
|
|
603
606
|
}
|
|
604
607
|
|
|
605
608
|
.no-answer-preview-page {
|
|
606
|
-
|
|
609
|
+
color: #545454;
|
|
607
610
|
}
|
|
608
611
|
|
|
609
612
|
.pts-preview-header {
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
+
display: flex;
|
|
614
|
+
justify-content: space-between;
|
|
615
|
+
align-items: baseline;
|
|
613
616
|
}
|
|
614
617
|
|
|
615
618
|
/* ---------- TEXT HEADLINE AND BODY / SERVICE HEADLINE AND BODY ---------- */
|
|
616
619
|
|
|
617
620
|
.pts-textHeadlineAndBody-container .notFirstInList {
|
|
618
|
-
|
|
621
|
+
margin-top: 0.8rem;
|
|
619
622
|
}
|
|
620
623
|
|
|
621
624
|
.pts-serviceHeadlineAndBody-container .notFirstInList {
|
|
622
|
-
|
|
625
|
+
margin-top: 0.8rem;
|
|
623
626
|
}
|
|
624
627
|
|
|
625
628
|
/* ---------- MODAL ---------- */
|
|
626
629
|
|
|
627
630
|
.pts-modal-overlay {
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
631
|
+
position: fixed;
|
|
632
|
+
top: 0;
|
|
633
|
+
left: 0;
|
|
634
|
+
width: 100%;
|
|
635
|
+
height: 100%;
|
|
636
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
637
|
+
display: flex;
|
|
638
|
+
align-items: center;
|
|
639
|
+
justify-content: center;
|
|
640
|
+
z-index: 999;
|
|
638
641
|
}
|
|
639
642
|
|
|
640
643
|
.pts-modal-content {
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
644
|
+
background: white;
|
|
645
|
+
color: black;
|
|
646
|
+
padding: 3.7rem;
|
|
647
|
+
border-radius: 4px;
|
|
648
|
+
max-width: 600px;
|
|
649
|
+
width: 90%;
|
|
650
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
648
651
|
}
|
|
649
652
|
|
|
650
653
|
.pts-spinner-border {
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
654
|
+
display: block;
|
|
655
|
+
width: 9.4rem;
|
|
656
|
+
height: 9.4rem;
|
|
657
|
+
margin: 0 auto 0 auto;
|
|
658
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%236E3282' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%236E3282' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
|
|
659
|
+
background-size: contain;
|
|
660
|
+
background-repeat: no-repeat;
|
|
661
|
+
background-position: center;
|
|
662
|
+
animation: pts-spinner-border 0.75s linear infinite;
|
|
660
663
|
}
|
|
661
664
|
|
|
662
665
|
.pts-modal-content h1 {
|
|
663
|
-
|
|
664
|
-
|
|
666
|
+
margin: 0;
|
|
667
|
+
margin-bottom: 0.8rem;
|
|
665
668
|
}
|
|
666
669
|
|
|
667
670
|
.pts-modal-content p {
|
|
668
|
-
|
|
669
|
-
|
|
671
|
+
margin: 0;
|
|
672
|
+
margin-bottom: 3.6rem;
|
|
670
673
|
}
|
|
671
674
|
|
|
672
675
|
@keyframes pts-spinner-border {
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
+
100% {
|
|
677
|
+
transform: rotate(360deg);
|
|
678
|
+
}
|
|
676
679
|
}
|
|
677
680
|
|
|
678
681
|
/* ---------- ERROR SUMMARY ---------- */
|
|
679
682
|
|
|
680
683
|
.pts-errorSummary-container {
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
684
|
+
padding: 1.6rem 2.4rem 1.6rem 2.4rem;
|
|
685
|
+
margin-top: 3.6rem;
|
|
686
|
+
border-radius: 0.8rem;
|
|
687
|
+
border: 0.1rem solid #8e0039;
|
|
688
|
+
border-left: 4rem solid #8e0039;
|
|
689
|
+
position: relative;
|
|
687
690
|
}
|
|
688
691
|
|
|
689
692
|
.pts-errorSummary-container .errorDot {
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
693
|
+
position: absolute;
|
|
694
|
+
top: 2.1rem;
|
|
695
|
+
left: -2.8rem;
|
|
696
|
+
width: 1.6rem;
|
|
697
|
+
height: 1.6rem;
|
|
698
|
+
border-radius: 50%;
|
|
699
|
+
background-color: #ffffff;
|
|
700
|
+
color: #8e0039;
|
|
701
|
+
align-items: center;
|
|
702
|
+
font-size: 1.4rem;
|
|
700
703
|
}
|
|
701
704
|
|
|
702
705
|
.pts-errorSummary-container h2 {
|
|
703
|
-
|
|
706
|
+
margin-bottom: 0;
|
|
704
707
|
}
|
|
705
708
|
|
|
706
709
|
.pts-errorSummary-container ul {
|
|
707
|
-
|
|
708
|
-
|
|
710
|
+
padding: 0;
|
|
711
|
+
margin: 0;
|
|
709
712
|
}
|
|
710
713
|
|
|
711
714
|
.pts-errorSummary-container li {
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
+
display: flex;
|
|
716
|
+
cursor: pointer;
|
|
717
|
+
padding-top: 1.6rem;
|
|
715
718
|
}
|
|
716
719
|
|
|
717
720
|
.errorSummary-text {
|
|
718
|
-
|
|
721
|
+
color: #8e0039;
|
|
719
722
|
}
|
|
720
723
|
|
|
721
724
|
/* ---------- FILE UPLOAD ---------- */
|
|
722
725
|
.files-upload {
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
726
|
+
width: 100%;
|
|
727
|
+
max-width: 800px;
|
|
728
|
+
margin: 0 auto;
|
|
729
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
727
730
|
}
|
|
728
731
|
|
|
729
732
|
/* Drop Zone */
|
|
730
733
|
.files-drop-zone {
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
734
|
+
border: 2px dashed #6e3282;
|
|
735
|
+
border-radius: 12px;
|
|
736
|
+
padding: 3rem 2rem;
|
|
737
|
+
text-align: center;
|
|
738
|
+
transition: all 0.3s ease;
|
|
739
|
+
background-color: #fafafa;
|
|
740
|
+
cursor: pointer;
|
|
741
|
+
position: relative;
|
|
742
|
+
overflow: hidden;
|
|
740
743
|
}
|
|
741
744
|
|
|
742
745
|
.files-drop-zone:hover {
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
746
|
+
border-color: #6e3282;
|
|
747
|
+
background-color: #f5ebf8;
|
|
748
|
+
transform: translateY(-2px);
|
|
749
|
+
box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
|
|
747
750
|
}
|
|
748
751
|
|
|
749
752
|
.files-drop-zone.drag-active {
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
753
|
+
border-color: #6e3282;
|
|
754
|
+
background-color: #f5ebf8;
|
|
755
|
+
transform: scale(1.02);
|
|
756
|
+
box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
|
|
754
757
|
}
|
|
755
758
|
|
|
756
759
|
.files-drop-zone:focus {
|
|
757
|
-
|
|
760
|
+
/* border-color: #6e3282;
|
|
758
761
|
background-color: #f5ebf8;
|
|
759
762
|
transform: translateY(-2px);
|
|
760
763
|
box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
|
|
@@ -764,361 +767,361 @@ textarea:focus-visible,
|
|
|
764
767
|
box-shadow: inset 0 0 0 4px #6e3282;
|
|
765
768
|
|
|
766
769
|
border: none; */
|
|
767
|
-
|
|
770
|
+
border: 0.2rem solid #6e3282;
|
|
768
771
|
}
|
|
769
772
|
|
|
770
773
|
.files-drop-zone:focus-visible {
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
774
|
+
outline-offset: 0 !important;
|
|
775
|
+
outline-style: solid !important;
|
|
776
|
+
outline-color: #fff !important;
|
|
777
|
+
outline-width: 2px !important;
|
|
778
|
+
box-shadow: 0 0 0 4px #000 !important;
|
|
776
779
|
}
|
|
777
780
|
|
|
778
781
|
.files-drop-content {
|
|
779
|
-
|
|
782
|
+
pointer-events: none;
|
|
780
783
|
}
|
|
781
784
|
|
|
782
785
|
.files-icon {
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
786
|
+
font-size: 4rem;
|
|
787
|
+
margin-bottom: 1rem;
|
|
788
|
+
opacity: 0.7;
|
|
789
|
+
animation: float 3s ease-in-out infinite;
|
|
787
790
|
}
|
|
788
791
|
|
|
789
792
|
@keyframes float {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
793
|
+
0%,
|
|
794
|
+
100% {
|
|
795
|
+
transform: translateY(0px);
|
|
796
|
+
}
|
|
797
|
+
50% {
|
|
798
|
+
transform: translateY(-10px);
|
|
799
|
+
}
|
|
797
800
|
}
|
|
798
801
|
|
|
799
802
|
.files-drop-text {
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
803
|
+
font-size: 1.2rem;
|
|
804
|
+
margin-bottom: 0.5rem;
|
|
805
|
+
color: #333;
|
|
806
|
+
font-weight: 500;
|
|
804
807
|
}
|
|
805
808
|
|
|
806
809
|
.files-drop-info {
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
+
font-size: 0.9rem;
|
|
811
|
+
color: #666;
|
|
812
|
+
margin: 0;
|
|
810
813
|
}
|
|
811
814
|
|
|
812
815
|
.files-allowed-types {
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
816
|
+
font-size: 0.85rem;
|
|
817
|
+
color: #555;
|
|
818
|
+
margin: 0.75rem 0 0 0;
|
|
819
|
+
padding: 0.5rem;
|
|
820
|
+
background-color: rgba(146, 64, 252, 0.1);
|
|
821
|
+
border-radius: 6px;
|
|
822
|
+
border-left: 3px solid #ce95e0;
|
|
820
823
|
}
|
|
821
824
|
|
|
822
825
|
.files-allowed-types strong {
|
|
823
|
-
|
|
826
|
+
color: #6e3282;
|
|
824
827
|
}
|
|
825
828
|
|
|
826
829
|
.files-input-hidden {
|
|
827
|
-
|
|
830
|
+
display: none;
|
|
828
831
|
}
|
|
829
832
|
|
|
830
833
|
/* Summary */
|
|
831
834
|
.files-summary {
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
835
|
+
margin: 1.5rem 0;
|
|
836
|
+
padding: 1rem;
|
|
837
|
+
background-color: #f8f9fa;
|
|
838
|
+
border-radius: 8px;
|
|
839
|
+
border: 1px solid #e9ecef;
|
|
837
840
|
}
|
|
838
841
|
|
|
839
842
|
.files-summary-stats {
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
843
|
+
display: flex;
|
|
844
|
+
gap: 1rem;
|
|
845
|
+
margin-bottom: 1rem;
|
|
846
|
+
flex-wrap: wrap;
|
|
844
847
|
}
|
|
845
848
|
|
|
846
849
|
.stat {
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
850
|
+
padding: 0.5rem 1rem;
|
|
851
|
+
border-radius: 20px;
|
|
852
|
+
background-color: #e9ecef;
|
|
853
|
+
font-size: 0.9rem;
|
|
854
|
+
display: flex;
|
|
855
|
+
align-items: center;
|
|
856
|
+
gap: 0.5rem;
|
|
854
857
|
}
|
|
855
858
|
|
|
856
859
|
.stat.pending {
|
|
857
|
-
|
|
858
|
-
|
|
860
|
+
background-color: #fff3cd;
|
|
861
|
+
color: #856404;
|
|
859
862
|
}
|
|
860
863
|
|
|
861
864
|
.stat.completed {
|
|
862
|
-
|
|
863
|
-
|
|
865
|
+
background-color: #d1e7dd;
|
|
866
|
+
color: #0a3622;
|
|
864
867
|
}
|
|
865
868
|
|
|
866
869
|
.stat.error {
|
|
867
|
-
|
|
868
|
-
|
|
870
|
+
background-color: #f8d7da;
|
|
871
|
+
color: #721c24;
|
|
869
872
|
}
|
|
870
873
|
|
|
871
874
|
.files-summary-actions {
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
+
display: flex;
|
|
876
|
+
gap: 0.5rem;
|
|
877
|
+
flex-wrap: wrap;
|
|
875
878
|
}
|
|
876
879
|
|
|
877
880
|
.action-button {
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
881
|
+
padding: 0.75rem 1.5rem;
|
|
882
|
+
border: none;
|
|
883
|
+
border-radius: 6px;
|
|
884
|
+
cursor: pointer;
|
|
885
|
+
font-weight: 500;
|
|
886
|
+
transition: all 0.2s ease;
|
|
887
|
+
display: flex;
|
|
888
|
+
align-items: center;
|
|
889
|
+
gap: 0.5rem;
|
|
887
890
|
}
|
|
888
891
|
|
|
889
892
|
.action-button.primary {
|
|
890
|
-
|
|
891
|
-
|
|
893
|
+
background-color: #1ea7fd;
|
|
894
|
+
color: white;
|
|
892
895
|
}
|
|
893
896
|
|
|
894
897
|
.action-button.primary:hover {
|
|
895
|
-
|
|
896
|
-
|
|
898
|
+
background-color: #1890ff;
|
|
899
|
+
transform: translateY(-1px);
|
|
897
900
|
}
|
|
898
901
|
|
|
899
902
|
.action-button.secondary {
|
|
900
|
-
|
|
901
|
-
|
|
903
|
+
background-color: #6c757d;
|
|
904
|
+
color: white;
|
|
902
905
|
}
|
|
903
906
|
|
|
904
907
|
.action-button.secondary:hover {
|
|
905
|
-
|
|
906
|
-
|
|
908
|
+
background-color: #5a6268;
|
|
909
|
+
transform: translateY(-1px);
|
|
907
910
|
}
|
|
908
911
|
|
|
909
912
|
/* Files List */
|
|
910
913
|
.files-list {
|
|
911
|
-
|
|
914
|
+
margin-top: 1.5rem;
|
|
912
915
|
}
|
|
913
916
|
|
|
914
917
|
.files-list h4 {
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
918
|
+
margin-bottom: 1rem;
|
|
919
|
+
color: #333;
|
|
920
|
+
font-size: 1.1rem;
|
|
921
|
+
font-weight: 600;
|
|
919
922
|
}
|
|
920
923
|
|
|
921
924
|
.files-items {
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
+
list-style: none;
|
|
926
|
+
padding: 0;
|
|
927
|
+
margin: 0;
|
|
925
928
|
}
|
|
926
929
|
|
|
927
930
|
.file-item {
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
931
|
+
display: flex;
|
|
932
|
+
align-items: center;
|
|
933
|
+
gap: 1rem;
|
|
934
|
+
padding: 1rem;
|
|
935
|
+
border: 1px solid #e9ecef;
|
|
936
|
+
border-radius: 8px;
|
|
937
|
+
margin-bottom: 0.75rem;
|
|
938
|
+
background-color: white;
|
|
939
|
+
transition: all 0.2s ease;
|
|
940
|
+
position: relative;
|
|
938
941
|
}
|
|
939
942
|
|
|
940
943
|
.file-item:hover {
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
+
background-color: #f8f9fa;
|
|
945
|
+
border-color: #dee2e6;
|
|
946
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
944
947
|
}
|
|
945
948
|
|
|
946
949
|
.file-item.uploading {
|
|
947
|
-
|
|
948
|
-
|
|
950
|
+
background-color: #e6f7ff;
|
|
951
|
+
border-color: #91d5ff;
|
|
949
952
|
}
|
|
950
953
|
|
|
951
954
|
.file-item.completed {
|
|
952
|
-
|
|
953
|
-
|
|
955
|
+
background-color: #f6ffed;
|
|
956
|
+
border-color: #b7eb8f;
|
|
954
957
|
}
|
|
955
958
|
|
|
956
959
|
.file-item.error {
|
|
957
|
-
|
|
958
|
-
|
|
960
|
+
background-color: #fff2f0;
|
|
961
|
+
border-color: #ffccc7;
|
|
959
962
|
}
|
|
960
963
|
|
|
961
964
|
.file-icon-status {
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
+
font-size: 1.5rem;
|
|
966
|
+
min-width: 2rem;
|
|
967
|
+
text-align: center;
|
|
965
968
|
}
|
|
966
969
|
|
|
967
970
|
.file-info {
|
|
968
|
-
|
|
969
|
-
|
|
971
|
+
flex: 1;
|
|
972
|
+
min-width: 0;
|
|
970
973
|
}
|
|
971
974
|
|
|
972
975
|
.file-name {
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
976
|
+
font-weight: 500;
|
|
977
|
+
color: #333;
|
|
978
|
+
margin-bottom: 0.5rem;
|
|
979
|
+
word-break: break-word;
|
|
977
980
|
}
|
|
978
981
|
|
|
979
982
|
.file-details {
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
983
|
+
display: flex;
|
|
984
|
+
gap: 1rem;
|
|
985
|
+
font-size: 0.85rem;
|
|
986
|
+
color: #666;
|
|
987
|
+
flex-wrap: wrap;
|
|
985
988
|
}
|
|
986
989
|
|
|
987
990
|
.file-size {
|
|
988
|
-
|
|
991
|
+
color: #666;
|
|
989
992
|
}
|
|
990
993
|
|
|
991
994
|
.file-status {
|
|
992
|
-
|
|
993
|
-
|
|
995
|
+
color: #1ea7fd;
|
|
996
|
+
font-weight: 500;
|
|
994
997
|
}
|
|
995
998
|
|
|
996
999
|
.file-error {
|
|
997
|
-
|
|
998
|
-
|
|
1000
|
+
color: #dc3545;
|
|
1001
|
+
font-weight: 500;
|
|
999
1002
|
}
|
|
1000
1003
|
|
|
1001
1004
|
.progress-bar {
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1005
|
+
width: 100%;
|
|
1006
|
+
height: 4px;
|
|
1007
|
+
background-color: #e9ecef;
|
|
1008
|
+
border-radius: 2px;
|
|
1009
|
+
margin-top: 0.5rem;
|
|
1010
|
+
overflow: hidden;
|
|
1008
1011
|
}
|
|
1009
1012
|
|
|
1010
1013
|
.progress-fill {
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1014
|
+
height: 100%;
|
|
1015
|
+
background-color: #1ea7fd;
|
|
1016
|
+
transition: width 0.3s ease;
|
|
1017
|
+
border-radius: 2px;
|
|
1015
1018
|
}
|
|
1016
1019
|
|
|
1017
1020
|
.file-actions {
|
|
1018
|
-
|
|
1019
|
-
|
|
1021
|
+
display: flex;
|
|
1022
|
+
gap: 0.5rem;
|
|
1020
1023
|
}
|
|
1021
1024
|
|
|
1022
1025
|
.action-btn {
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1026
|
+
background: none;
|
|
1027
|
+
border: 1px solid transparent;
|
|
1028
|
+
padding: 0.5rem;
|
|
1029
|
+
border-radius: 6px;
|
|
1030
|
+
cursor: pointer;
|
|
1031
|
+
font-size: 1rem;
|
|
1032
|
+
transition: all 0.2s ease;
|
|
1033
|
+
min-width: 2.5rem;
|
|
1034
|
+
height: 2.5rem;
|
|
1035
|
+
display: flex;
|
|
1036
|
+
align-items: center;
|
|
1037
|
+
justify-content: center;
|
|
1035
1038
|
}
|
|
1036
1039
|
|
|
1037
1040
|
.action-btn.upload {
|
|
1038
|
-
|
|
1039
|
-
|
|
1041
|
+
color: #1ea7fd;
|
|
1042
|
+
border-color: #1ea7fd;
|
|
1040
1043
|
}
|
|
1041
1044
|
|
|
1042
1045
|
.action-btn.upload:hover {
|
|
1043
|
-
|
|
1044
|
-
|
|
1046
|
+
background-color: #1ea7fd;
|
|
1047
|
+
color: white;
|
|
1045
1048
|
}
|
|
1046
1049
|
|
|
1047
1050
|
.action-btn.retry {
|
|
1048
|
-
|
|
1049
|
-
|
|
1051
|
+
color: #fd7e14;
|
|
1052
|
+
border-color: #fd7e14;
|
|
1050
1053
|
}
|
|
1051
1054
|
|
|
1052
1055
|
.action-btn.retry:hover {
|
|
1053
|
-
|
|
1054
|
-
|
|
1056
|
+
background-color: #fd7e14;
|
|
1057
|
+
color: white;
|
|
1055
1058
|
}
|
|
1056
1059
|
|
|
1057
1060
|
.action-btn.remove {
|
|
1058
|
-
|
|
1059
|
-
|
|
1061
|
+
color: #6e3282;
|
|
1062
|
+
border-color: #6e3282;
|
|
1060
1063
|
}
|
|
1061
1064
|
|
|
1062
1065
|
.action-btn.remove:hover {
|
|
1063
|
-
|
|
1064
|
-
|
|
1066
|
+
background-color: #6e3282;
|
|
1067
|
+
color: white;
|
|
1065
1068
|
}
|
|
1066
1069
|
|
|
1067
1070
|
/* Responsive Design */
|
|
1068
1071
|
@media (max-width: 768px) {
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
+
.files-drop-zone {
|
|
1073
|
+
padding: 2rem 1rem;
|
|
1074
|
+
}
|
|
1072
1075
|
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
+
.files-icon {
|
|
1077
|
+
font-size: 3rem;
|
|
1078
|
+
}
|
|
1076
1079
|
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
+
.files-drop-text {
|
|
1081
|
+
font-size: 1rem;
|
|
1082
|
+
}
|
|
1080
1083
|
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1084
|
+
.files-summary-stats {
|
|
1085
|
+
flex-direction: column;
|
|
1086
|
+
gap: 0.5rem;
|
|
1087
|
+
}
|
|
1085
1088
|
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
+
.files-summary-actions {
|
|
1090
|
+
flex-direction: column;
|
|
1091
|
+
}
|
|
1089
1092
|
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
+
.action-button {
|
|
1094
|
+
justify-content: center;
|
|
1095
|
+
}
|
|
1093
1096
|
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1097
|
+
.file-item {
|
|
1098
|
+
flex-direction: column;
|
|
1099
|
+
align-items: flex-start;
|
|
1100
|
+
gap: 0.75rem;
|
|
1101
|
+
}
|
|
1099
1102
|
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1103
|
+
.file-details {
|
|
1104
|
+
flex-direction: column;
|
|
1105
|
+
gap: 0.25rem;
|
|
1106
|
+
}
|
|
1104
1107
|
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
+
.file-actions {
|
|
1109
|
+
align-self: flex-end;
|
|
1110
|
+
}
|
|
1108
1111
|
}
|
|
1109
1112
|
|
|
1110
1113
|
@media (max-width: 480px) {
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
+
.files-upload {
|
|
1115
|
+
padding: 0 0.5rem;
|
|
1116
|
+
}
|
|
1114
1117
|
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
+
.files-drop-zone {
|
|
1119
|
+
padding: 1.5rem 1rem;
|
|
1120
|
+
}
|
|
1118
1121
|
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
+
.file-item {
|
|
1123
|
+
padding: 0.75rem;
|
|
1124
|
+
}
|
|
1122
1125
|
}
|
|
1123
1126
|
|
|
1124
1127
|
/* ---------- END FILE UPLOAD ---------- */
|