/* =========================================================================== ISTA layout: the workshop tool's own chrome, 1:1. EVERY RULE IN THIS FILE IS SCOPED UNDER .ista-real, and .ista-real is set only when Settings 'inpaScreens' is 'on' (inpaMode(), which is forced off on phones). With the setting on Modern, not one selector here matches and the ISTA app keeps the look it had. Nothing outside the shell is touched either way: the scope class sits on the chrome container and on , and every rule descends from one of them. THE COLOURS ARE MEASURED, NOT CHOSEN. Each value below was sampled off the frames of a real session rather than eyeballed, because "about right" grey is what makes a skin read as an imitation. The three that carry the look: teal #5e958f the active tab, a selected row, a document title bar grey #c5c5c5 the toolbar, both sub-tab strips, every button face black #000000 the main tab bar The tab strips have exactly one shape rule and it is not the obvious one. The main bar and any strip that has ANOTHER strip below it are plain rectangles on the tab grid; the LAST strip on the page cuts its top-right corner into a trapezoid. That is why Operations/New (which has a level-3 strip under it) is square while Vehicle information (which has none) is cut. Getting this backwards is the single most visible way to miss. =========================================================================== */ /* The tokens are declared on BOTH the chrome container and the body class. The chrome needs them; so do the status line, the bottom bar and .view, which are siblings of the chrome rather than its children. A var() that does not resolve makes its whole declaration invalid at computed-value time -- which silently hands .view's inset back to the rule underneath and tucks the content behind the chrome -- so both scopes carry the set. */ .ista-real, body.ista-real-body { /* the measured palette */ --ir-teal: #5e958f; --ir-teal-dim: #7ba8a3; --ir-grey: #c5c5c5; --ir-grey-line: #b3b3b3; --ir-head: #4d4d4d; --ir-row-alt: #e6e6e6; --ir-off: #8a8a8a; --ir-ink: #000; /* the ground outside the content panel, and the line that boxes a tab cell */ --ir-page: #fff; --ir-cell-edge: #9fa3a2; --ir-font: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif; /* the chrome's fixed bands, measured off the frames at 1728px wide and kept in px: this tool does not scale its chrome with the viewport */ --ir-toolbar-h: 30px; --ir-title-h: 32px; --ir-header-h: 23px; --ir-tabbar-h: 42px; --ir-strip-h: 40px; --ir-strip3-h: 47px; --ir-status-h: 20px; --ir-bottom-h: 34px; } /* ---- the shell replaces the app's own frame ------------------------------- The app's topbar, breadcrumbs and F-key bar are the app's chrome. The workshop tool has its own version of all three (the toolbar row, the tab bars, the bottom button bar), so showing both would be two competing frames around one screen. They go while the skin is up and come back the moment it is not. */ /* These are the app's own chrome by CLASS, not by id: .topbar is a

and .fkeybar a