/* ── Header "Share this page" control ───────────────────────────────────────── A single share icon-button in the top bar (styled like Material's other header buttons) that opens a small popover with Copy link / Teams / LinkedIn / X. Each channel carries a utm_source so GoatCounter can attribute traffic to how a page was shared. The popover is appended to and fixed-positioned under the button so the sticky header never clips it. */ /* Wrapper keeps the button in the header action row. */ .cf-share { display: flex; align-items: center; } /* The trigger reuses Material's header-button look (currentColor icon). */ .cf-sharebtn svg { width: 1.2rem; height: 1.2rem; fill: currentColor; } .cf-sharebtn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-radius: 100%; } /* Popover menu. */ .cf-sharemenu { position: fixed; z-index: 30; min-width: 190px; padding: .35rem; background: var(--md-default-bg-color, #fff); border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, .1)); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; } .cf-sharemenu[data-open="true"] { opacity: 1; transform: none; } .cf-sharemenu[hidden] { display: none; } .cf-sharemenu .cf-mi { display: flex; align-items: center; gap: .55rem; width: 100%; box-sizing: border-box; padding: .5rem .6rem; font-size: .78rem; font-weight: 600; line-height: 1; text-align: left; color: var(--md-default-fg-color); background: transparent; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; } .cf-sharemenu a.cf-mi { text-decoration: none; } .cf-sharemenu .cf-mi:hover { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color, #fff); } .cf-sharemenu .cf-mi:focus-visible { outline: 3px solid var(--md-accent-fg-color, #526cfe); outline-offset: -2px; } .cf-sharemenu .cf-mi svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; } .cf-sharemenu .cf-mi-copied { padding: .3rem .6rem .1rem; font-size: .7rem; font-weight: 600; color: var(--md-primary-fg-color); } @media (prefers-reduced-motion: reduce) { .cf-sharemenu { transition: none; } }