| @@ -1,614 +1,128 @@ | ||
| 1 | -/* ═══════════════════════════════════════════════════════════════ | |
| 2 | - * Blockenberg – Block Manager Dashboard | |
| 3 | - * WordPress.com-inspired modern admin UI | |
| 4 | - * ═══════════════════════════════════════════════════════════════ */ | |
| 5 | - | |
| 6 | -/* ── Reset & base ───────────────────────────────── */ | |
| 7 | -#bkbg-dashboard *, | |
| 8 | -#bkbg-dashboard *::before, | |
| 9 | -#bkbg-dashboard *::after { | |
| 10 | - box-sizing: border-box; | |
| 1 | +/* Block Manager — shared Blockenberg website palette, scoped to its admin screen. */ | |
| 2 | +body.toplevel_page_blockenberg, | |
| 3 | +body.toplevel_page_blockenberg #wpcontent, | |
| 4 | +body.toplevel_page_blockenberg #wpbody {background:#f8f8f5} | |
| 5 | +#bkbg-dashboard { | |
| 6 | + --bkbg-ink:#232420;--bkbg-muted:#70716a;--bkbg-line:#ddded6;--bkbg-paper:#f8f8f5;--bkbg-soft:#edeee5;--bkbg-accent:#e7f395; | |
| 7 | + max-width:1840px;margin:26px 32px 48px 16px;color:var(--bkbg-ink); | |
| 8 | + font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased; | |
| 11 | 9 | } |
| 12 | - | |
| 13 | -.bkbg-dashboard { | |
| 14 | - --bkbg-primary: #3858e9; | |
| 15 | - --bkbg-primary-hover: #1d35b4; | |
| 16 | - --bkbg-primary-light: #eef1fd; | |
| 17 | - --bkbg-success: #00a32a; | |
| 18 | - --bkbg-success-light: #edfaef; | |
| 19 | - --bkbg-danger: #d63638; | |
| 20 | - --bkbg-danger-light: #fcecec; | |
| 21 | - --bkbg-text: #1e1e1e; | |
| 22 | - --bkbg-text-secondary: #646970; | |
| 23 | - --bkbg-border: #e0e0e0; | |
| 24 | - --bkbg-bg: #f0f0f1; | |
| 25 | - --bkbg-card-bg: #fff; | |
| 26 | - --bkbg-radius: 12px; | |
| 27 | - --bkbg-radius-sm: 8px; | |
| 28 | - --bkbg-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); | |
| 29 | - --bkbg-shadow-hover: 0 4px 12px rgba(0, 0, 0, .08); | |
| 30 | - --bkbg-transition: .2s cubic-bezier(.4, 0, .2, 1); | |
| 31 | - | |
| 32 | - margin: 0 0 0 -20px; | |
| 33 | - padding: 0; | |
| 34 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 35 | - background: var(--bkbg-bg); | |
| 36 | - color: var(--bkbg-text); | |
| 37 | - min-height: 100vh; | |
| 10 | +#bkbg-dashboard *,#bkbg-dashboard *::before,#bkbg-dashboard *::after {box-sizing:border-box} | |
| 11 | +#bkbg-dashboard :is(button,input,a):focus-visible {outline:2px solid #626a40;outline-offset:3px;box-shadow:none} | |
| 12 | +#bkbg-dashboard button,#bkbg-dashboard input {font-family:inherit} | |
| 13 | +#bkbg-dashboard a {color:inherit;text-decoration:none} | |
| 14 | +#bkbg-dashboard .bkbg-header {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:26px 28px;border-radius:14px;background:#242424;color:#fff} | |
| 15 | +#bkbg-dashboard .bkbg-header__left {min-width:0} | |
| 16 | +#bkbg-dashboard .bkbg-header__brand {display:flex;align-items:center;gap:9px;margin-bottom:22px;font-size:17px;font-weight:550;letter-spacing:-.5px;color:#e9e9e4} | |
| 17 | +#bkbg-dashboard .bkbg-header__brand svg {flex:none} | |
| 18 | +#bkbg-dashboard .bkbg-header h1 {margin:0;padding:0;color:#fff;font-size:32px;line-height:1.2;font-weight:550;letter-spacing:-1px} | |
| 19 | +#bkbg-dashboard .bkbg-header__subtitle {margin:9px 0 0;color:#b8b8b2;font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums} | |
| 20 | +#bkbg-dashboard .bkbg-header__right {display:flex;flex-direction:column;align-items:flex-end;gap:31px;min-width:0} | |
| 21 | +#bkbg-dashboard .bkbg-header__links {display:flex;align-items:center;gap:23px;flex-wrap:wrap;font-size:11px;line-height:1.6;color:#c6c6c0} | |
| 22 | +#bkbg-dashboard .bkbg-header__links a:hover {color:#fff} | |
| 23 | +#bkbg-dashboard .bkbg-header__controls {display:flex;align-items:center;gap:10px;max-width:100%} | |
| 24 | +#bkbg-dashboard .bkbg-header :is(button,a,input):focus-visible {outline-color:#e7f395} | |
| 25 | +#bkbg-dashboard .bkbg-search-wrap {display:flex;align-items:center;position:relative;min-width:0} | |
| 26 | +#bkbg-dashboard .bkbg-search-wrap svg {position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#aeaea8;pointer-events:none} | |
| 27 | +#bkbg-dashboard .bkbg-search {width:270px;max-width:100%;min-width:0;height:42px;margin:0;padding:9px 12px 9px 39px;border:1px solid #53534d;border-radius:8px;background:#30302d;color:#fff;font-size:12px;line-height:1.5;box-shadow:none;transition:border-color .15s} | |
| 28 | +#bkbg-dashboard .bkbg-search::placeholder {color:#b8b8b2} | |
| 29 | +#bkbg-dashboard .bkbg-search:focus {border-color:#b5bd91;box-shadow:none} | |
| 30 | +#bkbg-dashboard .bkbg-btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 13px;border:1px solid var(--bkbg-line);border-radius:8px;background:transparent;color:var(--bkbg-ink);font-size:11px;font-weight:500;line-height:1.5;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s} | |
| 31 | +#bkbg-dashboard .bkbg-btn .dashicons {font-size:16px;width:16px;height:16px} | |
| 32 | +#bkbg-dashboard .bkbg-btn:hover {background:#edeee5;border-color:#c6c9b9} | |
| 33 | +#bkbg-dashboard .bkbg-btn--primary {min-height:42px;padding-inline:17px;border-color:var(--bkbg-accent);background:var(--bkbg-accent);color:#232420} | |
| 34 | +#bkbg-dashboard .bkbg-btn--primary:hover {border-color:#d9e687;background:#d9e687} | |
| 35 | +#bkbg-dashboard .bkbg-btn--saving {opacity:.65;pointer-events:none} | |
| 36 | +#bkbg-dashboard .bkbg-btn--unsaved::after {content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:3px} | |
| 37 | +#bkbg-dashboard .bkbg-btn--danger {color:#8f443b} | |
| 38 | +#bkbg-dashboard .bkbg-btn--danger:hover {border-color:#d9b9b0;background:#f6ede8} | |
| 39 | +#bkbg-dashboard .bkbg-workspace {display:grid;grid-template-columns:218px minmax(0,1fr);align-items:start;gap:30px;margin-top:30px} | |
| 40 | +#bkbg-dashboard .bkbg-toolbar {position:sticky;top:52px;padding:0 20px 18px 0;border-right:1px solid var(--bkbg-line)} | |
| 41 | +#bkbg-dashboard .bkbg-toolbar__label {margin:0 0 14px 9px;color:var(--bkbg-muted);font-size:10px;line-height:1.6;font-weight:550;letter-spacing:.7px;text-transform:uppercase} | |
| 42 | +#bkbg-dashboard .bkbg-toolbar__tabs {display:flex;flex-direction:column;gap:3px} | |
| 43 | +#bkbg-dashboard .bkbg-tab {display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:8px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:#66685e;font-size:11px;font-weight:450;line-height:1.5;text-align:left;cursor:pointer;transition:background .15s,color .15s} | |
| 44 | +#bkbg-dashboard .bkbg-tab .dashicons {flex:none;width:14px;height:14px;font-size:14px;opacity:.7} | |
| 45 | +#bkbg-dashboard .bkbg-tab:hover {background:#eeefe7;color:var(--bkbg-ink)} | |
| 46 | +#bkbg-dashboard .bkbg-tab--active,#bkbg-dashboard .bkbg-tab--active:hover {border-color:#d9dcd0;background:#edeee5;color:#232420;font-weight:550} | |
| 47 | +#bkbg-dashboard .bkbg-tab__count {margin-left:auto;flex:none;color:#85877a;font-size:10px;font-weight:450;font-variant-numeric:tabular-nums} | |
| 48 | +#bkbg-dashboard .bkbg-tab--active .bkbg-tab__count {color:#60664e} | |
| 49 | +#bkbg-dashboard .bkbg-toolbar__actions {display:flex;gap:7px;margin-top:22px;padding-top:18px;border-top:1px solid var(--bkbg-line)} | |
| 50 | +#bkbg-dashboard .bkbg-toolbar__actions .bkbg-btn {flex:1;min-width:0;padding-inline:8px;font-size:10px} | |
| 51 | +#bkbg-dashboard .bkbg-workspace__content {min-width:0} | |
| 52 | +#bkbg-dashboard .bkbg-category-section {margin-bottom:34px} | |
| 53 | +#bkbg-dashboard .bkbg-category-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:0 0 15px;border-bottom:1px solid var(--bkbg-line)} | |
| 54 | +#bkbg-dashboard .bkbg-category-title {display:flex;align-items:center;gap:8px;margin:0;color:#33362b;font-size:15px;font-weight:550;letter-spacing:-.2px;line-height:1.5} | |
| 55 | +#bkbg-dashboard .bkbg-category-title .dashicons {width:17px;height:17px;font-size:17px;color:#777e64} | |
| 56 | +#bkbg-dashboard .bkbg-category-count {margin-left:3px;color:#85877a;font-size:11px;font-weight:450;font-variant-numeric:tabular-nums} | |
| 57 | +#bkbg-dashboard .bkbg-category-actions {display:flex;align-items:center;flex:none;gap:2px} | |
| 58 | +#bkbg-dashboard .bkbg-cat-toggle {padding:5px 7px;border:0;border-radius:6px;background:transparent;color:#777b6c;font-size:10px;font-weight:450;line-height:1.5;cursor:pointer} | |
| 59 | +#bkbg-dashboard .bkbg-cat-toggle:hover {background:#edeee5;color:#33362b} | |
| 60 | +#bkbg-dashboard .bkbg-cat-toggle[data-action=disable]:hover {background:#f6ede8;color:#8f443b} | |
| 61 | +#bkbg-dashboard .bkbg-cat-sep {color:#c9ccbf;font-size:10px} | |
| 62 | +#bkbg-dashboard .bkbg-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} | |
| 63 | +#bkbg-dashboard .bkbg-card {display:flex;align-items:center;gap:11px;min-width:0;min-height:76px;padding:16px 14px;border:1px solid var(--bkbg-line);border-radius:11px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s} | |
| 64 | +#bkbg-dashboard .bkbg-card:hover {border-color:#bfc5af;background:#fdfefa} | |
| 65 | +#bkbg-dashboard .bkbg-card--disabled {background:#f1f2eb;border-color:#e1e3d8} | |
| 66 | +#bkbg-dashboard .bkbg-card--disabled .bkbg-card__icon {background:#e7e9df;color:#919585} | |
| 67 | +#bkbg-dashboard .bkbg-card--disabled .bkbg-card__title {color:#777b6c} | |
| 68 | +#bkbg-dashboard .bkbg-card--hidden {display:none!important} | |
| 69 | +#bkbg-dashboard .bkbg-card__icon {display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #e6e8de;border-radius:8px;background:#f2f4ea;color:#697353} | |
| 70 | +#bkbg-dashboard .bkbg-card__icon .dashicons {width:17px;height:17px;font-size:17px} | |
| 71 | +#bkbg-dashboard .bkbg-card__info {flex:1;min-width:0} | |
| 72 | +#bkbg-dashboard .bkbg-card__title {display:block;color:#34362f;font-size:12px;font-weight:500;line-height:1.5;overflow-wrap:anywhere} | |
| 73 | +#bkbg-dashboard .bkbg-toggle {position:relative;display:inline-block;flex:none;width:34px;height:20px;cursor:pointer} | |
| 74 | +#bkbg-dashboard .bkbg-toggle__input {position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0;padding:0;border:0} | |
| 75 | +#bkbg-dashboard .bkbg-toggle__slider {position:absolute;inset:0;background:#cbd0c0;border-radius:20px;transition:background .15s} | |
| 76 | +#bkbg-dashboard .bkbg-toggle__slider::before {content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform .15s} | |
| 77 | +#bkbg-dashboard .bkbg-toggle__input:checked + .bkbg-toggle__slider {background:#687653} | |
| 78 | +#bkbg-dashboard .bkbg-toggle__input:checked + .bkbg-toggle__slider::before {transform:translateX(14px)} | |
| 79 | +#bkbg-dashboard .bkbg-toggle__input:focus-visible + .bkbg-toggle__slider {outline:2px solid #626a40;outline-offset:3px} | |
| 80 | +#bkbg-dashboard .bkbg-toast {position:fixed;bottom:24px;right:24px;z-index:9999;max-width:calc(100vw - 32px);padding:13px 19px;border:1px solid #ffffff22;border-radius:9px;background:#232420;color:#fff;font-size:12px;line-height:1.5;font-weight:500;box-shadow:0 12px 32px #23242020;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .15s,transform .15s} | |
| 81 | +#bkbg-dashboard .bkbg-toast--visible {opacity:1;transform:none;pointer-events:auto} | |
| 82 | +#bkbg-dashboard .bkbg-toast--success {background:#4b5a3d} | |
| 83 | +#bkbg-dashboard .bkbg-toast--error {background:#8f443b} | |
| 84 | +#bkbg-dashboard .bkbg-empty {padding:60px 24px;border:1px solid var(--bkbg-line);border-radius:14px;background:#fff;text-align:center;color:var(--bkbg-muted)} | |
| 85 | +#bkbg-dashboard .bkbg-empty .dashicons {width:30px;height:30px;font-size:30px;color:#9ca28b} | |
| 86 | +#bkbg-dashboard .bkbg-empty p {margin:14px 0 0;font-size:13px;line-height:1.7} | |
| 87 | +body.toplevel_page_blockenberg #adminmenu li.wp-has-current-submenu>a.wp-has-current-submenu {background:#383838} | |
| 88 | +@media(max-width:1100px) { | |
| 89 | + #bkbg-dashboard .bkbg-header {align-items:flex-start;flex-direction:column;gap:22px} | |
| 90 | + #bkbg-dashboard .bkbg-header__right {width:100%;flex-direction:row;align-items:center;justify-content:space-between;gap:20px} | |
| 91 | + #bkbg-dashboard .bkbg-search {width:230px} | |
| 92 | + #bkbg-dashboard .bkbg-workspace {grid-template-columns:204px minmax(0,1fr);gap:22px} | |
| 93 | + #bkbg-dashboard .bkbg-toolbar {padding-right:14px} | |
| 94 | + #bkbg-dashboard .bkbg-cards {grid-template-columns:repeat(auto-fill,minmax(195px,1fr))} | |
| 38 | 95 | } |
| 39 | - | |
| 40 | -/* ── Header ─────────────────────────────────────── */ | |
| 41 | -.bkbg-header { | |
| 42 | - display: flex; | |
| 43 | - align-items: center; | |
| 44 | - justify-content: space-between; | |
| 45 | - gap: 24px; | |
| 46 | - padding: 20px 32px; | |
| 47 | - background: var(--bkbg-card-bg); | |
| 48 | - border-bottom: 1px solid var(--bkbg-border); | |
| 49 | - position: sticky; | |
| 50 | - top: 32px; /* below WP admin bar */ | |
| 51 | - z-index: 100; | |
| 52 | - flex-wrap: wrap; | |
| 96 | +@media(max-width:800px) { | |
| 97 | + #bkbg-dashboard {margin:22px 20px 40px 8px} | |
| 98 | + #bkbg-dashboard .bkbg-workspace {display:block;margin-top:24px} | |
| 99 | + #bkbg-dashboard .bkbg-toolbar {position:static;padding:0 0 20px;margin-bottom:24px;border-right:0;border-bottom:1px solid var(--bkbg-line)} | |
| 100 | + #bkbg-dashboard .bkbg-toolbar__tabs {display:flex;flex-direction:row;overflow-x:auto;padding:3px 3px 8px;gap:5px;scrollbar-width:thin} | |
| 101 | + #bkbg-dashboard .bkbg-tab {flex:none;width:auto;white-space:nowrap;min-height:42px} | |
| 102 | + #bkbg-dashboard .bkbg-tab__count {margin-left:5px} | |
| 103 | + #bkbg-dashboard .bkbg-toolbar__actions {justify-content:flex-end;margin-top:10px;padding-top:0;border:0} | |
| 104 | + #bkbg-dashboard .bkbg-toolbar__actions .bkbg-btn {flex:none;min-height:40px;padding-inline:14px} | |
| 105 | + #bkbg-dashboard .bkbg-header__right {flex-direction:column;align-items:flex-start;gap:18px} | |
| 106 | + #bkbg-dashboard .bkbg-header__controls {width:100%} | |
| 107 | + #bkbg-dashboard .bkbg-search-wrap {flex:1} | |
| 108 | + #bkbg-dashboard .bkbg-search {width:100%} | |
| 109 | + #bkbg-dashboard .bkbg-category-header {align-items:flex-start;flex-wrap:wrap} | |
| 53 | 110 | } |
| 54 | - | |
| 55 | -.bkbg-header__left { | |
| 56 | - display: flex; | |
| 57 | - align-items: center; | |
| 58 | - gap: 16px; | |
| 111 | +@media(max-width:520px) { | |
| 112 | + #bkbg-dashboard {margin:18px 14px 36px 2px} | |
| 113 | + #bkbg-dashboard .bkbg-header {padding:22px 18px;gap:20px} | |
| 114 | + #bkbg-dashboard .bkbg-header h1 {font-size:29px} | |
| 115 | + #bkbg-dashboard .bkbg-header__brand {font-size:15px;margin-bottom:18px} | |
| 116 | + #bkbg-dashboard .bkbg-header__links {gap:20px;font-size:11px} | |
| 117 | + #bkbg-dashboard .bkbg-header__controls {flex-wrap:wrap;gap:12px} | |
| 118 | + #bkbg-dashboard .bkbg-search-wrap {flex:1 1 100%} | |
| 119 | + #bkbg-dashboard .bkbg-search {height:44px;font-size:13px} | |
| 120 | + #bkbg-dashboard .bkbg-header__controls .bkbg-btn {min-height:44px;padding-inline:16px} | |
| 121 | + #bkbg-dashboard .bkbg-cards {grid-template-columns:1fr} | |
| 122 | + #bkbg-dashboard .bkbg-card {min-height:76px;padding:16px} | |
| 123 | + #bkbg-dashboard .bkbg-card__title {font-size:13px} | |
| 124 | + #bkbg-dashboard .bkbg-category-title {font-size:15px} | |
| 125 | + #bkbg-dashboard .bkbg-cat-toggle {min-height:40px;padding-inline:10px;font-size:11px} | |
| 126 | + #bkbg-dashboard .bkbg-toast {bottom:16px;right:16px} | |
| 59 | 127 | } |
| 60 | - | |
| 61 | -.bkbg-header__logo { | |
| 62 | - width: 48px; | |
| 63 | - height: 48px; | |
| 64 | - border-radius: var(--bkbg-radius-sm); | |
| 65 | - background: var(--bkbg-primary); | |
| 66 | - display: flex; | |
| 67 | - align-items: center; | |
| 68 | - justify-content: center; | |
| 69 | - color: #fff; | |
| 70 | - flex-shrink: 0; | |
| 71 | -} | |
| 72 | - | |
| 73 | -.bkbg-header__logo .dashicons { | |
| 74 | - font-size: 24px; | |
| 75 | - width: 24px; | |
| 76 | - height: 24px; | |
| 77 | -} | |
| 78 | - | |
| 79 | -.bkbg-header__text h1 { | |
| 80 | - margin: 0; | |
| 81 | - padding: 0; | |
| 82 | - font-size: 22px; | |
| 83 | - font-weight: 700; | |
| 84 | - letter-spacing: -.3px; | |
| 85 | - color: var(--bkbg-text); | |
| 86 | - line-height: 1.3; | |
| 87 | -} | |
| 88 | - | |
| 89 | -.bkbg-header__subtitle { | |
| 90 | - margin: 2px 0 0; | |
| 91 | - font-size: 13px; | |
| 92 | - color: var(--bkbg-text-secondary); | |
| 93 | - line-height: 1.4; | |
| 94 | -} | |
| 95 | - | |
| 96 | -.bkbg-header__right { | |
| 97 | - display: flex; | |
| 98 | - align-items: center; | |
| 99 | - gap: 12px; | |
| 100 | - flex-wrap: wrap; | |
| 101 | -} | |
| 102 | - | |
| 103 | -/* ── Search ─────────────────────────────────────── */ | |
| 104 | -.bkbg-search-wrap { | |
| 105 | - position: relative; | |
| 106 | - display: flex; | |
| 107 | - align-items: center; | |
| 108 | -} | |
| 109 | - | |
| 110 | -.bkbg-search-wrap .dashicons { | |
| 111 | - position: absolute; | |
| 112 | - left: 12px; | |
| 113 | - top: 50%; | |
| 114 | - transform: translateY(-50%); | |
| 115 | - color: var(--bkbg-text-secondary); | |
| 116 | - font-size: 20px; | |
| 117 | - width: 20px; | |
| 118 | - height: 20px; | |
| 119 | - line-height: 20px; | |
| 120 | - pointer-events: none; | |
| 121 | -} | |
| 122 | - | |
| 123 | -.bkbg-search { | |
| 124 | - min-width: 260px; | |
| 125 | - height: 40px; | |
| 126 | - padding: 0 16px 0 40px; | |
| 127 | - border: 1px solid var(--bkbg-border); | |
| 128 | - border-radius: 20px; | |
| 129 | - font-size: 13px; | |
| 130 | - background: var(--bkbg-bg); | |
| 131 | - color: var(--bkbg-text); | |
| 132 | - transition: border var(--bkbg-transition), box-shadow var(--bkbg-transition); | |
| 133 | - outline: none; | |
| 134 | -} | |
| 135 | - | |
| 136 | -.bkbg-search:focus { | |
| 137 | - border-color: var(--bkbg-primary); | |
| 138 | - box-shadow: 0 0 0 2px rgba(56, 88, 233, .15); | |
| 139 | - background: #fff; | |
| 140 | -} | |
| 141 | - | |
| 142 | -/* ── Buttons ────────────────────────────────────── */ | |
| 143 | -.bkbg-btn { | |
| 144 | - display: inline-flex; | |
| 145 | - align-items: center; | |
| 146 | - gap: 6px; | |
| 147 | - height: 40px; | |
| 148 | - padding: 0 20px; | |
| 149 | - font-size: 13px; | |
| 150 | - font-weight: 600; | |
| 151 | - border-radius: 8px; | |
| 152 | - border: none; | |
| 153 | - cursor: pointer; | |
| 154 | - transition: all var(--bkbg-transition); | |
| 155 | - white-space: nowrap; | |
| 156 | - line-height: 1; | |
| 157 | -} | |
| 158 | - | |
| 159 | -.bkbg-btn .dashicons { | |
| 160 | - font-size: 16px; | |
| 161 | - width: 16px; | |
| 162 | - height: 16px; | |
| 163 | -} | |
| 164 | - | |
| 165 | -.bkbg-btn--primary { | |
| 166 | - background: var(--bkbg-primary); | |
| 167 | - color: #fff; | |
| 168 | -} | |
| 169 | - | |
| 170 | -.bkbg-btn--primary:hover { | |
| 171 | - background: var(--bkbg-primary-hover); | |
| 172 | - transform: translateY(-1px); | |
| 173 | - box-shadow: 0 4px 12px rgba(56, 88, 233, .25); | |
| 174 | -} | |
| 175 | - | |
| 176 | -.bkbg-btn--primary:active { | |
| 177 | - transform: translateY(0); | |
| 178 | -} | |
| 179 | - | |
| 180 | -.bkbg-btn--primary.bkbg-btn--saving { | |
| 181 | - opacity: .7; | |
| 182 | - pointer-events: none; | |
| 183 | -} | |
| 184 | - | |
| 185 | -.bkbg-btn--ghost { | |
| 186 | - background: transparent; | |
| 187 | - color: var(--bkbg-primary); | |
| 188 | - border: 1px solid var(--bkbg-border); | |
| 189 | - height: 32px; | |
| 190 | - padding: 0 14px; | |
| 191 | - font-size: 12px; | |
| 192 | - font-weight: 500; | |
| 193 | - border-radius: 6px; | |
| 194 | -} | |
| 195 | - | |
| 196 | -.bkbg-btn--ghost:hover { | |
| 197 | - border-color: var(--bkbg-primary); | |
| 198 | - background: var(--bkbg-primary-light); | |
| 199 | -} | |
| 200 | - | |
| 201 | -.bkbg-btn--danger { | |
| 202 | - color: var(--bkbg-danger); | |
| 203 | -} | |
| 204 | - | |
| 205 | -.bkbg-btn--danger:hover { | |
| 206 | - border-color: var(--bkbg-danger); | |
| 207 | - background: var(--bkbg-danger-light); | |
| 208 | -} | |
| 209 | - | |
| 210 | -/* ── Toolbar / Tabs ─────────────────────────────── */ | |
| 211 | -.bkbg-toolbar { | |
| 212 | - display: flex; | |
| 213 | - align-items: center; | |
| 214 | - justify-content: space-between; | |
| 215 | - gap: 16px; | |
| 216 | - padding: 12px 32px; | |
| 217 | - background: var(--bkbg-card-bg); | |
| 218 | - border-bottom: 1px solid var(--bkbg-border); | |
| 219 | - overflow-x: auto; | |
| 220 | - flex-wrap: wrap; | |
| 221 | -} | |
| 222 | - | |
| 223 | -.bkbg-toolbar__tabs { | |
| 224 | - display: flex; | |
| 225 | - gap: 4px; | |
| 226 | - flex-wrap: wrap; | |
| 227 | -} | |
| 228 | - | |
| 229 | -.bkbg-toolbar__actions { | |
| 230 | - display: flex; | |
| 231 | - gap: 8px; | |
| 232 | - flex-shrink: 0; | |
| 233 | -} | |
| 234 | - | |
| 235 | -.bkbg-tab { | |
| 236 | - display: inline-flex; | |
| 237 | - align-items: center; | |
| 238 | - gap: 6px; | |
| 239 | - padding: 6px 14px; | |
| 240 | - border: none; | |
| 241 | - background: transparent; | |
| 242 | - color: var(--bkbg-text-secondary); | |
| 243 | - font-size: 13px; | |
| 244 | - font-weight: 500; | |
| 245 | - border-radius: 20px; | |
| 246 | - cursor: pointer; | |
| 247 | - transition: all var(--bkbg-transition); | |
| 248 | - white-space: nowrap; | |
| 249 | - line-height: 1.4; | |
| 250 | -} | |
| 251 | - | |
| 252 | -.bkbg-tab .dashicons { | |
| 253 | - font-size: 14px; | |
| 254 | - width: 14px; | |
| 255 | - height: 14px; | |
| 256 | -} | |
| 257 | - | |
| 258 | -.bkbg-tab:hover { | |
| 259 | - background: var(--bkbg-primary-light); | |
| 260 | - color: var(--bkbg-primary); | |
| 261 | -} | |
| 262 | - | |
| 263 | -.bkbg-tab--active { | |
| 264 | - background: var(--bkbg-primary); | |
| 265 | - color: #fff; | |
| 266 | -} | |
| 267 | - | |
| 268 | -.bkbg-tab--active:hover { | |
| 269 | - background: var(--bkbg-primary-hover); | |
| 270 | - color: #fff; | |
| 271 | -} | |
| 272 | - | |
| 273 | -.bkbg-tab__count { | |
| 274 | - display: inline-flex; | |
| 275 | - align-items: center; | |
| 276 | - justify-content: center; | |
| 277 | - min-width: 22px; | |
| 278 | - height: 18px; | |
| 279 | - padding: 0 6px; | |
| 280 | - border-radius: 9px; | |
| 281 | - font-size: 11px; | |
| 282 | - font-weight: 700; | |
| 283 | - line-height: 1; | |
| 284 | - background: rgba(0, 0, 0, .08); | |
| 285 | -} | |
| 286 | - | |
| 287 | -.bkbg-tab--active .bkbg-tab__count { | |
| 288 | - background: rgba(255, 255, 255, .25); | |
| 289 | - color: #fff; | |
| 290 | -} | |
| 291 | - | |
| 292 | -/* ── Grid & Categories ──────────────────────────── */ | |
| 293 | -.bkbg-grid { | |
| 294 | - padding: 24px 32px 48px; | |
| 295 | -} | |
| 296 | - | |
| 297 | -.bkbg-category-section { | |
| 298 | - margin-bottom: 32px; | |
| 299 | -} | |
| 300 | - | |
| 301 | -.bkbg-category-section[style*="display: none"] { | |
| 302 | - margin: 0; | |
| 303 | -} | |
| 304 | - | |
| 305 | -.bkbg-category-header { | |
| 306 | - display: flex; | |
| 307 | - align-items: center; | |
| 308 | - justify-content: space-between; | |
| 309 | - margin-bottom: 16px; | |
| 310 | - padding-bottom: 12px; | |
| 311 | - border-bottom: 1px solid var(--bkbg-border); | |
| 312 | -} | |
| 313 | - | |
| 314 | -.bkbg-category-title { | |
| 315 | - display: flex; | |
| 316 | - align-items: center; | |
| 317 | - gap: 10px; | |
| 318 | - margin: 0; | |
| 319 | - font-size: 15px; | |
| 320 | - font-weight: 700; | |
| 321 | - color: var(--bkbg-text); | |
| 322 | - line-height: 1.3; | |
| 323 | -} | |
| 324 | - | |
| 325 | -.bkbg-category-title .dashicons { | |
| 326 | - font-size: 18px; | |
| 327 | - width: 18px; | |
| 328 | - height: 18px; | |
| 329 | - color: var(--bkbg-primary); | |
| 330 | -} | |
| 331 | - | |
| 332 | -.bkbg-category-count { | |
| 333 | - display: inline-flex; | |
| 334 | - align-items: center; | |
| 335 | - justify-content: center; | |
| 336 | - min-width: 24px; | |
| 337 | - height: 20px; | |
| 338 | - padding: 0 8px; | |
| 339 | - border-radius: 10px; | |
| 340 | - font-size: 11px; | |
| 341 | - font-weight: 700; | |
| 342 | - background: var(--bkbg-primary-light); | |
| 343 | - color: var(--bkbg-primary); | |
| 344 | -} | |
| 345 | - | |
| 346 | -.bkbg-category-actions { | |
| 347 | - display: flex; | |
| 348 | - align-items: center; | |
| 349 | - gap: 4px; | |
| 350 | -} | |
| 351 | - | |
| 352 | -.bkbg-cat-toggle { | |
| 353 | - background: none; | |
| 354 | - border: none; | |
| 355 | - color: var(--bkbg-primary); | |
| 356 | - font-size: 12px; | |
| 357 | - font-weight: 500; | |
| 358 | - cursor: pointer; | |
| 359 | - padding: 4px 8px; | |
| 360 | - border-radius: 4px; | |
| 361 | - transition: background var(--bkbg-transition); | |
| 362 | -} | |
| 363 | - | |
| 364 | -.bkbg-cat-toggle:hover { | |
| 365 | - background: var(--bkbg-primary-light); | |
| 366 | -} | |
| 367 | - | |
| 368 | -.bkbg-cat-toggle[data-action="disable"]:hover { | |
| 369 | - color: var(--bkbg-danger); | |
| 370 | - background: var(--bkbg-danger-light); | |
| 371 | -} | |
| 372 | - | |
| 373 | -.bkbg-cat-sep { | |
| 374 | - color: var(--bkbg-border); | |
| 375 | - font-size: 12px; | |
| 376 | - user-select: none; | |
| 377 | -} | |
| 378 | - | |
| 379 | -/* ── Block cards ────────────────────────────────── */ | |
| 380 | -.bkbg-cards { | |
| 381 | - display: grid; | |
| 382 | - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); | |
| 383 | - gap: 12px; | |
| 384 | -} | |
| 385 | - | |
| 386 | -.bkbg-card { | |
| 387 | - display: flex; | |
| 388 | - align-items: center; | |
| 389 | - gap: 12px; | |
| 390 | - padding: 14px 16px; | |
| 391 | - background: var(--bkbg-card-bg); | |
| 392 | - border: 1px solid var(--bkbg-border); | |
| 393 | - border-radius: var(--bkbg-radius-sm); | |
| 394 | - transition: all var(--bkbg-transition); | |
| 395 | - cursor: default; | |
| 396 | -} | |
| 397 | - | |
| 398 | -.bkbg-card:hover { | |
| 399 | - box-shadow: var(--bkbg-shadow-hover); | |
| 400 | - border-color: #c8c8c8; | |
| 401 | -} | |
| 402 | - | |
| 403 | -.bkbg-card--disabled { | |
| 404 | - opacity: .5; | |
| 405 | -} | |
| 406 | - | |
| 407 | -.bkbg-card--disabled:hover { | |
| 408 | - opacity: .7; | |
| 409 | -} | |
| 410 | - | |
| 411 | -.bkbg-card--hidden { | |
| 412 | - display: none !important; | |
| 413 | -} | |
| 414 | - | |
| 415 | -.bkbg-card__icon { | |
| 416 | - width: 36px; | |
| 417 | - height: 36px; | |
| 418 | - border-radius: 8px; | |
| 419 | - background: var(--bkbg-primary-light); | |
| 420 | - display: flex; | |
| 421 | - align-items: center; | |
| 422 | - justify-content: center; | |
| 423 | - flex-shrink: 0; | |
| 424 | - transition: background var(--bkbg-transition); | |
| 425 | -} | |
| 426 | - | |
| 427 | -.bkbg-card__icon .dashicons { | |
| 428 | - font-size: 18px; | |
| 429 | - width: 18px; | |
| 430 | - height: 18px; | |
| 431 | - color: var(--bkbg-primary); | |
| 432 | - transition: color var(--bkbg-transition); | |
| 433 | -} | |
| 434 | - | |
| 435 | -.bkbg-card--disabled .bkbg-card__icon { | |
| 436 | - background: var(--bkbg-bg); | |
| 437 | -} | |
| 438 | - | |
| 439 | -.bkbg-card--disabled .bkbg-card__icon .dashicons { | |
| 440 | - color: var(--bkbg-text-secondary); | |
| 441 | -} | |
| 442 | - | |
| 443 | -.bkbg-card__info { | |
| 444 | - flex: 1; | |
| 445 | - min-width: 0; | |
| 446 | -} | |
| 447 | - | |
| 448 | -.bkbg-card__title { | |
| 449 | - display: block; | |
| 450 | - font-size: 13px; | |
| 451 | - font-weight: 600; | |
| 452 | - color: var(--bkbg-text); | |
| 453 | - white-space: nowrap; | |
| 454 | - overflow: hidden; | |
| 455 | - text-overflow: ellipsis; | |
| 456 | - line-height: 1.4; | |
| 457 | -} | |
| 458 | - | |
| 459 | -/* ── Toggle switch ──────────────────────────────── */ | |
| 460 | -.bkbg-toggle { | |
| 461 | - position: relative; | |
| 462 | - display: inline-block; | |
| 463 | - width: 40px; | |
| 464 | - height: 22px; | |
| 465 | - flex-shrink: 0; | |
| 466 | - cursor: pointer; | |
| 467 | -} | |
| 468 | - | |
| 469 | -.bkbg-toggle__input { | |
| 470 | - opacity: 0; | |
| 471 | - width: 0; | |
| 472 | - height: 0; | |
| 473 | - position: absolute; | |
| 474 | -} | |
| 475 | - | |
| 476 | -.bkbg-toggle__slider { | |
| 477 | - position: absolute; | |
| 478 | - inset: 0; | |
| 479 | - background: #c3c4c7; | |
| 480 | - border-radius: 22px; | |
| 481 | - transition: all var(--bkbg-transition); | |
| 482 | -} | |
| 483 | - | |
| 484 | -.bkbg-toggle__slider::before { | |
| 485 | - content: ''; | |
| 486 | - position: absolute; | |
| 487 | - width: 16px; | |
| 488 | - height: 16px; | |
| 489 | - left: 3px; | |
| 490 | - top: 3px; | |
| 491 | - background: #fff; | |
| 492 | - border-radius: 50%; | |
| 493 | - transition: all var(--bkbg-transition); | |
| 494 | - box-shadow: 0 1px 3px rgba(0, 0, 0, .15); | |
| 495 | -} | |
| 496 | - | |
| 497 | -.bkbg-toggle__input:checked + .bkbg-toggle__slider { | |
| 498 | - background: var(--bkbg-primary); | |
| 499 | -} | |
| 500 | - | |
| 501 | -.bkbg-toggle__input:checked + .bkbg-toggle__slider::before { | |
| 502 | - transform: translateX(18px); | |
| 503 | -} | |
| 504 | - | |
| 505 | -.bkbg-toggle__input:focus-visible + .bkbg-toggle__slider { | |
| 506 | - box-shadow: 0 0 0 3px rgba(56, 88, 233, .2); | |
| 507 | -} | |
| 508 | - | |
| 509 | -/* ── Toast ──────────────────────────────────────── */ | |
| 510 | -.bkbg-toast { | |
| 511 | - position: fixed; | |
| 512 | - bottom: 32px; | |
| 513 | - right: 32px; | |
| 514 | - z-index: 9999; | |
| 515 | - padding: 12px 20px; | |
| 516 | - border-radius: var(--bkbg-radius-sm); | |
| 517 | - font-size: 13px; | |
| 518 | - font-weight: 600; | |
| 519 | - color: #fff; | |
| 520 | - background: var(--bkbg-text); | |
| 521 | - box-shadow: 0 8px 24px rgba(0, 0, 0, .15); | |
| 522 | - transform: translateY(20px); | |
| 523 | - opacity: 0; | |
| 524 | - pointer-events: none; | |
| 525 | - transition: all .3s cubic-bezier(.4, 0, .2, 1); | |
| 526 | -} | |
| 527 | - | |
| 528 | -.bkbg-toast--visible { | |
| 529 | - transform: translateY(0); | |
| 530 | - opacity: 1; | |
| 531 | - pointer-events: auto; | |
| 532 | -} | |
| 533 | - | |
| 534 | -.bkbg-toast--success { | |
| 535 | - background: var(--bkbg-success); | |
| 536 | -} | |
| 537 | - | |
| 538 | -.bkbg-toast--error { | |
| 539 | - background: var(--bkbg-danger); | |
| 540 | -} | |
| 541 | - | |
| 542 | -/* ── Empty state ────────────────────────────────── */ | |
| 543 | -.bkbg-empty { | |
| 544 | - text-align: center; | |
| 545 | - padding: 64px 32px; | |
| 546 | - color: var(--bkbg-text-secondary); | |
| 547 | -} | |
| 548 | - | |
| 549 | -.bkbg-empty .dashicons { | |
| 550 | - font-size: 48px; | |
| 551 | - width: 48px; | |
| 552 | - height: 48px; | |
| 553 | - opacity: .3; | |
| 554 | - margin-bottom: 12px; | |
| 555 | -} | |
| 556 | - | |
| 557 | -.bkbg-empty p { | |
| 558 | - font-size: 14px; | |
| 559 | - margin: 0; | |
| 560 | -} | |
| 561 | - | |
| 562 | -/* ── Unsaved indicator ──────────────────────────── */ | |
| 563 | -.bkbg-btn--primary.bkbg-btn--unsaved { | |
| 564 | - animation: bkbg-pulse 1.5s ease-in-out infinite; | |
| 565 | -} | |
| 566 | - | |
| 567 | -@keyframes bkbg-pulse { | |
| 568 | - 0%, 100% { box-shadow: 0 0 0 0 rgba(56, 88, 233, .3); } | |
| 569 | - 50% { box-shadow: 0 0 0 8px rgba(56, 88, 233, 0); } | |
| 570 | -} | |
| 571 | - | |
| 572 | -/* ── Responsive ─────────────────────────────────── */ | |
| 573 | -@media (max-width: 960px) { | |
| 574 | - .bkbg-header { | |
| 575 | - padding: 16px 20px; | |
| 576 | - } | |
| 577 | - | |
| 578 | - .bkbg-toolbar { | |
| 579 | - padding: 12px 20px; | |
| 580 | - } | |
| 581 | - | |
| 582 | - .bkbg-grid { | |
| 583 | - padding: 20px 20px 40px; | |
| 584 | - } | |
| 585 | - | |
| 586 | - .bkbg-cards { | |
| 587 | - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| 588 | - } | |
| 589 | - | |
| 590 | - .bkbg-search { | |
| 591 | - min-width: 200px; | |
| 592 | - } | |
| 593 | -} | |
| 594 | - | |
| 595 | -@media (max-width: 600px) { | |
| 596 | - .bkbg-header { | |
| 597 | - flex-direction: column; | |
| 598 | - align-items: flex-start; | |
| 599 | - gap: 12px; | |
| 600 | - } | |
| 601 | - | |
| 602 | - .bkbg-header__right { | |
| 603 | - width: 100%; | |
| 604 | - } | |
| 605 | - | |
| 606 | - .bkbg-search { | |
| 607 | - flex: 1; | |
| 608 | - min-width: 0; | |
| 609 | - } | |
| 610 | - | |
| 611 | - .bkbg-cards { | |
| 612 | - grid-template-columns: 1fr; | |
| 613 | - } | |
| 614 | -} | |
| 128 | +@media(prefers-reduced-motion:reduce) {#bkbg-dashboard *,#bkbg-dashboard *::before,#bkbg-dashboard *::after {transition:none!important}} | |
