@vuepress/plugin-pwa 2.0.0-rc.44 → 2.0.0-rc.46

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 (7) hide show
  1. package/lib/client/styles/modal.css +1 -400
  2. package/lib/client/styles/modal.css.map +1 -0
  3. package/lib/client/styles/popup.css +1 -66
  4. package/lib/client/styles/popup.css.map +1 -0
  5. package/lib/client/styles/vars.css +1 -12
  6. package/lib/client/styles/vars.css.map +1 -0
  7. package/package.json +4 -4
package/lib/client/styles/modal.css CHANGED
@@ -1,400 +1 @@
1
- @keyframes pwa-opened {
2
- from {
3
- opacity: 0.4;
4
- transform: scale(0.8, 0.8);
5
- }
6
- to {
7
- opacity: 1;
8
- transform: scale(1, 1);
9
- }
10
- }
11
- @keyframes pwa-mobile {
12
- from {
13
- opacity: 0.6;
14
- }
15
- to {
16
- opacity: 1;
17
- }
18
- }
19
- @keyframes pwa-fade-in {
20
- from {
21
- opacity: 0.2;
22
- }
23
- to {
24
- opacity: 1;
25
- }
26
- }
27
- .modal-button {
28
- position: fixed;
29
- right: 1rem;
30
- bottom: 1rem;
31
- z-index: 50;
32
- padding: 0 16px;
33
- border-width: 0;
34
- border-radius: 1.2rem;
35
- background: var(--pwa-c-accent-bg);
36
- color: var(--pwa-c-accent-text);
37
- outline: none;
38
- font-weight: 600;
39
- line-height: 2.2rem;
40
- cursor: pointer;
41
- transition: background 0.3s, color 0.3s;
42
- }
43
- @media (display-mode: standalone) {
44
- .modal-button {
45
- display: none;
46
- }
47
- }
48
- @media print {
49
- .modal-button {
50
- display: none;
51
- }
52
- }
53
- .modal-button:hover, .modal-button:active {
54
- background: var(--pwa-c-accent-hover);
55
- }
56
-
57
- #install-modal-wrapper {
58
- position: fixed;
59
- top: 0;
60
- left: 0;
61
- z-index: 997;
62
- display: flex;
63
- align-items: center;
64
- justify-content: center;
65
- overflow: auto;
66
- width: 100vw;
67
- height: 100vh;
68
- }
69
- @media print {
70
- #install-modal-wrapper {
71
- display: none;
72
- }
73
- }
74
- #install-modal-wrapper button {
75
- border-width: 0;
76
- background: transparent;
77
- cursor: pointer;
78
- }
79
- #install-modal-wrapper .background {
80
- position: fixed;
81
- inset: 0;
82
- z-index: 998;
83
- backdrop-filter: blur(10px);
84
- animation: 0.25s pwa-fade-in;
85
- }
86
- #install-modal-wrapper .install-modal {
87
- position: absolute;
88
- z-index: 999;
89
- display: flex;
90
- flex-direction: column;
91
- max-width: 56em;
92
- border-radius: 10px;
93
- background: var(--pwa-c-bg);
94
- transition: background 0.3s;
95
- animation: 0.15s pwa-opened;
96
- }
97
- @media (max-width: 1280px) {
98
- #install-modal-wrapper .install-modal {
99
- width: 92%;
100
- animation: 0.25s pwa-mobile;
101
- }
102
- }
103
- @media (max-width: 419px) {
104
- #install-modal-wrapper .install-modal {
105
- overflow-y: auto;
106
- max-height: 80%;
107
- }
108
- #install-modal-wrapper .install-modal::-webkit-scrollbar {
109
- display: none;
110
- }
111
- }
112
- #install-modal-wrapper .header {
113
- margin: 40px 40px 32px;
114
- }
115
- @media (max-width: 959px) {
116
- #install-modal-wrapper .header {
117
- margin-bottom: 24px;
118
- }
119
- }
120
- @media (max-width: 719px) {
121
- #install-modal-wrapper .header {
122
- margin: 20px;
123
- }
124
- }
125
- #install-modal-wrapper .header .close-button {
126
- float: right;
127
- border-width: 0;
128
- background: transparent;
129
- color: var(--pwa-c-text);
130
- cursor: pointer;
131
- transition: color 0.3s ease;
132
- }
133
- #install-modal-wrapper .header .close-button:hover, #install-modal-wrapper .header .close-button:focus {
134
- color: var(--pwa-c-text-mute);
135
- }
136
- #install-modal-wrapper .header .logo {
137
- display: flex;
138
- }
139
- #install-modal-wrapper .header h1 {
140
- margin-top: 0;
141
- margin-bottom: 7px;
142
- color: var(--pwa-c-text-mute);
143
- font-size: 34px;
144
- }
145
- @media (max-width: 959px) {
146
- #install-modal-wrapper .header h1 {
147
- margin-bottom: 0;
148
- }
149
- }
150
- @media (max-width: 419px) {
151
- #install-modal-wrapper .header h1 {
152
- font-size: 26px;
153
- }
154
- }
155
- #install-modal-wrapper .header img {
156
- width: 122px;
157
- height: 122px;
158
- margin-inline-end: 24px;
159
- padding: 12px;
160
- border-radius: 24px;
161
- }
162
- @media (max-width: 959px) {
163
- #install-modal-wrapper .header img {
164
- width: 60px;
165
- height: 60px;
166
- }
167
- }
168
- @media (max-width: 719px) {
169
- #install-modal-wrapper .header img {
170
- margin-inline-end: 12px;
171
- padding: 8px;
172
- }
173
- }
174
- @media (max-width: 419px) {
175
- #install-modal-wrapper .header img {
176
- width: 40px;
177
- height: 40px;
178
- padding: 6px;
179
- }
180
- }
181
- #install-modal-wrapper .header .desc {
182
- overflow: hidden;
183
- max-width: 40em;
184
- color: #888;
185
- font-size: 14px;
186
- text-overflow: ellipsis;
187
- white-space: pre-wrap;
188
- }
189
- @media (max-width: 959px) {
190
- #install-modal-wrapper .header .desc {
191
- display: none;
192
- }
193
- }
194
- #install-modal-wrapper .content {
195
- flex: 1;
196
- margin: 0 40px;
197
- color: var(--pwa-c-text);
198
- }
199
- @media (max-width: 719px) {
200
- #install-modal-wrapper .content {
201
- margin: 0 20px;
202
- }
203
- }
204
- #install-modal-wrapper .content h3 {
205
- margin-bottom: 12px;
206
- font-size: 22px;
207
- }
208
- #install-modal-wrapper .content p {
209
- font-size: 14px;
210
- }
211
- #install-modal-wrapper .highlight {
212
- display: flex;
213
- align-items: center;
214
- justify-content: space-around;
215
- margin-inline-end: 20px;
216
- }
217
- @media (max-width: 719px) {
218
- #install-modal-wrapper .highlight {
219
- flex-direction: column;
220
- align-items: flex-start;
221
- margin-inline-end: 0;
222
- }
223
- }
224
- #install-modal-wrapper .highlight h3 {
225
- margin-top: 0;
226
- font-weight: 600;
227
- font-size: 22px;
228
- line-height: 225%;
229
- }
230
- @media (max-width: 419px) {
231
- #install-modal-wrapper .highlight h3 {
232
- margin-bottom: 0;
233
- font-size: 18px;
234
- }
235
- }
236
- #install-modal-wrapper .feature-wrapper {
237
- overflow: hidden;
238
- padding-inline-end: 2em;
239
- }
240
- #install-modal-wrapper .feature-wrapper ul {
241
- margin-block-start: 12px;
242
- padding-inline-start: 22px;
243
- }
244
- @media (max-width: 419px) {
245
- #install-modal-wrapper .feature-wrapper ul {
246
- margin-top: 0;
247
- }
248
- }
249
- #install-modal-wrapper .feature-wrapper li {
250
- color: var(--pwa-c-text-mute);
251
- font-weight: 600;
252
- font-size: 16px;
253
- line-height: 29px;
254
- transition: color 0.3s;
255
- }
256
- #install-modal-wrapper .screenshot-wrapper {
257
- display: flex;
258
- max-width: 30em;
259
- max-height: 220px;
260
- }
261
- @media (max-width: 719px) {
262
- #install-modal-wrapper .screenshot-wrapper {
263
- width: 100%;
264
- }
265
- }
266
- #install-modal-wrapper .screenshot-wrapper button {
267
- width: 4em;
268
- border-width: 0;
269
- background: transparent;
270
- cursor: pointer;
271
- transition: background 0.3s;
272
- }
273
- #install-modal-wrapper .screenshot-wrapper button:hover, #install-modal-wrapper .screenshot-wrapper button:focus {
274
- background: #bbb;
275
- }
276
- #install-modal-wrapper .screenshot-wrapper button svg {
277
- width: 28px;
278
- fill: #6b6969;
279
- }
280
- #install-modal-wrapper .screenshot {
281
- display: flex;
282
- flex-flow: column wrap;
283
- overflow-x: auto;
284
- width: 22em;
285
- max-height: 220px;
286
- scroll-snap-type: x mandatory;
287
- -webkit-overflow-scrolling: touch;
288
- }
289
- @media (max-width: 1280px) {
290
- #install-modal-wrapper .screenshot {
291
- justify-content: center;
292
- }
293
- }
294
- #install-modal-wrapper .screenshot::-webkit-scrollbar {
295
- display: none;
296
- }
297
- #install-modal-wrapper .screenshot div {
298
- display: flex;
299
- align-items: center;
300
- justify-content: center;
301
- width: 100%;
302
- height: 14em;
303
- background: #efefef;
304
- scroll-snap-align: start;
305
- }
306
- #install-modal-wrapper .screenshot img {
307
- object-fit: contain;
308
- height: 100%;
309
- }
310
- @media (max-width: 719px) {
311
- #install-modal-wrapper .screenshot img {
312
- height: 180px;
313
- }
314
- }
315
- #install-modal-wrapper .description {
316
- margin-bottom: 3em;
317
- }
318
- #install-modal-wrapper .button-wrapper {
319
- width: 100%;
320
- padding: 1rem 0;
321
- text-align: end;
322
- }
323
- @media (max-width: 719px) {
324
- #install-modal-wrapper .button-wrapper {
325
- text-align: center;
326
- }
327
- }
328
- #install-modal-wrapper .install-button,
329
- #install-modal-wrapper .cancel-button {
330
- display: inline-block;
331
- flex: 0 0 auto;
332
- min-width: 80px;
333
- margin: 0.5rem 1rem;
334
- padding: 0.5rem 1rem;
335
- border-radius: 20px;
336
- background: transparent;
337
- font-weight: 600;
338
- font-size: 14px;
339
- cursor: pointer;
340
- }
341
- #install-modal-wrapper .install-button {
342
- background: var(--pwa-c-accent-bg);
343
- color: var(--pwa-c-accent-text);
344
- transition: color 0.3s;
345
- }
346
- #install-modal-wrapper .install-button:hover, #install-modal-wrapper .install-button:focus {
347
- background: var(--pwa-c-accent-hover);
348
- }
349
- @media (max-width: 419px) {
350
- #install-modal-wrapper .install-button span {
351
- display: none;
352
- }
353
- }
354
- #install-modal-wrapper .cancel-button {
355
- background: var(--pwa-c-control);
356
- color: var(--pwa-c-text);
357
- }
358
- #install-modal-wrapper .cancel-button:hover, #install-modal-wrapper .cancel-button:focus {
359
- background: var(--pwa-c-control-hover);
360
- }
361
- #install-modal-wrapper .ios-text {
362
- position: fixed;
363
- bottom: 0;
364
- box-sizing: border-box;
365
- width: 92%;
366
- margin: 2em auto;
367
- padding: 0.5em 2em;
368
- border-radius: 8px;
369
- background: var(--pwa-c-bg);
370
- box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);
371
- font-weight: bold;
372
- font-size: 14px;
373
- text-align: center;
374
- transition: background 0.3s, box-shadow 0.3s;
375
- }
376
- #install-modal-wrapper .ios-text::after {
377
- content: " ";
378
- position: absolute;
379
- bottom: -1em;
380
- left: calc(50% - 0.8em);
381
- width: 0;
382
- height: 0;
383
- border-top: 1em solid var(--pwa-c-bg);
384
- border-right: 0.8em solid transparent;
385
- border-left: 0.8em solid transparent;
386
- transition: border-color 0.3s;
387
- }
388
- #install-modal-wrapper .ios-text p {
389
- margin: 0 0 0.5em;
390
- }
391
- #install-modal-wrapper .ios-text .success {
392
- margin-bottom: 0.5em;
393
- padding: 0.5em 1em;
394
- border: none;
395
- border-radius: 1em;
396
- background: #07c160;
397
- color: var(--pwa-c-bg);
398
- cursor: pointer;
399
- transition: color 0.3s;
400
- }
1
+ @keyframes pwa-opened{from{opacity:.4;transform:scale(0.8, 0.8)}to{opacity:1;transform:scale(1, 1)}}@keyframes pwa-mobile{from{opacity:.6}to{opacity:1}}@keyframes pwa-fade-in{from{opacity:.2}to{opacity:1}}.modal-button{position:fixed;right:1rem;bottom:1rem;z-index:50;padding:0 16px;border-width:0;border-radius:1.2rem;background:var(--pwa-c-accent-bg);color:var(--pwa-c-accent-text);outline:none;font-weight:600;line-height:2.2rem;cursor:pointer;transition:background .3s,color .3s}@media(display-mode: standalone){.modal-button{display:none}}@media print{.modal-button{display:none}}.modal-button:hover,.modal-button:active{background:var(--pwa-c-accent-hover)}#install-modal-wrapper{position:fixed;top:0;left:0;z-index:997;display:flex;align-items:center;justify-content:center;overflow:auto;width:100vw;height:100vh}@media print{#install-modal-wrapper{display:none}}#install-modal-wrapper button{border-width:0;background:rgba(0,0,0,0);cursor:pointer}#install-modal-wrapper .background{position:fixed;inset:0;z-index:998;backdrop-filter:blur(10px);animation:.25s pwa-fade-in}#install-modal-wrapper .install-modal{position:absolute;z-index:999;display:flex;flex-direction:column;max-width:56em;border-radius:10px;background:var(--pwa-c-bg);transition:background .3s;animation:.15s pwa-opened}@media(max-width: 1280px){#install-modal-wrapper .install-modal{width:92%;animation:.25s pwa-mobile}}@media(max-width: 419px){#install-modal-wrapper .install-modal{overflow-y:auto;max-height:80%}#install-modal-wrapper .install-modal::-webkit-scrollbar{display:none}}#install-modal-wrapper .header{margin:40px 40px 32px}@media(max-width: 959px){#install-modal-wrapper .header{margin-bottom:24px}}@media(max-width: 719px){#install-modal-wrapper .header{margin:20px}}#install-modal-wrapper .header .close-button{float:right;border-width:0;background:rgba(0,0,0,0);color:var(--pwa-c-text);cursor:pointer;transition:color .3s ease}#install-modal-wrapper .header .close-button:hover,#install-modal-wrapper .header .close-button:focus{color:var(--pwa-c-text-mute)}#install-modal-wrapper .header .logo{display:flex}#install-modal-wrapper .header h1{margin-top:0;margin-bottom:7px;color:var(--pwa-c-text-mute);font-size:34px}@media(max-width: 959px){#install-modal-wrapper .header h1{margin-bottom:0}}@media(max-width: 419px){#install-modal-wrapper .header h1{font-size:26px}}#install-modal-wrapper .header img{width:122px;height:122px;margin-inline-end:24px;padding:12px;border-radius:24px}@media(max-width: 959px){#install-modal-wrapper .header img{width:60px;height:60px}}@media(max-width: 719px){#install-modal-wrapper .header img{margin-inline-end:12px;padding:8px}}@media(max-width: 419px){#install-modal-wrapper .header img{width:40px;height:40px;padding:6px}}#install-modal-wrapper .header .desc{overflow:hidden;max-width:40em;color:#888;font-size:14px;text-overflow:ellipsis;white-space:pre-wrap}@media(max-width: 959px){#install-modal-wrapper .header .desc{display:none}}#install-modal-wrapper .content{flex:1;margin:0 40px;color:var(--pwa-c-text)}@media(max-width: 719px){#install-modal-wrapper .content{margin:0 20px}}#install-modal-wrapper .content h3{margin-bottom:12px;font-size:22px}#install-modal-wrapper .content p{font-size:14px}#install-modal-wrapper .highlight{display:flex;align-items:center;justify-content:space-around;margin-inline-end:20px}@media(max-width: 719px){#install-modal-wrapper .highlight{flex-direction:column;align-items:flex-start;margin-inline-end:0}}#install-modal-wrapper .highlight h3{margin-top:0;font-weight:600;font-size:22px;line-height:225%}@media(max-width: 419px){#install-modal-wrapper .highlight h3{margin-bottom:0;font-size:18px}}#install-modal-wrapper .feature-wrapper{overflow:hidden;padding-inline-end:2em}#install-modal-wrapper .feature-wrapper ul{margin-block-start:12px;padding-inline-start:22px}@media(max-width: 419px){#install-modal-wrapper .feature-wrapper ul{margin-top:0}}#install-modal-wrapper .feature-wrapper li{color:var(--pwa-c-text-mute);font-weight:600;font-size:16px;line-height:29px;transition:color .3s}#install-modal-wrapper .screenshot-wrapper{display:flex;max-width:30em;max-height:220px}@media(max-width: 719px){#install-modal-wrapper .screenshot-wrapper{width:100%}}#install-modal-wrapper .screenshot-wrapper button{width:4em;border-width:0;background:rgba(0,0,0,0);cursor:pointer;transition:background .3s}#install-modal-wrapper .screenshot-wrapper button:hover,#install-modal-wrapper .screenshot-wrapper button:focus{background:#bbb}#install-modal-wrapper .screenshot-wrapper button svg{width:28px;fill:#6b6969}#install-modal-wrapper .screenshot{display:flex;flex-flow:column wrap;overflow-x:auto;width:22em;max-height:220px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}@media(max-width: 1280px){#install-modal-wrapper .screenshot{justify-content:center}}#install-modal-wrapper .screenshot::-webkit-scrollbar{display:none}#install-modal-wrapper .screenshot div{display:flex;align-items:center;justify-content:center;width:100%;height:14em;background:#efefef;scroll-snap-align:start}#install-modal-wrapper .screenshot img{object-fit:contain;height:100%}@media(max-width: 719px){#install-modal-wrapper .screenshot img{height:180px}}#install-modal-wrapper .description{margin-bottom:3em}#install-modal-wrapper .button-wrapper{width:100%;padding:1rem 0;text-align:end}@media(max-width: 719px){#install-modal-wrapper .button-wrapper{text-align:center}}#install-modal-wrapper .install-button,#install-modal-wrapper .cancel-button{display:inline-block;flex:0 0 auto;min-width:80px;margin:.5rem 1rem;padding:.5rem 1rem;border-radius:20px;background:rgba(0,0,0,0);font-weight:600;font-size:14px;cursor:pointer}#install-modal-wrapper .install-button{background:var(--pwa-c-accent-bg);color:var(--pwa-c-accent-text);transition:color .3s}#install-modal-wrapper .install-button:hover,#install-modal-wrapper .install-button:focus{background:var(--pwa-c-accent-hover)}@media(max-width: 419px){#install-modal-wrapper .install-button span{display:none}}#install-modal-wrapper .cancel-button{background:var(--pwa-c-control);color:var(--pwa-c-text)}#install-modal-wrapper .cancel-button:hover,#install-modal-wrapper .cancel-button:focus{background:var(--pwa-c-control-hover)}#install-modal-wrapper .ios-text{position:fixed;bottom:0;box-sizing:border-box;width:92%;margin:2em auto;padding:.5em 2em;border-radius:8px;background:var(--pwa-c-bg);box-shadow:0 2px 12px 0 var(--pwa-c-shadow);font-weight:bold;font-size:14px;text-align:center;transition:background .3s,box-shadow .3s}#install-modal-wrapper .ios-text::after{content:" ";position:absolute;bottom:-1em;left:calc(50% - .8em);width:0;height:0;border-top:1em solid var(--pwa-c-bg);border-right:.8em solid rgba(0,0,0,0);border-left:.8em solid rgba(0,0,0,0);transition:border-color .3s}#install-modal-wrapper .ios-text p{margin:0 0 .5em}#install-modal-wrapper .ios-text .success{margin-bottom:.5em;padding:.5em 1em;border:none;border-radius:1em;background:#07c160;color:var(--pwa-c-bg);cursor:pointer;transition:color .3s}/*# sourceMappingURL=modal.css.map */
package/lib/client/styles/modal.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/client/styles/modal.scss"],"names":[],"mappings":"AAAA,sBACE,KACE,WACA,0BAGF,GACE,UACA,uBAIJ,sBACE,KACE,WAGF,GACE,WAIJ,uBACE,KACE,WAGF,GACE,WAIJ,cACE,eACA,WACA,YACA,WAEA,eACA,eACA,qBAEA,kCACA,+BACA,aAEA,gBACA,mBAEA,eAEA,WACE,yBAGF,iCAvBF,cAwBI,cAGF,aA3BF,cA4BI,cAGF,yCAEE,qCAIJ,uBACE,eACA,MACA,OACA,YAEA,aACA,mBACA,uBAEA,cAEA,YACA,aAEA,aAfF,uBAgBI,cAGF,8BACE,eACA,yBACA,eAGF,mCACE,eACA,QACA,YAEA,2BAEA,2BAGF,sCACE,kBACA,YAEA,aACA,sBAEA,eACA,mBAEA,2BAEA,0BAEA,0BAEA,0BAhBF,sCAiBI,UACA,2BAGF,yBArBF,sCAsBI,gBACA,eAEA,yDACE,cAKN,+BACE,sBAEA,yBAHF,+BAII,oBAGF,yBAPF,+BAQI,aAGF,6CACE,YAEA,eAEA,yBACA,wBAEA,eAEA,0BAEA,sGAEE,6BAIJ,qCACE,aAGF,kCACE,aACA,kBACA,6BACA,eAEA,yBANF,kCAOI,iBAGF,yBAVF,kCAWI,gBAIJ,mCACE,YACA,aACA,uBACA,aACA,mBAEA,yBAPF,mCAQI,WACA,aAGF,yBAZF,mCAaI,uBACA,aAGF,yBAjBF,mCAkBI,WACA,YACA,aAIJ,qCACE,gBAEA,eAEA,WAEA,eACA,uBACA,qBAEA,yBAXF,qCAYI,cAKN,gCACE,OACA,cACA,wBAEA,yBALF,gCAMI,eAGF,mCACE,mBACA,eAGF,kCACE,eAIJ,kCACE,aACA,mBACA,6BACA,uBAEA,yBANF,kCAOI,sBACA,uBACA,qBAGF,qCACE,aACA,gBACA,eACA,iBAEA,yBANF,qCAOI,gBACA,gBAKN,wCACE,gBACA,uBAEA,2CACE,wBACA,0BAEA,yBAJF,2CAKI,cAIJ,2CACE,6BAEA,gBACA,eACA,iBAEA,qBAIJ,2CACE,aACA,eACA,iBAEA,yBALF,2CAMI,YAGF,kDACE,UACA,eAEA,yBAEA,eAEA,0BAEA,gHAEE,gBAGF,sDACE,WACA,aAKN,mCACE,aACA,sBAEA,gBAEA,WACA,iBAEA,6BAEA,iCAEA,0BAbF,mCAcI,wBAGF,sDACE,aAGF,uCACE,aACA,mBACA,uBAEA,WACA,YAEA,mBAEA,wBAGF,uCACE,mBACA,YAEA,yBAJF,uCAKI,cAKN,oCACE,kBAGF,uCACE,WACA,eACA,eAEA,yBALF,uCAMI,mBAIJ,6EAEE,qBACA,cAEA,eACA,kBACA,mBACA,mBAEA,yBAEA,gBACA,eAEA,eAGF,uCACE,kCACA,+BACA,qBAEA,0FAEE,qCAIA,yBADF,4CAEI,cAKN,sCACE,gCACA,wBAEA,wFAEE,sCAIJ,iCACE,eACA,SAEA,sBACA,UACA,gBACA,iBACA,kBAEA,2BACA,4CAEA,iBACA,eACA,kBAEA,WACE,8BAGF,wCACE,YAEA,kBACA,YACA,sBAEA,QACA,SACA,qCACA,sCACA,qCAEA,4BAGF,mCACE,gBAGF,0CACE,mBACA,iBACA,YACA,kBAEA,mBACA,sBAEA,eAEA","file":"modal.css","sourcesContent":["@keyframes pwa-opened {\n from {\n opacity: 0.4;\n transform: scale(0.8, 0.8);\n }\n\n to {\n opacity: 1;\n transform: scale(1, 1);\n }\n}\n\n@keyframes pwa-mobile {\n from {\n opacity: 0.6;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes pwa-fade-in {\n from {\n opacity: 0.2;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.modal-button {\n position: fixed;\n right: 1rem;\n bottom: 1rem;\n z-index: 50;\n\n padding: 0 16px;\n border-width: 0;\n border-radius: 1.2rem;\n\n background: var(--pwa-c-accent-bg);\n color: var(--pwa-c-accent-text);\n outline: none;\n\n font-weight: 600;\n line-height: 2.2rem;\n\n cursor: pointer;\n\n transition:\n background 0.3s,\n color 0.3s;\n\n @media (display-mode: standalone) {\n display: none;\n }\n\n @media print {\n display: none;\n }\n\n &:hover,\n &:active {\n background: var(--pwa-c-accent-hover);\n }\n}\n\n#install-modal-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 997;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n overflow: auto;\n\n width: 100vw;\n height: 100vh;\n\n @media print {\n display: none;\n }\n\n button {\n border-width: 0;\n background: transparent;\n cursor: pointer;\n }\n\n .background {\n position: fixed;\n inset: 0;\n z-index: 998;\n\n backdrop-filter: blur(10px);\n\n animation: 0.25s pwa-fade-in;\n }\n\n .install-modal {\n position: absolute;\n z-index: 999;\n\n display: flex;\n flex-direction: column;\n\n max-width: 56em;\n border-radius: 10px;\n\n background: var(--pwa-c-bg);\n\n transition: background 0.3s;\n\n animation: 0.15s pwa-opened;\n\n @media (max-width: 1280px) {\n width: 92%;\n animation: 0.25s pwa-mobile;\n }\n\n @media (max-width: 419px) {\n overflow-y: auto;\n max-height: 80%;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .header {\n margin: 40px 40px 32px;\n\n @media (max-width: 959px) {\n margin-bottom: 24px;\n }\n\n @media (max-width: 719px) {\n margin: 20px;\n }\n\n .close-button {\n float: right;\n\n border-width: 0;\n\n background: transparent;\n color: var(--pwa-c-text);\n\n cursor: pointer;\n\n transition: color 0.3s ease;\n\n &:hover,\n &:focus {\n color: var(--pwa-c-text-mute);\n }\n }\n\n .logo {\n display: flex;\n }\n\n h1 {\n margin-top: 0;\n margin-bottom: 7px;\n color: var(--pwa-c-text-mute);\n font-size: 34px;\n\n @media (max-width: 959px) {\n margin-bottom: 0;\n }\n\n @media (max-width: 419px) {\n font-size: 26px;\n }\n }\n\n img {\n width: 122px;\n height: 122px;\n margin-inline-end: 24px;\n padding: 12px;\n border-radius: 24px;\n\n @media (max-width: 959px) {\n width: 60px;\n height: 60px;\n }\n\n @media (max-width: 719px) {\n margin-inline-end: 12px;\n padding: 8px;\n }\n\n @media (max-width: 419px) {\n width: 40px;\n height: 40px;\n padding: 6px;\n }\n }\n\n .desc {\n overflow: hidden;\n\n max-width: 40em;\n\n color: #888;\n\n font-size: 14px;\n text-overflow: ellipsis;\n white-space: pre-wrap;\n\n @media (max-width: 959px) {\n display: none;\n }\n }\n }\n\n .content {\n flex: 1;\n margin: 0 40px;\n color: var(--pwa-c-text);\n\n @media (max-width: 719px) {\n margin: 0 20px;\n }\n\n h3 {\n margin-bottom: 12px;\n font-size: 22px;\n }\n\n p {\n font-size: 14px;\n }\n }\n\n .highlight {\n display: flex;\n align-items: center;\n justify-content: space-around;\n margin-inline-end: 20px;\n\n @media (max-width: 719px) {\n flex-direction: column;\n align-items: flex-start;\n margin-inline-end: 0;\n }\n\n h3 {\n margin-top: 0;\n font-weight: 600;\n font-size: 22px;\n line-height: 225%;\n\n @media (max-width: 419px) {\n margin-bottom: 0;\n font-size: 18px;\n }\n }\n }\n\n .feature-wrapper {\n overflow: hidden;\n padding-inline-end: 2em;\n\n ul {\n margin-block-start: 12px;\n padding-inline-start: 22px;\n\n @media (max-width: 419px) {\n margin-top: 0;\n }\n }\n\n li {\n color: var(--pwa-c-text-mute);\n\n font-weight: 600;\n font-size: 16px;\n line-height: 29px;\n\n transition: color 0.3s;\n }\n }\n\n .screenshot-wrapper {\n display: flex;\n max-width: 30em;\n max-height: 220px;\n\n @media (max-width: 719px) {\n width: 100%;\n }\n\n button {\n width: 4em;\n border-width: 0;\n\n background: transparent;\n\n cursor: pointer;\n\n transition: background 0.3s;\n\n &:hover,\n &:focus {\n background: #bbb;\n }\n\n svg {\n width: 28px;\n fill: #6b6969;\n }\n }\n }\n\n .screenshot {\n display: flex;\n flex-flow: column wrap;\n\n overflow-x: auto;\n\n width: 22em;\n max-height: 220px;\n\n scroll-snap-type: x mandatory;\n\n -webkit-overflow-scrolling: touch;\n\n @media (max-width: 1280px) {\n justify-content: center;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n div {\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 14em;\n\n background: #efefef;\n\n scroll-snap-align: start;\n }\n\n img {\n object-fit: contain;\n height: 100%;\n\n @media (max-width: 719px) {\n height: 180px;\n }\n }\n }\n\n .description {\n margin-bottom: 3em;\n }\n\n .button-wrapper {\n width: 100%;\n padding: 1rem 0;\n text-align: end;\n\n @media (max-width: 719px) {\n text-align: center;\n }\n }\n\n .install-button,\n .cancel-button {\n display: inline-block;\n flex: 0 0 auto;\n\n min-width: 80px;\n margin: 0.5rem 1rem;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n\n background: transparent;\n\n font-weight: 600;\n font-size: 14px;\n\n cursor: pointer;\n }\n\n .install-button {\n background: var(--pwa-c-accent-bg);\n color: var(--pwa-c-accent-text);\n transition: color 0.3s;\n\n &:hover,\n &:focus {\n background: var(--pwa-c-accent-hover);\n }\n\n span {\n @media (max-width: 419px) {\n display: none;\n }\n }\n }\n\n .cancel-button {\n background: var(--pwa-c-control);\n color: var(--pwa-c-text);\n\n &:hover,\n &:focus {\n background: var(--pwa-c-control-hover);\n }\n }\n\n .ios-text {\n position: fixed;\n bottom: 0;\n\n box-sizing: border-box;\n width: 92%;\n margin: 2em auto;\n padding: 0.5em 2em;\n border-radius: 8px;\n\n background: var(--pwa-c-bg);\n box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);\n\n font-weight: bold;\n font-size: 14px;\n text-align: center;\n\n transition:\n background 0.3s,\n box-shadow 0.3s;\n\n &::after {\n content: ' ';\n\n position: absolute;\n bottom: -1em;\n left: calc(50% - 0.8em);\n\n width: 0;\n height: 0;\n border-top: 1em solid var(--pwa-c-bg);\n border-right: 0.8em solid transparent;\n border-left: 0.8em solid transparent;\n\n transition: border-color 0.3s;\n }\n\n p {\n margin: 0 0 0.5em;\n }\n\n .success {\n margin-bottom: 0.5em;\n padding: 0.5em 1em;\n border: none;\n border-radius: 1em;\n\n background: #07c160;\n color: var(--pwa-c-bg);\n\n cursor: pointer;\n\n transition: color 0.3s;\n }\n }\n}\n"]}
package/lib/client/styles/popup.css CHANGED
@@ -1,66 +1 @@
1
- @keyframes rotate {
2
- 0% {
3
- transform: rotate(0deg);
4
- }
5
- 50% {
6
- transform: rotate(360deg);
7
- }
8
- 100% {
9
- transform: rotate(360deg);
10
- }
11
- }
12
- .popup-enter-active,
13
- .popup-leave-active {
14
- transition: opacity 0.3s, transform 0.3s;
15
- }
16
-
17
- .popup-enter-from,
18
- .popup-leave-to {
19
- opacity: 0;
20
- transform: translate(0, 50%) scale(0.5);
21
- }
22
-
23
- .sw-hint-popup,
24
- .sw-update-popup {
25
- position: fixed;
26
- inset-inline-end: 1rem;
27
- bottom: 1rem;
28
- z-index: var(--pwa-z-index);
29
- padding: 0.5rem 0.75rem;
30
- border-width: 0;
31
- border-radius: 0.5rem;
32
- background: var(--pwa-c-bg);
33
- color: var(--pwa-c-text);
34
- box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);
35
- font-size: 1rem;
36
- line-height: 1.5;
37
- cursor: pointer;
38
- }
39
- @media print {
40
- .sw-hint-popup,
41
- .sw-update-popup {
42
- display: none;
43
- }
44
- }
45
- .sw-hint-popup .icon-wrapper,
46
- .sw-update-popup .icon-wrapper {
47
- display: inline-block;
48
- vertical-align: middle;
49
- width: 1.5rem;
50
- height: 1.5rem;
51
- margin-inline-start: 0.4rem;
52
- border-radius: 0.75rem;
53
- background: var(--pwa-c-accent-bg);
54
- }
55
- .sw-hint-popup .icon-wrapper:hover,
56
- .sw-update-popup .icon-wrapper:hover {
57
- background: var(--pwa-c-accent-hover);
58
- }
59
- .sw-hint-popup .icon-wrapper svg,
60
- .sw-update-popup .icon-wrapper svg {
61
- width: 1.2rem;
62
- height: 1.2rem;
63
- margin: 0.15rem;
64
- color: var(--pwa-c-accent-text);
65
- animation: rotate 3s ease infinite;
66
- }
1
+ @keyframes rotate{0%{transform:rotate(0deg)}50%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}.popup-enter-active,.popup-leave-active{transition:opacity .3s,transform .3s}.popup-enter-from,.popup-leave-to{opacity:0;transform:translate(0, 50%) scale(0.5)}.sw-hint-popup,.sw-update-popup{position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:var(--pwa-z-index);padding:.5rem .75rem;border-width:0;border-radius:.5rem;background:var(--pwa-c-bg);color:var(--pwa-c-text);box-shadow:0 2px 12px 0 var(--pwa-c-shadow);font-size:1rem;line-height:1.5;cursor:pointer}@media print{.sw-hint-popup,.sw-update-popup{display:none}}.sw-hint-popup .icon-wrapper,.sw-update-popup .icon-wrapper{display:inline-block;vertical-align:middle;width:1.5rem;height:1.5rem;margin-inline-start:.4rem;border-radius:.75rem;background:var(--pwa-c-accent-bg)}.sw-hint-popup .icon-wrapper:hover,.sw-update-popup .icon-wrapper:hover{background:var(--pwa-c-accent-hover)}.sw-hint-popup .icon-wrapper svg,.sw-update-popup .icon-wrapper svg{width:1.2rem;height:1.2rem;margin:.15rem;color:var(--pwa-c-accent-text);animation:rotate 3s ease infinite}/*# sourceMappingURL=popup.css.map */
package/lib/client/styles/popup.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/client/styles/popup.scss"],"names":[],"mappings":"AAAA,kBACE,GACE,uBAGF,IACE,yBAGF,KACE,0BAIJ,wCAEE,WACE,0BAIJ,kCAEE,UACA,uCAGF,gCAEE,eACA,sBACA,YACA,2BAEA,qBACA,eACA,oBAEA,2BACA,wBACA,4CAEA,eACA,gBAEA,eAEA,aApBF,gCAqBI,cAGF,4DACE,qBACA,sBAEA,aACA,cACA,0BACA,qBAEA,kCAEA,wEACE,qCAGF,oEACE,aACA,cACA,cAEA,+BAEA","file":"popup.css","sourcesContent":["@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 50% {\n transform: rotate(360deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.popup-enter-active,\n.popup-leave-active {\n transition:\n opacity 0.3s,\n transform 0.3s;\n}\n\n.popup-enter-from,\n.popup-leave-to {\n opacity: 0;\n transform: translate(0, 50%) scale(0.5);\n}\n\n.sw-hint-popup,\n.sw-update-popup {\n position: fixed;\n inset-inline-end: 1rem;\n bottom: 1rem;\n z-index: var(--pwa-z-index);\n\n padding: 0.5rem 0.75rem;\n border-width: 0;\n border-radius: 0.5rem;\n\n background: var(--pwa-c-bg);\n color: var(--pwa-c-text);\n box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);\n\n font-size: 1rem;\n line-height: 1.5;\n\n cursor: pointer;\n\n @media print {\n display: none;\n }\n\n .icon-wrapper {\n display: inline-block;\n vertical-align: middle;\n\n width: 1.5rem;\n height: 1.5rem;\n margin-inline-start: 0.4rem;\n border-radius: 0.75rem;\n\n background: var(--pwa-c-accent-bg);\n\n &:hover {\n background: var(--pwa-c-accent-hover);\n }\n\n svg {\n width: 1.2rem;\n height: 1.2rem;\n margin: 0.15rem;\n\n color: var(--pwa-c-accent-text);\n\n animation: rotate 3s ease infinite;\n }\n }\n}\n"]}
package/lib/client/styles/vars.css CHANGED
@@ -1,12 +1 @@
1
- :root {
2
- --pwa-z-index: 10;
3
- --pwa-c-bg: var(--vp-c-bg-elv);
4
- --pwa-c-text: var(--vp-c-text);
5
- --pwa-c-shadow: var(--vp-c-shadow);
6
- --pwa-c-accent-bg: var(--vp-c-accent-bg);
7
- --pwa-c-accent-hover: var(--vp-c-accent-hover);
8
- --pwa-c-accent-text: var(--vp-c-accent-text);
9
- --pwa-c-control: var(--vp-c-control);
10
- --pwa-c-control-hover: var(--vp-c-control-hover);
11
- --pwa-c-text-mute: var(--vp-c-text-mute);
12
- }
1
+ :root{--pwa-z-index: 10;--pwa-c-bg: var(--vp-c-bg-elv);--pwa-c-text: var(--vp-c-text);--pwa-c-shadow: var(--vp-c-shadow);--pwa-c-accent-bg: var(--vp-c-accent-bg);--pwa-c-accent-hover: var(--vp-c-accent-hover);--pwa-c-accent-text: var(--vp-c-accent-text);--pwa-c-control: var(--vp-c-control);--pwa-c-control-hover: var(--vp-c-control-hover);--pwa-c-text-mute: var(--vp-c-text-mute)}/*# sourceMappingURL=vars.css.map */
package/lib/client/styles/vars.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/client/styles/vars.css"],"names":[],"mappings":"AAAA,MACE,kBACA,+BACA,+BACA,mCACA,yCACA,+CACA,6CACA,qCACA,iDACA","file":"vars.css","sourcesContent":[":root {\n --pwa-z-index: 10;\n --pwa-c-bg: var(--vp-c-bg-elv);\n --pwa-c-text: var(--vp-c-text);\n --pwa-c-shadow: var(--vp-c-shadow);\n --pwa-c-accent-bg: var(--vp-c-accent-bg);\n --pwa-c-accent-hover: var(--vp-c-accent-hover);\n --pwa-c-accent-text: var(--vp-c-accent-text);\n --pwa-c-control: var(--vp-c-control);\n --pwa-c-control-hover: var(--vp-c-control-hover);\n --pwa-c-text-mute: var(--vp-c-text-mute);\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vuepress/plugin-pwa",
3
- "version": "2.0.0-rc.44",
3
+ "version": "2.0.0-rc.46",
4
4
  "description": "VuePress plugin - progressive web application",
5
5
  "keywords": [
6
6
  "vuepress-plugin",
@@ -36,11 +36,11 @@
36
36
  "lib"
37
37
  ],
38
38
  "dependencies": {
39
- "@vuepress/helper": "2.0.0-rc.44",
39
+ "@vuepress/helper": "2.0.0-rc.46",
40
40
  "@vueuse/core": "^11.1.0",
41
41
  "mitt": "^3.0.1",
42
42
  "register-service-worker": "^1.7.2",
43
- "vue": "^3.5.6",
43
+ "vue": "^3.5.7",
44
44
  "workbox-build": "^7.1.1"
45
45
  },
46
46
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "publishConfig": {
50
50
  "access": "public"
51
51
  },
52
- "gitHead": "e450489799bbfbdd015ec52255576144185eb64f"
52
+ "gitHead": "e585a3bdde3be56078b2637154d03527fc94aacc"
53
53
  }