/* files-shell.css — THE FILES GROUP'S SHELL, LIGHT (Kye 2026-10-10: "Redesign the files page tonight but * make it a light theme"; his answers: "Like the Map, light", "The Map's blue #1e78d6", "Yes, a details * pane", the mock first — invixo-design/files-redesign-2026-10-10/files-page.html). * * The Map's shell, on a light page: a blue rail at the window's left edge (the Files sections, then * Alerts, Menu and the account), the Map's band (the organisation and the project) at the top of a * light folder panel. invixo-nav.js BUILDS the rail on a Files page that opts in with * (it moves the bar's own pieces into the rail and the band, as it does for the * Map), map-shell.css (linked before this file) gives the page the Map's face and its blue, and this * file paints the rail and the band. Every colour is a TOKEN: the blue is --ds-accent as map-shell.css * re-points it (#1e78d6), the white the --ds-on-accent pair, the grounds design-system.css's light ones. * Linked by the four Files pages (Kye 2026-10-10: "then do reports, permits, photos page"). The rail * and the band apply only under ; the FRAME below (.fx-*) is class-scoped and * only those four pages carry its classes. */ :root[data-shell="rail"] { --fr-w: 62px; /* the rail's width, the Map's (index.html --rail-w) */ --fr-mark: #f5a623; /* the picked section's edge: the Map rail's amber (Propeller's mark) */ --ds-folder: var(--ds-accent); /* a folder's default glyph in the page's blue, not the house #386ee3 */ } :root[data-shell="rail"] body.has-files-rail { padding-left: var(--fr-w); } /* ── the rail ─────────────────────────────────────────────────────────────── */ #files-rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--fr-w); z-index: 60; display: flex; flex-direction: column; align-items: stretch; background: var(--ds-accent); } #files-rail .fr-logo { flex: none; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--ds-accent-press); color: var(--ds-on-accent); } #files-rail .fr-logo:focus-visible { outline: 2px solid var(--ds-on-accent); outline-offset: -3px; } #files-rail .fr-logo svg { width: 30px; height: 30px; } #files-rail .fr-logo .ds-logo-disc { fill: var(--ds-on-accent); } /* the bar's LOGO, its two rings re-inked for the blue (a rule outranks their stroke attributes) */ #files-rail .fr-logo svg path { stroke: currentColor; } #files-rail .fr-logo svg path:first-child { stroke-opacity: .6; } #files-rail .fr-btn { position: relative; flex: none; width: 100%; height: 52px; padding: 0; margin: 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; color: var(--ds-on-accent); text-decoration: none; cursor: pointer; font: inherit; } #files-rail .fr-btn svg { width: 20px; height: 20px; flex: none; } #files-rail .fr-btn span { font: 400 10.5px/1.1 var(--ds-font); white-space: nowrap; color: inherit; } #files-rail .fr-btn:hover { background: var(--ds-accent-hov); } #files-rail .fr-btn:focus-visible { outline: 2px solid var(--ds-on-accent); outline-offset: -3px; } #files-rail .fr-btn.on { background: var(--ds-head); color: var(--ds-accent-ink); } #files-rail .fr-btn.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--fr-mark); } #files-rail .fr-gap { flex: 1; min-height: 8px; } /* ADMIN'S SECTIONS in the rail (2026-10-10, Kye: "the blue rail, Admin's sections down it"): admin.html's own .tabbar buttons, moved in by invixo-nav.js (filesRail's `own`), worn as the rail's buttons — the picked one is showTab's .active — with a rule between the project's sections and the organisation's. The old list's skin (design-system.css ":where(.ds-hair) .tabbtn") is undone here, every value a token. */ #files-rail .fr-own { display: contents; } #files-rail .fr-rule { flex: none; height: 1px; margin: 4px 12px; background: color-mix(in srgb, var(--ds-on-accent) 28%, transparent); } #files-rail .tabbtn.fr-btn { height: 52px; padding: 0; gap: 3px; border-radius: 0; text-align: center; white-space: nowrap; transition: none; } #files-rail .tabbtn.fr-btn svg { width: 20px; height: 20px; color: inherit; } #files-rail .tabbtn.fr-btn:hover { background: var(--ds-accent-hov); color: var(--ds-on-accent); } #files-rail .tabbtn.fr-btn.active { background: var(--ds-head); color: var(--ds-accent-ink); } #files-rail .tabbtn.fr-btn.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--fr-mark); } /* THE TOP PAGES' RAIL (Support, Projects, the Dashboard; Kye 2026-10-10, the Files pages' light look): the bar's own links, moved in by railShell and drawn with their marks by navLinksHtml, worn as the rail's buttons — the page you are on lit like a picked section. The bar's hidden-label copy (::before) and its underline (::after) are its own. */ #files-rail .fr-links { display: contents; } #files-rail .fr-links .egnav-links { flex: none; display: flex; flex-direction: column; gap: 0; align-self: stretch; min-width: 0; } #files-rail .fr-links .egnav-link { position: relative; flex: none; width: 100%; height: 52px; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ds-on-accent); background: transparent; text-decoration: none; font: inherit; white-space: nowrap; } #files-rail .fr-links .egnav-link svg { width: 20px; height: 20px; flex: none; } #files-rail .fr-links .egnav-link span { font: 400 10.5px/1.1 var(--ds-font); color: inherit; } #files-rail .fr-links .egnav-link:hover { background: var(--ds-accent-hov); color: var(--ds-on-accent); } #files-rail .fr-links .egnav-link:focus-visible { outline: 2px solid var(--ds-on-accent); outline-offset: -3px; } #files-rail .fr-links .egnav-link.active { background: var(--ds-head); color: var(--ds-accent-ink); font-weight: 400; } #files-rail .fr-links .egnav-link::before { display: none; content: none; } /* the rail reads the work first and keeps Admin beside Support at its foot (the bar's own order puts it second) */ #files-rail .fr-links .egnav-link[href="/admin.html"] { order: 1; } #files-rail .fr-links .egnav-link[href="/support.html"] { order: 2; } #files-rail .fr-links .egnav-link.active::after { content: ""; position: absolute; left: 0; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; background: var(--fr-mark); } /* the bar's own pieces, moved here by invixo-nav.js's railShell(): the bell and the account */ #files-rail .fr-slot:empty { display: none; } #files-rail .egnav-bellwrap { position: relative; } #files-rail .egnav-btn { width: 100%; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; color: var(--ds-on-accent); border: 0; border-radius: 0; } #files-rail .egnav-btn:hover { background: var(--ds-accent-hov); } #files-rail .egnav-btn svg { width: 20px; height: 20px; } #files-rail #egnav-bell::after { content: "Alerts"; font: 400 10.5px/1.1 var(--ds-font); } /* something new is an amber DOT, as on the Map's rail, not a red count */ #files-rail .egnav-badge { position: absolute; top: 9px; right: 17px; width: 7px; height: 7px; min-width: 0; padding: 0; border-radius: 50%; background: var(--fr-mark); border: 1.5px solid var(--ds-accent); color: transparent; overflow: hidden; text-indent: 100%; white-space: nowrap; box-sizing: border-box; } /* the rail's cards open beside it, over the folder panel's edge, as the Map's do beside its panel */ #files-rail .egnav-panel { position: fixed; top: auto; right: auto; left: calc(var(--fr-w) + 8px); bottom: 64px; width: 260px; max-height: 60vh; padding: 0 0 4px; background: var(--ds-panel); border: 1px solid var(--ds-shell); border-radius: 6px; box-shadow: var(--ds-shadow-modal); } #files-rail .nav-user { height: 58px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; } #files-rail .nav-user .nav-username, #files-rail .nav-user .egnav-caret { display: none; } #files-rail .nav-user .nav-avatar { width: 30px; height: 30px; border-radius: 50% !important; background: var(--ds-on-accent) !important; color: var(--ds-accent-press) !important; display: flex; align-items: center; justify-content: center; font: 500 11px/1 var(--ds-font); } /* the Menu pop-over: the bar's page links (moved here) */ #files-rail .fr-pop { position: fixed; left: calc(var(--fr-w) + 8px); bottom: 64px; z-index: 70; width: 220px; padding: 4px 0; background: var(--ds-panel); border: 1px solid var(--ds-shell); border-radius: 6px; box-shadow: var(--ds-shadow-modal); } #files-rail .fr-pop[hidden] { display: none; } #files-rail .fr-pop .egnav-links { display: flex; flex-direction: column; gap: 0; } #files-rail .fr-pop .egnav-link { display: block; width: 100%; padding: 7px 12px; text-align: left; height: auto; font: 400 12px/1.3 var(--ds-font); color: var(--ds-ink); background: transparent; border: 0; text-decoration: none; } #files-rail .fr-pop .egnav-link:hover { background: var(--ds-pop-hov); } #files-rail .fr-pop .egnav-link.active { background: var(--ds-accent-soft); color: var(--ds-accent-ink); box-shadow: none; } #files-rail .fr-pop .egnav-link::before, #files-rail .fr-pop .egnav-link::after { display: none; content: none; } /* ── the band: the organisation and the project, white on the blue (the Map's #sb-band) ── */ .fx-band { flex: none; background: var(--ds-accent); color: var(--ds-on-accent); padding: 9px 12px 4px; } .fx-band .fx-org:empty { display: none; } .fx-band .egnav-orgwrap { position: relative; display: block; width: 100%; margin: 0 0 2px; padding: 0; } .fx-band .egnav-org { display: flex; align-items: center; gap: 7px; width: 100%; height: 30px; padding: 0 9px; background: var(--ds-on-accent) !important; color: var(--ds-accent-press) !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; font: 500 12px/1 var(--ds-font); letter-spacing: 0; max-width: none !important; margin: 0 !important; } .fx-band .egnav-org:hover { background: var(--ds-field-focus) !important; } .fx-band .egnav-org .sb-org-ico { width: 16px; height: 16px; flex: none; } .fx-band .egnav-org .sb-org-car { width: 14px; height: 14px; flex: none; margin-left: auto; } .fx-band .egnav-org-dot, .fx-band .egnav-org .egnav-caret { display: none; } .fx-band .egnav-org-name { flex: 1; max-width: none !important; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fx-band .egnav-orgmenu { top: calc(100% + 4px); left: 0; right: 0; width: auto; } /* the project picker on the band: the page's PROJECT chip (documents.html's own markup, ui.js's dropdown) worn as the Map's project line — white words on the blue, a caret, no box. Its tag stays in the page for a screen reader and for the chip's own rules, out of sight. */ .fx-band .ds-chipsel { display: flex; width: 100%; max-width: none; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .fx-band .ds-chipsel-tag { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fx-band .ds-chipsel .usel, .fx-band .ds-chipsel select { flex: 1; width: 100%; } .fx-band .ds-chipsel select:not(.usel-native) { padding: 7px 2px 6px; color: var(--ds-on-accent); font: 400 13px/1.3 var(--ds-font); } .fx-band .ds-chipsel .usel-trigger { width: 100%; justify-content: flex-start; text-align: left; gap: 6px; padding: 7px 2px 6px; min-height: 0; background: transparent; border: 0; color: var(--ds-on-accent); font: 400 13px/1.3 var(--ds-font); box-shadow: none; } .fx-band .ds-chipsel .usel-trigger .usel-lbl { flex: 0 1 auto; } .fx-band .ds-chipsel .usel-trigger:hover .usel-lbl { text-decoration: underline; } .fx-band .ds-chipsel .usel-caret { opacity: .9; color: var(--ds-on-accent); } .fx-band .ds-chipsel .usel-trigger:focus-visible { outline: 2px solid var(--ds-on-accent); outline-offset: 1px; } /* ── THE FRAME every Files page shares (moved from documents.html, 2026-10-10) ────────────────── Beside the rail: the PANEL (.fx-side: the band, a head, a hint, a filter, the page's own list in the Map tree's rounded rows) and the MAIN column (.fx-main: the header with the place and a search, an action row, the page's content, a foot). Documents keeps its own host (.stage) and details pane; Reports, Permits and Photos stand in .fx-stage. Every colour a token; the blues are --ds-accent (map-shell.css's Civillo blue) mixed over the ground they sit on. */ .fx-stage { position: fixed; top: var(--nav-h); bottom: 0; left: var(--fr-w, 0px); right: 0; margin: 0; padding: 0; display: flex; min-height: 0; background: var(--ds-bg); } /* the stage also wears .eng-page, so every rule the Files pages already scope to their old host (files-theme.css's fields, permits.html's .eng-page input.pm-input …) keeps reaching them; invixo.css's page inset and 1380 px column are the old host's alone */ .fx-stage.eng-page { width: auto; max-width: none; margin: 0; padding: 0; } /* the panel: the band, a head, a filter, the page's list */ .fx-side { flex:none; width:272px; display:flex; flex-direction:column; min-height:0; background:var(--ds-page); border-right:1px solid var(--ds-hairline); z-index:3; } .fx-phead { flex:none; display:flex; align-items:center; gap:2px; padding:12px 8px 0 14px; } .fx-ph { flex:1; font:500 12px/1.3 var(--ds-font); color:var(--ds-ink); } /* THE PANEL'S OWN GREY WORDS are the darker --ds-mut (Kye 2026-10-10, his upgrade pick "darker panel grey text"): the frame's --ds-mut-3 (#6b7280 under ds-hair) read 4.47:1 on the panel grey and the count chip 3.83:1 on its own ground, under the 4.5:1 reading floor, on every light page */ .fx-hint { flex:none; padding:2px 14px 8px; font:400 11px/1.4 var(--ds-font); color:var(--ds-mut); } .fx-filter { flex:none; margin:0 10px 6px 12px; } .fx-filter.ds-filter { display:flex; width:auto; } /* the panel's tools step aside in the overview (renderTree sets [hidden]); their own display rules would otherwise outrank the attribute */ .fx-phead .ico-btn[hidden], .fx-filter.ds-filter[hidden] { display:none; } .fx-tree { flex:1; min-height:0; overflow:auto; padding:2px 0 14px; } .ft-row { display:flex; align-items:center; gap:6px; height:28px; margin:1px 8px 1px 6px; padding:0 8px 0 calc(6px + var(--d, 0) * 16px); border-radius:6px; cursor:pointer; font:400 12px/1.3 var(--ds-font); color:var(--ds-ink); user-select:none; } .ft-row:hover { background:color-mix(in srgb, var(--ds-accent) 9%, var(--ds-page)); } .ft-row.on { background:color-mix(in srgb, var(--ds-accent) 25%, var(--ds-page)); } .ft-row.on:hover { background:color-mix(in srgb, var(--ds-accent) 31%, var(--ds-page)); } .ft-row.drop { background:color-mix(in srgb, var(--ds-accent) 15%, var(--ds-page)); box-shadow:inset 0 0 0 1.5px var(--ds-accent); } .ft-row.plain { cursor:default; } /* a list row that is a