/* Page colour on the phone: the surfaces the stylesheet twins in * mobile-page-colors.js cannot reach on their own. * * Every rule here needs html[data-page-color], which is only there when the * owner has set a page colour, so an app without one is untouched. The * palette (--pc-page, --pc-card, --pc-ink, ...) is written on by * mobile-page-colors.js. Selectors carry :not(#pc) ids to outrank the * phone's blanket theme sweeps ([data-theme] * * *, #market-main-area *, ...). */ /* The page itself. (Not the desktop frame, which paints the room around the handset on .) */ html[data-page-color]:not(.nst-framed):not(#pc), html[data-page-color]:not(#pc) body { background-color: var(--pc-page) !important; } /* Typing fields stay near-white with dark text on any page colour, so they read as fields. */ html[data-page-color]:not(#pc):not(#pc2) body :is(input:not([type=checkbox], [type=radio], [type=color], [type=range], [type=file], [type=submit], [type=button], [type=reset], [type=hidden]), textarea, select) { color: var(--pc-field-ink) !important; -webkit-text-fill-color: var(--pc-field-ink) !important; caret-color: var(--pc-field-ink) !important; } html[data-page-color]:not(#pc):not(#pc2) body :is(input, textarea)::placeholder { color: var(--pc-field-dim) !important; -webkit-text-fill-color: var(--pc-field-dim) !important; opacity: 1; } /* The bottom nav: its glyphs and labels in the page's text colour, the active tab in the palette's highlight (the app colour where it shows on the page, the text colour where it would vanish). */ html[data-page-color]:not(#pc) body #bottom-nav > button.bottom-nav-btn:not(.active) :is(i, span, .mobile-nav-glyph) { color: var(--pc-ink) !important; -webkit-text-fill-color: var(--pc-ink) !important; } html[data-page-color]:not(#pc) body #bottom-nav > button.bottom-nav-btn.active, html[data-page-color]:not(#pc) body #bottom-nav > button.bottom-nav-btn.active :is(i, span, .mobile-nav-glyph) { color: var(--pc-hl) !important; -webkit-text-fill-color: var(--pc-hl) !important; } /* Theme-only palette names for the twins of rules written for both themes (see build() in mobile-page-colors.js): defined in one theme only, so in the other the twin falls back to the rule's own colour. */ html[data-page-color]:not([data-theme="dark"]) { --pc-l-ink: var(--pc-ink); --pc-l-dim: var(--pc-dim); --pc-l-faint: var(--pc-faint); --pc-l-page: var(--pc-page); --pc-l-soft: var(--pc-soft); --pc-l-line: var(--pc-line); } html[data-page-color][data-theme="dark"] { --pc-d-ink: var(--pc-ink); --pc-d-dim: var(--pc-dim); --pc-d-page: var(--pc-page); --pc-d-card: var(--pc-card); --pc-d-soft: var(--pc-soft); --pc-d-line: var(--pc-line); } /* Fields drawn as a pill around a bare input take the field colours as a whole (the input inside is transparent). */ html[data-page-color]:not(#pc) body #mobile-community-room .community-room-screen__composer-shell { background: var(--pc-field) !important; color: var(--pc-field-ink) !important; box-shadow: inset 0 0 0 1px var(--pc-field-edge) !important; } html[data-page-color]:not(#pc) body #mobile-community-room .community-room-screen__composer-shell :is(i, svg, button:not(.community-room-screen__send)) { color: var(--pc-field-dim) !important; -webkit-text-fill-color: var(--pc-field-dim) !important; } html[data-page-color]:not(#pc) body #mobile-community-room .community-room-screen__send { background: var(--pc-btn) !important; color: var(--pc-on-btn) !important; -webkit-text-fill-color: var(--pc-on-btn) !important; } html[data-page-color]:not(#pc) body #mobile-community-room .community-room-screen__send :is(svg, svg path) { stroke: var(--pc-on-btn) !important; color: var(--pc-on-btn) !important; } /* A page colour draws the same palette in light and dark, so the viewer's theme switch would change nothing: hide it (the owner's Theme setting in Settings stays). */ html[data-page-color] .viewer-theme-row { display: none !important; }