@canvas-digital/blog-sdk 2.0.4 → 2.0.5
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/dist/components/admin/AdminPostDetail.js +5 -5
- package/dist/components/admin/BrandSettings.js +5 -5
- package/dist/components/admin/BrandSwitcher.js +1 -1
- package/dist/components/admin/Chips.js +5 -5
- package/dist/components/admin/CommentsManager.js +6 -6
- package/dist/components/admin/Dashboard.js +1 -1
- package/dist/components/admin/MediaLibrary.js +5 -5
- package/dist/components/admin/MediaPicker.js +4 -4
- package/dist/components/admin/PostList.js +3 -3
- package/dist/components/admin/PostsTable.d.ts.map +1 -1
- package/dist/components/admin/PostsTable.js +10 -10
- package/dist/components/admin/Shell.js +3 -3
- package/dist/components/admin/TermManager.js +4 -4
- package/dist/components/admin/UsersManager.js +3 -3
- package/dist/components/admin/charts.js +7 -7
- package/dist/components/admin/editor/PostEditor.js +16 -16
- package/dist/components/admin/editor/RichTextEditor.js +8 -8
- package/dist/components/admin/editor/YoastCollapsible.js +2 -2
- package/dist/components/admin/editor/YoastInsightsPanel.js +1 -1
- package/dist/components/admin/editor/YoastInternalLinksPanel.js +1 -1
- package/dist/components/admin/editor/YoastSeoAnalysisPanel.js +6 -6
- package/dist/components/admin/editor/YoastSeoMetabox.js +8 -8
- package/dist/components/admin/editor/YoastSnippetField.js +2 -2
- package/dist/components/admin/internal/States.js +3 -3
- package/dist/components/admin/seo/Ga4Settings.js +6 -6
- package/dist/components/admin/seo/RedirectAnalyticsDashboard.js +1 -1
- package/dist/components/admin/seo/RedirectDetail.js +6 -6
- package/dist/components/admin/seo/RedirectForm.js +1 -1
- package/dist/components/admin/seo/RedirectList.js +4 -4
- package/dist/components/admin/seo/RobotsEditor.js +1 -1
- package/dist/components/admin/seo/shared.js +2 -2
- package/dist/components/admin/tools/ToolsHub.js +4 -4
- package/dist/components/user/BlogCard.js +3 -3
- package/dist/components/user/BlogCategories.js +1 -1
- package/dist/components/user/BlogDetail.js +1 -1
- package/dist/components/user/BlogList.js +1 -1
- package/dist/components/user/BlogSearch.js +2 -2
- package/dist/components/user/BlogTags.js +1 -1
- package/dist/components/user/FeaturedBlogs.js +1 -1
- package/dist/components/user/RelatedBlogs.js +1 -1
- package/dist/components/user/SiteMediaHero.js +1 -1
- package/dist/components/user/detail/ArticleDetailHero.js +5 -5
- package/dist/components/user/detail/ArticleRailDetails.js +2 -2
- package/dist/components/user/detail/CommentSection.js +2 -2
- package/dist/components/user/detail/HeroFadeSlide.js +1 -1
- package/dist/components/user/detail/ReadingProgress.js +1 -1
- package/dist/components/user/detail/ShareRow.js +1 -1
- package/dist/components/user/internal/States.js +4 -4
- package/dist/lib/lexical-doc.js +1 -1
- package/dist/pages/admin/BlogAdmin.js +7 -7
- package/dist/style.css +1018 -1018
- package/package.json +2 -1
package/dist/style.css
CHANGED
|
@@ -165,13 +165,13 @@ body {
|
|
|
165
165
|
|
|
166
166
|
a { color: var(--d-accent); }
|
|
167
167
|
:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; border-radius: 4px; }
|
|
168
|
-
.
|
|
169
|
-
.
|
|
170
|
-
.
|
|
168
|
+
.blog_mono { font-family: var(--d-mono); font-size: 0.92em; }
|
|
169
|
+
.blog_muted { color: var(--d-ink-3); }
|
|
170
|
+
.blog_trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block; }
|
|
171
171
|
|
|
172
172
|
/* ============================ app shell ============================ */
|
|
173
173
|
|
|
174
|
-
.
|
|
174
|
+
.blog_bp-admin-wrapper {
|
|
175
175
|
display: block;
|
|
176
176
|
width: 100%;
|
|
177
177
|
max-width: 100%;
|
|
@@ -181,7 +181,7 @@ a { color: var(--d-accent); }
|
|
|
181
181
|
box-sizing: border-box;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
|
-
.
|
|
184
|
+
.blog_shell {
|
|
185
185
|
display: grid;
|
|
186
186
|
grid-template-columns: 1fr;
|
|
187
187
|
width: 100%;
|
|
@@ -191,9 +191,9 @@ a { color: var(--d-accent); }
|
|
|
191
191
|
overflow: hidden;
|
|
192
192
|
box-sizing: border-box;
|
|
193
193
|
}
|
|
194
|
-
@media (min-width: 1000px) { .
|
|
194
|
+
@media (min-width: 1000px) { .blog_shell { grid-template-columns: 250px minmax(0, 1fr); } }
|
|
195
195
|
|
|
196
|
-
.
|
|
196
|
+
.blog_side {
|
|
197
197
|
background: linear-gradient(180deg, var(--d-side-2), var(--d-side));
|
|
198
198
|
color: var(--d-side-ink);
|
|
199
199
|
padding: 18px 14px;
|
|
@@ -205,7 +205,7 @@ a { color: var(--d-accent); }
|
|
|
205
205
|
overflow: hidden;
|
|
206
206
|
}
|
|
207
207
|
@media (min-width: 1000px) {
|
|
208
|
-
.
|
|
208
|
+
.blog_side {
|
|
209
209
|
position: sticky;
|
|
210
210
|
top: 0;
|
|
211
211
|
height: 100%;
|
|
@@ -215,24 +215,24 @@ a { color: var(--d-accent); }
|
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
-
.
|
|
219
|
-
.
|
|
218
|
+
.blog_side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 0; }
|
|
219
|
+
.blog_side-mark {
|
|
220
220
|
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
|
|
221
221
|
background: linear-gradient(135deg, var(--viz-1), var(--ord-4));
|
|
222
222
|
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
|
|
223
223
|
}
|
|
224
|
-
.
|
|
225
|
-
.
|
|
224
|
+
.blog_side-name { color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.2; }
|
|
225
|
+
.blog_side-role { color: var(--d-side-ink-2); font-size: 11.5px; margin-top: 1px; }
|
|
226
226
|
|
|
227
|
-
.
|
|
227
|
+
.blog_side-new, button.blog_side-new {
|
|
228
228
|
display: flex; align-items: center; justify-content: center; gap: 7px;
|
|
229
229
|
background: rgb(79, 70, 229); color: #fff; text-decoration: none;
|
|
230
230
|
font-size: 13.2px; font-weight: 650; padding: 9px 12px; border-radius: 8px;
|
|
231
231
|
height: 38px; border: none; cursor: pointer; width: 100%;
|
|
232
232
|
}
|
|
233
|
-
.
|
|
233
|
+
.blog_side-new:hover, button.blog_side-new:hover { filter: brightness(1.08); }
|
|
234
234
|
|
|
235
|
-
.
|
|
235
|
+
.blog_side-scroll {
|
|
236
236
|
display: flex;
|
|
237
237
|
flex-direction: column;
|
|
238
238
|
gap: 18px;
|
|
@@ -246,69 +246,69 @@ a { color: var(--d-accent); }
|
|
|
246
246
|
scrollbar-width: thin;
|
|
247
247
|
scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
|
|
248
248
|
}
|
|
249
|
-
.
|
|
250
|
-
.
|
|
251
|
-
.
|
|
249
|
+
.blog_side-scroll::-webkit-scrollbar { width: 6px; }
|
|
250
|
+
.blog_side-scroll::-webkit-scrollbar-track { background: transparent; }
|
|
251
|
+
.blog_side-scroll::-webkit-scrollbar-thumb {
|
|
252
252
|
background: rgba(255, 255, 255, 0.28);
|
|
253
253
|
border-radius: 999px;
|
|
254
254
|
}
|
|
255
|
-
.
|
|
256
|
-
.
|
|
257
|
-
.
|
|
255
|
+
.blog_side-brand, .blog_side-new, .blog_side-foot { flex: 0 0 auto; }
|
|
256
|
+
.blog_side-group { display: flex; flex-direction: column; gap: 4px; }
|
|
257
|
+
.blog_side-sect {
|
|
258
258
|
font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
|
|
259
259
|
color: var(--d-side-ink-2); padding: 0 8px; margin: 0 0 2px;
|
|
260
260
|
}
|
|
261
|
-
.
|
|
262
|
-
.
|
|
261
|
+
.blog_side-nav { display: flex; flex-direction: column; gap: 1px; }
|
|
262
|
+
.blog_side-nav a, .blog_side-nav button {
|
|
263
263
|
display: flex; align-items: center; gap: 10px;
|
|
264
264
|
padding: 8px 10px; border-radius: 7px;
|
|
265
265
|
color: var(--d-side-ink); text-decoration: none; font-size: 13.4px; font-weight: 520;
|
|
266
266
|
}
|
|
267
|
-
.
|
|
268
|
-
.
|
|
269
|
-
.
|
|
270
|
-
.
|
|
267
|
+
.blog_side-nav button { font-family: inherit; background: none; border: none; cursor: pointer; text-align: left; width: 100%; }
|
|
268
|
+
.blog_side-nav a:hover, .blog_side-nav button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
|
|
269
|
+
.blog_side-nav a.blog_is-open, .blog_side-nav button.blog_is-open { color: #fff; }
|
|
270
|
+
.blog_side-nav a[aria-current='page'], .blog_side-nav button[aria-current='page'] {
|
|
271
271
|
background: rgba(255, 255, 255, 0.08);
|
|
272
272
|
color: #fff; font-weight: 650;
|
|
273
273
|
}
|
|
274
|
-
.
|
|
275
|
-
.
|
|
274
|
+
.blog_nav-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }
|
|
275
|
+
.blog_side-nav .blog_badge {
|
|
276
276
|
margin-left: auto; font-size: 10.8px; font-weight: 700; padding: 1px 7px;
|
|
277
277
|
border-radius: 100px; background: rgba(255, 255, 255, 0.14); color: #fff;
|
|
278
278
|
font-variant-numeric: tabular-nums;
|
|
279
279
|
}
|
|
280
|
-
.
|
|
281
|
-
.
|
|
282
|
-
.
|
|
283
|
-
.
|
|
280
|
+
.blog_side-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 20px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
|
|
281
|
+
.blog_side-sub a { font-size: 12.6px; padding: 6px 9px; font-weight: 500; color: var(--d-side-ink-2); }
|
|
282
|
+
.blog_side-sub a:hover { color: #fff; }
|
|
283
|
+
.blog_side-sub a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, 0.08); }
|
|
284
284
|
|
|
285
|
-
.
|
|
286
|
-
.
|
|
285
|
+
.blog_side-foot { margin-top: auto; padding: 12px 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
|
|
286
|
+
.blog_side-user-card {
|
|
287
287
|
display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--d-radius-sm);
|
|
288
288
|
text-decoration: none; color: inherit; transition: background 0.12s ease;
|
|
289
289
|
}
|
|
290
|
-
.
|
|
291
|
-
.
|
|
292
|
-
.
|
|
293
|
-
.
|
|
290
|
+
.blog_side-user-card:hover { background: rgba(255, 255, 255, 0.06); }
|
|
291
|
+
.blog_side-user-card.blog_is-active,
|
|
292
|
+
.blog_side-user-card[aria-current='page'] { background: rgba(255, 255, 255, 0.08); }
|
|
293
|
+
.blog_side-user-avatar {
|
|
294
294
|
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
|
|
295
295
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
296
296
|
}
|
|
297
|
-
.
|
|
297
|
+
.blog_side-user-avatar-fallback {
|
|
298
298
|
display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff;
|
|
299
299
|
font-size: 14px; font-weight: 700;
|
|
300
300
|
}
|
|
301
|
-
.
|
|
302
|
-
.
|
|
301
|
+
.blog_side-user-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
|
|
302
|
+
.blog_side-user-name {
|
|
303
303
|
font-size: 13px; font-weight: 650; color: var(--d-side-ink); line-height: 1.25;
|
|
304
304
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
305
305
|
}
|
|
306
|
-
.
|
|
306
|
+
.blog_side-user-role {
|
|
307
307
|
font-size: 11.5px; color: var(--d-side-ink-2); line-height: 1.25;
|
|
308
308
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
309
309
|
}
|
|
310
310
|
|
|
311
|
-
.
|
|
311
|
+
.blog_main {
|
|
312
312
|
min-width: 0;
|
|
313
313
|
min-height: 0;
|
|
314
314
|
height: 100%;
|
|
@@ -319,7 +319,7 @@ a { color: var(--d-accent); }
|
|
|
319
319
|
|
|
320
320
|
/* ============================ top bar ============================ */
|
|
321
321
|
|
|
322
|
-
.
|
|
322
|
+
.blog_top {
|
|
323
323
|
background: color-mix(in srgb, var(--d-surface) 88%, transparent);
|
|
324
324
|
backdrop-filter: saturate(180%) blur(8px);
|
|
325
325
|
border-bottom: 1px solid var(--d-rule);
|
|
@@ -327,11 +327,11 @@ a { color: var(--d-accent); }
|
|
|
327
327
|
gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
|
|
328
328
|
flex: 0 0 auto;
|
|
329
329
|
}
|
|
330
|
-
.
|
|
331
|
-
.
|
|
332
|
-
.
|
|
330
|
+
.blog_top h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
|
|
331
|
+
.blog_top .blog_sub { font-size: 12.5px; color: var(--d-ink-3); margin: 2px 0 0; }
|
|
332
|
+
.blog_top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
333
333
|
|
|
334
|
-
.
|
|
334
|
+
.blog_body {
|
|
335
335
|
padding: 20px 26px 72px;
|
|
336
336
|
display: flex;
|
|
337
337
|
flex-direction: column;
|
|
@@ -342,285 +342,285 @@ a { color: var(--d-accent); }
|
|
|
342
342
|
overflow-y: auto;
|
|
343
343
|
overscroll-behavior: contain;
|
|
344
344
|
}
|
|
345
|
-
.
|
|
345
|
+
.blog_body-wide { padding-left: 20px; padding-right: 20px; }
|
|
346
346
|
|
|
347
347
|
/* brand switcher */
|
|
348
|
-
.
|
|
349
|
-
.
|
|
350
|
-
.
|
|
351
|
-
.
|
|
352
|
-
.
|
|
348
|
+
.blog_menu { position: relative; }
|
|
349
|
+
.blog_menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
|
|
350
|
+
.blog_menu > summary::-webkit-details-marker { display: none; }
|
|
351
|
+
.blog_menu .blog_caret { font-size: 10px; color: var(--d-ink-3); }
|
|
352
|
+
.blog_menu-panel {
|
|
353
353
|
position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
|
|
354
354
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
355
355
|
box-shadow: var(--d-shadow-lg); padding: 5px; display: flex; flex-direction: column;
|
|
356
356
|
}
|
|
357
|
-
.
|
|
358
|
-
.
|
|
357
|
+
.blog_menu-panel a,
|
|
358
|
+
.blog_menu-panel button {
|
|
359
359
|
display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--d-radius-sm);
|
|
360
360
|
color: var(--d-ink-2); text-decoration: none; font-size: 13px; font-weight: 550;
|
|
361
361
|
border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font: inherit;
|
|
362
362
|
}
|
|
363
|
-
.
|
|
364
|
-
.
|
|
365
|
-
.
|
|
366
|
-
.
|
|
367
|
-
.
|
|
363
|
+
.blog_menu-panel a:hover,
|
|
364
|
+
.blog_menu-panel button:hover { background: var(--d-sunk); color: var(--d-ink); }
|
|
365
|
+
.blog_menu-panel a[aria-current='true'],
|
|
366
|
+
.blog_menu-panel button[aria-current='true'] { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
367
|
+
.blog_dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
|
|
368
368
|
|
|
369
369
|
/* ============================ buttons ============================ */
|
|
370
370
|
|
|
371
|
-
.
|
|
371
|
+
.blog_btn {
|
|
372
372
|
font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
|
|
373
373
|
padding: 7px 13px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule);
|
|
374
374
|
color: var(--d-ink-2); background: var(--d-surface); white-space: nowrap; cursor: pointer;
|
|
375
375
|
display: inline-flex; align-items: center; gap: 6px; line-height: 1.35;
|
|
376
376
|
}
|
|
377
|
-
.
|
|
378
|
-
.
|
|
379
|
-
.
|
|
380
|
-
.
|
|
377
|
+
.blog_btn { transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; }
|
|
378
|
+
.blog_btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
|
|
379
|
+
.blog_btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
380
|
+
.blog_btn-primary {
|
|
381
381
|
background: var(--d-accent); border-color: var(--d-accent); color: #fff;
|
|
382
382
|
box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--d-accent) 90%, transparent);
|
|
383
383
|
}
|
|
384
|
-
.
|
|
385
|
-
.
|
|
386
|
-
.
|
|
387
|
-
.
|
|
388
|
-
.
|
|
389
|
-
.
|
|
384
|
+
.blog_btn-primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); background: var(--d-accent); }
|
|
385
|
+
.blog_btn-ghost { border-style: dashed; color: var(--d-ink-3); }
|
|
386
|
+
.blog_btn-tiny { font-size: 12px; padding: 4px 9px; }
|
|
387
|
+
.blog_btn-block { width: 100%; justify-content: center; }
|
|
388
|
+
.blog_btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
389
|
+
.blog_icon-btn {
|
|
390
390
|
font: inherit; border: 0; background: transparent; color: var(--d-ink-3); cursor: pointer;
|
|
391
391
|
width: 30px; height: 30px; border-radius: var(--d-radius-sm); display: grid; place-items: center;
|
|
392
392
|
}
|
|
393
|
-
.
|
|
394
|
-
.
|
|
393
|
+
.blog_icon-btn:hover { background: var(--d-sunk); color: var(--d-ink); }
|
|
394
|
+
.blog_btn-danger-link {
|
|
395
395
|
font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none;
|
|
396
396
|
color: var(--d-crit); cursor: pointer; padding: 0; text-align: left; text-decoration: underline;
|
|
397
397
|
text-underline-offset: 2px;
|
|
398
398
|
}
|
|
399
|
-
.
|
|
399
|
+
.blog_btn-danger-link:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
400
400
|
|
|
401
|
-
.
|
|
402
|
-
.
|
|
401
|
+
.blog_seg { display: inline-flex; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden; }
|
|
402
|
+
.blog_seg a {
|
|
403
403
|
font-size: 12.5px; font-weight: 600; padding: 6px 11px; text-decoration: none;
|
|
404
404
|
color: var(--d-ink-3); background: var(--d-surface); border-right: 1px solid var(--d-rule);
|
|
405
405
|
}
|
|
406
|
-
.
|
|
407
|
-
.
|
|
406
|
+
.blog_seg a:last-child { border-right: 0; }
|
|
407
|
+
.blog_seg a[aria-current='true'] { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
408
408
|
|
|
409
409
|
/* ============================ stat cards ============================ */
|
|
410
410
|
|
|
411
|
-
.
|
|
412
|
-
.
|
|
411
|
+
.blog_kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
|
|
412
|
+
.blog_kpi {
|
|
413
413
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
414
414
|
padding: 15px 17px; box-shadow: var(--d-shadow);
|
|
415
415
|
display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit;
|
|
416
416
|
}
|
|
417
|
-
.
|
|
418
|
-
a.
|
|
419
|
-
.
|
|
420
|
-
.
|
|
421
|
-
.
|
|
422
|
-
.
|
|
423
|
-
.
|
|
424
|
-
.
|
|
425
|
-
.
|
|
426
|
-
.
|
|
427
|
-
.
|
|
428
|
-
.
|
|
417
|
+
.blog_kpi { transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
|
|
418
|
+
a.blog_kpi:hover { border-color: var(--d-accent); transform: translateY(-1px); box-shadow: var(--d-shadow-lg); }
|
|
419
|
+
.blog_kpi-l { font-size: 11px; font-weight: 680; letter-spacing: 0.09em; text-transform: uppercase; color: var(--d-ink-3); }
|
|
420
|
+
.blog_kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
|
|
421
|
+
.blog_kpi-n { font-size: 29px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; font-variant-numeric: tabular-nums; }
|
|
422
|
+
.blog_kpi-delta { font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 5px; }
|
|
423
|
+
.blog_kpi-delta.blog_up { color: var(--d-delta-up); }
|
|
424
|
+
.blog_kpi-delta.blog_down { color: var(--d-crit); }
|
|
425
|
+
.blog_kpi-delta.blog_flat { color: var(--d-ink-3); }
|
|
426
|
+
.blog_kpi-delta-sub { color: var(--d-ink-3); font-weight: 400; }
|
|
427
|
+
.blog_kpi-sub { font-size: 12px; color: var(--d-ink-3); }
|
|
428
|
+
.blog_spark { width: 120px; height: 32px; display: block; }
|
|
429
429
|
|
|
430
430
|
/* ============================ panels ============================ */
|
|
431
431
|
|
|
432
|
-
.
|
|
433
|
-
@media (min-width: 1160px) { .
|
|
434
|
-
@media (min-width: 1160px) { .
|
|
435
|
-
@media (min-width: 820px) and (max-width: 1159px) { .
|
|
432
|
+
.blog_grid { display: grid; gap: 16px; }
|
|
433
|
+
@media (min-width: 1160px) { .blog_grid-2 { grid-template-columns: 1.55fr 1fr; } }
|
|
434
|
+
@media (min-width: 1160px) { .blog_grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
|
|
435
|
+
@media (min-width: 820px) and (max-width: 1159px) { .blog_grid-3 { grid-template-columns: 1fr 1fr; } }
|
|
436
436
|
|
|
437
|
-
.
|
|
437
|
+
.blog_panel {
|
|
438
438
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
439
439
|
box-shadow: var(--d-shadow); overflow: hidden; display: flex; flex-direction: column;
|
|
440
440
|
}
|
|
441
|
-
.
|
|
441
|
+
.blog_panel-head {
|
|
442
442
|
padding: 13px 17px; border-bottom: 1px solid var(--d-rule);
|
|
443
443
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
444
444
|
background: var(--d-surface);
|
|
445
445
|
}
|
|
446
|
-
.
|
|
447
|
-
.
|
|
448
|
-
.
|
|
449
|
-
.
|
|
450
|
-
.
|
|
451
|
-
.
|
|
452
|
-
.
|
|
453
|
-
@media (min-width: 1000px) { .
|
|
454
|
-
.
|
|
446
|
+
.blog_panel-head h2 { font-size: 13.5px; font-weight: 680; letter-spacing: -0.005em; margin: 0; display: flex; gap: 8px; align-items: baseline; }
|
|
447
|
+
.blog_panel-head .blog_hint { font-size: 11.5px; color: var(--d-ink-3); font-weight: 500; }
|
|
448
|
+
.blog_hint-link { font-size: 12px; color: var(--d-accent); text-decoration: none; font-weight: 600; }
|
|
449
|
+
.blog_hint-link:hover { text-decoration: underline; }
|
|
450
|
+
.blog_panel-body { padding: 15px 17px; }
|
|
451
|
+
.blog_panel-body.blog_flush { padding: 0; }
|
|
452
|
+
.blog_split { display: grid; gap: 16px; align-items: start; }
|
|
453
|
+
@media (min-width: 1000px) { .blog_split { grid-template-columns: 340px 1fr; } }
|
|
454
|
+
.blog_panel-form { position: sticky; top: 86px; }
|
|
455
455
|
|
|
456
456
|
/* ============================ charts ============================ */
|
|
457
457
|
|
|
458
|
-
.
|
|
459
|
-
.
|
|
460
|
-
.
|
|
461
|
-
.
|
|
458
|
+
.blog_chart-holder { position: relative; }
|
|
459
|
+
.blog_chart-svg { display: block; width: 100%; height: auto; }
|
|
460
|
+
.blog_axis-label { font-size: 10.5px; font-family: var(--d-ui); font-variant-numeric: tabular-nums; }
|
|
461
|
+
.blog_chart-tip {
|
|
462
462
|
position: absolute; top: 4px; transform: translateX(-50%);
|
|
463
463
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
464
464
|
box-shadow: var(--d-shadow); padding: 8px 11px; pointer-events: none; min-width: 116px;
|
|
465
465
|
font-size: 12.5px;
|
|
466
466
|
}
|
|
467
|
-
.
|
|
468
|
-
.
|
|
469
|
-
.
|
|
470
|
-
.
|
|
471
|
-
|
|
472
|
-
.
|
|
473
|
-
.
|
|
474
|
-
.
|
|
475
|
-
.
|
|
476
|
-
.
|
|
477
|
-
.
|
|
478
|
-
.
|
|
479
|
-
.
|
|
480
|
-
|
|
481
|
-
.
|
|
482
|
-
.
|
|
483
|
-
.
|
|
484
|
-
.
|
|
485
|
-
.
|
|
486
|
-
.
|
|
467
|
+
.blog_tip-date { font-weight: 700; margin-bottom: 3px; font-size: 12px; }
|
|
468
|
+
.blog_tip-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
|
|
469
|
+
.blog_tip-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
|
|
470
|
+
.blog_tip-sub { color: var(--d-ink-3); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
|
|
471
|
+
|
|
472
|
+
.blog_barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
|
|
473
|
+
.blog_bl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
|
|
474
|
+
.blog_bl-link { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; text-decoration: none; color: inherit; }
|
|
475
|
+
.blog_bl-link:hover .blog_bl-label { color: var(--d-accent); }
|
|
476
|
+
.blog_bl-label { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
477
|
+
.blog_bl-value { font-size: 12.5px; font-weight: 700; color: var(--d-ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
|
|
478
|
+
.blog_bl-track { height: 7px; background: var(--d-sunk); border-radius: 4px; overflow: hidden; }
|
|
479
|
+
.blog_bl-fill { height: 100%; border-radius: 4px; }
|
|
480
|
+
|
|
481
|
+
.blog_funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
|
|
482
|
+
.blog_fn-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
|
|
483
|
+
.blog_fn-label { font-size: 13px; font-weight: 550; }
|
|
484
|
+
.blog_fn-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
485
|
+
.blog_fn-track { height: 9px; background: var(--d-sunk); border-radius: 5px; overflow: hidden; }
|
|
486
|
+
.blog_fn-fill { height: 100%; border-radius: 5px; }
|
|
487
487
|
|
|
488
488
|
/* ============================ rows ============================ */
|
|
489
489
|
|
|
490
|
-
.
|
|
490
|
+
.blog_row {
|
|
491
491
|
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
|
|
492
492
|
align-items: start; padding: 12px 17px; border-bottom: 1px solid var(--d-rule-2);
|
|
493
493
|
}
|
|
494
|
-
.
|
|
495
|
-
.
|
|
496
|
-
.
|
|
497
|
-
.
|
|
498
|
-
.
|
|
499
|
-
.
|
|
494
|
+
.blog_row:last-child { border-bottom: 0; }
|
|
495
|
+
.blog_row:hover { background: var(--d-surface-2); }
|
|
496
|
+
.blog_row-main a.blog_t { font-size: 14px; font-weight: 620; color: var(--d-ink); text-decoration: none; letter-spacing: -0.005em; }
|
|
497
|
+
.blog_row-main a.blog_t:hover { color: var(--d-accent); }
|
|
498
|
+
.blog_row-sub { font-size: 12.2px; color: var(--d-ink-3); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
|
|
499
|
+
.blog_row-right { display: flex; gap: 7px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
|
|
500
500
|
|
|
501
501
|
/* ============================ chips ============================ */
|
|
502
502
|
|
|
503
|
-
.
|
|
503
|
+
.blog_chip {
|
|
504
504
|
display: inline-flex; align-items: center; gap: 4px;
|
|
505
505
|
font-size: 10.6px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase;
|
|
506
506
|
padding: 3px 8px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap;
|
|
507
507
|
}
|
|
508
|
-
.
|
|
509
|
-
.
|
|
510
|
-
.
|
|
511
|
-
.
|
|
512
|
-
.
|
|
513
|
-
.
|
|
514
|
-
.
|
|
508
|
+
.blog_chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
|
509
|
+
.blog_chip-review { background: var(--d-warn-soft); color: var(--d-warn); border-color: var(--d-warn); }
|
|
510
|
+
.blog_chip-writing { background: var(--d-sunk); color: var(--d-ink-3); border-color: var(--d-rule); }
|
|
511
|
+
.blog_chip-approved { background: var(--d-accent-soft); color: var(--d-accent-ink); border-color: var(--d-accent); }
|
|
512
|
+
.blog_chip-live { background: var(--d-good-soft); color: var(--d-good); border-color: var(--d-good); }
|
|
513
|
+
.blog_chip-blocked { background: var(--d-crit-soft); color: var(--d-crit); border-color: var(--d-crit); }
|
|
514
|
+
.blog_chip-brand { background: transparent; color: var(--d-ink-3); border-color: var(--d-rule); text-transform: none; letter-spacing: 0; font-weight: 600; }
|
|
515
515
|
|
|
516
|
-
.
|
|
517
|
-
.
|
|
518
|
-
.
|
|
516
|
+
.blog_blockers { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 3px 14px; }
|
|
517
|
+
.blog_blockers li { font-size: 12px; color: var(--d-crit); }
|
|
518
|
+
.blog_blockers li::before { content: '✕ '; font-weight: 700; }
|
|
519
519
|
|
|
520
520
|
/* ============================ tables ============================ */
|
|
521
521
|
|
|
522
|
-
.
|
|
523
|
-
table.
|
|
524
|
-
.
|
|
525
|
-
.
|
|
522
|
+
.blog_tw { overflow-x: auto; }
|
|
523
|
+
table.blog_tbl { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.2px; }
|
|
524
|
+
.blog_tbl th, .blog_tbl td { text-align: left; padding: 11px 17px; border-bottom: 1px solid var(--d-rule-2); vertical-align: top; }
|
|
525
|
+
.blog_tbl th {
|
|
526
526
|
font-size: 10.6px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
|
|
527
527
|
color: var(--d-ink-3); background: var(--d-sunk); white-space: nowrap; vertical-align: middle;
|
|
528
528
|
position: sticky; top: 0; z-index: 1;
|
|
529
529
|
}
|
|
530
|
-
.
|
|
531
|
-
.
|
|
530
|
+
.blog_tbl tbody tr:last-child td { border-bottom: 0; }
|
|
531
|
+
.blog_tbl tbody tr.blog_tbl-row-pad td {
|
|
532
532
|
height: 44px;
|
|
533
533
|
padding-top: 11px;
|
|
534
534
|
padding-bottom: 11px;
|
|
535
535
|
border-bottom: 1px solid var(--d-rule-2);
|
|
536
536
|
}
|
|
537
|
-
.
|
|
538
|
-
.
|
|
539
|
-
.
|
|
540
|
-
.
|
|
541
|
-
.
|
|
542
|
-
.
|
|
543
|
-
.
|
|
544
|
-
.
|
|
545
|
-
.
|
|
546
|
-
.
|
|
547
|
-
a.
|
|
548
|
-
button.
|
|
549
|
-
button.
|
|
537
|
+
.blog_tbl tbody tr.blog_tbl-row-pad:hover { background: transparent; }
|
|
538
|
+
.blog_tbl tbody tr:hover { background: var(--d-surface-2); }
|
|
539
|
+
.blog_tbl tbody tr.blog_is-selected { background: var(--d-accent-soft); }
|
|
540
|
+
.blog_tbl td.blog_num, .blog_tbl th.blog_num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
|
|
541
|
+
.blog_tbl a { text-decoration: none; font-weight: 620; color: var(--d-ink); }
|
|
542
|
+
.blog_tbl a:hover { color: var(--d-accent); }
|
|
543
|
+
.blog_col-check { width: 34px; padding-right: 0; }
|
|
544
|
+
.blog_col-narrow { width: 1%; white-space: nowrap; }
|
|
545
|
+
.blog_col-title { min-width: 280px; }
|
|
546
|
+
.blog_row-title { font-size: 13.8px; font-weight: 640; color: var(--d-ink); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; letter-spacing: -0.005em; }
|
|
547
|
+
a.blog_row-title:hover,
|
|
548
|
+
button.blog_row-title:hover { color: var(--d-accent); }
|
|
549
|
+
button.blog_row-title {
|
|
550
550
|
border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left;
|
|
551
551
|
}
|
|
552
|
-
.
|
|
553
|
-
.
|
|
554
|
-
.
|
|
555
|
-
.
|
|
556
|
-
.
|
|
557
|
-
.
|
|
552
|
+
.blog_cell-sub { display: block; font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
|
|
553
|
+
.blog_cell-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--d-ink-3); font-weight: 650; }
|
|
554
|
+
.blog_mini-track { height: 6px; background: var(--d-sunk); border-radius: 3px; overflow: hidden; min-width: 80px; flex: 1; }
|
|
555
|
+
.blog_mini-fill { height: 100%; border-radius: 3px; background: var(--viz-1); display: block; }
|
|
556
|
+
.blog_bar-cell { display: flex; align-items: center; gap: 10px; }
|
|
557
|
+
.blog_bar-cell-n { font-variant-numeric: tabular-nums; min-width: 46px; font-weight: 600; }
|
|
558
558
|
|
|
559
559
|
/* WordPress-style hover actions: present when needed, quiet when not */
|
|
560
|
-
.
|
|
561
|
-
tr:hover .
|
|
562
|
-
@media (hover: none) { .
|
|
563
|
-
.
|
|
560
|
+
.blog_row-actions { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; opacity: 0; transition: opacity 0.12s ease; }
|
|
561
|
+
tr:hover .blog_row-actions, tr:focus-within .blog_row-actions, .blog_row-actions:focus-within { opacity: 1; }
|
|
562
|
+
@media (hover: none) { .blog_row-actions { opacity: 1; } }
|
|
563
|
+
.blog_row-actions button, .blog_row-actions a {
|
|
564
564
|
font: inherit; font-size: 12.2px; font-weight: 550; border: 0; background: none; padding: 0;
|
|
565
565
|
color: var(--d-accent); cursor: pointer; text-decoration: none;
|
|
566
566
|
}
|
|
567
|
-
.
|
|
568
|
-
.
|
|
569
|
-
.
|
|
567
|
+
.blog_row-actions button:hover, .blog_row-actions a:hover { text-decoration: underline; }
|
|
568
|
+
.blog_row-actions button:disabled { color: var(--d-ink-3); cursor: not-allowed; text-decoration: none; }
|
|
569
|
+
.blog_row-actions .blog_danger { color: var(--d-crit); }
|
|
570
570
|
|
|
571
|
-
.
|
|
572
|
-
.
|
|
571
|
+
.blog_list { display: flex; flex-direction: column; }
|
|
572
|
+
.blog_list-bar {
|
|
573
573
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
574
574
|
padding: 11px 17px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2); flex-wrap: wrap;
|
|
575
575
|
}
|
|
576
|
-
.
|
|
576
|
+
.blog_bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
577
577
|
|
|
578
|
-
.
|
|
579
|
-
.
|
|
580
|
-
.
|
|
581
|
-
.
|
|
582
|
-
.
|
|
583
|
-
.
|
|
584
|
-
.
|
|
585
|
-
.
|
|
578
|
+
.blog_quick-row td { background: var(--d-sunk); }
|
|
579
|
+
.blog_quick { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
|
|
580
|
+
.blog_quick-head { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-ink-3); }
|
|
581
|
+
.blog_quick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
|
|
582
|
+
.blog_quick-grid label, .blog_fld-row { display: flex; flex-direction: column; gap: 5px; }
|
|
583
|
+
.blog_quick-grid label > span, .blog_fld-lbl { font-size: 11.6px; font-weight: 650; color: var(--d-ink-2); }
|
|
584
|
+
.blog_quick-grid .blog_span-2 { grid-column: span 2; }
|
|
585
|
+
.blog_inline-form { display: flex; gap: 7px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
|
|
586
586
|
|
|
587
587
|
/* ============================ tabs + filters ============================ */
|
|
588
588
|
|
|
589
|
-
.
|
|
590
|
-
.
|
|
591
|
-
.
|
|
589
|
+
.blog_tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--d-rule); }
|
|
590
|
+
.blog_tabs a,
|
|
591
|
+
.blog_tabs button {
|
|
592
592
|
display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
|
|
593
593
|
font-size: 13px; font-weight: 600; color: var(--d-ink-3); text-decoration: none;
|
|
594
594
|
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
595
595
|
border-top: 0; border-left: 0; border-right: 0; background: none; cursor: pointer; font: inherit;
|
|
596
596
|
}
|
|
597
|
-
.
|
|
598
|
-
.
|
|
599
|
-
.
|
|
600
|
-
.
|
|
601
|
-
.
|
|
597
|
+
.blog_tabs a:hover,
|
|
598
|
+
.blog_tabs button:hover { color: var(--d-ink); }
|
|
599
|
+
.blog_tabs a[aria-current='true'],
|
|
600
|
+
.blog_tabs button[aria-current='true'] { color: var(--d-accent-ink); border-bottom-color: var(--d-accent); }
|
|
601
|
+
.blog_tab-count {
|
|
602
602
|
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
|
|
603
603
|
background: var(--d-sunk); color: var(--d-ink-3); border-radius: 100px; padding: 1px 7px;
|
|
604
604
|
}
|
|
605
|
-
.
|
|
606
|
-
.
|
|
605
|
+
.blog_tabs a[aria-current='true'] .blog_tab-count,
|
|
606
|
+
.blog_tabs button[aria-current='true'] .blog_tab-count { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
607
607
|
|
|
608
|
-
.
|
|
609
|
-
.
|
|
610
|
-
.
|
|
608
|
+
.blog_filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
609
|
+
.blog_filterbar .blog_fld { min-width: 180px; }
|
|
610
|
+
.blog_pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
611
611
|
|
|
612
612
|
/* ============================ forms ============================ */
|
|
613
613
|
|
|
614
|
-
.
|
|
614
|
+
.blog_fld {
|
|
615
615
|
font: inherit; font-size: 13.2px; padding: 8px 11px; border-radius: var(--d-radius-sm);
|
|
616
616
|
border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-ink);
|
|
617
617
|
width: 100%; max-width: 100%;
|
|
618
618
|
}
|
|
619
|
-
.
|
|
620
|
-
.
|
|
621
|
-
.
|
|
622
|
-
.
|
|
623
|
-
select.
|
|
619
|
+
.blog_fld:focus { outline: none; border-color: var(--d-accent); box-shadow: var(--d-ring); }
|
|
620
|
+
.blog_fld:disabled { background: var(--d-sunk); color: var(--d-ink-3); cursor: not-allowed; }
|
|
621
|
+
.blog_fld-sm { font-size: 12.4px; padding: 5px 9px; width: auto; }
|
|
622
|
+
.blog_fld-inline { width: auto; min-width: 160px; }
|
|
623
|
+
select.blog_fld {
|
|
624
624
|
width: auto;
|
|
625
625
|
min-width: 140px;
|
|
626
626
|
padding-right: 2rem;
|
|
@@ -631,32 +631,32 @@ select.fld {
|
|
|
631
631
|
background-position: right 0.7rem center;
|
|
632
632
|
background-size: 12px 8px;
|
|
633
633
|
}
|
|
634
|
-
textarea.
|
|
635
|
-
.
|
|
636
|
-
.
|
|
637
|
-
.
|
|
638
|
-
.
|
|
639
|
-
.
|
|
640
|
-
.
|
|
641
|
-
.
|
|
634
|
+
textarea.blog_fld { resize: vertical; line-height: 1.55; }
|
|
635
|
+
.blog_fld-lbl em { font-style: normal; font-weight: 450; color: var(--d-ink-3); }
|
|
636
|
+
.blog_fld.blog_is-invalid { border-color: var(--d-crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-crit) 18%, transparent); }
|
|
637
|
+
.blog_fld-error { display: block; margin-top: 6px; font-size: 12.4px; color: var(--d-crit); }
|
|
638
|
+
.blog_fld-hint { display: block; margin-top: 6px; font-size: 12.2px; color: var(--d-ink-3); }
|
|
639
|
+
.blog_fld-checks { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--d-ink-2); }
|
|
640
|
+
.blog_fld-checks label { display: flex; gap: 8px; align-items: center; }
|
|
641
|
+
.blog_stack { display: flex; flex-direction: column; gap: 12px; }
|
|
642
642
|
|
|
643
|
-
.
|
|
643
|
+
.blog_form-error {
|
|
644
644
|
margin: 0; font-size: 12.8px; color: var(--d-crit); background: var(--d-crit-soft);
|
|
645
645
|
border: 1px solid var(--d-crit); border-radius: var(--d-radius-sm); padding: 9px 12px;
|
|
646
646
|
}
|
|
647
|
-
.
|
|
647
|
+
.blog_form-ok {
|
|
648
648
|
margin: 0; font-size: 12.8px; color: var(--d-good); background: var(--d-good-soft);
|
|
649
649
|
border: 1px solid var(--d-good); border-radius: var(--d-radius-sm); padding: 9px 12px;
|
|
650
650
|
}
|
|
651
|
-
.
|
|
651
|
+
.blog_form-ok.blog_inline { padding: 4px 9px; font-size: 12px; }
|
|
652
652
|
|
|
653
|
-
.
|
|
653
|
+
.blog_dashboard-toast-container {
|
|
654
654
|
top: 18px !important;
|
|
655
655
|
right: 22px !important;
|
|
656
656
|
width: min(360px, calc(100vw - 32px));
|
|
657
657
|
}
|
|
658
658
|
|
|
659
|
-
.
|
|
659
|
+
.blog_dashboard-toast.blog_Toastify__toast--success {
|
|
660
660
|
font-family: inherit;
|
|
661
661
|
font-size: 13px;
|
|
662
662
|
font-weight: 650;
|
|
@@ -664,102 +664,102 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
664
664
|
box-shadow: var(--d-shadow-lg);
|
|
665
665
|
}
|
|
666
666
|
|
|
667
|
-
.
|
|
667
|
+
.blog_banner {
|
|
668
668
|
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
|
|
669
669
|
padding: 12px 16px; border-radius: var(--d-radius); font-size: 13px;
|
|
670
670
|
}
|
|
671
|
-
.
|
|
671
|
+
.blog_banner-warn { background: var(--d-warn-soft); border: 1px solid var(--d-warn); color: var(--d-ink-2); }
|
|
672
672
|
|
|
673
|
-
.
|
|
674
|
-
.
|
|
675
|
-
.
|
|
673
|
+
.blog_d-empty { padding: 22px 18px; color: var(--d-ink-3); font-size: 13px; margin: 0; }
|
|
674
|
+
.blog_note { font-size: 12px; color: var(--d-ink-3); margin: 0; }
|
|
675
|
+
.blog_explain {
|
|
676
676
|
font-size: 12.6px; color: var(--d-ink-3); background: var(--d-sunk);
|
|
677
677
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius); padding: 11px 14px; margin: 0;
|
|
678
678
|
}
|
|
679
|
-
.
|
|
679
|
+
.blog_explain b { color: var(--d-ink-2); font-weight: 650; }
|
|
680
680
|
|
|
681
|
-
.
|
|
682
|
-
.
|
|
681
|
+
.blog_settings { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
|
|
682
|
+
.blog_save-bar {
|
|
683
683
|
position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
|
|
684
684
|
gap: 12px; background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
685
685
|
padding: 11px 16px; box-shadow: var(--d-shadow-lg); flex-wrap: wrap;
|
|
686
686
|
}
|
|
687
|
-
.
|
|
688
|
-
.
|
|
689
|
-
.
|
|
690
|
-
.
|
|
691
|
-
.
|
|
687
|
+
.blog_colour-row { display: flex; gap: 8px; align-items: center; }
|
|
688
|
+
.blog_colour { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface); cursor: pointer; }
|
|
689
|
+
.blog_role-grid { display: flex; flex-direction: column; gap: 8px; }
|
|
690
|
+
.blog_role-row { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: 8px 12px; align-items: center; font-size: 13px; }
|
|
691
|
+
.blog_role-row .blog_note { grid-column: 1 / -1; }
|
|
692
692
|
|
|
693
693
|
/* ============================ post editor ============================ */
|
|
694
694
|
|
|
695
|
-
.
|
|
695
|
+
.blog_skip-link {
|
|
696
696
|
position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
|
|
697
697
|
}
|
|
698
|
-
.
|
|
698
|
+
.blog_skip-link:focus {
|
|
699
699
|
position: fixed; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; overflow: visible;
|
|
700
700
|
padding: 8px 14px; background: var(--d-accent); color: #fff; border-radius: var(--d-radius-sm);
|
|
701
701
|
font-size: 13px; font-weight: 650; text-decoration: none; box-shadow: var(--d-shadow);
|
|
702
702
|
}
|
|
703
|
-
.
|
|
703
|
+
.blog_screen-reader {
|
|
704
704
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
|
|
705
705
|
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
|
706
706
|
}
|
|
707
|
-
.
|
|
707
|
+
.blog_ed-title-wrap { display: contents; }
|
|
708
708
|
|
|
709
|
-
.
|
|
709
|
+
.blog_ed-wp-header {
|
|
710
710
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
711
711
|
margin-bottom: 4px; font-size: 13px; color: var(--d-ink-3);
|
|
712
712
|
}
|
|
713
|
-
.
|
|
713
|
+
.blog_ed-wp-header-meta .blog_is-dirty { color: var(--d-warn); font-weight: 650; }
|
|
714
714
|
|
|
715
|
-
.
|
|
715
|
+
.blog_ed-bar {
|
|
716
716
|
position: sticky; top: 8px; z-index: 20; display: flex; align-items: center;
|
|
717
717
|
justify-content: space-between; gap: 12px; flex-wrap: wrap;
|
|
718
718
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
719
719
|
padding: 9px 13px; box-shadow: var(--d-shadow);
|
|
720
720
|
}
|
|
721
|
-
.
|
|
722
|
-
.
|
|
723
|
-
.
|
|
724
|
-
.
|
|
721
|
+
.blog_ed-bar-left, .blog_ed-bar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
|
|
722
|
+
.blog_ed-bar-meta { font-size: 12.2px; color: var(--d-ink-3); }
|
|
723
|
+
.blog_ed-bar-meta .blog_is-dirty { color: var(--d-warn); font-weight: 650; }
|
|
724
|
+
.blog_ed-error { margin-top: -6px; }
|
|
725
725
|
|
|
726
|
-
.
|
|
727
|
-
@media (min-width: 1100px) { .
|
|
728
|
-
.
|
|
729
|
-
.
|
|
726
|
+
.blog_ed-layout { display: grid; gap: 16px; align-items: start; }
|
|
727
|
+
@media (min-width: 1100px) { .blog_ed-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
|
|
728
|
+
.blog_ed-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
|
|
729
|
+
.blog_ed-side { display: flex; flex-direction: column; gap: 14px; }
|
|
730
730
|
/* A sticky column, but never a squashed one: without `flex: 0 0 auto` the boxes
|
|
731
731
|
shrink to fit the column and `overflow: hidden` silently eats their content. */
|
|
732
|
-
.
|
|
733
|
-
@media (min-width: 1100px) { .
|
|
732
|
+
.blog_ed-side > * { flex: 0 0 auto; }
|
|
733
|
+
@media (min-width: 1100px) { .blog_ed-side { position: sticky; top: 12px; align-self: start; } }
|
|
734
734
|
|
|
735
|
-
.
|
|
735
|
+
.blog_ed-title {
|
|
736
736
|
font: inherit; font-size: 1.7em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
|
|
737
737
|
padding: 8px 0 12px; border: 0; border-radius: 0;
|
|
738
738
|
background: transparent; color: var(--d-ink); width: 100%; box-shadow: none;
|
|
739
739
|
}
|
|
740
|
-
.
|
|
741
|
-
.
|
|
740
|
+
.blog_ed-title:focus { outline: none; box-shadow: none; border-bottom: 1px solid var(--d-accent); }
|
|
741
|
+
.blog_ed-title::placeholder { color: var(--d-ink-3); font-weight: 600; }
|
|
742
742
|
|
|
743
|
-
.
|
|
744
|
-
.
|
|
745
|
-
.
|
|
743
|
+
.blog_ed-permalink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.6px; color: var(--d-ink-3); padding: 0 3px; }
|
|
744
|
+
.blog_ed-permalink .blog_lbl { font-weight: 650; color: var(--d-ink-2); }
|
|
745
|
+
.blog_ed-permalink-value { color: var(--d-accent-ink); }
|
|
746
746
|
|
|
747
747
|
/* `overflow: clip` (not `hidden`) keeps rounded corners flush with the card
|
|
748
748
|
border without creating a scroll container that would trap the sticky toolbar. */
|
|
749
|
-
.
|
|
749
|
+
.blog_ed {
|
|
750
750
|
border: 1px solid var(--d-rule);
|
|
751
751
|
border-radius: var(--d-radius);
|
|
752
752
|
background: var(--d-surface);
|
|
753
753
|
box-shadow: var(--d-shadow);
|
|
754
754
|
overflow: clip;
|
|
755
755
|
}
|
|
756
|
-
.
|
|
756
|
+
.blog_ed-chrome {
|
|
757
757
|
border-radius: var(--d-radius) var(--d-radius) 0 0;
|
|
758
758
|
background: var(--d-surface-2);
|
|
759
759
|
overflow: clip;
|
|
760
760
|
}
|
|
761
761
|
/* Stick the Visual/Code + formatting bar under the dashboard top bar while editing */
|
|
762
|
-
.
|
|
762
|
+
.blog_ed.blog_is-active .blog_ed-chrome {
|
|
763
763
|
position: sticky;
|
|
764
764
|
top: 64px;
|
|
765
765
|
z-index: 25;
|
|
@@ -767,24 +767,24 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
767
767
|
border-bottom: 1px solid var(--d-rule);
|
|
768
768
|
border-radius: 0; /* flush under the sticky top bar when active */
|
|
769
769
|
}
|
|
770
|
-
.
|
|
770
|
+
.blog_ed-toolbar {
|
|
771
771
|
display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
|
|
772
772
|
padding: 7px 9px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
|
|
773
773
|
border-radius: 0;
|
|
774
774
|
}
|
|
775
|
-
.
|
|
775
|
+
.blog_tb-btn {
|
|
776
776
|
font: inherit; font-size: 13px; min-width: 30px; height: 30px; padding: 0 7px;
|
|
777
777
|
border: 1px solid transparent; border-radius: var(--d-radius-sm); background: transparent;
|
|
778
778
|
color: var(--d-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
|
|
779
779
|
}
|
|
780
|
-
.
|
|
781
|
-
.
|
|
782
|
-
.
|
|
783
|
-
.
|
|
784
|
-
.
|
|
780
|
+
.blog_tb-btn:hover { background: var(--d-sunk); color: var(--d-ink); }
|
|
781
|
+
.blog_tb-btn.blog_is-on { background: var(--d-accent-soft); color: var(--d-accent-ink); border-color: var(--d-accent); }
|
|
782
|
+
.blog_tb-select { font: inherit; font-size: 12.6px; padding: 5px 8px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-ink); }
|
|
783
|
+
.blog_tb-sep { width: 1px; height: 18px; background: var(--d-rule); margin: 0 5px; }
|
|
784
|
+
.blog_tb-count { margin-left: auto; font-size: 11.6px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
|
|
785
785
|
|
|
786
|
-
.
|
|
787
|
-
.
|
|
786
|
+
.blog_ed-link { border-bottom: 1px solid var(--d-rule); background: var(--d-sunk); padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; }
|
|
787
|
+
.blog_ed-link-popover {
|
|
788
788
|
position: fixed; z-index: 10000; width: min(360px, calc(100vw - 16px));
|
|
789
789
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
790
790
|
box-shadow: 0 12px 40px rgba(16, 18, 32, 0.22); padding: 12px 13px;
|
|
@@ -793,47 +793,47 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
793
793
|
scrollbar-width: none;
|
|
794
794
|
-ms-overflow-style: none;
|
|
795
795
|
}
|
|
796
|
-
.
|
|
797
|
-
.
|
|
796
|
+
.blog_ed-link-popover::-webkit-scrollbar { display: none; }
|
|
797
|
+
.blog_ed-link-popover::before {
|
|
798
798
|
content: ''; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px;
|
|
799
799
|
background: var(--d-surface); border-left: 1px solid var(--d-rule); border-top: 1px solid var(--d-rule);
|
|
800
800
|
transform: rotate(45deg);
|
|
801
801
|
}
|
|
802
|
-
.
|
|
802
|
+
.blog_ed-link-selection {
|
|
803
803
|
margin: 0; font-size: 12.5px; color: var(--d-ink-2); font-style: italic;
|
|
804
804
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
805
805
|
}
|
|
806
|
-
.
|
|
807
|
-
.
|
|
808
|
-
.
|
|
809
|
-
.
|
|
810
|
-
.
|
|
806
|
+
.blog_ed-link-actions { display: flex; gap: 12px; justify-content: flex-end; }
|
|
807
|
+
.blog_ed-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
808
|
+
.blog_ed-link-row .blog_fld { flex: 1; min-width: 190px; }
|
|
809
|
+
.blog_ed-link-tab { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--d-ink-2); white-space: nowrap; }
|
|
810
|
+
.blog_ed-link-hits {
|
|
811
811
|
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
|
|
812
812
|
max-height: 200px; overflow-y: auto;
|
|
813
813
|
scrollbar-width: none;
|
|
814
814
|
-ms-overflow-style: none;
|
|
815
815
|
}
|
|
816
|
-
.
|
|
817
|
-
.
|
|
816
|
+
.blog_ed-link-hits::-webkit-scrollbar { display: none; }
|
|
817
|
+
.blog_ed-link-hits button {
|
|
818
818
|
font: inherit; width: 100%; text-align: left; border: 0; background: var(--d-surface);
|
|
819
819
|
border-radius: var(--d-radius-sm); padding: 7px 10px; cursor: pointer; display: flex;
|
|
820
820
|
justify-content: space-between; gap: 12px; align-items: baseline; color: var(--d-ink);
|
|
821
821
|
}
|
|
822
|
-
.
|
|
823
|
-
.
|
|
824
|
-
.
|
|
825
|
-
.
|
|
822
|
+
.blog_ed-link-hits button:hover { background: var(--d-accent-soft); }
|
|
823
|
+
.blog_hit-label { font-size: 13px; font-weight: 600; }
|
|
824
|
+
.blog_hit-path { font-size: 11.6px; color: var(--d-ink-3); }
|
|
825
|
+
.blog_ed-link-note { margin: 0; font-size: 11.8px; color: var(--d-ink-3); }
|
|
826
826
|
|
|
827
|
-
.
|
|
828
|
-
.
|
|
829
|
-
.
|
|
830
|
-
.
|
|
827
|
+
.blog_ed-surface { position: relative; border-radius: 0 0 var(--d-radius) var(--d-radius); overflow: clip; }
|
|
828
|
+
.blog_ed-placeholder { position: absolute; top: 22px; left: 24px; color: var(--d-ink-3); pointer-events: none; font-size: 16.5px; }
|
|
829
|
+
.blog_ed-input { padding: 20px 24px 48px; min-height: 420px; outline: none; }
|
|
830
|
+
.blog_ed-skeleton {
|
|
831
831
|
min-height: 420px;
|
|
832
832
|
background: linear-gradient(90deg, var(--d-sunk) 0%, var(--d-surface-2) 50%, var(--d-sunk) 100%);
|
|
833
833
|
background-size: 200% 100%;
|
|
834
834
|
animation: ed-shimmer 1.2s ease-in-out infinite;
|
|
835
835
|
}
|
|
836
|
-
.
|
|
836
|
+
.blog_ed-mode-skeleton {
|
|
837
837
|
display: inline-block; width: 64px; height: 28px; border-radius: var(--d-radius-sm);
|
|
838
838
|
background: var(--d-sunk);
|
|
839
839
|
}
|
|
@@ -842,167 +842,167 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
842
842
|
100% { background-position: -100% 0; }
|
|
843
843
|
}
|
|
844
844
|
@media (prefers-reduced-motion: reduce) {
|
|
845
|
-
.
|
|
845
|
+
.blog_ed-skeleton { animation: none; background: var(--d-sunk); }
|
|
846
846
|
}
|
|
847
847
|
|
|
848
848
|
/* the writing surface reads like the article, not like a form field */
|
|
849
|
-
.
|
|
850
|
-
.
|
|
851
|
-
.
|
|
852
|
-
.
|
|
853
|
-
.
|
|
854
|
-
.
|
|
855
|
-
.
|
|
849
|
+
.blog_ed-input.blog_prose { font-family: var(--d-read); font-size: 16.5px; line-height: 1.68; color: var(--d-ink); }
|
|
850
|
+
.blog_ed-input.blog_prose > * { margin: 0 0 1.05em; }
|
|
851
|
+
.blog_ed-input.blog_prose h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin: 1.5em 0 0.5em; line-height: 1.2; }
|
|
852
|
+
.blog_ed-input.blog_prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 1.5em 0 0.5em; line-height: 1.25; }
|
|
853
|
+
.blog_ed-input.blog_prose h3 { font-size: 19.5px; font-weight: 700; letter-spacing: -0.015em; margin: 1.4em 0 0.45em; }
|
|
854
|
+
.blog_ed-input.blog_prose h4 { font-size: 17px; font-weight: 700; margin: 1.3em 0 0.4em; }
|
|
855
|
+
.blog_ed-input.blog_prose blockquote {
|
|
856
856
|
margin: 1.3em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--d-accent);
|
|
857
857
|
color: var(--d-ink-2); font-style: italic;
|
|
858
858
|
}
|
|
859
|
-
.
|
|
860
|
-
.
|
|
861
|
-
.
|
|
862
|
-
.
|
|
863
|
-
.
|
|
864
|
-
.
|
|
865
|
-
.
|
|
866
|
-
.
|
|
867
|
-
.
|
|
859
|
+
.blog_ed-input.blog_prose ul, .blog_ed-input.blog_prose ol { padding-left: 1.4em; }
|
|
860
|
+
.blog_ed-input.blog_prose li { margin-bottom: 0.35em; }
|
|
861
|
+
.blog_ed-input.blog_prose a { color: var(--d-accent); text-decoration: underline; text-underline-offset: 2px; }
|
|
862
|
+
.blog_ed-input.blog_prose a[data-link-type='internal'] { text-decoration-style: dotted; }
|
|
863
|
+
.blog_ed-input.blog_prose code { font-family: var(--d-mono); font-size: 0.88em; background: var(--d-sunk); padding: 1px 5px; border-radius: 4px; }
|
|
864
|
+
.blog_ed-input.blog_prose hr { border: 0; border-top: 2px solid var(--d-rule); margin: 1.8em 0; }
|
|
865
|
+
.blog_ed-input.blog_prose figure.blog_ed-figure { margin: 1.5em 0; border-radius: var(--d-radius); overflow: hidden; border: 1px solid var(--d-rule); background: var(--d-sunk); }
|
|
866
|
+
.blog_ed-input.blog_prose figure.blog_ed-figure img { display: block; width: 100%; height: auto; }
|
|
867
|
+
.blog_ed-input.blog_prose figure.blog_ed-figure figcaption { font-family: var(--d-ui); font-size: 12.2px; color: var(--d-ink-3); padding: 8px 12px; }
|
|
868
868
|
|
|
869
869
|
/* sidebar boxes */
|
|
870
|
-
.
|
|
871
|
-
.
|
|
872
|
-
.
|
|
873
|
-
.
|
|
874
|
-
.
|
|
875
|
-
.
|
|
876
|
-
.
|
|
877
|
-
.
|
|
878
|
-
|
|
879
|
-
.
|
|
880
|
-
.
|
|
881
|
-
.
|
|
882
|
-
.
|
|
883
|
-
|
|
884
|
-
.
|
|
885
|
-
.
|
|
886
|
-
.
|
|
887
|
-
.
|
|
888
|
-
.
|
|
889
|
-
|
|
890
|
-
.
|
|
891
|
-
.
|
|
892
|
-
.
|
|
893
|
-
.
|
|
894
|
-
.
|
|
895
|
-
|
|
896
|
-
.
|
|
897
|
-
.
|
|
870
|
+
.blog_box { background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius); box-shadow: var(--d-shadow); overflow: hidden; }
|
|
871
|
+
.blog_box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2); }
|
|
872
|
+
.blog_box-head h3 { margin: 0; font-size: 12.4px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; color: var(--d-ink-2); }
|
|
873
|
+
.blog_box-hint { font-size: 11.4px; color: var(--d-ink-3); }
|
|
874
|
+
.blog_box-hint.blog_warn { color: var(--d-warn); font-weight: 650; }
|
|
875
|
+
.blog_box-body { padding: 13px 14px; }
|
|
876
|
+
.blog_box-publish { border-color: var(--d-accent); }
|
|
877
|
+
.blog_box-publish .blog_box-head { background: var(--d-accent-soft); border-bottom-color: var(--d-accent); }
|
|
878
|
+
|
|
879
|
+
.blog_facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
880
|
+
.blog_facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.6px; }
|
|
881
|
+
.blog_facts dt { color: var(--d-ink-3); margin: 0; }
|
|
882
|
+
.blog_facts dd { margin: 0; font-weight: 620; text-align: right; }
|
|
883
|
+
|
|
884
|
+
.blog_checklist { background: var(--d-crit-soft); border: 1px solid var(--d-crit); border-radius: var(--d-radius-sm); padding: 9px 12px; }
|
|
885
|
+
.blog_checklist-head { margin: 0 0 5px; font-size: 11.6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-crit); }
|
|
886
|
+
.blog_checklist ul { margin: 0; padding-left: 16px; font-size: 12.4px; color: var(--d-ink-2); }
|
|
887
|
+
.blog_checklist-ok { margin: 0; font-size: 12.4px; color: var(--d-good); font-weight: 600; }
|
|
888
|
+
.blog_checklist-ok::before { content: '✓ '; font-weight: 700; }
|
|
889
|
+
|
|
890
|
+
.blog_pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
|
|
891
|
+
.blog_pick-list-auto { max-height: none; overflow: visible; }
|
|
892
|
+
.blog_pick-list-compact { max-height: 140px; }
|
|
893
|
+
.blog_pick-row { display: flex; gap: 9px; align-items: center; font-size: 13px; padding: 3px 2px; cursor: pointer; }
|
|
894
|
+
.blog_pick-row:hover { color: var(--d-accent-ink); }
|
|
895
|
+
|
|
896
|
+
.blog_tokens { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
897
|
+
.blog_token {
|
|
898
898
|
display: inline-flex; align-items: center; gap: 6px; font-size: 12.2px; font-weight: 560;
|
|
899
899
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: 100px; padding: 3px 5px 3px 10px;
|
|
900
900
|
}
|
|
901
|
-
.
|
|
902
|
-
.
|
|
903
|
-
.
|
|
901
|
+
.blog_token-new { background: var(--d-accent-soft); border-color: var(--d-accent); color: var(--d-accent-ink); }
|
|
902
|
+
.blog_token button { font: inherit; border: 0; background: none; cursor: pointer; color: var(--d-ink-3); line-height: 1; padding: 0 3px; }
|
|
903
|
+
.blog_token button:hover { color: var(--d-crit); }
|
|
904
904
|
|
|
905
|
-
.
|
|
906
|
-
.
|
|
907
|
-
.
|
|
908
|
-
.
|
|
909
|
-
.
|
|
910
|
-
.
|
|
911
|
-
.
|
|
905
|
+
.blog_thumb-row { display: flex; gap: 10px; align-items: center; }
|
|
906
|
+
.blog_thumb { width: 62px; height: 46px; object-fit: cover; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); }
|
|
907
|
+
.blog_feat { width: 100%; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); display: block; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
908
|
+
.blog_feat-alt { margin-top: 2px; }
|
|
909
|
+
.blog_feat-alt .blog_fld { resize: vertical; min-height: 56px; }
|
|
910
|
+
.blog_feat-alt-foot { margin: 0; }
|
|
911
|
+
.blog_fld-em { font-style: normal; font-weight: 500; color: var(--d-ink-3); font-size: 11.5px; }
|
|
912
912
|
|
|
913
913
|
/* drop targets */
|
|
914
|
-
.
|
|
915
|
-
.
|
|
914
|
+
.blog_drop-target.blog_is-dragging { outline: 2px dashed var(--d-accent); outline-offset: -6px; background: var(--d-accent-soft); }
|
|
915
|
+
.blog_dropzone-cta {
|
|
916
916
|
font: inherit; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
917
917
|
padding: 20px 14px; border: 1.5px dashed var(--d-rule); border-radius: var(--d-radius-sm);
|
|
918
918
|
background: var(--d-surface-2); color: var(--d-ink-2); cursor: pointer; text-align: center;
|
|
919
919
|
font-size: 12.6px; font-weight: 550;
|
|
920
920
|
}
|
|
921
|
-
.
|
|
922
|
-
.
|
|
923
|
-
.
|
|
921
|
+
.blog_dropzone-cta:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
|
|
922
|
+
.blog_dropzone-cta:disabled { opacity: 0.6; cursor: progress; }
|
|
923
|
+
.blog_dropzone-icon { font-size: 17px; }
|
|
924
924
|
|
|
925
925
|
/* search-result preview */
|
|
926
|
-
.
|
|
927
|
-
.
|
|
928
|
-
.
|
|
929
|
-
.
|
|
926
|
+
.blog_serp { background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); padding: 11px 13px; }
|
|
927
|
+
.blog_serp-url { font-size: 11.8px; color: var(--d-ink-3); }
|
|
928
|
+
.blog_serp-title { font-size: 16px; color: var(--d-accent); margin-top: 3px; line-height: 1.3; }
|
|
929
|
+
.blog_serp-desc { font-size: 12.6px; color: var(--d-ink-2); margin-top: 3px; }
|
|
930
930
|
|
|
931
931
|
/* WordPress-parity editor extras */
|
|
932
|
-
.
|
|
932
|
+
.blog_ed-mode-tabs {
|
|
933
933
|
display: flex; gap: 0; border-bottom: 1px solid var(--d-rule);
|
|
934
934
|
background: var(--d-surface-2); border-radius: inherit; padding: 0 8px;
|
|
935
935
|
}
|
|
936
|
-
.
|
|
936
|
+
.blog_ed-mode-tabs button {
|
|
937
937
|
font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent;
|
|
938
938
|
color: var(--d-ink-3); padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
939
939
|
}
|
|
940
|
-
.
|
|
941
|
-
.
|
|
942
|
-
.
|
|
943
|
-
.
|
|
940
|
+
.blog_ed-mode-tabs button:hover { color: var(--d-ink); }
|
|
941
|
+
.blog_ed-mode-tabs button.blog_is-on { color: var(--d-ink); border-bottom-color: var(--d-accent); }
|
|
942
|
+
.blog_ed .blog_ed-toolbar { border-radius: 0; }
|
|
943
|
+
.blog_tb-media {
|
|
944
944
|
font-weight: 650 !important; min-width: auto !important; padding: 0 10px !important;
|
|
945
945
|
background: var(--d-accent-soft) !important; color: var(--d-accent-ink) !important; border-color: var(--d-accent) !important;
|
|
946
946
|
}
|
|
947
|
-
.
|
|
948
|
-
.
|
|
949
|
-
.
|
|
947
|
+
.blog_tb-color { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--d-ink-2); cursor: pointer; padding: 0 6px; height: 30px; }
|
|
948
|
+
.blog_tb-color input { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
|
|
949
|
+
.blog_ed-code {
|
|
950
950
|
display: block; width: 100%; min-height: 420px; padding: 16px 18px; border: 0; resize: vertical;
|
|
951
951
|
background: #1e1f2b; color: #e8e8f0; font-size: 13px; line-height: 1.5; outline: none;
|
|
952
952
|
border-radius: 0 0 var(--d-radius) var(--d-radius);
|
|
953
953
|
}
|
|
954
|
-
.
|
|
954
|
+
.blog_ed-chars {
|
|
955
955
|
display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--d-rule); background: var(--d-sunk);
|
|
956
956
|
}
|
|
957
|
-
.
|
|
957
|
+
.blog_ed-chars button {
|
|
958
958
|
font: inherit; min-width: 28px; height: 28px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
959
959
|
background: var(--d-surface); cursor: pointer; color: var(--d-ink);
|
|
960
960
|
}
|
|
961
|
-
.
|
|
961
|
+
.blog_ed-chars button:hover { border-color: var(--d-accent); }
|
|
962
962
|
|
|
963
|
-
.
|
|
964
|
-
.
|
|
965
|
-
.
|
|
966
|
-
.
|
|
967
|
-
.
|
|
968
|
-
.
|
|
969
|
-
.
|
|
963
|
+
.blog_wp-facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
964
|
+
.blog_wp-facts .blog_fact-row { display: flex; gap: 6px; align-items: baseline; font-size: 12.6px; flex-wrap: wrap; }
|
|
965
|
+
.blog_wp-facts .blog_fact-lbl { color: var(--d-ink-3); min-width: 72px; }
|
|
966
|
+
.blog_wp-facts .blog_fact-val { font-weight: 550; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
967
|
+
.blog_fact-edit { padding: 4px 0 8px 78px; }
|
|
968
|
+
.blog_fld-sm { max-width: 180px; padding: 5px 8px; font-size: 12.5px; }
|
|
969
|
+
.blog_linkish {
|
|
970
970
|
font: inherit; border: 0; background: transparent; color: var(--d-accent); cursor: pointer;
|
|
971
971
|
padding: 0; text-decoration: underline; text-underline-offset: 2px; font-size: 12.4px;
|
|
972
972
|
}
|
|
973
|
-
.
|
|
974
|
-
.
|
|
975
|
-
.
|
|
973
|
+
.blog_linkish:hover { color: var(--d-accent-ink); }
|
|
974
|
+
.blog_linkish:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
975
|
+
.blog_publish-foot {
|
|
976
976
|
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
977
977
|
padding-top: 8px; border-top: 1px solid var(--d-rule); margin-top: 4px;
|
|
978
978
|
}
|
|
979
|
-
.
|
|
979
|
+
.blog_publish-foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
|
|
980
980
|
|
|
981
|
-
.
|
|
982
|
-
.
|
|
983
|
-
.
|
|
981
|
+
.blog_profile-panel { display: flex; flex-direction: column; gap: 18px; }
|
|
982
|
+
.blog_profile-hero { display: flex; align-items: center; gap: 14px; }
|
|
983
|
+
.blog_profile-avatar-img {
|
|
984
984
|
width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
|
|
985
985
|
border: 1px solid var(--d-accent);
|
|
986
986
|
}
|
|
987
|
-
.
|
|
987
|
+
.blog_profile-avatar {
|
|
988
988
|
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
|
|
989
989
|
background: var(--d-accent-soft); color: var(--d-accent-ink); font-size: 20px; font-weight: 800;
|
|
990
990
|
border: 1px solid var(--d-accent);
|
|
991
991
|
}
|
|
992
|
-
.
|
|
993
|
-
.
|
|
994
|
-
.
|
|
995
|
-
.
|
|
996
|
-
.
|
|
997
|
-
.
|
|
992
|
+
.blog_profile-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--d-ink); }
|
|
993
|
+
.blog_profile-email { margin: 4px 0 0; font-size: 13px; color: var(--d-ink-3); }
|
|
994
|
+
.blog_profile-facts { max-width: 360px; }
|
|
995
|
+
.blog_profile-roles h3 { margin: 0 0 8px; font-size: 12.4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-ink-3); }
|
|
996
|
+
.blog_profile-role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
|
|
997
|
+
.blog_profile-role-list li {
|
|
998
998
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
999
999
|
padding: 8px 10px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk);
|
|
1000
1000
|
font-size: 13px;
|
|
1001
1001
|
}
|
|
1002
|
-
.
|
|
1003
|
-
.
|
|
1002
|
+
.blog_profile-role-brand { font-weight: 600; color: var(--d-ink); }
|
|
1003
|
+
.blog_profile-role-level { font-size: 12px; color: var(--d-ink-3); }
|
|
1004
1004
|
|
|
1005
|
-
.
|
|
1005
|
+
.blog_profile-logout-top {
|
|
1006
1006
|
display: inline-flex;
|
|
1007
1007
|
align-items: center;
|
|
1008
1008
|
gap: 7px;
|
|
@@ -1014,397 +1014,397 @@ textarea.fld { resize: vertical; line-height: 1.55; }
|
|
|
1014
1014
|
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
|
|
1015
1015
|
}
|
|
1016
1016
|
|
|
1017
|
-
.
|
|
1017
|
+
.blog_profile-logout-top:hover:not(:disabled) {
|
|
1018
1018
|
background: color-mix(in srgb, var(--d-crit) 12%, var(--d-surface));
|
|
1019
1019
|
border-color: color-mix(in srgb, var(--d-crit) 45%, var(--d-rule));
|
|
1020
1020
|
transform: translateY(-1px);
|
|
1021
1021
|
box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--d-crit) 55%, transparent);
|
|
1022
1022
|
}
|
|
1023
1023
|
|
|
1024
|
-
.
|
|
1024
|
+
.blog_profile-logout-top:active:not(:disabled) {
|
|
1025
1025
|
transform: translateY(0);
|
|
1026
1026
|
}
|
|
1027
1027
|
|
|
1028
|
-
.
|
|
1028
|
+
.blog_profile-logout-top:disabled {
|
|
1029
1029
|
opacity: 0.65;
|
|
1030
1030
|
cursor: not-allowed;
|
|
1031
1031
|
}
|
|
1032
1032
|
|
|
1033
|
-
.
|
|
1033
|
+
.blog_logout-btn-icon {
|
|
1034
1034
|
width: 16px;
|
|
1035
1035
|
height: 16px;
|
|
1036
1036
|
flex-shrink: 0;
|
|
1037
1037
|
}
|
|
1038
|
-
.
|
|
1039
|
-
.
|
|
1038
|
+
.blog_publish-seo-summary { flex-direction: column; align-items: stretch; }
|
|
1039
|
+
.blog_btn-tiny { font-size: 12px; padding: 4px 9px; }
|
|
1040
1040
|
|
|
1041
|
-
.
|
|
1042
|
-
.
|
|
1041
|
+
.blog_seo-summary { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
1042
|
+
.blog_seo-pill {
|
|
1043
1043
|
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
|
|
1044
1044
|
padding: 5px 10px; border-radius: 999px; border: 1px solid var(--d-rule); background: var(--d-sunk);
|
|
1045
1045
|
}
|
|
1046
|
-
.
|
|
1047
|
-
.
|
|
1048
|
-
.
|
|
1049
|
-
.
|
|
1050
|
-
.
|
|
1051
|
-
.
|
|
1052
|
-
.
|
|
1053
|
-
.
|
|
1054
|
-
.
|
|
1055
|
-
.
|
|
1056
|
-
.
|
|
1057
|
-
.
|
|
1058
|
-
.
|
|
1059
|
-
.
|
|
1060
|
-
.
|
|
1061
|
-
.
|
|
1062
|
-
.
|
|
1063
|
-
.
|
|
1064
|
-
.
|
|
1046
|
+
.blog_seo-pill-good { border-color: var(--d-good); background: var(--d-good-soft); color: var(--d-good); }
|
|
1047
|
+
.blog_seo-pill-ok { border-color: var(--d-warn); background: var(--d-warn-soft); color: var(--d-warn); }
|
|
1048
|
+
.blog_seo-pill-bad { border-color: var(--d-crit); background: var(--d-crit-soft); color: var(--d-crit); }
|
|
1049
|
+
.blog_seo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
1050
|
+
.blog_seo-dot-good { background: var(--d-good); }
|
|
1051
|
+
.blog_seo-dot-ok { background: var(--d-warn); }
|
|
1052
|
+
.blog_seo-dot-bad { background: var(--d-crit); }
|
|
1053
|
+
.blog_seo-analysis { display: flex; flex-direction: column; gap: 12px; }
|
|
1054
|
+
.blog_seo-details { border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk); padding: 0 12px 10px; }
|
|
1055
|
+
.blog_seo-details summary { cursor: pointer; font-weight: 650; font-size: 13px; padding: 10px 0; list-style: none; }
|
|
1056
|
+
.blog_seo-details summary::-webkit-details-marker { display: none; }
|
|
1057
|
+
.blog_seo-advanced { border-top: 1px solid var(--d-rule); padding-top: 8px; }
|
|
1058
|
+
.blog_seo-advanced summary { cursor: pointer; font-weight: 650; font-size: 13px; color: var(--d-ink-2); }
|
|
1059
|
+
.blog_seo-group { margin-top: 8px; }
|
|
1060
|
+
.blog_seo-group-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-ink-3); }
|
|
1061
|
+
.blog_seo-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
1062
|
+
.blog_seo-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.6px; }
|
|
1063
|
+
.blog_seo-checks strong { display: block; font-size: 12.8px; }
|
|
1064
|
+
.blog_seo-checks span { display: block; color: var(--d-ink-2); margin-top: 1px; }
|
|
1065
1065
|
|
|
1066
1066
|
/* Yoast SEO metabox — uses dashboard tokens */
|
|
1067
|
-
.
|
|
1068
|
-
.
|
|
1069
|
-
.
|
|
1067
|
+
.blog_yoast-box { overflow: hidden; }
|
|
1068
|
+
.blog_yoast-box .blog_box-body { padding: 0; }
|
|
1069
|
+
.blog_yoast-tabs {
|
|
1070
1070
|
display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--d-rule);
|
|
1071
1071
|
background: var(--d-surface-2); padding: 0 8px;
|
|
1072
1072
|
}
|
|
1073
|
-
.
|
|
1073
|
+
.blog_yoast-tab {
|
|
1074
1074
|
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--d-ink-3);
|
|
1075
1075
|
display: inline-flex; align-items: center; gap: 6px;
|
|
1076
1076
|
padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
|
|
1077
1077
|
background: transparent; cursor: pointer; margin-bottom: -1px;
|
|
1078
1078
|
}
|
|
1079
|
-
.
|
|
1080
|
-
.
|
|
1081
|
-
.
|
|
1082
|
-
.
|
|
1083
|
-
.
|
|
1084
|
-
.
|
|
1085
|
-
.
|
|
1086
|
-
.
|
|
1087
|
-
.
|
|
1088
|
-
.
|
|
1089
|
-
.
|
|
1090
|
-
.
|
|
1091
|
-
.
|
|
1092
|
-
.
|
|
1079
|
+
.blog_yoast-tab:hover { color: var(--d-ink); }
|
|
1080
|
+
.blog_yoast-tab.blog_is-active { color: var(--d-ink); border-bottom-color: var(--d-accent); }
|
|
1081
|
+
.blog_yoast-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
1082
|
+
.blog_yoast-dot-good { background: var(--d-good); }
|
|
1083
|
+
.blog_yoast-dot-ok { background: var(--d-warn); }
|
|
1084
|
+
.blog_yoast-dot-bad { background: var(--d-crit); }
|
|
1085
|
+
.blog_yoast-inside { padding: 14px 16px 16px !important; }
|
|
1086
|
+
.blog_yoast-panel { display: flex; flex-direction: column; gap: 14px; }
|
|
1087
|
+
.blog_yoast-intro { margin: 0; font-size: 13px; color: var(--d-ink-2); line-height: 1.45; }
|
|
1088
|
+
.blog_yoast-section { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
|
|
1089
|
+
.blog_yoast-section-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--d-ink); }
|
|
1090
|
+
.blog_yoast-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
|
1091
|
+
.blog_yoast-analysis { display: flex; flex-direction: column; gap: 10px; }
|
|
1092
|
+
.blog_yoast-schema-preview {
|
|
1093
1093
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1094
1094
|
padding: 11px 13px;
|
|
1095
1095
|
}
|
|
1096
|
-
.
|
|
1097
|
-
.
|
|
1098
|
-
.
|
|
1096
|
+
.blog_yoast-schema-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.6px; color: var(--d-ink-2); }
|
|
1097
|
+
.blog_yoast-schema-list li + li { margin-top: 6px; }
|
|
1098
|
+
.blog_yoast-social-preview {
|
|
1099
1099
|
display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start;
|
|
1100
1100
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1101
1101
|
background: var(--d-sunk);
|
|
1102
1102
|
}
|
|
1103
|
-
.
|
|
1104
|
-
.
|
|
1103
|
+
.blog_yoast-social-img { width: 100%; height: 100%; min-height: 80px; object-fit: cover; display: block; }
|
|
1104
|
+
.blog_yoast-social-img-empty {
|
|
1105
1105
|
display: flex; align-items: center; justify-content: center; min-height: 80px;
|
|
1106
1106
|
font-size: 11px; color: var(--d-ink-3); background: var(--d-rule);
|
|
1107
1107
|
}
|
|
1108
|
-
.
|
|
1109
|
-
.
|
|
1110
|
-
.
|
|
1108
|
+
.blog_yoast-social-text { padding: 10px 12px 12px 0; min-width: 0; }
|
|
1109
|
+
.blog_yoast-social-site { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-ink-3); }
|
|
1110
|
+
.blog_yoast-social-title {
|
|
1111
1111
|
font-size: 14px; font-weight: 650; color: var(--d-ink); margin-top: 4px;
|
|
1112
1112
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
1113
1113
|
}
|
|
1114
|
-
.
|
|
1114
|
+
.blog_yoast-social-desc {
|
|
1115
1115
|
font-size: 12px; color: var(--d-ink-2); margin-top: 3px; line-height: 1.35;
|
|
1116
1116
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
1117
1117
|
}
|
|
1118
1118
|
|
|
1119
1119
|
/* SEO tab — WordPress Yoast parity */
|
|
1120
|
-
.
|
|
1121
|
-
.
|
|
1122
|
-
.
|
|
1123
|
-
.
|
|
1124
|
-
.
|
|
1125
|
-
.
|
|
1126
|
-
.
|
|
1127
|
-
.
|
|
1120
|
+
.blog_yoast-panel-seo { gap: 16px; }
|
|
1121
|
+
.blog_yoast-field { display: flex; flex-direction: column; gap: 6px; }
|
|
1122
|
+
.blog_yoast-label { font-size: 13px; font-weight: 650; color: var(--d-ink); }
|
|
1123
|
+
.blog_yoast-input { font-size: 13px; }
|
|
1124
|
+
.blog_yoast-help { margin: 0; font-size: 12.4px; line-height: 1.45; color: var(--d-ink-3); }
|
|
1125
|
+
.blog_yoast-learn-more { color: var(--d-accent); text-decoration: none; }
|
|
1126
|
+
.blog_yoast-learn-more:hover { text-decoration: underline; }
|
|
1127
|
+
.blog_yoast-keyphrase-hint {
|
|
1128
1128
|
margin: 0; padding: 10px 12px; font-size: 12.8px; color: var(--d-ink-2);
|
|
1129
1129
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1130
1130
|
}
|
|
1131
|
-
.
|
|
1131
|
+
.blog_yoast-snippet {
|
|
1132
1132
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1133
1133
|
background: var(--d-surface);
|
|
1134
1134
|
}
|
|
1135
|
-
.
|
|
1135
|
+
.blog_yoast-snippet-head {
|
|
1136
1136
|
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
1137
1137
|
padding: 10px 12px; border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
|
|
1138
1138
|
}
|
|
1139
|
-
.
|
|
1139
|
+
.blog_yoast-snippet-toggle {
|
|
1140
1140
|
font: inherit; font-size: 13px; font-weight: 700; color: var(--d-ink);
|
|
1141
1141
|
border: 0; background: transparent; cursor: pointer; padding: 0;
|
|
1142
1142
|
}
|
|
1143
|
-
.
|
|
1144
|
-
.
|
|
1145
|
-
.
|
|
1143
|
+
.blog_yoast-snippet-toggle:hover { color: var(--d-accent-ink); }
|
|
1144
|
+
.blog_yoast-preview-modes { display: inline-flex; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden; }
|
|
1145
|
+
.blog_yoast-preview-mode {
|
|
1146
1146
|
font: inherit; font-size: 11.8px; font-weight: 600; padding: 4px 10px; border: 0;
|
|
1147
1147
|
background: var(--d-surface); color: var(--d-ink-2); cursor: pointer;
|
|
1148
1148
|
}
|
|
1149
|
-
.
|
|
1150
|
-
.
|
|
1151
|
-
.
|
|
1152
|
-
.
|
|
1153
|
-
.
|
|
1154
|
-
.
|
|
1155
|
-
.
|
|
1156
|
-
.
|
|
1157
|
-
.
|
|
1158
|
-
.
|
|
1159
|
-
.
|
|
1160
|
-
.
|
|
1161
|
-
.
|
|
1162
|
-
.
|
|
1163
|
-
.
|
|
1164
|
-
.
|
|
1165
|
-
.
|
|
1149
|
+
.blog_yoast-preview-mode + .blog_yoast-preview-mode { border-left: 1px solid var(--d-rule); }
|
|
1150
|
+
.blog_yoast-preview-mode.blog_is-active { background: var(--d-accent-soft); color: var(--d-accent-ink); }
|
|
1151
|
+
.blog_yoast-serp { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--d-rule); }
|
|
1152
|
+
.blog_yoast-serp-mobile { max-width: 360px; }
|
|
1153
|
+
.blog_yoast-serp-desktop { max-width: none; }
|
|
1154
|
+
.blog_yoast-serp .blog_serp-title strong, .blog_yoast-serp .blog_serp-desc strong { font-weight: 700; }
|
|
1155
|
+
.blog_yoast-snippet-fields { padding: 12px; gap: 14px !important; }
|
|
1156
|
+
.blog_yoast-field-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
|
|
1157
|
+
.blog_yoast-char-count { font-size: 11.6px; color: var(--d-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
1158
|
+
.blog_yoast-meter { flex: 1; min-width: 0; }
|
|
1159
|
+
.blog_yoast-meter-track { height: 4px; border-radius: 999px; background: var(--d-rule); overflow: hidden; }
|
|
1160
|
+
.blog_yoast-meter-fill { height: 100%; border-radius: 999px; transition: width 0.15s ease; }
|
|
1161
|
+
.blog_yoast-meter-good { background: var(--d-good); }
|
|
1162
|
+
.blog_yoast-meter-ok { background: var(--d-warn); }
|
|
1163
|
+
.blog_yoast-meter-bad { background: var(--d-crit); }
|
|
1164
|
+
.blog_yoast-slug-row { display: flex; align-items: center; gap: 0; }
|
|
1165
|
+
.blog_yoast-slug-prefix {
|
|
1166
1166
|
font-size: 12.6px; color: var(--d-ink-3); padding: 8px 0 8px 10px;
|
|
1167
1167
|
border: 1px solid var(--d-rule); border-right: 0; border-radius: var(--d-radius-sm) 0 0 var(--d-radius-sm);
|
|
1168
1168
|
background: var(--d-sunk);
|
|
1169
1169
|
}
|
|
1170
|
-
.
|
|
1171
|
-
.
|
|
1170
|
+
.blog_yoast-slug-row .blog_yoast-input { border-radius: 0 var(--d-radius-sm) var(--d-radius-sm) 0; }
|
|
1171
|
+
.blog_yoast-accordion {
|
|
1172
1172
|
display: flex; flex-direction: column;
|
|
1173
1173
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1174
1174
|
background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden;
|
|
1175
1175
|
}
|
|
1176
|
-
.
|
|
1176
|
+
.blog_yoast-accordion .blog_yoast-collapse {
|
|
1177
1177
|
border: 0; border-radius: 0; box-shadow: none; margin: 0;
|
|
1178
1178
|
}
|
|
1179
|
-
.
|
|
1180
|
-
.
|
|
1179
|
+
.blog_yoast-accordion .blog_yoast-collapse + .blog_yoast-collapse { margin-top: 0; border-top: 1px solid var(--d-rule); }
|
|
1180
|
+
.blog_yoast-accordion-note {
|
|
1181
1181
|
margin: 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: var(--d-warn);
|
|
1182
1182
|
background: var(--d-warn-soft); border-top: 1px solid var(--d-rule); border-bottom: 1px solid var(--d-rule);
|
|
1183
1183
|
}
|
|
1184
1184
|
|
|
1185
1185
|
/* Shared accordion chevron */
|
|
1186
|
-
.
|
|
1186
|
+
.blog_acc-chevron {
|
|
1187
1187
|
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
1188
1188
|
width: 20px; height: 20px; color: var(--d-ink-3);
|
|
1189
1189
|
transition: transform 0.2s ease, color 0.15s ease;
|
|
1190
1190
|
}
|
|
1191
|
-
details[open] > summary .
|
|
1192
|
-
.
|
|
1193
|
-
.
|
|
1194
|
-
details[open] > summary:hover .
|
|
1191
|
+
details[open] > summary .blog_acc-chevron { transform: rotate(180deg); color: var(--d-accent); }
|
|
1192
|
+
.blog_yoast-collapse-summary:hover .blog_acc-chevron,
|
|
1193
|
+
.blog_yoast-result-summary:hover .blog_acc-chevron { color: var(--d-ink-2); }
|
|
1194
|
+
details[open] > summary:hover .blog_acc-chevron { color: var(--d-accent-ink); }
|
|
1195
1195
|
|
|
1196
1196
|
/* Yoast collapsible sections */
|
|
1197
|
-
.
|
|
1197
|
+
.blog_yoast-collapse {
|
|
1198
1198
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1199
1199
|
background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden;
|
|
1200
1200
|
}
|
|
1201
|
-
.
|
|
1202
|
-
.
|
|
1201
|
+
.blog_yoast-collapse + .blog_yoast-collapse { margin-top: 10px; }
|
|
1202
|
+
.blog_yoast-collapse-summary {
|
|
1203
1203
|
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
|
|
1204
1204
|
padding: 11px 14px; font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
|
|
1205
1205
|
color: var(--d-ink); background: transparent;
|
|
1206
1206
|
transition: background 0.12s ease, color 0.12s ease;
|
|
1207
1207
|
}
|
|
1208
|
-
.
|
|
1209
|
-
.
|
|
1208
|
+
.blog_yoast-collapse-summary:hover { background: var(--d-sunk); }
|
|
1209
|
+
.blog_yoast-collapse[open] > .blog_yoast-collapse-summary {
|
|
1210
1210
|
background: var(--d-surface-2); border-bottom: 1px solid var(--d-rule); color: var(--d-ink);
|
|
1211
1211
|
}
|
|
1212
|
-
.
|
|
1213
|
-
.
|
|
1214
|
-
.
|
|
1215
|
-
.
|
|
1212
|
+
.blog_yoast-collapse-summary::-webkit-details-marker { display: none; }
|
|
1213
|
+
.blog_yoast-collapse-title { flex: 1; min-width: 0; }
|
|
1214
|
+
.blog_yoast-collapse-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
|
|
1215
|
+
.blog_yoast-collapse-body {
|
|
1216
1216
|
padding: 14px; display: flex; flex-direction: column; gap: 12px;
|
|
1217
1217
|
background: var(--d-surface);
|
|
1218
1218
|
}
|
|
1219
|
-
.
|
|
1220
|
-
.
|
|
1219
|
+
.blog_yoast-count { font-weight: 600; color: var(--d-ink-3); }
|
|
1220
|
+
.blog_yoast-empty { margin: 0; font-size: 12.6px; color: var(--d-ink-3); }
|
|
1221
1221
|
|
|
1222
|
-
.
|
|
1223
|
-
.
|
|
1224
|
-
.
|
|
1222
|
+
.blog_yoast-snippet-field { display: flex; flex-direction: column; gap: 6px; }
|
|
1223
|
+
.blog_yoast-var-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1224
|
+
.blog_yoast-var-chip {
|
|
1225
1225
|
font: inherit; font-size: 12.2px; font-weight: 560; padding: 3px 10px;
|
|
1226
1226
|
border: 1px solid var(--d-rule); border-radius: 100px; background: var(--d-sunk);
|
|
1227
1227
|
color: var(--d-ink-2); cursor: pointer;
|
|
1228
1228
|
}
|
|
1229
|
-
.
|
|
1230
|
-
.
|
|
1231
|
-
.
|
|
1229
|
+
.blog_yoast-var-chip:hover { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); }
|
|
1230
|
+
.blog_yoast-var-chip.blog_token { cursor: pointer; }
|
|
1231
|
+
.blog_yoast-snippet-actions {
|
|
1232
1232
|
display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 2px;
|
|
1233
1233
|
}
|
|
1234
|
-
.
|
|
1235
|
-
.
|
|
1234
|
+
.blog_yoast-var-picker { position: relative; }
|
|
1235
|
+
.blog_yoast-var-menu {
|
|
1236
1236
|
position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px;
|
|
1237
1237
|
margin: 0; padding: 4px; list-style: none; background: var(--d-surface);
|
|
1238
1238
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); box-shadow: var(--d-shadow-lg);
|
|
1239
1239
|
}
|
|
1240
|
-
.
|
|
1240
|
+
.blog_yoast-var-option {
|
|
1241
1241
|
display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
|
|
1242
1242
|
font: inherit; font-size: 12.4px; padding: 7px 9px; border: 0; border-radius: var(--d-radius-sm);
|
|
1243
1243
|
background: transparent; color: var(--d-ink); cursor: pointer; text-align: left;
|
|
1244
1244
|
}
|
|
1245
|
-
.
|
|
1246
|
-
.
|
|
1247
|
-
.
|
|
1245
|
+
.blog_yoast-var-option:hover { background: var(--d-sunk); }
|
|
1246
|
+
.blog_yoast-var-option-label { font-weight: 650; }
|
|
1247
|
+
.blog_yoast-var-option-token { font-size: 11px; color: var(--d-ink-3); }
|
|
1248
1248
|
|
|
1249
|
-
.
|
|
1249
|
+
.blog_yoast-status-bad {
|
|
1250
1250
|
display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
|
|
1251
1251
|
border-radius: 50%; background: var(--d-crit-soft); color: var(--d-crit); font-size: 12px; font-weight: 800;
|
|
1252
1252
|
border: 1px solid var(--d-crit);
|
|
1253
1253
|
}
|
|
1254
|
-
.
|
|
1254
|
+
.blog_yoast-link-btn {
|
|
1255
1255
|
font: inherit; font-size: 12.6px; font-weight: 600; color: var(--d-accent);
|
|
1256
1256
|
background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; text-align: left;
|
|
1257
1257
|
}
|
|
1258
|
-
.
|
|
1259
|
-
.
|
|
1260
|
-
.
|
|
1261
|
-
.
|
|
1262
|
-
.
|
|
1258
|
+
.blog_yoast-link-btn:hover:not(:disabled) { text-decoration: underline; }
|
|
1259
|
+
.blog_yoast-link-btn:disabled { color: var(--d-ink-3); cursor: not-allowed; }
|
|
1260
|
+
.blog_yoast-preview-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
1261
|
+
.blog_yoast-preview-label { font-size: 12.6px; font-weight: 600; color: var(--d-ink-2); }
|
|
1262
|
+
.blog_yoast-google-card {
|
|
1263
1263
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface);
|
|
1264
1264
|
padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
|
|
1265
1265
|
}
|
|
1266
|
-
.
|
|
1267
|
-
.
|
|
1268
|
-
.
|
|
1266
|
+
.blog_yoast-google-mobile { max-width: 360px; }
|
|
1267
|
+
.blog_yoast-google-site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
|
|
1268
|
+
.blog_yoast-google-favicon {
|
|
1269
1269
|
width: 26px; height: 26px; border-radius: 50%; background: var(--d-sunk);
|
|
1270
1270
|
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--d-ink-2);
|
|
1271
1271
|
}
|
|
1272
|
-
.
|
|
1273
|
-
.
|
|
1274
|
-
.
|
|
1275
|
-
.
|
|
1276
|
-
.
|
|
1272
|
+
.blog_yoast-google-site-name { font-size: 12px; color: var(--d-ink); line-height: 1.2; }
|
|
1273
|
+
.blog_yoast-google-site-meta .blog_serp-url { font-size: 11.5px; margin-top: 1px; }
|
|
1274
|
+
.blog_yoast-google-title { font-size: 16px; color: var(--d-accent); line-height: 1.3; }
|
|
1275
|
+
.blog_yoast-google-desc { font-size: 12.6px; color: var(--d-ink-2); line-height: 1.45; }
|
|
1276
|
+
.blog_yoast-composite-field {
|
|
1277
1277
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface);
|
|
1278
1278
|
overflow: hidden;
|
|
1279
1279
|
}
|
|
1280
|
-
.
|
|
1281
|
-
.
|
|
1280
|
+
.blog_yoast-var-chips-inset { padding: 8px 8px 0; border-bottom: 1px solid var(--d-rule); background: var(--d-sunk); }
|
|
1281
|
+
.blog_yoast-composite-input {
|
|
1282
1282
|
font: inherit; font-size: 13px; width: 100%; border: 0; background: transparent;
|
|
1283
1283
|
padding: 9px 10px; color: var(--d-ink); resize: vertical;
|
|
1284
1284
|
}
|
|
1285
|
-
.
|
|
1286
|
-
.
|
|
1287
|
-
.
|
|
1288
|
-
.
|
|
1289
|
-
.
|
|
1290
|
-
.
|
|
1291
|
-
.
|
|
1285
|
+
.blog_yoast-composite-input:focus { outline: none; box-shadow: var(--d-ring); }
|
|
1286
|
+
.blog_yoast-premium-links { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--d-rule); }
|
|
1287
|
+
.blog_yoast-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-ink-2); }
|
|
1288
|
+
.blog_yoast-radio-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
1289
|
+
.blog_yoast-radio-fieldset legend { font-size: 12.8px; font-weight: 650; color: var(--d-ink); margin-bottom: 4px; padding: 0; }
|
|
1290
|
+
.blog_yoast-radio-fieldset label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-ink-2); }
|
|
1291
|
+
.blog_yoast-analysis-list {
|
|
1292
1292
|
display: flex; flex-direction: column; gap: 0;
|
|
1293
1293
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1294
1294
|
overflow: hidden; background: var(--d-surface);
|
|
1295
1295
|
}
|
|
1296
1296
|
|
|
1297
1297
|
/* SEO analysis panel */
|
|
1298
|
-
.
|
|
1299
|
-
.
|
|
1298
|
+
.blog_yoast-seo-analysis-panel { display: flex; flex-direction: column; gap: 14px; }
|
|
1299
|
+
.blog_yoast-premium-cta {
|
|
1300
1300
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1301
1301
|
background: var(--d-warn-soft); padding: 14px;
|
|
1302
1302
|
}
|
|
1303
|
-
.
|
|
1304
|
-
.
|
|
1303
|
+
.blog_yoast-premium-cta-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
|
|
1304
|
+
.blog_yoast-premium-badge {
|
|
1305
1305
|
font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
|
|
1306
1306
|
color: var(--d-warn); background: var(--d-surface); border: 1px solid var(--d-warn); border-radius: 999px; padding: 2px 8px;
|
|
1307
1307
|
}
|
|
1308
|
-
.
|
|
1309
|
-
.
|
|
1310
|
-
.
|
|
1308
|
+
.blog_yoast-premium-cta-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--d-ink); }
|
|
1309
|
+
.blog_yoast-premium-cta-lead { margin: 0 0 10px; font-size: 12.6px; line-height: 1.45; color: var(--d-ink-2); }
|
|
1310
|
+
.blog_yoast-premium-cta-list {
|
|
1311
1311
|
margin: 0 0 12px; padding-left: 18px; font-size: 12.4px; line-height: 1.5; color: var(--d-ink-2);
|
|
1312
1312
|
}
|
|
1313
|
-
.
|
|
1314
|
-
.
|
|
1315
|
-
.
|
|
1313
|
+
.blog_yoast-premium-cta-list li + li { margin-top: 8px; }
|
|
1314
|
+
.blog_yoast-premium-cta-list strong { color: var(--d-ink); font-weight: 650; }
|
|
1315
|
+
.blog_yoast-premium-cta-btn {
|
|
1316
1316
|
display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
|
|
1317
1317
|
color: var(--d-ink-2); text-decoration: none; padding: 4px 9px; border-radius: var(--d-radius-sm);
|
|
1318
1318
|
border: 1px solid var(--d-rule); background: var(--d-surface); cursor: pointer;
|
|
1319
1319
|
}
|
|
1320
|
-
.
|
|
1321
|
-
.
|
|
1322
|
-
.
|
|
1320
|
+
.blog_yoast-premium-cta-btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent-ink); background: var(--d-accent-soft); text-decoration: none; }
|
|
1321
|
+
.blog_yoast-premium-cta-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
|
1322
|
+
.blog_yoast-keyphrase-inline-hint {
|
|
1323
1323
|
margin: 0; padding: 9px 11px; font-size: 12.6px; color: var(--d-ink-2);
|
|
1324
1324
|
background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1325
1325
|
}
|
|
1326
|
-
.
|
|
1326
|
+
.blog_yoast-analysis-results-head {
|
|
1327
1327
|
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
1328
1328
|
}
|
|
1329
|
-
.
|
|
1330
|
-
.
|
|
1331
|
-
.
|
|
1332
|
-
.
|
|
1329
|
+
.blog_yoast-result-empty { margin: 0; font-size: 12.4px; color: var(--d-ink-3); }
|
|
1330
|
+
.blog_yoast-footer-collapse { border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-surface); }
|
|
1331
|
+
.blog_yoast-footer-collapse + .blog_yoast-footer-collapse { margin-top: 8px; }
|
|
1332
|
+
.blog_yoast-footer-collapse-summary {
|
|
1333
1333
|
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
|
|
1334
1334
|
padding: 10px 12px; font-size: 12.8px; font-weight: 650; color: var(--d-ink-2);
|
|
1335
1335
|
}
|
|
1336
|
-
.
|
|
1337
|
-
.
|
|
1338
|
-
.
|
|
1336
|
+
.blog_yoast-footer-collapse-summary::-webkit-details-marker { display: none; }
|
|
1337
|
+
.blog_yoast-footer-collapse-body { margin: 0; padding: 0 12px 12px; font-size: 12.4px; color: var(--d-ink-3); }
|
|
1338
|
+
.blog_yoast-analysis-footer {
|
|
1339
1339
|
display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--d-rule);
|
|
1340
1340
|
}
|
|
1341
|
-
.
|
|
1341
|
+
.blog_yoast-footer-link {
|
|
1342
1342
|
display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.6px; font-weight: 600;
|
|
1343
1343
|
color: var(--d-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; text-align: left;
|
|
1344
1344
|
}
|
|
1345
|
-
.
|
|
1346
|
-
.
|
|
1347
|
-
.
|
|
1348
|
-
.
|
|
1345
|
+
.blog_yoast-footer-link:hover:not(:disabled) { text-decoration: underline; }
|
|
1346
|
+
.blog_yoast-footer-link:disabled { color: var(--d-ink-3); cursor: not-allowed; }
|
|
1347
|
+
.blog_yoast-footer-lock { font-size: 11px; line-height: 1; }
|
|
1348
|
+
.blog_yoast-footer-badge {
|
|
1349
1349
|
font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
|
|
1350
1350
|
color: var(--d-good); background: var(--d-good-soft); border: 1px solid var(--d-good); border-radius: 4px; padding: 1px 5px;
|
|
1351
1351
|
}
|
|
1352
|
-
.
|
|
1353
|
-
.
|
|
1352
|
+
.blog_wp-publish-scores .blog_fact-val { display: inline-flex; align-items: center; gap: 6px; }
|
|
1353
|
+
.blog_wp-cat-tabs { margin-bottom: 4px; }
|
|
1354
1354
|
|
|
1355
|
-
.
|
|
1355
|
+
.blog_yoast-snippet-label-row {
|
|
1356
1356
|
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap;
|
|
1357
1357
|
}
|
|
1358
|
-
.
|
|
1359
|
-
.
|
|
1360
|
-
.
|
|
1361
|
-
.
|
|
1362
|
-
.
|
|
1363
|
-
.
|
|
1364
|
-
.
|
|
1365
|
-
.
|
|
1366
|
-
.
|
|
1367
|
-
.
|
|
1368
|
-
.
|
|
1358
|
+
.blog_yoast-snippet-actions-top { margin-top: 0; }
|
|
1359
|
+
.blog_yoast-accordion-panel,
|
|
1360
|
+
.blog_yoast-internal-links { display: flex; flex-direction: column; gap: 14px; }
|
|
1361
|
+
.blog_yoast-link-section { display: flex; flex-direction: column; gap: 6px; }
|
|
1362
|
+
.blog_yoast-link-section-title { margin: 0; font-size: 12.8px; font-weight: 700; color: var(--d-ink); }
|
|
1363
|
+
.blog_yoast-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
|
1364
|
+
.blog_yoast-link-list li { font-size: 12.4px; padding: 8px 10px; background: var(--d-sunk); border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); }
|
|
1365
|
+
.blog_yoast-link-label { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--d-ink); }
|
|
1366
|
+
.blog_yoast-link-href { display: block; font-size: 11px; color: var(--d-ink-3); margin-top: 2px; word-break: break-all; }
|
|
1367
|
+
.blog_yoast-insight-value { font-size: 22px; font-weight: 700; color: var(--d-ink); font-variant-numeric: tabular-nums; margin: 0; }
|
|
1368
|
+
.blog_yoast-premium-inline-btn {
|
|
1369
1369
|
display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.6px; font-weight: 600;
|
|
1370
1370
|
padding: 8px 12px; border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm);
|
|
1371
1371
|
background: var(--d-sunk); color: var(--d-ink-3); cursor: not-allowed;
|
|
1372
1372
|
}
|
|
1373
1373
|
|
|
1374
|
-
.
|
|
1375
|
-
.
|
|
1376
|
-
.
|
|
1374
|
+
.blog_tag-most-used { margin-top: 4px; }
|
|
1375
|
+
.blog_tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1376
|
+
.blog_tag-cloud-item {
|
|
1377
1377
|
font: inherit; font-size: 12px; padding: 3px 8px; border-radius: var(--d-radius-sm);
|
|
1378
1378
|
border: 1px solid var(--d-rule); background: var(--d-surface); color: var(--d-accent); cursor: pointer;
|
|
1379
1379
|
}
|
|
1380
|
-
.
|
|
1380
|
+
.blog_tag-cloud-item:hover { border-color: var(--d-accent); background: var(--d-accent-soft); }
|
|
1381
1381
|
|
|
1382
1382
|
/* ============================ modals ============================ */
|
|
1383
1383
|
|
|
1384
|
-
.
|
|
1384
|
+
.blog_modal-backdrop {
|
|
1385
1385
|
position: fixed; inset: 0; background: rgba(10, 11, 16, 0.55); backdrop-filter: blur(2px);
|
|
1386
1386
|
z-index: 100; display: grid; place-items: center; padding: 20px;
|
|
1387
1387
|
}
|
|
1388
|
-
.
|
|
1388
|
+
.blog_modal {
|
|
1389
1389
|
background: var(--d-surface); border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1390
1390
|
box-shadow: var(--d-shadow-lg); width: min(560px, 100%); max-height: min(86vh, 780px);
|
|
1391
1391
|
display: flex; flex-direction: column; overflow: hidden;
|
|
1392
1392
|
}
|
|
1393
|
-
.
|
|
1394
|
-
.
|
|
1395
|
-
.
|
|
1396
|
-
.
|
|
1397
|
-
.
|
|
1398
|
-
.
|
|
1399
|
-
.
|
|
1400
|
-
@media (min-width: 720px) { .
|
|
1401
|
-
.
|
|
1402
|
-
.
|
|
1403
|
-
.
|
|
1404
|
-
.
|
|
1393
|
+
.blog_modal-wide { width: min(960px, 100%); }
|
|
1394
|
+
.blog_modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-rule); }
|
|
1395
|
+
.blog_modal-head h2 { margin: 0; font-size: 14.5px; font-weight: 700; }
|
|
1396
|
+
.blog_modal-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
1397
|
+
.blog_modal-head-actions .blog_fld { min-width: 190px; }
|
|
1398
|
+
.blog_modal-body { padding: 16px; overflow-y: auto; flex: 1; }
|
|
1399
|
+
.blog_modal-body.blog_detail { display: grid; gap: 16px; }
|
|
1400
|
+
@media (min-width: 720px) { .blog_modal-body.blog_detail { grid-template-columns: 260px 1fr; } }
|
|
1401
|
+
.blog_detail-img { width: 100%; border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); display: block; }
|
|
1402
|
+
.blog_modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--d-rule); background: var(--d-surface-2); flex-wrap: wrap; }
|
|
1403
|
+
.blog_modal-foot-actions { display: flex; gap: 8px; align-items: center; }
|
|
1404
|
+
.blog_modal-more { display: flex; justify-content: center; padding: 14px 0 2px; }
|
|
1405
1405
|
|
|
1406
1406
|
/* In-page post preview (stays in admin layout — no new tab) */
|
|
1407
|
-
.
|
|
1407
|
+
.blog_ed-preview {
|
|
1408
1408
|
position: fixed;
|
|
1409
1409
|
inset: 0;
|
|
1410
1410
|
z-index: 120;
|
|
@@ -1417,7 +1417,7 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1417
1417
|
background: var(--d-paper, #fff);
|
|
1418
1418
|
overscroll-behavior: none;
|
|
1419
1419
|
}
|
|
1420
|
-
.
|
|
1420
|
+
.blog_ed-preview-bar {
|
|
1421
1421
|
flex: 0 0 auto;
|
|
1422
1422
|
display: flex;
|
|
1423
1423
|
align-items: center;
|
|
@@ -1429,15 +1429,15 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1429
1429
|
background: var(--d-surface);
|
|
1430
1430
|
box-shadow: var(--d-shadow);
|
|
1431
1431
|
}
|
|
1432
|
-
.
|
|
1433
|
-
.
|
|
1432
|
+
.blog_ed-preview-bar-left,
|
|
1433
|
+
.blog_ed-preview-bar-right {
|
|
1434
1434
|
display: flex;
|
|
1435
1435
|
align-items: center;
|
|
1436
1436
|
gap: 10px;
|
|
1437
1437
|
flex-wrap: wrap;
|
|
1438
1438
|
min-width: 0;
|
|
1439
1439
|
}
|
|
1440
|
-
.
|
|
1440
|
+
.blog_ed-preview-badge {
|
|
1441
1441
|
font-size: 11px;
|
|
1442
1442
|
font-weight: 750;
|
|
1443
1443
|
letter-spacing: 0.06em;
|
|
@@ -1448,7 +1448,7 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1448
1448
|
border-radius: 999px;
|
|
1449
1449
|
padding: 3px 9px;
|
|
1450
1450
|
}
|
|
1451
|
-
.
|
|
1451
|
+
.blog_ed-preview-title {
|
|
1452
1452
|
font-size: 13.5px;
|
|
1453
1453
|
font-weight: 650;
|
|
1454
1454
|
color: var(--d-ink);
|
|
@@ -1457,7 +1457,7 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1457
1457
|
white-space: nowrap;
|
|
1458
1458
|
max-width: min(52vw, 420px);
|
|
1459
1459
|
}
|
|
1460
|
-
.
|
|
1460
|
+
.blog_ed-preview-frame {
|
|
1461
1461
|
flex: 1 1 auto;
|
|
1462
1462
|
min-height: 0;
|
|
1463
1463
|
width: 100%;
|
|
@@ -1468,206 +1468,206 @@ details[open] > summary:hover .acc-chevron { color: var(--d-accent-ink); }
|
|
|
1468
1468
|
}
|
|
1469
1469
|
|
|
1470
1470
|
/* Parent page must not scroll under the preview overlay */
|
|
1471
|
-
html.
|
|
1472
|
-
body.
|
|
1471
|
+
html.blog_ed-preview-open,
|
|
1472
|
+
body.blog_ed-preview-open {
|
|
1473
1473
|
overflow: hidden !important;
|
|
1474
1474
|
overscroll-behavior: none;
|
|
1475
1475
|
}
|
|
1476
1476
|
|
|
1477
|
-
.
|
|
1478
|
-
.
|
|
1477
|
+
.blog_dropzone { position: relative; }
|
|
1478
|
+
.blog_dropzone.blog_is-dragging { outline: 2px dashed var(--d-accent); outline-offset: -6px; background: var(--d-accent-soft); }
|
|
1479
1479
|
|
|
1480
|
-
.
|
|
1481
|
-
.
|
|
1480
|
+
.blog_pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
|
|
1481
|
+
.blog_pick {
|
|
1482
1482
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1483
1483
|
background: var(--d-sunk); cursor: pointer; padding: 0; text-align: left; display: flex; flex-direction: column;
|
|
1484
1484
|
}
|
|
1485
|
-
.
|
|
1486
|
-
.
|
|
1487
|
-
.
|
|
1488
|
-
.
|
|
1489
|
-
.
|
|
1490
|
-
.
|
|
1491
|
-
.
|
|
1492
|
-
.
|
|
1485
|
+
.blog_pick:hover { border-color: var(--d-accent); }
|
|
1486
|
+
.blog_pick.blog_is-picked { border-color: var(--d-accent); box-shadow: var(--d-ring); }
|
|
1487
|
+
.blog_pick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
1488
|
+
.blog_pick-blank { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--d-rule); }
|
|
1489
|
+
.blog_pick-meta { padding: 7px 9px; font-size: 11.6px; background: var(--d-surface); }
|
|
1490
|
+
.blog_pick-alt { display: block; color: var(--d-ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1491
|
+
.blog_pick-alt.blog_is-missing, .blog_media-alt.blog_is-missing { color: var(--d-warn); }
|
|
1492
|
+
.blog_pick-sub { display: block; color: var(--d-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
|
|
1493
1493
|
|
|
1494
1494
|
/* ============================ media library ============================ */
|
|
1495
1495
|
|
|
1496
|
-
.
|
|
1497
|
-
.
|
|
1496
|
+
.blog_media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; padding: 16px 17px; }
|
|
1497
|
+
.blog_media-card {
|
|
1498
1498
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1499
1499
|
background: var(--d-sunk); text-align: left; padding: 0; cursor: pointer; display: flex; flex-direction: column;
|
|
1500
1500
|
}
|
|
1501
|
-
.
|
|
1502
|
-
.
|
|
1503
|
-
.
|
|
1504
|
-
.
|
|
1505
|
-
.
|
|
1501
|
+
.blog_media-card:hover { border-color: var(--d-accent); }
|
|
1502
|
+
.blog_media-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
|
|
1503
|
+
.blog_media-meta { padding: 8px 10px; font-size: 11.8px; background: var(--d-surface); }
|
|
1504
|
+
.blog_media-alt { display: block; color: var(--d-ink); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1505
|
+
.blog_media-sub { display: block; color: var(--d-ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
|
|
1506
1506
|
|
|
1507
1507
|
/* post format panels — WordPress-style format-specific editor */
|
|
1508
|
-
.
|
|
1509
|
-
.
|
|
1508
|
+
.blog_format-chip { color: var(--d-accent-ink); font-weight: 600; }
|
|
1509
|
+
.blog_format-panel {
|
|
1510
1510
|
border: 1px solid var(--d-rule); border-radius: var(--d-radius); background: var(--d-surface);
|
|
1511
1511
|
box-shadow: var(--d-shadow); overflow: hidden;
|
|
1512
1512
|
}
|
|
1513
|
-
.
|
|
1513
|
+
.blog_format-panel-head {
|
|
1514
1514
|
display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
|
|
1515
1515
|
border-bottom: 1px solid var(--d-rule); background: var(--d-surface-2);
|
|
1516
1516
|
}
|
|
1517
|
-
.
|
|
1517
|
+
.blog_format-panel-icon {
|
|
1518
1518
|
width: 36px; height: 36px; border-radius: var(--d-radius-sm); display: grid; place-items: center;
|
|
1519
1519
|
background: var(--d-accent-soft); color: var(--d-accent-ink); font-size: 18px; font-weight: 700; flex-shrink: 0;
|
|
1520
1520
|
}
|
|
1521
|
-
.
|
|
1522
|
-
.
|
|
1523
|
-
.
|
|
1524
|
-
.
|
|
1521
|
+
.blog_format-panel-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.02em; }
|
|
1522
|
+
.blog_format-panel-body { padding: 14px 16px 16px; }
|
|
1523
|
+
.blog_format-panel-video .blog_format-embed,
|
|
1524
|
+
.blog_format-panel-body .blog_format-embed {
|
|
1525
1525
|
border-radius: var(--d-radius);
|
|
1526
1526
|
overflow: hidden;
|
|
1527
1527
|
background: #111;
|
|
1528
1528
|
}
|
|
1529
|
-
.
|
|
1529
|
+
.blog_format-video-preview {
|
|
1530
1530
|
display: block;
|
|
1531
1531
|
width: 100%;
|
|
1532
1532
|
max-height: 360px;
|
|
1533
1533
|
border-radius: var(--d-radius-sm);
|
|
1534
1534
|
background: #111;
|
|
1535
1535
|
}
|
|
1536
|
-
.
|
|
1536
|
+
.blog_format-media-hero {
|
|
1537
1537
|
margin: 0;
|
|
1538
1538
|
display: flex;
|
|
1539
1539
|
flex-direction: column;
|
|
1540
1540
|
gap: 10px;
|
|
1541
1541
|
}
|
|
1542
|
-
.
|
|
1542
|
+
.blog_format-media-placeholder {
|
|
1543
1543
|
width: 100%;
|
|
1544
1544
|
aspect-ratio: 16 / 9;
|
|
1545
1545
|
border-radius: var(--d-radius-sm);
|
|
1546
1546
|
background: var(--d-sunk);
|
|
1547
1547
|
}
|
|
1548
|
-
.
|
|
1549
|
-
.
|
|
1550
|
-
.
|
|
1548
|
+
.blog_format-media-empty { width: 100%; min-height: 140px; flex-direction: column; }
|
|
1549
|
+
.blog_format-upload-error { margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--d-radius-sm); }
|
|
1550
|
+
.blog_format-panel-body .blog_format-embed {
|
|
1551
1551
|
position: relative; aspect-ratio: 16 / 9; border-radius: var(--d-radius-sm); overflow: hidden;
|
|
1552
1552
|
background: #111; border: 1px solid var(--d-rule);
|
|
1553
1553
|
}
|
|
1554
|
-
.
|
|
1555
|
-
.
|
|
1556
|
-
.
|
|
1557
|
-
.
|
|
1554
|
+
.blog_format-embed iframe, .blog_format-embed video { width: 100%; height: 100%; border: 0; display: block; }
|
|
1555
|
+
.blog_format-audio { width: 100%; }
|
|
1556
|
+
.blog_format-quote-input { font-family: var(--d-read); font-size: 16px; line-height: 1.5; }
|
|
1557
|
+
.blog_format-quote-preview {
|
|
1558
1558
|
margin: 0; padding: 16px 18px; border-left: 4px solid var(--d-accent);
|
|
1559
1559
|
background: var(--d-sunk); border-radius: 0 var(--d-radius-sm) var(--d-radius-sm) 0;
|
|
1560
1560
|
font-family: var(--d-read); font-size: 17px; line-height: 1.55;
|
|
1561
1561
|
}
|
|
1562
|
-
.
|
|
1563
|
-
.
|
|
1562
|
+
.blog_format-quote-preview cite { display: block; margin-top: 8px; font-size: 13px; color: var(--d-ink-3); font-style: normal; }
|
|
1563
|
+
.blog_format-link-preview {
|
|
1564
1564
|
display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--d-rule);
|
|
1565
1565
|
border-radius: var(--d-radius-sm); background: var(--d-sunk); text-decoration: none; color: inherit;
|
|
1566
1566
|
}
|
|
1567
|
-
.
|
|
1568
|
-
.
|
|
1569
|
-
.
|
|
1570
|
-
.
|
|
1571
|
-
.
|
|
1572
|
-
.
|
|
1573
|
-
.
|
|
1567
|
+
.blog_format-link-preview:hover { border-color: var(--d-accent); }
|
|
1568
|
+
.blog_format-link-title { font-weight: 650; color: var(--d-accent-ink); }
|
|
1569
|
+
.blog_format-link-url { font-size: 12px; color: var(--d-ink-3); word-break: break-all; }
|
|
1570
|
+
.blog_format-image-hero { margin: 0; }
|
|
1571
|
+
.blog_format-image-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--d-radius-sm); display: block; }
|
|
1572
|
+
.blog_format-image-empty { width: 100%; min-height: 200px; }
|
|
1573
|
+
.blog_format-gallery-grid {
|
|
1574
1574
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
|
|
1575
1575
|
}
|
|
1576
|
-
.
|
|
1577
|
-
.
|
|
1578
|
-
.
|
|
1576
|
+
.blog_format-gallery-item { position: relative; margin: 0; border-radius: var(--d-radius-sm); overflow: hidden; border: 1px solid var(--d-rule); }
|
|
1577
|
+
.blog_format-gallery-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
|
|
1578
|
+
.blog_format-gallery-remove {
|
|
1579
1579
|
position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 999px;
|
|
1580
1580
|
background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 12px;
|
|
1581
1581
|
}
|
|
1582
|
-
.
|
|
1582
|
+
.blog_format-gallery-add {
|
|
1583
1583
|
min-height: 110px; border: 1px dashed var(--d-rule); border-radius: var(--d-radius-sm); background: var(--d-sunk);
|
|
1584
1584
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
|
|
1585
1585
|
font: inherit; font-size: 12.5px; color: var(--d-ink-2); cursor: pointer;
|
|
1586
1586
|
}
|
|
1587
|
-
.
|
|
1588
|
-
.
|
|
1587
|
+
.blog_format-gallery-add:hover { border-color: var(--d-accent); color: var(--d-accent-ink); }
|
|
1588
|
+
.blog_ed-compact .blog_ed-input { min-height: 220px; }
|
|
1589
1589
|
|
|
1590
1590
|
/* ============================ SEO modules ============================ */
|
|
1591
1591
|
|
|
1592
|
-
.
|
|
1593
|
-
.
|
|
1594
|
-
.
|
|
1592
|
+
.blog_seo-module { display: flex; flex-direction: column; gap: 16px; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
|
|
1593
|
+
.blog_seo-grid { align-items: start; }
|
|
1594
|
+
.blog_seo-banner {
|
|
1595
1595
|
padding: 12px 14px; border-radius: var(--d-radius-sm); font-size: 13px; line-height: 1.45;
|
|
1596
1596
|
border: 1px solid var(--d-rule); background: var(--d-sunk); color: var(--d-ink-2);
|
|
1597
1597
|
}
|
|
1598
|
-
.
|
|
1598
|
+
.blog_seo-banner-warn {
|
|
1599
1599
|
border-color: color-mix(in srgb, #c9851a 35%, var(--d-rule));
|
|
1600
1600
|
background: color-mix(in srgb, #c9851a 10%, var(--d-card));
|
|
1601
1601
|
}
|
|
1602
|
-
.
|
|
1602
|
+
.blog_seo-banner code, .blog_seo-checklist code, .blog_seo-steps code, .blog_seo-preview {
|
|
1603
1603
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
1604
1604
|
}
|
|
1605
|
-
.
|
|
1605
|
+
.blog_seo-status {
|
|
1606
1606
|
display: flex; gap: 12px; align-items: flex-start; padding: 12px 13px;
|
|
1607
1607
|
border-radius: var(--d-radius-sm); border: 1px solid var(--d-rule); background: var(--d-sunk);
|
|
1608
1608
|
}
|
|
1609
|
-
.
|
|
1610
|
-
.
|
|
1611
|
-
.
|
|
1609
|
+
.blog_seo-status strong { display: block; font-size: 13.2px; font-weight: 650; color: var(--d-ink); }
|
|
1610
|
+
.blog_seo-status p { margin: 3px 0 0; font-size: 12.6px; color: var(--d-ink-3); line-height: 1.45; }
|
|
1611
|
+
.blog_seo-status-dot {
|
|
1612
1612
|
width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
|
|
1613
1613
|
background: var(--d-ink-3);
|
|
1614
1614
|
}
|
|
1615
|
-
.
|
|
1616
|
-
.
|
|
1617
|
-
.
|
|
1615
|
+
.blog_seo-status.blog_is-ok .blog_seo-status-dot { background: #2f8f5b; box-shadow: 0 0 0 4px color-mix(in srgb, #2f8f5b 18%, transparent); }
|
|
1616
|
+
.blog_seo-status.blog_is-warn .blog_seo-status-dot { background: #c9851a; box-shadow: 0 0 0 4px color-mix(in srgb, #c9851a 18%, transparent); }
|
|
1617
|
+
.blog_seo-preview {
|
|
1618
1618
|
margin: 0; padding: 14px 15px; border-radius: var(--d-radius-sm);
|
|
1619
1619
|
background: #12161f; color: #d7deea; font-size: 12.4px; line-height: 1.55;
|
|
1620
1620
|
overflow: auto; white-space: pre-wrap; word-break: break-word;
|
|
1621
1621
|
}
|
|
1622
|
-
.
|
|
1623
|
-
.
|
|
1622
|
+
.blog_seo-preview-sm { font-size: 11.8px; padding: 10px 12px; }
|
|
1623
|
+
.blog_seo-checklist, .blog_seo-steps {
|
|
1624
1624
|
margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px;
|
|
1625
1625
|
font-size: 13.2px; color: var(--d-ink-2); line-height: 1.45;
|
|
1626
1626
|
}
|
|
1627
|
-
.
|
|
1627
|
+
.blog_seo-stat-row {
|
|
1628
1628
|
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
|
|
1629
1629
|
}
|
|
1630
|
-
.
|
|
1630
|
+
.blog_seo-stat {
|
|
1631
1631
|
padding: 16px 17px; border-radius: var(--d-radius); border: 1px solid var(--d-rule);
|
|
1632
1632
|
background: var(--d-card); display: flex; flex-direction: column; gap: 4px;
|
|
1633
1633
|
}
|
|
1634
|
-
.
|
|
1634
|
+
.blog_seo-stat-value {
|
|
1635
1635
|
font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--d-ink);
|
|
1636
1636
|
font-variant-numeric: tabular-nums;
|
|
1637
1637
|
}
|
|
1638
|
-
.
|
|
1639
|
-
.
|
|
1640
|
-
.
|
|
1641
|
-
.
|
|
1642
|
-
.
|
|
1638
|
+
.blog_seo-stat-label { font-size: 12px; color: var(--d-ink-3); font-weight: 550; }
|
|
1639
|
+
.blog_seo-link-list { list-style: none; margin: 0; padding: 0; }
|
|
1640
|
+
.blog_seo-link-list li { border-top: 1px solid var(--d-rule); }
|
|
1641
|
+
.blog_seo-link-list li:first-child { border-top: 0; }
|
|
1642
|
+
.blog_seo-link-list a {
|
|
1643
1643
|
display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
|
|
1644
1644
|
padding: 12px 17px; text-decoration: none; color: var(--d-ink); font-size: 13.2px;
|
|
1645
1645
|
}
|
|
1646
|
-
.
|
|
1647
|
-
.
|
|
1648
|
-
.
|
|
1646
|
+
.blog_seo-link-list a:hover { background: var(--d-sunk); }
|
|
1647
|
+
.blog_seo-link-list .blog_mono { color: var(--d-ink-3); font-size: 12px; }
|
|
1648
|
+
.blog_redirect-form {
|
|
1649
1649
|
display: grid; grid-template-columns: 1.2fr 1.2fr 140px; gap: 12px; align-items: end;
|
|
1650
1650
|
}
|
|
1651
|
-
.
|
|
1652
|
-
.
|
|
1653
|
-
.
|
|
1651
|
+
.blog_redirect-form-note { grid-column: 1 / -1; }
|
|
1652
|
+
.blog_redirect-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
|
|
1653
|
+
.blog_btn-sm { padding: 4px 9px; font-size: 12.2px; }
|
|
1654
1654
|
|
|
1655
1655
|
/* —— Add / Edit Redirection layout —— */
|
|
1656
|
-
.
|
|
1656
|
+
.blog_import-file {
|
|
1657
1657
|
display: flex;
|
|
1658
1658
|
align-items: center;
|
|
1659
1659
|
gap: 12px;
|
|
1660
1660
|
flex-wrap: wrap;
|
|
1661
1661
|
}
|
|
1662
|
-
.
|
|
1663
|
-
.
|
|
1662
|
+
.blog_import-file-name { font-size: 12.6px; color: var(--d-ink-3); }
|
|
1663
|
+
.blog_import-errors {
|
|
1664
1664
|
margin: 8px 0 0;
|
|
1665
1665
|
padding-left: 18px;
|
|
1666
1666
|
font-size: 12.6px;
|
|
1667
1667
|
color: var(--d-crit);
|
|
1668
1668
|
}
|
|
1669
1669
|
|
|
1670
|
-
.
|
|
1670
|
+
.blog_export-fieldset {
|
|
1671
1671
|
border: 0;
|
|
1672
1672
|
margin: 0;
|
|
1673
1673
|
padding: 0;
|
|
@@ -1675,7 +1675,7 @@ body.ed-preview-open {
|
|
|
1675
1675
|
flex-direction: column;
|
|
1676
1676
|
gap: 8px;
|
|
1677
1677
|
}
|
|
1678
|
-
.
|
|
1678
|
+
.blog_export-fieldset-label {
|
|
1679
1679
|
padding: 0;
|
|
1680
1680
|
margin: 0 0 4px;
|
|
1681
1681
|
font-size: 12.4px;
|
|
@@ -1683,7 +1683,7 @@ body.ed-preview-open {
|
|
|
1683
1683
|
letter-spacing: 0.02em;
|
|
1684
1684
|
color: var(--d-ink-2);
|
|
1685
1685
|
}
|
|
1686
|
-
.
|
|
1686
|
+
.blog_export-option {
|
|
1687
1687
|
display: grid;
|
|
1688
1688
|
grid-template-columns: auto 1fr;
|
|
1689
1689
|
gap: 12px;
|
|
@@ -1695,43 +1695,43 @@ body.ed-preview-open {
|
|
|
1695
1695
|
cursor: pointer;
|
|
1696
1696
|
transition: border-color 0.12s ease, background 0.12s ease;
|
|
1697
1697
|
}
|
|
1698
|
-
.
|
|
1699
|
-
.
|
|
1698
|
+
.blog_export-option:hover { border-color: var(--d-accent); }
|
|
1699
|
+
.blog_export-option.blog_is-on {
|
|
1700
1700
|
border-color: var(--d-accent);
|
|
1701
1701
|
background: color-mix(in srgb, var(--d-accent) 8%, var(--d-card));
|
|
1702
1702
|
}
|
|
1703
|
-
.
|
|
1703
|
+
.blog_export-option input {
|
|
1704
1704
|
margin-top: 3px;
|
|
1705
1705
|
accent-color: var(--d-accent);
|
|
1706
1706
|
}
|
|
1707
|
-
.
|
|
1708
|
-
.
|
|
1709
|
-
.
|
|
1710
|
-
.
|
|
1707
|
+
.blog_export-option-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
1708
|
+
.blog_export-option-label { font-size: 14px; font-weight: 700; color: var(--d-ink); }
|
|
1709
|
+
.blog_export-option-desc { font-size: 12.8px; line-height: 1.45; color: var(--d-ink-3); }
|
|
1710
|
+
.blog_sr-only {
|
|
1711
1711
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
1712
1712
|
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
|
1713
1713
|
}
|
|
1714
1714
|
|
|
1715
|
-
.
|
|
1716
|
-
.
|
|
1715
|
+
.blog_redir-analytics { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
|
|
1716
|
+
.blog_redir-analytics-grid {
|
|
1717
1717
|
display: grid;
|
|
1718
1718
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1719
1719
|
gap: 14px;
|
|
1720
1720
|
}
|
|
1721
|
-
.
|
|
1722
|
-
.
|
|
1723
|
-
.
|
|
1724
|
-
.
|
|
1721
|
+
.blog_redir-rules-block { margin-top: 4px; }
|
|
1722
|
+
.blog_redir-log-tbl .blog_redir-log-path { color: var(--d-ink); }
|
|
1723
|
+
.blog_redir-log-tbl .blog_redir-log-to { color: var(--d-ink-3); }
|
|
1724
|
+
.blog_redir-log-status {
|
|
1725
1725
|
font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
|
|
1726
1726
|
}
|
|
1727
|
-
.
|
|
1728
|
-
.
|
|
1727
|
+
.blog_redir-log-status.blog_is-ok { color: var(--d-delta-up); }
|
|
1728
|
+
.blog_redir-log-status.blog_is-bad { color: var(--d-crit); }
|
|
1729
1729
|
|
|
1730
1730
|
@media (max-width: 900px) {
|
|
1731
|
-
.
|
|
1731
|
+
.blog_redir-analytics-grid { grid-template-columns: 1fr; }
|
|
1732
1732
|
}
|
|
1733
|
-
.
|
|
1734
|
-
.
|
|
1733
|
+
.blog_redir-body { display: flex; flex-direction: column; gap: 22px; }
|
|
1734
|
+
.blog_redir-row {
|
|
1735
1735
|
display: grid;
|
|
1736
1736
|
grid-template-columns: 160px minmax(0, 1fr);
|
|
1737
1737
|
gap: 16px 20px;
|
|
@@ -1739,32 +1739,32 @@ body.ed-preview-open {
|
|
|
1739
1739
|
padding-bottom: 18px;
|
|
1740
1740
|
border-bottom: 1px solid var(--d-rule);
|
|
1741
1741
|
}
|
|
1742
|
-
.
|
|
1743
|
-
.
|
|
1742
|
+
.blog_redir-row.blog_is-muted { opacity: 0.72; }
|
|
1743
|
+
.blog_redir-label {
|
|
1744
1744
|
font-size: 12.4px; font-weight: 700; letter-spacing: 0.02em;
|
|
1745
1745
|
color: var(--d-ink-2); padding-top: 10px;
|
|
1746
1746
|
}
|
|
1747
|
-
.
|
|
1748
|
-
.
|
|
1749
|
-
.
|
|
1747
|
+
.blog_redir-field { min-width: 0; }
|
|
1748
|
+
.blog_redir-field.blog_stack { display: flex; flex-direction: column; gap: 10px; }
|
|
1749
|
+
.blog_redir-source-line {
|
|
1750
1750
|
display: flex;
|
|
1751
1751
|
align-items: stretch;
|
|
1752
1752
|
gap: 10px;
|
|
1753
1753
|
min-width: 0;
|
|
1754
1754
|
}
|
|
1755
|
-
.
|
|
1755
|
+
.blog_redir-source-line > .blog_fld.blog_mono {
|
|
1756
1756
|
flex: 1 1 auto;
|
|
1757
1757
|
min-width: 0;
|
|
1758
1758
|
width: auto;
|
|
1759
1759
|
}
|
|
1760
|
-
select.
|
|
1760
|
+
select.blog_fld.blog_redir-match {
|
|
1761
1761
|
flex: 0 0 132px;
|
|
1762
1762
|
width: 132px;
|
|
1763
1763
|
min-width: 132px;
|
|
1764
1764
|
max-width: 132px;
|
|
1765
1765
|
padding-right: 2rem;
|
|
1766
1766
|
}
|
|
1767
|
-
.
|
|
1767
|
+
.blog_redir-remove {
|
|
1768
1768
|
appearance: none; cursor: pointer;
|
|
1769
1769
|
display: inline-flex; align-items: center; justify-content: center;
|
|
1770
1770
|
flex: 0 0 36px;
|
|
@@ -1773,88 +1773,88 @@ select.fld.redir-match {
|
|
|
1773
1773
|
background: var(--d-card); color: var(--d-crit);
|
|
1774
1774
|
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
|
|
1775
1775
|
}
|
|
1776
|
-
.
|
|
1777
|
-
.
|
|
1776
|
+
.blog_redir-remove svg { width: 14px; height: 14px; display: block; }
|
|
1777
|
+
.blog_redir-remove:hover:not(:disabled) {
|
|
1778
1778
|
border-color: color-mix(in srgb, var(--d-crit) 55%, var(--d-rule));
|
|
1779
1779
|
background: color-mix(in srgb, var(--d-crit) 8%, transparent);
|
|
1780
1780
|
}
|
|
1781
|
-
.
|
|
1782
|
-
.
|
|
1783
|
-
.
|
|
1781
|
+
.blog_redir-remove:disabled { opacity: 0.35; cursor: not-allowed; }
|
|
1782
|
+
.blog_redir-add { align-self: flex-start; margin-top: 2px; }
|
|
1783
|
+
.blog_redir-type-grid {
|
|
1784
1784
|
display: grid;
|
|
1785
1785
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
1786
1786
|
gap: 8px;
|
|
1787
1787
|
}
|
|
1788
|
-
.
|
|
1788
|
+
.blog_redir-type-btn {
|
|
1789
1789
|
appearance: none; cursor: pointer; text-align: left;
|
|
1790
1790
|
padding: 10px 12px; border-radius: var(--d-radius-sm);
|
|
1791
1791
|
border: 1px solid var(--d-rule); background: var(--d-card);
|
|
1792
1792
|
color: var(--d-ink); font-size: 12.8px; font-weight: 600; line-height: 1.3;
|
|
1793
1793
|
transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
|
|
1794
1794
|
}
|
|
1795
|
-
.
|
|
1796
|
-
.
|
|
1795
|
+
.blog_redir-type-btn:hover { border-color: var(--d-accent); color: var(--d-accent-ink); }
|
|
1796
|
+
.blog_redir-type-btn.blog_is-on {
|
|
1797
1797
|
background: var(--d-accent); border-color: var(--d-accent); color: #fff;
|
|
1798
1798
|
}
|
|
1799
|
-
.
|
|
1799
|
+
.blog_redir-status {
|
|
1800
1800
|
display: inline-flex; border: 1px solid var(--d-rule); border-radius: 999px; overflow: hidden;
|
|
1801
1801
|
}
|
|
1802
|
-
.
|
|
1802
|
+
.blog_redir-status-btn {
|
|
1803
1803
|
appearance: none; cursor: pointer; border: 0; background: transparent;
|
|
1804
1804
|
padding: 8px 16px; font-size: 12.8px; font-weight: 650; color: var(--d-ink-2);
|
|
1805
1805
|
}
|
|
1806
|
-
.
|
|
1807
|
-
.
|
|
1808
|
-
.
|
|
1806
|
+
.blog_redir-status-btn.blog_is-on { background: var(--d-accent); color: #fff; }
|
|
1807
|
+
.blog_redir-note { margin-top: 4px; }
|
|
1808
|
+
.blog_redir-actions {
|
|
1809
1809
|
display: flex; justify-content: space-between; align-items: center; gap: 12px;
|
|
1810
1810
|
padding-top: 8px; flex-wrap: wrap;
|
|
1811
1811
|
}
|
|
1812
|
-
.
|
|
1812
|
+
.blog_btn.blog_danger-outline {
|
|
1813
1813
|
border-color: color-mix(in srgb, var(--d-crit) 55%, var(--d-rule));
|
|
1814
1814
|
color: var(--d-crit);
|
|
1815
1815
|
}
|
|
1816
|
-
.
|
|
1817
|
-
.
|
|
1816
|
+
.blog_btn.blog_danger-outline:hover { background: color-mix(in srgb, var(--d-crit) 8%, transparent); }
|
|
1817
|
+
.blog_btn-text {
|
|
1818
1818
|
appearance: none; background: none; border: 0; cursor: pointer;
|
|
1819
1819
|
font-size: 12.6px; font-weight: 650; color: var(--d-ink-3); padding: 4px 2px;
|
|
1820
1820
|
}
|
|
1821
|
-
.
|
|
1822
|
-
.
|
|
1821
|
+
.blog_btn-text.blog_danger { color: var(--d-crit); }
|
|
1822
|
+
.blog_btn-text:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
1823
1823
|
|
|
1824
|
-
.
|
|
1825
|
-
.
|
|
1824
|
+
.blog_seo-detail-bar { margin-bottom: 4px; }
|
|
1825
|
+
.blog_seo-dl {
|
|
1826
1826
|
display: grid; gap: 14px; margin: 0;
|
|
1827
1827
|
}
|
|
1828
|
-
.
|
|
1829
|
-
.
|
|
1828
|
+
.blog_seo-dl > div { display: grid; gap: 4px; }
|
|
1829
|
+
.blog_seo-dl dt {
|
|
1830
1830
|
font-size: 11.2px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
|
|
1831
1831
|
color: var(--d-ink-3); margin: 0;
|
|
1832
1832
|
}
|
|
1833
|
-
.
|
|
1834
|
-
.
|
|
1833
|
+
.blog_seo-dl dd { margin: 0; font-size: 13.6px; color: var(--d-ink); }
|
|
1834
|
+
.blog_seo-dl-panel {
|
|
1835
1835
|
padding: 15px 17px; border: 1px solid var(--d-rule); border-radius: var(--d-radius);
|
|
1836
1836
|
background: var(--d-card);
|
|
1837
1837
|
}
|
|
1838
|
-
.
|
|
1838
|
+
.blog_chip-draft { background: var(--d-sunk); color: var(--d-ink-3); border-color: var(--d-rule); }
|
|
1839
1839
|
|
|
1840
1840
|
@media (max-width: 900px) {
|
|
1841
|
-
.
|
|
1842
|
-
.
|
|
1843
|
-
.
|
|
1844
|
-
.
|
|
1845
|
-
.
|
|
1841
|
+
.blog_seo-stat-row { grid-template-columns: 1fr; }
|
|
1842
|
+
.blog_redirect-form { grid-template-columns: 1fr; }
|
|
1843
|
+
.blog_redir-row { grid-template-columns: 1fr; gap: 8px; }
|
|
1844
|
+
.blog_redir-label { padding-top: 0; }
|
|
1845
|
+
.blog_redir-source-line {
|
|
1846
1846
|
flex-wrap: wrap;
|
|
1847
1847
|
}
|
|
1848
|
-
.
|
|
1848
|
+
.blog_redir-source-line > .blog_fld.blog_mono {
|
|
1849
1849
|
flex: 1 1 100%;
|
|
1850
1850
|
}
|
|
1851
|
-
select.
|
|
1851
|
+
select.blog_fld.blog_redir-match {
|
|
1852
1852
|
flex: 1 1 auto;
|
|
1853
1853
|
width: auto;
|
|
1854
1854
|
min-width: 132px;
|
|
1855
1855
|
max-width: none;
|
|
1856
1856
|
}
|
|
1857
|
-
.
|
|
1857
|
+
.blog_redir-remove {
|
|
1858
1858
|
flex: 0 0 36px;
|
|
1859
1859
|
}
|
|
1860
1860
|
}
|
|
@@ -1862,14 +1862,14 @@ select.fld.redir-match {
|
|
|
1862
1862
|
/* ============================ responsive ============================ */
|
|
1863
1863
|
|
|
1864
1864
|
@media (max-width: 999px) {
|
|
1865
|
-
.
|
|
1866
|
-
.
|
|
1865
|
+
.blog_bp-admin-wrapper,
|
|
1866
|
+
.blog_shell {
|
|
1867
1867
|
height: auto;
|
|
1868
1868
|
min-height: 100vh;
|
|
1869
1869
|
min-height: 100dvh;
|
|
1870
1870
|
overflow: visible;
|
|
1871
1871
|
}
|
|
1872
|
-
.
|
|
1872
|
+
.blog_side {
|
|
1873
1873
|
flex-direction: column;
|
|
1874
1874
|
gap: 12px;
|
|
1875
1875
|
height: auto;
|
|
@@ -1877,45 +1877,45 @@ select.fld.redir-match {
|
|
|
1877
1877
|
overflow: visible;
|
|
1878
1878
|
position: static;
|
|
1879
1879
|
}
|
|
1880
|
-
.
|
|
1880
|
+
.blog_side-scroll {
|
|
1881
1881
|
flex-direction: row;
|
|
1882
1882
|
overflow-x: auto;
|
|
1883
1883
|
overflow-y: hidden;
|
|
1884
1884
|
gap: 20px;
|
|
1885
1885
|
max-height: none;
|
|
1886
1886
|
}
|
|
1887
|
-
.
|
|
1888
|
-
.
|
|
1887
|
+
.blog_side-group { min-width: 190px; }
|
|
1888
|
+
.blog_main {
|
|
1889
1889
|
height: auto;
|
|
1890
1890
|
overflow: visible;
|
|
1891
1891
|
}
|
|
1892
|
-
.
|
|
1892
|
+
.blog_body {
|
|
1893
1893
|
overflow: visible;
|
|
1894
1894
|
}
|
|
1895
|
-
.
|
|
1896
|
-
.
|
|
1897
|
-
.
|
|
1898
|
-
.
|
|
1895
|
+
.blog_top { position: static; }
|
|
1896
|
+
.blog_ed-bar { position: static; }
|
|
1897
|
+
.blog_ed.blog_is-active .blog_ed-chrome { top: 0; }
|
|
1898
|
+
.blog_panel-form { position: static; }
|
|
1899
1899
|
}
|
|
1900
1900
|
@media (max-width: 720px) {
|
|
1901
|
-
.
|
|
1902
|
-
.
|
|
1903
|
-
.
|
|
1904
|
-
.
|
|
1905
|
-
.
|
|
1901
|
+
.blog_body { padding: 16px 14px 60px; }
|
|
1902
|
+
.blog_top { padding: 12px 14px; }
|
|
1903
|
+
.blog_row { grid-template-columns: 1fr; }
|
|
1904
|
+
.blog_row-right { justify-content: flex-start; }
|
|
1905
|
+
.blog_ed-title { font-size: 22px; }
|
|
1906
1906
|
}
|
|
1907
1907
|
|
|
1908
1908
|
/* Scope to admin shell so public site hero animations keep working when
|
|
1909
1909
|
prefers-reduced-motion is unset; site-*.css handle their own reduce rules. */
|
|
1910
1910
|
@media (prefers-reduced-motion: reduce) {
|
|
1911
|
-
.
|
|
1912
|
-
.
|
|
1911
|
+
.blog_bp-admin-wrapper *,
|
|
1912
|
+
.blog_shell * {
|
|
1913
1913
|
transition: none !important;
|
|
1914
1914
|
animation: none !important;
|
|
1915
1915
|
}
|
|
1916
1916
|
}
|
|
1917
1917
|
|
|
1918
|
-
.
|
|
1918
|
+
.blog_route-loading {
|
|
1919
1919
|
display: flex;
|
|
1920
1920
|
flex-direction: column;
|
|
1921
1921
|
align-items: center;
|
|
@@ -1924,7 +1924,7 @@ select.fld.redir-match {
|
|
|
1924
1924
|
min-height: 42vh;
|
|
1925
1925
|
padding: 40px 20px;
|
|
1926
1926
|
}
|
|
1927
|
-
.
|
|
1927
|
+
.blog_route-loading-bar {
|
|
1928
1928
|
width: min(220px, 50vw);
|
|
1929
1929
|
height: 3px;
|
|
1930
1930
|
border-radius: 999px;
|
|
@@ -1932,7 +1932,7 @@ select.fld.redir-match {
|
|
|
1932
1932
|
background-size: 200% 100%;
|
|
1933
1933
|
animation: route-loading-slide 1s linear infinite;
|
|
1934
1934
|
}
|
|
1935
|
-
.
|
|
1935
|
+
.blog_route-loading-label {
|
|
1936
1936
|
margin: 0;
|
|
1937
1937
|
font-size: 13px;
|
|
1938
1938
|
color: var(--d-ink-3);
|
|
@@ -1944,9 +1944,9 @@ select.fld.redir-match {
|
|
|
1944
1944
|
|
|
1945
1945
|
|
|
1946
1946
|
|
|
1947
|
-
/* Public post details (BlogUploader article page) — scoped under .
|
|
1947
|
+
/* Public post details (BlogUploader article page) — scoped under .blog_bp-site-article */
|
|
1948
1948
|
|
|
1949
|
-
.
|
|
1949
|
+
.blog_bp-site-article {
|
|
1950
1950
|
--bp-paper: #ffffff;
|
|
1951
1951
|
--bp-paper-2: #f8f9fc;
|
|
1952
1952
|
--bp-ink: #16172b;
|
|
@@ -1969,23 +1969,23 @@ select.fld.redir-match {
|
|
|
1969
1969
|
}
|
|
1970
1970
|
|
|
1971
1971
|
/* Full-bleed inside admin Shell body */
|
|
1972
|
-
.
|
|
1972
|
+
.blog_body:has(.blog_admin-post-detail) {
|
|
1973
1973
|
padding: 0 !important;
|
|
1974
1974
|
gap: 0 !important;
|
|
1975
1975
|
}
|
|
1976
|
-
.
|
|
1976
|
+
.blog_admin-post-detail {
|
|
1977
1977
|
min-height: 100%;
|
|
1978
1978
|
}
|
|
1979
1979
|
|
|
1980
|
-
.
|
|
1980
|
+
.blog_bp-site-article .blog_progress {
|
|
1981
1981
|
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent;
|
|
1982
1982
|
}
|
|
1983
|
-
.
|
|
1983
|
+
.blog_bp-site-article .blog_progress span {
|
|
1984
1984
|
display: block; height: 100%; background: var(--bp-accent); transition: width 0.08s linear;
|
|
1985
1985
|
}
|
|
1986
1986
|
|
|
1987
1987
|
/* Match BlogUploader looping hero text animation (list media hero + article).
|
|
1988
|
-
Scoped to .
|
|
1988
|
+
Scoped to .blog_bp-root so both .blog_bp-site-index and .blog_bp-site-article inherit it. */
|
|
1989
1989
|
@keyframes hero-fade-slide-from-left {
|
|
1990
1990
|
0% { opacity: 0; transform: translateX(-56px); }
|
|
1991
1991
|
12% { opacity: 1; transform: translateX(0); }
|
|
@@ -2001,12 +2001,12 @@ select.fld.redir-match {
|
|
|
2001
2001
|
100% { opacity: 0; transform: translateX(56px); }
|
|
2002
2002
|
}
|
|
2003
2003
|
|
|
2004
|
-
.
|
|
2004
|
+
.blog_bp-root {
|
|
2005
2005
|
--bp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
2006
2006
|
--ease-out: var(--bp-ease-out);
|
|
2007
2007
|
}
|
|
2008
2008
|
|
|
2009
|
-
.
|
|
2009
|
+
.blog_bp-root .blog_hero-fade-slide {
|
|
2010
2010
|
--hero-loop: 5s;
|
|
2011
2011
|
animation-duration: var(--hero-loop);
|
|
2012
2012
|
animation-timing-function: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
|
|
@@ -2015,315 +2015,315 @@ select.fld.redir-match {
|
|
|
2015
2015
|
/* Negative delay keeps stagger offset on every loop */
|
|
2016
2016
|
animation-delay: calc(var(--slide-delay, 0ms) * -1);
|
|
2017
2017
|
}
|
|
2018
|
-
.
|
|
2018
|
+
.blog_bp-root .blog_hero-fade-slide-left {
|
|
2019
2019
|
animation-name: hero-fade-slide-from-left;
|
|
2020
2020
|
}
|
|
2021
|
-
.
|
|
2021
|
+
.blog_bp-root .blog_hero-fade-slide-right {
|
|
2022
2022
|
animation-name: hero-fade-slide-from-right;
|
|
2023
2023
|
}
|
|
2024
2024
|
@media (prefers-reduced-motion: reduce) {
|
|
2025
|
-
.
|
|
2025
|
+
.blog_bp-root .blog_hero-fade-slide {
|
|
2026
2026
|
opacity: 1;
|
|
2027
2027
|
transform: none;
|
|
2028
2028
|
animation: none !important;
|
|
2029
2029
|
}
|
|
2030
2030
|
}
|
|
2031
2031
|
|
|
2032
|
-
.
|
|
2033
|
-
.
|
|
2032
|
+
.blog_bp-site-article .blog_article-detail-hero { width: 100%; font-family: var(--bp-font-ui); }
|
|
2033
|
+
.blog_bp-site-article .blog_article-hero-media {
|
|
2034
2034
|
margin: 0 auto; width: 100%; max-width: 1200px; background: #0a0b10; overflow: hidden;
|
|
2035
2035
|
}
|
|
2036
|
-
.
|
|
2036
|
+
.blog_bp-site-article .blog_article-hero-visual {
|
|
2037
2037
|
display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto;
|
|
2038
2038
|
aspect-ratio: 1200 / 630; object-fit: cover; border: 0;
|
|
2039
2039
|
}
|
|
2040
|
-
.
|
|
2040
|
+
.blog_bp-site-article .blog_article-hero-caption {
|
|
2041
2041
|
margin: 0 auto; padding: 12px var(--bp-site-pad) 0; max-width: var(--bp-site-max);
|
|
2042
2042
|
font-size: 12.8px; color: var(--bp-ink-3);
|
|
2043
2043
|
}
|
|
2044
|
-
.
|
|
2044
|
+
.blog_bp-site-article .blog_article-hero-copy {
|
|
2045
2045
|
width: 100%;
|
|
2046
2046
|
padding: clamp(32px, 5vw, 56px) var(--bp-site-pad) clamp(20px, 3vw, 32px);
|
|
2047
2047
|
border-bottom: 1px solid var(--bp-rule);
|
|
2048
2048
|
background: linear-gradient(180deg, var(--bp-paper-2) 0%, var(--bp-paper) 100%);
|
|
2049
2049
|
}
|
|
2050
|
-
.
|
|
2050
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-copy {
|
|
2051
2051
|
border-bottom: 0;
|
|
2052
2052
|
background: transparent;
|
|
2053
2053
|
padding-top: 0;
|
|
2054
2054
|
}
|
|
2055
|
-
.
|
|
2056
|
-
.
|
|
2057
|
-
.
|
|
2055
|
+
.blog_bp-site-article .blog_article-hero-copy-inner { max-width: min(860px, 100%); margin: 0 auto; }
|
|
2056
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-copy-inner { max-width: 1200px; }
|
|
2057
|
+
.blog_bp-site-article .blog_article-hero-title {
|
|
2058
2058
|
font-family: var(--bp-font-display);
|
|
2059
2059
|
font-size: clamp(32px, 5.2vw, 52px);
|
|
2060
2060
|
line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; margin: 16px 0 0;
|
|
2061
2061
|
text-wrap: balance;
|
|
2062
2062
|
}
|
|
2063
|
-
.
|
|
2063
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-title {
|
|
2064
2064
|
font-size: clamp(36px, 5.8vw, 58px);
|
|
2065
2065
|
}
|
|
2066
|
-
.
|
|
2067
|
-
.
|
|
2066
|
+
.blog_bp-site-article .blog_standfirst,
|
|
2067
|
+
.blog_bp-site-article .blog_article-hero-standfirst {
|
|
2068
2068
|
font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--bp-ink-2);
|
|
2069
2069
|
margin: 18px 0 0; max-width: 62ch;
|
|
2070
2070
|
}
|
|
2071
|
-
.
|
|
2072
|
-
.
|
|
2071
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_standfirst,
|
|
2072
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_article-hero-standfirst {
|
|
2073
2073
|
margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.9);
|
|
2074
2074
|
text-align: center; max-width: 48ch;
|
|
2075
2075
|
}
|
|
2076
|
-
.
|
|
2077
|
-
.
|
|
2078
|
-
.
|
|
2076
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-row { justify-content: center; }
|
|
2077
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_breadcrumb { justify-content: center; }
|
|
2078
|
+
.blog_bp-site-article .blog_eyebrow {
|
|
2079
2079
|
display: inline-block; font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em;
|
|
2080
2080
|
text-transform: uppercase; color: var(--bp-accent); text-decoration: none;
|
|
2081
2081
|
background: color-mix(in srgb, var(--bp-accent) 10%, transparent);
|
|
2082
2082
|
padding: 4px 11px; border-radius: 100px;
|
|
2083
2083
|
}
|
|
2084
|
-
.
|
|
2085
|
-
.
|
|
2086
|
-
.
|
|
2087
|
-
.
|
|
2084
|
+
.blog_bp-site-article .blog_byline-row { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
|
|
2085
|
+
.blog_bp-site-article .blog_byline-faces { display: flex; }
|
|
2086
|
+
.blog_bp-site-article .blog_byline-faces img,
|
|
2087
|
+
.blog_bp-site-article .blog_face-fallback {
|
|
2088
2088
|
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
|
|
2089
2089
|
border: 2px solid var(--bp-paper); margin-left: -8px; background: var(--bp-sunk);
|
|
2090
2090
|
display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--bp-ink-2);
|
|
2091
2091
|
}
|
|
2092
|
-
.
|
|
2093
|
-
.
|
|
2092
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-faces img,
|
|
2093
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_face-fallback {
|
|
2094
2094
|
border-color: #0B4A75; color: #0B4A75; background: #fff;
|
|
2095
2095
|
}
|
|
2096
|
-
.
|
|
2097
|
-
.
|
|
2098
|
-
.
|
|
2099
|
-
.
|
|
2100
|
-
.
|
|
2101
|
-
.
|
|
2102
|
-
.
|
|
2096
|
+
.blog_bp-site-article .blog_byline-faces img:first-child,
|
|
2097
|
+
.blog_bp-site-article .blog_face-fallback:first-child { margin-left: 0; }
|
|
2098
|
+
.blog_bp-site-article .blog_byline-text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
|
|
2099
|
+
.blog_bp-site-article .blog_byline-text .blog_by { font-weight: 650; color: var(--bp-ink); }
|
|
2100
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-text .blog_by,
|
|
2101
|
+
.blog_bp-site-article .blog_blog-details-hero .blog_byline-text .blog_meta { color: rgba(255,255,255,0.92); }
|
|
2102
|
+
.blog_bp-site-article .blog_byline-text .blog_meta {
|
|
2103
2103
|
color: var(--bp-ink-3); display: flex; gap: 12px; flex-wrap: wrap; font-size: 13.4px;
|
|
2104
2104
|
}
|
|
2105
2105
|
|
|
2106
|
-
.
|
|
2106
|
+
.blog_bp-site-article .blog_article-shell {
|
|
2107
2107
|
display: grid; gap: 32px; padding: 40px var(--bp-site-pad) 64px;
|
|
2108
2108
|
align-items: start; max-width: var(--bp-site-max); margin: 0 auto; width: 100%; box-sizing: border-box;
|
|
2109
2109
|
}
|
|
2110
2110
|
@media (min-width: 1040px) {
|
|
2111
|
-
.
|
|
2111
|
+
.blog_bp-site-article .blog_article-shell {
|
|
2112
2112
|
grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px;
|
|
2113
2113
|
}
|
|
2114
2114
|
}
|
|
2115
|
-
.
|
|
2116
|
-
.
|
|
2115
|
+
.blog_bp-site-article .blog_article { min-width: 0; max-width: none; }
|
|
2116
|
+
.blog_bp-site-article .blog_rail { display: none; width: 100%; }
|
|
2117
2117
|
@media (min-width: 1040px) {
|
|
2118
|
-
.
|
|
2118
|
+
.blog_bp-site-article .blog_rail { display: block; position: sticky; top: 96px; }
|
|
2119
2119
|
}
|
|
2120
|
-
.
|
|
2120
|
+
.blog_bp-site-article .blog_rail-title {
|
|
2121
2121
|
font-size: 11px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase;
|
|
2122
2122
|
color: var(--bp-ink-3); margin: 0 0 12px;
|
|
2123
2123
|
}
|
|
2124
|
-
.
|
|
2124
|
+
.blog_bp-site-article .blog_toc ol {
|
|
2125
2125
|
list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--bp-rule);
|
|
2126
2126
|
display: flex; flex-direction: column; gap: 9px;
|
|
2127
2127
|
}
|
|
2128
|
-
.
|
|
2129
|
-
.
|
|
2128
|
+
.blog_bp-site-article .blog_toc li.blog_sub { padding-left: 12px; }
|
|
2129
|
+
.blog_bp-site-article .blog_toc a {
|
|
2130
2130
|
font-size: 13.4px; line-height: 1.4; color: var(--bp-ink-2); text-decoration: none; display: block;
|
|
2131
2131
|
}
|
|
2132
|
-
.
|
|
2132
|
+
.blog_bp-site-article .blog_toc a:hover { color: var(--bp-accent); }
|
|
2133
2133
|
|
|
2134
|
-
.
|
|
2135
|
-
.
|
|
2136
|
-
.
|
|
2134
|
+
.blog_bp-site-article .blog_article-rail-details { margin-bottom: 26px; display: flex; flex-direction: column; gap: 22px; }
|
|
2135
|
+
.blog_bp-site-article .blog_rail-details-mobile { margin: 0 0 28px; }
|
|
2136
|
+
.blog_bp-site-article .blog_rail-details-desktop { display: none; }
|
|
2137
2137
|
@media (min-width: 1040px) {
|
|
2138
|
-
.
|
|
2139
|
-
.
|
|
2138
|
+
.blog_bp-site-article .blog_rail-details-mobile { display: none; }
|
|
2139
|
+
.blog_bp-site-article .blog_rail-details-desktop { display: flex; }
|
|
2140
2140
|
}
|
|
2141
|
-
.
|
|
2142
|
-
.
|
|
2141
|
+
.blog_bp-site-article .blog_rail-owner-panel,
|
|
2142
|
+
.blog_bp-site-article .blog_rail-related-panel {
|
|
2143
2143
|
background: var(--bp-paper); border: 1px solid var(--bp-rule); border-radius: 12px;
|
|
2144
2144
|
box-shadow: 0 1px 2px rgba(22, 23, 43, 0.04), 0 10px 24px -18px rgba(22, 23, 43, 0.22);
|
|
2145
2145
|
overflow: hidden; display: flex; flex-direction: column;
|
|
2146
2146
|
}
|
|
2147
|
-
.
|
|
2147
|
+
.blog_bp-site-article .blog_rail-owner-list {
|
|
2148
2148
|
list-style: none; margin: 0; padding: 14px 17px; display: flex; flex-direction: column; gap: 14px;
|
|
2149
2149
|
}
|
|
2150
|
-
.
|
|
2151
|
-
.
|
|
2152
|
-
.
|
|
2150
|
+
.blog_bp-site-article .blog_rail-owner { display: flex; gap: 12px; align-items: flex-start; }
|
|
2151
|
+
.blog_bp-site-article .blog_rail-owner img,
|
|
2152
|
+
.blog_bp-site-article .blog_rail-owner-fallback {
|
|
2153
2153
|
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
|
|
2154
2154
|
}
|
|
2155
|
-
.
|
|
2156
|
-
.
|
|
2155
|
+
.blog_bp-site-article .blog_rail-owner img { object-fit: cover; }
|
|
2156
|
+
.blog_bp-site-article .blog_rail-owner-fallback {
|
|
2157
2157
|
display: grid; place-items: center;
|
|
2158
2158
|
background: color-mix(in srgb, var(--bp-accent) 16%, var(--bp-sunk));
|
|
2159
2159
|
color: var(--bp-accent); font-size: 12px; font-weight: 750;
|
|
2160
2160
|
}
|
|
2161
|
-
.
|
|
2162
|
-
.
|
|
2163
|
-
.
|
|
2161
|
+
.blog_bp-site-article .blog_rail-owner-name { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--bp-ink); }
|
|
2162
|
+
.blog_bp-site-article .blog_rail-owner-role { margin: 2px 0 0; font-size: 12px; color: var(--bp-ink-3); }
|
|
2163
|
+
.blog_bp-site-article .blog_rail-owner-bio {
|
|
2164
2164
|
margin: 6px 0 0; font-size: 12.4px; line-height: 1.45; color: var(--bp-ink-2);
|
|
2165
2165
|
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
|
2166
2166
|
}
|
|
2167
|
-
.
|
|
2167
|
+
.blog_bp-site-article .blog_rail-related-head {
|
|
2168
2168
|
padding: 13px 17px; border-bottom: 1px solid var(--bp-rule);
|
|
2169
2169
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
2170
2170
|
}
|
|
2171
|
-
.
|
|
2171
|
+
.blog_bp-site-article .blog_rail-related-head h3 {
|
|
2172
2172
|
margin: 0; font-size: 13.5px; font-weight: 680; letter-spacing: -0.005em; color: var(--bp-ink);
|
|
2173
2173
|
}
|
|
2174
|
-
.
|
|
2175
|
-
.
|
|
2174
|
+
.blog_bp-site-article .blog_rail-related-rows { display: flex; flex-direction: column; }
|
|
2175
|
+
.blog_bp-site-article .blog_rail-related-row {
|
|
2176
2176
|
padding: 12px 17px; border-bottom: 1px solid color-mix(in srgb, var(--bp-rule) 70%, transparent);
|
|
2177
2177
|
}
|
|
2178
|
-
.
|
|
2179
|
-
.
|
|
2180
|
-
.
|
|
2178
|
+
.blog_bp-site-article .blog_rail-related-row:last-child { border-bottom: 0; }
|
|
2179
|
+
.blog_bp-site-article .blog_rail-related-row:hover { background: var(--bp-paper-2); }
|
|
2180
|
+
.blog_bp-site-article .blog_rail-related-t {
|
|
2181
2181
|
font-size: 14px; font-weight: 620; color: var(--bp-ink); text-decoration: none;
|
|
2182
2182
|
letter-spacing: -0.005em; display: block; line-height: 1.35;
|
|
2183
2183
|
border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit;
|
|
2184
2184
|
}
|
|
2185
|
-
.
|
|
2186
|
-
.
|
|
2185
|
+
.blog_bp-site-article .blog_rail-related-t:hover { color: var(--bp-accent); }
|
|
2186
|
+
.blog_bp-site-article .blog_rail-related-sub {
|
|
2187
2187
|
font-size: 12.2px; color: var(--bp-ink-3); margin-top: 3px;
|
|
2188
2188
|
display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center;
|
|
2189
2189
|
}
|
|
2190
|
-
.
|
|
2191
|
-
.
|
|
2190
|
+
.blog_bp-site-article .blog_rail-related-sub a,
|
|
2191
|
+
.blog_bp-site-article .blog_rail-related-sub .blog_bp-linkish {
|
|
2192
2192
|
color: var(--bp-accent); text-decoration: none; font-weight: 600;
|
|
2193
2193
|
border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
|
|
2194
2194
|
}
|
|
2195
|
-
.
|
|
2196
|
-
.
|
|
2195
|
+
.blog_bp-site-article .blog_rail-related-sub a:hover,
|
|
2196
|
+
.blog_bp-site-article .blog_rail-related-sub .blog_bp-linkish:hover { text-decoration: underline; }
|
|
2197
2197
|
|
|
2198
|
-
.
|
|
2198
|
+
.blog_bp-site-article .blog_prose {
|
|
2199
2199
|
font-family: var(--bp-font-display);
|
|
2200
2200
|
font-size: 18.5px; line-height: 1.72; max-width: var(--bp-measure);
|
|
2201
2201
|
}
|
|
2202
|
-
.
|
|
2203
|
-
.
|
|
2204
|
-
.
|
|
2202
|
+
.blog_bp-site-article .blog_prose > * { margin: 0 0 1.15em; }
|
|
2203
|
+
.blog_bp-site-article .blog_prose h2,
|
|
2204
|
+
.blog_bp-site-article .blog_prose h3 {
|
|
2205
2205
|
font-family: var(--bp-font-display); letter-spacing: -0.02em; line-height: 1.25;
|
|
2206
2206
|
position: relative; scroll-margin-top: 96px;
|
|
2207
2207
|
}
|
|
2208
|
-
.
|
|
2209
|
-
.
|
|
2210
|
-
.
|
|
2211
|
-
.
|
|
2208
|
+
.blog_bp-site-article .blog_prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 1.9em 0 0.55em; font-weight: 700; }
|
|
2209
|
+
.blog_bp-site-article .blog_prose h3 { font-size: clamp(20px, 2.4vw, 23px); margin: 1.6em 0 0.45em; font-weight: 700; }
|
|
2210
|
+
.blog_bp-site-article .blog_prose a { color: var(--bp-accent); }
|
|
2211
|
+
.blog_bp-site-article .blog_prose blockquote {
|
|
2212
2212
|
margin: 1.7em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--bp-accent);
|
|
2213
2213
|
font-size: 1.06em; color: var(--bp-ink-2); font-style: italic;
|
|
2214
2214
|
}
|
|
2215
|
-
.
|
|
2215
|
+
.blog_bp-site-article .blog_prose img { border-radius: 12px; display: block; max-width: 100%; height: auto; }
|
|
2216
2216
|
|
|
2217
|
-
.
|
|
2218
|
-
.
|
|
2217
|
+
.blog_bp-site-article .blog_tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
|
|
2218
|
+
.blog_bp-site-article .blog_tag-pill {
|
|
2219
2219
|
font-size: 12.6px; color: var(--bp-ink-2); background: var(--bp-sunk);
|
|
2220
2220
|
border: 1px solid var(--bp-rule); border-radius: 100px; padding: 4px 12px;
|
|
2221
2221
|
text-decoration: none; cursor: pointer; font: inherit;
|
|
2222
2222
|
}
|
|
2223
|
-
.
|
|
2223
|
+
.blog_bp-site-article .blog_share {
|
|
2224
2224
|
display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.4px;
|
|
2225
2225
|
}
|
|
2226
|
-
.
|
|
2226
|
+
.blog_bp-site-article .blog_share-label {
|
|
2227
2227
|
font-weight: 750; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bp-ink-3);
|
|
2228
2228
|
}
|
|
2229
|
-
.
|
|
2230
|
-
.
|
|
2231
|
-
.
|
|
2232
|
-
.
|
|
2233
|
-
.
|
|
2229
|
+
.blog_bp-site-article .blog_share a { color: var(--bp-ink-2); text-decoration: none; }
|
|
2230
|
+
.blog_bp-site-article .blog_share a:hover { color: var(--bp-accent); }
|
|
2231
|
+
.blog_bp-site-article .blog_share-copy summary { cursor: pointer; color: var(--bp-ink-2); list-style: none; }
|
|
2232
|
+
.blog_bp-site-article .blog_share-copy summary::-webkit-details-marker { display: none; }
|
|
2233
|
+
.blog_bp-site-article .blog_share-copy input {
|
|
2234
2234
|
font: inherit; font-size: 12.5px; margin-top: 8px; width: min(320px, 100%);
|
|
2235
2235
|
padding: 7px 10px; border: 1px solid var(--bp-rule); border-radius: 8px;
|
|
2236
2236
|
background: var(--bp-paper-2); color: var(--bp-ink-2);
|
|
2237
2237
|
}
|
|
2238
|
-
.
|
|
2238
|
+
.blog_bp-site-article .blog_share-foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bp-rule); }
|
|
2239
2239
|
|
|
2240
|
-
.
|
|
2240
|
+
.blog_bp-site-article .blog_author-card {
|
|
2241
2241
|
display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; padding: 20px;
|
|
2242
2242
|
background: var(--bp-paper-2); border: 1px solid var(--bp-rule); border-radius: 12px;
|
|
2243
2243
|
}
|
|
2244
|
-
.
|
|
2245
|
-
.
|
|
2246
|
-
.
|
|
2244
|
+
.blog_bp-site-article .blog_author-name { margin: 0; font-weight: 700; font-size: 15px; }
|
|
2245
|
+
.blog_bp-site-article .blog_author-name span { font-weight: 400; color: var(--bp-ink-3); }
|
|
2246
|
+
.blog_bp-site-article .blog_author-bio { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--bp-ink-2); }
|
|
2247
2247
|
|
|
2248
|
-
.
|
|
2248
|
+
.blog_bp-site-article .blog_comments {
|
|
2249
2249
|
margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--bp-rule);
|
|
2250
2250
|
}
|
|
2251
|
-
.
|
|
2251
|
+
.blog_bp-site-article .blog_comments h2 {
|
|
2252
2252
|
font-family: var(--bp-font-display); font-size: 26px; letter-spacing: -0.02em; margin: 0 0 18px;
|
|
2253
2253
|
}
|
|
2254
|
-
.
|
|
2255
|
-
.
|
|
2256
|
-
.
|
|
2257
|
-
.
|
|
2254
|
+
.blog_bp-site-article .blog_comments-count { font-weight: 500; color: var(--bp-ink-3); font-size: 0.85em; }
|
|
2255
|
+
.blog_bp-site-article .blog_comments-closed,
|
|
2256
|
+
.blog_bp-site-article .blog_comments-empty { margin: 0 0 22px; color: var(--bp-ink-3); font-size: 14.5px; }
|
|
2257
|
+
.blog_bp-site-article .blog_comments-list {
|
|
2258
2258
|
list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 16px;
|
|
2259
2259
|
}
|
|
2260
|
-
.
|
|
2260
|
+
.blog_bp-site-article .blog_comment-item {
|
|
2261
2261
|
padding: 16px 18px; border: 1px solid var(--bp-rule); border-radius: 12px; background: var(--bp-paper-2);
|
|
2262
2262
|
}
|
|
2263
|
-
.
|
|
2264
|
-
.
|
|
2263
|
+
.blog_bp-site-article .blog_comment-profile { display: flex; gap: 14px; align-items: flex-start; }
|
|
2264
|
+
.blog_bp-site-article .blog_comment-avatar {
|
|
2265
2265
|
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
|
|
2266
2266
|
background: color-mix(in srgb, var(--bp-accent) 16%, var(--bp-sunk));
|
|
2267
2267
|
color: var(--bp-accent); font-size: 13px; font-weight: 750;
|
|
2268
2268
|
}
|
|
2269
|
-
.
|
|
2269
|
+
.blog_bp-site-article .blog_comment-meta {
|
|
2270
2270
|
display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 8px;
|
|
2271
2271
|
font-size: 13px; color: var(--bp-ink-3);
|
|
2272
2272
|
}
|
|
2273
|
-
.
|
|
2274
|
-
.
|
|
2273
|
+
.blog_bp-site-article .blog_comment-author { color: var(--bp-ink); font-size: 14.5px; }
|
|
2274
|
+
.blog_bp-site-article .blog_comment-body {
|
|
2275
2275
|
margin: 0; font-size: 15px; line-height: 1.65; color: var(--bp-ink-2);
|
|
2276
2276
|
white-space: pre-wrap; word-break: break-word;
|
|
2277
2277
|
}
|
|
2278
|
-
.
|
|
2278
|
+
.blog_bp-site-article .blog_comment-form {
|
|
2279
2279
|
display: flex; flex-direction: column; gap: 14px; padding: 20px;
|
|
2280
2280
|
border: 1px solid var(--bp-rule); border-radius: 12px; background: var(--bp-paper);
|
|
2281
2281
|
}
|
|
2282
|
-
.
|
|
2283
|
-
.
|
|
2282
|
+
.blog_bp-site-article .blog_comment-form-title { margin: 0; font-size: 16px; font-weight: 700; }
|
|
2283
|
+
.blog_bp-site-article .blog_comment-form-grid { display: grid; gap: 12px; }
|
|
2284
2284
|
@media (min-width: 640px) {
|
|
2285
|
-
.
|
|
2285
|
+
.blog_bp-site-article .blog_comment-form-grid { grid-template-columns: 1fr 1fr; }
|
|
2286
2286
|
}
|
|
2287
|
-
.
|
|
2287
|
+
.blog_bp-site-article .blog_comment-form label {
|
|
2288
2288
|
display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--bp-ink-2);
|
|
2289
2289
|
}
|
|
2290
|
-
.
|
|
2290
|
+
.blog_bp-site-article .blog_comment-form label em {
|
|
2291
2291
|
font-style: normal; font-weight: 450; color: var(--bp-ink-3);
|
|
2292
2292
|
}
|
|
2293
|
-
.
|
|
2294
|
-
.
|
|
2293
|
+
.blog_bp-site-article .blog_comment-form input,
|
|
2294
|
+
.blog_bp-site-article .blog_comment-form textarea {
|
|
2295
2295
|
font: inherit; font-weight: 450; font-size: 14.5px; padding: 10px 12px;
|
|
2296
2296
|
border: 1px solid var(--bp-rule); border-radius: 8px; background: var(--bp-paper-2); color: var(--bp-ink);
|
|
2297
2297
|
}
|
|
2298
|
-
.
|
|
2299
|
-
.
|
|
2298
|
+
.blog_bp-site-article .blog_comment-form input:focus,
|
|
2299
|
+
.blog_bp-site-article .blog_comment-form textarea:focus {
|
|
2300
2300
|
outline: none; border-color: var(--bp-accent);
|
|
2301
2301
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 18%, transparent);
|
|
2302
2302
|
}
|
|
2303
|
-
.
|
|
2304
|
-
.
|
|
2303
|
+
.blog_bp-site-article .blog_comment-body-field textarea { resize: vertical; min-height: 120px; }
|
|
2304
|
+
.blog_bp-site-article .blog_comment-submit {
|
|
2305
2305
|
align-self: flex-start; font: inherit; font-weight: 650; font-size: 14px;
|
|
2306
2306
|
padding: 10px 16px; border: 0; border-radius: 8px; background: var(--bp-accent); color: #fff; cursor: pointer;
|
|
2307
2307
|
}
|
|
2308
|
-
.
|
|
2309
|
-
.
|
|
2308
|
+
.blog_bp-site-article .blog_comment-submit:disabled { opacity: 0.65; cursor: wait; }
|
|
2309
|
+
.blog_bp-site-article .blog_comment-error {
|
|
2310
2310
|
margin: 0; padding: 10px 12px; border-radius: 8px;
|
|
2311
2311
|
background: color-mix(in srgb, #c44 12%, transparent); color: #9a2f2f; font-size: 13.5px;
|
|
2312
2312
|
}
|
|
2313
|
-
.
|
|
2313
|
+
.blog_bp-site-article .blog_comment-ok {
|
|
2314
2314
|
margin: 0; padding: 10px 12px; border-radius: 8px;
|
|
2315
2315
|
background: color-mix(in srgb, #2f8f5b 12%, transparent); color: #1f6b42; font-size: 13.5px;
|
|
2316
2316
|
}
|
|
2317
|
-
.
|
|
2318
|
-
.
|
|
2317
|
+
.blog_bp-site-article .blog_comment-moderation-note { margin: 0; font-size: 12.5px; color: var(--bp-ink-3); }
|
|
2318
|
+
.blog_bp-site-article .blog_comment-hp {
|
|
2319
2319
|
position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
|
|
2320
2320
|
}
|
|
2321
2321
|
|
|
2322
2322
|
|
|
2323
2323
|
|
|
2324
|
-
/* Public post list (BlogUploader index) — scoped under .
|
|
2324
|
+
/* Public post list (BlogUploader index) — scoped under .blog_bp-site-index */
|
|
2325
2325
|
|
|
2326
|
-
.
|
|
2326
|
+
.blog_bp-site-index {
|
|
2327
2327
|
--bp-accent: var(--bp-color-primary, #2e3a8c);
|
|
2328
2328
|
--accent: var(--bp-accent);
|
|
2329
2329
|
--bp-ink: #14151c;
|
|
@@ -2358,29 +2358,29 @@ select.fld.redir-match {
|
|
|
2358
2358
|
min-height: 100%;
|
|
2359
2359
|
}
|
|
2360
2360
|
|
|
2361
|
-
.
|
|
2362
|
-
.
|
|
2363
|
-
.
|
|
2361
|
+
.blog_bp-site-index *,
|
|
2362
|
+
.blog_bp-site-index *::before,
|
|
2363
|
+
.blog_bp-site-index *::after {
|
|
2364
2364
|
box-sizing: border-box;
|
|
2365
2365
|
}
|
|
2366
2366
|
|
|
2367
|
-
.
|
|
2367
|
+
.blog_bp-site-index a {
|
|
2368
2368
|
color: var(--bp-accent);
|
|
2369
2369
|
text-underline-offset: 2px;
|
|
2370
2370
|
}
|
|
2371
2371
|
|
|
2372
|
-
.
|
|
2372
|
+
.blog_bp-site-index :focus-visible {
|
|
2373
2373
|
outline: 2px solid var(--bp-accent);
|
|
2374
2374
|
outline-offset: 3px;
|
|
2375
2375
|
border-radius: 3px;
|
|
2376
2376
|
}
|
|
2377
2377
|
|
|
2378
|
-
.
|
|
2378
|
+
.blog_bp-site-index img {
|
|
2379
2379
|
max-width: 100%;
|
|
2380
2380
|
height: auto;
|
|
2381
2381
|
}
|
|
2382
2382
|
|
|
2383
|
-
.
|
|
2383
|
+
.blog_bp-site-index .blog_wrap {
|
|
2384
2384
|
width: 100%;
|
|
2385
2385
|
max-width: var(--bp-site-max);
|
|
2386
2386
|
margin: 0 auto;
|
|
@@ -2407,21 +2407,21 @@ select.fld.redir-match {
|
|
|
2407
2407
|
50% { opacity: 0.95; transform: translateX(-50%) scaleX(1); }
|
|
2408
2408
|
}
|
|
2409
2409
|
|
|
2410
|
-
.
|
|
2410
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item {
|
|
2411
2411
|
animation: bp-site-rise 0.75s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
|
|
2412
2412
|
}
|
|
2413
|
-
.
|
|
2414
|
-
.
|
|
2415
|
-
.
|
|
2416
|
-
.
|
|
2417
|
-
.
|
|
2418
|
-
.
|
|
2419
|
-
.
|
|
2420
|
-
.
|
|
2413
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(1) { animation-delay: 0.04s; }
|
|
2414
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(2) { animation-delay: 0.1s; }
|
|
2415
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(3) { animation-delay: 0.16s; }
|
|
2416
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(4) { animation-delay: 0.22s; }
|
|
2417
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(5) { animation-delay: 0.28s; }
|
|
2418
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(6) { animation-delay: 0.34s; }
|
|
2419
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(7) { animation-delay: 0.4s; }
|
|
2420
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item:nth-child(8) { animation-delay: 0.46s; }
|
|
2421
2421
|
|
|
2422
2422
|
/* --- hero --------------------------------------------------------------- */
|
|
2423
2423
|
|
|
2424
|
-
.
|
|
2424
|
+
.blog_bp-site-index .blog_site-hero {
|
|
2425
2425
|
position: relative;
|
|
2426
2426
|
width: 100%;
|
|
2427
2427
|
padding: clamp(56px, 10vw, 112px) var(--bp-site-pad) clamp(40px, 6vw, 72px);
|
|
@@ -2432,7 +2432,7 @@ select.fld.redir-match {
|
|
|
2432
2432
|
linear-gradient(180deg, var(--bp-paper-2) 0%, var(--bp-paper) 100%);
|
|
2433
2433
|
}
|
|
2434
2434
|
|
|
2435
|
-
.
|
|
2435
|
+
.blog_bp-site-index .blog_site-hero-glow {
|
|
2436
2436
|
position: absolute;
|
|
2437
2437
|
inset: auto -20% -40% -20%;
|
|
2438
2438
|
height: 60%;
|
|
@@ -2441,7 +2441,7 @@ select.fld.redir-match {
|
|
|
2441
2441
|
animation: bp-site-fade 1.2s var(--bp-ease-out) both;
|
|
2442
2442
|
}
|
|
2443
2443
|
|
|
2444
|
-
.
|
|
2444
|
+
.blog_bp-site-index .blog_site-hero-inner {
|
|
2445
2445
|
position: relative;
|
|
2446
2446
|
z-index: 1;
|
|
2447
2447
|
width: 100%;
|
|
@@ -2449,7 +2449,7 @@ select.fld.redir-match {
|
|
|
2449
2449
|
margin: 0 auto;
|
|
2450
2450
|
}
|
|
2451
2451
|
|
|
2452
|
-
.
|
|
2452
|
+
.blog_bp-site-index .blog_site-hero-eyebrow {
|
|
2453
2453
|
margin: 0;
|
|
2454
2454
|
font-family: var(--bp-font-ui);
|
|
2455
2455
|
font-size: 12px;
|
|
@@ -2459,7 +2459,7 @@ select.fld.redir-match {
|
|
|
2459
2459
|
color: var(--bp-accent);
|
|
2460
2460
|
}
|
|
2461
2461
|
|
|
2462
|
-
.
|
|
2462
|
+
.blog_bp-site-index .blog_site-hero-title {
|
|
2463
2463
|
margin: 14px 0 0;
|
|
2464
2464
|
font-family: var(--bp-font-body);
|
|
2465
2465
|
font-size: clamp(36px, 6.5vw, 64px);
|
|
@@ -2470,7 +2470,7 @@ select.fld.redir-match {
|
|
|
2470
2470
|
max-width: 18ch;
|
|
2471
2471
|
}
|
|
2472
2472
|
|
|
2473
|
-
.
|
|
2473
|
+
.blog_bp-site-index .blog_site-hero-desc {
|
|
2474
2474
|
margin: 18px 0 0;
|
|
2475
2475
|
font-family: var(--bp-font-ui);
|
|
2476
2476
|
font-size: clamp(17px, 2.2vw, 20px);
|
|
@@ -2481,7 +2481,7 @@ select.fld.redir-match {
|
|
|
2481
2481
|
|
|
2482
2482
|
/* --- feed bridge -------------------------------------------------------- */
|
|
2483
2483
|
|
|
2484
|
-
.
|
|
2484
|
+
.blog_bp-site-index .blog_site-index-feed {
|
|
2485
2485
|
position: relative;
|
|
2486
2486
|
z-index: 2;
|
|
2487
2487
|
width: 100%;
|
|
@@ -2497,14 +2497,14 @@ select.fld.redir-match {
|
|
|
2497
2497
|
box-shadow: 0 -24px 48px -28px color-mix(in srgb, #000 28%, transparent);
|
|
2498
2498
|
}
|
|
2499
2499
|
|
|
2500
|
-
.
|
|
2500
|
+
.blog_bp-site-index .blog_site-index-bridge {
|
|
2501
2501
|
position: relative;
|
|
2502
2502
|
height: clamp(28px, 4vw, 44px);
|
|
2503
2503
|
overflow: hidden;
|
|
2504
2504
|
pointer-events: none;
|
|
2505
2505
|
}
|
|
2506
2506
|
|
|
2507
|
-
.
|
|
2507
|
+
.blog_bp-site-index .blog_site-index-bridge-glow {
|
|
2508
2508
|
position: absolute;
|
|
2509
2509
|
left: 50%;
|
|
2510
2510
|
top: 0;
|
|
@@ -2520,7 +2520,7 @@ select.fld.redir-match {
|
|
|
2520
2520
|
animation: bp-site-index-bridge-breathe 5.5s ease-in-out infinite;
|
|
2521
2521
|
}
|
|
2522
2522
|
|
|
2523
|
-
.
|
|
2523
|
+
.blog_bp-site-index .blog_site-index-bridge-line {
|
|
2524
2524
|
position: absolute;
|
|
2525
2525
|
left: 50%;
|
|
2526
2526
|
top: 50%;
|
|
@@ -2535,9 +2535,9 @@ select.fld.redir-match {
|
|
|
2535
2535
|
);
|
|
2536
2536
|
}
|
|
2537
2537
|
|
|
2538
|
-
.
|
|
2538
|
+
.blog_bp-site-index .blog_site-index-feed-inner { width: 100%; }
|
|
2539
2539
|
|
|
2540
|
-
.
|
|
2540
|
+
.blog_bp-site-index .blog_site-index-feed-head {
|
|
2541
2541
|
width: 100%;
|
|
2542
2542
|
max-width: var(--bp-site-max);
|
|
2543
2543
|
margin: 0 auto;
|
|
@@ -2547,7 +2547,7 @@ select.fld.redir-match {
|
|
|
2547
2547
|
gap: 16px;
|
|
2548
2548
|
}
|
|
2549
2549
|
|
|
2550
|
-
.
|
|
2550
|
+
.blog_bp-site-index .blog_site-index-feed-eyebrow {
|
|
2551
2551
|
margin: 0;
|
|
2552
2552
|
flex: 0 0 auto;
|
|
2553
2553
|
font-family: var(--bp-font-ui);
|
|
@@ -2558,7 +2558,7 @@ select.fld.redir-match {
|
|
|
2558
2558
|
color: var(--bp-ink-3);
|
|
2559
2559
|
}
|
|
2560
2560
|
|
|
2561
|
-
.
|
|
2561
|
+
.blog_bp-site-index .blog_site-index-feed-rule {
|
|
2562
2562
|
display: block;
|
|
2563
2563
|
flex: 1 1 auto;
|
|
2564
2564
|
height: 1px;
|
|
@@ -2569,19 +2569,19 @@ select.fld.redir-match {
|
|
|
2569
2569
|
);
|
|
2570
2570
|
}
|
|
2571
2571
|
|
|
2572
|
-
.
|
|
2573
|
-
.
|
|
2572
|
+
.blog_bp-site-index .blog_site-page,
|
|
2573
|
+
.blog_bp-site-index .blog_site-index-feed-body {
|
|
2574
2574
|
width: 100%;
|
|
2575
2575
|
max-width: var(--bp-site-max);
|
|
2576
2576
|
margin: 0 auto;
|
|
2577
2577
|
padding: 0 var(--bp-site-pad) clamp(48px, 8vw, 80px);
|
|
2578
2578
|
}
|
|
2579
2579
|
|
|
2580
|
-
.
|
|
2580
|
+
.blog_bp-site-index .blog_site-index-feed-body .blog_cat-bar { margin-top: 0; }
|
|
2581
2581
|
|
|
2582
2582
|
/* --- category bar ------------------------------------------------------- */
|
|
2583
2583
|
|
|
2584
|
-
.
|
|
2584
|
+
.blog_bp-site-index .blog_cat-bar {
|
|
2585
2585
|
display: flex;
|
|
2586
2586
|
gap: 8px;
|
|
2587
2587
|
flex-wrap: wrap;
|
|
@@ -2591,8 +2591,8 @@ select.fld.redir-match {
|
|
|
2591
2591
|
padding-bottom: 4px;
|
|
2592
2592
|
}
|
|
2593
2593
|
|
|
2594
|
-
.
|
|
2595
|
-
.
|
|
2594
|
+
.blog_bp-site-index .blog_cat-bar button,
|
|
2595
|
+
.blog_bp-site-index .blog_cat-bar a {
|
|
2596
2596
|
font: inherit;
|
|
2597
2597
|
color: var(--bp-ink-2);
|
|
2598
2598
|
text-decoration: none;
|
|
@@ -2604,16 +2604,16 @@ select.fld.redir-match {
|
|
|
2604
2604
|
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s var(--bp-ease-out), box-shadow 0.2s ease;
|
|
2605
2605
|
}
|
|
2606
2606
|
|
|
2607
|
-
.
|
|
2608
|
-
.
|
|
2607
|
+
.blog_bp-site-index .blog_cat-bar button:hover,
|
|
2608
|
+
.blog_bp-site-index .blog_cat-bar a:hover {
|
|
2609
2609
|
border-color: color-mix(in srgb, var(--bp-accent) 40%, var(--bp-rule));
|
|
2610
2610
|
color: var(--bp-accent);
|
|
2611
2611
|
transform: translateY(-2px);
|
|
2612
2612
|
box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--bp-accent) 35%, transparent);
|
|
2613
2613
|
}
|
|
2614
2614
|
|
|
2615
|
-
.
|
|
2616
|
-
.
|
|
2615
|
+
.blog_bp-site-index .blog_cat-bar button[aria-current="page"],
|
|
2616
|
+
.blog_bp-site-index .blog_cat-bar a[aria-current="page"] {
|
|
2617
2617
|
background: var(--bp-accent);
|
|
2618
2618
|
border-color: var(--bp-accent);
|
|
2619
2619
|
color: #fff;
|
|
@@ -2622,8 +2622,8 @@ select.fld.redir-match {
|
|
|
2622
2622
|
|
|
2623
2623
|
/* --- cards -------------------------------------------------------------- */
|
|
2624
2624
|
|
|
2625
|
-
.
|
|
2626
|
-
.
|
|
2625
|
+
.blog_bp-site-index .blog_post-grid,
|
|
2626
|
+
.blog_bp-site-index .blog_card-grid {
|
|
2627
2627
|
list-style: none;
|
|
2628
2628
|
margin: 0 0 clamp(32px, 5vw, 48px);
|
|
2629
2629
|
padding: 0;
|
|
@@ -2632,12 +2632,12 @@ select.fld.redir-match {
|
|
|
2632
2632
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
|
|
2633
2633
|
}
|
|
2634
2634
|
|
|
2635
|
-
.
|
|
2635
|
+
.blog_bp-site-index .blog_post-grid-lead {
|
|
2636
2636
|
grid-template-columns: 1fr !important;
|
|
2637
2637
|
margin-bottom: clamp(24px, 4vw, 36px);
|
|
2638
2638
|
}
|
|
2639
2639
|
|
|
2640
|
-
.
|
|
2640
|
+
.blog_bp-site-index .blog_card {
|
|
2641
2641
|
border: 1px solid var(--bp-rule);
|
|
2642
2642
|
border-radius: var(--bp-radius);
|
|
2643
2643
|
background: var(--bp-paper);
|
|
@@ -2648,14 +2648,14 @@ select.fld.redir-match {
|
|
|
2648
2648
|
animation-delay: calc(var(--motion-i, 0) * 50ms);
|
|
2649
2649
|
}
|
|
2650
2650
|
|
|
2651
|
-
.
|
|
2651
|
+
.blog_bp-site-index .blog_card:hover {
|
|
2652
2652
|
box-shadow: var(--bp-shadow-hover);
|
|
2653
2653
|
border-color: color-mix(in srgb, var(--bp-accent) 28%, var(--bp-rule));
|
|
2654
2654
|
transform: translateY(-6px);
|
|
2655
2655
|
}
|
|
2656
2656
|
|
|
2657
|
-
.
|
|
2658
|
-
.
|
|
2657
|
+
.blog_bp-site-index .blog_card > a,
|
|
2658
|
+
.blog_bp-site-index .blog_card > button.blog_card-link {
|
|
2659
2659
|
font: inherit;
|
|
2660
2660
|
text-align: left;
|
|
2661
2661
|
text-decoration: none;
|
|
@@ -2671,13 +2671,13 @@ select.fld.redir-match {
|
|
|
2671
2671
|
cursor: pointer;
|
|
2672
2672
|
}
|
|
2673
2673
|
|
|
2674
|
-
.
|
|
2674
|
+
.blog_bp-site-index .blog_card-img {
|
|
2675
2675
|
display: block;
|
|
2676
2676
|
overflow: hidden;
|
|
2677
2677
|
background: var(--bp-sunk);
|
|
2678
2678
|
}
|
|
2679
2679
|
|
|
2680
|
-
.
|
|
2680
|
+
.blog_bp-site-index .blog_card-img img {
|
|
2681
2681
|
display: block;
|
|
2682
2682
|
width: 100%;
|
|
2683
2683
|
aspect-ratio: 3 / 2;
|
|
@@ -2685,14 +2685,14 @@ select.fld.redir-match {
|
|
|
2685
2685
|
transition: transform 0.55s var(--bp-ease-out);
|
|
2686
2686
|
}
|
|
2687
2687
|
|
|
2688
|
-
.
|
|
2688
|
+
.blog_bp-site-index .blog_card:hover .blog_card-img img { transform: scale(1.06); }
|
|
2689
2689
|
|
|
2690
|
-
.
|
|
2690
|
+
.blog_bp-site-index .blog_card-img-blank {
|
|
2691
2691
|
aspect-ratio: 3 / 2;
|
|
2692
2692
|
background: linear-gradient(135deg, var(--bp-sunk), var(--bp-paper-2));
|
|
2693
2693
|
}
|
|
2694
2694
|
|
|
2695
|
-
.
|
|
2695
|
+
.blog_bp-site-index .blog_card-body {
|
|
2696
2696
|
display: flex;
|
|
2697
2697
|
flex-direction: column;
|
|
2698
2698
|
gap: 8px;
|
|
@@ -2701,7 +2701,7 @@ select.fld.redir-match {
|
|
|
2701
2701
|
flex: 1;
|
|
2702
2702
|
}
|
|
2703
2703
|
|
|
2704
|
-
.
|
|
2704
|
+
.blog_bp-site-index .blog_card-eyebrow {
|
|
2705
2705
|
font-size: 11px;
|
|
2706
2706
|
font-weight: 750;
|
|
2707
2707
|
letter-spacing: 0.1em;
|
|
@@ -2709,7 +2709,7 @@ select.fld.redir-match {
|
|
|
2709
2709
|
color: var(--bp-accent);
|
|
2710
2710
|
}
|
|
2711
2711
|
|
|
2712
|
-
.
|
|
2712
|
+
.blog_bp-site-index .blog_card-title {
|
|
2713
2713
|
font-family: var(--bp-font-body);
|
|
2714
2714
|
font-size: clamp(18px, 2.2vw, 21px);
|
|
2715
2715
|
line-height: 1.28;
|
|
@@ -2718,15 +2718,15 @@ select.fld.redir-match {
|
|
|
2718
2718
|
transition: color 0.2s ease;
|
|
2719
2719
|
}
|
|
2720
2720
|
|
|
2721
|
-
.
|
|
2721
|
+
.blog_bp-site-index .blog_card:hover .blog_card-title { color: var(--bp-accent); }
|
|
2722
2722
|
|
|
2723
|
-
.
|
|
2723
|
+
.blog_bp-site-index .blog_card-excerpt {
|
|
2724
2724
|
font-size: 14.5px;
|
|
2725
2725
|
line-height: 1.6;
|
|
2726
2726
|
color: var(--bp-ink-2);
|
|
2727
2727
|
}
|
|
2728
2728
|
|
|
2729
|
-
.
|
|
2729
|
+
.blog_bp-site-index .blog_card-meta {
|
|
2730
2730
|
font-size: 12.8px;
|
|
2731
2731
|
color: var(--bp-ink-3);
|
|
2732
2732
|
display: flex;
|
|
@@ -2736,42 +2736,42 @@ select.fld.redir-match {
|
|
|
2736
2736
|
padding-top: 4px;
|
|
2737
2737
|
}
|
|
2738
2738
|
|
|
2739
|
-
.
|
|
2740
|
-
.
|
|
2741
|
-
.
|
|
2739
|
+
.blog_bp-site-index .blog_card-lead { border-width: 1px; }
|
|
2740
|
+
.blog_bp-site-index .blog_card-lead > a,
|
|
2741
|
+
.blog_bp-site-index .blog_card-lead > button.blog_card-link {
|
|
2742
2742
|
gap: 0;
|
|
2743
2743
|
flex-direction: column;
|
|
2744
2744
|
}
|
|
2745
2745
|
|
|
2746
2746
|
@media (min-width: 900px) {
|
|
2747
|
-
.
|
|
2748
|
-
.
|
|
2747
|
+
.blog_bp-site-index .blog_card-lead > a,
|
|
2748
|
+
.blog_bp-site-index .blog_card-lead > button.blog_card-link {
|
|
2749
2749
|
flex-direction: row;
|
|
2750
2750
|
align-items: stretch;
|
|
2751
2751
|
}
|
|
2752
|
-
.
|
|
2753
|
-
.
|
|
2754
|
-
.
|
|
2752
|
+
.blog_bp-site-index .blog_card-lead .blog_card-img { flex: 1 1 58%; min-height: 100%; }
|
|
2753
|
+
.blog_bp-site-index .blog_card-lead .blog_card-img img,
|
|
2754
|
+
.blog_bp-site-index .blog_card-lead .blog_card-img-blank {
|
|
2755
2755
|
aspect-ratio: auto;
|
|
2756
2756
|
height: 100%;
|
|
2757
2757
|
min-height: 320px;
|
|
2758
2758
|
}
|
|
2759
|
-
.
|
|
2759
|
+
.blog_bp-site-index .blog_card-lead .blog_card-body {
|
|
2760
2760
|
flex: 1 1 42%;
|
|
2761
2761
|
justify-content: center;
|
|
2762
2762
|
padding: clamp(24px, 4vw, 40px);
|
|
2763
2763
|
gap: 12px;
|
|
2764
2764
|
}
|
|
2765
|
-
.
|
|
2765
|
+
.blog_bp-site-index .blog_card-lead .blog_card-title {
|
|
2766
2766
|
font-size: clamp(28px, 3.8vw, 40px);
|
|
2767
2767
|
line-height: 1.12;
|
|
2768
2768
|
}
|
|
2769
|
-
.
|
|
2769
|
+
.blog_bp-site-index .blog_card-lead .blog_card-excerpt { font-size: 17px; }
|
|
2770
2770
|
}
|
|
2771
2771
|
|
|
2772
2772
|
/* --- pagination / empty / loading --------------------------------------- */
|
|
2773
2773
|
|
|
2774
|
-
.
|
|
2774
|
+
.blog_bp-site-index .blog_pagination {
|
|
2775
2775
|
display: flex;
|
|
2776
2776
|
align-items: center;
|
|
2777
2777
|
justify-content: space-between;
|
|
@@ -2783,7 +2783,7 @@ select.fld.redir-match {
|
|
|
2783
2783
|
margin-top: 8px;
|
|
2784
2784
|
}
|
|
2785
2785
|
|
|
2786
|
-
.
|
|
2786
|
+
.blog_bp-site-index .blog_pagination button {
|
|
2787
2787
|
font: inherit;
|
|
2788
2788
|
text-decoration: none;
|
|
2789
2789
|
padding: 10px 18px;
|
|
@@ -2795,46 +2795,46 @@ select.fld.redir-match {
|
|
|
2795
2795
|
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--bp-ease-out);
|
|
2796
2796
|
}
|
|
2797
2797
|
|
|
2798
|
-
.
|
|
2798
|
+
.blog_bp-site-index .blog_pagination button:hover:not(:disabled) {
|
|
2799
2799
|
border-color: var(--bp-accent);
|
|
2800
2800
|
color: var(--bp-accent);
|
|
2801
2801
|
transform: translateY(-2px);
|
|
2802
2802
|
}
|
|
2803
2803
|
|
|
2804
|
-
.
|
|
2805
|
-
.
|
|
2804
|
+
.blog_bp-site-index .blog_pagination button:disabled,
|
|
2805
|
+
.blog_bp-site-index .blog_pagination [aria-disabled="true"] {
|
|
2806
2806
|
color: var(--bp-ink-3);
|
|
2807
2807
|
opacity: 0.5;
|
|
2808
2808
|
cursor: not-allowed;
|
|
2809
2809
|
}
|
|
2810
2810
|
|
|
2811
|
-
.
|
|
2811
|
+
.blog_bp-site-index .blog_empty {
|
|
2812
2812
|
padding: clamp(48px, 8vw, 80px) 0;
|
|
2813
2813
|
color: var(--bp-ink-3);
|
|
2814
2814
|
font-family: var(--bp-font-ui);
|
|
2815
2815
|
font-size: 17px;
|
|
2816
2816
|
}
|
|
2817
2817
|
|
|
2818
|
-
.
|
|
2818
|
+
.blog_bp-site-index .blog_bp-state {
|
|
2819
2819
|
padding: clamp(48px, 8vw, 80px) var(--bp-site-pad);
|
|
2820
2820
|
font-family: var(--bp-font-ui);
|
|
2821
2821
|
color: var(--bp-ink-3);
|
|
2822
2822
|
text-align: center;
|
|
2823
2823
|
}
|
|
2824
2824
|
|
|
2825
|
-
.
|
|
2825
|
+
.blog_bp-site-index .blog_bp-state--error { color: #b91c1c; }
|
|
2826
2826
|
|
|
2827
2827
|
@media (prefers-reduced-motion: reduce) {
|
|
2828
|
-
.
|
|
2829
|
-
.
|
|
2830
|
-
.
|
|
2831
|
-
.
|
|
2828
|
+
.blog_bp-site-index .blog_site-animate-in > .blog_site-animate-item,
|
|
2829
|
+
.blog_bp-site-index .blog_card,
|
|
2830
|
+
.blog_bp-site-index .blog_site-hero-glow,
|
|
2831
|
+
.blog_bp-site-index .blog_site-index-bridge-glow {
|
|
2832
2832
|
animation: none !important;
|
|
2833
2833
|
opacity: 1;
|
|
2834
2834
|
transform: none;
|
|
2835
2835
|
}
|
|
2836
|
-
.
|
|
2837
|
-
.
|
|
2836
|
+
.blog_bp-site-index .blog_card:hover { transform: none; }
|
|
2837
|
+
.blog_bp-site-index .blog_card:hover .blog_card-img img { transform: none; }
|
|
2838
2838
|
}
|
|
2839
2839
|
|
|
2840
2840
|
/* --- media hero (BlogUploader SiteMediaHero) ----------------------------- */
|
|
@@ -2852,7 +2852,7 @@ select.fld.redir-match {
|
|
|
2852
2852
|
50% { transform: translateX(6px); }
|
|
2853
2853
|
}
|
|
2854
2854
|
|
|
2855
|
-
.
|
|
2855
|
+
.blog_bp-site-index .blog_site-hero-media {
|
|
2856
2856
|
position: relative;
|
|
2857
2857
|
width: 100%;
|
|
2858
2858
|
min-height: clamp(520px, 92vh, 920px);
|
|
@@ -2877,7 +2877,7 @@ select.fld.redir-match {
|
|
|
2877
2877
|
0 16px 40px var(--hero-shadow-deep);
|
|
2878
2878
|
}
|
|
2879
2879
|
|
|
2880
|
-
.
|
|
2880
|
+
.blog_bp-site-index .blog_site-hero-media-bg {
|
|
2881
2881
|
position: absolute;
|
|
2882
2882
|
inset: 0;
|
|
2883
2883
|
z-index: 0;
|
|
@@ -2885,19 +2885,19 @@ select.fld.redir-match {
|
|
|
2885
2885
|
overflow: hidden;
|
|
2886
2886
|
}
|
|
2887
2887
|
|
|
2888
|
-
.
|
|
2888
|
+
.blog_bp-site-index .blog_site-hero-media-slide {
|
|
2889
2889
|
position: absolute;
|
|
2890
2890
|
inset: 0;
|
|
2891
2891
|
opacity: 0;
|
|
2892
2892
|
transition: opacity 0.85s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
|
|
2893
2893
|
pointer-events: none;
|
|
2894
2894
|
}
|
|
2895
|
-
.
|
|
2895
|
+
.blog_bp-site-index .blog_site-hero-media-slide.blog_is-active {
|
|
2896
2896
|
opacity: 1;
|
|
2897
2897
|
z-index: 1;
|
|
2898
2898
|
}
|
|
2899
2899
|
|
|
2900
|
-
.
|
|
2900
|
+
.blog_bp-site-index .blog_site-hero-media-visual {
|
|
2901
2901
|
position: absolute;
|
|
2902
2902
|
inset: 0;
|
|
2903
2903
|
width: 100%;
|
|
@@ -2911,7 +2911,7 @@ select.fld.redir-match {
|
|
|
2911
2911
|
animation: hero-ken-burns 22s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite alternate;
|
|
2912
2912
|
}
|
|
2913
2913
|
|
|
2914
|
-
.
|
|
2914
|
+
.blog_bp-site-index .blog_site-hero-media-scrim {
|
|
2915
2915
|
position: absolute;
|
|
2916
2916
|
inset: 0;
|
|
2917
2917
|
background:
|
|
@@ -2920,7 +2920,7 @@ select.fld.redir-match {
|
|
|
2920
2920
|
animation: hero-scrim-pulse 8s ease-in-out infinite;
|
|
2921
2921
|
}
|
|
2922
2922
|
|
|
2923
|
-
.
|
|
2923
|
+
.blog_bp-site-index .blog_site-hero-media-grain {
|
|
2924
2924
|
position: absolute;
|
|
2925
2925
|
inset: 0;
|
|
2926
2926
|
opacity: 0.06;
|
|
@@ -2929,7 +2929,7 @@ select.fld.redir-match {
|
|
|
2929
2929
|
pointer-events: none;
|
|
2930
2930
|
}
|
|
2931
2931
|
|
|
2932
|
-
.
|
|
2932
|
+
.blog_bp-site-index .blog_site-hero-media-content {
|
|
2933
2933
|
position: relative;
|
|
2934
2934
|
z-index: 2;
|
|
2935
2935
|
width: 100%;
|
|
@@ -2938,18 +2938,18 @@ select.fld.redir-match {
|
|
|
2938
2938
|
padding: clamp(96px, 14vh, 140px) var(--site-pad, var(--bp-site-pad)) clamp(48px, 8vh, 88px);
|
|
2939
2939
|
}
|
|
2940
2940
|
|
|
2941
|
-
.
|
|
2941
|
+
.blog_bp-site-index .blog_site-hero-media-copy {
|
|
2942
2942
|
max-width: min(720px, 92%);
|
|
2943
2943
|
overflow: visible;
|
|
2944
2944
|
}
|
|
2945
|
-
.
|
|
2945
|
+
.blog_bp-site-index .blog_site-hero-media-copy .blog_hero-fade-slide {
|
|
2946
2946
|
overflow: visible;
|
|
2947
2947
|
}
|
|
2948
|
-
.
|
|
2948
|
+
.blog_bp-site-index .blog_site-hero-media-meta-wrap .blog_site-hero-media-meta {
|
|
2949
2949
|
margin-top: 18px;
|
|
2950
2950
|
}
|
|
2951
2951
|
|
|
2952
|
-
.
|
|
2952
|
+
.blog_bp-site-index .blog_site-hero-media-eyebrow {
|
|
2953
2953
|
margin: 0;
|
|
2954
2954
|
font-family: var(--font-ui, var(--bp-font-ui));
|
|
2955
2955
|
font-size: 12px;
|
|
@@ -2960,7 +2960,7 @@ select.fld.redir-match {
|
|
|
2960
2960
|
text-shadow: 0 1px 2px var(--hero-shadow-soft), 0 3px 10px var(--hero-shadow-mid);
|
|
2961
2961
|
}
|
|
2962
2962
|
|
|
2963
|
-
.
|
|
2963
|
+
.blog_bp-site-index .blog_site-hero-media-title {
|
|
2964
2964
|
margin: 16px 0 0;
|
|
2965
2965
|
font-family: var(--font-body, var(--bp-font-body));
|
|
2966
2966
|
font-size: clamp(36px, 6.8vw, 72px);
|
|
@@ -2973,7 +2973,7 @@ select.fld.redir-match {
|
|
|
2973
2973
|
text-shadow: var(--hero-text-depth-lg);
|
|
2974
2974
|
}
|
|
2975
2975
|
|
|
2976
|
-
.
|
|
2976
|
+
.blog_bp-site-index .blog_site-hero-media-desc {
|
|
2977
2977
|
margin: 20px 0 0;
|
|
2978
2978
|
font-family: var(--font-ui, var(--bp-font-ui));
|
|
2979
2979
|
font-size: clamp(16px, 2.1vw, 20px);
|
|
@@ -2983,7 +2983,7 @@ select.fld.redir-match {
|
|
|
2983
2983
|
text-shadow: var(--hero-text-depth);
|
|
2984
2984
|
}
|
|
2985
2985
|
|
|
2986
|
-
.
|
|
2986
|
+
.blog_bp-site-index .blog_site-hero-media-meta {
|
|
2987
2987
|
display: flex;
|
|
2988
2988
|
gap: 14px;
|
|
2989
2989
|
margin-top: 18px;
|
|
@@ -2996,17 +2996,17 @@ select.fld.redir-match {
|
|
|
2996
2996
|
transform-origin: left center;
|
|
2997
2997
|
text-shadow: 0 1px 2px var(--hero-shadow-soft), 0 3px 8px var(--hero-shadow-mid);
|
|
2998
2998
|
}
|
|
2999
|
-
.
|
|
2999
|
+
.blog_bp-site-index .blog_site-hero-media-meta time::after {
|
|
3000
3000
|
content: "·";
|
|
3001
3001
|
margin: 0 10px;
|
|
3002
3002
|
opacity: 0.5;
|
|
3003
3003
|
}
|
|
3004
|
-
.
|
|
3005
|
-
.
|
|
3004
|
+
.blog_bp-site-index .blog_site-hero-media-reading:only-child,
|
|
3005
|
+
.blog_bp-site-index .blog_site-hero-media-meta time:only-child::after {
|
|
3006
3006
|
display: none;
|
|
3007
3007
|
}
|
|
3008
3008
|
|
|
3009
|
-
.
|
|
3009
|
+
.blog_bp-site-index .blog_site-hero-media-cta {
|
|
3010
3010
|
--hero-cta-text: #ffffff;
|
|
3011
3011
|
--hero-cta-depth: var(--hero-shadow-gray);
|
|
3012
3012
|
display: inline-flex;
|
|
@@ -3044,17 +3044,17 @@ select.fld.redir-match {
|
|
|
3044
3044
|
filter 0.22s ease,
|
|
3045
3045
|
border-color 0.22s ease;
|
|
3046
3046
|
}
|
|
3047
|
-
.
|
|
3047
|
+
.blog_bp-site-index .blog_site-hero-media-cta:hover {
|
|
3048
3048
|
color: var(--hero-cta-text);
|
|
3049
3049
|
filter: brightness(1.07);
|
|
3050
3050
|
transform: translateY(-2px);
|
|
3051
3051
|
}
|
|
3052
|
-
.
|
|
3052
|
+
.blog_bp-site-index .blog_site-hero-media-cta-arrow {
|
|
3053
3053
|
display: inline-flex;
|
|
3054
3054
|
animation: hero-loop-arrow 2.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
|
|
3055
3055
|
}
|
|
3056
3056
|
|
|
3057
|
-
.
|
|
3057
|
+
.blog_bp-site-index .blog_site-hero-media-edge {
|
|
3058
3058
|
position: absolute;
|
|
3059
3059
|
left: 0;
|
|
3060
3060
|
right: 0;
|
|
@@ -3064,14 +3064,14 @@ select.fld.redir-match {
|
|
|
3064
3064
|
z-index: 3;
|
|
3065
3065
|
}
|
|
3066
3066
|
|
|
3067
|
-
.
|
|
3067
|
+
.blog_bp-site-index .blog_site-hero-media-dots {
|
|
3068
3068
|
display: flex;
|
|
3069
3069
|
flex-wrap: wrap;
|
|
3070
3070
|
gap: 8px;
|
|
3071
3071
|
margin-top: 28px;
|
|
3072
3072
|
max-width: min(720px, 92%);
|
|
3073
3073
|
}
|
|
3074
|
-
.
|
|
3074
|
+
.blog_bp-site-index .blog_site-hero-media-dot {
|
|
3075
3075
|
width: 8px;
|
|
3076
3076
|
height: 8px;
|
|
3077
3077
|
padding: 0;
|
|
@@ -3081,27 +3081,27 @@ select.fld.redir-match {
|
|
|
3081
3081
|
background: color-mix(in srgb, #fff 35%, transparent);
|
|
3082
3082
|
transition: width 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), background 0.28s ease;
|
|
3083
3083
|
}
|
|
3084
|
-
.
|
|
3084
|
+
.blog_bp-site-index .blog_site-hero-media-dot.blog_is-active {
|
|
3085
3085
|
width: 28px;
|
|
3086
3086
|
background: #fff;
|
|
3087
3087
|
}
|
|
3088
3088
|
|
|
3089
3089
|
@media (max-width: 640px) {
|
|
3090
|
-
.
|
|
3090
|
+
.blog_bp-site-index .blog_site-hero-media {
|
|
3091
3091
|
min-height: clamp(480px, 88vh, 720px);
|
|
3092
3092
|
}
|
|
3093
|
-
.
|
|
3094
|
-
.
|
|
3093
|
+
.blog_bp-site-index .blog_site-hero-media-copy { max-width: 100%; }
|
|
3094
|
+
.blog_bp-site-index .blog_site-hero-media-title { max-width: none; }
|
|
3095
3095
|
}
|
|
3096
3096
|
|
|
3097
3097
|
@media (prefers-reduced-motion: reduce) {
|
|
3098
|
-
.
|
|
3099
|
-
.
|
|
3100
|
-
.
|
|
3098
|
+
.blog_bp-site-index .blog_site-hero-media-visual,
|
|
3099
|
+
.blog_bp-site-index .blog_site-hero-media-scrim,
|
|
3100
|
+
.blog_bp-site-index .blog_site-hero-media-cta-arrow {
|
|
3101
3101
|
animation: none !important;
|
|
3102
3102
|
}
|
|
3103
|
-
.
|
|
3104
|
-
.
|
|
3103
|
+
.blog_bp-site-index .blog_site-hero-media-slide { transition: none; }
|
|
3104
|
+
.blog_bp-site-index .blog_site-hero-media .blog_hero-fade-slide {
|
|
3105
3105
|
opacity: 1;
|
|
3106
3106
|
transform: none;
|
|
3107
3107
|
animation: none !important;
|