pixflow-upgrade-planning 0.0.2 → 0.0.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.
- package/index.js +10 -0
- package/package.json +1 -1
- package/styles/pixflow.css +151 -1
- package/styles/postpace.css +37 -37
- package/template.html +1 -1
- /package/images/{pixflow/tick.svg → tick.svg} +0 -0
package/index.js
CHANGED
|
@@ -19,6 +19,16 @@ class PixflowUpgradePlanning extends HTMLElement {
|
|
|
19
19
|
this.appendChild(this.template.querySelector(`div.${this.port}`));
|
|
20
20
|
|
|
21
21
|
this.querySelector(`img.close`).addEventListener("click", this.close_click);
|
|
22
|
+
|
|
23
|
+
if(this.port == "pixflow"){
|
|
24
|
+
this.appendChild(this.template.querySelector("div.purchase-code"));
|
|
25
|
+
this.querySelector("div.activate-code").addEventListener("click", this.activate_code_click);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
activate_code_click(e){
|
|
31
|
+
e.target.parentNode.parentNode.parentNode.querySelector("div.purchase-code").classList.add("active");
|
|
22
32
|
}
|
|
23
33
|
|
|
24
34
|
open(){
|
package/package.json
CHANGED
package/styles/pixflow.css
CHANGED
|
@@ -149,7 +149,7 @@ pixflow-upgrade-planning > div.pixflow > div.plan > div > div.active > div:nth-c
|
|
|
149
149
|
width: 12px;
|
|
150
150
|
height: 12px;
|
|
151
151
|
position: absolute;
|
|
152
|
-
background-image: url("./node_modules/pixflow-upgrade-planning/images/
|
|
152
|
+
background-image: url("./node_modules/pixflow-upgrade-planning/images/tick.svg");
|
|
153
153
|
background-color: #005dff;
|
|
154
154
|
border-radius: 6px;
|
|
155
155
|
background-position: center center;
|
|
@@ -244,4 +244,154 @@ div.close {
|
|
|
244
244
|
background-position: center center;
|
|
245
245
|
width: 73px;
|
|
246
246
|
height: 27px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
div.purchase-code {
|
|
250
|
+
display: none;
|
|
251
|
+
flex-direction: column;
|
|
252
|
+
position: fixed;
|
|
253
|
+
top: calc(100vh + 10px);
|
|
254
|
+
left: 2.5%;
|
|
255
|
+
width: 95%;
|
|
256
|
+
height: 95%;
|
|
257
|
+
background: #fff;
|
|
258
|
+
box-sizing: border-box;
|
|
259
|
+
box-shadow: 0px 4px 9px rgb(0 0 0 / 25%);
|
|
260
|
+
border-radius: 17px 17px 0px 0px;
|
|
261
|
+
z-index: 1001;
|
|
262
|
+
align-items: center;
|
|
263
|
+
font-family: 'Inter';
|
|
264
|
+
font-style: normal;
|
|
265
|
+
font-weight: 700;
|
|
266
|
+
font-size: 12px;
|
|
267
|
+
transition: top 400ms;
|
|
268
|
+
background: linear-gradient(180deg, #005DFF -86.53%, #2273FF -13.89%, #0C0C0C 47.55%, rgb(221 0 27) 47.56%, #0C0C0C 47.57%);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
div.purchase-code.active {
|
|
272
|
+
top: calc(100vh - 95%);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
div.purchase-code > form > input[type=text]:nth-child(1) {
|
|
276
|
+
margin-top: 39px;
|
|
277
|
+
background: rgb(185 210 255 / 10%);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
div.purchase-code > form > div {
|
|
281
|
+
color: #7C879A;
|
|
282
|
+
margin: 15px 0;
|
|
283
|
+
cursor: pointer;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
div.purchase-code > img:nth-child(1) {
|
|
287
|
+
position: absolute;
|
|
288
|
+
z-index: -1;
|
|
289
|
+
top: -8px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
div.purchase-code > img:nth-child(2) {
|
|
293
|
+
margin-top: 8px;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
div.purchase-code > img:nth-child(3) {
|
|
297
|
+
margin-top: 82px;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
div.purchase-code.active, div#block.active, div#logout.active, div#revoke-access.active, div#store.active, #font-selector.active {
|
|
301
|
+
opacity: 1;
|
|
302
|
+
display: flex!important;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
div.purchase-code > div {
|
|
306
|
+
margin-top: 136px;
|
|
307
|
+
color: #7C879A;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
div.purchase-code > p.describe {
|
|
311
|
+
font-family: Inter;
|
|
312
|
+
font-style: normal;
|
|
313
|
+
font-weight: bold;
|
|
314
|
+
text-align: center;
|
|
315
|
+
color: #fff;
|
|
316
|
+
font-size: 15px;
|
|
317
|
+
line-height: 22px;
|
|
318
|
+
padding: 0 97px;
|
|
319
|
+
margin-top: 69px;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
div.purchase-code > p {
|
|
323
|
+
width: fit-content;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
div.purchase-code > form {
|
|
327
|
+
display: flex;
|
|
328
|
+
justify-content: space-between;
|
|
329
|
+
align-items: center;
|
|
330
|
+
flex-direction: column;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
div.purchase-code > form > input[type="text"] {
|
|
334
|
+
background-color: rgba(226, 226, 226, 0.6);
|
|
335
|
+
border: 0;
|
|
336
|
+
color: #8D8D8D;
|
|
337
|
+
font-family: Inter;
|
|
338
|
+
font-style: normal;
|
|
339
|
+
font-weight: 500;
|
|
340
|
+
font-size: 12.1px;
|
|
341
|
+
line-height: 12px;
|
|
342
|
+
letter-spacing: 0.04em;
|
|
343
|
+
width: 279px;
|
|
344
|
+
padding: 10px;
|
|
345
|
+
outline: none;
|
|
346
|
+
border-radius: 6.4px;
|
|
347
|
+
margin: 0;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
div.purchase-code > form > input[type="text"]::selection {
|
|
351
|
+
filter: invert(1);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
div.purchase-code > form > p {
|
|
355
|
+
color: #fff;
|
|
356
|
+
height: 15px;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
div.purchase-code > p {
|
|
360
|
+
width: fit-content;
|
|
361
|
+
text-align: center;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
div.purchase-code > p.buy {
|
|
365
|
+
font-family: Inter;
|
|
366
|
+
font-style: normal;
|
|
367
|
+
font-weight: 500;
|
|
368
|
+
font-size: 10px;
|
|
369
|
+
line-height: 12px;
|
|
370
|
+
text-align: center;
|
|
371
|
+
letter-spacing: 0.04em;
|
|
372
|
+
color: #FFFFFF;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
div.purchase-code > p.buy > a {
|
|
376
|
+
color: #5c92ff;
|
|
377
|
+
text-decoration: underline;
|
|
378
|
+
transition: color 0.2s;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
div.purchase-code > p.buy > a:hover {
|
|
382
|
+
color: #0A48C4;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
div.purchase-code > p.help > a {
|
|
386
|
+
text-decoration: underline;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
div.purchase-code > p.buy > a {
|
|
390
|
+
color: #5c92ff;
|
|
391
|
+
text-decoration: underline;
|
|
392
|
+
display: contents;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
div.purchase-code div.result {
|
|
396
|
+
color: #FFFFFF;
|
|
247
397
|
}
|
package/styles/postpace.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div > div:nth-child(2) > img {
|
|
2
2
|
animation-name: rotate-loading;
|
|
3
3
|
animation-duration: 2s;
|
|
4
4
|
animation-iteration-count: infinite;
|
|
5
5
|
animation-timing-function: linear;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div > div:nth-child(2) > img {
|
|
9
9
|
margin-top: 10px;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
pixflow-upgrade-planning > div.postpace {
|
|
13
13
|
position: fixed;
|
|
14
14
|
display: none;
|
|
15
15
|
width: calc(100% - 40px);
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
font-style: normal;
|
|
28
28
|
flex-direction: column;
|
|
29
29
|
align-items: center;
|
|
30
|
-
background-image: url(./images/postpace-bg.jpg);
|
|
30
|
+
background-image: url(./node_modules/pixflow-upgrade-planning/images/postpace/postpace-bg.jpg);
|
|
31
31
|
background-repeat: no-repeat;
|
|
32
32
|
background-position: center top;
|
|
33
33
|
background-size: cover;
|
|
34
34
|
min-width: 440px;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
pixflow-upgrade-planning > div.postpace > div:nth-child(1), div.pcode > div:nth-child(1) {
|
|
38
38
|
margin-top: -9px;
|
|
39
39
|
background-color: #142251b3;
|
|
40
40
|
border-top-left-radius: 25px;
|
|
@@ -44,44 +44,44 @@
|
|
|
44
44
|
left: calc((100% - 50px) / 2);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
pixflow-upgrade-planning > div.postpace > img:nth-child(3) {
|
|
48
48
|
margin: 100px 0 50px 0;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div > div:nth-child(2) > img {
|
|
52
52
|
width: 16px;
|
|
53
53
|
filter: invert(1);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
|
|
56
|
+
pixflow-upgrade-planning > div.postpace.active, pixflow-upgrade-planning > div.postpace.active {
|
|
57
57
|
display: flex!important;
|
|
58
58
|
top: 25px;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
pixflow-upgrade-planning > div.postpace > p {
|
|
62
62
|
opacity: 0.8;
|
|
63
63
|
letter-spacing: normal;
|
|
64
64
|
text-align: center;
|
|
65
65
|
padding: 0 40px;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
pixflow-upgrade-planning > div.postpace > div.plan {
|
|
69
69
|
display: flex;
|
|
70
70
|
justify-content: space-evenly;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
pixflow-upgrade-planning > div.postpace > div > div > div:nth-child(2) {
|
|
74
74
|
font-weight: bold;
|
|
75
75
|
font-size: 13.5px;
|
|
76
76
|
margin-top: 10px;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
pixflow-upgrade-planning > div.postpace > div > div > div:nth-child(3) {
|
|
80
80
|
font-size: 11.6px;
|
|
81
81
|
margin-top: 5px;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
pixflow-upgrade-planning > div.postpace > div > div > div {
|
|
85
85
|
display: flex;
|
|
86
86
|
flex-direction: column;
|
|
87
87
|
align-items: center;
|
|
@@ -95,12 +95,12 @@
|
|
|
95
95
|
margin: 5px;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
|
|
98
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div.active {
|
|
99
99
|
box-shadow: 0 0;
|
|
100
100
|
border: 2px solid #3C49B3;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
|
|
103
|
+
pixflow-upgrade-planning > div.postpace > button {
|
|
104
104
|
width: 147px;
|
|
105
105
|
height: 34px;
|
|
106
106
|
margin-top: 38px;
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
transition: filter 200ms;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
pixflow-upgrade-planning > div.postpace > div:nth-child(5) {
|
|
114
114
|
font-family: Inter;
|
|
115
115
|
font-size: 13px;
|
|
116
116
|
font-weight: normal;
|
|
@@ -121,15 +121,15 @@
|
|
|
121
121
|
transition: filter 200ms;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
pixflow-upgrade-planning > div.postpace > button:hover {
|
|
125
125
|
background-color: #014CCE;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
|
|
128
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div.active > div:nth-child(3) {
|
|
129
129
|
width: 12px;
|
|
130
130
|
height: 12px;
|
|
131
131
|
position: absolute;
|
|
132
|
-
background-image: url(
|
|
132
|
+
background-image: url(./node_modules/pixflow-upgrade-planning/images/tick.svg);
|
|
133
133
|
background-color: #005dff;
|
|
134
134
|
border-radius: 6px;
|
|
135
135
|
background-position: center center;
|
|
@@ -137,17 +137,17 @@
|
|
|
137
137
|
margin: 5px 0 0 65px;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
|
|
140
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div > div:nth-child(2) > del {
|
|
141
141
|
color: gray;
|
|
142
142
|
font-size: 10px;
|
|
143
143
|
margin-left: 5px;
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
|
|
146
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > div > img {
|
|
147
147
|
height: 57px
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
|
|
150
|
+
pixflow-upgrade-planning > div.postpace > p:nth-child(4) {
|
|
151
151
|
font-size: 17px;
|
|
152
152
|
line-height: 22px;
|
|
153
153
|
color: #fff;
|
|
@@ -156,43 +156,43 @@
|
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
|
|
159
|
-
|
|
159
|
+
pixflow-upgrade-planning > div.postpace > p:nth-child(5) > img {
|
|
160
160
|
width: 10px;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
-
|
|
163
|
+
pixflow-upgrade-planning > div.postpace > p:nth-child(5) {
|
|
164
164
|
font-size: 11px;
|
|
165
165
|
color: white;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
|
|
168
|
+
pixflow-upgrade-planning > div.postpace > div.activate-code {
|
|
169
169
|
color: #7C879A;
|
|
170
170
|
font-size: 13px;
|
|
171
171
|
margin: 15px 0;
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
-
a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right,
|
|
174
|
+
a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right, pixflow-upgrade-planning > div.postpace > div.plan > div, #activate, #dashboard > div, #dashboard img, .apply, .unlock, #customize > div.params > div.header > div, pixflow-upgrade-planning > div.postpace > div.activate-code, .view-details, body > div.right-side > div.header > div.views > img.view-small-icon {
|
|
175
175
|
cursor: pointer;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
|
|
178
|
+
pixflow-upgrade-planning > div.postpace > div.activate-code {
|
|
179
179
|
color: #7C879A;
|
|
180
180
|
font-size: 13px;
|
|
181
181
|
margin: 15px 0;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
|
-
|
|
184
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div {
|
|
185
185
|
display: flex;
|
|
186
186
|
flex-direction: column;
|
|
187
187
|
align-items: center;
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
-
|
|
190
|
+
pixflow-upgrade-planning > div.postpace > div.plan > div > p, pixflow-upgrade-planning > div.postpace > div.plan > div > div > div:nth-child(2) {
|
|
191
191
|
color: #fff;
|
|
192
192
|
font-size: 12px;
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
|
|
195
|
+
pixflow-upgrade-planning > div.postpace > div.container-button {
|
|
196
196
|
top: calc(100vh - 125px);
|
|
197
197
|
position: absolute;
|
|
198
198
|
display: flex;
|
|
@@ -203,23 +203,23 @@ a, .btn, button, ul > li > div, ul > li > img, ul > li > div.arrow.right, #upgra
|
|
|
203
203
|
background: linear-gradient(0deg, #0C0C0C 0%, #0C0C0C 77%, #ffffff00 100%);
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
|
|
206
|
+
pixflow-upgrade-planning > div.postpace > div.container-button > div.button {
|
|
207
207
|
cursor: pointer;
|
|
208
|
-
background-image: url(./images/postpace-button.svg);
|
|
208
|
+
background-image: url(./node_modules/pixflow-upgrade-planning/images/postpace/postpace-button.svg);
|
|
209
209
|
width: 167px;
|
|
210
210
|
height: 48px;
|
|
211
211
|
}
|
|
212
212
|
|
|
213
|
-
|
|
214
|
-
background-image: url(./images/postpace-button-hover.svg);
|
|
213
|
+
pixflow-upgrade-planning > div.postpace > div.container-button > div.button:hover {
|
|
214
|
+
background-image: url(./node_modules/pixflow-upgrade-planning/images/postpace/postpace-button-hover.svg);
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
|
|
217
|
+
pixflow-upgrade-planning > div.postpace > img:nth-child(2) {
|
|
218
218
|
margin-top: 12px;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
div.
|
|
222
|
-
background-image: url(./images/drawer.svg);
|
|
221
|
+
pixflow-upgrade-planning div.close {
|
|
222
|
+
background-image: url(./node_modules/pixflow-upgrade-planning/images/drawer.svg);
|
|
223
223
|
background-repeat: no-repeat;
|
|
224
224
|
background-position: center center;
|
|
225
225
|
width: 73px;
|
package/template.html
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
|
|
58
58
|
<div class="purchase-code">
|
|
59
59
|
<div></div>
|
|
60
|
-
<img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="
|
|
60
|
+
<img src="./node_modules/pixflow-upgrade-planning/images/drawer.svg" class="close">
|
|
61
61
|
<img src="./node_modules/pixflow-upgrade-planning/images/pixflow/purchase-code.svg">
|
|
62
62
|
<p class="describe">Use the code you received after the purchase process to activate the plugin</p>
|
|
63
63
|
<form>
|
|
File without changes
|