@zuplo/editor 1.0.28257514600 → 1.0.28286536260

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 (5) hide show
  1. package/dist/client/index.html +55 -21
  2. package/dist/client/static/js/main.local-IyBVWh52.js.map +1 -1
  3. package/dist/client/zuplo.apng +0 -0
  4. package/dist/client/zuplo_pink.svg +11 -0
  5. package/package.json +1 -1
package/dist/client/index.html CHANGED
@@ -49,6 +49,29 @@
49
49
  align-items: center;
50
50
  justify-content: center;
51
51
  }
52
+ /* Zuplo: the animated APNG mark. The APNG has a transparent background, so the
53
+ mark sits directly on the page backdrop (no white card) and reads correctly
54
+ in both light and dark mode. The container is a fixed square sized to the
55
+ loader footprint; the two <img>s are stacked and fill it. */
56
+ .zuplo-app-loader-card {
57
+ position: relative;
58
+ width: 5rem;
59
+ height: 5rem;
60
+ }
61
+ .zuplo-app-loader-apng,
62
+ .zuplo-app-loader-frame {
63
+ position: absolute;
64
+ inset: 0;
65
+ width: 100%;
66
+ height: 100%;
67
+ object-fit: contain;
68
+ }
69
+ /* The APNG paints on top of the inline first frame once it has downloaded.
70
+ If it never loads (offline), the inline first frame stays visible. */
71
+ .zuplo-app-loader-apng {
72
+ z-index: 1;
73
+ }
74
+ /* Akamai (and any non-Zuplo brand): themeable CSS disc + halo + SVG mark. */
52
75
  .zuplo-app-loader-halo {
53
76
  position: absolute;
54
77
  width: 3.5rem;
@@ -69,16 +92,24 @@
69
92
  background-color: #ff00bd;
70
93
  }
71
94
  .zuplo-app-loader-mark {
72
- /* Sized just larger than the 40px nav logo (h-10) so the loader's mark —
73
- painted at HTML parse, before React/auth — stays the LCP candidate and
74
- isn't superseded once the real nav logo renders late in the boot chain. */
75
- width: 3rem;
76
- height: 3rem;
95
+ width: 1.75rem;
96
+ height: 1.75rem;
77
97
  object-fit: contain;
78
98
  }
79
- .zuplo-app-loader-mark--akamai {
99
+ /* Default brand (Zuplo): show the APNG card, hide the CSS disc fallback. */
100
+ .zuplo-app-loader-zuplo {
101
+ display: block;
102
+ }
103
+ .zuplo-app-loader-fallback {
104
+ display: none;
105
+ }
106
+ /* Akamai: hide the Zuplo APNG card, show the themeable CSS disc instead. */
107
+ html[data-brand="akamai"] .zuplo-app-loader-zuplo {
80
108
  display: none;
81
109
  }
110
+ html[data-brand="akamai"] .zuplo-app-loader-fallback {
111
+ display: flex;
112
+ }
82
113
  html[data-brand="akamai"] .zuplo-app-loader-halo,
83
114
  html[data-brand="akamai"] .zuplo-app-loader-disc {
84
115
  background-color: #1ca0d8;
@@ -86,12 +117,6 @@
86
117
  html[data-brand="akamai"] .zuplo-app-loader-mark {
87
118
  color: #97d4ef;
88
119
  }
89
- html[data-brand="akamai"] .zuplo-app-loader-mark--zuplo {
90
- display: none;
91
- }
92
- html[data-brand="akamai"] .zuplo-app-loader-mark--akamai {
93
- display: block;
94
- }
95
120
  @keyframes zuplo-app-loader-ping {
96
121
  75%,
97
122
  100% {
@@ -100,6 +125,10 @@
100
125
  }
101
126
  }
102
127
  @media (prefers-reduced-motion: reduce) {
128
+ /* Show only the static first frame; do not animate. */
129
+ .zuplo-app-loader-apng {
130
+ display: none;
131
+ }
103
132
  .zuplo-app-loader-halo {
104
133
  animation: none;
105
134
  }
@@ -130,15 +159,20 @@
130
159
  aria-label="Loading"
131
160
  >
132
161
  <div class="zuplo-app-loader-disc-wrap">
133
- <span class="zuplo-app-loader-halo"></span>
134
- <span class="zuplo-app-loader-disc">
135
- <img class="zuplo-app-loader-mark zuplo-app-loader-mark--zuplo" src="/zuplo_white.svg" alt="" fetchpriority="high" />
136
- <svg class="zuplo-app-loader-mark zuplo-app-loader-mark--akamai" viewBox="344.42 285.18 451 489.75" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
137
- <path d="M592.85,764.11c-100.8-30.77-174.12-123.92-174.12-234.05s74.88-205.29,177.4-235.02c10.48-3.06,7.73-9.86-4.91-9.86-136.28,0-246.8,109.69-246.8,244.89s110.51,244.86,246.8,244.86c12.63,0,13.14-7.3,1.63-10.81Z" />
138
- <path d="M465.48,587.42c-.68-6.58-1.01-13.23-1.01-19.94,0-107.36,87.05-194.39,194.43-194.39,101.52,0,132,45.31,135.78,42.35,4.12-3.26-36.84-93.07-156.05-93.07-107.39,0-194.44,87.03-194.44,194.39,0,24.84,4.65,48.52,13.13,70.31,3.58,9.14,9.08,9.22,8.17.35Z" />
139
- <path d="M546.92,447.31c50.53-22.03,114.01-22.7,176.42-.89,41.91,14.62,66.2,35.5,68.19,34.64,3.31-1.43-24.38-45.28-74.36-64.24-60.51-22.93-125.69-10.93-173.18,26.32-5.22,4.11-3.25,6.87,2.93,4.17Z" />
140
- </svg>
141
- </span>
162
+ <div class="zuplo-app-loader-zuplo zuplo-app-loader-card">
163
+ <img class="zuplo-app-loader-frame" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAGFBMVEX/ALtHcEz/e93/S9D/ALv/ALz/HsX/ALmw6DCzAAAACHRSTlP+APv8n+X9TDvlca0AAAJ5SURBVGje7dlNi9tADAZgbf2Rawo2vpYYeg4O9JzALr1OYEOvpoWeE+j/p2lCE2ds6ZXGs7uX0Q940Iyt+dDQ53hByUpWspKVrGQlK1lvb/15PhwOz9/nW80L/Y/X0zzrLl20GVbl6DGKU6hV0SiKXZg1QZ1jF2I1btIShslb0xRRbre2xMXCalXEx85oOcEqbNaRpFhYrEakuG9JAWlxiVFAWuc4qa0jtBZqy0GLtNYSU7RXWluFleusijRxUllLlfWkspzKyjVWQxQ4yLFVK629wtoqrVxhkTaw5f0R5eohemlJJPBHeNZqLUwYgenyrVaob6s1SKyAFgHrKz/5BIpxZK34ySfwp46tnp18AoU9ttZseRNYniVrAaxRBf2+xy/PyoElLTjlpu02Lf9TkKEaM7+MZlid908Aq4JptXx1IyvbXKK/pfVFbdXT42pvaT2sOnuTld3/qW40RKM1SmsdbMlpAWtpScsvSNECaQGrtqRlmS+UlsVCaRmsEqUFrGENfboB5bWQ1uACIljd5Lj01nDN+bfwdRvDiYK3MpgWqdfozF/54B2L3zuu1rfB3oFOYPyelgm7rG5PW6p2bN1eWxusvf5sAq2d/sz0E1nw/OX4ye/BQZqEu2MnW/iMWfNnnB5cFsQzedlJFj6Tq+8KxTvfYWLerWLe+ZSDVN1Fo96Rm8AhvnVPQfUltb0O6Xd1QjstsDf040N6VjF7aZfEnDWtsN7j04f1RG9L4tAsQK+c7SEfHwg3p4fMV1JAbztqz336/lcEvQVMPHeEv1Gch+nPWR78dhL1TSfuW9P1Dezl8BrjDSy9PyYrWclKVrKSlaz3tP4CxTmI+s9bh/IAAAAASUVORK5CYII=" alt="" fetchpriority="high" />
164
+ <img class="zuplo-app-loader-apng" src="/zuplo.apng" alt="" />
165
+ </div>
166
+ <div class="zuplo-app-loader-fallback zuplo-app-loader-disc-wrap">
167
+ <span class="zuplo-app-loader-halo"></span>
168
+ <span class="zuplo-app-loader-disc">
169
+ <svg class="zuplo-app-loader-mark" viewBox="344.42 285.18 451 489.75" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
170
+ <path d="M592.85,764.11c-100.8-30.77-174.12-123.92-174.12-234.05s74.88-205.29,177.4-235.02c10.48-3.06,7.73-9.86-4.91-9.86-136.28,0-246.8,109.69-246.8,244.89s110.51,244.86,246.8,244.86c12.63,0,13.14-7.3,1.63-10.81Z" />
171
+ <path d="M465.48,587.42c-.68-6.58-1.01-13.23-1.01-19.94,0-107.36,87.05-194.39,194.43-194.39,101.52,0,132,45.31,135.78,42.35,4.12-3.26-36.84-93.07-156.05-93.07-107.39,0-194.44,87.03-194.44,194.39,0,24.84,4.65,48.52,13.13,70.31,3.58,9.14,9.08,9.22,8.17.35Z" />
172
+ <path d="M546.92,447.31c50.53-22.03,114.01-22.7,176.42-.89,41.91,14.62,66.2,35.5,68.19,34.64,3.31-1.43-24.38-45.28-74.36-64.24-60.51-22.93-125.69-10.93-173.18,26.32-5.22,4.11-3.25,6.87,2.93,4.17Z" />
173
+ </svg>
174
+ </span>
175
+ </div>
142
176
  </div>
143
177
  </div>
144
178
  <div id="zuplo-portal"></div>