/* ========================================================================== V101 — the left rail, rebuilt. The report: "the left sidebar is badly made, push it over and do it again. It keeps collapsing on its own, and when I click it, it does not collapse." Both halves of that were measured on the live site before anything here was written, and they turn out to be one defect. MEASURED. Collapsed rail, 1440x900, pointer parked in the content: .sidebar 48px .main margin-left 48px -> content starts at x=64 Now move the pointer onto the rail, without clicking anything: .sidebar 48px (the rail itself does NOT move) .main margin-left 252px -> content starts at x=276 204 pixels of the page jump sideways because the pointer crossed the left edge. The rail never moves; only the content does, and only while the pointer is over the rail. That is "it keeps collapsing on its own" - the page rearranges itself under the reader for no reason they can see. And the second half is the same rule seen from the other end. The only way to collapse the rail is to click a button that lives INSIDE the rail, so at the moment the click lands the pointer is necessarily still on it. The class flips, and the `:has(.sidebar:hover)` rule re-expands `.main` again in the same frame. The rail did collapse; the page looks like it did not. That is "when I click it, it does not collapse". WHY IT WAS LIKE THAT. The rule is v089.css:93-99, inside @media (hover: hover): body.ial-v030 .app.sidebar-collapsed:not(.sidebar-hover-open) :has(.sidebar:hover) .main { margin-left: 252px !important; ... } It was written for a hover-to-expand rail, where it is correct: if the rail opens under the pointer, the content must step aside. V097 then removed the hover-to-expand from the rail (v097.css:51-78) and did NOT remove this - so the content kept reacting to a hover that no longer did anything. Two versions disagreeing about whether hover means anything. Four more things were measured while checking it, and each is fixed here. 1. FOUR KEYS FOR ONE BOOLEAN, and the click writes a different one from the one the boot reads: index.html:4038 'ial-sidebar-collapsed' (setSidebarCollapsed) v085-shell.mjs:7 'ial-sidebar-collapsed-v085' (initSidebar) v028-ui.mjs:55 'ial-v028-sidebar-collapsed' (toggleCommercialSidebar) v097-features:8 'ial-v097-rail-v1' (the arrow's tooltip) v028-ui.mjs:65 does `window.toggleSidebar = toggleCommercialSidebar`, so the button's inline `onclick="toggleSidebar()"` reaches THAT function and writes only the third key, while v085's boot reads the second and v098's inline script seeds it with ''. Measured on a fresh profile: legacy key null, v085 key '', v097 key 'open' - three readers, three answers, before a single click. 2. THE COLLAPSED RAIL OVERFLOWED ITSELF. Measured at 48px wide: `.langBtn` 46px inside a 32px row, `.appCopyright b` 74px inside a 40px box, and the collapse button drawn at y=92 on top of the first nav item at y=84 - the rail was 40px of content in a 48px box with three things hanging out of it. 3. THE DEFAULT WAS A SIDE EFFECT. v085-shell.mjs:25 collapses on any desktop with no saved value, and v098 neutralised it by seeding an empty string from a classic inline script. A default that depends on the absence of a key is a default nobody can find; V101 states it instead. 4. `body` carried `paper-split-workspace` from the first paint on a page that had never opened a paper - a class left behind by the paper workspace and never removed. It is not this file's business, so it is only recorded. HOW THIS FILE WORKS. One custom property holds the number, and both the rail and the content read it, so they cannot disagree: :root --v101-w 252px --v101-pad 44px html.v101-shut --v101-w 60px --v101-pad 44px @media (max-width: 980px) --v101-w 0px (no rail is drawn) @media (601-980px) --v101-pad 22px @media (max-width: 600px) --v101-pad 14px Two numbers, not one: `--v101-w` is how wide the rail is, `--v101-pad` is how much air the content keeps, and only the first of them changes when the rail is collapsed. `v101-features.mjs` owns the state, the click and the keys. The selectors below are long on purpose: every rule that used to answer the question "is the rail open?" has to be answered here too, or the old answer wins. They are prefixed with `html` so they carry one element more than the `body.ial-v030 ...` rules they override, which is the only reliable way to win when both sides are `!important`. ========================================================================== */ :root { --v101-w: 252px; --v101-pad: 44px; } html.v101-open { --v101-w: 252px; --v101-pad: 44px; } html.v101-shut { --v101-w: 60px; --v101-pad: 44px; } html.v101-booting { --v101-transition: none; } /* WHERE THE RAIL STOPS EXISTING is 980px, not 680px. v033.css:355-361 hides `.sidebar` for the whole of `@media (max-width:980px)`; v035.css:30 records the same boundary in a comment ("<=980px 时 sidebar 本就 display:none"). The first version of this file zeroed the inset at 680px instead, so the band between them - portrait iPad among them - paid for a rail nobody can see. Measured on the live site at 820x1180 before this was corrected: rail 0px, `display:none`, and `.main` still carrying `margin-left: 252px`. The content lost 31% of a page that was already narrow. The same three selectors are written out in every block below because a bare `:root` cannot beat `html.v101-open`, and a media query adds no weight of its own - only source order decides, so the answer has to be restated at the same weight it was first stated. */ @media (max-width: 980px) { :root, html.v101-open, html.v101-shut { --v101-w: 0px; } } /* THE CONTENT'S OWN GUTTER is the site's number, not this file's invention. v033.css:482-489 already answers "how much air does the content get" per breakpoint - 296px for desktop is itself 252px of rail plus 44px of air - and the first version of this file answered 22px again from here and quietly took 22px of breathing room off every desktop page. One gutter instead, the same whether the rail is open or shut: the air belongs to the content, and how much of it there is should not depend on whether the reader collapsed the menu. */ @media (min-width: 601px) and (max-width: 980px) { :root, html.v101-open, html.v101-shut { --v101-pad: 22px; } } @media (max-width: 600px) { :root, html.v101-open, html.v101-shut { --v101-pad: 14px; } } /* -------------------------------------------------------------------------- 1. THE RAIL. One width, stated for both states. THE SPECIFICITY ARITHMETIC, because it is the whole difficulty here. The first draft of this rule was html body.ial-v030.v101 .app .sidebar (0,4,2) which is four classes and two elements. v089.css:52 is body.ial-v030 .app.sidebar-collapsed:not(.sidebar-hover-open) .sidebar (0,5,1) five classes and one element - and FIVE CLASSES BEAT FOUR CLASSES, then element count is compared. So the draft lost, the rail measured 48px, and the only reason it looked right in a manual test was that after clicking the button still had focus, which let the `:focus-within` variant match at (0,6,2). On a reload with nothing focused there is no such accident. Hence the variable is stated again on the `.v101-shut` rules, which carry five classes of their own. -------------------------------------------------------------------------- */ html body.ial-v030.v101 .app .sidebar { width: var(--v101-w) !important; box-sizing: border-box !important; } html body.ial-v030.v101 .app.v101-open .sidebar { width: var(--v101-w) !important; box-sizing: border-box !important; } /* The shut rail, stated for the plain case and again for both pseudo-classes. Every one of these has to be in this list: v089 at (0,6,1) and v097 at (0,7,1) both set 252px on `:hover` and `:focus-within`, and a rule that only covered the plain case would lose to them the moment the pointer crossed the rail - which is the reported defect. */ html body.ial-v030.v101 .app.v101-shut .sidebar, html body.ial-v030.v101 .app.v101-shut .sidebar:hover, html body.ial-v030.v101 .app.v101-shut .sidebar:focus-within, html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed .sidebar, html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:hover, html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:focus-within, html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed.sidebar-hover-open .sidebar:hover, html body.ial-v030.v101 .app.v101-shut .sidebar.app-hover-open { width: var(--v101-w) !important; box-sizing: border-box !important; padding: 18px 0 14px !important; overflow-x: hidden !important; } /* -------------------------------------------------------------------------- 2. THE CONTENT. It is inset by the rail and by nothing else. No `:has()`, no hover, no breakpoint where it disagrees with the rail. -------------------------------------------------------------------------- */ html body.ial-v030.v101:not(.workspace-mode) .app.v101-open .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-open:has(.sidebar:hover) .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-open:has(.sidebar:focus-within) .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-shut .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open) .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open):has(.sidebar:hover) .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open):has(.sidebar:focus-within) .main, html body.ial-v030.v101:not(.workspace-mode) .app.v101-shut.sidebar-collapsed.sidebar-hover-open:has(.sidebar:hover) .main { margin-left: var(--v101-w) !important; padding-left: var(--v101-pad) !important; } /* The writing surfaces are full-screen and lay themselves out from x=0. */ html body.ial-v030.v101.workspace-mode .main, html body.ial-v030.v101.workspace-mode .app.v101-open .main, html body.ial-v030.v101.workspace-mode .app.v101-shut .main { margin-left: 0 !important; padding-left: 0 !important; } /* -------------------------------------------------------------------------- 3. THE RAIL'S OWN CONTENTS when it is shut. Everything that is a word is hidden and everything that is an icon stays, and every element is put back inside the rail. The hover copies matter here too: v085.css:153-191 reveals all of these again on hover, and since hover no longer opens the rail, a revealed label would simply overflow a 60px strip. -------------------------------------------------------------------------- */ html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open) .sidebar :is(.brandCopy, .navsec, .collapseText, .sidebarAccountCopy, .sidebarSignIn, .sidebarLangLabel, .appCopyright, .acctCopy, .acctUpgradeWord, .nav button > span:not(.ico)), html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:hover :is(.brandCopy, .navsec, .collapseText, .sidebarAccountCopy, .sidebarSignIn, .sidebarLangLabel, .appCopyright, .acctCopy, .acctUpgradeWord, .nav button > span:not(.ico)), html body.ial-v030.v101 .app.v101-shut.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:focus-within :is(.brandCopy, .navsec, .collapseText, .sidebarAccountCopy, .sidebarSignIn, .sidebarLangLabel, .appCopyright, .acctCopy, .acctUpgradeWord, .nav button > span:not(.ico)), html body.ial-v030.v101 .app.v101-shut .sidebar :is(.brandCopy, .navsec, .collapseText, .sidebarAccountCopy, .sidebarSignIn, .sidebarLangLabel, .appCopyright) { display: none !important; } html body.ial-v030.v101 .app.v101-shut .sidebar { padding: 18px 0 14px !important; align-items: center !important; overflow-x: hidden !important; } /* The brand row: mark on top, arrow underneath, both centred and in flow. The arrow used to be absolutely positioned at top:78px, which is where it landed on top of the first nav item. */ html body.ial-v030.v101 .app.v101-shut .sidebar .brand { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; width: 100% !important; height: auto !important; padding: 0 0 10px !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .brandmark { width: 36px !important; height: 36px !important; margin: 0 auto !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarCollapseBtn { position: static !important; inset: auto !important; transform: none !important; width: 36px !important; height: 36px !important; margin: 0 auto !important; display: grid !important; place-items: center !important; line-height: 1 !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .nav { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; width: 100% !important; height: auto !important; padding: 0 !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .nav button, html body.ial-v030.v101 .app.v101-shut .sidebar .nav button:hover { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; justify-content: center !important; align-items: center !important; flex: 0 0 auto !important; font-size: 0 !important; border-radius: 12px !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .nav button .ico { font-size: 18px !important; line-height: 1 !important; width: auto !important; } /* The theme row is one 40px control in the rail; it must not keep the 216px guest-card width it has when the rail is open. */ html body.ial-v030.v101 .app.v101-shut .sidebar .v088-themeRow { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: auto !important; padding: 8px 0 !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .v088-themeRow button { width: 44px !important; min-width: 44px !important; height: 36px !important; padding: 0 !important; display: grid !important; place-items: center !important; } /* The account block, stacked. `flex-wrap` is the one that bites here, and it is not obvious from reading the property. v085 sets `flex-wrap: wrap !important` on this box, and the box has a bounded height. In a `flex-direction: column` container, `wrap` does not wrap downwards - it starts a NEW COLUMN once the height is used up. Measured at a 60px rail: the avatar at x=1, the settings/sign-in stack at x=45, the upgrade button at x=89 - three columns, 44px apart (36px control + 8px gap), each one outside the rail. Setting `nowrap` and letting the height be auto is the whole fix; the rest is getting the three controls to 36px and centred. */ html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarAccountMirror { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 8px 0 !important; margin: 10px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarAccountMirror .acctAvatar { display: grid !important; width: 36px !important; min-width: 36px !important; height: 36px !important; place-items: center !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarAccountMirror .acctStack { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: auto !important; height: auto !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarAccountMirror :is(.acctIcon, .acctBtn, .acctUpgrade) { width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important; display: grid !important; place-items: center !important; flex: 0 0 auto !important; } /* Language: two chips stacked, each inside the rail. Measured before this: 46px buttons in a 32px row, so "EN" sat on the rail and the other one hung out over the content. */ html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarLang { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; width: 100% !important; height: auto !important; padding: 6px 0 !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarLang .langBtn { width: 44px !important; min-width: 44px !important; padding: 0 !important; text-align: center !important; flex: 0 0 auto !important; } /* -------------------------------------------------------------------------- 4. THE ARROW ANIMATES, THE PAGE DOES NOT. The rail's own width transition is kept because the rail is the thing being changed. `.main` is not animated any more: it used to slide 204px whenever the pointer crossed it, and an animated slide of the entire page under the pointer is what made the movement feel like it was happening on its own. -------------------------------------------------------------------------- */ html body.ial-v030.v101 .app .sidebar { transition: width .16s ease, padding .16s ease !important; } html body.ial-v030.v101 .app .main { transition: none !important; } html.v101-booting body.ial-v030.v101 .app .sidebar { transition: none !important; } @media (prefers-reduced-motion: reduce) { html body.ial-v030.v101 .app .sidebar { transition: none !important; } } /* -------------------------------------------------------------------------- 5. TWO ROWS THAT WERE THE WRONG SHAPE FOR A 252px COLUMN. a) The appearance toggle. v088 builds it as a button whose entire content is one emoji, then sets `.v088-themeRow #themeToggleBtn { width: 100% }` - so an id rule wins the width and the control stretches to 216px. Measured in the open rail: a 216x36 pill with a moon in the middle of it and nothing else, sitting between two labelled rows. It becomes a 40px button aligned with the nav icons. `!important` is what it takes: the rule being overridden is keyed on an id, and no number of classes out-specifies one. b) The sign-in chip. Measured in the shut rail: `.acctBtn` is 36px wide because that is what the rail allows, but its word is not - "Sign in" renders centred and spills out of both sides of the button and over the content. A 60px strip cannot show a word, so the chip is withdrawn while the rail is shut; the avatar, the settings gear and the upgrade star all stay, and one click on the arrow brings the chip back. Hidden rather than shrunk on purpose: a 36px box with a word hanging out of it is worse than not drawing it. -------------------------------------------------------------------------- */ html body.ial-v030.v101 .app.v101-open .sidebar .v088-themeRow { justify-content: flex-start !important; padding-left: 14px !important; padding-right: 14px !important; } html body.ial-v030.v101 .app.v101-open .sidebar .v088-themeRow #themeToggleBtn { width: 40px !important; min-width: 40px !important; height: 40px !important; } html body.ial-v030.v101 .app.v101-shut .sidebar .sidebarAccountMirror .acctBtn { display: none !important; } /* -------------------------------------------------------------------------- 6. THE ARROW ITSELF. Focus is kept visible (a rail you can only operate with a mouse is a rail half the readers cannot operate), and the ring is drawn inside the rail so `overflow: hidden` can never clip it. -------------------------------------------------------------------------- */ html body.ial-v030.v101 .app .sidebarCollapseBtn { border: 1px solid #294a73 !important; background: #17375f !important; color: #dbe4f0 !important; border-radius: 10px !important; cursor: pointer !important; } html body.ial-v030.v101 .app .sidebarCollapseBtn:hover { background: #21466f !important; border-color: #3a5f92 !important; color: #ffffff !important; } html body.ial-v030.v101 .app .sidebarCollapseBtn:focus-visible { outline: 2px solid #7aa7ff !important; outline-offset: -2px !important; } html body.ial-v030.v101 .app.v101-shut .sidebarCollapseBtn { border-radius: 50% !important; } html[data-ial-theme="dark"] body.ial-v030.v101 .app .sidebarCollapseBtn { border-color: #33507a !important; background: #16233b !important; color: #dbe4f0 !important; } html[data-ial-theme="dark"] body.ial-v030.v101 .app .sidebarCollapseBtn:hover { background: #1e3050 !important; border-color: #46679a !important; color: #ffffff !important; }