/* * "daidala" skin for Redmine 6.x — a visual theme consistent with the * daidala.tech landing page and the core /admin panel (task #7503, style reference #7283). * * Loaded by the plugin (view_layouts_base_html_head hook), NOT as a * Setting.ui_theme theme — Redmine scans themes only in Rails.root/themes and * Rails.root/app/assets/themes, not plugin_assets. The link is appended to * (after core application.css and heads_for_theme), so overrides win * through the cascade without !important where specificity is sufficient. * * Forced dark-only mode (no switch) — the landing page has no light mode. * :root tokens match the landing page 1:1 (verified on live daidala.tech). * * v2 ([#8079]): repalette after the landing redesign — navy + brass + paper * (previously terminal green+cyan #7503). Fonts: Lato (sans, text/UI) + Source * Code Pro (mono, accents), self-hosted from assets/fonts/. Hook architecture * is unchanged — canonical v2 tokens plus v1 name aliases. */ /* Webfonts self-hosted by the plugin (assets/fonts/ → /plugin_assets/…/fonts/), * NOT from an external CDN — Redmine may run offline/behind a firewall, while * daidala is deployment/environment agnostic ([#8079] note-5). Lato = text/UI * (sans), Source Code Pro = accents (code, badges, table headers, eyebrows, * issue numbers). Latin + latin-ext subsets (Polish UI diacritics). */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-400-latin-b64a7eb8.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-400-latin-ext-22065c39.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-700-latin-5fb2d787.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-700-latin-ext-af918de1.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-900-latin-0dba9b0d.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-900-latin-ext-256e168e.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/SourceCodePro-400-latin-b5eb86be.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/plugin_assets/redmine_daidala_plugin/SourceCodePro-400-latin-ext-259ff1eb.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { /* ── v2 palette — matches the daidala.tech landing page 1:1 ([#8079] note-4, * approved in note-5). Navy + brass + paper, dark-only. Canonical tokens * below; old v1 names ([#7503]) remain as aliases to the new palette to avoid * rewriting ~900 cascade rules (repalette, not new architecture). */ --ink: #0F1E30; /* page background (upper gradient stop) */ --ink-deep: #0A1521; /* deepest background: lower stop, code, form fields, top menu */ --slate: #22384E; /* card/box background (.box, login) */ --line: #2E4A67; /* borders, table lines, separators */ --paper: #ECE6D6; /* primary text */ --dim: #7C8DA1; /* tertiary text, placeholders, closed states */ --brass: #C79A4B; /* main accent: CTA, link hover, active tab, eyebrow, focus */ --brass-hi: #E3B85E; /* brighter brass: accent hover, in-progress states */ --brass-dim: #A8802F; /* subdued brass: pressed/hover-down (derived) */ --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ── v1 token aliases → v2 palette (#7503 cascade works unchanged) */ --bg: var(--ink); --bg-soft: var(--ink-deep); --panel: var(--slate); --border: var(--line); --border-2: var(--line); --fg: var(--paper); --fg-strong: var(--paper); --muted: #A9BACD; /* secondary text: metadata, attribute labels */ --green: var(--brass); /* v1 main accent (green) → brass */ --green-dim: var(--brass-dim); --green-hi: var(--brass-hi); --cyan: var(--brass); /* v1 secondary accent (cyan) → brass (single accent, note-4) */ --amber: var(--brass-hi); /* warning / in progress → brass-hi (note-5) */ --red: #C7544B; /* error / urgent → maritime red (note-5) */ /* Semantic-state backgrounds — derived from the v2 palette */ --hover: #2A425C; /* row/element hover (lightened slate) */ --selected: #2E4A67; /* selection background */ --green-bg: #2C2717; /* notice/success background (warm, brass left stripe) */ --green-bd: #4E3E1E; --amber-bg: #322B16; /* warning background */ --amber-bd: #5A4C22; --red-bg: #2E1A17; /* error background */ --red-bd: #5C2C27; --info-bg: #1B2E43; /* :target background (anchor highlight, slate) */ /* Lucide icons for top-menu items (#7524) — outline SVG used as a mask */ --icon-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E"); --icon-my-page: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%2214%22%20y%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%223%22%20y%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); --icon-projects: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fsvg%3E"); --icon-administration: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.671%204.136a2.34%202.34%200%200%201%204.659%200%202.34%202.34%200%200%200%203.319%201.915%202.34%202.34%200%200%201%202.33%204.033%202.34%202.34%200%200%200%200%203.831%202.34%202.34%200%200%201-2.33%204.033%202.34%202.34%200%200%200-3.319%201.915%202.34%202.34%200%200%201-4.659%200%202.34%202.34%200%200%200-3.32-1.915%202.34%202.34%200%200%201-2.33-4.033%202.34%202.34%200%200%200%200-3.831A2.34%202.34%200%200%201%206.35%206.051a2.34%202.34%200%200%200%203.319-1.915%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); --icon-help: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); --icon-my-account: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); --icon-logout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%2017%205-5-5-5%22%2F%3E%3Cpath%20d%3D%22M21%2012H9%22%2F%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3C%2Fsvg%3E"); --icon-login: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m10%2017%205-5-5-5%22%2F%3E%3Cpath%20d%3D%22M15%2012H3%22%2F%3E%3Cpath%20d%3D%22M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4%22%2F%3E%3C%2Fsvg%3E"); } /* ====== Base / layout ====== */ /* Set html to --bg — the core Dark theme sets html,body to gray --gl-bg-0 * (#1f1e24); the skin targeted only body, leaving html gray (hidden beneath * body, but inconsistent). #7556 */ html { background-color: var(--bg); } /* Base page background — navy ink→ink-deep gradient (landing v2, [#8079] * note-4). The glow (brass + slate) sits in an overlay ABOVE the panels * (body::after below), with pointer-events:none — it remains visible across the * whole surface as on the landing page, while panels stay opaque (text remains * readable; overlay mechanism from gate #7556). Scanline removed with landing v2. */ body { color: var(--fg); font-family: var(--sans); background: linear-gradient(var(--ink), var(--ink-deep)) fixed; } /* Glow overlay (radial gradient) ABOVE the panels. z-index:2 beats * #main/#content (z-index:1 below) in the root stacking context, while * pointer-events:none passes clicks through. Alphas match landing v2 1:1 * ([#8079] note-4): brass .07 (top center) + slate .28 (top right). */ body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(1200px 600px at 50% -10%, rgba(199,154,75,.07), transparent 60%), radial-gradient(900px 520px at 88% 12%, rgba(46,74,103,.28), transparent 55%); pointer-events: none; z-index: 2; } #wrapper, #header, #main, #top-menu, #footer { position: relative; z-index: 1; } /* [#7609] The expanded "+" button menu (#main-menu .menu-children) lives in * #header; #header and #main are siblings in #wrapper, both at z-index:1. With * equal z-index, DOM order decides — #main follows #header, so #content blocks * painted above the menu (7 of 8 items unclickable, topmost=#content). Raising * #header above #main moves the whole header, including the menu, above content. */ #header { z-index: 3; } /* Fonts: Lato (sans) for all text/UI, inherited from body. Forms get sans * explicitly (Redmine core sets its own font-family, so they do not inherit). * Source Code Pro (mono) ONLY for accents ([#8079] note-4): code, table * headers/eyebrows, badges, and issue numbers. */ input, select, textarea, button, #main-menu li a, #top-menu a { font-family: var(--sans); } pre, code, tt, kbd, table.list th, .table-list-header, #sidebar h3, legend, table.issues td.id a, .rdp-daidala-issue-number, .badge, .badge-count, .badge-issues-count, .badge-private, .badge-status-open, .badge-status-locked, .badge-status-closed { font-family: var(--mono); } /* Eyebrow — sidebar/legend/table headers in landing style: spaced uppercase * SCP mono brass ([#8079] note-4). Color (--cyan→brass) comes from rules in * sections below; only the typographic shape is defined here. */ #sidebar h3, legend { text-transform: uppercase; letter-spacing: 2px; font-size: 0.82em; font-weight: 600; } table.list th, .table-list-header { text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; } /* H1 — heavy Lato (landing v2); the page heading stands out by weight, not color. */ h1, #content h1 { font-weight: 800; } #wrapper { background: transparent; } #main { background: transparent; } /* #content without background or border — Konrad ([#7710]). Previously a * --panel with --border and rounding ([#7503]); content now blends into the * page background, consistently with header ([#7708]) and sidebar ([#7709]). * Color remains unchanged. */ #content, #main.nosidebar #content { background: none; color: var(--fg); border: none; border-radius: 5px; } /* ====== Top menu (global bar) ====== */ #top-menu { background: none; border-bottom: none; } #top-menu a, #top-menu #loggedas, #top-menu #loggedas a { color: var(--muted); } #top-menu a:hover { color: var(--fg); } /* ====== Top menu — Lucide icons beside items ====== * Keeps the top bar consistent with daidala's /admin panel (#7524, reference * #7283), where every menu item has a Lucide icon. Embedded as mask-image * data URIs (without changing Redmine view markup); background: currentColor * makes each icon inherit the item color (--muted at rest, --fg on hover) and * follow the rules above. The class is the dashed top_menu item name from * Redmine::MenuManager: home/my-page/projects/administration/help plus the * right-side my-account/logout/login items. */ #top-menu a.home::before, #top-menu a.my-page::before, #top-menu a.projects::before, #top-menu a.administration::before, #top-menu a.help::before, #top-menu a.my-account::before, #top-menu a.logout::before, #top-menu a.login::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.15em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } #top-menu a.home::before { -webkit-mask-image: var(--icon-home); mask-image: var(--icon-home); } #top-menu a.my-page::before { -webkit-mask-image: var(--icon-my-page); mask-image: var(--icon-my-page); } #top-menu a.projects::before { -webkit-mask-image: var(--icon-projects); mask-image: var(--icon-projects); } #top-menu a.administration::before { -webkit-mask-image: var(--icon-administration); mask-image: var(--icon-administration); } #top-menu a.help::before { -webkit-mask-image: var(--icon-help); mask-image: var(--icon-help); } #top-menu a.my-account::before { -webkit-mask-image: var(--icon-my-account); mask-image: var(--icon-my-account); } #top-menu a.logout::before { -webkit-mask-image: var(--icon-logout); mask-image: var(--icon-logout); } #top-menu a.login::before { -webkit-mask-image: var(--icon-login); mask-image: var(--icon-login); } /* ====== Header ====== * Header without a background or bottom edge — Konrad ([#7708]). Previously a * neutral --border edge and --panel background ([#7635]); it now blends into * the page background. */ #header { background: none; border-bottom: none; } #header a { color: var(--fg); } #header h1, #header h1 a { color: var(--green); font-family: var(--sans); } #quick-search #q { background: var(--bg); color: var(--fg); border: 1px solid var(--border-2); } /* ====== Main menu (tabs under header) ====== */ #main-menu li a { color: var(--muted); } #main-menu li a:hover { background: var(--bg-soft); color: var(--green); } #main-menu li a.selected, #main-menu li a.selected:hover { background: var(--panel); color: var(--green); border-bottom: 2px solid var(--green); } #main-menu li a.new-object { background-color: var(--green); color: var(--bg); } #main-menu .menu-children { background-color: var(--bg-soft); border: 1px solid var(--border); } #main-menu .menu-children li a { color: var(--fg); background-color: var(--bg-soft); } #main-menu .menu-children li a:hover { color: var(--bg); background-color: var(--green); } /* ====== Sidebar ====== */ #sidebar { background: none; border-left: none; color: var(--fg); } #sidebar h3 { color: var(--cyan); } #sidebar hr { background: var(--border); } #sidebar a.selected { background-color: var(--green); color: var(--bg); } #sidebar-switch-button svg { stroke: var(--fg); } #sidebar-switch-button:hover { background-color: var(--hover); } /* ====== Footer / admin menu ====== */ #footer { background: transparent; color: var(--muted); border-top: 1px solid var(--border); } #admin-menu li a { color: var(--fg); } #admin-menu li a:hover { color: var(--green); } /* ====== Headings ====== */ #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: var(--fg-strong); } h1, h2 { color: var(--fg-strong); } .wiki h6 { color: var(--muted); } /* ====== Links ====== * Green is a RARE action/hover accent, not every link's default color * (project lead feedback: "too many green links", #7503 note-19). Resting * content link = --fg; hover → --green. Green remains where it deliberately * indicates an action/state (buttons, active tab, focus); their own rules below * remain unchanged. */ a, a:link, a:visited { color: var(--fg); } a:hover, a:active { color: var(--green); } a.issue.closed, a.issue.closed:link, a.issue.closed:visited, a.project.closed, a.project.closed:link, a.project.closed:visited, a.user.locked, a.user.locked:link, a.user.locked:visited { color: var(--dim); } a.user.user-mention { background-color: rgba(199,154,75,0.16); } /* ====== Project jump / dropdowns ====== */ #project-jump .drdn-trigger { background: var(--bg-soft); border-color: var(--border-2); } #project-jump .drdn-items > * { color: var(--fg) !important; } #project-jump .drdn-items > a:hover { background-color: var(--green); color: var(--bg) !important; } .drdn-content { background: var(--bg-soft); border: 1px solid var(--border-2); color: var(--fg); } .drdn-content .autocomplete:focus { border-color: var(--green); } .drdn-items > * { border-color: var(--border); } .drdn-items > *:focus { border-color: var(--border-2); } .drdn-items > span { color: var(--muted); } .contextual .drdn-items > a:hover, .journal-actions .drdn-items > a:hover { background-color: var(--green); color: var(--bg); } .contextual .drdn-items > a.icon:hover .icon-svg, .journal-actions .drdn-items > a.icon:hover .icon-svg { stroke: var(--bg); } .contextual .drdn-items > a.icon:hover .icon-svg-filled, .journal-actions .drdn-items > a.icon:hover .icon-svg-filled { fill: var(--bg); } /* ====== Issue context menu ====== * Redmine appends #context-menu inside #content and positions it with page * coordinates. This theme makes #main positioned, so absolute coordinates are * offset by the ancestor origin. The companion script supplies viewport * coordinates and fixed positioning keeps the menu anchored at the clicked * three-dot trigger. * * Every selector below is prefixed with `html` on purpose: core * context_menu.css is injected through `yield :header_tags`, i.e. AFTER this * stylesheet, with selectors of equal specificity. Plain `#context-menu ...` * rules would lose the cascade; the extra type selector wins regardless of * load order. */ html #context-menu { position: fixed; color: var(--fg); } html #context-menu ul { background: var(--bg-soft); border-color: var(--border-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } html #context-menu li { border-color: transparent; background: transparent; } html #context-menu a, html #context-menu a:link, html #context-menu a:visited { color: var(--fg); } html #context-menu li:hover { background-color: var(--green); border-color: var(--green-hi); } html #context-menu li:hover > a, html #context-menu a:hover { color: var(--bg); } html #context-menu li:hover > a.icon .icon-svg { stroke: var(--bg); } html #context-menu li:hover > a.icon .icon-svg-filled { fill: var(--bg); } html #context-menu a.disabled, html #context-menu a.disabled:hover { color: var(--dim); } /* ====== Tables ====== */ table.list, .table-list { border-color: var(--border); } table.list th, .table-list-header { background: var(--bg-soft); color: var(--cyan); border-color: var(--border); } table.list td { border-top-color: var(--border); color: var(--fg); } table.list:not(.odd-even) tbody tr:nth-child(odd), .odd, #issue-changesets div.changeset:nth-child(odd) { background-color: var(--panel); } table.list:not(.odd-even) tbody tr:nth-child(even), .even, #issue-changesets div.changeset:nth-child(even) { background-color: var(--bg-soft); } table.list:not(.odd-even) tbody tr:nth-child(odd):hover, table.list:not(.odd-even) tbody tr:nth-child(even):hover, .odd:hover, .even:hover, #issue-changesets div.changeset:nth-child(odd):hover, #issue-changesets div.changeset:nth-child(even):hover { background-color: var(--hover); box-shadow: inset 3px 0 0 var(--green); } table.issues td.block_column { color: var(--muted); } table.issue-report tr.total, table.issue-report-detailed tr.total { border-top-color: var(--border); } .decoration-red, a.decoration-red { color: var(--red) !important; } table#time-report tbody tr.subtotal, table#time-report tbody tr.subtotal td.hours { color: var(--muted); } table#time-report tbody tr.total { border-top-color: var(--border); color: var(--fg-strong); } /* ====== Boxes / mypage / fieldset ====== */ .box, .mypage-box { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; } fieldset { border-color: var(--border); } legend { color: var(--cyan); } /* ====== Forms ====== */ input, select, textarea, button { background: var(--ink-deep); color: var(--fg); border: 1px solid var(--border-2); } select[multiple=multiple] { background: var(--ink-deep); } input[type="submit"], button[type="submit"] { background-color: var(--brass); color: var(--ink-deep); border-color: var(--brass); font-weight: bold; } input[type="submit"]:hover, button[type="submit"]:hover { background-color: var(--green-dim); border-color: var(--green-dim); } input[type="text"]:focus, input[type="text"]:active, input[type="password"]:focus, input[type="password"]:active, input[type="date"]:focus, input[type="date"]:active, input[type="number"]:focus, input[type="number"]:active, input[type="email"]:focus, select:focus, select:active, textarea:focus, textarea:active { border-color: var(--green); outline: none; box-shadow: 0 0 0 2px rgba(199,154,75,.22); } input:disabled, select:disabled, textarea:disabled { color: var(--muted); opacity: .7; } .tabular label.error { color: var(--red); } .tabular label.error + *:not(#issue_description_and_toolbar), .tabular label.error + span#issue_description_and_toolbar div.jstBlock { border-color: var(--red); } .check_box_group { background: var(--bg); border-color: var(--border-2); } .attachments_fields input.filename, #existing-attachments .filename { color: var(--fg); } .existing-attachment.deleted .filename { color: var(--muted) !important; } input.autocomplete { background-color: var(--bg); } /* Redmine's formatted-text preview has a white background in the base theme. * Without an explicit text color it inherits the skin's light color and * becomes unreadable. */ div.wiki-preview { background: var(--ink-deep); color: var(--fg); border-color: var(--border-2); } /* ====== Issue (single) ====== * The main issue-view wrapper is
(without an id). * The previous #issue.issue selector matched only the sticky header (id="issue"), * leaving the attribute wrapper on the Dark theme's gray background * (div.issue { background: --gl-bg-2 }, #7503 note-20). div.issue.details has * higher specificity (0,0,2,1 > 0,0,1,1). * The parameter box border, shadow, and own background were removed (#7642). * Base Redmine / Dark theme sets div.issue { border + box-shadow + background }; * all three are canceled here. The box blends into #content (--panel) without * a local distinction; Description below has its own background and border. */ #issue.issue, div.issue.details { background: transparent; border: none; box-shadow: none; } .issue .attribute .label, .attributes .label { color: var(--muted); } .issue .attribute .value, .attributes .value { color: var(--fg); } #issue .subject h3 { color: var(--fg-strong); } /* Description block — subtle separation from the other issue attributes * (#7527). Previously all of div.issue.details had a uniform --panel background * and the description blended into it. A slightly darker background plus a thin * cyan left border anchors the start of content without loud contrast. */ .issue.details .description { background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 4px; padding: 8px 12px; } /* ====== Journals ====== */ /* Journal header bar. Core (Redmine 6.1.2) gives it flex space-between and * align-items:center, without a border or wrapping. Two narrow-viewport defects * (#7817): (1) border-color alone, without border width/style, draws no border, * while --bg-soft nearly blends into --bg, so the header does not read as a bar; * (2) when the author wraps to two lines, vertically centered metadata (icons + * #N) detaches from the first line. Border + radius separate the bar; * align-items:flex-start and flex columns align metadata with the author line. */ .journals h4.journal-header { background-color: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; align-items: flex-start; } .journals h4.journal-header .journal-info { flex: 1; min-width: 0; } .journals h4.journal-header .journal-meta { flex: none; } .journals h4.journal-header .update-info { color: var(--muted); } .journals div:target h4.journal-header { background-color: var(--info-bg); } .journals .journal-meta .journal-link { color: var(--cyan); } .journals .journal-details, ul.revision-info { color: var(--muted); } .journals .journal-details a, ul.revision-info a { color: var(--green); } .journals .journal-details a:hover, ul.revision-info a:hover { color: var(--green-hi); } .journals .private-notes { border-left-color: var(--red); } /* ====== Activity / search results ====== */ #search-results dd span.description { color: var(--muted); } /* ====== Pagination ====== */ .pagination ul.pages li { border-color: var(--border); background-color: var(--panel); } .pagination ul.pages li.current { background-color: var(--green); color: var(--bg); border-color: var(--green); } .pagination ul.pages li.page:hover { background-color: var(--hover); } .pagination ul.pages li.page a:hover, .pagination ul.pages li.page a:active { color: var(--green-hi); } /* ====== Tabs ====== */ #content .tabs ul { border-bottom-color: var(--border); } #content .tabs ul li a { border-color: var(--border); color: var(--muted); background-color: transparent; } #content .tabs ul li a:hover { color: var(--fg); } #content .tabs ul li a.selected, #content .tabs ul li a.selected:hover { background-color: var(--panel); border-color: var(--border); border-bottom-color: var(--panel); color: var(--green); box-shadow: 0 -2px 0 var(--green) inset; } div.tabs-buttons { background: var(--panel); border-bottom-color: var(--border); } button.tab-left, button.tab-right { border-color: var(--border-2); background-color: var(--bg-soft); } button.tab-left:hover, button.tab-right:hover { background-color: var(--hover); } button.tab-left svg.icon-svg, button.tab-right svg.icon-svg { stroke: var(--fg); } /* ====== Flash messages ====== */ div.flash.error, #errorExplanation { background-color: var(--red-bg); border-color: var(--red-bd); border-left: 4px solid var(--red); color: #E7B3AB; } div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg { stroke: var(--red); } div.flash.notice { background-color: var(--green-bg); border-color: var(--green-bd); border-left: 4px solid var(--green); color: #E3D3A6; } div.flash.notice svg.icon-svg { stroke: var(--green); } div.flash.warning, .conflict, .nodata, .warning { background-color: var(--amber-bg); border-color: var(--amber-bd); border-left: 4px solid var(--amber); color: #ECD79A; } div.flash.warning svg.icon-svg, .conflict svg.icon-svg { stroke: var(--amber); } /* ====== Login form ====== */ #login-form { background-color: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); box-shadow: 0 0 40px rgba(199,154,75,.10), 0 0 60px rgba(46,74,103,.30); } /* ====== Modal ====== */ div.modal { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); } /* ====== Wiki ====== */ div.wiki table, div.wiki td, div.wiki th { border-color: var(--border); } div.wiki a.new { color: var(--red); } div.wiki pre { background-color: var(--bg); border: 1px solid var(--border); color: var(--fg); } div.wiki *:not(pre) > code, div.wiki > code { background: rgba(199,154,75,0.10); color: var(--fg); border: 1px solid var(--border); } div.wiki blockquote { border-left: 3px solid var(--cyan); color: var(--fg); } div.wiki ul.toc { background-color: var(--bg-soft); border-color: var(--border); } div.wiki ul.toc > li:first-child { color: var(--muted); } div.wiki ul.toc a { color: var(--fg); } div.wiki ul.toc a:hover { color: var(--green-hi); } div.wiki a:target + h1, div.wiki a:target + h2, div.wiki a:target + h3, div.wiki a:target + h4, div.wiki a:target + h5, div.wiki a:target + h6 { background-color: var(--info-bg); } a.wiki-anchor:hover { color: var(--muted) !important; } h1:hover a.wiki-anchor, h2:hover a.wiki-anchor, h3:hover a.wiki-anchor, h4:hover a.wiki-anchor, h5:hover a.wiki-anchor, h6:hover a.wiki-anchor { color: var(--muted); } .wiki-update-info { color: var(--muted); } div.pre-wrapper a.copy-pre-content-link { background: var(--bg-soft); border-color: var(--border-2); } div.thumbnail { background: var(--bg-soft); border-color: var(--border); } div.attachments span.author { color: var(--muted); } /* ====== Tooltips ====== */ .tooltip:hover { color: var(--fg); } .tooltip span.tip a { color: var(--green) !important; } div.tooltip:hover span.tip { background-color: var(--bg-soft); border-color: var(--border-2); color: var(--fg); box-shadow: 0 2px 6px rgba(0,0,0,0.6); } .ui-tooltip { background: var(--bg-soft); color: var(--fg); } /* ====== Badges (status colors from the palette) ====== */ .badge-private { background: var(--red); color: var(--bg); border-color: var(--red); } .badge-count { background: var(--green); color: var(--bg); } .badge-status-open { color: var(--cyan); border-color: var(--cyan); } .badge-status-locked { color: var(--dim); border-color: var(--dim); } .badge-status-closed { color: var(--green); border-color: var(--green-dim); } .badge-issues-count { background: var(--bg-soft); color: var(--fg); } /* ====== Progress / diff ====== */ table.progress td.closed { background: var(--green-dim); } table.progress td.done { background: var(--green); } table.progress td.todo { background: var(--hover); } p.progress-info { color: var(--muted); } .diff_out { background: var(--red-bg); } .diff_out span { background: #4a1f1a; } .diff_in { background: var(--green-bg); } .diff_in span { background: #17402a; } .text-diff { background-color: var(--bg); color: var(--fg); border-color: var(--border); } /* ====== Highlight (search) ====== */ .highlight { background-color: #3a3410; color: #ffeaa0; } /* ====== Ajax indicator ====== */ #ajax-indicator { background-color: var(--bg-soft); border-color: var(--border-2); color: var(--fg); } /* ====== Icons (SVG) ====== */ a.icon .icon-svg, a.icon-only .icon-svg, span.icon-actions .icon-svg { stroke: var(--cyan); } a.icon:hover .icon-svg, a.icon-only:hover .icon-svg, span.icon-actions:hover .icon-svg { stroke: var(--green); } a.icon .icon-svg-filled, a.icon-only .icon-svg-filled { fill: var(--cyan); } a.icon:hover .icon-svg-filled, a.icon-only:hover .icon-svg-filled { fill: var(--green); } svg.icon-svg { stroke: var(--muted); } svg.icon-svg-filled { fill: var(--muted); } svg.icon-ok { stroke: var(--green); } .icon-error svg.icon-svg { stroke: var(--red); } .icon-warning svg.icon-svg { stroke: var(--amber); } /* ====== Misc text colours ====== */ p.footnote, p.other-formats, em.info, ul.properties, p.subtitle { color: var(--muted); } .summary { color: var(--fg); } #projects-index ul.projects li.root { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; } #projects-index li.root ul.projects { border-left-color: var(--border); } ul.projects li.root div.archived, ul.projects li.child div.archived { color: var(--muted); } /* ====== Calendar ====== */ ul.cal { background: var(--panel); border-color: var(--border); } .cal .calhead, .cal .week-number { background-color: var(--bg-soft); color: var(--fg); } .cal .calbody.this-month { background-color: var(--panel); } .cal .calbody.other-month { background-color: var(--bg); } .cal .calbody.other-month p.day-num { color: var(--muted); } .cal .calbody.today { background: var(--amber-bg); } .cal .calbody { border-color: var(--border) !important; } /* ====== JQuery UI / datepicker / mentions ====== */ .ui-autocomplete, .ui-menu { background-color: var(--bg-soft); border-color: var(--border-2); color: var(--fg); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-color: var(--green); background: var(--green); color: var(--bg); } .ui-widget-content { background-color: var(--bg-soft); color: var(--fg); } .ui-widget-header { background-color: var(--hover); color: var(--fg); border-color: var(--border); } .ui-datepicker { background: var(--bg-soft); color: var(--fg); border-color: var(--border-2); } .ui-datepicker td a, .ui-datepicker td span { color: var(--fg); background: transparent; border-color: var(--border); } .ui-datepicker td a.ui-state-hover, .ui-datepicker td span.ui-state-hover { background: var(--hover); } .ui-datepicker .ui-datepicker-header { background: var(--hover); color: var(--fg); border-color: var(--border); } .ui-datepicker .ui-state-disabled { color: var(--muted); } .tribute-container ul { background-color: var(--bg-soft); border-color: var(--border-2); color: var(--fg); } .tribute-container li.highlight { background-color: var(--green); color: var(--bg); } /* ====== File content / workflow / repository ====== */ .filecontent.wiki { background: var(--panel); border-color: var(--border); } .sample-data { background-color: var(--bg-soft); border-color: var(--border); color: var(--fg); } .sample-data td { border-color: var(--border); } table.transitions td.enabled { background: var(--green-bg); } table.fields_permissions td.readonly { background: var(--hover); } table.fields_permissions td.required { background: var(--red-bd); } tr.changeset td.revision_graph { background-color: var(--bg-soft); } /* ====== Pre/code ====== */ pre, code { color: var(--fg); } /* ====== Scrollbar ====== */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-2); } * { scrollbar-color: var(--border) var(--bg); } /* ====== /issues list — terminal accents (#7525) ====== * Extends the shared table theme (Tables section above) by differentiating * issue-list rows: cyan ID with a # prefix, status as colored text, and priority * as a stripe on the row's left edge. The goal is to break up the monotony of a * uniform grid (designer direction #7525 note-2). Selectors are scoped to * table.issues so they do not affect other Redmine lists (repositories, users, * changesets) or the shared zebra/hover rules from the Tables section. */ /* Issue ID — cyan mono with a # prefix (terminal glyph) */ table.issues td.id a { color: var(--cyan); font-weight: 600; } table.issues td.id a::before { content: "#"; color: var(--muted); } /* Status as colored text — uppercase mono, only the font color varies by * status ID (no background or outline, #7535). The accent color is assigned * from the row's status ID (status-N on , see Issue#css_classes). Status * IDs are instance-specific; the plugin is dedicated to this instance, so ID * mapping matches the designer's intent. Closed rows are muted by .closed * (an ID-independent fallback). */ table.issues td.status { font-size: .82em; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } table.issues td.status .badge, table.issues td.status a, table.issues td.status > span { text-transform: uppercase; } /* Render the chip on the status cell itself — Redmine inserts bare text */ table.issues tbody td.status { padding-top: 3px; padding-bottom: 3px; } table.issues tbody td.status::first-line { line-height: 1.6; } /* Chip color by status (v2 palette, [#8079] note-4 intent: new→muted, * in progress→brass-hi, closed→dim): * New(1) -> muted * In progress(2)-> brass-hi * Resolved(3) -> brass-hi * Feedback(4) -> brass (accent) * Waiting(34) -> muted (paused) * Closed/Rejected -> dim (through .closed below) */ table.issues tr.status-1 td.status { color: var(--muted); } table.issues tr.status-2 td.status, table.issues tr.status-3 td.status { color: var(--brass-hi); } table.issues tr.status-4 td.status { color: var(--brass); } table.issues tr.status-34 td.status { color: var(--muted); } /* Closed/rejected — muted text, independent of status ID */ table.issues tr.closed td.status { color: var(--dim); } /* Priority as a stripe on the row's left edge (importance scanability). * position_name from IssuePriority#css_classes: highest, high2.., default, * low2.., lowest. Normal (default) has no stripe; only baseline outliers get an * accent. Render the stripe with an inset box-shadow on the row's first cell so * it does not conflict with hover indication (inset 3px green on , Tables). */ table.issues tbody tr td:first-child { position: relative; } table.issues tbody tr.priority-highest td:first-child { box-shadow: inset 3px 0 0 var(--red); } table.issues tbody tr[class*="priority-high"] td:first-child { box-shadow: inset 3px 0 0 var(--red); } table.issues tbody tr.priority-lowest td:first-child, table.issues tbody tr[class*="priority-low"] td:first-child { box-shadow: inset 3px 0 0 var(--muted); } /* List header — green bottom edge (terminal accent, consistent with selected * main-menu items). Shared th styling (bg-soft, cyan) remains from Tables. */ table.issues thead th { border-bottom: 1px solid var(--green); } /* ====== Closed issues in lists — dimming (#7557) ====== * Redmine marks a closed issue row with `.issue.closed` on , both in the * /issues list (table.issues) and the Subtasks (#issue_tree) and Related issues * (#relations) blocks on an issue view. Without this, the whole row is as bright * as an open one and closed state is not obvious at a glance (#7555). Mute the * entire row text to --muted, subtly and consistently with the rest of the skin * (the subject link already had --muted + line-through in Links; list td.status * was already muted above). Background, priority stripe, and hover remain * untouched — brightness is reduced without hiding anything. */ tr.issue.closed td, tr.issue.closed td a.user, tr.issue.closed td a.user:link, tr.issue.closed td a.user:visited { color: var(--dim); } /* ====== Another assignee in the list — dim "Assigned to" text (#7637) ====== * In rows where assignee ≠ current user, gently dim ONLY the "Assigned to" * column text (not the whole row), distinguishing own assignments from others' * at a glance. JavaScript (daidala_task_states.js) adds the * `rdp-daidala-other-assignee` class to td.assigned_to based on the list DOM — * purely visual and configuration-free (YAGNI). Opacity affects only the cell: * subtle dimming, with the rest of the row unchanged. */ table.issues tbody tr.issue td.assigned_to.rdp-daidala-other-assignee { opacity: 0.55; } /* ====== Issue references — mark as clickable (#7557) ====== * An issue reference (`a.issue`) in descriptions/journals and the * Subtasks/Related issues blocks rendered like plain text (--fg from the shared * `a` rule in Links), so its link behavior was not visible. Mark it subtly: * cyan (consistent with `#…` issue IDs in the /issues list) plus a dotted * underline indicating clickability. Closed links (`a.issue.closed`) remain * untouched at --muted + line-through from Links; overriding that would regress * state readability. */ a.issue:not(.closed), a.issue:not(.closed):link, a.issue:not(.closed):visited { color: var(--cyan); text-decoration: underline dotted rgba(199,154,75,.5); text-underline-offset: 2px; } a.issue:not(.closed):hover, a.issue:not(.closed):active { color: var(--green); text-decoration-color: rgba(227,184,94,.6); } /* ====== Daidala processing-state indicator in issue lists (#7554) ====== * JavaScript (daidala_task_states.js) pulls states from core through the plugin * proxy and adds a state class to each issue row in daidala's processing flow: * .rdp-daidala-waiting → issue waits in the flow (picked up, before runner spawn) * .rdp-daidala-active → runner is currently processing the issue * The indicator is the issue number itself in the ID column (td.id a), matching * the author's [#7550] intent to show state on the number. Rows without a class * (outside daidala's flow) retain the default cyan `#…` from above, making * "in the flow" and "outside the flow" distinguishable at a glance. */ /* WAITING — static emphasis: amber number with a dot marker before `#`. No * animation while the issue waits in the queue, but clearly distinct from the * regular cyan used outside the flow. */ table.issues tbody tr.rdp-daidala-waiting td.id a { color: var(--amber); } table.issues tbody tr.rdp-daidala-waiting td.id a::before { content: "◦ #"; color: var(--amber); } /* ACTIVE — animated "Cylon eye" (BSG, author's intent [#7550 note-2/3]): a * horizontal sweep of bright light repeatedly crosses the number glyphs. * Implementation: a moving gradient (dark red → bright flash → dark red) * clipped to glyphs with background-clip:text and animated back and forth like * an oscillating robot eye. */ table.issues tbody tr.rdp-daidala-active td.id a { color: transparent; background-image: linear-gradient( 90deg, #7a1a15 0%, #7a1a15 30%, #ff5f56 45%, #ffd0cc 50%, #ff5f56 55%, #7a1a15 70%, #7a1a15 100% ); background-size: 300% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; animation: rdp-cylon-eye 1.6s ease-in-out infinite alternate; } table.issues tbody tr.rdp-daidala-active td.id a::before { content: "#"; color: var(--red); /* `#` prefix does not inherit the number glyphs' clipped text (separate ::before box) */ -webkit-text-fill-color: var(--red); } @keyframes rdp-cylon-eye { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* Disable animation for prefers-reduced-motion users; active state remains * statically readable as a red number. */ @media (prefers-reduced-motion: reduce) { table.issues tbody tr.rdp-daidala-active td.id a { animation: none; color: var(--red); background-image: none; -webkit-text-fill-color: var(--red); } } /* ====== Processing-state indicator on a single issue view (#7622) ====== * The same indicator as in the list (#7554), applied to the "Issue #" * heading on /issues/. In lists, state appears on the number in td.id; here * the number is embedded in heading text (h2 "Issue #7622"), so JavaScript * (daidala_task_states.js) wraps only "#" in * and adds the state class there. Visual rules * match the list: amber/waiting, Cylon-eye gradient/active, shared * rdp-cylon-eye keyframes, and the prefers-reduced-motion fallback above. * * [#9846] The same span is also injected into the number inside * div#sticky-issue-header .issue-heading, so the sticky bar shows the state * while the h2 is scrolled out of view. The rules below are element-agnostic * (class only), so both places share them without duplication. */ /* WAITING — static amber, matching the list number. */ .rdp-daidala-issue-number.rdp-daidala-waiting { color: var(--amber); } /* ACTIVE — animated "Cylon eye" on the "#" glyphs. */ .rdp-daidala-issue-number.rdp-daidala-active { color: transparent; background-image: linear-gradient( 90deg, #7a1a15 0%, #7a1a15 30%, #ff5f56 45%, #ffd0cc 50%, #ff5f56 55%, #7a1a15 70%, #7a1a15 100% ); background-size: 300% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; animation: rdp-cylon-eye 1.6s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .rdp-daidala-issue-number.rdp-daidala-active { animation: none; color: var(--red); background-image: none; -webkit-text-fill-color: var(--red); } } /* ====== Sticky issue header — skin palette (#9846) ====== * Core application.css paints the bar with the light palette (white background, * #d0d7de border) and the skin left it untouched, so on every viewport width a * white strip floated over the dark page with skin-colored (paper) text on it — * about 1.2:1 contrast. Repaint it with the panel background the rest of the * skin's raised surfaces use, plus a stronger shadow, because the core one * (black at .15 alpha) is invisible against a dark page. The bar holds plain * text only (span.issue-heading + span.subject), so no link colors are needed. */ div#sticky-issue-header { background-color: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); color: var(--fg); } /* ====== Sticky issue header on narrow viewports (#9846) ====== * Core responsive.css pushes div#sticky-issue-header 64px down on mobile so it * does not hide under #header, which core makes position:fixed below 900px. * This skin keeps #header in normal flow (stacking rule near the top of this * file), so it scrolls away with the page and the reserved 64px is just an * empty gap above the bar. Pin the bar to the top edge and bring the anchor * scroll margin back to the bar height alone (core uses 50px on desktop). */ @media screen and (max-width: 899px) { div#sticky-issue-header { inset-block-start: 0; } .controller-issues.action-show div.wiki a[name], .controller-issues.action-show #history div[id^="note-"], .controller-issues.action-show #history div[id^="change-"], .controller-issues.action-show #update { scroll-margin-block-start: 50px; } } /* ====== "Blocked" marker in issue lists (#7634) ====== * JavaScript (daidala_task_states.js) asks the plugin endpoint which visible * issues have an open blocker (an unclosed subtask or blocks/follows issue), * then adds .rdp-daidala-blocked to the subject cell (td.subject). The reason * appears in the subject link's title tooltip; this rule only draws a discreet * lock icon before the subject. * * "Subtle marker" (Konrad's intent [#7634]): a small monochrome lock in subdued * amber before the subject. The text variation selector (U+FE0E) forces text * rendering instead of a colored emoji, so the glyph accepts `color` and stays * quiet. It does not alter table layout: the icon is an inline ::before with a * right margin, shifting the subject by the glyph width. */ table.issues tbody tr td.subject.rdp-daidala-blocked > a::before, table.issues tbody tr td.subject.rdp-daidala-blocked > span:first-child::before { content: "\1F512\FE0E"; color: var(--amber); opacity: .75; margin-right: .35em; font-size: .9em; /* The lock is an indicator, not a link — do not underline it with the subject */ text-decoration: none; display: inline-block; } /* When the subject cell has no inner / (rare list render variants), * place the icon directly on the cell. */ table.issues tbody tr td.subject.rdp-daidala-blocked:not(:has(> a)):not(:has(> span))::before { content: "\1F512\FE0E"; color: var(--amber); opacity: .75; margin-right: .35em; font-size: .9em; } /* ====== Hide
on issue view — header and section separators (#7632) ====== * Konrad does not want horizontal
lines on issue views (#7631 note-2: * only the header and between sections, NOT in journal history, NOT globally). * issues#show renders exactly three
elements (verified in #7632), all * before #history, so journal history has no
to hide: * 1.
before .description → header/attributes → description separator * 2.
before #issue_tree → Subtasks section separator * 3.
before #relations → Related issues section separator * Scoping to body.controller-issues.action-show limits the rule to this view * (body classes from Redmine::Controller), leaving
on other views (wiki, * activity) untouched. :has() targets an
preceding a specific section, * keeping any future
in journal/description content outside the scope. */ .controller-issues.action-show hr:has(+ .description), .controller-issues.action-show hr:has(+ #issue_tree), .controller-issues.action-show hr:has(+ #relations) { display: none; } /* ====== Cron expression builder on the Scheduled Jobs tab (#8017) ====== * Variant A: , move into the left column, stack over the builder label, and cover fields (making them unclickable) — #8033. Keep them inline beside their own select. */ .rdp-cron-builder .rdp-cron-part label { float: none; margin-left: 0; width: auto; text-align: left; font-weight: normal; line-height: normal; } .rdp-cron-builder select { margin: 0 0.15em; } .rdp-cron-builder .rdp-cron-hh { display: inline-flex; align-items: center; } .rdp-cron-builder .rdp-cron-hour, .rdp-cron-builder .rdp-cron-minute { min-width: 4.5em; } .rdp-cron-builder .rdp-cron-colon { margin: 0 0.1em; } .rdp-cron-builder .info { display: block; margin-top: 0.4em; } /* Voice navigation for the closed command set from #9840. */ #rdp-voice-navigation { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; } .rdp-voice-navigation-button { width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--brass); border-radius: 50%; color: var(--paper); background: var(--slate); font-size: 1.25rem; cursor: pointer; } .rdp-voice-navigation-button:hover, .rdp-voice-navigation-button:focus, .rdp-voice-navigation-button.is-listening { color: var(--ink-deep); background: var(--brass-hi); } .rdp-voice-navigation-button.is-listening { box-shadow: 0 0 0 .3rem rgba(199, 154, 75, .25); } .rdp-voice-navigation-status { max-width: min(28rem, calc(100vw - 2.5rem)); padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .35rem; color: var(--paper); background: var(--ink-deep); box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .3); } .rdp-voice-navigation-status[data-state="unmatched"] { border-color: var(--red); } .rdp-voice-navigation-status[data-state="dialog"] { border-color: var(--brass); } /* [#9841] Preview of the dictated values shown before saving. */ .rdp-voice-navigation-dialog { max-width: min(28rem, calc(100vw - 2.5rem)); padding: .65rem .8rem; border: 1px solid var(--brass); border-radius: .35rem; color: var(--paper); background: var(--ink-deep); box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .3); } .rdp-voice-dialog-target { margin-bottom: .4rem; color: var(--brass-hi); font-weight: 700; } .rdp-voice-dialog-value { padding: .2rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; } .rdp-voice-dialog-value[data-current="true"] { color: var(--brass-hi); } .rdp-voice-navigation-mute { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); background: var(--slate); font-size: .95rem; cursor: pointer; } .rdp-voice-navigation-mute:hover, .rdp-voice-navigation-mute:focus { border-color: var(--brass); }