/* * The remade spotlight overlay (JIVEAI-25). Everything is scoped under #jss-spot so nothing * reaches the theme. Colours match the remade results page (semantic-search-page.css). */ #jss-spot { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10050; display: none; } #jss-spot.open { display: block; } #jss-spot .jss-spot-dim { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(28, 31, 38, .72); } /* One fixed width for every tab and every state (Suggestions, History, Bookmarks; loading, empty, populated). It used to widen only once Places/People actually had a column to fill, which read fine for a single search box but made the panel visibly grow and shrink as the reader switched tabs -- reported directly against the running overlay. Sized for the two- column Places/People layout so that layout never needs a second width to itself. */ /* Field, tab bar and results are one card, not three stacked ones: the panel itself carries the single shadow/radius/clip, and its children sit flush against each other with a hairline border for a seam instead of a gap. (Previously each had its own shadow/radius/margin-top, which read as three separate floating boxes with visible gaps between them -- reported directly against the running overlay.) */ #jss-spot .jss-spot-panel { position: relative; margin: 56px auto 0; width: min(980px, 94vw); font-size: 13px; line-height: 1.45; color: #1F2933; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); overflow: hidden; } #jss-spot .jss-spot-panel:focus-within { box-shadow: 0 0 0 2px #1F6FB2, 0 6px 24px rgba(0,0,0,.25); } #jss-spot .jss-spot-field { background: #fff; padding: 10px 12px; display: flex; gap: 10px; align-items: center; } #jss-spot .jss-spot-glass { width: 16px; height: 16px; border: 2px solid #6B7C93; border-radius: 50%; position: relative; flex: none; } #jss-spot .jss-spot-glass::after { content: ""; position: absolute; width: 2px; height: 7px; background: #6B7C93; right: -4px; bottom: -6px; transform: rotate(-45deg); } #jss-spot input.jss-spot-input { flex: 1; border: 0; outline: none; font: inherit; font-size: 17px; color: #1F2933; min-width: 0; background: transparent; } #jss-spot .jss-spot-close:focus, #jss-spot .jss-pill:focus, #jss-spot .jss-spot-row:focus, #jss-spot .jss-spot-foot a:focus, #jss-spot .jss-spot-scope button:focus { outline: 2px solid #1F6FB2; outline-offset: 2px; } #jss-spot .jss-spot-row:focus { outline-offset: -2px; background: #F3F7FB; } @supports selector(:focus-visible) { #jss-spot .jss-spot-close:focus, #jss-spot .jss-pill:focus, #jss-spot .jss-spot-row:focus, #jss-spot .jss-spot-foot a:focus, #jss-spot .jss-spot-scope button:focus { outline: none; } #jss-spot .jss-spot-close:focus-visible, #jss-spot .jss-pill:focus-visible, #jss-spot .jss-spot-row:focus-visible, #jss-spot .jss-spot-foot a:focus-visible, #jss-spot .jss-spot-scope button:focus-visible { outline: 2px solid #1F6FB2; outline-offset: 2px; } #jss-spot .jss-spot-row:focus-visible { outline-offset: -2px; background: #F3F7FB; } } #jss-spot .jss-kbd { font-size: 10px; color: #6B7280; border: 1px solid #D5DAE0; border-radius: 4px; padding: 1px 5px; white-space: nowrap; } #jss-spot .jss-spot-close { border: 0; background: transparent; color: #6B7280; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } #jss-spot .jss-spot-results { background: #fff; border-top: 1px solid #EEF0F2; max-height: calc(100vh - 140px); overflow-y: auto; } #jss-spot .jss-spot-results:empty { display: none; } /* JIVEAI-216: failure notes sit in this status region above the listbox; same divider as the results box. */ #jss-spot .jss-spot-status:not(:empty) { background: #fff; border-top: 1px solid #EEF0F2; } /* JIVEAI-236: the scope switch and the "Try without" / "Search everywhere" buttons are not options, so they sit in this band between the status region and the listbox, outside the scroll area. */ #jss-spot .jss-spot-actions { background: #fff; padding: 8px 12px; border-top: 1px solid #EEF0F2; } #jss-spot .jss-spot-actions:empty { display: none; } /* The band (up to two wrapped rows) sits above the scroller, so the scroller gives up that height to keep the panel on screen. */ #jss-spot .jss-spot-actions:not(:empty) + .jss-spot-results { max-height: calc(100vh - 220px); } #jss-spot .jss-spot-actions .jss-spot-scope { padding: 0 0 8px; border-bottom: 0; } #jss-spot .jss-spot-actions .jss-spot-scope:last-child { padding-bottom: 0; } #jss-spot .jss-spot-actions .jss-spot-strip { padding: 0; border-bottom: 0; } #jss-spot .jss-spot-status:not(:empty) + .jss-spot-actions, #jss-spot .jss-spot-status:not(:empty) + .jss-spot-actions:empty + .jss-spot-results { border-top: 0; } #jss-spot .jss-spot-strip { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #EEF0F2; flex-wrap: wrap; align-items: center; } #jss-spot .jss-spot-strip + .jss-spot-strip { padding-top: 6px; } #jss-spot .jss-spot-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #6B7280; font-weight: bold; min-width: 52px; } #jss-spot .jss-spot-scope { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #EEF0F2; font-size: 12.5px; color: #34495E; } #jss-spot .jss-spot-scope button { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #DDE1E5; border-radius: 14px; padding: 3px 10px; min-height: 24px; box-sizing: border-box; background: #fff; font: inherit; font-size: 12px; color: #1F2933; cursor: pointer; } #jss-spot .jss-spot-scope button[aria-pressed="true"] { border-color: #1F6FB2; background: #F3F7FB; color: #1F5A94; font-weight: bold; } #jss-spot .jss-spot-scope .jss-sw { width: 24px; height: 14px; border-radius: 7px; background: #C7CCD3; position: relative; flex: none; } #jss-spot .jss-spot-scope .jss-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; } #jss-spot .jss-spot-scope button[aria-pressed="true"] .jss-sw { background: #1F6FB2; } #jss-spot .jss-spot-scope button[aria-pressed="true"] .jss-sw::after { left: 12px; } /* Suggestions / History / Bookmarks -- adopted from core's own overlay (ui-modules/spotlight/scripts/visor/ui.js). Flush against the field above it, part of the same single card as .jss-spot-panel now clips and shadows as a whole. */ #jss-spot .jss-spot-tabbar { display: flex; gap: 2px; padding: 0 8px; background: #fff; border-top: 1px solid #EEF0F2; } /* Our own `display: flex` above outranks the browser's default `[hidden] { display: none }` (a class selector beats a bare attribute selector), so setting the element's .hidden property from JS did nothing visually -- reported directly against the running overlay. */ #jss-spot .jss-spot-tabbar[hidden] { display: none; } #jss-spot .jss-spot-tab { border: 0; background: none; font: inherit; font-size: 12.5px; color: #6B7280; padding: 9px 10px; cursor: pointer; border-bottom: 2px solid transparent; } #jss-spot .jss-spot-tab:hover { color: #1F2933; } #jss-spot .jss-spot-tab.active { color: #1F2933; font-weight: bold; border-bottom-color: #1F6FB2; } #jss-spot .jss-pill { display: inline-flex; gap: 6px; align-items: center; border: 1px solid #DDE1E5; border-radius: 14px; padding: 3px 10px 3px 4px; min-height: 24px; box-sizing: border-box; background: #fff; font-size: 12px; color: #1F2933; text-decoration: none; } #jss-spot .jss-pill:hover, #jss-spot .jss-pill.active { border-color: #1F6FB2; background: #F3F7FB; } #jss-spot .jss-pill .jss-av { width: 18px; height: 18px; border-radius: 50%; background: #5B6B80; display: grid; place-items: center; font-size: 9px; color: #fff; font-weight: bold; overflow: hidden; flex: none; } #jss-spot .jss-pill .jss-av img { width: 100%; height: 100%; object-fit: cover; display: block; } #jss-spot .jss-pill .jss-av.pl { border-radius: 4px; background: #1F6FB2; } #jss-spot .jss-pill .jss-av.ico { background: transparent; width: auto; height: auto; } #jss-spot .jss-ico.glyph { background: transparent; } #jss-spot .jive-icon-med { display: block; } #jss-spot ol.jss-spot-rows { list-style: none; margin: 0; padding: 0; } #jss-spot .jss-spot-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 12px; border-top: 1px solid #F3F4F6; text-decoration: none; color: inherit; } #jss-spot .jss-spot-row:first-child { border-top: 0; } #jss-spot .jss-spot-row:hover, #jss-spot .jss-spot-row.active { background: #F3F7FB; } #jss-spot .jss-ico { width: 24px; height: 24px; border-radius: 3px; background: #E6EDF5; color: #1F6FB2; font-size: 9px; font-weight: bold; display: grid; place-items: center; text-transform: uppercase; } #jss-spot .jss-ico.discussion { background: #EAF4EA; color: #2E7D32; } #jss-spot .jss-ico.post { background: #F6ECF5; color: #8E3B8A; } #jss-spot .jss-ico.file { background: #FDF1E3; color: #B8681A; } #jss-spot .jss-spot-title { font-size: 14px; font-weight: bold; color: #1F2933; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } #jss-spot .jss-spot-meta { color: #6B7280; font-size: 12px; margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; } #jss-spot .jss-spot-meta .dot::before { content: "\00b7"; } #jss-spot .jss-spot-counts { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; } #jss-spot .jss-cnt { display: inline-flex; align-items: center; gap: 4px; } /* As on the results page: the glyphs are inline SVG inheriting currentColor, so they only need block display (no inline baseline gap) and no shrinking. */ #jss-spot .jss-cnt .jss-cnt-i { display: block; flex: none; } #jss-spot .jss-spot-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; } #jss-spot .jss-tag { font-size: 10.5px; color: #4B5563; background: #F1F3F6; border-radius: 9px; padding: 0 7px; } #jss-spot .jss-tag::before { content: "#"; color: #9AA0A8; } /* Same as the results page: matched terms are marked by weight, not colour. */ #jss-spot .jss-tag.hit { color: #1F2933; font-weight: bold; } #jss-spot mark, #jss-spot .jive-highlight { background: none; color: inherit; padding: 0; font-weight: bold; } #jss-spot .jss-badge { font-size: 10px; font-weight: bold; padding: 1px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; background: #F0F1F3; color: #4B5563; } #jss-spot .jss-badge.good { background: #E3F2E4; color: #2E7D32; } #jss-spot .jss-badge.official { background: #E3EDF7; color: #1F5A94; } #jss-spot .jss-spot-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid #EEF0F2; font-size: 12px; color: #6B7280; } #jss-spot .jss-spot-foot a { font-weight: bold; color: #1F6FB2; text-decoration: none; } #jss-spot .jss-spot-foot a.active { text-decoration: underline; } #jss-spot .jss-spot-note { padding: 12px; color: #6B7280; font-size: 12.5px; } /* JIVEAI-216: Try again / Sign in again. Scoped past core's button rules in every state (CSS-001). */ #jss-spot .jss-retry, #jss-spot .jss-retry:hover, #jss-spot .jss-retry:focus, #jss-spot .jss-retry:active { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; font-weight: bold; color: #1F6FB2; text-decoration: underline; cursor: pointer; text-shadow: none; box-shadow: none; } #jss-spot .jss-retry:focus-visible { outline: 2px solid #1F3A5F; outline-offset: 2px; } /* Core's overlay is hidden only while OUR panel is actually open (jss-spot-open is toggled by open()/close()). Hiding it for the whole session on the owner class meant any failure to build the panel, or a route into core's visor this script does not intercept (its `s` hotkey, its public open() API), left the community with no overlay at all and no way back short of a reload. Degrade to core's overlay instead. */ body.jss-spot-open #j-search-visor { display: none !important; } /* * PLACES AND PEOPLE AS WIDGETS, BESIDE THE CONTENT COLUMN (later ask, after JIVEAI-160 * shipped). They were a pill row above the content list; that put a widget's height into * every keystroke's re-render and gave a place or person no room to show WHY it matched -- * a bare name and an icon, no type, no title. A column beside the results is the same * pattern the full results page already uses for the same reason (semantic-search-page.css, * .jss-refine): position claims no relevance either way, but a card can carry a second line. * * .jss-spot-cols is the row; .jss-spot-main is the content half and .jss-spot-rail is the * widget half. Below 640px the row wraps and the rail simply stacks under the content -- not * a second layout to maintain, the same flex-wrap degrade the main results page's filter row * already relies on. */ #jss-spot .jss-spot-cols { display: flex; gap: 12px; align-items: flex-start; } #jss-spot .jss-spot-main { flex: 1 1 auto; min-width: 0; } #jss-spot .jss-spot-rail { flex: 0 0 240px; width: 240px; display: grid; gap: 10px; padding: 10px 10px 10px 0; } @media (max-width: 640px) { #jss-spot .jss-spot-cols { flex-wrap: wrap; } #jss-spot .jss-spot-rail { flex-basis: 100%; width: auto; padding: 0 10px 10px; } } #jss-spot .jss-spot-widget { border-left: 1px solid #EEF0F2; padding-left: 10px; display: grid; gap: 6px; } #jss-spot .jss-spot-rail .jss-spot-widget:first-child { padding-top: 10px; } #jss-spot .jss-spot-widget h5 { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #6B7280; font-weight: bold; } #jss-spot .jss-spot-wempty { font-size: 12px; color: #6B7280; } #jss-spot .jss-spot-wcard { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; color: inherit; text-decoration: none; min-width: 0; } /* The 1fr track holds an unclassed body div. Its automatic minimum is min-content, so a long unbreakable name grows the track past the 240px rail and clips instead of ellipsing -- the same reason .jss-spot-top's body div (below) needs it too. */ #jss-spot .jss-spot-wcard > div, #jss-spot .jss-spot-top > div { min-width: 0; } #jss-spot .jss-spot-wcard:hover .wnm { text-decoration: underline; } #jss-spot .jss-spot-wcard .wnm { font-weight: bold; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #jss-spot .jss-spot-wcard .wsb { font-size: 11.5px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Same treatment .jss-pill .jss-av had (below) -- carried over rather than reused, since .jss-pill itself is still live for the "Try without X" / "Search everywhere" buttons, which never had an avatar and should not inherit one by an accidental shared selector. */ #jss-spot .jss-spot-wcard .jss-av { width: 22px; height: 22px; border-radius: 50%; background: #5B6B80; display: grid; place-items: center; font-size: 10px; color: #fff; font-weight: bold; overflow: hidden; flex: none; } #jss-spot .jss-spot-wcard .jss-av img { width: 100%; height: 100%; object-fit: cover; display: block; } #jss-spot .jss-spot-wcard .jss-av.pl { border-radius: 4px; background: #1F6FB2; } #jss-spot .jss-spot-wcard .jss-av.ico { background: transparent; width: auto; height: auto; } #jss-spot .jss-spot-wall { font-size: 12px; color: #1F6FB2; background: none; border: 0; font-family: inherit; padding: 2px 0 0; text-align: left; cursor: pointer; } #jss-spot .jss-spot-wall:hover { text-decoration: underline; } /* The "top result": core's own overlay pulls an EXACT name match out and highlights it above the rest (visor/ui.js, addTopResult()) -- adopted the same way History/Bookmarks were. Its own bordered card rather than a plain row, since it is meant to read as a single answer, not one more item in a list. */ #jss-spot .jss-spot-top { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; color: inherit; text-decoration: none; min-width: 0; border: 1px solid #E1E5EA; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } #jss-spot .jss-spot-top:hover .jss-spot-top-nm { text-decoration: underline; } #jss-spot .jss-spot-top-nm { font-weight: bold; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #jss-spot .jss-spot-top-sb { font-size: 12px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #jss-spot .jss-spot-top .jss-av { width: 36px; height: 36px; border-radius: 50%; background: #5B6B80; display: grid; place-items: center; font-size: 14px; color: #fff; font-weight: bold; overflow: hidden; flex: none; } #jss-spot .jss-spot-top .jss-av img { width: 100%; height: 100%; object-fit: cover; display: block; } #jss-spot .jss-spot-top .jss-av.pl { border-radius: 6px; background: #1F6FB2; } #jss-spot .jss-spot-top .jss-av.ico { background: transparent; width: auto; height: auto; } #jss-spot .jss-spot-top .jss-av.ico .jive-icon-med { font-size: 30px; } @media (prefers-reduced-motion: no-preference) { #jss-spot.open .jss-spot-panel { animation: jss-spot-in .12s ease-out; } @keyframes jss-spot-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } } }