/** * Reports v3 preview. * * TEMPORARY, and a sibling of charitable-admin-dashboard-v3.css. Loaded only while the * dashboard v3 preview flag is on, so the shipping Reports page is untouched and reverting * is deleting a file. * * The reason it is a separate stylesheet rather than edits to charitable-admin.css: that file * styles the whole admin, has a hand-maintained .min.css sibling, and carries rules its SCSS * source does not - so recompiling drops them and editing means maintaining two copies. Same * reasoning as the dashboard's v3 file. * * Every rule hangs off body.charitable-dash-v3, which the preview gate adds, so nothing here * can apply with the flag off. * * @package Charitable_Pro/Assets/Admin * @since 1.8.19 */ /* ────────────────────────────────────────────────────────────────────────── 1. Toolbar Filtering on one side, actions on the other. The shipping markup put the campaign and category selects on the left and the date range plus Filter on the right next to Print, which mixed "narrow the data" with "take the data away" - so the date range and Filter move left to join the rest of the filtering, and the right side holds only actions. float: none on both halves because the shipping rules use .alignleft / .alignright, and two floats cannot be vertically aligned to each other. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; } body.charitable-dash-v3 .charitable-reports-v3-toolbar::after { content: none; } body.charitable-dash-v3 .charitable-reports-v3-toolbar .alignleft.actions, body.charitable-dash-v3 .charitable-reports-v3-toolbar .alignright { float: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; padding: 0; } body.charitable-dash-v3 .charitable-reports-v3-toolbar .alignright { margin-left: auto; } /* The datepicker sat in a floated block of its own; inside a flex row it needs no width. */ body.charitable-dash-v3 .charitable-reports-v3-toolbar .charitable-datepicker-container { display: flex; align-items: center; margin: 0; } /* Print's own treatment, which the shipping button already has: white ground, hairline border, label then glyph. Named here so the actions that join it later - Export CSV, Compare - inherit one rule instead of each growing a look of its own. */ body.charitable-dash-v3 .charitable-reports-v3-toolbar .charitable-report-print-button, body.charitable-dash-v3 .charitable-reports-v3-action { display: inline-flex; align-items: center; gap: 7px; } /* The breakdown card's own Download CSV button sits OUTSIDE the toolbar, so the rule above never reached it: it stayed inline-block with a 12px glyph while its three siblings were flex with 15px ones. Same look, same button, different corner of the page - so it gets the same treatment. */ body.charitable-dash-v3 .charitable-report-download-button { display: inline-flex; align-items: center; gap: 7px; } /* ────────────────────────────────────────────────────────────────────────── 2. Card footers The dashboard's "View All Addons" footer, brought to the report cards that lead somewhere. Values that carry the identity are the dashboard's exactly - border-top rgba(24,36,69,.1), link rgb(43,102,209) at weight 500, 8px to the chevron, underline on hover only. Height and padding are scaled to these cards: the dashboard's 70px and 0 30px belong to a full-width section and would be taller here than some cards' content. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-cardfoot { display: flex; align-items: center; height: 46px; padding: 0 20px; margin: 0; background: #fff; border-top: 1px solid rgba( 24, 36, 69, 0.1 ); } body.charitable-dash-v3 .charitable-reports-v3-cardfoot a { display: inline-flex; align-items: center; gap: 8px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; font-size: 13px; line-height: 16px; color: rgb( 43, 102, 209 ); text-decoration: none; box-shadow: none; } body.charitable-dash-v3 .charitable-reports-v3-cardfoot a:hover, body.charitable-dash-v3 .charitable-reports-v3-cardfoot a:focus { text-decoration: underline; } body.charitable-dash-v3 .charitable-reports-v3-cardfoot a svg { flex: none; } /* The footer has to sit flush at the card's bottom edge, so the card's own bottom padding comes off and moves onto the content above it. Without this the footer floats inside the padding with a strip of white below its border, which reads as a mistake rather than as an edge. */ body.charitable-dash-v3 .charitable-report-card:has( > .charitable-reports-v3-cardfoot ) { padding-bottom: 0; } body.charitable-dash-v3 .charitable-report-card:has( > .charitable-reports-v3-cardfoot ) .charitable-toggle-container { padding-bottom: 6px; } /* ────────────────────────────────────────────────────────────────────────── 3. Donations Breakdown collapse toggle Every other card on this page already had one. This section uses a .tablenav header rather than a card header, so it never got the treatment - the toggle is the same element and the same behaviour, positioned against that header instead. ────────────────────────────────────────────────────────────────────────── */ /* These are the REFERENCE chevron's own values, copied rather than invented: "body.charitable_page_charitable-reports .charitable-report-card .header a" in charitable-admin.css gives every other chevron display:block, font-size:23px, line-height:23px. NO colour is set here on purpose: these are and the admin's own link colour (#3858e9, and its :visited) has to reach them, or this one chevron would sit at a fixed colour while the others changed state. An earlier version pinned rgb(73,78,90) here, which was the VISITED colour of a toggle I had clicked while testing - a hardcoded value read off a transient state. This card is a .tablenav.charitable-section, NOT a .charitable-report-card, so that rule never reached it - and the 24x24 inline-flex box at rgba(25,29,45,.6) that used to sit here filled the gap with different numbers, which is exactly why this one chevron rendered smaller and greyer than the other ten. Matching the reference is the whole fix; measured identical afterwards. */ body.charitable-dash-v3 .charitable-section .charitable-reports-v3-breakdown-toggle { display: block; font-size: 23px; line-height: 23px; margin-left: 8px; text-decoration: none; box-shadow: none; } body.charitable-dash-v3 .charitable-section .charitable-reports-v3-breakdown-toggle .charitable-angle-down { transition: transform 0.3s ease; } /* The heading and its toggle on one line. .alignleft.actions is a floated block and the

inside it is block too, so an inline-flex anchor after the heading wrapped to the next line - it rendered as a stray chevron floating under "Donations Breakdown". Making that one wrapper a flex row puts them on the same baseline; scoped to this section so the identical wrapper in the page toolbar above is untouched. */ body.charitable-dash-v3 .tablenav.charitable-section > .alignleft.actions { display: flex; align-items: center; } body.charitable-dash-v3 .tablenav.charitable-section > .alignleft.actions h2 { margin: 0; } /* Donations Breakdown now wears .charitable-container, which on this screen is white and rounded but carries no padding - so the heading and table would sit flush against the card edge. This gives it the same inset the other report cards have. */ body.charitable-dash-v3 .tablenav.charitable-section.charitable-container { padding: 16px 20px; height: auto; margin-bottom: 16px; } body.charitable-dash-v3 .tablenav.charitable-section.charitable-container .charitable-toggle-container { margin-top: 4px; } /* ────────────────────────────────────────────────────────────────────────── 4. Two columns Same proportion as the dashboard: a flexible main column and a fixed 330px rail. align-items start so each column's cards stack from the top independently - that independence is the whole reason these are two containers rather than one grid. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-cols { display: grid; grid-template-columns: minmax( 0, 1fr ) 330px; gap: 16px; align-items: start; } body.charitable-dash-v3 .charitable-reports-v3-main, body.charitable-dash-v3 .charitable-reports-v3-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The cards inside each column carried their own bottom margins from the shipping layout, where they sat in grids that needed them. The columns use gap now, so those margins would double the spacing - and the last card in a column would push a gap past the column's own end. */ body.charitable-dash-v3 .charitable-reports-v3-main > *, body.charitable-dash-v3 .charitable-reports-v3-rail > * { margin-top: 0; margin-bottom: 0; } /* The Activity + Top Donors pair keeps its own two-up grid inside the main column. */ body.charitable-dash-v3 .charitable-reports-v3-main .charitable-section-grid { margin: 0; } /* The Site Analysis card comes from the dashboard, where it sits in a rail of the same width, so it needs no size work - only its outer margin removed so the column's gap is the only spacing. */ body.charitable-dash-v3 .charitable-reports-v3-rail #charitable-dashboard-v2-site-analysis { margin: 0; } @media ( max-width: 1200px ) { body.charitable-dash-v3 .charitable-reports-v3-cols { grid-template-columns: minmax( 0, 1fr ); } } /* ────────────────────────────────────────────────────────────────────────── 5. Cards that carried the old row's proportions charitable-admin.css sets width: 66% on Top Campaigns and width: 33% on Payment Methods, because the two used to share one flex row. Each now owns a column, so both want all of it - without this Top Campaigns stops two thirds of the way across the main column and Payment Methods renders about 110px wide in a 330px rail, wrapping its own heading onto two lines. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-main .charitable-top-campaigns-report, body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-payment-methods-report { width: 100%; } /* The legend was 55% of a third-width card and centred, which at 330px leaves roughly 180px for rows of "icon + name + amount" - so the amount wrapped under the name. In a rail the card IS the narrow measure, and a centred, narrower column inside it buys nothing. */ body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-payment-methods-report .the-legend, body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-reports-v3-sources .the-legend { width: auto; max-width: none; /* 30px is the page's one card inset - see section 21. This said 20px when the cards were padded 20, and at (0,4,1) it outranked the section 21 rule, so Payment Methods was the single card whose rows still sat 10px inside its own title. Corrected here, where the value lives, rather than by adding a longer selector on top of it. width:auto rather than 100% so the padding comes out of the row instead of being added to it - at 100% the bars ran the full 330px of the rail and touched both edges of the card. */ margin: 4px 0 0; padding: 0 30px; } /* The donut is drawn by ApexCharts at a width it measured before these overrides applied, so it can come out wider than the rail and clip. Capping the canvas keeps it inside the card; the chart redraws to its container on the next render. */ body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-payment-methods-report .the-graph, body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-payment-methods-report .apexcharts-canvas { max-width: 100%; } /* ────────────────────────────────────────────────────────────────────────── 6. Activity as a timeline The icons stay and a hairline runs behind them, so the rows read as one sequence rather than as four unrelated entries. The row dividers come off: a connecting line and a rule per row are two separators doing one job, and the line is the one that says these events are ordered. The x is derived: .icon is 25px wide, so its centre is 12.5px in. The y is MEASURED, and deliberately not derived. Deriving it from charitable-admin.css gives 32.5px - li padding-top 15px, plus the img's 5px margin, plus half of its 25px max-width. But the shipped activity icons are 20x19, not 25x25: max-width is a cap the art does not reach, so the real centre is 30px, and a derived 32.5px would start the line below the first icon and run it past the last. Measured against a real rendered row instead. Still one custom property rather than four literals, because it is art-dependent: a future icon set at a different size moves it. ⚠️ The var() calls below are written WITHOUT inner spaces on purpose. This sheet is inlined into the PDF, and dompdf does not trim the name inside var() - `var( --charitable-tl-x )` is looked up including the spaces, so it misses, resolves to 0 and emits a PHP warning for every row. That warning text lands ahead of the PDF bytes on any host with display_errors on and corrupts the download. The line also simply did not draw. Do not reformat these to match the spacing used elsewhere in the file. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-activity-report .the-list ul { --charitable-tl-x: 12.5px; --charitable-tl-y: 30px; } body.charitable-dash-v3 .charitable-activity-report .the-list ul li { position: relative; border-bottom: 0; } body.charitable-dash-v3 .charitable-activity-report .the-list ul li::before { content: ""; position: absolute; left: var(--charitable-tl-x); top: 0; bottom: 0; width: 1px; background: #e3e3e6; } /* Start at the first icon, stop at the last, so the line never overshoots the sequence. */ body.charitable-dash-v3 .charitable-activity-report .the-list ul li:first-child::before { top: var(--charitable-tl-y); } body.charitable-dash-v3 .charitable-activity-report .the-list ul li:last-child::before { bottom: auto; height: var(--charitable-tl-y); } /* A single item is a point, not a sequence - no line at all. */ body.charitable-dash-v3 .charitable-activity-report .the-list ul li:first-child:last-child::before { content: none; } /* The icon sits on top of the line with a white ring, so the line reads as passing behind it. The ring is a box-shadow rather than a border so it costs no layout and cannot shift the 25px column. */ body.charitable-dash-v3 .charitable-activity-report .the-list ul li .icon { position: relative; z-index: 1; } body.charitable-dash-v3 .charitable-activity-report .the-list ul li .icon img { background: #fff; border-radius: 50%; box-shadow: 0 0 0 3px #fff; } /* ────────────────────────────────────────────────────────────────────────── 7. Goal pacing The percentage, the pacing state and the time left, under the existing progress bar. Pills use the same three-tone scale as the dashboard's Site Status - #276c35 good, #8e6c0f attention, #d63638 broken - so a reader who has learned one card's colours has learned this one's. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-pace { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; line-height: 1.4; } body.charitable-dash-v3 .charitable-reports-v3-pace-pct { font-weight: 600; color: #1e1515; font-variant-numeric: tabular-nums; } body.charitable-dash-v3 .charitable-reports-v3-pace-pill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; line-height: 10px; text-transform: uppercase; color: #fff; white-space: nowrap; } body.charitable-dash-v3 .charitable-reports-v3-pace-pill--good { background: #276c35; } body.charitable-dash-v3 .charitable-reports-v3-pace-pill--warn { background: #8e6c0f; } body.charitable-dash-v3 .charitable-reports-v3-pace-pill--bad { background: #d63638; } /* The time left is context, not a claim, so it sits at the quiet end of the row. */ body.charitable-dash-v3 .charitable-reports-v3-pace-left { margin-left: auto; color: #646970; } /* The bar's fill takes the same tone, so the colour is consistent above and below. */ body.charitable-dash-v3 .charitable-reports-v3-progress--good { background-color: #276c35; } body.charitable-dash-v3 .charitable-reports-v3-progress--warn { background-color: #dba617; } body.charitable-dash-v3 .charitable-reports-v3-progress--bad { background-color: #d63638; } /* ────────────────────────────────────────────────────────────────────────── 8. Trend arrows on the headline figures Inline beside the figure, which is where the dashboard puts them - a reader moving between the two screens sees one treatment. The approved mockup showed the arrow on its own line under the figure with the comparison window named; that needs the window as text too, so it waits until there is somewhere to put "vs. Aug 10 - 31" without crowding a centred card. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-cards .charitable-card .charitable-dashboard-v2-stat-change { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } body.charitable-dash-v3 .charitable-cards .charitable-card .charitable-dashboard-v2-stat-change svg { flex: none; display: block; } /* The two colours the shared helper's modifier classes select. Declared here as well as in charitable-admin-dashboard.css because that stylesheet is not loaded on the Reports screen, so without these the figure would inherit the card's own colour and the arrow would be the only thing carrying the direction - which is the exact bug this replaced on the dashboard. */ body.charitable-dash-v3 .charitable-dashboard-v2-stat-change-positive { color: #276c35; } body.charitable-dash-v3 .charitable-dashboard-v2-stat-change-negative { color: #dc2626; } /* ────────────────────────────────────────────────────────────────────────── 9. Pro Addons One row per active addon with a number worth reporting. Rows are divided by a 1px ground showing through a 1px gap rather than per-row borders, so the last row needs no special case. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-addon-list { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; background: #e9e9eb; } body.charitable-dash-v3 .charitable-reports-v3-addon-list li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 20px; background: #fff; } body.charitable-dash-v3 .charitable-reports-v3-addon-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 4px; } body.charitable-dash-v3 .charitable-reports-v3-addon-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } /* The fallback tile. Brand green, which carries white at 6.4:1. */ body.charitable-dash-v3 .charitable-reports-v3-addon-icon--letter { background: #276c35; color: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 700; line-height: 1; } body.charitable-dash-v3 .charitable-reports-v3-addon-meta { flex: 1 1 auto; min-width: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body.charitable-dash-v3 .charitable-reports-v3-addon-meta b { display: block; font-size: 12px; font-weight: 600; color: #1e1515; } body.charitable-dash-v3 .charitable-reports-v3-addon-meta span { font-size: 11px; color: #646970; font-variant-numeric: tabular-nums; } body.charitable-dash-v3 .charitable-reports-v3-addon-link { flex: none; font-size: 11px; color: #056aab; text-decoration: none; box-shadow: none; } body.charitable-dash-v3 .charitable-reports-v3-addon-link:hover { text-decoration: underline; } /* The list runs edge to edge, so the card's own inner padding comes off around it. */ body.charitable-dash-v3 .charitable-reports-v3-addons .charitable-toggle-container { padding: 0; } /* ────────────────────────────────────────────────────────────────────────── 10. Payment Methods as money rows Name, amount and share on one line with a bar under it. The donut goes: in a 330px rail it spent most of the card on a shape carrying four numbers, and the numbers are the point. Bar colours follow the Site Analysis band scale in descending order of share, so the largest gateway reads strongest. They are ordinal, not semantic - no gateway is "good" or "bad". Selectors here carry the full ancestor chain on purpose. charitable-admin.css styles these rows at (0,3,2) with 'display: flex', which beat a leaner selector and silently defeated the grid - the bar became a flex item with no basis and measured 0px wide, so it simply did not appear. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-payment-methods-report .the-graph > #charitable-payment-methods-graph { display: none; } body.charitable-dash-v3 .charitable-reports-v3-rail .charitable-payment-methods-report #charitable-payment-methods-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } /* The Donation Sources coverage line, and its two empty states. Deliberately the same type treatment as .charitable-reports-v3-tile-caption above - Inter 11.5px in #8c8f94 - because it does the same job: a quiet qualifier under a figure, not a second headline. Restated rather than shared because that caption is scoped to the tile grid (.charitable-cards.charitable-reports-v3-tiles), which this card is not part of; extending that selector would have implied a relationship between the two that does not exist. */ body.charitable-dash-v3 .charitable-reports-v3-sources .charitable-reports-v3-sources-note { /* 30px is the page's one card inset, the same value .the-legend and .header use above. Without it this note sat flush against both card edges while every other card's copy was inset - which is what it looked like on first build. */ margin: 12px 0 0; padding: 0 30px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11.5px; line-height: 1.5; color: #8c8f94; } /* No legend above it in the empty states, so the note carries no top gap there. */ body.charitable-dash-v3 .charitable-reports-v3-sources .charitable-report-ui > .charitable-reports-v3-sources-note { margin-top: 0; } /* SHARED WITH THE DONATION SOURCES CARD. Every rule in this family names two containers. The Donation Sources card in the same rail renders an identical shape - a ranked label, a figure, and a proportional bar - so it reuses this layout and this colour ladder rather than restating either. Adding the second selector keeps one definition; a copy scoped to the new card would have been two definitions drifting apart the first time a bar height or a rank colour changed. The ladder itself is unchanged: canon brand green #31714c leads, then #5aa152, #dba617 and #8c8f94 for the tail. Matching this file's existing values on purpose. */ body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: baseline; margin: 0; padding: 0; border: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-name, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-name { font-size: 12px; font-weight: 500; color: #1e1515; } body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-amount, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-amount { font-size: 12px; color: #3c434a; font-variant-numeric: tabular-nums; white-space: nowrap; } body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-bar, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: #f0f0f1; overflow: hidden; } body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-bar i, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row .charitable-reports-v3-pm-bar i { display: block; height: 100%; border-radius: 3px; background: #31714c; } /* Descending emphasis by position. nth-child is the right tool here because the list arrives already ordered by share, so position IS rank - no extra class per row from PHP. */ body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row:nth-child( 2 ) .charitable-reports-v3-pm-bar i, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row:nth-child( 2 ) .charitable-reports-v3-pm-bar i { background: #5aa152; } body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row:nth-child( 3 ) .charitable-reports-v3-pm-bar i, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row:nth-child( 3 ) .charitable-reports-v3-pm-bar i { background: #dba617; } body.charitable-dash-v3 .charitable-payment-methods-report .the-legend li.charitable-reports-v3-pm-row:nth-child( n + 4 ) .charitable-reports-v3-pm-bar i, body.charitable-dash-v3 .charitable-reports-v3-sources .the-legend li.charitable-reports-v3-pm-row:nth-child( n + 4 ) .charitable-reports-v3-pm-bar i { background: #8c8f94; } /* ────────────────────────────────────────────────────────────────────────── 11. Donations Breakdown: quiet days, and a ceiling One row per day means a month-long range is 30 rows, and on most sites nearly all of them are zero - a 30-day filter with a single gift rendered 29 rows of $0.00 and pushed the rest of the page below the fold. Days with nothing are hidden by default and can be shown again. The rows stay in the DOM so the toggle is a class, not a request, and the CSV export still contains every day. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-section .charitable-reports-v3-row-empty { display: none; } body.charitable-dash-v3 .charitable-section.charitable-reports-v3-show-empty .charitable-reports-v3-row-empty { display: table-row; } body.charitable-dash-v3 .charitable-reports-v3-empty-days { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; color: #646970; } body.charitable-dash-v3 .charitable-reports-v3-empty-days-toggle { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; /* inherit, so it is exactly the colour of the sentence it finishes rather than a grey that happens to look the same - the note is #646970 and this now cannot drift from it. The underline is permanent as a result. It was link-blue with an underline on hover only; take the blue away and hover-only leaves nothing to say the words are a control, so the underline becomes the affordance instead of the colour. */ color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } body.charitable-dash-v3 .charitable-reports-v3-empty-days-toggle:hover, body.charitable-dash-v3 .charitable-reports-v3-empty-days-toggle:focus-visible { /* Already underlined, so hover darkens the ink instead. */ color: #1e1515; } /* A ceiling on the TABLE, not on the card's whole collapse container. 520px is roughly twelve rows - enough to read as a table rather than a peephole. It used to sit on .charitable-toggle-container, which also holds the chart, and that had two faults: the chart was inside the scroll region, and setting overflow-y made overflow-x compute to auto, so the card grew a horizontal scrollbar the moment the table reached its edges. Here there is nothing to scroll sideways - the table is exactly as wide as this wrapper - and overflow-x is pinned to hidden so it can never appear. */ body.charitable-dash-v3 .charitable-reports-v3-breakdown-scroll { max-height: 520px; overflow-x: hidden; overflow-y: auto; } /* The granularity note beside the Donations Breakdown heading. */ body.charitable-dash-v3 .charitable-reports-v3-granularity { margin-left: 14px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #646970; } /* ────────────────────────────────────────────────────────────────────────── 12. Headline tiles Label, figure, trend, caption - stacked and left-aligned. The shipping card centres a large figure with its label beneath, which reads as a poster rather than a row of comparable numbers; left-aligned, the four line up on a common left edge and scan as a set. Specificity carries the ancestor chain because charitable-admin.css sets the padding and centring at (0,3,2) on the same element. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-cards.charitable-reports-v3-tiles .charitable-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 16px 18px; text-align: left; } body.charitable-dash-v3 .charitable-cards.charitable-reports-v3-tiles .charitable-reports-v3-tile-label { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #646970; } body.charitable-dash-v3 .charitable-cards.charitable-reports-v3-tiles .charitable-card strong { margin: 4px 0 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: normal; color: #1e1515; font-variant-numeric: tabular-nums; } /* The trend gets its own line here, unlike the dashboard's inline treatment - there is a caption under it naming the period, and a percentage sitting between a figure and its own explanation reads as part of the figure. */ body.charitable-dash-v3 .charitable-cards.charitable-reports-v3-tiles .charitable-dashboard-v2-stat-change { margin-top: 6px; } body.charitable-dash-v3 .charitable-cards.charitable-reports-v3-tiles .charitable-reports-v3-tile-caption { margin-top: 7px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11.5px; line-height: 1.4; color: #8c8f94; font-variant-numeric: tabular-nums; } /* ────────────────────────────────────────────────────────────────────────── 13. The chevron owns the top-right corner On every card the collapse chevron is the last thing in the header, and anything else in that corner sits to its left. .alignright is a float, so the chevron needs to be in the same flex row as the button rather than floated separately. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .tablenav.charitable-section > .alignright { float: none; display: flex; align-items: center; /* justify-content, NOT margin-left: auto. Dropping the float made this box span the full row - correct - but as a flex container it then packed its children at its own left edge, so the button and chevron sat beside the heading instead of at the card's right edge. The auto margin was on the CONTAINER, which had nowhere to move; what needed saying was where the container packs its contents. */ justify-content: flex-end; gap: 10px; } body.charitable-dash-v3 .tablenav.charitable-section > .alignright form { margin: 0; } /* ────────────────────────────────────────────────────────────────────────── 14. Recurring Revenue Three figures across, each with its own label and caption. The same tile anatomy as the headline row, reused rather than restyled, so a reader meets one pattern twice instead of two patterns once. ────────────────────────────────────────────────────────────────────────── */ /* THE STATS SIT IN A BOX, per the mockup's .ministats. It was a full-bleed strip with dividers, so the three figures ran edge to edge and the only thing separating them from the table underneath was whitespace. The mockup bounds them: a bordered, rounded box inset from the card, which is what gives the card the rule under its header and the rule above what follows that they are meant to have. The dividers are the box's own background showing through a 1px grid gap - one colour does the border and the two dividers, so they cannot disagree. #d0d1d3 is this page's border colour throughout (section 21); the mockup used #dcdcde, before the page settled on one. Shared with the locked Donation Recovery card, which uses the same strip. Both carry THREE tiles, so this rule serves both unchanged - Recurring Revenue briefly had a fourth and a scoped override to match, and both went when the untrustworthy MRR tile was dropped (see section 25). */ body.charitable-dash-v3 .charitable-reports-v3-recurring-stats { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 1px; margin: 0 30px 14px; border: 1px solid #d0d1d3; border-radius: 3px; background: #d0d1d3; /* So the cells' square corners cannot poke through the box's rounded ones. */ overflow: hidden; } body.charitable-dash-v3 .charitable-reports-v3-recurring-stats > div { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 20px; background: #fff; } body.charitable-dash-v3 .charitable-reports-v3-recurring-stats strong { margin: 4px 0 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: normal; color: #1e1515; font-variant-numeric: tabular-nums; } /* The lapsed-plan count is the one figure in this strip that should read as a warning, so it takes #8e6c0f - the "attention" tone of the same three-step scale as the goal pacing pills in section 7 and the dashboard's Site Status, rather than a fourth amber invented here. Not the red: on-hold and expired plans are giving that has stopped, which is a task, not a fault in the site. It is applied by the view only when the count is above zero. A bold amber nought would draw the eye to the one state on this card that needs nothing doing about it. CARRIES THE WHOLE CHAIN, including the strong, and that is load-bearing. The rule above is (0,2,2); a bare `.charitable-reports-v3-recurring-alert` on the body is (0,2,1), which LOSES on the element count no matter how far down the file it sits. Measured: the amber did not apply at all on the first attempt. The rule this replaced - .charitable-reports-v3-recurring-down, the red on a negative net in the old month table - had the identical defect against `...-months td` and so had never once painted anything. Two dead rules for one cause is the reason this note is here rather than in a commit message. */ body.charitable-dash-v3 .charitable-reports-v3-recurring-stats strong.charitable-reports-v3-recurring-alert { color: #8e6c0f; } /* The Pro pill in a card header. Marks the gate without hiding the card, which is the point of showing this report live rather than behind the locked treatment. */ body.charitable-dash-v3 .charitable-reports-v3-pro-pill { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 7px; border-radius: 20px; background: #fc9a2a; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; line-height: 10px; text-transform: uppercase; color: #fff; } @media ( max-width: 900px ) { body.charitable-dash-v3 .charitable-reports-v3-recurring-stats { grid-template-columns: 1fr; } } /* ────────────────────────────────────────────────────────────────────────── 15. The locked preview Real card chrome, sample figures behind a blur, and a centred card naming what the report answers. It sells by showing the SHAPE of the report rather than a feature list. The blur is on an inner wrapper, not the card, so the header and its "example data" note stay sharp - the label has to be readable or the numbers read as the site's own. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-locked-body { position: relative; } body.charitable-dash-v3 .charitable-reports-v3-locked-masked { filter: blur( 3.5px ); opacity: 0.42; pointer-events: none; user-select: none; } body.charitable-dash-v3 .charitable-reports-v3-locked-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; } body.charitable-dash-v3 .charitable-reports-v3-locked-card { max-width: 420px; padding: 20px 24px; border: 1px solid #dcdcde; border-radius: 5px; background: #fff; box-shadow: 0 6px 20px rgba( 30, 21, 21, 0.13 ); text-align: center; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body.charitable-dash-v3 .charitable-reports-v3-locked-card h5 { margin: 9px 0 6px; font-size: 16px; font-weight: 700; color: #1e1515; } body.charitable-dash-v3 .charitable-reports-v3-locked-card p { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: #646970; } body.charitable-dash-v3 .charitable-reports-v3-locked-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } /* The pill inside the locked card has no heading beside it, so it needs no left margin. */ body.charitable-dash-v3 .charitable-reports-v3-locked-card .charitable-reports-v3-pro-pill { margin-left: 0; } /* The "example data" note. Deliberately in the HEADER and outside the blur: sample figures that a reader could mistake for their own are worse than no card, so the label that prevents that must stay legible. */ body.charitable-dash-v3 .charitable-reports-v3-locked-note { margin-left: auto; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; color: #8c8f94; } body.charitable-dash-v3 .charitable-reports-v3-locked .header { display: flex; align-items: center; } /* ────────────────────────────────────────────────────────────────────────── 16. Compare dialog A panel over the page rather than a new screen: the comparison is a question about the range you are already looking at, and leaving the page to ask it loses the context that prompted it. ────────────────────────────────────────────────────────────────────────── */ /* The dialog is hidden by the [hidden] attribute, and this rule has to say so. The bug this fixes: giving .charitable-reports-v3-compare-dialog "display: flex" overrode the user agent's own [hidden] { display: none }, because any author declaration beats it. The panel was therefore visible on every page load, sitting over the report, and clicking the close button - which sets .hidden = true - changed nothing. It read as a popup that could not be dismissed. Stated before the layout rule so the layout cannot resurrect it, and with the attribute selector rather than a class so the JS keeps using .hidden, which is what screen readers act on. */ body.charitable-dash-v3 .charitable-reports-v3-compare-dialog[hidden] { display: none; } /* Centred both ways. It used to be pinned to the top with a 60px offset, which put it high on the screen and well left of centre of the reader's attention on a tall report page. align-items:center is what does the vertical centring, and it is safe with overflow-y:auto here because the panel is short; a panel taller than the viewport would have its top clipped, which is the usual trap with this pattern. The compare panel is a header, one row of dates and a six-row table, so it cannot reach that height. */ body.charitable-dash-v3 .charitable-reports-v3-compare-dialog { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } /* z-index above wp-admin's own 9990-ish chrome but below nothing else this page opens. */ body.charitable-dash-v3 .charitable-reports-v3-compare-backdrop { position: fixed; inset: 0; background: rgba( 30, 21, 21, 0.45 ); } body.charitable-dash-v3 .charitable-reports-v3-compare-panel { position: relative; width: 100%; max-width: 720px; background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba( 30, 21, 21, 0.25 ); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* THE HEADER MATCHES CHARITABLE'S OTHER ADMIN MODALS. The reference is .charitable-modal .charitable-modal-header in charitable-universal-modal.css (the Filter Donors dialog): a black bar, the title in rgba(255,255,255,0.9) at 18px/21px weight 600, and the close icon pushed to the far right by space-between. Those values are copied from that file rather than chosen here, so the two dialogs agree. The one thing not copied is its 30px padding: the rest of this panel works to a 20px gutter, and a 30px header would leave the title hanging inside the column of everything below it. 20px horizontally, a little taller vertically for the bar. The bottom border goes - the black bar is its own boundary, and a grey rule under it read as a seam. */ body.charitable-dash-v3 .charitable-reports-v3-compare-panel > header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 20px; background-color: #000; border-bottom: 0; border-radius: 6px 6px 0 0; } body.charitable-dash-v3 .charitable-reports-v3-compare-panel h2 { margin: 0; padding: 0; font-size: 18px; line-height: 21px; font-weight: 600; color: rgba( 255, 255, 255, 0.9 ); } /* The same close.svg the other modals use, brightened the same way so it reads on black. */ body.charitable-dash-v3 .charitable-reports-v3-compare-x { display: flex; align-items: center; padding: 0; border: 0; background: none; line-height: 1; cursor: pointer; filter: brightness( 1.5 ); } body.charitable-dash-v3 .charitable-reports-v3-compare-x img { display: block; width: 14px; height: 14px; } body.charitable-dash-v3 .charitable-reports-v3-compare-ranges { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #f0f0f1; } body.charitable-dash-v3 .charitable-reports-v3-compare-ranges label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #646970; } /* The two date inputs of a range sit on one line, because they are one value. */ body.charitable-dash-v3 .charitable-reports-v3-compare-ranges label span { display: block; } body.charitable-dash-v3 .charitable-reports-v3-compare-ranges input { font-family: inherit; font-size: 12px; } /* The Compare button in Charitable's CTA orange rather than WordPress's blue. #fc9a2a is canon brand-orange, and since 1.8.19 it is also this file's CTA orange throughout - the locked card's button, the spinner and the rest of the page. It replaced the as-built #e27730 so that canon and the screen agree. Same note as sections 18 and 25. Keyed on the ID on purpose. Core paints .button-primary at (0,1,0) and a class chain would win here, but every other button on this page has needed a specificity fight at some point - see the locked-card rule, which lost its first attempt to a (0,4,2) selector in charitable-admin.css. The id is already in the markup for the JS, it is (1,0,0), and it ends the argument. */ body.charitable-dash-v3 #charitable-compare-run.button.button-primary { background: #fc9a2a; border-color: #fc9a2a; color: #fff; box-shadow: none; text-shadow: none; } /* #fc8c0c is the hover this file already pairs with #fc9a2a on the locked card's button - the direct analogue of this one - so the two behave identically on hover. */ body.charitable-dash-v3 #charitable-compare-run.button.button-primary:hover, body.charitable-dash-v3 #charitable-compare-run.button.button-primary:focus { background: #fc8c0c; border-color: #fc8c0c; color: #fff; } body.charitable-dash-v3 .charitable-reports-v3-compare-result { padding: 4px 20px 20px; } body.charitable-dash-v3 .charitable-reports-v3-compare-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } body.charitable-dash-v3 .charitable-reports-v3-compare-table th { padding: 10px 12px 8px 0; border-bottom: 1px solid #dcdcde; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #646970; text-align: left; white-space: nowrap; } body.charitable-dash-v3 .charitable-reports-v3-compare-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid #f2f2f3; color: #3c434a; } body.charitable-dash-v3 .charitable-reports-v3-compare-table th.num, body.charitable-dash-v3 .charitable-reports-v3-compare-table td.num { text-align: right; font-variant-numeric: tabular-nums; } body.charitable-dash-v3 .charitable-reports-v3-compare-table th:last-child, body.charitable-dash-v3 .charitable-reports-v3-compare-table td:last-child { padding-right: 0; } /* The change cell holds the same arrow markup the tiles use, so it needs the same alignment. */ body.charitable-dash-v3 .charitable-reports-v3-compare-table .charitable-dashboard-v2-stat-change { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; } body.charitable-dash-v3 .charitable-reports-v3-compare-none { color: #a7aaad; } body.charitable-dash-v3 .charitable-reports-v3-compare-error { margin: 8px 0 0; color: #d63638; font-size: 12.5px; } /* Stop the page behind scrolling while the panel is open. */ body.charitable-compare-open { overflow: hidden; } /* ────────────────────────────────────────────────────────────────────────── 17. Top Campaigns as a table Campaign, raised, goal, pacing, ends. The shipping list put four labelled facts in a paragraph per campaign, which cannot be compared down a column - and that comparison is the whole job of a "top campaigns" card. ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-campaigns { width: 100%; border-collapse: collapse; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12.5px; } body.charitable-dash-v3 .charitable-reports-v3-campaigns th { padding: 0 16px 8px 0; border-bottom: 1px solid #dcdcde; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #646970; text-align: left; white-space: nowrap; } body.charitable-dash-v3 .charitable-reports-v3-campaigns td { padding: 11px 16px 11px 0; border-bottom: 1px solid #f2f2f3; color: #3c434a; vertical-align: middle; } body.charitable-dash-v3 .charitable-reports-v3-campaigns tr:last-child td { border-bottom: 0; } body.charitable-dash-v3 .charitable-reports-v3-campaigns th.num, body.charitable-dash-v3 .charitable-reports-v3-campaigns td.num { text-align: right; font-variant-numeric: tabular-nums; } body.charitable-dash-v3 .charitable-reports-v3-campaigns th:last-child, body.charitable-dash-v3 .charitable-reports-v3-campaigns td:last-child { padding-right: 0; } body.charitable-dash-v3 .charitable-reports-v3-campaign-name a { color: #1e1515; font-weight: 500; text-decoration: none; box-shadow: none; } body.charitable-dash-v3 .charitable-reports-v3-campaign-name a:hover { text-decoration: underline; } /* The pacing cell: a bar and its figure on one line, the bar taking the spare width. */ body.charitable-dash-v3 .charitable-reports-v3-campaign-pacing { display: flex; align-items: center; gap: 9px; min-width: 150px; } body.charitable-dash-v3 .charitable-reports-v3-campaign-track { flex: 1 1 60px; height: 6px; border-radius: 3px; background: #f0f0f1; overflow: hidden; } body.charitable-dash-v3 .charitable-reports-v3-campaign-track i { display: block; height: 100%; border-radius: 3px; background: #5aa152; } body.charitable-dash-v3 .charitable-reports-v3-campaign-pct { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: #646970; } /* An em dash where there is no goal: no target means no progress, and a 0% bar would read as failure rather than as "not measured that way". */ body.charitable-dash-v3 .charitable-reports-v3-campaign-none { color: #a7aaad; } /* ────────────────────────────────────────────────────────────────────────── 18. Email This Report, the chart's header, and the locked CTA ────────────────────────────────────────────────────────────────────────── */ body.charitable-dash-v3 .charitable-reports-v3-digest-body { padding: 4px 20px 18px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body.charitable-dash-v3 .charitable-reports-v3-digest-body p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #646970; } /* The state line, and it is the point of the card in this build: the button is inert because the scheduling behind it does not exist yet, so the card has to say so rather than accept a click and do nothing. */ /* THE WEEKLY SUMMARY SWITCH. Every declaration between here and the state rule is COPIED from .charitable-toggle-label / -input / -switch in charitable-wpcf-migration.css, which is where the admin's settings toggles are styled - the off grey #c3c4c7, the on green #5aa152, the 38x22 track and the 18px knob at translateX(16px). Copied rather than converted so the switch on this card and the switches in Settings are the same object; #5aa152 is the plugin's general-purpose green and is not a brand value to be converged. Reproduced here rather than by enqueueing that stylesheet, which belongs to the WPForms migration screen and would arrive on Reports carrying everything else in it. */ body.charitable-dash-v3 .charitable-reports-v3-digest-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-input { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; clip: rect( 0 0 0 0 ); overflow: hidden; } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-switch { position: relative; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 11px; background: #c3c4c7; transition: background-color 0.18s ease; } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 ); transition: transform 0.18s ease; } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-input:checked + .charitable-toggle-switch { background: #5aa152; } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-input:checked + .charitable-toggle-switch::after { transform: translateX( 16px ); } body.charitable-dash-v3 .charitable-reports-v3-digest-controls .charitable-toggle-input:focus-visible + .charitable-toggle-switch { box-shadow: 0 0 0 2px rgba( 34, 113, 177, 0.4 ); } body.charitable-dash-v3 .charitable-reports-v3-digest-toggle-text { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 500; color: #1e1515; } /* The switch carries the state, so the button does not need to shout. It is hidden outright when the summary is off - [hidden] needs saying because .button sets display. */ body.charitable-dash-v3 .charitable-reports-v3-digest-controls .button[hidden] { display: none; } body.charitable-dash-v3 .charitable-reports-v3-digest-state { margin: 10px 0 0 !important; font-size: 11px; color: #8c8f94; } body.charitable-dash-v3 .charitable-reports-v3-digest-body .button[disabled] { opacity: 0.65; cursor: not-allowed; } /* The chart's header holds only a chevron, so it needs no height of its own beyond the target - and the heading inside it is screen-reader only, because the figures above the chart already name what it plots. */ body.charitable-dash-v3 .charitable-reports-v3-chart-header { display: flex; justify-content: flex-end; align-items: center; min-height: 0; padding: 10px 16px 0; border: 0; } /* The locked card's primary action in Charitable's CTA orange rather than WordPress's blue-green button-primary. This is the one place the mockup's palette and the inherited button style disagreed, and the upsell is where brand colour earns its keep. White on #fc9a2a measures 2.14:1, below AA for small text and below the 3:1 large-text bar. The as-built #e27730 this replaced managed 3.04:1, so the canon conversion cost contrast here. Flagged, not fixed: ink #1e1515 on canon orange is 8.35:1 and is the fix if these CTAs need to be compliant, but that is a visual decision across every Charitable CTA. The selector carries the full ancestor chain because charitable-admin.css paints this button green at (0,4,2) - "body.charitable_page_charitable-reports .charitable-overview-report a.button.button-primary". A leaner selector loses on specificity no matter how much later it is declared, which is what happened on the first attempt. */ body.charitable-dash-v3 .charitable-overview-report .charitable-reports-v3-locked-actions a.button.button-primary { background: #fc9a2a; border-color: #fc9a2a; color: #fff; box-shadow: none; text-shadow: none; } body.charitable-dash-v3 .charitable-overview-report .charitable-reports-v3-locked-actions a.button.button-primary:hover, body.charitable-dash-v3 .charitable-overview-report .charitable-reports-v3-locked-actions a.button.button-primary:focus { background: #fc8c0c; border-color: #fc8c0c; color: #fff; } /* The locked card's chevron needs the body wrapper to be what collapses, not the whole card - the toggle handler hides .charitable-toggle-container, and on this card the content lives in .charitable-reports-v3-locked-body instead. Giving that wrapper the container class as well is cheaper than teaching the handler a second name. */ body.charitable-dash-v3 .charitable-reports-v3-locked .header { gap: 10px; } /* AUTO, not 0. The locked header is the only one on the page set to display:flex - every other card header is display:block, where the base stylesheet floats the chevron to the right and lands it 31px inside the card. Under flex that float does nothing, so `margin-left: 0` left the chevron sitting immediately after the Pro pill: 1,075px short of the corner on a full-width main-column card, and 83px short in the rail, where it was close enough to look intentional. margin-left: auto restores the same result flex-natively, and absorbs the header's 10px gap so the chevron lands on the identical 31px inset as the other eight. The pill is what exposed this. Pro's locked header carries only a title and a chevron, so nothing sat between them to make the misplacement visible. */ body.charitable-dash-v3 .charitable-reports-v3-locked .header .charitable-toggle { margin-left: auto; } /* --------------------------------------------------------------------------- 19. Chevron alignment across every collapsible card --------------------------------------------------------------------------- Eight of the ten chevrons sat at 30px from the card's right edge and 20px from its top. Two did not, and both were off for the same reason: the inset is CUMULATIVE. The chart card carries 20px/30px of its own padding and then its header added 10px/16px again, landing the chevron at 30/46; the breakdown card is padded 20px rather than 30px, landing it at 20. A chevron is the control a reader goes to a corner to find, so the ten of them need to form one vertical line down the page - a 16px stagger is visible while scanning even though each one is individually "in the corner". Measured after the fact, not derived: the numbers above come from the rendered boxes. --------------------------------------------------------------------------- */ body.charitable-dash-v3 .charitable-reports-v3-chart-header { /* Zeroed so the CARD's 20px/30px is the whole inset, matching the other eight. */ padding: 0; } /* This selector must carry the WHOLE ancestor chain, and the first version did not. 'body.charitable-dash-v3 [data-section-name] .alignright' is (0,3,1) and lost to the existing 'body.charitable-dash-v3 .tablenav.charitable-section > .alignright' at (0,4,1), which sets align-items: center - so the rule was in the file, matched the element, and changed nothing. Source order does not decide this; specificity does. */ body.charitable-dash-v3 .tablenav.charitable-section[data-section-name="donations_breakdown"] > .alignright { /* Centred, not top-aligned. An earlier version pinned the chevron to the top of this row to line it up with the other cards' chevrons, but this header holds three things of three different heights - an 18px title, a 38px button and a 23px chevron - and the version that reads correctly is the one where all three share a centre line. The .alignleft rule below puts the title on that same line by giving it the button's height to centre within. */ align-items: center; } body.charitable-dash-v3 .tablenav.charitable-section[data-section-name="donations_breakdown"] > .alignleft { display: flex; align-items: center; /* The download button's height, so the title centres against the same band. */ min-height: 38px; } /* Inset the chart's right edge. The breakdown card itself is padded `12px 0 16px` - no horizontal padding at all - and the two header rows supply their own 30px instead. The chart wrapper had none, so the plot ran the full 1262px to the card's right edge while the title and Download CSV button sat 30px inside it, and the last x-axis label was printed hard against the border. 30px because that is the header's own inset, which lands the chart's right edge on the collapse chevron's - the rightmost thing in the header, measured at 1425 for both. Not the Download CSV button: that sits ~50px further in, with the chevron to its right. Padding-right only: the left side is already visually inset by the y-axis labels, and padding there would double the gap. This has to be a PADDING on the wrapper rather than a width on the chart. ApexCharts measures its parent's content box when it renders and writes an explicit pixel width onto .apexcharts-canvas, so the padding has to be in the CSS before it initialises - which it is. Setting a width on the canvas instead would be overwritten on the next resize re-render. */ body.charitable-dash-v3 .tablenav.charitable-section[data-section-name="donations_breakdown"] .charitable-headline-graph { padding-right: 30px; } /* --------------------------------------------------------------------------- 20. Site Analysis, as a card in the rail --------------------------------------------------------------------------- The block itself comes from the dashboard and paints no background, so the card is entirely the wrapper's job. Only three things are needed: the positioning context for the chevron, the chevron in the same corner as the other nine, and removal of the bottom padding the section carries for a context where nothing follows it - here a footer does. --------------------------------------------------------------------------- */ body.charitable-dash-v3 .charitable-reports-v3-analysis { position: relative; } body.charitable-dash-v3 .charitable-reports-v3-analysis .charitable-reports-v3-analysis-toggle { /* Absolute, because the title it belongs beside lives inside the collapsing container and cannot host it. 20/30 is the figure every other chevron on this page resolves to. */ /* Absolute because this chevron lives outside the collapsing container, but the GLYPH is the shared one: display:block at 23px/23px with no colour of its own, which is what .charitable-report-card .header a gives every other chevron. The 24x24 inline-flex box at rgba(25,29,45,.6) that was here made this the only small, grey arrow on the page. */ position: absolute; top: 20px; right: 30px; z-index: 2; display: block; font-size: 23px; line-height: 23px; text-decoration: none; box-shadow: none; } body.charitable-dash-v3 .charitable-reports-v3-analysis .charitable-reports-v3-analysis-toggle .charitable-angle-down { transition: transform 0.3s ease; } /* The rule that used to sit here set this section's padding-bottom to 4px, and it was already dead - section 21 says so in its own note and re-declares it where it can win. Deleted rather than left: a later edit added an id to it by accident, which promoted a rule nobody thought was live into the one that decided the layout, and cost a debugging pass to find. */ /* The title row has to leave the corner free. "Nonprofit Site Analysis" plus its NEW badge is the longest header in the rail, and at 330px wide it would otherwise run under the chevron. */ body.charitable-dash-v3 .charitable-reports-v3-analysis .charitable-dashboard-v2-section-header { padding-right: 34px; } /* --------------------------------------------------------------------------- 21. Card edges, one content inset, and two gaps --------------------------------------------------------------------------- Four separate reports, one cause between them: the cards had no edge and no shared inset, so nothing on the page agreed with anything else. THE BORDER. .charitable-container carries only border-radius and background-color #FFF - no border at all - so a card was white-on-grey and nothing more. Contrast measured against the #f0f0f1 page ground: #dcdcde 1.202:1 already in this file - reads as no edge #dadada 1.227:1 CANON product-ui border - still reads as no edge here #d0d1d3 1.342:1 <- shipped #c3c4c7 1.531:1 WordPress core's panel border - too heavy at this size #d0d1d3 sits one step inside WP core's #c3c4c7, on the same neutral hue as both of WP's greys. CANON IS #dadada: this is deliberately darker than canon because canon measures indistinguishable from having no border at all on this ground, and a card has to read as a card. Stated out loud rather than left to look like drift. #c3c4c7 was tried first and was too dark. THE INSET. Nine of eleven card titles sit 30px from the card's left edge, and every chevron sits 30px from the right. Card bodies sat at 20, 30, 35, 45 and 56, and every footer at 20, so content stepped in and out down the page against a title that never moved. 30px is now the single inset: it is what the titles already use and it mirrors the chevron, so the card has one left edge and one right edge rather than five. --------------------------------------------------------------------------- */ body.charitable-dash-v3 .charitable-container[data-section-name], body.charitable-dash-v3 .charitable-cards.charitable-reports-v3-tiles .charitable-card { border: 1px solid #d0d1d3; } /* Footers were 10px inside the title. */ body.charitable-dash-v3 .charitable-reports-v3-cardfoot { padding: 0 30px; } /* Site Analysis needs the ID carried. render_site_analysis_section() emits its own