/* 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); --gns-width: var(--workspace-tabs-home-width, 250px); --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; overflow-y: auto; } body[data-global-nav="side"] #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 { width: 240px; } #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). */ #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; } 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, 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 { /* parked at the bottom of the rail */ flex: 0 1 auto; margin-top: auto; padding: 8px 0; min-height: 0; overflow-y: auto; } #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. */ 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 ) { display: none; } } /* 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; padding: 0 10px 0 0; 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); } #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 */ #global-nav-side .gns-item.current > .gns-link:hover, #global-nav-side .gns-link[aria-current="page"]:hover { background: 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, sourced from assets/.../rail-icons): 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; } body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link { justify-content: center; padding: 0; gap: 0; } /* Collapsed rail: hover feedback moves from the row to the icon * tile itself (active icons keep their app-colour fill) */ body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side .gns-link:hover { background: transparent; } 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: 10% tint background, 1px border + letter in the colour. * Active workspace: solid colour, white letter. */ #global-nav-side .gns-space-avatar { background: color-mix(in srgb, var(--gns-space-colour, var(--gns-accent)) 10%, white); color: var(--gns-space-colour, var(--gns-accent)); border: 1px solid var(--gns-space-colour, var(--gns-accent)); box-sizing: border-box; border-radius: 50%; font-size: 0.75em; font-weight: 700; line-height: 1; } /* 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; } 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 { background: 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; } #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). */ #global-nav-side .gns-spaces .gns-spaces-all { display: none; } #global-nav-side.gns-spaces-overflow .gns-spaces .gns-spaces-all { display: block; } #global-nav-side.gns-spaces-overflow .gns-spaces > ul:not(.gns-spaces-all), #global-nav-side.gns-spaces-overflow .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)) { 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; } /* 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). */ 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 is redundant in Side mode — the rail already lists the * apps — so omit it at every size. (Sizes 1–2 hide it via their essentials * filter anyway; this covers size 3+.) */ body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-apps { display: none; } /* 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; } body[data-global-nav="side"] #portlet-updates .panel-content, body[data-global-nav="side"] #portlet-activity-stream .panel-content { background: transparent; box-shadow: none; border: none; padding: 0; } } /* Size 2 (exactly two lanes): only News (Journal), Zmanim and the activity * stream. Zmanim and News 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, News, then Activities. */ @container gns-dash (660px <= width < 1000px) { /* Plain grid here, never grid-lanes: this tier relies on `order` + * row placement to stack Zmanim/News 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-journal, #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-journal { order: 2; } body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-updates { order: 3; } /* No Zmanim (Jewish add-on off): News 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-journal { 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 is the only * one that precedes the activity stream in source order, so under masonry * (which places in document order) it would otherwise settle into lane 1 * ABOVE the stream. Pin it into the second column (lane 3 — the first * narrow lane, since the stream spans lanes 1–2) so it sits beside the * stream, not above it. Harmless in the plain-grid fallback, where it * already lands there. */ @container gns-dash (width >= 1000px) { body[data-global-nav="side"] #portal.section-dashboard .quaive-dashboard > #portlet-zmanim { 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; } /* The apps grid is the rail's job in Side mode, so it must never render. * 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 — the grid would * otherwise flash in #portal behind the open app. Hide it outright; Home * in Side mode is the dashboard, reached from the rail. */ body[data-global-nav="side"] #portal .quaive-apps-grid, 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); } /* 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). */ 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 — mobile bar only; the desktop rail lists * every app vertically, so it has no use for it. */ #global-nav-side .gns-more-item { display: none; } /* The trigger is a