/* * Recipe Tracker stylesheet. * */ /* ========================================================================== THEME TOKENS Every colour above is expressed as a CSS custom property. :root holds the built-in "default" palette (the original warm-paper look). Each theme is a [data-theme="key"] block (set on from the logged-in user's profile, see User::THEMES) that overrides the structural tokens. Status/feedback colours (badges, flash) are deliberately shared so YES/MEH/NO keep one consistent traffic-light meaning across every theme. Palettes are the canonical published colours for each named theme. ========================================================================== */ :root { --page-bg:#f6f1e7; --surface:#ffffff; --surface-2:#efe7d8; --surface-hover:#fbf7ef; --text:#2f2b26; --text-2:#6b4a2f; --muted:#857a6c; --heading:#5a2015; --border:#e0d6c4; --border-strong:#cdbfa4; --border-soft:#eee3cf; --accent:#b5502a; --accent-hover:#98421f; --accent-on:#ffffff; --good-strong:#3f6b2e; --masthead-bg:#7a2e1d; --masthead-border:#5a2015; --masthead-text:#fdf6ec; --masthead-link:#f6d8bf; --masthead-link-hover:#ffe6da; --masthead-muted:#f0cbb4; --nav-sep:#b96a52; --btn-secondary:#6b6257; --btn-secondary-hover:#554d44; --btn-danger:#a33227; --btn-danger-on:#fff; /* text on the danger button; dark in themes whose red is pale */ /* Shared status + feedback (not re-themed; legible on light or dark). */ --good:#4b9b3f; --warn:#d19a1e; --warn-2:#d06a1e; --bad:#c0392b; --neutral:#8a8078; --ok-bg:#e5f2df; --ok-border:#9ccf87; --ok-text:#2f5720; --err-bg:#fbe3e0; --err-border:#e39a90; --err-text:#7a2119; --info-bg:#eef4f8; --info-border:#b9cbd6; --info-text:#3f6a86; } /* Nord -- arctic, muted blue-grey (nordtheme.com). */ [data-theme="nord"] { --page-bg:#2e3440; --surface:#3b4252; --surface-2:#434c5e; --surface-hover:#353c4a; --text:#eceff4; --text-2:#d8dee9; --muted:#9aa4b8; --heading:#eceff4; --border:#434c5e; --border-strong:#4c566a; --border-soft:#3b4252; --accent:#88c0d0; --accent-hover:#8fbcbb; --accent-on:#2e3440; --masthead-bg:#3b4252; --masthead-border:#2e3440; --masthead-text:#eceff4; --masthead-link:#88c0d0; --masthead-link-hover:#eceff4; --masthead-muted:#9aa4b8; --nav-sep:#4c566a; --btn-secondary:#4c566a; --btn-secondary-hover:#434c5e; --btn-danger:#bf616a; } /* Solarized (dark) -- precision sepia base (ethanschoonover.com/solarized). */ [data-theme="solarized"] { --page-bg:#002b36; --surface:#073642; --surface-2:#0a4a59; --surface-hover:#063540; --text:#93a1a1; --text-2:#93a1a1; --muted:#657b83; --heading:#eee8d5; --border:#0a4a59; --border-strong:#586e75; --border-soft:#073642; --accent:#268bd2; --accent-hover:#2aa198; --accent-on:#fdf6e3; --masthead-bg:#073642; --masthead-border:#002b36; --masthead-text:#eee8d5; --masthead-link:#2aa198; --masthead-link-hover:#fdf6e3; --masthead-muted:#657b83; --nav-sep:#586e75; --btn-secondary:#586e75; --btn-secondary-hover:#657b83; --btn-danger:#dc322f; } /* Dracula -- vivid neon on charcoal (draculatheme.com). */ [data-theme="dracula"] { --page-bg:#282a36; --surface:#343746; --surface-2:#44475a; --surface-hover:#2f3240; --text:#f8f8f2; --text-2:#d3d4e0; --muted:#8b93b8; --heading:#f8f8f2; --border:#44475a; --border-strong:#565972; --border-soft:#343746; --accent:#bd93f9; --accent-hover:#ff79c6; --accent-on:#282a36; --masthead-bg:#343746; --masthead-border:#21222c; --masthead-text:#f8f8f2; --masthead-link:#bd93f9; --masthead-link-hover:#ff79c6; --masthead-muted:#8b93b8; --nav-sep:#6272a4; --btn-secondary:#6272a4; --btn-secondary-hover:#565972; --btn-danger:#ff5555; --btn-danger-on:#282a36; } /* Gruvbox (dark) -- retro-groove, warm earthy (github.com/morhetz/gruvbox). */ [data-theme="gruvbox"] { --page-bg:#282828; --surface:#3c3836; --surface-2:#504945; --surface-hover:#32302f; --text:#ebdbb2; --text-2:#d5c4a1; --muted:#a89984; --heading:#fabd2f; --border:#504945; --border-strong:#665c54; --border-soft:#3c3836; --accent:#fe8019; --accent-hover:#d65d0e; --accent-on:#282828; --masthead-bg:#3c3836; --masthead-border:#1d2021; --masthead-text:#fbf1c7; --masthead-link:#fabd2f; --masthead-link-hover:#fbf1c7; --masthead-muted:#a89984; --nav-sep:#665c54; --btn-secondary:#504945; --btn-secondary-hover:#665c54; --btn-danger:#cc241d; } /* Tokyo Night -- neon-noir indigo-navy (github.com/enkia/tokyo-night). */ [data-theme="tokyo_night"] { --page-bg:#1a1b26; --surface:#24283b; --surface-2:#2f344d; --surface-hover:#1f2233; --text:#c0caf5; --text-2:#a9b1d6; --muted:#7f88b0; --heading:#c0caf5; --border:#414868; --border-strong:#545c7e; --border-soft:#24283b; --accent:#7aa2f7; --accent-hover:#7dcfff; --accent-on:#1a1b26; --masthead-bg:#24283b; --masthead-border:#16161e; --masthead-text:#c0caf5; --masthead-link:#7aa2f7; --masthead-link-hover:#7dcfff; --masthead-muted:#7f88b0; --nav-sep:#414868; --btn-secondary:#414868; --btn-secondary-hover:#545c7e; --btn-danger:#f7768e; --btn-danger-on:#1a1b26; } /* Rose Pine -- muted rosy-mauve, "soho vibes" (rosepinetheme.com). */ [data-theme="rose_pine"] { --page-bg:#191724; --surface:#1f1d2e; --surface-2:#26233a; --surface-hover:#211f30; --text:#e0def4; --text-2:#cbc9e0; --muted:#908caa; --heading:#e0def4; --border:#403d52; --border-strong:#524f67; --border-soft:#26233a; --accent:#c4a7e7; --accent-hover:#ebbcba; --accent-on:#191724; --masthead-bg:#1f1d2e; --masthead-border:#100f1a; --masthead-text:#e0def4; --masthead-link:#c4a7e7; --masthead-link-hover:#ebbcba; --masthead-muted:#908caa; --nav-sep:#403d52; --btn-secondary:#403d52; --btn-secondary-hover:#524f67; --btn-danger:#eb6f92; --btn-danger-on:#191724; } /* Material -- ink on paper, saturated indigo (m2.material.io). Light theme. */ [data-theme="material"] { --page-bg:#fafafa; --surface:#ffffff; --surface-2:#eef0f6; --surface-hover:#f2f4f9; --text:#212121; --text-2:#424242; --muted:#757575; --heading:#1a237e; --border:#e0e0e0; --border-strong:#bdbdbd; --border-soft:#eeeeee; --accent:#3f51b5; --accent-hover:#303f9f; --accent-on:#ffffff; --masthead-bg:#3f51b5; --masthead-border:#303f9f; --masthead-text:#ffffff; --masthead-link:#e8eaf6; --masthead-link-hover:#ffffff; --masthead-muted:#c5cae9; --nav-sep:#7986cb; --btn-secondary:#616161; --btn-secondary-hover:#424242; --btn-danger:#b00020; } /* Secondary buttons keep light text (their grey backgrounds stay dark in every theme). Danger buttons use --btn-danger-on so themes with a pale red can put dark text on it for legibility -- they never follow --accent-on. */ .button.secondary, button.secondary { color: #fff; } .button.danger, button.danger { color: var(--btn-danger-on); } /* ---- Profile: live theme preview ---- */ .profile-theme .theme-preview { margin-top: 16px; max-width: 520px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--page-bg); color: var(--text); } .theme-preview .tp-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--masthead-bg); color: var(--masthead-text); border-bottom: 3px solid var(--masthead-border); } .theme-preview .tp-brand { font-weight: bold; } .theme-preview .tp-nav { font-size: 12px; color: var(--masthead-link); } .theme-preview .tp-body { padding: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .theme-preview .tp-card { flex: 1 1 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .theme-preview .tp-title { font-weight: bold; color: var(--heading); } .theme-preview .tp-chips, .theme-preview .tp-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* ---------- Base ---------- */ * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--page-bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .inner { max-width: 1040px; margin: 0 auto; padding: 0 20px; } /* ---------- Masthead ---------- */ #masthead { background: var(--masthead-bg); color: var(--masthead-text); padding: 14px 0; border-bottom: 4px solid var(--masthead-border); } #masthead .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .site-title { margin: 0; font-size: 22px; } .site-title a, .site-title a:hover { color: var(--masthead-text); text-decoration: none; } .main-nav a { color: var(--masthead-link); margin-right: 12px; font-size: 14px; } .main-nav a:hover { color: #fff; } .main-nav .nav-sep { color: var(--nav-sep); margin-right: 8px; } /* ---------- Content ---------- */ #content { padding-top: 24px; padding-bottom: 40px; min-height: 60vh; } h1, h2, h3 { color: var(--heading); } h1 { margin-top: 0; } /* ---------- Flash ---------- */ .flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; border: 1px solid transparent; } .flash-notice { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } .flash-alert { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); } /* ---------- Buttons ---------- */ .button, button, input[type="submit"] { display: inline-block; background: var(--accent); color: var(--accent-on); border: none; padding: 8px 14px; border-radius: 4px; font-size: 14px; cursor: pointer; text-decoration: none; } .button:hover, button:hover, input[type="submit"]:hover { background: var(--accent-hover); text-decoration: none; } .button.secondary { background: var(--btn-secondary); } .button.secondary:hover { background: var(--btn-secondary-hover); } .button.danger { background: var(--btn-danger); } .button.small { padding: 4px 9px; font-size: 12px; } /* ---------- Tables ---------- */ table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); } table.list th, table.list td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; } table.list th { background: var(--surface-2); color: var(--heading); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; } table.list tr:hover td { background: var(--surface-hover); } /* Sortable table headers (see sortable_table.js). */ table.sortable th.sortable-col { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } table.sortable th.sortable-col:hover { background: var(--surface-hover); } table.sortable th.sortable-col:after { content: '\2195'; opacity: 0.35; margin-left: 6px; font-size: 11px; } table.sortable th.sort-asc:after { content: '\2191'; opacity: 0.9; } table.sortable th.sort-desc:after { content: '\2193'; opacity: 0.9; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap; } .opinion-yes { background: var(--good); } .opinion-meh { background: var(--warn); } .opinion-no { background: var(--bad); } .opinion-notsure { background: var(--neutral); } .opinion-blank { background: var(--surface-2); color: var(--muted); } .complexity-easy { background: var(--good); } .complexity-medium { background: var(--warn); } .complexity-hard { background: var(--warn-2); } .complexity-expert { background: var(--bad); } .complexity-blank { background: var(--surface-2); color: var(--muted); } /* Marks a "My Recipe" that was imported from a linked website (vs written by us). */ .origin-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--info-border); background: var(--info-bg); color: var(--info-text); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } h1 .origin-badge { font-size: 13px; } /* ---------- Forms ---------- */ .form-field { margin-bottom: 16px; } .form-field label { display: block; font-weight: bold; margin-bottom: 4px; color: var(--heading); } input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="file"], textarea, select { width: 100%; max-width: 520px; padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 14px; background: var(--surface); color: var(--text); } /* Native