/** * WPCode snippet #3 — "Search: results styling" * * Code Type: CSS Snippet * Location: Site Wide Header * Priority: 10 */ /* --------------------------------------------------------------- * Anti-flicker: keep results invisible for the split second before * the JS has filtered them, so hidden items never flash on screen. * The element gets .acps-search-ready as soon as JS finishes * (and unconditionally after 2s, so this can never strand the page). * * If you'd rather accept the flash than risk any blank period, * delete this whole block. * --------------------------------------------------------------- */ .swp-search-results, .acps-search-results { visibility: hidden; /* Failsafe, in CSS rather than JS: reveal after 2s no matter what. If the JS snippet is inactive, scoped to the wrong pages, or throws before it finishes, the results still appear. Nothing here can leave the page permanently blank. */ animation: acps-failsafe-reveal 0s linear 2s forwards; } @keyframes acps-failsafe-reveal { to { visibility: visible; } } html.acps-search-ready .swp-search-results, html.acps-search-ready .acps-search-results { visibility: visible; } /* Belt and braces for reduced-motion and no-script environments, where the animation above may never run. */ @media ( scripting: none ), ( prefers-reduced-motion: reduce ) { .swp-search-results, .acps-search-results { visibility: visible; } } /* --------------------------------------------------------------- * Filtered results * --------------------------------------------------------------- */ /* hideMode: 'remove' — the JS deletes the node, but this catches any that slipped through before removal. */ .acps-filtered-out:not( .acps-dimmed ) { display: none !important; } /* hideMode: 'dim' — useful while you're tuning the rules. */ .acps-filtered-out.acps-dimmed { opacity: 0.35; filter: grayscale( 1 ); position: relative; } .acps-filtered-out.acps-dimmed::after { content: 'filtered: ' attr( data-acps-reason ); position: absolute; inset-inline-end: 0.5rem; inset-block-start: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #8a1c1c; background: #fde8e8; border: 1px solid #f0b4b4; border-radius: 3px; padding: 0.15em 0.5em; } /* --------------------------------------------------------------- * Admin preview — you still see hidden items, clearly marked. * --------------------------------------------------------------- */ .acps-admin-hidden { position: relative; border-inline-start: 4px solid #d63638; padding-inline-start: 0.85rem; background: linear-gradient( 90deg, rgba( 214, 54, 56, 0.06 ), transparent 40% ); } .acps-admin-hidden::before { content: 'Hidden from visitors'; display: inline-block; margin-block-end: 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #d63638; border-radius: 3px; padding: 0.2em 0.55em; } /* --------------------------------------------------------------- * Empty state * --------------------------------------------------------------- */ .acps-empty-message { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px dashed #c9c9c9; border-radius: 6px; background: #fafafa; color: #555; font-size: 1rem; } /* --------------------------------------------------------------- * General result polish — adjust or delete to taste. * --------------------------------------------------------------- */ .acps-result { padding-block: 1.1rem; } .acps-result { border-block-end: 1px solid #ececec; } .acps-result:last-child { border-block-end: 0; } .swp-result-item .entry-title, .acps-result .entry-title { margin: 0 0 0.3rem; font-size: 2.15rem; line-height: 1.35; } .acps-result .entry-title a { text-decoration: none; } .acps-result .entry-title a:hover, .acps-result .entry-title a:focus-visible { text-decoration: underline; } /* --------------------------------------------------------------- * SearchWP specifics * --------------------------------------------------------------- */ /* The admin "Hidden from visitors" flag reads better above the title than floating beside the thumbnail. */ .swp-result-item.acps-admin-hidden .swp-result-item--info-container { padding-block-start: 0.25rem; } /* Keep the term highlighting legible on a dimmed row. */ .acps-filtered-out.acps-dimmed mark.searchwp-highlight { background: transparent; color: inherit; } /* --------------------------------------------------------------- * Rule-driven extras: 'badge', 'notice' and 'top' actions * --------------------------------------------------------------- */ .acps-badge { display: inline-block; margin-inline-start: 0.5em; vertical-align: middle; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #172a51; background: #eff7ff; border: 1px solid #172a51; border-radius: 999px; padding: 0.2em 0.7em; white-space: nowrap; } .acps-notice { margin: 0 0 1.5rem; padding: 0.9rem 1.15rem; border-inline-start: 4px solid #2271b1; border-radius: 4px; background: #f0f6fc; color: #1c3d5a; } /* A pinned row is no longer marked. Being first is the signal; a colour and a rule on top of that reads as a warning rather than a promotion. */ /* Rows sunk to the bottom by a `then: 'bottom'` rule. Deliberately quiet — they're de-prioritised, not flagged. Delete this block for no visual difference at all. */ .acps-sunk { opacity: 0.85; } .acps-sunk .entry-title { font-size: 1rem; } /* --------------------------------------------------------------- * People results * * Own classes rather than the result ones, so a rule written to * hide or reorder page results never catches a person. * --------------------------------------------------------------- */ .wpsqr-people { margin-block-end: 2rem; padding-block-end: 1.25rem; border-block-end: 1px solid #e6e6e6; } .wpsqr-people__heading { margin: 0 0 .75rem; font-size: 1.05rem; color: #444; } .wpsqr-people__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) ); } .wpsqr-person { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid #e6e6e6; border-radius: 6px; background: #fff; } .wpsqr-person__photo { inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #eef2f7; } .wpsqr-person__photo--empty { display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; color: #4678aa; } .wpsqr-person__detail { display: flex; flex-direction: column; min-inline-size: 0; } .wpsqr-person__name { font-weight: 600; line-height: 1.3; } .wpsqr-person__meta, .wpsqr-person__contact { font-size: .82rem; color: #5c5f62; overflow-wrap: anywhere; } .wpsqr-people__more { margin: .9rem 0 0; font-size: .9rem; } @media ( prefers-color-scheme: dark ) { .wpsqr-person { background: transparent; } } /* --------------------------------------------------------------- * Site styling * * Moved here from the page's inline CSS so it travels with the * plugin and survives the page being rebuilt. * * Scoped to the results wrappers throughout. `mark` in particular * is a document-wide element the theme also styles — restyling it * globally from a search plugin would change it wherever else it * is used. * --------------------------------------------------------------- */ .swp-search-results mark, .swp-search-results .mark, .wpsqr-results mark, .wpsqr-results .mark { background-color: #fff; color: inherit; padding: 0; margin: 0; border-radius: 0; } /* The extra wrapper class outruns SearchWP's own `.swp-result-item .swp-result-item--button`, so these hold whichever stylesheet the browser loads last. */ .swp-search-results .swp-result-item .swp-result-item--button, .wpsqr-results .swp-result-item .swp-result-item--button { background: #4678aa; border-radius: 8px; color: #fff; } .swp-search-results .swp-result-item .swp-result-item--button:hover, .swp-search-results .swp-result-item .swp-result-item--button:focus, .wpsqr-results .swp-result-item .swp-result-item--button:hover, .wpsqr-results .swp-result-item .swp-result-item--button:focus { background: #3a6391; color: #fff; } /* SearchWP sets `margin: 0` on the description, which leaves it flush against the edge of the row. */ .swp-search-results .swp-result-item--desc, .wpsqr-results .swp-result-item--desc { margin: 0 0.5rem; }