optimized-react-component-library-xyz123 0.29.1 → 0.29.3

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.
Files changed (6) hide show
  1. package/dist/index.js +10 -18
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +10 -18
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/css/darkMode.css +383 -389
package/src/css/darkMode.css CHANGED
@@ -1,399 +1,393 @@
1
- :root{
2
- --dark-background:#414141;
3
- --dark-text:#ffffff;
4
- --dark-action: #B07CBF;
5
- --dark-error: #D75055;
6
- --dark-main:#141414;
7
- --dark-info: #808080;
8
- --dark-orientation-active:#F4BF56;
9
- --dark-background-second:#200827;
10
- --dark-background-third:#747474;
1
+ :root {
2
+ --dark-background: #414141;
3
+ --dark-text: #ffffff;
4
+ --dark-action: #b07cbf;
5
+ --dark-error: #d75055;
6
+ --dark-main: #141414;
7
+ --dark-info: #808080;
8
+ --dark-orientation-active: #f4bf56;
9
+ --dark-background-second: #200827;
10
+ --dark-background-third: #747474;
11
11
  }
12
12
 
13
13
  @media (prefers-color-scheme: dark) {
14
- /* ---------- GENERAL ---------- */
15
-
16
- body {
17
- background-color: var(--dark-background);
18
- color: var(--dark-text);
19
- }
20
-
21
-
22
- /*----------COOKIE BANNER-------*/
23
- .pts-cookieBanner {
24
- background-color: var(--dark-main) !important;
25
- border-bottom: 2px solid var(--dark-action) !important;
26
- }
27
-
28
- .pts-cookieBanner a{
29
- color: var(--dark-action) !important;
30
- }
31
-
32
- .pts-cookieBanner button {
33
- background-color: var(--dark-action) !important;
34
- border-color: var(--dark-action)!important;
35
- color: var(--dark-main)!important;
36
- }
37
-
38
- .pts-cookieBanner button:focus,
39
- .pts-cookieBanner button:hover{
40
- background-color: var(--dark-main)!important;;
41
- border: 2px solid var(--dark-action)!important;;
42
- color: var(--dark-action)!important;;
43
- transition: 0.2s;
44
- }
45
-
46
- .pts-cookieBanner-Links svg rect{
47
- fill:var(--dark-action);
48
- }
49
- .pts-cookieBanner-Links svg path{
50
- fill:var(--dark-main);
51
- }
52
-
53
-
54
- /*-----------HEADER--------------*/
55
-
56
- .pts-header-container{
57
- background-color: var(--dark-background-second);
58
- }
59
-
60
- .pts-header-container svg{
61
- color: var(--dark-text);
62
- }
63
-
64
- .pts-header-container svg path{
65
- fill: var(--dark-text);
66
- }
67
-
68
- .pts-languageButton{
69
- color:var(--dark-text);
70
- }
71
-
72
- /*-------MAIN CONTENT-------*/
73
- section,
74
- .pts-form-step-header {
75
- background-color: var(--dark-main);
76
- }
77
-
78
- #main-content a {
79
- color: var(--dark-action);
80
- }
81
-
82
- /* ---------- SERVICE HEADLINE AND BODY ---------- */
83
-
84
- .pts-serviceHeadlineAndBody-container a {
85
- color: var(--dark-action);
86
- }
87
-
88
- .pts-serviceHeadlineAndBody-container a svg,
89
- .MoreInfoIcon svg {
90
- background-color: var(--dark-action);
91
- }
92
-
93
- .pts-serviceHeadlineAndBody-container a svg path,
94
- .MoreInfoIcon svg path {
95
- fill: var(--dark-main);
96
- }
97
-
98
-
99
- .pts-moreinfo-list a {
100
- color: var(--dark-action);
101
- }
102
-
103
- .pts-moreinfo-list svg {
104
- background-color: var(--dark-action);
105
- }
106
-
107
- .pts-moreinfo-list svg path {
108
- fill: var(--dark-main);
109
- }
110
-
111
- /* ---------- STEPPER ---------- */
112
-
113
- .pts-stepperDot {
114
- background-color: var(--dark-text);
115
- color: var(--dark-main);
116
- }
117
-
118
- .pts-stepperDotActive {
119
- background-color: var(--dark-orientation-active);
120
- }
121
-
122
- .pts-stepper-step:not(:last-child)::after {
123
- background-color: var(--dark-text);
124
- }
125
-
126
- .pts-stepperDotDone,
127
- .pts-stepperDotDone svg path {
128
- background-color: var(--dark-action);
129
- stroke: var(--dark-main);
130
- }
131
-
132
- /*-----------QUESTIONS--------------*/
133
-
134
- .pts-root-about,
135
- .pts-about {
136
- color: var(--dark-info);
137
- }
138
-
139
- .pts-root-question input[type='text']:focus,
140
- .pts-root-question input[type='email']:focus,
141
- .pts-root-question input[type='tel']:focus {
142
- border: 0.2rem solid var(--dark-action);
143
- }
144
-
145
- .errorDot {
146
- color: var(--dark-main);
147
- background-color: var(--dark-error);
148
- }
149
-
150
- .pts-validation-error-icon svg rect{
151
- fill: var(--dark-error);
152
- }
153
-
154
- .pts-validation-error-icon svg path{
155
- fill: var(--dark-main);
156
- }
157
-
158
-
159
- .errorText,
160
- .pts-root-mandatoryAsterisk {
161
- color: var(--dark-error);
162
- }
163
-
164
- .pts-root-question-input-error-border,
165
- .pts-root-question-input-error-border,
166
- .pts-root-question-input-error-border {
167
- border: 0.15rem solid var(--dark-error) !important;
168
- }
169
-
170
- button:focus-visible,
171
- a:focus-visible,
172
- input:focus-visible,
173
- textarea:focus-visible,
174
- .filePickLabel:focus-visible {
175
- outline-color: #fff !important;
176
- box-shadow: 0 0 0 4px #000 !important;
177
- }
178
-
179
- .using-mouse input:focus-visible,
180
- .using-mouse button:focus-visible,
181
- .using-mouse textarea:focus-visible,
182
- .using-mouse a:focus-visible,
183
- .using-mouse .filePickLabel:focus-visible {
184
- box-shadow: 0 0 0 0px #000 !important;
185
- }
186
-
187
- .pts-root-question input[type='text'],
188
- .pts-root-question input[type='email'],
189
- .pts-root-question input[type='tel'] {
190
- border: 1px solid var(--dark-info);
191
- background-color: var(--dark-main);
192
- color: var(--dark-text);
193
- }
194
-
195
-
196
- /* ---------- STEPPER BUTTON ---------- */
197
-
198
- .pts-forwardButton {
199
- background-color: var(--dark-action);
200
- border-color: var(--dark-action);
201
- color: var(--dark-main);
202
- }
203
-
204
- .pts-backButton {
205
- background-color: var(--dark-action);
206
- border-color: var(--dark-action);
207
- color: var(--dark-main);
208
- }
209
-
210
- .pts-backButton:focus,
211
- .pts-backButton:hover,
212
- .pts-forwardButton:focus,
213
- .pts-forwardButton:hover,
214
- .btn-upload:focus,
215
- .btn-upload:hover {
216
- background-color: var(--dark-main);
217
- border-color: var(--dark-action);
218
- color: var(--dark-action);
219
- }
220
-
221
- /* ---------- RADIO MULTIPLE ---------- */
222
-
223
- .pts-radioMultiple-container input[type='radio'] {
224
- border-color: var(--dark-info);
225
- }
226
-
227
- .pts-radioMultiple-container input[type='radio']:checked::before {
228
- background-color: var(--dark-action);
229
- }
230
-
231
- /* ---------- MULTIPLE CHECKBOXES ---------- */
232
-
233
- .pts-multipleCheckboxes-container input[type='checkbox'] {
234
- background-color: var(--dark-main);
235
- border-color: var(--dark-info);
236
- }
237
-
238
- .pts-multipleCheckboxes-container input[type='checkbox']:checked {
239
- background-color: var(--dark-action);
240
- 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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
241
- }
14
+ /* ---------- GENERAL ---------- */
15
+
16
+ body {
17
+ background-color: var(--dark-background);
18
+ color: var(--dark-text);
19
+ }
20
+
21
+ /*----------COOKIE BANNER-------*/
22
+ .pts-cookieBanner {
23
+ background-color: var(--dark-main) !important;
24
+ border-bottom: 2px solid var(--dark-action) !important;
25
+ }
26
+
27
+ .pts-cookieBanner a {
28
+ color: var(--dark-action) !important;
29
+ }
30
+
31
+ .pts-cookieBanner button {
32
+ background-color: var(--dark-action) !important;
33
+ border-color: var(--dark-action) !important;
34
+ color: var(--dark-main) !important;
35
+ }
36
+
37
+ .pts-cookieBanner button:focus,
38
+ .pts-cookieBanner button:hover {
39
+ background-color: var(--dark-main) !important;
40
+ border: 2px solid var(--dark-action) !important;
41
+ color: var(--dark-action) !important;
42
+ transition: 0.2s;
43
+ }
44
+
45
+ .pts-cookieBanner-Links svg rect {
46
+ fill: var(--dark-action);
47
+ }
48
+ .pts-cookieBanner-Links svg path {
49
+ fill: var(--dark-main);
50
+ }
51
+
52
+ /*-----------HEADER--------------*/
53
+
54
+ .pts-header-container {
55
+ background-color: var(--dark-background-second);
56
+ }
57
+
58
+ .pts-header-container svg {
59
+ color: var(--dark-text);
60
+ }
61
+
62
+ .pts-header-container svg path {
63
+ fill: var(--dark-text);
64
+ }
65
+
66
+ .pts-languageButton {
67
+ color: var(--dark-text);
68
+ }
69
+
70
+ /*-------MAIN CONTENT-------*/
71
+ section,
72
+ .pts-form-step-header {
73
+ background-color: var(--dark-main);
74
+ }
75
+
76
+ #main-content a {
77
+ color: var(--dark-action);
78
+ }
79
+
80
+ /* ---------- SERVICE HEADLINE AND BODY ---------- */
81
+
82
+ .pts-serviceHeadlineAndBody-container a {
83
+ color: var(--dark-action);
84
+ }
85
+
86
+ .pts-serviceHeadlineAndBody-container a svg,
87
+ .MoreInfoIcon svg {
88
+ background-color: var(--dark-action);
89
+ }
90
+
91
+ .pts-serviceHeadlineAndBody-container a svg path,
92
+ .MoreInfoIcon svg path {
93
+ fill: var(--dark-main);
94
+ }
95
+
96
+ .pts-moreinfo-list a {
97
+ color: var(--dark-action);
98
+ }
99
+
100
+ .pts-moreinfo-list svg {
101
+ background-color: var(--dark-action);
102
+ }
103
+
104
+ .pts-moreinfo-list svg path {
105
+ fill: var(--dark-main);
106
+ }
107
+
108
+ /* ---------- STEPPER ---------- */
109
+
110
+ .pts-stepperDot {
111
+ background-color: var(--dark-text);
112
+ color: var(--dark-main);
113
+ }
114
+
115
+ .pts-stepperDotActive {
116
+ background-color: var(--dark-orientation-active);
117
+ }
118
+
119
+ .pts-stepper-step:not(:last-child)::after {
120
+ background-color: var(--dark-text);
121
+ }
122
+
123
+ .pts-stepperDotDone,
124
+ .pts-stepperDotDone svg path {
125
+ background-color: var(--dark-action);
126
+ stroke: var(--dark-main);
127
+ }
128
+
129
+ /*-----------QUESTIONS--------------*/
130
+
131
+ .pts-root-about,
132
+ .pts-about {
133
+ color: var(--dark-info);
134
+ }
135
+
136
+ .pts-root-question input[type='text']:focus,
137
+ .pts-root-question input[type='email']:focus,
138
+ .pts-root-question input[type='tel']:focus {
139
+ border: 0.2rem solid var(--dark-action);
140
+ }
141
+
142
+ .errorDot {
143
+ color: var(--dark-main);
144
+ background-color: var(--dark-error);
145
+ }
146
+
147
+ .pts-validation-error-icon svg rect {
148
+ fill: var(--dark-error);
149
+ }
150
+
151
+ .pts-validation-error-icon svg path {
152
+ fill: var(--dark-main);
153
+ }
154
+
155
+ .errorText,
156
+ .pts-root-mandatoryAsterisk {
157
+ color: var(--dark-error);
158
+ }
159
+
160
+ .pts-root-question-input-error-border,
161
+ .pts-root-question-input-error-border,
162
+ .pts-root-question-input-error-border {
163
+ border: 0.15rem solid var(--dark-error) !important;
164
+ }
165
+
166
+ button:focus-visible,
167
+ a:focus-visible,
168
+ input:focus-visible,
169
+ textarea:focus-visible,
170
+ .filePickLabel:focus-visible {
171
+ outline-color: #fff !important;
172
+ box-shadow: 0 0 0 4px #000 !important;
173
+ }
174
+
175
+ .using-mouse input:focus-visible,
176
+ .using-mouse button:focus-visible,
177
+ .using-mouse textarea:focus-visible,
178
+ .using-mouse a:focus-visible,
179
+ .using-mouse .filePickLabel:focus-visible {
180
+ box-shadow: 0 0 0 0px #000 !important;
181
+ }
182
+
183
+ .pts-root-question input[type='text'],
184
+ .pts-root-question input[type='email'],
185
+ .pts-root-question input[type='tel'] {
186
+ border: 1px solid var(--dark-info);
187
+ background-color: var(--dark-main);
188
+ color: var(--dark-text);
189
+ }
190
+
191
+ /* ---------- STEPPER BUTTON ---------- */
192
+
193
+ .pts-forwardButton {
194
+ background-color: var(--dark-action);
195
+ border-color: var(--dark-action);
196
+ color: var(--dark-main);
197
+ }
198
+
199
+ .pts-backButton {
200
+ background-color: var(--dark-action);
201
+ border-color: var(--dark-action);
202
+ color: var(--dark-main);
203
+ }
204
+
205
+ .pts-backButton:focus,
206
+ .pts-backButton:hover,
207
+ .pts-forwardButton:focus,
208
+ .pts-forwardButton:hover,
209
+ .btn-upload:focus,
210
+ .btn-upload:hover {
211
+ background-color: var(--dark-main);
212
+ border-color: var(--dark-action);
213
+ color: var(--dark-action);
214
+ }
215
+
216
+ /* ---------- RADIO MULTIPLE ---------- */
217
+
218
+ .pts-radioMultiple-container input[type='radio'] {
219
+ border-color: var(--dark-info);
220
+ }
221
+
222
+ .pts-radioMultiple-container input[type='radio']:checked::before {
223
+ background-color: var(--dark-action);
224
+ }
225
+
226
+ /* ---------- MULTIPLE CHECKBOXES ---------- */
227
+
228
+ .pts-multipleCheckboxes-container input[type='checkbox'] {
229
+ background-color: var(--dark-main);
230
+ border-color: var(--dark-info);
231
+ }
232
+
233
+ .pts-multipleCheckboxes-container input[type='checkbox']:checked {
234
+ background-color: var(--dark-action);
235
+ 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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
236
+ }
242
237
 
243
238
  /* ---------- CHECKBOX GROUP ---------- */
244
239
 
245
- .pts-checkboxGroup-container input[type='checkbox'] {
246
- background-color: var(--dark-main);
247
- border-color: var(--dark-info);
248
- }
240
+ .pts-checkboxGroup-container input[type='checkbox'] {
241
+ background-color: var(--dark-main);
242
+ border-color: var(--dark-info);
243
+ }
244
+
245
+ .pts-checkboxGroup-container input[type='checkbox']:checked {
246
+ background-color: var(--dark-action);
247
+ 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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
248
+ }
249
+
250
+ /* ---------- SINGLE CHECKBOX ---------- */
251
+ .pts-singleCheckbox-container input[type='checkbox'] {
252
+ background-color: var(--dark-main);
253
+ border-color: var(--dark-info);
254
+ }
255
+ .pts-singleCheckbox-container input[type='checkbox']:checked {
256
+ background-color: var(--dark-action);
257
+ 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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
258
+ }
259
+
260
+ /* ---------- TEXTAREA ---------- */
261
+
262
+ .pts-textArea-container textarea {
263
+ border-color: var(--dark-info);
264
+ }
265
+
266
+ .pts-textArea-container textarea:focus {
267
+ border-color: var(--dark-action);
268
+ }
269
+
270
+ .textfield-about {
271
+ color: var(--dark-info);
272
+ }
273
+
274
+ /* ---------- ADD FILE QUESTION ---------- */
275
+ .filePickText {
276
+ color: var(--dark-text) !important;
277
+ }
278
+
279
+ .filePickButton {
280
+ color: var(--dark-main) !important;
281
+ }
282
+
283
+ .DropZone {
284
+ background-color: var(--dark-main);
285
+ color: var(--dark-text);
286
+ border-color: var(--dark-info);
287
+ }
288
+
289
+ .DropZone::before {
290
+ border-color: var(--dark-info);
291
+ }
292
+
293
+ .DropZone:hover {
294
+ background-color: var(--dark-background);
295
+ }
296
+
297
+ .DropZone svg {
298
+ background: var(--dark-action);
299
+ border-color: var(--dark-action);
300
+ }
301
+
302
+ .DropZone svg path {
303
+ fill: var(--dark-main);
304
+ }
305
+
306
+ .selectedFilesLinkButton,
307
+ .error-close {
308
+ color: var(--dark-action);
309
+ }
310
+
311
+ .error-close svg path {
312
+ stroke: var(--dark-action);
313
+ }
314
+
315
+ .errorMessageAddingFile {
316
+ color: var(--dark-error);
317
+ }
318
+
319
+ .selectedFilesLinkButton:hover,
320
+ .error-close:hover {
321
+ color: var(--dark-action);
322
+ }
323
+
324
+ .filePickLabel .filePickButton {
325
+ background: var(--dark-info);
326
+ }
327
+
328
+ /* ---------- EDIT PREVIEW LINK ---------- */
329
+
330
+ .pts-editPreviewLink-container button {
331
+ color: var(--dark-action);
332
+ }
333
+
334
+ /* ---------- GRANSKA ---------- */
335
+
336
+ .no-answer-preview-page {
337
+ color: var(--dark-info);
338
+ }
339
+
340
+ /* ---------- ERROR SUMMARY ---------- */
341
+
342
+ .pts-errorSummary-container {
343
+ border: 0.1rem solid var(--dark-error);
344
+ border-left: 4rem solid var(--dark-error);
345
+ }
346
+
347
+ .pts-errorSummary-container .errorDot {
348
+ color: var(--dark-error);
349
+ background-color: var(--dark-main);
350
+ }
351
+
352
+ .errorSummary-text {
353
+ color: var(--dark-error) !important;
354
+ }
249
355
 
250
- .pts-checkboxGroup-container input[type='checkbox']:checked {
251
- background-color: var(--dark-action);
252
- 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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
253
- }
356
+ /*--------------------FOOTER-----------------*/
254
357
 
255
- /* ---------- SINGLE CHECKBOX ---------- */
256
- .pts-singleCheckbox-container input[type='checkbox'] {
257
- background-color: var(--dark-main);
258
- border-color: var(--dark-info);
259
- }
260
- .pts-singleCheckbox-container input[type='checkbox']:checked {
261
- background-color: var(--dark-action);
262
- 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='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
263
- }
264
-
265
-
266
- /* ---------- TEXTAREA ---------- */
267
-
268
- .pts-textArea-container textarea {
269
- border-color: var(--dark-info);
270
- }
271
-
272
- .pts-textArea-container textarea:focus {
273
- border-color: var(--dark-action);
274
- }
275
-
276
- .textfield-about{
277
- color: var(--dark-info);
278
- }
279
-
280
- /* ---------- ADD FILE QUESTION ---------- */
281
- .filePickText{
282
- color: var(--dark-text)!important;
283
- }
284
-
285
- .filePickButton {
286
- color: var(--dark-main) !important;
287
- }
288
-
289
- .DropZone{
290
- background-color:var(--dark-main);
291
- color: var(--dark-text);
292
- border-color: var(--dark-info);
293
- }
294
-
295
- .DropZone::before {
296
- border-color: var(--dark-info);
297
- }
298
-
299
- .DropZone:hover {
300
- background-color:var(--dark-background);
301
- }
302
-
303
- .DropZone svg {
304
- background: var(--dark-action);
305
- border-color: var(--dark-action);
306
- }
307
-
308
- .DropZone svg path{
309
- fill: var(--dark-main);
310
- }
311
-
312
- .selectedFilesLinkButton,
313
- .error-close{
314
- color: var(--dark-action);
315
- }
316
-
317
- .error-close svg path{
318
- stroke: var(--dark-action);
319
- }
320
-
321
- .errorMessageAddingFile{
322
- color: var(--dark-error);
323
- }
324
-
325
- .selectedFilesLinkButton:hover,
326
- .error-close:hover{
327
- color: var(--dark-action);
328
- }
329
-
330
- .filePickLabel .filePickButton {
331
- background: var(--dark-info);
332
- }
333
-
334
- /* ---------- EDIT PREVIEW LINK ---------- */
335
-
336
- .pts-editPreviewLink-container button {
337
- color: var(--dark-action);
338
- }
339
-
340
- /* ---------- GRANSKA ---------- */
341
-
342
- .no-answer-preview-page {
343
- color: var(--dark-info);
344
- }
345
-
346
-
347
- /* ---------- ERROR SUMMARY ---------- */
348
-
349
- .pts-errorSummary-container {
350
- border: 0.1rem solid var(--dark-error);
351
- border-left: 4rem solid var(--dark-error);
352
- }
353
-
354
- .pts-errorSummary-container .errorDot {
355
- color: var(--dark-error);
356
- background-color: var(--dark-main);
357
- }
358
-
359
- .errorSummary-text {
360
- color: var(--dark-error) !important;
361
- }
362
-
363
- /*--------------------FOOTER-----------------*/
364
-
365
- .pts-footer-slogan-text-container{
358
+ .pts-footer-slogan-text-container {
366
359
  background-color: var(--dark-background-third);
367
- }
368
-
369
-
370
- /*-------------MODAL-----------*/
371
- .pts-modal-content{
372
- background-color: var(--dark-main);
373
- color: var(--dark-text);
374
- }
375
-
376
- .pts-spinner-border {
377
- 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='%23B07CBF' 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='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
378
-
379
- }
380
-
381
-
382
- /*-------------Autofill-----------*/
383
- input:autofill,
384
- input:autofill:hover,
385
- input:autofill:focus,
386
- input:-webkit-autofill,
387
- input:-webkit-autofill:hover,
388
- input:-webkit-autofill:focus {
389
- -webkit-box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
390
- box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
391
- -webkit-text-fill-color: var(--dark-text) !important; /* behåller textfärgen */
392
- background-color: var(--dark-main) !important;
393
- }
394
-
395
- /* Firefox */
396
- input:-moz-autofill {
397
- box-shadow: 0 0 0 1000px transparent inset !important;
398
- }
360
+ }
361
+
362
+ /*-------------MODAL-----------*/
363
+ .pts-modal-content {
364
+ background-color: var(--dark-main);
365
+ color: var(--dark-text);
366
+ }
367
+
368
+ .pts-spinner-border {
369
+ 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='%23B07CBF' 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='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
370
+ }
371
+
372
+ .pts-modal-overlay {
373
+ background-color: rgba(255, 255, 255, 0.5);
374
+ }
375
+
376
+ /*-------------Autofill-----------*/
377
+ input:autofill,
378
+ input:autofill:hover,
379
+ input:autofill:focus,
380
+ input:-webkit-autofill,
381
+ input:-webkit-autofill:hover,
382
+ input:-webkit-autofill:focus {
383
+ -webkit-box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
384
+ box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
385
+ -webkit-text-fill-color: var(--dark-text) !important; /* behåller textfärgen */
386
+ background-color: var(--dark-main) !important;
387
+ }
388
+
389
+ /* Firefox */
390
+ input:-moz-autofill {
391
+ box-shadow: 0 0 0 1000px transparent inset !important;
392
+ }
399
393
  }