/* ===================================================================== palettes-v2.css -- the colour palettes offered in the top strip WHAT THIS IS A palette re-tints the whole site by overriding the --theme-* custom properties that every stylesheet here already reads from. Nothing else needs to know a palette exists: the header, buttons, grids, the kowhaiwhai band, the hero sky and the footer all derive their colours from these same variables, so setting them at the body is the entire mechanism. WHY body AND NOT :root Styles/client-.css and the AdminTheme overrides both write these variables on :root. body.palette-* is more specific and closer to the content, so it wins for everything inside -- which is everything. No !important is needed anywhere in this file. WHAT IT IS NOT It is COSMETIC AND PER-SESSION (Utils.PaletteCookie). It never writes to the client's AdminTheme rows, so a visitor trying palettes cannot change what anybody else sees, and closing the browser puts the site back to the trust's own colours. That is why it is open to everyone rather than gated to admins. ADDING ONE Add the key and label to Utils.Palettes and a block below. The names are te reo colour words on purpose -- a palette belongs to nobody in particular, so it must never be named after an iwi or a trust. ===================================================================== */ /* --------------------------------------------------------------- Pounamu -- greenstone. Teal-green, cool, the calmest of the four. --------------------------------------------------------------- */ body.palette-pounamu { --theme-accent: #0e7c6d; --theme-accent-alt: #0b6459; --theme-accent-soft: #66c6b8; --theme-heading-color: #064a5a; --theme-header-bg: #0d2b2c; --theme-menu-bg: #0d2b2c; --theme-menu-text: #eaf5f2; --theme-menu-hover: #66c6b8; --theme-submenu-bg: #14403f; --theme-submenu-text: #dceeea; --theme-link-color: #0b5a50; --theme-link-hover: #0e7c6d; --theme-button-bg: #0e7c6d; --theme-button-text: #ffffff; --theme-button-hover-bg: #ffffff; --theme-button-hover-text: #0e7c6d; --theme-grid-header-bg: #064a5a; --theme-grid-header-text: #ffffff; --theme-koru-bg: #064a5a; --theme-koru-fg: #66c6b8; --theme-footer-bg: #132a27; --theme-footer-text: #b9cdc8; --theme-footer-accent: #0e7c6d; } /* --------------------------------------------------------------- Kahurangi -- blue. The most corporate of the four; reads well for a trust that wants to look like an institution. --------------------------------------------------------------- */ body.palette-kahurangi { --theme-accent: #20549f; --theme-accent-alt: #1a4585; --theme-accent-soft: #8fb3e4; --theme-heading-color: #16295c; --theme-header-bg: #111a30; --theme-menu-bg: #111a30; --theme-menu-text: #eaf0f9; --theme-menu-hover: #8fb3e4; --theme-submenu-bg: #1c2c4d; --theme-submenu-text: #dde6f5; --theme-link-color: #1b4685; --theme-link-hover: #20549f; --theme-button-bg: #20549f; --theme-button-text: #ffffff; --theme-button-hover-bg: #ffffff; --theme-button-hover-text: #20549f; --theme-grid-header-bg: #16295c; --theme-grid-header-text: #ffffff; --theme-koru-bg: #16295c; --theme-koru-fg: #8fb3e4; --theme-footer-bg: #111a30; --theme-footer-text: #b9c3d8; --theme-footer-accent: #20549f; } /* --------------------------------------------------------------- Kokowai -- red ochre. Warm and earthy; the strongest of the four, so the ink colours below it are deliberately dark. --------------------------------------------------------------- */ body.palette-kokowai { --theme-accent: #a32b22; --theme-accent-alt: #86211a; --theme-accent-soft: #dd8a70; --theme-heading-color: #511710; --theme-header-bg: #2b1310; --theme-menu-bg: #2b1310; --theme-menu-text: #f7ede8; --theme-menu-hover: #dd8a70; --theme-submenu-bg: #40201a; --theme-submenu-text: #f0ded6; --theme-link-color: #8c2a20; --theme-link-hover: #a32b22; --theme-button-bg: #a32b22; --theme-button-text: #ffffff; --theme-button-hover-bg: #ffffff; --theme-button-hover-text: #a32b22; --theme-grid-header-bg: #511710; --theme-grid-header-text: #ffffff; --theme-koru-bg: #511710; --theme-koru-fg: #dd8a70; --theme-footer-bg: #2b1310; --theme-footer-text: #d6c0b6; --theme-footer-accent: #a32b22; } /* --------------------------------------------------------------- Whenua -- land. Olive and gold; closest to the palette several clients already run, so it is the least surprising of the four. --------------------------------------------------------------- */ body.palette-whenua { --theme-accent: #6e5a1f; --theme-accent-alt: #584917; --theme-accent-soft: #c4ab63; --theme-heading-color: #3c3110; --theme-header-bg: #211c0c; --theme-menu-bg: #211c0c; --theme-menu-text: #f6f2e5; --theme-menu-hover: #c4ab63; --theme-submenu-bg: #342c12; --theme-submenu-text: #ece5d2; --theme-link-color: #5f4f1b; --theme-link-hover: #6e5a1f; --theme-button-bg: #6e5a1f; --theme-button-text: #ffffff; --theme-button-hover-bg: #ffffff; --theme-button-hover-text: #6e5a1f; --theme-grid-header-bg: #3c3110; --theme-grid-header-text: #ffffff; --theme-koru-bg: #3c3110; --theme-koru-fg: #c4ab63; --theme-footer-bg: #211c0c; --theme-footer-text: #cfc7ad; --theme-footer-accent: #6e5a1f; }