/* Side global navigation (#global-nav-side). * * Everything global-nav related lives in THIS file. Every selector is * namespaced: #global-nav-side, .gns-*, body[data-global-nav], * body.gns-collapsed. * * The rail is built to work exactly like the workspaces app's * .workspace-tabs column: a TRANSPARENT floating icon column, * SUPERIMPOSED on top of the app canvas (no panel, no border, no * content displacement). #app-space / #portal stay at left: 0; instead * the app content clears the rail the same way workspace content * clears its tabs column: * - sidebars get the workspace-style left padding * (--sidebar-padding with the 50px rail inset); * - document bodies get --document-body-left-distance, consumed by * the stock .document-body rules in all.css. * * Mode is a body state: , rendered * server-side so there is no flash of the wrong nav. The rail is * expanded (--workspace-tabs-home-width) on Home only: whenever an app * is on screen (#app-space.state-on, matched via :has, plus the * body.gns-collapsed class KikaronGlobalNav mirrors) it collapses to * the 50px icon column — desktop only; under 768px the bottom tab bar * takes over. */ /* Registered as a real so app-to-app switches interpolate — * the collapsed rail's wash then fades between app colours instead of * snapping (the var is stamped on by KikaronGlobalNav). */ @property --gns-active-app-colour { syntax: ''; inherits: true; initial-value: transparent; } body[data-global-nav="side"] { transition: --gns-active-app-colour var(--gns-transition); } :root { /* Favourites runs as a rail app but has no App registry row, so its * colour isn't in the generated apps.css — give it the accent. */ --app-colour-favourites: var(--colour-accent, #ea6c1a); /* 20px narrower than the workspace-tabs column: the expanded rail's * labels don't need the full 250px, and the dashboard feed (which * clears the rail via this var) gets the reclaimed width. */ --gns-width: calc(var(--workspace-tabs-home-width, 250px) - 20px); --gns-width-collapsed: 50px; --gns-mobile-height: 64px; /* Corner radius of the active-app tile and the Home brandmark tile on * the mobile rail — shared so the two stay visually identical. */ --gns-mobile-active-tile-radius: 13px; /* same x/y inset the workspace-tabs column uses */ --gns-left: calc(var(--sidebar-margin-left, 15px) + 0.5 * var(--sidebar-padding-right, 25px)); --gns-top: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); --gns-background: #fff; --gns-hairline: var(--colour-separation-lines, #eae2d6); --gns-ink: var(--colour-text, #1a1a1a); --gns-muted: var(--colour-discreet, #6b6560); --gns-accent: var(--colour-accent, #ea6c1a); /* One speed/curve for every rail transition (width morph, logo, labels, * fades, colour washes) so expand/collapse and all their parts move * together. */ --gns-transition: var(--base-animation-duration, 0.3s); } /* ------------------------------------------------------------------ */ /* The rail itself — workspace-tabs look: transparent floating column */ /* ------------------------------------------------------------------ */ #global-nav-side { display: none; position: fixed; top: var(--gns-top); bottom: calc(var(--sidebar-margin-bottom, 15px) + 0.5 * var(--sidebar-padding-bottom, 25px)); left: var(--gns-left); width: var(--gns-width); /* transparent while expanded; the collapsed state paints it white */ border: 1px transparent solid; border-radius: calc(0.7 * var(--border-radii, 8px)); padding-top: 22px; box-sizing: border-box; flex-direction: column; background: transparent; /* zero-size, zero-alpha shadow so the collapsed state's * --default-box-shadow fades in instead of popping */ box-shadow: 0 0 0 rgba(0, 0, 0, 0); color: var(--gns-ink); z-index: 999; /* above #portal (10) / #app-space (11) and any sidebar chrome, below modals/tooltips */ transition: all var(--gns-transition); will-change: width; overflow-x: hidden; /* No scrollbar in the vertical rail: anything that doesn't fit moves into * the "More apps" candy box instead (global-nav-side.js * syncAppsOverflow / syncSpacesOverflow measure and mark). A scrolling * rail hides its own contents behind a gesture — the overflow menu is the * affordance, so clip rather than scroll. */ overflow-y: hidden; } body[data-global-nav="side"] #global-nav-side { display: flex; } /* One and Pro get the SAME bottom bar on phones (Daniel, 2026-08-11). * * Compact mode's own rail (cloud_nav_rail.html) is desktop-only, so below * 769px those faces had no rail at all — the app carousel used to stand in * for it, and that is gone. The markup needs nothing: global_nav_side.html is * already included on every authenticated full page regardless of mode (it is * this `display` rule, and nothing else, that keeps it off the other faces). * So show it here, and the ≤768px bottom-bar section at the foot of this file * matches [data-global-nav="compact"] alongside "side" for the styling. * * Above the breakpoint compact keeps its own rail and this stays hidden. */ @media only screen and (max-width: 768px) { body[data-global-nav="compact"] #global-nav-side { display: flex; } } @media only screen and (min-width: calc(768px + 1px)) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side { width: var(--gns-width-collapsed); /* Fixed semi-transparent white, the same regardless of which app * is active (previously a 10% wash of the active app/space colour). */ background: rgba(255, 255, 255, 0.5); box-shadow: var(--default-box-shadow); border-color: white; } } /* Header: platform identity + the user (personal-menu trigger). * interpolate-size lets the auto height animate to the collapsed 31px. */ #global-nav-side .gns-header { flex: 0 0 auto; height: 120px; padding: 0px 0 6px 10px; interpolate-size: allow-keywords; transition: all var(--gns-transition); } /* Platform logo: full wordmark expanded, brandmark (swirl) collapsed — * the two images sit stacked and crossfade with the width animation */ #global-nav-side .gns-platform-logo { display: block; position: relative; height: 67px; cursor: default; /* The logo tile box morphs between the full and collapsed states — * transition everything on the same rail speed so it eases instead of * snapping while the wordmark img morphs. */ transition: all var(--gns-transition); } #global-nav-side .gns-platform-logo img { display: block; /* On the base (not just the collapsed state) so the morph uses the same * origin collapsing and expanding — keeps the two directions symmetric. */ transform-origin: left; transition: all var(--gns-transition); } #global-nav-side .gns-logo-full { /* Rail width minus the header's 10px left padding, so the wordmark * tracks --gns-width instead of baking in the old 250px rail. */ width: calc(var(--gns-width) - 10px); } #global-nav-side .gns-logo-mark { position: absolute; top: 0; left: 0; height: 28px; width: 28px; opacity: 0; } #global-nav-side .gns-platform-name { display: block; font-weight: 700; font-size: 1.1em; color: var(--gns-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all var(--gns-transition); } #global-nav-side .gns-hub { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; margin-left: -8px; padding: 6px 8px; border-radius: 12px; box-sizing: border-box; max-height: 56px; overflow: hidden; min-width: 0; text-decoration: none; cursor: default; /* Collapse via opacity (linear fade) + max-height (linear clip) rather * than zoom: scaling to ~0 reads as "gone" almost instantly one way but * grows in gradually the other, so collapse and expand looked * lopsided. A fade + clip looks the same in both directions. */ transition: all var(--gns-transition); } /* Hover wash + rounded corners matching the app rows (.gns-link:hover). */ @media (hover: hover) { #global-nav-side .gns-hub:hover { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } } body[dir="rtl"] #global-nav-side .gns-hub { margin-left: 0; margin-right: -8px; } /* The small round avatar left of the name — stock .pat-avatar shape * (50% radius, initials fallback), just sized down */ #global-nav-side .gns-user-avatar { flex: 0 0 auto; width: 29px; height: 29px; margin-left: -2px; margin-right: 1px; padding: 0; font-size: 0.68em; font-weight: 700; } /* Name stacked above the current-hub byline, to the right of the avatar. */ #global-nav-side .gns-hub-text { display: flex; flex-direction: column; min-width: 0; transition: all var(--gns-transition); } /* Name + down-arrow on one line; the arrow (the personal-menu dropdown * affordance) sits right after the name and never gets clipped. */ #global-nav-side .gns-hub-name { display: flex; align-items: center; min-width: 0; font-size: 0.85em; line-height: 1.2; color: var(--gns-ink); transition: all var(--gns-transition); } #global-nav-side .gns-hub-name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #global-nav-side .gns-hub-name::after { flex: 0 0 auto; font-family: fontello; content: var(--glyph-down-open); font-size: 0.8em; color: var(--gns-muted); margin-left: 4px; transition: all var(--gns-transition); } /* The hub the user is currently in — a small muted byline under the name. */ #global-nav-side .gns-hub-byline { font-size: 0.7em; line-height: 1.2; color: var(--gns-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all var(--gns-transition); } @media only screen and (min-width: calc(768px + 1px)) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-name { zoom: 0.001; opacity: 0; } /* The user line shrinks away rather than popping out */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-hub { margin-top: 0; opacity: 0; } /* Morph the full wordmark into the brandmark: scale down + slide left so * the orange swirl (on the right of the wordmark) arrives roughly where * the black mark sits, fading out as the mark fades in — reads as one * mark transforming rather than a hard crossfade. */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-logo-full { opacity: 0; transform: scale(0.30) translate(-125px, -22px); } /* RTL: the rail (and mark) sit on the right, so slide the wordmark the * other way. */ body[dir="rtl"][data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-logo-full { transform: scale(0.9) translateX(82px); } body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-logo-mark { opacity: 1; top: 5px; left: 6px; /* ink-coloured brandmark, slightly inset like the app glyphs */ filter: grayscale(1) brightness(0.08); transform: scale(0.92); } body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-header { padding-left: 0; padding-right: 0; height: 35px; } /* Collapsed: the logo behaves like an icon tile — same size and * radius as the app icons, with the same light hover wash */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-logo { width: 38px; height: 38px; margin-left: 6px; border-radius: 10px; } @media (hover: hover) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-logo:hover { background-color: color-mix(in srgb, var(--gns-ink) 7%, transparent); } } /* Home is the active screen while the rail is collapsed (only the * tablet-portrait case — on desktop the rail collapses only once an * app is on screen). The logo tile then reads as the "current" * destination, exactly like a current app icon: solid accent fill, * brandmark inverted to white. */ body[data-global-nav="side"].gns-collapsed:not(:has(#app-space.state-on)) #global-nav-side .gns-platform-logo { background-color: var(--colour-accent, var(--gns-accent)); } @media (hover: hover) { body[data-global-nav="side"].gns-collapsed:not(:has(#app-space.state-on)) #global-nav-side .gns-platform-logo:hover { background-color: var(--colour-accent, var(--gns-accent)); } } body[data-global-nav="side"].gns-collapsed:not(:has(#app-space.state-on)) #global-nav-side .gns-logo-mark { /* invert the brandmark to solid white (vs the dark-ink filter * the inactive collapsed state uses above) */ filter: brightness(0) invert(1); } } /* Item lists */ #global-nav-side ul { list-style: none; margin: 0; padding: 0; } #global-nav-side .gns-apps { flex: 0 0 auto; } #global-nav-side .gns-spaces { /* Directly BELOW the apps, not parked at the bottom: the spaces are the * apps' near neighbours — you move between an app and a space constantly — * and a column-length gap between them made them read as unrelated * furniture. A dim hairline above keeps the two groups distinct. */ /* 0 0 auto, NOT 0 1 auto: this section is never silently squeezed. It * either shows its spaces at natural height or collapses wholesale to the * single Team spaces icon (.gns-spaces-overflow) — shrinking just clipped * the list against the rail's hidden overflow, hiding spaces with no * affordance to reach them. The collapse order lives in * global-nav-side.js refresh(): spaces first, then apps into the candy * box. */ flex: 0 0 auto; margin-top: 0; /* No padding-top: the rule below owns the air above the first space, so * the open-apps group has the same 8px under it as the separator above it * gives it. */ padding: 0 0 8px; min-height: 0; /* Clipped, not scrolled — see the rail's own overflow note above. Too many * spaces collapse to the single Team spaces icon (.gns-spaces-overflow). */ overflow-y: hidden; } /* The rule between the apps and the spaces — the SAME line the apps list * draws between its pinned and its open rows (.gns-apps-separator): 2px at * 10% ink, inset 5px to the tile edge, 8px of air either side. Drawn here * rather than as a border on the section so the inset matches; hidden when * there are no spaces, since a rule under the last app with nothing below it * reads as a mistake (same reasoning as the separator's own :has gate). */ #global-nav-side .gns-spaces::before { content: ""; display: block; height: 0; margin: 8px 5px; border-top: 2px solid color-mix(in srgb, var(--gns-ink) 10%, transparent); } #global-nav-side .gns-spaces:not(:has(.gns-item.gns-space))::before { display: none; } /* The app-launcher (candy-box) entry, between Team spaces and the personal * menu. It carries the margin-top:auto that .gns-spaces used to — the spaces * now sit straight under the apps, so this row and the personal menu are what * hold the bottom of the column; never squeezed, for the same reason * .gns-spaces isn't. (The list is .gns-app-launcher; the unqualified * .gns-launcher is the launcher CONTROL inside every app row — see the close * swap below.) */ #global-nav-side .gns-app-launcher { flex: 0 0 auto; margin-top: auto; } /* Mobile bottom bar: the launcher already lives there as the "More apps" * popover, so this desktop row stays out of the bar (same treatment the * personal menu gets). */ @media only screen and (max-width: 768px) { body:is([data-global-nav="side"], [data-global-nav="compact"]) #global-nav-side .gns-app-launcher { /* Both faces: the bar has its own launcher control at the right rim, and the rail's separate app-launcher entry is a SECOND waffle beside it (seen on Pro, 2026-08-12 — One's app set happens not to carry the entry, which is why it only showed there). */ display: none; } } /* Personal cloud — the row between the app launcher and the personal menu. * No margin-top:auto of its own: the launcher above already holds the bottom * group down, and this list rides along under it. Never squeezed, same as its * two neighbours. */ #global-nav-side .gns-personal-cloud { flex: 0 0 auto; } /* Mobile bottom bar: out of the bar, like the launcher and the personal menu — * the More popover carries this entry there. */ @media only screen and (max-width: 768px) { body:is([data-global-nav="side"], [data-global-nav="compact"]) #global-nav-side .gns-personal-cloud { display: none; } } /* Close-on-hover for the ACTIVE app — the pro/One rail's behaviour * (cloud-nav-rail.css). Every app row carries a third control alongside its * two launcher flavours; it hides until the generated :has() rules * (global_nav_side.html) swap it in for the launcher while its app is the * on-screen one. The compound .gns-link.gns-close is deliberate: the plain * .gns-close form ties with .gns-link's own display and would lose on source * order, so the control would never hide. */ /* The candy-box entry (global_nav_side.html) is the COMPACT MOBILE BAR's * alone — the desktop rail has the Apps launcher row, and hub's bar has its * More popover. Revealed in the ≤768px block at the foot of this file. */ #global-nav-side .gns-candy-item { display: none; } #global-nav-side .gns-link.gns-close { display: none; } /* The close control carries TWO glyphs: the app icon (default) and the × * (.gns-close-glyph, a fontello icon-cancel span). Hover swaps them, so the * active app's row reads "this closes the app" before the click. No hover * media query around the base hide: on touch a tap on the active row closes * too, and the × simply never previews. */ #global-nav-side .gns-close .gns-close-glyph { display: none; font-size: 15px; color: #fff; } #global-nav-side .gns-close .gns-close-glyph::before { margin: 0; width: auto; } /* The × is white, so the tile under it must be the app's colour whenever the * close control is on screen. The .current painting further up can't do it: it * keys off a SERVER snapshot (prefs_active_app), while this control is swapped * in by live :has() state — after a pane switch the two disagreed and the × * painted white on the rail's own background, i.e. invisible. The control only * ever displays while its app is the active one, so painting it unconditionally * here is the same statement, made where it can't drift. --app-colour is * stamped inline per row. */ #global-nav-side .gns-close .gns-icon.app-icon { background-color: var(--app-colour, var(--gns-accent)); } #global-nav-side .gns-close .gns-icon.app-icon * { fill: #fff !important; } #global-nav-side .gns-close .gns-icon.rail-icon * { fill: none !important; stroke: #fff !important; } @media (hover: hover) { #global-nav-side .gns-close:hover .gns-icon:not(.gns-close-glyph) { display: none; } #global-nav-side .gns-close:hover .gns-close-glyph { display: inline-flex; align-items: center; justify-content: center; } } #global-nav-side .gns-section-title { display: none; margin: 4px 4px 6px; font-size: 0.7em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gns-muted); transition: all var(--gns-transition); } @media only screen and (min-width: calc(768px + 1px)) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-section-title { zoom: 0.001; opacity: 0; } /* Updates is the dashboard's home surface on desktop — only the * mobile bottom bar gets its own Updates tab */ body[data-global-nav="side"] #global-nav-side .gns-item.gns-app-updates { display: none; } /* The utility apps (preferences / administrator / password / help) ride * the avatar/personal menu, not the desktop rail — they stay available on * the mobile bottom bar's more-apps popover. * * …unless the user PINNED one. Pinning is an explicit "keep this one * click away", and an admin who stars Administrator has said exactly that; * silently dropping it made the star a lie. Same data-gns-pinned marker * and same reasoning as Team spaces (global-nav-mobile-order.css) — * default-hidden, pinned-visible. Unpinned still never shows here, not * even while the app is open, since these slugs stay in * quaive_tags._GNS_DESKTOP_HIDDEN_SLUGS and so get no open-reveal rule. */ body[data-global-nav="side"] #global-nav-side .gns-apps > .gns-item:is( .gns-app-preferences, .gns-app-administrator, .gns-app-password, .gns-app-help ):not(:has([data-gns-pinned])) { display: none; } /* Open-or-pinned rail (the pro/One rail's behaviour): an app that is * neither a favourite nor open earns no desktop rail row. The template * flags those entries .gns-open-item and generates a per-app :has() * reveal that overrides this the moment the app body is on — see * global_nav_side.html. Both live behind this desktop breakpoint: the * mobile bottom bar keeps listing every app, capped by its own * nth-child rules. */ body[data-global-nav="side"] #global-nav-side .gns-apps > .gns-item.gns-open-item { display: none; } /* Two halves: the apps you PINNED, then the ones that are merely open. * * Done with `order`, not DOM order: the mobile bar's icon cap is * nth-child-based, so it counts DOM position and the list must keep the * order quaive_tags.global_nav_apps hands over. Flex is what makes `order` * work on the rows, and a column flex box lays them out exactly as the * block list did. Desktop only — the mobile bar dissolves this same ul * with display: contents. */ body[data-global-nav="side"] #global-nav-side .gns-apps { display: flex; flex-direction: column; } body[data-global-nav="side"] #global-nav-side .gns-apps > .gns-item { order: 1; } body[data-global-nav="side"] #global-nav-side .gns-apps > .gns-apps-separator { order: 2; } body[data-global-nav="side"] #global-nav-side .gns-apps > .gns-item.gns-open-item { order: 3; } /* The rule itself: a dim hairline with air either side, hidden until the * generated :has() rules say something is actually below it (an empty * rule floating under the pinned apps reads as a mistake). It is a bare *

with no row of its own, so it can't be tabbed to or hovered. */ body[data-global-nav="side"] #global-nav-side .gns-apps > .gns-apps-separator { display: none; height: 0; /* 5px, not 3px: the rule is inset to the ICON TILE's edge, and the * tile now starts 5px in (the row's 2px padding + the icon's 3px * margin) in both rail states. */ margin: 8px 5px; padding: 0; border-top: 2px solid color-mix(in srgb, var(--gns-ink) 10%, transparent); pointer-events: none; } /* Close an open, unpinned app from the EXPANDED rail. * * Those rows are on the rail only because their app is open, so closing is * the one thing you might want from them that the row itself doesn't do — * and it takes the row away, which is what makes the × honest here (a * pinned row stays put, so it gets no × at all). * * Different shape from the collapsed rail's close, which swaps the whole * tile: here the row keeps its icon and its label, and the × sits at the * right end as its own control. The HIT AREA is a square the height of the * row, flush to its right edge; the PLATE that appears under the × on * hover is inset well inside that — 32 square against the row's 44, more * tightly rounded — so it reads as nested inside rather than boxed against * it. It appears on row hover, taking the unread counter's place — * they share that end of the row. */ body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item { position: relative; } body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item .gns-link.gns-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; height: auto; padding: 0; background: none; opacity: 0; transition: opacity var(--gns-transition); } /* The × and nothing else. The control renders the shared app-icon partial, * which carries the app ICON and its LABEL as well — left up, the label * sat under the × clipped to its first letters ("Be✕" for Berichten). */ body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item .gns-close .gns-icon:not(.gns-close-glyph), body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item .gns-close .gns-label { display: none; } body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item .gns-close .gns-close-glyph { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 10px; background-color: transparent; /* Dim through the COLOUR, not opacity — opacity would fade the plate * behind it along with the glyph. */ color: color-mix(in srgb, var(--gns-ink) 45%, transparent); opacity: 1; transition: background-color var(--gns-transition), color var(--gns-transition); } @media (hover: hover) { body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item:hover .gns-link.gns-close { opacity: 1; } /* Keep the ROW washed while the pointer is on the ×. The wash lives on * .gns-link:hover, and the close control is a SIBLING anchor laid over * the launcher — so reaching for the × took the pointer off the * launcher and the row went cold underneath the very control it was * offering. Paint it from the row's own hover instead. (Not for the * active row: its state shows through the coloured icon tile, never a * wash — same exception the rule below this one makes.) */ body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item:not(.current):hover .gns-link.gns-launcher { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } /* The × takes the COUNTER's place — they occupy the same end of the * row, so with the badge left up the two overlapped into an unreadable * knot (an orange 1 with a × through it). Hiding the badge for the * duration of the hover also says the right thing: while you are * reaching for close, how many unread there are is not the point. */ body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item:hover .gns-link.gns-launcher .gns-badge { display: none; } body[data-global-nav="side"]:not(.gns-collapsed):not(:has(#app-space.state-on)) #global-nav-side .gns-apps > .gns-item.gns-open-item .gns-link.gns-close:hover .gns-close-glyph { background-color: color-mix(in srgb, var(--gns-ink) 8%, transparent); color: color-mix(in srgb, var(--gns-ink) 85%, transparent); } } } /* One nav entry — workspace-tabs row metrics: 50px rows, 42px icon * block, bold label */ #global-nav-side .gns-link { display: flex; align-items: center; gap: 4px; /* 2px on the left in BOTH rail states, which is what the collapsed rail * needs to centre a 44px slot in its 48px content box. The expanded rail * doesn't need it for anything — it is here so the icon does not move at * all between the two states. Carried on the row rather than the icon so * the hover wash, which paints the padding box, keeps the full row width. */ padding: 0 10px 0 2px; height: 44px; border-radius: 12px; box-sizing: border-box; color: #6B6560; font-weight: bold; text-decoration: none; white-space: nowrap; cursor: default; position: relative; transition: all var(--gns-transition); } @media (hover: hover) { #global-nav-side .gns-link:hover { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } } /* The active item's link has no background at all — its state shows * through the coloured icon tile and accent label, not a row wash */ @media (hover: hover) { #global-nav-side .gns-item.current > .gns-link:hover, #global-nav-side .gns-link[aria-current="page"]:hover { background: transparent; } /* …except a SPACE row, which keeps the wash even when it is the open one. * An app's active state is carried by a filled tile across the whole row's * height, so a wash on top adds nothing; a space's is a 38px filled circle * with a long row beside it, and dropping the wash left the open space as * the one row on the rail that didn't react to the pointer at all. In the * collapsed rail the rail-wide "no wash" rule still wins (2 ids) and the * hover square takes over. */ #global-nav-side .gns-item.gns-space.current > .gns-link:hover { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } } #global-nav-side .gns-item.current > .gns-link, #global-nav-side .gns-link[aria-current="page"] { color: var(--gns-accent); font-weight: 600; } #global-nav-side .gns-icon { flex: 0 0 auto; width: 38px; height: 38px; margin: 3px; display: inline-flex; align-items: center; justify-content: center; } #global-nav-side .gns-icon svg { width: 100%; height: 100%; } /* App icons: borderless transparent tiles, every SVG shape painted in * the muted ink (#6B6560), matching the label colour. !important beats * fill attributes baked into the source SVGs. */ #global-nav-side .gns-icon.app-icon { border: none; box-shadow: none; border-radius: 10px; background-color: transparent; box-sizing: border-box; width: 38px; height: 38px; padding: 7px; overflow: hidden; transition: all var(--gns-transition); } #global-nav-side .gns-icon.app-icon * { fill: #6B6560 !important; } #global-nav-side .gns-icon.app-icon svg #dots { fill: transparent !important; } /* Active app: icon tile fills with the app's own colour, glyph in * white — the 42px rounded square the workspace tabs paint behind * their active icon */ #global-nav-side .gns-item.current .gns-icon.app-icon, #global-nav-side .gns-link[aria-current="page"] .gns-icon.app-icon { background-color: var(--app-colour, var(--gns-accent)); } #global-nav-side .gns-item.current .gns-icon.app-icon *, #global-nav-side .gns-link[aria-current="page"] .gns-icon.app-icon * { fill: #fff !important; } #global-nav-side .gns-item.current .gns-icon.app-icon svg #dots, #global-nav-side .gns-link[aria-current="page"] .gns-icon.app-icon svg #dots { fill: transparent !important; } /* Rail line icons (.rail-icon — an app icon the is_stroke_icon filter * sniffed as an outline; there is no separate rail-icons set): the * glyph is an outline, so the lines are COLOURED via stroke and the fill * stays empty. Each rule mirrors the filled-icon rule above at equal * specificity, later in source, so it wins for .rail-icon elements while * leaving fallback (filled) app icons on their fill rules. */ #global-nav-side .gns-icon.rail-icon * { fill: none !important; stroke: #6B6560 !important; } #global-nav-side .gns-icon.rail-icon svg #dots { fill: transparent !important; stroke: transparent !important; } /* Active app, line icons: the glyph rides the app-colour tile (from the * .app-icon rule above) with a white outline — the coloured-outline * treatment is reserved for the tooltip menu. */ #global-nav-side .gns-item.current .gns-icon.rail-icon *, #global-nav-side .gns-link[aria-current="page"] .gns-icon.rail-icon * { fill: none !important; stroke: #fff !important; } #global-nav-side .gns-label { flex: 1 1 auto; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; /* flex-grow is NOT transitioned — animating it forced a layout pass * per frame on every row; it snaps while the fade carries. The label * collapses via max-width (a cheap clip) rather than zoom — zoom * re-rasterised the label text every frame and was the main collapse * stutter on a rail full of rows. */ transition: all var(--gns-transition); } @media only screen and (min-width: calc(768px + 1px)) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-label { flex-grow: 0; max-width: 0; opacity: 0; } /* The icon stays LEFT-aligned and the base row's 2px left padding does the * centring — it used to be justify-content: center, and that is not an * animatable property. It applied on the first frame of the collapse, * while the row was still 228px wide, so every icon was flung towards the * middle of a row that was about to disappear; the label's max-width then * snapped to 0 halfway through and threw them somewhere else again, and * the width animation walked them back. That three-step detour is the * wobble. * * Left-aligned there is no detour, and nothing here changes the icon's * position at all: every rail slot (38px icon + 3px margins, 26px space * letter + 9px margins) is 44px wide, so the row's own 2px + 44px + 2px * fills the collapsed rail's 48px content box and centres the slot to the * pixel — the same 2px the expanded rail already carries. Only the label's * trailing 10px goes, and there is no label here to push. */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link { padding: 0 0 0 2px; gap: 0; } /* Collapsed rail: hover feedback moves from the row to the icon * tile itself (active icons keep their app-colour fill) */ @media (hover: hover) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link:hover { background: transparent; } } @media (hover: hover) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-item:not(.current) .gns-link:hover .gns-icon.app-icon { background-color: color-mix(in srgb, var(--gns-ink) 7%, transparent); } } /* Collapsed rail: glyphs go full black (the active app keeps its * white-on-app-colour tile, untouched by the :not(.current) scope) */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-item:not(.current) .gns-link:not([aria-current="page"]) .gns-icon.app-icon * { fill: #000 !important; } body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-item:not(.current) .gns-link:not([aria-current="page"]) .gns-icon.app-icon svg #dots { fill: transparent !important; } /* Rail line icons: colour the stroke black instead of the fill */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-item:not(.current) .gns-link:not([aria-current="page"]) .gns-icon.rail-icon * { fill: none !important; stroke: #000 !important; } } /* Team-space avatar — the space's first letter on its own colour * (--gns-space-colour, set inline per entry; accent fallback). * Inactive: transparent, a small outlined circle (see below). * Active workspace: solid colour, white letter, full 38px. */ #global-nav-side .gns-space-avatar { /* The ink themes pin --app-icon-contrast-colour (black) so space * avatars join the ink palette; other brands fall through to the * per-space colour. */ background: color-mix(in srgb, var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))) 10%, white); color: var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))); border: 1px solid var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))); box-sizing: border-box; /* The space's letter mark stays a perfect circle — the CONTAINER around * it is what matches the apps (the hover tile is the app tile's 38px / * 10px square), not the mark itself. */ border-radius: 50%; font-size: 0.75em; font-weight: 700; line-height: 1; } /* A space you are NOT in reads as a small outlined circle: the ring shrinks * and empties out, while the LETTER keeps its size — that is what you scan * the list by, and shrinking it too would just make the rail harder to read. * The open space grows back into the filled 38px avatar below, so the one * space you're in is the only weight in the section. * * The slot is unchanged in both states — box + margin is 44px either way — * so the labels never shift as the circle grows and shrinks, and the two * states can simply animate into each other. */ #global-nav-side .gns-item.gns-space .gns-space-avatar { width: 26px; height: 26px; margin: 9px; background: transparent; /* The hover tile is an ::after at z-index -1 (it has to sit behind the * letter). Without a stacking context of its own here, that negative * layer sinks past every ancestor to the rail's own background and never * shows — which is exactly what happened. isolate keeps it in this box. */ position: relative; isolation: isolate; transition: width var(--gns-transition), height var(--gns-transition), margin var(--gns-transition), background-color var(--gns-transition), color var(--gns-transition); } /* The current workspace stays remembered (li.current) but only reads * as highlighted while the Workspaces pane is in the foreground — on * Home or in any other app it renders like the rest. */ #global-nav-side .gns-item.gns-space.current > .gns-link { color: #6B6560; font-weight: bold; } body:has(#app-space.state-on:is(.active-app-workspaces, .active-app-team-spaces)) #global-nav-side .gns-item.gns-space.current > .gns-link { color: var(--gns-accent); font-weight: 600; } /* HOVER: exactly what an app row does, in both rail states. * * EXPANDED — the whole row highlights, from the shared ``.gns-link:hover`` * wash; nothing here overrides it. * * COLLAPSED (or any app open) — the row wash is off rail-wide and the feedback * moves to the icon: a rounded-corner square behind the mark at the app tile's * own geometry (38px, 10px radius, 7% ink). Painted as an ::after rather than * a background on the avatar, because the mark is a smaller circle sitting in * the middle of that slot; ``inset: -6px`` on the 26px circle lands exactly on * the app tile's footprint. */ @media (hover: hover) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-item.gns-space .gns-link:hover .gns-space-avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 10px; background-color: color-mix(in srgb, var(--gns-ink) 7%, transparent); z-index: -1; } /* The open space is the ONE row that skips the square — its avatar is * already filled, and a wash behind a filled tile just muddies it. But * only while the space is actually in the foreground: an open space with * another app on top keeps its ``current`` class and renders like any * other row (same gate the accent-label rule uses), so with the row wash * off in this state it had no hover feedback left at all. */ body:has(#app-space.state-on:is(.active-app-workspaces, .active-app-team-spaces)) #global-nav-side .gns-item.gns-space.current .gns-link:hover .gns-space-avatar::after { display: none; } } /* The OPEN space: the full-size filled avatar — the state every space used * to render in, now reserved for the one you're actually looking at. */ body:has(#app-space.state-on:is(.active-app-workspaces, .active-app-team-spaces)) #global-nav-side .gns-item.gns-space.current .gns-space-avatar { width: 38px; height: 38px; margin: 3px; background: var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))); color: #fff; } /* The "+" entry above the space list (opens the New team space modal): * a dashed neutral tile so it reads as an action, not another space. */ #global-nav-side .gns-space-add .gns-space-avatar { background: transparent; border-style: dashed; border-color: #6B6560; color: #6B6560; font-size: 1.1em; font-weight: 600; } @media (hover: hover) { #global-nav-side .gns-space-add .gns-link:hover .gns-space-avatar { border-color: var(--gns-ink); color: var(--gns-ink); } } /* Too many spaces to fit without scrolling: KikaronGlobalNav flags the * rail with .gns-spaces-overflow and the per-space list collapses into * the single Team spaces app icon (the .gns-spaces-all entry). * * UNLESS Team spaces is PINNED. A pinned Team spaces already has its own * icon up among the apps (global-nav-mobile-order.css keys that off the same * data-gns-pinned marker), so collapsing would trade every direct space entry * for a SECOND copy of an icon the rail is already showing — losing the * spaces and gaining nothing. Pinned, the list stays and scrolls instead. */ #global-nav-side .gns-spaces .gns-spaces-all { display: none; } #global-nav-side.gns-spaces-overflow:not(:has(.gns-apps .gns-app-team-spaces [data-gns-pinned])) .gns-spaces .gns-spaces-all { display: block; } #global-nav-side.gns-spaces-overflow:not(:has(.gns-apps .gns-app-team-spaces [data-gns-pinned])) .gns-spaces > ul:not(.gns-spaces-all), #global-nav-side.gns-spaces-overflow:not(:has(.gns-apps .gns-app-team-spaces [data-gns-pinned])) .gns-spaces .gns-section-title { display: none; } /* Unread badge — keeps working in the collapsed rail (rides the icon) */ #global-nav-side .gns-badge { flex: 0 0 auto; background: var(--gns-accent); color: #fff; border-radius: 999px; font-size: 0.7em; line-height: 1; padding: 3px 6px; top: 0; } @media only screen and (min-width: calc(768px + 1px)) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-badge { position: absolute; top: 4px; right: 2px; } } /* Collapsed rail: labels become tooltips (CSS-only, from data-gns-label) */ @media only screen and (min-width: calc(768px + 1px)) { @media (hover: hover) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link[data-gns-label]:hover::after, body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-hub[data-gns-label]:hover::after, body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-logo[data-gns-label]:hover::after { content: attr(data-gns-label); position: fixed; left: calc(var(--gns-left) + var(--gns-width-collapsed) + 6px); background: var(--gns-background); color: var(--gns-ink); font-size: 0.8em; font-weight: 400; padding: 4px 10px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); white-space: nowrap; z-index: 1000; pointer-events: none; } /* A PINNED app says so in its tooltip — the row itself keeps showing the * app icon at every state, hover included. (An earlier take swapped the * icon for a pin glyph on hover; it cost you the icon for a fact that * isn't about what the click does.) The marker rides the tooltip's * ``content`` rather than data-gns-label so the attribute stays the plain * app name. A literal pushpin character, not the fontello glyph: the * pseudo-element renders the label in the UI font, and one content string * can only have one font-family. */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link[data-gns-label][data-gns-pinned]:hover::after { content: "\1F4CC\00a0" attr(data-gns-label); } } /* The platform logo is a tall 67px block, so the fixed pseudo's static * vertical position falls to the block's bottom — well below the small * 38px collapsed brandmark tile. Anchor it to the rail top instead so it * centres on the swirl tile (rail padding-top 22px + half the 38px tile). */ @media (hover: hover) { body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-logo[data-gns-label]:hover::after { top: calc(var(--gns-top) + 30px); } } } /* ------------------------------------------------------------------ */ /* Chrome swap: what Side mode does to the rest of the page */ /* ------------------------------------------------------------------ */ /* The header is gone in Side mode, so every layout offset derived * from its height collapses to zero (0px, not 0 — unitless zero is * invalid inside calc() additions). The dashboard's top margin made * room under that header, so it goes too. */ body[data-global-nav="side"] { --global-header-height: 0px; --dashboard-margin-top: 0px; } /* The dashboard sits flush to the top in Side mode — no header to * clear. dashboard.css declares --dashboard-margin-top ON * .quaive-dashboard itself at large widths (80px, or 40px via * #portal:not(:has(#portal-tabs))), which out-ranks the inherited * body-level reset, so re-zero it on the element with matching/higher * specificity. The second selector beats the (2,1,0) 40px rule; * together they cover every width. */ body[data-global-nav="side"] #portal .quaive-dashboard, body[data-global-nav="side"] #portal:not(:has(#portal-tabs)) .quaive-dashboard { --dashboard-margin-top: 0px; } /* Side-mode dashboard goes full-bleed: drop the 1280px container cap so * the portlet grid uses the whole canvas (the apps/favourites portal * sections keep their cap — this is scoped to .section-dashboard). The * content box also becomes a size container (gns-dash) so the rules below * react to the REAL available width, not the viewport — the rail inset * varies (expanded on Home, the 50px strip in tablet-portrait), so a * viewport breakpoint would mis-judge how many columns actually fit. */ body[data-global-nav="side"] #portal.section-dashboard #portal-content { max-width: none; --pat-container-width: none; container: gns-dash / inline-size; } /* Stop capping the column count: instead of a fixed 2fr/3-track template, * auto-fill spawns one more ~320px lane every time another fits, so the * portlet grid keeps gaining columns as the canvas widens. */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-flow: row dense; } /* The Apps portlet used to be hidden here as redundant (the rail lists the * apps). It is back, directly after the Chokhmah/zmanim portlet — the rail's * own Apps entry is a candy-box launcher, not the grid — so it is now an * ordinary span-1 portlet: shown from size 3 on, hidden at sizes 1–2 by their * essentials filter like every other portlet. Its lane pin sits with zmanim's * at the bottom of this section. */ /* The activity stream always lives in the first column — pin its column * line to 1 so the masonry/auto-flow algorithm can't drift it into * another lane (it would otherwise seek the shortest one). The base * span-every-row pin is dropped (no fixed track count to span). */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet#portlet-updates { grid-column: 1; grid-row: auto; align-self: start; } /* Native masonry where the browser has it: portlets pack up into the * shortest lane rather than aligning to row tracks, removing the ragged * vertical gaps a plain auto-flow grid leaves. Falls back to the grid * above wherever display: grid-lanes is unsupported. */ @supports (display: grid-lanes) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard { display: grid-lanes; } } /* The lane width (320px) + gutter (20px) sets the breakpoints: * 1 lane : <660px (size 1, "mobile") * 2 lanes : 660–999 (size 2) * 3 lanes : 1000–1339 (size 3) …and +340px per lane after that. * * Two lanes or more: the activity stream is the prominent wide column, * spanning the first two lanes. In size 2 that makes it full-width; from * size 3 on it's the wide left column with span-1 portlets to its right * — and it always starts at lane 1 ("stays in the first column"). */ @container gns-dash (width >= 660px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet#portlet-updates { grid-column: 1 / span 2; } } /* Size 1 (one lane, "mobile"): only the activity stream. Everything else, * Zmanim and News included, is hidden — and the lone activities portlet * sheds its card chrome to read as the bare feed (full-width column, no * title, no panel background/shadow/border/padding). Container-query * based, so it holds whenever the dashboard column is this narrow — the * mobile bottom-bar layout AND a desktop side-nav with the rail expanded. */ @container gns-dash (width < 660px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet:not(#portlet-updates) { display: none; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard { grid-template-columns: 1fr; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet { grid-column: 1 / -1; background: transparent; box-shadow: none; } body[data-global-nav="side"] #portlet-updates .well-title-group, body[data-global-nav="side"] #portlet-activity-stream .well-title-group { display: none; } /* No card chrome and NO padding, on the portlet or its body: with nothing * above it the stream IS the page, so it starts at the top edge. * * Qualified through the dashboard (#portal.section-dashboard * .quaive-dashboard) only to outrank the ``padding-top: 20px`` in the * ≥769px MEDIA block further down. That one is a VIEWPORT query and this * is a CONTAINER query, so on a narrow tablet portrait — viewport ≥769, * dashboard column <660 because the expanded rail eats the width — both * matched at equal specificity and the later one won, dropping a 20px gap * above a feed that has nothing to be spaced from. */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-updates, body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-activity-stream { padding: 0; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-updates .panel-content, body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-activity-stream .panel-content { background: transparent; box-shadow: none; border: none; padding: 0; } /* The standalone compose + comment boxes carry ``margin: 2rem auto`` from * base.css so they get breathing room on a roomy board. Here the card * padding around them is gone, so that fixed 2rem is measured from the * screen edge instead of from a card, and the `auto` centring has nothing * left to centre against. Percentages instead: the inset scales with the * column, which at this width IS the screen, so the box keeps the same * proportion of air around it from a narrow phone to a tablet portrait — * where a fixed rem is generous on one and cramped on the other. */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard .update-social.post-box:not(.post *), body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard .update-social.comment-box:not(.post *) { margin: 5% 5% 3%; max-width: 100%; } } /* Mobile (the bottom-bar breakpoint): the stream and nothing above it. * * A VIEWPORT query, deliberately, where the tiers below are container queries. * With the rail dissolved into a bottom bar the dashboard column gets the whole * screen, so a phone in landscape measures wide enough to land in the two-lane * tier and grew a card above the feed. On a phone the feed is the page whatever * the column happens to measure. */ @media only screen and (max-width: 768px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet:not(#portlet-updates):not(#portlet-activity-stream) { display: none; } /* …and the same chrome the one-lane tier sheds. Deliberately repeated * rather than shared: the tier is a CONTAINER query and this is a VIEWPORT * one, and CSS has no way to say "either of these". Without it a phone whose * dashboard column happens to measure ≥660 — the bar gives the board the * whole screen — got the mobile bottom bar wearing the tablet's card: a * well title, a panel background and padding around a feed that is the * whole page. Keep the two blocks in step. */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard { grid-template-columns: 1fr; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet { grid-column: 1 / -1; background: transparent; box-shadow: none; } body[data-global-nav="side"] #portlet-updates .well-title-group, body[data-global-nav="side"] #portlet-activity-stream .well-title-group { display: none; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-updates, body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-activity-stream { padding: 0; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-updates .panel-content, body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard #portlet-activity-stream .panel-content { background: transparent; box-shadow: none; border: none; padding: 0; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard .update-social.post-box:not(.post *), body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard .update-social.comment-box:not(.post *) { margin: 5% 5% 3%; max-width: 100%; } } /* Size 2a (two lanes, but only just): the LAUNCHER and the activity stream, * nothing else. Two cards do fit side by side from 660px, but not these two — * Zmanim wants the width for its Hebrew date and Shabbat times, and the lane * left for Apps collapsed to a sliver of a card. So at the narrow end of the * two-lane range only one card sits above the stream, and it is the launcher: * a squeezed grid of app tiles is useless, while the same grid across the full * width is the most useful thing on a small board. Zmanim rejoins at 860px, * where both lanes are ~420px and neither has to give anything up. */ @container gns-dash (660px <= width < 860px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard { display: grid; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet:not(#portlet-apps, #portlet-updates) { display: none; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-apps { grid-column: 1 / span 2; order: 1; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-updates { order: 2; } } /* Size 2b (two roomy lanes): Zmanim, Apps and the activity stream. Zmanim and * Apps sit on the top row side by side (one lane each); the activity stream * spans both lanes underneath (its span comes from the ≥660 rule above, so it * drops to the next row). `order` fixes the stack: Zmanim, Apps, then * Activities. * * Apps rather than News here: at this width you get three cards, and the one * that earns a slot is the one that takes you somewhere — the launcher for * everything the rail doesn't already pin. News is a read, and the activity * stream below it is already the reading surface. */ @container gns-dash (860px <= width < 1000px) { /* Plain grid here, never grid-lanes: this tier relies on `order` + * row placement to stack Zmanim/Apps over the spanning activity * stream, which the masonry algorithm wouldn't honour. Overrides the * @supports (display: grid-lanes) rule above (same selector, later in * source). */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard { display: grid; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet:not(#portlet-zmanim, #portlet-apps, #portlet-updates) { display: none; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-zmanim { order: 1; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-apps { order: 2; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-updates { order: 3; } /* No Zmanim (Jewish add-on off): Apps takes the full top row, the * activity stream below it. */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard:not(:has(#portlet-zmanim)) > #portlet-apps { grid-column: 1 / span 2; order: 1; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard:not(:has(#portlet-zmanim)) > #portlet-updates { order: 2; } } /* Size 3 and up (three+ lanes): every portlet is back. The activity * stream holds the first two lanes and the span-1 portlets fill the lanes * to its right, gaining one more column per +340px. Native masonry packs * those narrow portlets into the shortest lane on its own. The plain-grid * fallback can't — without help a row-grid aligns every lane to shared * row tracks, so the tall activity stream would blow open huge gaps in * the narrow lanes. The classic fix: make it span every row (1 / span * 100) so the span-1 portlets pack row-by-row down lanes 3+ instead. Only * needed where grid-lanes is absent. */ @supports not (display: grid-lanes) { @container gns-dash (width >= 1000px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > .quaive-portlet#portlet-updates { grid-row: 1 / span 100; } } } /* From size 3 on, Zmanim is a normal span-1 portlet — but it and Apps are * the only ones that precede the activity stream in source order, so under * masonry (which places in document order) they would otherwise settle into * lane 1 ABOVE the stream. Pin both into the second column (lane 3 — the * first narrow lane, since the stream spans lanes 1–2) so they sit beside * the stream, not above it; source order then stacks Apps directly under * Zmanim, which is where it belongs. Harmless in the plain-grid fallback, * where they already land there. */ @container gns-dash (width >= 1000px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-zmanim, body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-apps { grid-column: 3; } } /* Favourites-as-app pane visibility — no App registry row means no * generated show-rule in automations/apps.css, so it lives here. */ #app-space.active-app-favourites.state-on #application-body-favourites { display: block; } /* App sidebars span the full app-body height — the header is gone, so * the height calc that subtracted it no longer applies. */ body[data-global-nav="side"] #app-space .sidebar.left { height: 100%; } /* Rail mode: paint the app sidebars with the light app colour — a pale wash of * the active app's hue — so they read as part of the app, not the chrome. * Overriding the shared --sidebar-background-colour recolours both the sidebar * and its content (both consume that variable). */ body[data-global-nav="side"] .application-body { --sidebar-background-colour: color-mix(in srgb, var(--app-colour, white) 15%, white); } /* Legacy top chrome disappears while Side is active */ body[data-global-nav="side"] #global-header, body[data-global-nav="side"] #portal-tabs, body[data-global-nav="side"] #tabs-bar { display: none !important; } /* base.html's default #portal-content lazy-loads the APPS PORTAL (grid + its * launcher toolbar) as the fallback landing, so on any full-page app load — * e.g. the redirect after saving language prefs — that portal would otherwise * flash in #portal behind the open app. Home in Side mode is the dashboard, * reached from the rail, so suppress it. * * Scoped to the apps portal's OWN grid (#apps-listing), not to * `.kik-apps-grid` at large: the dashboard's Apps portlet is a grid in #portal * too, and the blanket rule silently blanked it — a card with a header and no * tiles, with nothing in the markup to explain why. */ body[data-global-nav="side"] #portal #apps-listing, body[data-global-nav="side"] #portal #app-launcher-toolbar { display: none !important; } /* The header drop-shadow #app-space paints along its top edge belongs * to the hidden header — without this it floats as a stray gradient. */ body[data-global-nav="side"] #app-space:not(.injecting)::before { opacity: 0 !important; } /* Content stays at left: 0 — the rail is superimposed on top of it, * exactly like the workspace-tabs column floats over workspace pages. * top: 0 because the hidden header no longer needs headroom. */ body[data-global-nav="side"] #app-space, body[data-global-nav="side"] #portal { top: 0; margin-left: 0; } @media only screen and (min-width: calc(768px + 1px)) { /* The portal content clears the full rail */ body[data-global-nav="side"] #portal { padding-left: calc(var(--gns-left) + var(--gns-width)); box-sizing: border-box; } /* …but a collapsed rail (tablet-portrait Home, or any open app) * shrinks to the 50px icon strip — the portal reclaims that width * and only clears the strip, so it never sits narrow beside a gap * where the expanded rail used to be. Tracks the same trigger as the * rail-width rule above. */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #portal { padding-left: calc(var(--gns-left) + var(--gns-width-collapsed)); } /* Apps (collapsed rail): every app body adopts the workspaces-app * layout recipe — the sidebar's content padding and the document * body's left distance both reserve the 50px rail, exactly as * #application-body-workspaces does for its own tabs column. The * stock aside.sidebar/.document-body rules in all.css consume * these vars; nothing else is touched. */ body[data-global-nav="side"] #app-space .application-body { /* same width the workspaces app gives its sidebar (475px vs the * 400px platform default) */ --sidebar-width: 475px; /* re-declared HERE (like #application-body-workspaces does) so * the calc picks up the 475px width — the :root default already * resolved against 400px and inherits as that fixed value */ --document-body-left-distance-sidebar-open: calc(var(--sidebar-width) + var(--sidebar-margin-left, 15px)); --sidebar-padding: var(--sidebar-padding-top) var(--sidebar-padding-right) var(--sidebar-padding-bottom) calc(var(--gns-width-collapsed) + 1.5 * var(--sidebar-padding-left)); --document-body-left-distance: calc(var(--gns-width-collapsed) + var(--sidebar-padding-left)); /* Closed sidebars keep a visible strip under the rail, exactly * like the workspaces app: its -397px against a 475px sidebar * leaves ~78px = tabs column + inset. Here that strip is the * rail width + the rail's left inset, whatever the app's * sidebar width. */ --sidebar-margin-left-closed: calc(var(--gns-width-collapsed) + var(--gns-left) - var(--sidebar-width, 400px)); } /* Large sidebars get the bigger left padding the workspaces app * uses (#application-body-workspaces.sidebar-large: * --sidebar-padding-left-large = 85px + padding) so the content * clears the rail. */ body[data-global-nav="side"] #app-space .application-body.sidebar-large { --sidebar-padding-left-large: calc(85px + var(--sidebar-padding-left, 25px)); } /* Switching to an app with an open sidebar: the sidebar slides and * fades in from outside the left edge. CSS animations restart when * the app body flips from display:none to rendered (pane switch) * and when a fresh body is pat-injected, so every arrival animates. */ body[data-global-nav="side"] #app-space .application-body.sidebar-left-open aside.sidebar.left { animation: gns-sidebar-slide-in var(--base-animation-duration, 0.3s) ease-out; } /* The visible strip of a closed sidebar is chrome, not content — * fade its contents out and let clicks fall through (the stock * .sidebar-content transition animates the fade). */ body[data-global-nav="side"] aside.sidebar.left .sidebar-content { transition: all var(--gns-transition); > * { transition: all var(--gns-transition); } } body[data-global-nav="side"] #app-space .application-body.sidebar-left-closed aside.sidebar.left #sidebar-content, body[data-global-nav="side"] #app-space .application-body.sidebar-left-closed aside.sidebar.left .sidebar-content { /* opacity: 0; */ pointer-events: none; > * { opacity: 0; } } /* Dashboard updates portlet: no well header (the rail/logo is the * navigation), just the feed with a little breathing room on top. * Covers the lean id (portlet-updates) and classic * (portlet-activity-stream). */ body[data-global-nav="side"] #portlet-updates .well-title-group, body[data-global-nav="side"] #portlet-activity-stream .well-title-group { display: none; } body[data-global-nav="side"] #portlet-updates .panel-content, body[data-global-nav="side"] #portlet-activity-stream .panel-content { padding-top: 20px; } /* Messages Element iframe — same insets as the calendar canvas * below (its stock rule uses the 15px sidebar margins). */ body[data-global-nav="side"] #app-space .application-body.application-messages .pat-element { top: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); right: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); bottom: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); left: var(--sidebar-padding-left, 25px); } /* Mail webmail iframe — same inset "card" box as the Messages Element * iframe above so the two full-bleed iframe apps line up in hub mode. * (Mail has no base absolute rule, so set position here too; the default * is the full-bleed width/height:100% from apps.css.) */ body[data-global-nav="side"] #app-space .application-body.application-mail .mail-webmail-frame { position: absolute; top: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); right: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); bottom: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); left: var(--sidebar-padding-left, 25px); width: -webkit-fill-available; height: -webkit-fill-available; /* Same card chrome as the generic `.pat-element iframe` (workspace * chat / office editors): rounded corners + the standard drop shadow. */ border-radius: var(--border-radii); box-shadow: var(--default-box-shadow); } /* Calendar canvas — same inset recipe as the workspace-chat * Element iframe (#application-body-workspaces .pat-element * iframe): 27.5px top/right/bottom, 25px left, card chrome. */ body[data-global-nav="side"] #app-space .application-calendar .pat-calendar#calendar-app { position: absolute; top: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); right: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); bottom: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); left: var(--sidebar-padding-left, 25px); border-radius: var(--border-radii, 8px); box-shadow: var(--default-box-shadow); } /* The workspaces host reserves the SAME 50px for its own tabs * column — push its tabs right of the global rail and widen the * insets so both columns fit side by side. */ body[data-global-nav="side"] #app-space #application-body-workspaces { --workspace-tabs-left: calc(var(--gns-left) + var(--gns-width-collapsed)); --workspace-tabs-left-closed: calc(var(--gns-left) + var(--gns-width-collapsed)); --sidebar-padding: var(--sidebar-padding-top) var(--sidebar-padding-right) var(--sidebar-padding-bottom) calc(2 * var(--gns-width-collapsed) + 1.5 * var(--sidebar-padding-left)); --document-body-left-distance: calc(2 * var(--gns-width-collapsed) + var(--sidebar-padding-left)); } } /* RTL (Hebrew/Arabic): rail rides the right edge; the var-driven * margins/distances are consumed by all.css's own RTL swaps, but the * physical insets declared above (padding shorthands, left/right * coordinates) need explicit mirrors. */ body[dir="rtl"] #global-nav-side { left: auto; right: var(--gns-left); } /* Header/logo: the 10px inline inset moves to the right edge (the * wordmark right-aligns by itself — block replaced element under * direction: rtl) and the stacked brandmark anchors right too. */ body[dir="rtl"] #global-nav-side .gns-header { padding: 0 10px 10px 0; } body[dir="rtl"] #global-nav-side .gns-logo-mark { left: auto; right: 0; } /* Row insets: the 10px end-padding sits before the label, not the icon, * so the icons line up under the logo like they do in LTR. */ body[dir="rtl"] #global-nav-side .gns-link { padding: 0 0 0 10px; } @media only screen and (min-width: calc(768px + 1px)) { /* Collapsed-rail label tooltips flip to the rail's left side (match * the LTR selector breadth incl. the :has() collapse variant). */ @media (hover: hover) { body[dir="rtl"][data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link[data-gns-label]:hover::after, body[dir="rtl"][data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-hub[data-gns-label]:hover::after, body[dir="rtl"][data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-logo[data-gns-label]:hover::after { left: auto; right: calc(var(--gns-left) + var(--gns-width-collapsed) + 6px); } } /* Collapsed logo tile insets from the right edge; the brandmark * keeps its 5px inset measured from the right. */ body[dir="rtl"][data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-platform-logo { margin-left: 0; margin-right: 6px; } body[dir="rtl"][data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-logo-mark { left: auto; right: 5px; } /* The portal clears the rail on the right instead */ body[dir="rtl"][data-global-nav="side"] #portal { padding-left: 0; padding-right: calc(var(--gns-left) + var(--gns-width)); } /* The --sidebar-padding shorthand is physical (top right bottom * left): the rail inset moves from the left to the right component, * mirroring the workspaces-app RTL recipe in _sidebar.scss. */ body[dir="rtl"][data-global-nav="side"] #app-space .application-body { --sidebar-padding: var(--sidebar-padding-top) calc(var(--gns-width-collapsed) + 1.5 * var(--sidebar-padding-left)) var(--sidebar-padding-bottom) var(--sidebar-padding-right); } body[dir="rtl"][data-global-nav="side"] #app-space #application-body-workspaces { --sidebar-padding: var(--sidebar-padding-top) calc(2 * var(--gns-width-collapsed) + 1.5 * var(--sidebar-padding-left)) var(--sidebar-padding-bottom) var(--sidebar-padding-right); } /* Open sidebars slide in from the right edge */ body[dir="rtl"][data-global-nav="side"] #app-space .application-body.sidebar-left-open aside.sidebar.left { animation-name: gns-sidebar-slide-in-rtl; } /* Messages Element iframe + calendar canvas: mirror the wide rail * inset onto the right side. */ body[dir="rtl"][data-global-nav="side"] #app-space .application-body.application-messages .pat-element, body[dir="rtl"][data-global-nav="side"] #app-space .application-calendar .pat-calendar#calendar-app { left: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); right: var(--sidebar-padding-left, 25px); } } /* The mobile bottom bar's leading Home button (the brandmark) — the * desktop rail uses the .gns-header logo instead, so hide it here. */ #global-nav-side .gns-mobile-home { display: none; } /* "More apps" overflow entry — hidden by default, and on the DESKTOP rail it * now stays that way: the Apps launcher has its own rail entry and lists every * app, so global-nav.js no longer sets .gns-apps-overflow there — it just * marks what didn't fit .gns-overflowed and lets it drop off. Only the mobile * bar still reveals a More entry, via the breakpoint rules further down. */ #global-nav-side .gns-more-item { display: none; } #global-nav-side.gns-apps-overflow .gns-more-item { display: block; } #global-nav-side .gns-apps .gns-item.gns-overflowed { display: none; } /* In the popover, show only what the rail dropped. The mobile bar drives the * same popover through its nth-child mirrors, so this desktop-only marker * applies above the mobile breakpoint. */ @media (min-width: calc(768px + 1px)) { #global-nav-side .gns-more-popover .gns-more-app.gns-more-app-railed { display: none; } /* …and dock the popover beside the RAIL. The base rules park it over the * mobile bar (fixed to the bottom, spanning the viewport width), which is * nowhere near the desktop trigger. Cap the height and let the popover * itself scroll: it is the overflow surface, so it may legitimately be * longer than the rail that couldn't hold its contents. */ body[data-global-nav="side"] .gns-more-popover { /* rail's right edge + a 15px gap */ left: calc(var(--gns-width-collapsed, 64px) + var(--gns-left, 15px) + 15px); right: auto; bottom: calc(var(--gns-left, 15px) + 48px); width: min(280px, calc(100vw - 120px)); max-height: 70vh; overflow-y: auto; } /* Apps only on tablet + desktop. The popover carries a mirror of the * personal menu (org switcher, personal cloud, Preferences, Log out) * because on PHONES it doubles as the user menu — the avatar trigger is * hidden at that width. Above it the avatar is back in the header, so * those entries would be a second copy; here the popover is purely the * rail's app overflow. */ body[data-global-nav="side"] .gns-more-popover > ul.menu { display: none; } /* One column, not two. The two-track grid is a phone affordance — the * popover spans the viewport there, so pairing the apps keeps it short. * Beside the rail it is a narrow panel, so a single column reads as a * plain list and the labels stop competing for half-width tracks. */ body[data-global-nav="side"] .gns-more-popover .gns-more-list { grid-template-columns: minmax(0, 1fr); } } /* The trigger is a