feat: RCT inline abbreviation tooltip on verdict legend strip (v2.2.1)
- Add abbrs field to Established verdict taxonomy item - Add peptide_starter_render_desc() helper — builds safe HTML from esc_html/esc_attr components; replaces abbr terms with <abbr> tap-targets - Update front-page.php description output to use render_desc() - Add assets/js/abbr-tooltip.js — popover open/close, outside-click dismissal, keyboard accessibility (Enter/Space/Escape), ARIA attrs - Enqueue abbr-tooltip.js on is_front_page() only - Add .pr-abbr and .pr-abbr-popover CSS with dashed underline affordance, fade-in animation, dark-mode-safe surface variables - Fix PEPTIDE_STARTER_VERSION drift: 2.0.0-alpha.3 → 2.2.1 Routing note: this is a theme change (not PR Core). Term 'RCT' is scoped to the verdict legend strip only; monograph bodies are unaffected.
This commit is contained in:
54
style.css
54
style.css
@@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter
|
||||
Description: Premium, accessible WordPress theme for scientific peptide reference database
|
||||
Author: Peptide Repo
|
||||
Author URI: https://peptiderepo.com
|
||||
Version: 2.2.0
|
||||
Version: 2.2.1
|
||||
License: GPL v2 or later
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: peptide-starter
|
||||
@@ -3410,3 +3410,55 @@ html[data-theme="dark"] .ps-verify-required {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Abbreviation tooltip (.pr-abbr / .pr-abbr-popover)
|
||||
Inline tap-targets for glossary terms in the verdict legend strip.
|
||||
@see inc/verdict-helpers.php — peptide_starter_render_desc() emits .pr-abbr
|
||||
@see assets/js/abbr-tooltip.js — JS popover logic
|
||||
========================================================================== */
|
||||
|
||||
.pr-abbr {
|
||||
border-bottom: 1px dashed currentColor;
|
||||
cursor: help;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
/* Slightly muted so the dashed line reads as "interactive" not "broken link". */
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.pr-abbr:hover,
|
||||
.pr-abbr:focus,
|
||||
.pr-abbr--active {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.pr-abbr-popover {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-width: min( 280px, calc( 100vw - 32px ) );
|
||||
padding: 0.6rem 0.85rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5;
|
||||
/* Use theme surface colours so dark-mode inherits correctly. */
|
||||
background-color: var(--color-surface-elevated, #1e1e2e);
|
||||
color: var(--color-text-primary, #e2e2f0);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
/* Subtle fade-in. */
|
||||
animation: pr-popover-in 0.12s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes pr-popover-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY( -4px );
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY( 0 );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user