mbkauthe 4.7.0 → 4.7.2

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.
@@ -10,7 +10,7 @@
10
10
 
11
11
  <div class="messageBody">
12
12
  <p id="messageContent"></p>
13
- <a href="#" target="_blank" class="errorCodeBadge" id="errorCodeLink" style="display: none;">
13
+ <a href="#" target="_blank" class="errorCodeBadge is-hidden" id="errorCodeLink">
14
14
  <i class="fas fa-bug"></i>
15
15
  <span id="errorCodeText"></span>
16
16
  </a>
@@ -87,32 +87,30 @@
87
87
 
88
88
  // Update Icon based on heading/context (simple heuristic)
89
89
  const lowerHeading = (heading || "").toLowerCase();
90
- iconEl.className = "fas"; // Reset
90
+ const iconWrap = document.querySelector(".messageIcon");
91
+ iconEl.className = "fas";
92
+ iconWrap.classList.remove("is-error", "is-success", "is-warning", "is-info");
91
93
  if (lowerHeading.includes("error") || lowerHeading.includes("failed")) {
92
94
  iconEl.classList.add("fa-exclamation-circle");
93
- document.querySelector(".messageIcon").style.background = "rgba(255, 118, 117, 0.1)";
94
- document.querySelector(".messageIcon").style.color = "var(--danger, #ff7675)";
95
+ iconWrap.classList.add("is-error");
95
96
  } else if (lowerHeading.includes("success")) {
96
97
  iconEl.classList.add("fa-check-circle");
97
- document.querySelector(".messageIcon").style.background = "rgba(67, 233, 123, 0.1)";
98
- document.querySelector(".messageIcon").style.color = "var(--success, #43e97b)";
98
+ iconWrap.classList.add("is-success");
99
99
  } else if (lowerHeading.includes("warning")) {
100
100
  iconEl.classList.add("fa-exclamation-triangle");
101
- document.querySelector(".messageIcon").style.background = "rgba(255, 209, 102, 0.1)";
102
- document.querySelector(".messageIcon").style.color = "var(--warning, #ffd166)";
101
+ iconWrap.classList.add("is-warning");
103
102
  } else {
104
103
  iconEl.classList.add("fa-info-circle");
105
- document.querySelector(".messageIcon").style.background = "rgba(33, 150, 243, 0.1)";
106
- document.querySelector(".messageIcon").style.color = "var(--primary, #2196f3)";
104
+ iconWrap.classList.add("is-info");
107
105
  }
108
106
 
109
107
  // Handle Error Code
110
108
  if (errorCode) {
111
- errorLink.style.display = "inline-flex";
109
+ errorLink.classList.remove("is-hidden");
112
110
  errorText.innerText = `Code: ${errorCode}`;
113
111
  errorLink.href = `/mbkauthe/ErrorCode/#${errorCode}`;
114
112
  } else {
115
- errorLink.style.display = "none";
113
+ errorLink.classList.add("is-hidden");
116
114
  }
117
115
 
118
116
  // Show Modal
@@ -159,7 +157,7 @@
159
157
  left: 0;
160
158
  width: 100%;
161
159
  height: 100%;
162
- background: rgba(0, 0, 0, 0.6);
160
+ background: color-mix(in srgb, var(--darker) 55%, transparent 45%);
163
161
  backdrop-filter: blur(8px);
164
162
  -webkit-backdrop-filter: blur(8px);
165
163
  display: none;
@@ -185,13 +183,13 @@
185
183
  }
186
184
 
187
185
  .messageModal {
188
- background: var(--darker, #0a1414);
189
- border: 1px solid rgba(255, 255, 255, 0.1);
186
+ background: var(--surface-1);
187
+ border: 1px solid var(--muted-border);
190
188
  border-radius: 16px;
191
189
  padding: 0;
192
190
  width: 90%;
193
191
  max-width: 400px;
194
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
192
+ box-shadow: 0 20px 50px color-mix(in srgb, var(--darker) 35%, transparent 65%);
195
193
  transform: scale(0.95) translateY(10px);
196
194
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
197
195
  display: flex;
@@ -215,8 +213,8 @@
215
213
  width: 60px;
216
214
  height: 60px;
217
215
  border-radius: 50%;
218
- background: rgba(33, 150, 243, 0.1);
219
- color: var(--primary, #2196f3);
216
+ background: color-mix(in srgb, var(--primary) 14%, transparent 86%);
217
+ color: var(--primary);
220
218
  display: flex;
221
219
  align-items: center;
222
220
  justify-content: center;
@@ -224,8 +222,28 @@
224
222
  margin-bottom: 1rem;
225
223
  }
226
224
 
225
+ .messageIcon.is-info {
226
+ background: color-mix(in srgb, var(--primary) 14%, transparent 86%);
227
+ color: var(--primary);
228
+ }
229
+
230
+ .messageIcon.is-error {
231
+ background: color-mix(in srgb, var(--danger) 14%, transparent 86%);
232
+ color: var(--danger);
233
+ }
234
+
235
+ .messageIcon.is-success {
236
+ background: color-mix(in srgb, var(--success) 14%, transparent 86%);
237
+ color: var(--success);
238
+ }
239
+
240
+ .messageIcon.is-warning {
241
+ background: color-mix(in srgb, var(--warning) 14%, transparent 86%);
242
+ color: var(--warning);
243
+ }
244
+
227
245
  .messageHeader h2 {
228
- color: var(--text, #fff);
246
+ color: var(--text);
229
247
  font-size: 1.5rem;
230
248
  font-weight: 600;
231
249
  margin: 0;
@@ -234,7 +252,7 @@
234
252
  .messageBody {
235
253
  padding: 0.5rem 2rem 1.5rem;
236
254
  text-align: center;
237
- color: var(--text-light, #ccc);
255
+ color: var(--text-light);
238
256
  font-size: 1rem;
239
257
  line-height: 1.6;
240
258
  }
@@ -244,7 +262,7 @@
244
262
  }
245
263
 
246
264
  .messageBody a {
247
- color: var(--accent, #00b894);
265
+ color: var(--accent);
248
266
  text-decoration: none;
249
267
  }
250
268
 
@@ -256,30 +274,34 @@
256
274
  display: inline-flex;
257
275
  align-items: center;
258
276
  gap: 0.5rem;
259
- background: rgba(255, 255, 255, 0.05);
277
+ background: var(--surface-soft);
260
278
  padding: 0.4rem 0.8rem;
261
279
  border-radius: 20px;
262
280
  font-size: 0.85rem;
263
- color: var(--text-light, #aaa) !important;
281
+ color: var(--text-light) !important;
264
282
  text-decoration: none !important;
265
283
  transition: all 0.2s ease;
266
- border: 1px solid rgba(255, 255, 255, 0.1);
284
+ border: 1px solid var(--muted-border);
285
+ }
286
+
287
+ .errorCodeBadge.is-hidden {
288
+ display: none;
267
289
  }
268
290
 
269
291
  .errorCodeBadge:hover {
270
- background: rgba(255, 255, 255, 0.1);
271
- color: var(--text, #fff) !important;
292
+ background: var(--surface-1);
293
+ color: var(--text) !important;
272
294
  }
273
295
 
274
296
  .messageFooter {
275
297
  padding: 1.5rem;
276
- background: rgba(0, 0, 0, 0.2);
298
+ background: var(--surface-muted);
277
299
  display: flex;
278
300
  justify-content: center;
279
301
  }
280
302
 
281
303
  .btn-message-action {
282
- background: var(--accent, #00b894);
304
+ background: var(--accent);
283
305
  color: #fff;
284
306
  border: none;
285
307
  padding: 0.8rem 2rem;
@@ -296,8 +318,8 @@
296
318
 
297
319
  .btn-message-action:hover {
298
320
  background: transparent;
299
- color: #00a180;
300
- border-color: #00a180;
321
+ color: var(--accent);
322
+ border-color: var(--accent);
301
323
  box-shadow: 0 6px 20px rgba(0, 184, 148, 0.4);
302
324
  }
303
325
 
@@ -1,6 +1,6 @@
1
- {{#if CurrentVersion}}
1
+ {{#if version}}
2
2
  <!-- Version Info -->
3
3
  <div class="version-info">
4
- v{{CurrentVersion}}
4
+ v{{version}}
5
5
  </div>
6
6
  {{/if}}