/* notifications.css — per-user notification tray (bell) in the topbar right. * * Anchored dropdown, deliberately built to the same recipe as * .settings-dropdown in layout.css (relative wrapper, right: 0, top: 100%) so * the two menus sit identically under the topbar. * * The panel is a flex column: fixed head + footer, scrolling list in between. * Two independent height caps apply — the list's own max-height, and a cap on * the whole panel relative to the viewport so it can never be taller than the * browser window. */ .mn-notif { --mn-notif-amber: #f0a726; --mn-notif-red: #d92d20; --mn-notif-width: 340px; position: relative; display: inline-flex; } /* Signed-out users get no tray (notifications.js sets [hidden] on the wrapper). This rule is what actually hides it: the `display: inline-flex` above is an author declaration, so it beats the UA stylesheet's `[hidden] {display:none}` and the attribute alone would do nothing. Same trap as the Updates modal. */ .mn-notif[hidden] { display: none; } body[data-mode="dark"] .mn-notif { /* Both lifted so they keep their punch against the dark bar. */ --mn-notif-amber: #ffb937; --mn-notif-red: #ff5a4d; } /* ---- Bell + unread count ---- */ .mn-notif-toggle { position: relative; } /* Red bubble carrying the unread count. min-width + padding keep it a circle at one digit and let it grow into a pill at two or more, rather than squashing the number. */ .mn-notif-badge { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mn-notif-red); color: #fff; font-family: var(--font-ui); font-size: 0.62rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; /* Ring in the bar's own background so the bubble reads as separate from the bell glyph rather than merging with it. */ box-shadow: 0 0 0 2px var(--topbar-bg); pointer-events: none; } /* Needed because of the `display: inline-flex` above — see the note on .mn-notif[hidden]. Specificity beats the base rule, so order doesn't matter. */ .mn-notif-badge[hidden] { display: none; } /* ---- Panel ---- */ .mn-notif-panel { position: absolute; right: 0; top: 100%; z-index: 20; width: min(var(--mn-notif-width), calc(100vw - 2rem)); display: flex; flex-direction: column; /* Never taller than the window: the topbar sits above us, plus a little breathing room at the bottom. */ max-height: calc(100vh - var(--topbar-h) - 1rem); margin-top: 0.35rem; border-radius: var(--radius-panel); border: 1px solid var(--panel-border); /* Frosted, matching the settings dropdown and the topbar stack. Mix written out here, not read from a :root variable, so it resolves against the palette/mode tokens on (see --menu-blur in base.css). */ background: color-mix(in srgb, var(--topbar-bg) 55%, var(--color-surface) 45%); backdrop-filter: var(--menu-blur); -webkit-backdrop-filter: var(--menu-blur); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25); overflow: hidden; } .mn-notif-panel.hidden { display: none !important; } .mn-notif-head { flex: 0 0 auto; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-color); font-family: var(--font-ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.75; } /* ---- List (the scroller) ---- */ .mn-notif-list { flex: 1 1 auto; min-height: 0; /* lets the flex child actually shrink + scroll */ max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; /* don't scroll the page at the ends */ margin: 0; padding: 0; list-style: none; } .mn-notif-item { display: grid; /* unread dot | icon | text+time */ grid-template-columns: 10px 18px 1fr; align-items: start; gap: 0.5rem; padding: 0.6rem 0.75rem; font-family: var(--font-body); } .mn-notif-item + .mn-notif-item { border-top: 1px solid var(--divider); } /* The dot column is always present so icons and text stay aligned whether or not an item is unread. */ .mn-notif-dot { width: 8px; height: 8px; margin-top: 0.32rem; border-radius: 50%; background: transparent; } .mn-notif-item.is-unread .mn-notif-dot { background: var(--mn-notif-amber); } .mn-notif-icon { margin-top: 0.15rem; font-size: 0.9rem; text-align: center; opacity: 0.8; } .mn-notif-body { min-width: 0; } .mn-notif-text { margin: 0; font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; } .mn-notif-time { display: block; margin-top: 0.2rem; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.06em; opacity: 0.6; } /* Only items carrying an href become interactive (phase 2 wires the action). */ .mn-notif-item.is-clickable { cursor: pointer; } .mn-notif-item.is-clickable:hover, .mn-notif-item.is-clickable:focus-visible { background: var(--hover-bg); outline: none; } /* ---- Empty state ---- */ .mn-notif-empty { margin: 0; padding: 1.4rem 0.75rem; text-align: center; font-family: var(--font-body); font-size: 0.84rem; opacity: 0.6; } .mn-notif-empty[hidden] { display: none; } /* ---- Footer ---- */ .mn-notif-foot { flex: 0 0 auto; padding: 0.4rem; border-top: 1px solid var(--border-color); } .mn-notif-foot[hidden] { display: none; } .mn-notif-clear { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: var(--radius-panel); background: transparent; color: inherit; font-family: var(--font-ui); font-size: 0.78rem; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .mn-notif-clear:hover, .mn-notif-clear:focus-visible { background: var(--hover-bg); outline: none; box-shadow: 0 0 0 1px var(--border-color); } .mn-notif-clear[disabled] { opacity: 0.45; cursor: default; } /* ---- Narrow screens ---- */ @media (max-width: 640px) { .mn-notif { --mn-notif-width: 300px; } .mn-notif-list { max-height: min(55vh, 340px); } }