/* styles/install.css * * The install line. Hidden unless scripts/pwa.js has set data-installable on * , which it does only when the browser can actually install the app and * the person has not said "Not now". Two wordings: a button where the browser * offers a prompt, and plain instructions on iOS, which has none. */ [data-install] { display: none; } :root[data-installable] [data-install] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 16px 0 0; font-size: .9rem; color: var(--fg-dim); } [data-install] .install-prompt, [data-install] .install-ios { display: none; } :root[data-installable="prompt"] [data-install] .install-prompt, :root[data-installable="ios"] [data-install] .install-ios { display: inline; } [data-install] button { font: inherit; font-weight: 700; cursor: pointer; background: none; border: 0; padding: 4px 0; color: var(--accent-1); text-decoration: underline; text-underline-offset: 3px; } [data-install] [data-install-dismiss] { color: var(--fg-dim); font-weight: 400; } /* On the reporting app, only its first screen. A captain part-way through a report has one job, and it is not installing anything. */ :root[data-view]:not([data-view="home"]) [data-install] { display: none; }