/** * Chart Action Cluster — the ONE stylesheet for per-cell action chrome. * Cluster = [pin][⋮] bottom-right of .chart-cell; bell joins in alerts phase. * The ⋮ menu is a portal (#cct-actions-menu) appended to . */ /* ---------- Cluster ---------- */ .cct-action-cluster { position: absolute; bottom: 4px; right: 8px; display: flex; align-items: center; gap: 4px; z-index: 3; opacity: 0; transition: opacity 0.2s ease; } /* Reveal: hover, keyboard focus, open menu */ .chart-cell:hover .cct-action-cluster, .chart-cell:focus-within .cct-action-cluster, .cct-action-cluster.menu-open { opacity: 1; } /* Persistent when the chart is pinned (state, not just action) */ .cct-action-cluster:has(.cct-dashboard-button.is-pinned) { opacity: 1; } /* Touch devices have no hover — keep the cluster visible at reduced strength */ @media (hover: none) { .cct-action-cluster { opacity: 0.7; } } /* Adopted pin button: neutralize its legacy absolute positioning */ .cct-action-cluster .cct-dashboard-button { position: static; bottom: auto; right: auto; opacity: 1; /* the cluster owns reveal now */ } /* Legacy share buttons are superseded wherever a cluster exists (covers the server-rendered ones inside embedded chart cells too) */ .chart-cell:has(.cct-action-cluster) .cct-share-button { display: none !important; } /* ---------- ⋮ toggle (matches .cct-dashboard-toggle styling) ---------- */ .cct-actions-more { background-color: rgba(255, 255, 255, 0.4); border: 1px solid #ddd; border-radius: 5px; width: 24px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; line-height: 1; color: #2c3e50; padding: 0; transition: all 0.3s ease; } .cct-actions-more:hover, .cct-actions-more:focus-visible, .menu-open .cct-actions-more { background-color: #2c3e50; color: white; } /* ---------- Menu portal ---------- */ #cct-actions-menu { display: none; position: fixed; z-index: 100000; background-color: #34495e; border: 1px solid #2c3e50; border-radius: 6px; padding: 6px; min-width: 180px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } #cct-actions-menu.open { display: block; } #cct-actions-menu button { display: block; width: 100%; padding: 8px 12px; margin-bottom: 2px; background-color: transparent; border: none; border-radius: 4px; cursor: pointer; text-align: left; font-size: 14px; color: white; white-space: nowrap; transition: background-color 0.2s ease; } #cct-actions-menu button:last-child { margin-bottom: 0; } #cct-actions-menu button:hover, #cct-actions-menu button:focus-visible { background-color: #2c3e50; } #cct-actions-menu button i { width: 16px; margin-right: 6px; text-align: center; opacity: 0.8; } #cct-actions-menu button.copied { background-color: #4CAF50; color: white; }