| @@ -127,8 +127,19 @@ | ||
| 127 | 127 | border-left-color: var(--dashboard-error) !important; |
| 128 | 128 | background: rgba(239, 68, 68, 0.15) !important; |
| 129 | 129 | } |
| 130 | 130 | |
| 131 | +/* Specific warning notice styling ONLY in plugin. | |
| 132 | + Without this, warning notices fell through to the base .notice rule above | |
| 133 | + (blue border-left, plain card background) because that rule is !important | |
| 134 | + and the .notice-warning colours defined further down this file are not — | |
| 135 | + !important always wins regardless of source order, so the warning never | |
| 136 | + actually rendered yellow/amber. Mirrors the .notice-error override above. */ | |
| 137 | +.metasync-dashboard-wrap .notice.notice-warning { | |
| 138 | + border-left-color: var(--dashboard-warning) !important; | |
| 139 | + background: rgba(245, 158, 11, 0.15) !important; | |
| 140 | +} | |
| 141 | + | |
| 131 | 142 | /* License mismatch notice specific styling ONLY in plugin */ |
| 132 | 143 | .metasync-dashboard-wrap .notice:has(.dashicons-warning):before, |
| 133 | 144 | .metasync-dashboard-wrap .notice[class*="license"]:before, |
| 134 | 145 | .metasync-dashboard-wrap .notice[class*="mismatch"]:before { |
| @@ -1343,9 +1354,13 @@ | ||
| 1343 | 1354 | border-color: var(--dashboard-error); |
| 1344 | 1355 | /* Removed translateY animation - was too distracting */ |
| 1345 | 1356 | } |
| 1346 | 1357 | |
| 1347 | -/* Connect Status Messages - Dashboard Style */ | |
| 1358 | +/* Connect Status Messages - Dashboard Style | |
| 1359 | + The box holds two block children — .metasync-sa-connect-status-content and | |
| 1360 | + .metasync-sa-connect-actions — so it must stack. As a row, the actions block | |
| 1361 | + sized to its buttons while the content block (flex: 1, so flex-basis: 0) was | |
| 1362 | + squeezed into whatever was left, wrapping the message one word per line. */ | |
| 1348 | 1363 | .metasync-dashboard-wrap .metasync-sa-connect-status, |
| 1349 | 1364 | .metasync-dashboard-wrap #sa-connect-status-message { |
| 1350 | 1365 | margin-top: 16px; |
| 1351 | 1366 | padding: 16px 20px; |
| @@ -1350,9 +1365,10 @@ | ||
| 1350 | 1365 | margin-top: 16px; |
| 1351 | 1366 | padding: 16px 20px; |
| 1352 | 1367 | border-radius: 12px; |
| 1353 | 1368 | display: flex; |
| 1354 | - align-items: flex-start; | |
| 1369 | + flex-direction: column; | |
| 1370 | + align-items: stretch; | |
| 1355 | 1371 | gap: 12px; |
| 1356 | 1372 | font-weight: 500; |
| 1357 | 1373 | /* Removed slideInNotice animation - was too distracting */ |
| 1358 | 1374 | backdrop-filter: blur(10px); |
| @@ -1608,9 +1624,14 @@ | ||
| 1608 | 1624 | } |
| 1609 | 1625 | |
| 1610 | 1626 | /* Connect Status Message Content */ |
| 1611 | 1627 | .metasync-dashboard-wrap .metasync-sa-connect-status-content { |
| 1612 | - flex: 1; | |
| 1628 | + /* min-width: 0 keeps a long unbroken string (a pasted URL, a UUID) from | |
| 1629 | + setting the flex item's min-content width and re-inflating the box. */ | |
| 1630 | + flex: 0 0 auto; | |
| 1631 | + min-width: 0; | |
| 1632 | + /* Spacing between content and actions is the container's gap now. */ | |
| 1633 | + margin-bottom: 0; | |
| 1613 | 1634 | } |
| 1614 | 1635 | |
| 1615 | 1636 | .metasync-dashboard-wrap .metasync-sa-connect-status-title { |
| 1616 | 1637 | font-weight: 600; |
| @@ -1615,11 +1636,15 @@ | ||
| 1615 | 1636 | .metasync-dashboard-wrap .metasync-sa-connect-status-title { |
| 1616 | 1637 | font-weight: 600; |
| 1617 | 1638 | font-size: 15px; |
| 1618 | 1639 | margin-bottom: 8px; |
| 1619 | - display: flex; | |
| 1620 | - align-items: center; | |
| 1621 | - gap: 8px; | |
| 1640 | + /* Block, not flex. WordPress core's emoji script rewrites the leading | |
| 1641 | + emoji into <img class="emoji">; as a flex container that image became a | |
| 1642 | + flex item of its own and, under align-items: center, floated to the | |
| 1643 | + vertical middle of a wrapped title. Inline flow keeps it on the first | |
| 1644 | + line and wraps with the text. The title string already carries the | |
| 1645 | + separating space, so the old gap is not needed. */ | |
| 1646 | + display: block; | |
| 1622 | 1647 | } |
| 1623 | 1648 | |
| 1624 | 1649 | .metasync-dashboard-wrap .metasync-sa-connect-status-message { |
| 1625 | 1650 | font-size: 14px; |
| @@ -1624,14 +1649,14 @@ | ||
| 1624 | 1649 | .metasync-dashboard-wrap .metasync-sa-connect-status-message { |
| 1625 | 1650 | font-size: 14px; |
| 1626 | 1651 | line-height: 1.5; |
| 1627 | 1652 | opacity: 0.9; |
| 1628 | - margin-bottom: 12px; | |
| 1653 | + margin-bottom: 0; | |
| 1629 | 1654 | } |
| 1630 | 1655 | |
| 1631 | 1656 | /* Existing Connect Actions Container */ |
| 1632 | 1657 | .metasync-dashboard-wrap .metasync-sa-connect-actions { |
| 1633 | - margin-top: 16px; | |
| 1658 | + margin-top: 0; | |
| 1634 | 1659 | display: flex; |
| 1635 | 1660 | gap: 12px; |
| 1636 | 1661 | flex-wrap: wrap; |
| 1637 | 1662 | align-items: center; |
| @@ -1708,10 +1733,8 @@ | ||
| 1708 | 1733 | |
| 1709 | 1734 | .metasync-dashboard-wrap .metasync-sa-connect-status { |
| 1710 | 1735 | padding: 16px; |
| 1711 | 1736 | margin-top: 12px; |
| 1712 | - flex-direction: column; | |
| 1713 | - align-items: flex-start; | |
| 1714 | 1737 | gap: 8px; |
| 1715 | 1738 | } |
| 1716 | 1739 | |
| 1717 | 1740 | .metasync-dashboard-wrap .metasync-sa-connect-status-title { |
| @@ -2463,9 +2486,13 @@ | ||
| 2463 | 2486 | /* Sync Log Header */ |
| 2464 | 2487 | .sync-log-header { |
| 2465 | 2488 | display: flex; |
| 2466 | 2489 | justify-content: space-between; |
| 2467 | - align-items: flex-start; | |
| 2490 | + /* Centred rather than flex-start: the title section used to be a two-line | |
| 2491 | + * block (24px heading + description) that read fine top-aligned, but it is | |
| 2492 | + * now a single line of copy sitting beside a 34px control row. Top-aligning | |
| 2493 | + * a one-line block against that row leaves the text visibly high. */ | |
| 2494 | + align-items: center; | |
| 2468 | 2495 | margin-bottom: 30px; |
| 2469 | 2496 | gap: 20px; |
| 2470 | 2497 | } |
| 2471 | 2498 | |
| @@ -2472,14 +2499,11 @@ | ||
| 2472 | 2499 | .sync-log-title-section { |
| 2473 | 2500 | flex: 1; |
| 2474 | 2501 | } |
| 2475 | 2502 | |
| 2476 | -.sync-log-title-section h2 { | |
| 2477 | - color: var(--dashboard-text-primary); | |
| 2478 | - margin-bottom: 8px; | |
| 2479 | - font-size: 24px; | |
| 2480 | - font-weight: 600; | |
| 2481 | -} | |
| 2503 | +/* The card no longer renders an <h2> — the page title and description come | |
| 2504 | + * from the layout header (render_layout_open), and the card carries only the | |
| 2505 | + * 90-day retention hint. See admin/class-metasync-admin.php. */ | |
| 2482 | 2506 | |
| 2483 | 2507 | /* Sync Log Filters */ |
| 2484 | 2508 | .sync-log-filters { |
| 2485 | 2509 | flex-shrink: 0; |
| @@ -2507,8 +2531,49 @@ | ||
| 2507 | 2531 | min-width: 150px; |
| 2508 | 2532 | } |
| 2509 | 2533 | } |
| 2510 | 2534 | |
| 2535 | +/* | |
| 2536 | + * Changes Log toolbar — one shared height for the Clear Log button and the two | |
| 2537 | + * filter selects. | |
| 2538 | + * | |
| 2539 | + * The button is styled inline in the renderer (padding:6px 14px, no height) and | |
| 2540 | + * rendered ~29px, while the selects picked up WordPress core's own | |
| 2541 | + * `select { min-height: 40px }` (wp-admin forms.css) on top of | |
| 2542 | + * .sync-filter-select's padding — so the button sat noticeably shorter than the | |
| 2543 | + * controls beside it. | |
| 2544 | + * | |
| 2545 | + * min-height is the load-bearing declaration here: core's min-height:40px beats | |
| 2546 | + * a plain height:34px no matter how specific the selector, because min-height | |
| 2547 | + * wins over height by definition. Setting both pins the row at 34px. | |
| 2548 | + */ | |
| 2549 | +#metasync-clear-sync-log-btn, | |
| 2550 | +.sync-log-filters .sync-filter-select { | |
| 2551 | + height: 34px; | |
| 2552 | + min-height: 34px; | |
| 2553 | + box-sizing: border-box; | |
| 2554 | +} | |
| 2555 | + | |
| 2556 | +/* Vertical padding is zeroed so the fixed height above is what the row sees; | |
| 2557 | + * .sync-filter-select's own padding:8px 12px would otherwise fight it. The base | |
| 2558 | + * padding-right (34px, reserving space for the chevron) is !important there and | |
| 2559 | + * still applies. */ | |
| 2560 | +.sync-log-filters .sync-filter-select { | |
| 2561 | + padding-top: 0; | |
| 2562 | + padding-bottom: 0; | |
| 2563 | + line-height: 32px; | |
| 2564 | +} | |
| 2565 | + | |
| 2566 | +/* The button keeps its inline padding:6px 14px, which leaves a 20px content box | |
| 2567 | + * inside the 34px border-box height — too short for a 32px line-height, so the | |
| 2568 | + * label would sit off-centre. Flex centering makes line-height irrelevant. */ | |
| 2569 | +#metasync-clear-sync-log-btn { | |
| 2570 | + display: inline-flex; | |
| 2571 | + align-items: center; | |
| 2572 | + justify-content: center; | |
| 2573 | + line-height: 1; | |
| 2574 | +} | |
| 2575 | + | |
| 2511 | 2576 | .sync-filter-select { |
| 2512 | 2577 | background-color: var(--dashboard-card-bg); |
| 2513 | 2578 | border: 1px solid var(--dashboard-border); |
| 2514 | 2579 | color: var(--dashboard-text-primary); |
| @@ -2701,13 +2766,20 @@ | ||
| 2701 | 2766 | opacity: 0.6; |
| 2702 | 2767 | color: var(--dashboard-text-secondary); |
| 2703 | 2768 | } |
| 2704 | 2769 | |
| 2705 | -.sync-log-empty h3 { | |
| 2770 | +/* The empty-state heading is an <h2>: the card's own <h2> is gone, so the | |
| 2771 | + * layout's <h1> is the only heading above it and an <h3> here would skip a | |
| 2772 | + * level. Scoped through .metasync-dashboard-wrap to out-specify | |
| 2773 | + * ".metasync-dashboard-wrap .dashboard-card h2" (0,3,1) above, which would | |
| 2774 | + * otherwise impose its 1.5rem card-title sizing and flex display on what is | |
| 2775 | + * a centred empty-state message. Sizing matches the previous <h3>. */ | |
| 2776 | +.metasync-dashboard-wrap .sync-log-empty h2 { | |
| 2706 | 2777 | color: var(--dashboard-text-primary); |
| 2707 | - margin-bottom: 8px; | |
| 2778 | + margin: 0 0 8px 0; | |
| 2708 | 2779 | font-size: 18px; |
| 2709 | 2780 | font-weight: 600; |
| 2781 | + display: block; | |
| 2710 | 2782 | } |
| 2711 | 2783 | |
| 2712 | 2784 | .sync-log-empty p { |
| 2713 | 2785 | font-size: 14px; |
| @@ -2737,8 +2809,61 @@ | ||
| 2737 | 2809 | align-items: center; |
| 2738 | 2810 | gap: 8px; |
| 2739 | 2811 | } |
| 2740 | 2812 | |
| 2813 | +/* | |
| 2814 | + * Rows-per-page selector on the Changes Log footer. | |
| 2815 | + * | |
| 2816 | + * .metasync-per-page-select is emitted by Metasync_Per_Page_Helper::render_selector() | |
| 2817 | + * on four screens (Redirections, 404 Monitor, Changes Log, Media Library), but | |
| 2818 | + * only the other three style it. On the Changes Log it fell through to the | |
| 2819 | + * generic ".metasync-dashboard-wrap select" rule — width:100%, max-width:400px, | |
| 2820 | + * padding:12px 16px — so a two-digit control rendered ~295px wide and 64px tall | |
| 2821 | + * next to 34px dashboard controls. | |
| 2822 | + * | |
| 2823 | + * Scoped to .sync-log-pagination-info, a Changes Log-only wrapper, rather than | |
| 2824 | + * to the shared class: the other three screens already size this control via | |
| 2825 | + * their own rules (".wrap .tablenav select" for Redirections and 404 Monitor, | |
| 2826 | + * "#metasync-image-library-form .tablenav select" for Media Library), and a | |
| 2827 | + * shared rule here would be one more thing competing with them. Keeping it | |
| 2828 | + * page-scoped means those screens are untouched by construction, not by | |
| 2829 | + * winning a specificity tie. | |
| 2830 | + * | |
| 2831 | + * min-height pairs with height for the same reason as the toolbar rule above — | |
| 2832 | + * core's select{min-height:40px} would otherwise inflate it back to 40px. | |
| 2833 | + * | |
| 2834 | + * Sizing only: admin/js/metasync-per-page.js drives behaviour off the element's | |
| 2835 | + * data-* attributes, which CSS must not disturb. | |
| 2836 | + */ | |
| 2837 | +.sync-log-pagination-info .metasync-per-page-select { | |
| 2838 | + height: 34px; | |
| 2839 | + min-height: 34px; | |
| 2840 | + line-height: 32px; | |
| 2841 | + padding: 0 28px 0 10px; | |
| 2842 | + font-size: 13px; | |
| 2843 | + width: auto; | |
| 2844 | + border-radius: 6px; | |
| 2845 | + box-sizing: border-box; | |
| 2846 | + vertical-align: middle; | |
| 2847 | + cursor: pointer; | |
| 2848 | + appearance: none; | |
| 2849 | + -webkit-appearance: none; | |
| 2850 | + -moz-appearance: none; | |
| 2851 | + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3E"); | |
| 2852 | + background-repeat: no-repeat; | |
| 2853 | + background-position: right 10px center; | |
| 2854 | + background-size: 14px; | |
| 2855 | +} | |
| 2856 | + | |
| 2857 | +/* Mirrors .sync-filter-select option. The rule above is the first to apply | |
| 2858 | + * appearance:none to this control, and dark-theme <option> popups need their | |
| 2859 | + * colours stated explicitly rather than inherited. */ | |
| 2860 | +.sync-log-pagination-info .metasync-per-page-select option { | |
| 2861 | + background: var(--dashboard-card-bg); | |
| 2862 | + color: var(--dashboard-text-primary); | |
| 2863 | + padding: 8px; | |
| 2864 | +} | |
| 2865 | + | |
| 2741 | 2866 | .sync-pagination-btn { |
| 2742 | 2867 | display: inline-flex; |
| 2743 | 2868 | align-items: center; |
| 2744 | 2869 | justify-content: center; |
| @@ -2838,8 +2963,13 @@ | ||
| 2838 | 2963 | gap: 8px; |
| 2839 | 2964 | width: 100%; |
| 2840 | 2965 | } |
| 2841 | 2966 | |
| 2967 | + /* The vertical half of this padding is intentionally overridden by | |
| 2968 | + * ".sync-log-filters .sync-filter-select" (0,2,0) above, which pins the | |
| 2969 | + * toolbar row at 34px. Do NOT re-declare padding here under that | |
| 2970 | + * descendant selector: it would tie on specificity, win on source order, | |
| 2971 | + * and silently restore the misalignment this rule set exists to avoid. */ | |
| 2842 | 2972 | .sync-filter-select { |
| 2843 | 2973 | min-width: 110px; |
| 2844 | 2974 | font-size: 13px; |
| 2845 | 2975 | padding: 6px 8px; |
| @@ -3360,5 +3490,60 @@ | ||
| 3360 | 3490 | font-size: 24px; |
| 3361 | 3491 | width: 24px; |
| 3362 | 3492 | height: 24px; |
| 3363 | 3493 | color: var(--dashboard-text-secondary); |
| 3494 | +} | |
| 3495 | + | |
| 3496 | +/* Dismiss button on plugin notices. | |
| 3497 | + The dashboard script appends a .notice-dismiss to every notice inside | |
| 3498 | + .metasync-dashboard-wrap, but the notice itself was never given a | |
| 3499 | + positioning context, so WordPress core's `position: absolute` on the | |
| 3500 | + button resolved against whatever ancestor happened to be positioned | |
| 3501 | + instead of the notice box — landing the icon mid-text rather than in the | |
| 3502 | + notice's own top-right corner. Anchor it explicitly to the notice. */ | |
| 3503 | +.metasync-dashboard-wrap .notice { | |
| 3504 | + position: relative; | |
| 3505 | +} | |
| 3506 | + | |
| 3507 | +.metasync-dashboard-wrap .notice-dismiss { | |
| 3508 | + position: absolute; | |
| 3509 | + top: 8px; | |
| 3510 | + right: 8px; | |
| 3511 | + width: 28px; | |
| 3512 | + height: 28px; | |
| 3513 | + display: flex; | |
| 3514 | + align-items: center; | |
| 3515 | + justify-content: center; | |
| 3516 | +} | |
| 3517 | + | |
| 3518 | +/* WordPress core colours the dismiss icon a near-black grey (#1e1e1e), which | |
| 3519 | + reads fine on the light theme but is effectively invisible against the dark | |
| 3520 | + theme's card background. Give it a theme-aware colour instead. !important | |
| 3521 | + because the icon's colour otherwise wins on specificity alone, the same way | |
| 3522 | + the base .notice rule above needs !important to beat WP core. | |
| 3523 | + `.metasync-dashboard-wrap[data-theme="dark"]` matches the common case: the | |
| 3524 | + wrap carries data-theme itself (set server-side on page load). The plain | |
| 3525 | + `[data-theme="dark"] .metasync-dashboard-wrap` descendant form is kept too, | |
| 3526 | + since the in-page theme switcher additionally stamps data-theme on <html> | |
| 3527 | + once the user toggles it, and either could be the one present. */ | |
| 3528 | +.metasync-dashboard-wrap[data-theme="dark"] .notice-dismiss::before, | |
| 3529 | +[data-theme="dark"] .metasync-dashboard-wrap .notice-dismiss::before { | |
| 3530 | + color: var(--dashboard-text-secondary) !important; | |
| 3531 | +} | |
| 3532 | + | |
| 3533 | +.metasync-dashboard-wrap[data-theme="dark"] .notice-dismiss:hover::before, | |
| 3534 | +.metasync-dashboard-wrap[data-theme="dark"] .notice-dismiss:focus::before, | |
| 3535 | +[data-theme="dark"] .metasync-dashboard-wrap .notice-dismiss:hover::before, | |
| 3536 | +[data-theme="dark"] .metasync-dashboard-wrap .notice-dismiss:focus::before { | |
| 3537 | + color: var(--dashboard-text-primary) !important; | |
| 3538 | +} | |
| 3539 | + | |
| 3540 | +/* Remove WordPress footer space on MetaSync admin pages. */ | |
| 3541 | +body:has(.metasync-dashboard-wrap) #wpbody-content, | |
| 3542 | +body:has(.metasync-otto-debug) #wpbody-content { | |
| 3543 | + padding-bottom: 0; | |
| 3544 | +} | |
| 3545 | + | |
| 3546 | +body:has(.metasync-dashboard-wrap) #wpfooter, | |
| 3547 | +body:has(.metasync-otto-debug) #wpfooter { | |
| 3548 | + display: none; | |
| 3364 | 3549 | } |
