optimized-react-component-library-xyz123 0.1.49 → 0.1.50
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 -1
- package/src/css/darkMode.css +92 -51
- package/src/css/styles.css +90 -0
package/package.json
CHANGED
package/src/css/darkMode.css
CHANGED
|
@@ -1,56 +1,96 @@
|
|
|
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-yellow:#F4BF56;
|
|
9
|
+
--dark-purple:#200827;
|
|
10
|
+
}
|
|
11
|
+
|
|
1
12
|
@media (prefers-color-scheme: dark) {
|
|
2
13
|
/* ---------- GENERAL ---------- */
|
|
3
14
|
|
|
4
15
|
body {
|
|
5
|
-
background-color:
|
|
6
|
-
color:
|
|
16
|
+
background-color: var(--dark-background);
|
|
17
|
+
color: var(--dark-text);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
/*----------COOKIE BANNER-------*/
|
|
22
|
+
.pts-cookieBanner {
|
|
23
|
+
background-color: var(--dark-main) !important;
|
|
24
|
+
border-bottom: 2px solid var(--dark-action) !important;
|
|
7
25
|
}
|
|
8
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-Links svg rect{
|
|
38
|
+
fill:var(--dark-action);
|
|
39
|
+
}
|
|
40
|
+
.pts-cookieBanner-Links svg path{
|
|
41
|
+
fill:var(--dark-main);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
/*-----------HEADER--------------*/
|
|
46
|
+
|
|
9
47
|
.pts-header-container{
|
|
10
|
-
background-color:
|
|
48
|
+
background-color: var(--dark-purple);
|
|
11
49
|
}
|
|
12
50
|
|
|
13
51
|
.pts-header-container svg path{
|
|
14
|
-
fill:
|
|
52
|
+
fill: var(--dark-text);
|
|
15
53
|
}
|
|
16
54
|
|
|
17
55
|
.pts-languageButton{
|
|
18
|
-
color
|
|
19
|
-
cursor: pointer;
|
|
56
|
+
color:var(--dark-text);
|
|
20
57
|
}
|
|
21
|
-
|
|
58
|
+
/*-------MAIN CONTENT-------*/
|
|
22
59
|
section,
|
|
23
60
|
.pts-form-step-header {
|
|
24
|
-
background-color:
|
|
61
|
+
background-color: var(--dark-main);
|
|
25
62
|
}
|
|
26
63
|
|
|
27
64
|
#main-content a {
|
|
28
|
-
color:
|
|
65
|
+
color: var(--dark-action);
|
|
29
66
|
}
|
|
30
67
|
|
|
68
|
+
|
|
69
|
+
/*-----------QUESTIONS--------------*/
|
|
70
|
+
|
|
31
71
|
.pts-root-about {
|
|
32
|
-
color:
|
|
72
|
+
color: var(--dark-info);
|
|
33
73
|
}
|
|
34
74
|
|
|
35
75
|
.pts-root-question input[type='text']:focus,
|
|
36
76
|
.pts-root-question input[type='email']:focus,
|
|
37
77
|
.pts-root-question input[type='tel']:focus {
|
|
38
|
-
border: 0.2rem solid
|
|
78
|
+
border: 0.2rem solid var(--dark-action);
|
|
39
79
|
}
|
|
40
80
|
|
|
41
81
|
.errorDot {
|
|
42
|
-
background-color:
|
|
82
|
+
background-color: var(--dark-error);
|
|
43
83
|
}
|
|
44
84
|
|
|
45
85
|
.errorText,
|
|
46
86
|
.pts-root-mandatoryAsterisk {
|
|
47
|
-
color:
|
|
87
|
+
color: var(--dark-error);
|
|
48
88
|
}
|
|
49
89
|
|
|
50
90
|
.pts-root-question-input-error-border,
|
|
51
91
|
.pts-root-question-input-error-border,
|
|
52
92
|
.pts-root-question-input-error-border {
|
|
53
|
-
border: 0.15rem solid
|
|
93
|
+
border: 0.15rem solid var(--dark-error) !important;
|
|
54
94
|
}
|
|
55
95
|
|
|
56
96
|
button:focus-visible,
|
|
@@ -73,58 +113,58 @@
|
|
|
73
113
|
.pts-root-question input[type='text'],
|
|
74
114
|
.pts-root-question input[type='email'],
|
|
75
115
|
.pts-root-question input[type='tel'] {
|
|
76
|
-
border: 1px solid
|
|
77
|
-
background:
|
|
78
|
-
color:
|
|
116
|
+
border: 1px solid var(--dark-info);
|
|
117
|
+
background-color: var(--dark-main);
|
|
118
|
+
color: var(--dark-text);
|
|
79
119
|
}
|
|
80
120
|
|
|
81
121
|
/* ---------- SERVICE HEADLINE AND BODY ---------- */
|
|
82
122
|
|
|
83
123
|
.pts-moreinfo-list a {
|
|
84
|
-
color:
|
|
124
|
+
color: var(--dark-action);
|
|
85
125
|
}
|
|
86
126
|
|
|
87
127
|
.pts-moreinfo-list svg {
|
|
88
|
-
background-color:
|
|
128
|
+
background-color: var(--dark-action);
|
|
89
129
|
}
|
|
90
130
|
|
|
91
131
|
.pts-moreinfo-list svg path {
|
|
92
|
-
fill:
|
|
132
|
+
fill: var(--dark-main);
|
|
93
133
|
}
|
|
94
134
|
|
|
95
135
|
/* ---------- STEPPER ---------- */
|
|
96
136
|
|
|
97
137
|
.pts-stepperDot {
|
|
98
|
-
background-color:
|
|
99
|
-
color:
|
|
138
|
+
background-color: var(--dark-text);
|
|
139
|
+
color: var(--dark-main);
|
|
100
140
|
}
|
|
101
141
|
|
|
102
142
|
.pts-stepperDotActive {
|
|
103
|
-
background-color:
|
|
143
|
+
background-color: var(--dark-yellow);
|
|
104
144
|
}
|
|
105
145
|
|
|
106
146
|
.pts-stepper-step:not(:last-child)::after {
|
|
107
|
-
background-color:
|
|
147
|
+
background-color: var(--dark-text);
|
|
108
148
|
}
|
|
109
149
|
|
|
110
150
|
.pts-stepperDotDone,
|
|
111
151
|
.pts-stepperDotDone svg path {
|
|
112
|
-
background-color:
|
|
113
|
-
stroke:
|
|
152
|
+
background-color: var(--dark-action);
|
|
153
|
+
stroke: var(--dark-main);
|
|
114
154
|
}
|
|
115
155
|
|
|
116
156
|
/* ---------- STEPPER BUTTON ---------- */
|
|
117
157
|
|
|
118
158
|
.pts-forwardButton {
|
|
119
|
-
background-color:
|
|
120
|
-
border-color:
|
|
121
|
-
color:
|
|
159
|
+
background-color: var(--dark-action);
|
|
160
|
+
border-color: var(--dark-action);
|
|
161
|
+
color: var(--dark-main);
|
|
122
162
|
}
|
|
123
163
|
|
|
124
164
|
.pts-backButton {
|
|
125
|
-
background-color:
|
|
126
|
-
border-color:
|
|
127
|
-
color:
|
|
165
|
+
background-color: var(--dark-action);
|
|
166
|
+
border-color: var(--dark-action);
|
|
167
|
+
color: var(--dark-main);
|
|
128
168
|
}
|
|
129
169
|
|
|
130
170
|
.pts-backButton:focus,
|
|
@@ -133,74 +173,75 @@
|
|
|
133
173
|
.pts-forwardButton:hover,
|
|
134
174
|
.btn-upload:focus,
|
|
135
175
|
.btn-upload:hover {
|
|
136
|
-
background-color:
|
|
137
|
-
border-color:
|
|
138
|
-
color:
|
|
176
|
+
background-color: var(--dark-main);
|
|
177
|
+
border-color: var(--dark-action);
|
|
178
|
+
color: var(--dark-action);
|
|
139
179
|
}
|
|
140
|
-
|
|
141
180
|
/* ---------- RADIO MULTIPLE ---------- */
|
|
142
181
|
|
|
143
182
|
.pts-radioMultiple-container input[type='radio'] {
|
|
144
|
-
border-color:
|
|
183
|
+
border-color: var(--dark-info);
|
|
145
184
|
}
|
|
146
185
|
|
|
147
186
|
.pts-radioMultiple-container input[type='radio']:checked::before {
|
|
148
|
-
background-color:
|
|
187
|
+
background-color: var(--dark-action);
|
|
149
188
|
}
|
|
150
189
|
|
|
151
190
|
/* ---------- MULTIPLE CHECKBOXES ---------- */
|
|
152
191
|
|
|
153
192
|
.pts-multipleCheckboxes-container input[type='checkbox'] {
|
|
154
|
-
background-color:
|
|
155
|
-
border-color:
|
|
193
|
+
background-color: var(--dark-main);
|
|
194
|
+
border-color: var(--dark-info);
|
|
156
195
|
}
|
|
157
196
|
|
|
158
197
|
.pts-multipleCheckboxes-container input[type='checkbox']:checked {
|
|
159
|
-
background-color:
|
|
198
|
+
background-color: var(--dark-action);
|
|
160
199
|
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;
|
|
161
200
|
}
|
|
162
201
|
|
|
163
202
|
/* ---------- TEXTAREA ---------- */
|
|
164
203
|
|
|
165
204
|
.pts-textArea-container textarea {
|
|
166
|
-
border-color:
|
|
205
|
+
border-color: var(--dark-info);
|
|
167
206
|
}
|
|
168
207
|
|
|
169
208
|
.pts-textArea-container textarea:focus {
|
|
170
|
-
border-color:
|
|
209
|
+
border-color: var(--dark-action);
|
|
171
210
|
}
|
|
172
211
|
|
|
173
212
|
.textfield-about{
|
|
174
|
-
color:
|
|
213
|
+
color: var(--dark-info);
|
|
175
214
|
}
|
|
215
|
+
|
|
176
216
|
/* ---------- EDIT PREVIEW LINK ---------- */
|
|
177
217
|
|
|
178
218
|
.pts-editPreviewLink-container button {
|
|
179
|
-
color:
|
|
219
|
+
color: var(--dark-action);
|
|
180
220
|
}
|
|
181
221
|
|
|
182
222
|
.pts-editPreviewLink-container svg path {
|
|
183
|
-
stroke:
|
|
223
|
+
stroke: var(--dark-action);
|
|
184
224
|
}
|
|
185
225
|
|
|
186
226
|
/* ---------- GRANSKA ---------- */
|
|
187
227
|
|
|
188
228
|
.no-answer-preview-page {
|
|
189
|
-
color:
|
|
229
|
+
color: var(--dark-info);
|
|
190
230
|
}
|
|
191
231
|
|
|
232
|
+
|
|
192
233
|
/* ---------- ERROR SUMMARY ---------- */
|
|
193
234
|
|
|
194
235
|
.pts-errorSummary-container {
|
|
195
|
-
border: 0.1rem solid
|
|
196
|
-
border-left: 4rem solid
|
|
236
|
+
border: 0.1rem solid var(--dark-error);
|
|
237
|
+
border-left: 4rem solid var(--dark-error);
|
|
197
238
|
}
|
|
198
239
|
|
|
199
240
|
.pts-errorSummary-container .errorDot {
|
|
200
|
-
color:
|
|
241
|
+
color: var(--dark-error);
|
|
201
242
|
}
|
|
202
243
|
|
|
203
244
|
.errorSummary-text {
|
|
204
|
-
color:
|
|
245
|
+
color: var(--dark-error) !important;
|
|
205
246
|
}
|
|
206
247
|
}
|
package/src/css/styles.css
CHANGED
|
@@ -217,6 +217,95 @@ textarea:focus-visible,
|
|
|
217
217
|
height: 4.8rem;
|
|
218
218
|
}
|
|
219
219
|
|
|
220
|
+
/* ---------- SCOOKIE BANNER ---------- */
|
|
221
|
+
|
|
222
|
+
.pts-cookieBanner {
|
|
223
|
+
position: relative;
|
|
224
|
+
top: 0;
|
|
225
|
+
left: 0;
|
|
226
|
+
padding: 15px 20px;
|
|
227
|
+
background: #eaf1f9;
|
|
228
|
+
border-bottom: 4px solid #6e3282;
|
|
229
|
+
z-index: 9999;
|
|
230
|
+
width: 100vw;
|
|
231
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.pts-cookieBanner .content {
|
|
235
|
+
display: flex;
|
|
236
|
+
flex-direction: column;
|
|
237
|
+
justify-self: center;
|
|
238
|
+
max-width: 860px;
|
|
239
|
+
margin: 1.6rem 0;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.pts-cookieBanner h3 {
|
|
243
|
+
font-family: Arial, sans-serif;
|
|
244
|
+
font-size: 1.6rem;
|
|
245
|
+
font-weight: 700;
|
|
246
|
+
line-height: 21px;
|
|
247
|
+
margin: 0 0 10px 0;
|
|
248
|
+
text-align: left;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.pts-cookieBanner p {
|
|
252
|
+
font-family: Arial, sans-serif;
|
|
253
|
+
font-size: 1.6rem;
|
|
254
|
+
font-weight: 400;
|
|
255
|
+
line-height: 24px;
|
|
256
|
+
margin: 0 0 15px 0;
|
|
257
|
+
text-align: left;
|
|
258
|
+
}
|
|
259
|
+
.pts-cookieBanner-Links{
|
|
260
|
+
margin-bottom: 1.6rem;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.pts-cookieBanner-Buttons {
|
|
264
|
+
display: flex;
|
|
265
|
+
justify-content: space-between;
|
|
266
|
+
align-items: center;
|
|
267
|
+
justify-content: flex-end;
|
|
268
|
+
gap: 1rem;
|
|
269
|
+
padding: 0.8rem 2rem;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.pts-cookieBanner button {
|
|
273
|
+
border-radius: 8px;
|
|
274
|
+
display: flex;
|
|
275
|
+
gap: 10px;
|
|
276
|
+
justify-content: flex-end; /* Always justify buttons to the end/right */
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.pts-cookieBanner a {
|
|
280
|
+
padding-left: 10px;
|
|
281
|
+
font-family: Arial, sans-serif;
|
|
282
|
+
font-size: 1.6rem;
|
|
283
|
+
font-weight: 400;
|
|
284
|
+
line-height: 24px;
|
|
285
|
+
color: #6e3282;
|
|
286
|
+
text-decoration: none;
|
|
287
|
+
position: relative;
|
|
288
|
+
top: -0.7rem;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.pts-cookieBanner a:hover {
|
|
292
|
+
text-decoration: underline;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* Button styles */
|
|
296
|
+
.pts-cookieBanner button {
|
|
297
|
+
min-width: 140px;
|
|
298
|
+
text-align: center;
|
|
299
|
+
font-family: Arial, sans-serif;
|
|
300
|
+
font-size: 1.4rem;
|
|
301
|
+
padding: 8px 15px;
|
|
302
|
+
border-radius: 4px;
|
|
303
|
+
background-color: #6e3282;
|
|
304
|
+
border-color: #6e3282;
|
|
305
|
+
color: white;
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
}
|
|
308
|
+
|
|
220
309
|
/* ---------- SERVICE HEADLINE AND BODY ---------- */
|
|
221
310
|
|
|
222
311
|
.pts-serviceHeadlineAndBody-container li {
|
|
@@ -435,6 +524,7 @@ textarea:focus-visible,
|
|
|
435
524
|
background: transparent;
|
|
436
525
|
border: transparent;
|
|
437
526
|
color: #6e3282;
|
|
527
|
+
cursor: pointer;
|
|
438
528
|
}
|
|
439
529
|
|
|
440
530
|
/* ---------- FOOTER ---------- */
|