/** * plg_system_fgcustomrightclick * (C) 2026 Fero - GPL v2+ */ /* ---- theming ---- Custom properties so the popup/menu surface colours can flip for dark mode from a single place. Prefer the template's own explicit theme signal over the visitor's OS-level preference, so a light-themed site doesn't render a jarringly mismatched dark popup/menu just because the visitor's OS happens to be set to dark (and vice versa for a dark-themed site with a light-OS visitor). Checked in this order: Bootstrap 5's data-bs-theme (used by Joomla 5/6's default Cassiopeia template and most Bootstrap-5-based third-party templates), then data-color-scheme (an alternate convention some templates use). prefers-color-scheme is only used as a fallback when the page declares neither attribute at all. */ :root { --crc-surface-bg: #fff; --crc-surface-fg: #222; --crc-surface-border: rgba(0, 0, 0, 0.12); --crc-item-hover-bg: #f0f2f5; --crc-sep-color: rgba(0, 0, 0, 0.1); --crc-close-fg: #888; --crc-close-fg-hover: #000; } :root[data-bs-theme="dark"], :root[data-color-scheme="dark"] { --crc-surface-bg: #1f2227; --crc-surface-fg: #e6e6e6; --crc-surface-border: rgba(255, 255, 255, 0.12); --crc-item-hover-bg: #2c3037; --crc-sep-color: rgba(255, 255, 255, 0.12); --crc-close-fg: #aaa; --crc-close-fg-hover: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]):not([data-color-scheme]) { --crc-surface-bg: #1f2227; --crc-surface-fg: #e6e6e6; --crc-surface-border: rgba(255, 255, 255, 0.12); --crc-item-hover-bg: #2c3037; --crc-sep-color: rgba(255, 255, 255, 0.12); --crc-close-fg: #aaa; --crc-close-fg-hover: #fff; } } /* Respect the visitor's OS-level "reduce motion" accessibility setting by disabling every transition this plugin adds. */ @media (prefers-reduced-motion: reduce) { .crc-overlay, .crc-popup, .crc-menu, .crc-toast { transition: none !important; } } /* ---- text selection off ---- !important on all three rule groups below: without it, a template's own CSS with equal specificity (e.g. "body input {...}") loaded after this stylesheet could silently override any of them, depending on load order the plugin has no control over. The class is also repeated 4x in each selector (".crc-noselect" x4) - a standard, browser-supported technique for raising CSS specificity without an ID. Each repetition targets the exact same single class on (JS never adds it more than once), it just makes the selector itself count for more in the specificity calculation, the same way ".foo.foo.foo.foo" outweighs ".foo.bar.baz" while still only matching elements with class="foo". Ceiling this cannot get past: CSS specificity compares ID count before class count, always - no number of repeated classes can ever out-rank a template selector that includes so much as one ID (e.g. "body #main-content p { user-select: text !important; }" beats any class-only selector regardless of how many times the class repeats). If a specific template still wins in practice, the fix has to happen in that template's own CSS (matching or exceeding its selector's specificity, or removing its rule) - there is no selector this plugin could ship that is guaranteed to always win against an arbitrary, unknown competing stylesheet. */ .crc-noselect.crc-noselect.crc-noselect.crc-noselect body, .crc-noselect.crc-noselect.crc-noselect.crc-noselect body * { -webkit-user-select: none !important; user-select: none !important; } .crc-noselect.crc-noselect.crc-noselect.crc-noselect input, .crc-noselect.crc-noselect.crc-noselect.crc-noselect textarea, .crc-noselect.crc-noselect.crc-noselect.crc-noselect select, .crc-noselect.crc-noselect.crc-noselect.crc-noselect [contenteditable="true"], .crc-noselect.crc-noselect.crc-noselect.crc-noselect [contenteditable="true"] *, .crc-noselect.crc-noselect.crc-noselect.crc-noselect [contenteditable=""], .crc-noselect.crc-noselect.crc-noselect.crc-noselect [contenteditable=""] * { -webkit-user-select: text !important; user-select: text !important; } /* "Skip on interactive elements" (protectInteractive, default on): also allow selecting text inside links, buttons, and the other elements the JS-side exemption covers that actually contain selectable text (iframe/ canvas/audio/video are deliberately excluded here - they don't have text content in the relevant sense). Same specificity-boost technique and the same ceiling as above. */ .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt a, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt a *, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt button, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt button *, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt summary, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt summary *, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt details, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt details *, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt label, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt label *, .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt [role="button" i], .crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt.crc-noselect-interactive-exempt [role="button" i] * { -webkit-user-select: text !important; user-select: text !important; } /* ---- popup (mode 1) ---- */ .crc-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; } .crc-overlay.crc-visible { opacity: 1; visibility: visible; } .crc-popup { position: relative; max-width: min(480px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; background: var(--crc-surface-bg); color: var(--crc-surface-fg); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); padding: 1.25rem 1.5rem; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform: translateY(8px); transition: transform 0.15s ease; } .crc-overlay.crc-visible .crc-popup { transform: translateY(0); } .crc-title { font-size: 1.1rem; font-weight: 700; margin-block: 0 0.5rem; margin-inline: 0 1.5rem; } .crc-body { margin-inline-end: 1rem; } .crc-close { position: absolute; top: 0.4rem; inset-inline-end: 0.5rem; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--crc-close-fg); padding: 0.25rem; } .crc-close:hover { color: var(--crc-close-fg-hover); } .crc-close:focus-visible { outline: 2px solid #4a90e2; outline-offset: 2px; border-radius: 4px; } /* ---- custom context menu (mode 3) ---- */ .crc-menu { position: fixed; z-index: 2147483001; min-width: 200px; max-width: 320px; background: var(--crc-surface-bg); color: var(--crc-surface-fg); border: 1px solid var(--crc-surface-border); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); padding: 0.3rem; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; opacity: 0; visibility: hidden; transform: scale(0.97); transform-origin: top left; transition: opacity 0.1s ease, transform 0.1s ease; } /* The menu's own left/top are set in pixels by JS from the click/touch position, which is direction-agnostic (mouse and touch coordinates are never mirrored for RTL) - only the pop-out animation's anchor corner needs to flip so it visually "grows" from the correct side. */ .crc-menu:dir(rtl) { transform-origin: top right; } .crc-menu.crc-visible { opacity: 1; visibility: visible; transform: scale(1); } .crc-menu-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; border: 0; background: none; text-align: start; padding: 0.45rem 0.7rem; border-radius: 5px; cursor: pointer; color: inherit; font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crc-menu-item:hover, .crc-menu-item:focus-visible { background: var(--crc-item-hover-bg); outline: none; } .crc-menu-item:focus-visible { box-shadow: inset 0 0 0 2px #4a90e2; } .crc-menu-icon { flex: 0 0 auto; width: 1.25em; text-align: center; } .crc-menu-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .crc-menu-sep { height: 1px; margin: 0.3rem 0.5rem; background: var(--crc-sep-color); } /* ---- disable printing ---- Class-toggled (added by JS on only when "Disable printing" is on) rather than a dynamically-injected