| @@ -2486,9 +2486,13 @@ | ||
| 2486 | 2486 | /* Sync Log Header */ |
| 2487 | 2487 | .sync-log-header { |
| 2488 | 2488 | display: flex; |
| 2489 | 2489 | justify-content: space-between; |
| 2490 | - 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; | |
| 2491 | 2495 | margin-bottom: 30px; |
| 2492 | 2496 | gap: 20px; |
| 2493 | 2497 | } |
| 2494 | 2498 | |
| @@ -2495,14 +2499,11 @@ | ||
| 2495 | 2499 | .sync-log-title-section { |
| 2496 | 2500 | flex: 1; |
| 2497 | 2501 | } |
| 2498 | 2502 | |
| 2499 | -.sync-log-title-section h2 { | |
| 2500 | - color: var(--dashboard-text-primary); | |
| 2501 | - margin-bottom: 8px; | |
| 2502 | - font-size: 24px; | |
| 2503 | - font-weight: 600; | |
| 2504 | -} | |
| 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. */ | |
| 2505 | 2506 | |
| 2506 | 2507 | /* Sync Log Filters */ |
| 2507 | 2508 | .sync-log-filters { |
| 2508 | 2509 | flex-shrink: 0; |
| @@ -2530,8 +2531,49 @@ | ||
| 2530 | 2531 | min-width: 150px; |
| 2531 | 2532 | } |
| 2532 | 2533 | } |
| 2533 | 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 | + | |
| 2534 | 2576 | .sync-filter-select { |
| 2535 | 2577 | background-color: var(--dashboard-card-bg); |
| 2536 | 2578 | border: 1px solid var(--dashboard-border); |
| 2537 | 2579 | color: var(--dashboard-text-primary); |
| @@ -2724,13 +2766,20 @@ | ||
| 2724 | 2766 | opacity: 0.6; |
| 2725 | 2767 | color: var(--dashboard-text-secondary); |
| 2726 | 2768 | } |
| 2727 | 2769 | |
| 2728 | -.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 { | |
| 2729 | 2777 | color: var(--dashboard-text-primary); |
| 2730 | - margin-bottom: 8px; | |
| 2778 | + margin: 0 0 8px 0; | |
| 2731 | 2779 | font-size: 18px; |
| 2732 | 2780 | font-weight: 600; |
| 2781 | + display: block; | |
| 2733 | 2782 | } |
| 2734 | 2783 | |
| 2735 | 2784 | .sync-log-empty p { |
| 2736 | 2785 | font-size: 14px; |
| @@ -2760,8 +2809,61 @@ | ||
| 2760 | 2809 | align-items: center; |
| 2761 | 2810 | gap: 8px; |
| 2762 | 2811 | } |
| 2763 | 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 | + | |
| 2764 | 2866 | .sync-pagination-btn { |
| 2765 | 2867 | display: inline-flex; |
| 2766 | 2868 | align-items: center; |
| 2767 | 2869 | justify-content: center; |
| @@ -2861,8 +2963,13 @@ | ||
| 2861 | 2963 | gap: 8px; |
| 2862 | 2964 | width: 100%; |
| 2863 | 2965 | } |
| 2864 | 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. */ | |
| 2865 | 2972 | .sync-filter-select { |
| 2866 | 2973 | min-width: 110px; |
| 2867 | 2974 | font-size: 13px; |
| 2868 | 2975 | padding: 6px 8px; |
