/* ========================================================================== Context menu (com_myui) — styled to match the OAcom design system. Colours/fonts come from the template's design-tokens.css (:root variables); the menu is appended to so those custom properties are in scope. Each var() carries a fallback so the menu still looks right if the tokens stylesheet isn't present on a given page. ========================================================================== */ .ctxmenu { position: fixed; z-index: 200001; /* above site chrome — matches --oa-z-menu */ min-width: 200px; max-width: 280px; padding: 0.4rem 0; background: var(--oa-color-white, #ffffff); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; box-shadow: 0 12px 32px rgba(74, 84, 88, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06); font-family: var(--oa-font-body, 'New Atten', -apple-system, BlinkMacSystemFont, sans-serif); font-size: 0.9rem; line-height: 1.4; color: var(--oa-color-text, #495057); user-select: none; overflow: hidden; } .ctxmenu-item { position: relative; display: flex; align-items: center; padding: 0.6rem 1.1rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; transition: background-color 0.18s ease, color 0.18s ease; } /* On-brand left accent bar (echoes the site's short yellow markers), revealed on hover. */ .ctxmenu-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--oa-color-primary, #ffc901); transform: scaleY(0); transition: transform 0.18s ease; } .ctxmenu-item:hover { background-color: rgba(255, 201, 1, 0.16); /* --oa-color-primary @ 16% */ color: var(--oa-color-black, #000000); } .ctxmenu-item:hover::before { transform: scaleY(1); } .ctxmenu-item.disabled { color: var(--oa-color-grey-blue, #717f85); cursor: not-allowed; opacity: 0.55; } .ctxmenu-item.disabled:hover { background-color: transparent; color: var(--oa-color-grey-blue, #717f85); } .ctxmenu-item.disabled:hover::before { transform: scaleY(0); } .ctxmenu-divider { height: 0; margin: 0.35rem 0; border: none; border-top: 1px solid rgba(0, 0, 0, 0.08); } .ctxmenu-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; margin-right: 0.7rem; font-size: 0.85em; color: var(--oa-color-grey-blue, #717f85); transition: color 0.18s ease; } .ctxmenu-item:hover .ctxmenu-item-icon { color: inherit; /* follows the text to near-black on hover */ } .ctxmenu-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; } /* Submenus (supported by the library; harmless when unused) */ .ctxmenu-submenu { position: relative; } .ctxmenu-submenu::after { content: '\25B8'; /* ▸ */ position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-size: 0.8em; color: var(--oa-color-grey-blue, #717f85); } .ctxmenu-submenu-content { position: absolute; left: 100%; top: -0.4rem; display: none; } .ctxmenu-submenu:hover .ctxmenu-submenu-content { display: block; } /* Entrance animation */ @keyframes ctxmenu-fadein { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ctxmenu.show { transform-origin: top left; animation: ctxmenu-fadein 0.16s ease-out; } @media (prefers-reduced-motion: reduce) { .ctxmenu.show { animation: none; } } /* Comfortable touch targets on small screens */ @media (max-width: 768px) { .ctxmenu { min-width: 210px; } .ctxmenu-item { padding: 0.75rem 1.1rem; font-size: 0.95rem; } }