| @@ -1354,9 +1354,13 @@ | ||
| 1354 | 1354 | border-color: var(--dashboard-error); |
| 1355 | 1355 | /* Removed translateY animation - was too distracting */ |
| 1356 | 1356 | } |
| 1357 | 1357 | |
| 1358 | -/* 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. */ | |
| 1359 | 1363 | .metasync-dashboard-wrap .metasync-sa-connect-status, |
| 1360 | 1364 | .metasync-dashboard-wrap #sa-connect-status-message { |
| 1361 | 1365 | margin-top: 16px; |
| 1362 | 1366 | padding: 16px 20px; |
| @@ -1361,9 +1365,10 @@ | ||
| 1361 | 1365 | margin-top: 16px; |
| 1362 | 1366 | padding: 16px 20px; |
| 1363 | 1367 | border-radius: 12px; |
| 1364 | 1368 | display: flex; |
| 1365 | - align-items: flex-start; | |
| 1369 | + flex-direction: column; | |
| 1370 | + align-items: stretch; | |
| 1366 | 1371 | gap: 12px; |
| 1367 | 1372 | font-weight: 500; |
| 1368 | 1373 | /* Removed slideInNotice animation - was too distracting */ |
| 1369 | 1374 | backdrop-filter: blur(10px); |
| @@ -1619,9 +1624,14 @@ | ||
| 1619 | 1624 | } |
| 1620 | 1625 | |
| 1621 | 1626 | /* Connect Status Message Content */ |
| 1622 | 1627 | .metasync-dashboard-wrap .metasync-sa-connect-status-content { |
| 1623 | - 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; | |
| 1624 | 1634 | } |
| 1625 | 1635 | |
| 1626 | 1636 | .metasync-dashboard-wrap .metasync-sa-connect-status-title { |
| 1627 | 1637 | font-weight: 600; |
| @@ -1626,11 +1636,15 @@ | ||
| 1626 | 1636 | .metasync-dashboard-wrap .metasync-sa-connect-status-title { |
| 1627 | 1637 | font-weight: 600; |
| 1628 | 1638 | font-size: 15px; |
| 1629 | 1639 | margin-bottom: 8px; |
| 1630 | - display: flex; | |
| 1631 | - align-items: center; | |
| 1632 | - 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; | |
| 1633 | 1647 | } |
| 1634 | 1648 | |
| 1635 | 1649 | .metasync-dashboard-wrap .metasync-sa-connect-status-message { |
| 1636 | 1650 | font-size: 14px; |
| @@ -1635,14 +1649,14 @@ | ||
| 1635 | 1649 | .metasync-dashboard-wrap .metasync-sa-connect-status-message { |
| 1636 | 1650 | font-size: 14px; |
| 1637 | 1651 | line-height: 1.5; |
| 1638 | 1652 | opacity: 0.9; |
| 1639 | - margin-bottom: 12px; | |
| 1653 | + margin-bottom: 0; | |
| 1640 | 1654 | } |
| 1641 | 1655 | |
| 1642 | 1656 | /* Existing Connect Actions Container */ |
| 1643 | 1657 | .metasync-dashboard-wrap .metasync-sa-connect-actions { |
| 1644 | - margin-top: 16px; | |
| 1658 | + margin-top: 0; | |
| 1645 | 1659 | display: flex; |
| 1646 | 1660 | gap: 12px; |
| 1647 | 1661 | flex-wrap: wrap; |
| 1648 | 1662 | align-items: center; |
| @@ -1719,10 +1733,8 @@ | ||
| 1719 | 1733 | |
| 1720 | 1734 | .metasync-dashboard-wrap .metasync-sa-connect-status { |
| 1721 | 1735 | padding: 16px; |
| 1722 | 1736 | margin-top: 12px; |
| 1723 | - flex-direction: column; | |
| 1724 | - align-items: flex-start; | |
| 1725 | 1737 | gap: 8px; |
| 1726 | 1738 | } |
| 1727 | 1739 | |
| 1728 | 1740 | .metasync-dashboard-wrap .metasync-sa-connect-status-title { |
| @@ -2474,9 +2486,13 @@ | ||
| 2474 | 2486 | /* Sync Log Header */ |
| 2475 | 2487 | .sync-log-header { |
| 2476 | 2488 | display: flex; |
| 2477 | 2489 | justify-content: space-between; |
| 2478 | - 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; | |
| 2479 | 2495 | margin-bottom: 30px; |
| 2480 | 2496 | gap: 20px; |
| 2481 | 2497 | } |
| 2482 | 2498 | |
| @@ -2483,14 +2499,11 @@ | ||
| 2483 | 2499 | .sync-log-title-section { |
| 2484 | 2500 | flex: 1; |
| 2485 | 2501 | } |
| 2486 | 2502 | |
| 2487 | -.sync-log-title-section h2 { | |
| 2488 | - color: var(--dashboard-text-primary); | |
| 2489 | - margin-bottom: 8px; | |
| 2490 | - font-size: 24px; | |
| 2491 | - font-weight: 600; | |
| 2492 | -} | |
| 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. */ | |
| 2493 | 2506 | |
| 2494 | 2507 | /* Sync Log Filters */ |
| 2495 | 2508 | .sync-log-filters { |
| 2496 | 2509 | flex-shrink: 0; |
| @@ -2518,8 +2531,49 @@ | ||
| 2518 | 2531 | min-width: 150px; |
| 2519 | 2532 | } |
| 2520 | 2533 | } |
| 2521 | 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 | + | |
| 2522 | 2576 | .sync-filter-select { |
| 2523 | 2577 | background-color: var(--dashboard-card-bg); |
| 2524 | 2578 | border: 1px solid var(--dashboard-border); |
| 2525 | 2579 | color: var(--dashboard-text-primary); |
| @@ -2712,13 +2766,20 @@ | ||
| 2712 | 2766 | opacity: 0.6; |
| 2713 | 2767 | color: var(--dashboard-text-secondary); |
| 2714 | 2768 | } |
| 2715 | 2769 | |
| 2716 | -.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 { | |
| 2717 | 2777 | color: var(--dashboard-text-primary); |
| 2718 | - margin-bottom: 8px; | |
| 2778 | + margin: 0 0 8px 0; | |
| 2719 | 2779 | font-size: 18px; |
| 2720 | 2780 | font-weight: 600; |
| 2781 | + display: block; | |
| 2721 | 2782 | } |
| 2722 | 2783 | |
| 2723 | 2784 | .sync-log-empty p { |
| 2724 | 2785 | font-size: 14px; |
| @@ -2748,8 +2809,61 @@ | ||
| 2748 | 2809 | align-items: center; |
| 2749 | 2810 | gap: 8px; |
| 2750 | 2811 | } |
| 2751 | 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 | + | |
| 2752 | 2866 | .sync-pagination-btn { |
| 2753 | 2867 | display: inline-flex; |
| 2754 | 2868 | align-items: center; |
| 2755 | 2869 | justify-content: center; |
| @@ -2849,8 +2963,13 @@ | ||
| 2849 | 2963 | gap: 8px; |
| 2850 | 2964 | width: 100%; |
| 2851 | 2965 | } |
| 2852 | 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. */ | |
| 2853 | 2972 | .sync-filter-select { |
| 2854 | 2973 | min-width: 110px; |
| 2855 | 2974 | font-size: 13px; |
| 2856 | 2975 | padding: 6px 8px; |
| @@ -3415,5 +3534,16 @@ | ||
| 3415 | 3534 | .metasync-dashboard-wrap[data-theme="dark"] .notice-dismiss:focus::before, |
| 3416 | 3535 | [data-theme="dark"] .metasync-dashboard-wrap .notice-dismiss:hover::before, |
| 3417 | 3536 | [data-theme="dark"] .metasync-dashboard-wrap .notice-dismiss:focus::before { |
| 3418 | 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; | |
| 3419 | 3549 | } |
