/* * Skórka "daidala" dla Redmine 6.x — motyw wizualny spójny z landingiem * daidala.tech i panelem /admin core (task #7503, referencja stylu #7283). * * Ładowana przez plugin (hook view_layouts_base_html_head), NIE jako motyw * Setting.ui_theme — Redmine skanuje motywy tylko z Rails.root/themes i * Rails.root/app/assets/themes, nie z plugin_assets. Link wpięty na końcu * (po core application.css i heads_for_theme), więc override wygrywa * kaskadą bez !important tam, gdzie specyficzność wystarcza. * * Dark-only, wymuszony (bez przełącznika) — landing nie ma trybu jasnego. * Tokeny :root 1:1 z landingiem (weryfikacja na żywym daidala.tech). */ :root { --bg: #0a0e14; /* tło strony */ --bg-soft: #0f1620; /* strefy drugorzędne: top-menu, sidebar, header journala */ --panel: #0d1420; /* karty/boxy, #content */ --border: #1c2733; /* obramowania, linie tabel, separatory */ --border-2: #2a3a4a; /* jaśniejsze obramowanie (focus-neutral, inputy) */ --fg: #c7d0da; /* tekst podstawowy */ --fg-strong: #e8eef4; /* tekst maksymalnie jasny (H1, wartości headera) */ --muted: #6b7d8f; /* tekst drugorzędny, meta, placeholdery */ --green: #3ddc84; /* akcent główny: linki, aktywna zakładka, focus, primary */ --green-dim: #2aa564; /* hover/wciśnięty akcentu green */ --green-hi: #5fe89d; /* hover linku (rozjaśniony green) */ --cyan: #38bdf8; /* akcent drugorzędny: nagłówki, ikony, wyróżnienia */ --amber: #f5b942; /* ostrzeżenia, stany w toku */ --red: #ff5f56; /* błędy, walidacja, priorytet Urgent */ --hover: #16202c; /* tło hover wierszy/elementów */ --selected: #1c2733; /* tło zaznaczenia */ --green-bg: #10251a; /* tło notice/success */ --green-bd: #1f5238; --amber-bg: #2a2410; /* tło warning */ --amber-bd: #5a4a1c; --red-bg: #2a1512; /* tło error */ --red-bd: #6e2a26; --info-bg: #0e2130; /* tło :target (podświetlenie anchora) */ --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace; /* ikonki lucide dla pozycji górnego menu (#7524) — outline SVG jako maska */ --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 ====== */ /* html na --bg — motyw core Dark ustawia html,body na szare --gl-bg-0 (#1f1e24); * skórka celowała tylko w body, więc html zostawał szary (niewidoczny pod body, * ale niespójny). #7556 */ html { background-color: var(--bg); } /* Bazowe tło strony — jednolity --bg. Poświata i scanline NIE siedzą już na * body (chowały się za nieprzezroczystymi panelami #content/.box, gdzie zajmują * niemal całą powierzchnię zalogowanego widoku — gate #7556 note-7 zmierzył * przyrost ~1 RGB przez półprzezroczysty panel, poniżej progu widoczności). * Zamiast tego oba efekty są warstwą overlay NAD panelami (body::before + * body::after niżej), pointer-events:none, więc widać je na całej powierzchni * jak na landingu daidala.tech, a panele zostają w pełni nieprzezroczyste * (czytelność tekstu nienaruszona). Wariant A z koncepcji projektanta #7556 * note-4. */ body { color: var(--fg); font-family: var(--mono); background: var(--bg); background-attachment: fixed; } /* Overlay poświaty (radial-gradient) NAD panelami. z-index:2 bije #main/#content * (z-index:1 niżej) w kontekście stackingu root, pointer-events:none przepuszcza * klik do treści pod spodem. Alfy 1:1 z landingiem daidala.tech (cyan .08, * green .06 — gate #7556 note-7 potwierdził te wartości na żywym landingu); * na odsłoniętej warstwie overlay dają ten sam efekt co na odsłoniętym body * landingu, bez wzmacniania ponad landing. */ body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(1200px 600px at 50% -10%, rgba(56,189,248,.08), transparent 60%), radial-gradient(900px 500px at 90% 20%, rgba(61,220,132,.06), transparent 55%); pointer-events: none; z-index: 2; } /* Overlay scanline NAD panelami — analogicznie do poświaty. Alfa .016 jak * landing daidala.tech (gate #7556 note-7). Delikatny raster na całej * powierzchni, nie tylko w marginesach wokół paneli. */ body::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px); pointer-events: none; z-index: 2; } #wrapper, #header, #main, #top-menu, #footer { position: relative; z-index: 1; } /* [#7609] Rozwinięte menu przycisku "+" (#main-menu .menu-children) siedzi w * #header; #header i #main są rodzeństwem w #wrapper, oba z z-index:1. Przy * równym z-index decyduje kolejność DOM — #main jest po #header, więc bloki * #content malowały się nad menu (7 z 8 pozycji nieklikalnych, topmost=#content). * Podniesienie #header ponad #main przenosi całe #header (z menu) nad treść. */ #header { z-index: 3; } body, #content, .box, input, select, textarea, button, pre, code, table.list, .wiki, #main-menu li a, #top-menu a { font-family: var(--mono); } #wrapper { background: transparent; } #main { background: transparent; } /* #content bez tła i bez obramowania — Konrad ([#7710]). Wcześniej panel --panel * z ramką --border i zaokrągleniem ([#7503]); teraz treść zlewa się z tłem * strony, spójnie z header ([#7708]) i sidebar ([#7709]). color bez zmian. */ #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 — ikonki lucide przy pozycjach ====== * Spójność górnego paska z panelem /admin daidali (#7524, referencja #7283), * gdzie każda pozycja menu ma ikonkę lucide. Osadzone jako mask-image z data-URI * (bez zmian w markupie widoków Redmine); kolor przez background: currentColor, * więc ikona dziedziczy kolor pozycji (--muted spoczynkowo, --fg hover) i idzie * z regułami wyżej. Klasa = nazwa itemu top_menu przez dasherize * (Redmine::MenuManager): home/my-page/projects/administration/help + prawa * strona my-account/logout/login. */ #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 bez tła i bez dolnej krawędzi — Konrad ([#7708]). Wcześniej neutralna * krawędź --border i tło --panel ([#7635]); teraz header zlewa się z tłem strony. */ #header { background: none; border-bottom: none; } #header a { color: var(--fg); } #header h1, #header h1 a { color: var(--green); } #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 jako RZADKI akcent akcji/hover, nie domyślny kolor każdego linku * (feedback osoby prowadzącej: "za dużo zielonych linków" #7503 note-19). * Spoczynkowy link treści = --fg; hover → --green. Green zostaje tam, gdzie * to celowy akcent akcji/stanu (przyciski, aktywna zakładka, focus) — te mają * własne reguły niżej i nie są ruszane. */ 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(--muted); } a.user.user-mention { background-color: rgba(61,220,132,0.14); } /* ====== 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); } /* ====== 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(--bg); color: var(--fg); border: 1px solid var(--border-2); } select[multiple=multiple] { background: var(--bg); } input[type="submit"], button[type="submit"] { background-color: var(--green); color: var(--bg); border-color: var(--green); 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(61,220,132,.2); } 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); } /* ====== Issue (single) ====== * Główny wrapper widoku zadania to
(bez id) — * poprzedni selektor #issue.issue łapał tylko sticky-header (id="issue"), * przez co wrapper atrybutów zostawał na szarym tle motywu Dark * (div.issue { background: --gl-bg-2 }, #7503 note-20). div.issue.details * bije specyficznością (0,0,2,1 > 0,0,1,1). * Ramka, cień i własne tło boxu parametrów zdjęte (#7642) — bazowy Redmine * / motyw Dark dają div.issue { border + box-shadow + background }, tu je * znosimy w całości. Box zlewa się z tłem #content (--panel), bez żadnego * wyróżnika w tym miejscu; sam Opis niżej ma własne tło + 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); } /* Blok Opis — delikatne wyodrębnienie od reszty atrybutów zadania (#7527). * Wcześniej cały div.issue.details miał jednolite tło --panel i opis się w nim * zlewał. Subtelnie ciemniejsze tło + cienki lewy border cyan dają wzrokowi * kotwicę, gdzie zaczyna się treść, bez krzykliwego kontrastu. */ .issue.details .description { background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 4px; padding: 8px 12px; } .issue.details .description > p:first-child { color: var(--cyan); } /* ====== Journals ====== */ /* Belka nagłówka notatki. Core (Redmine 6.1.2) daje jej flex space-between + * align-items:center, bez ramki i bez wrap. Dwa defekty na wąskim viewporcie * (#7817): (1) samo border-color bez border-width/style nie rysuje ramki, a * --bg-soft niemal zlewa się z --bg — belka nie czyta się jako pasek; (2) gdy * autor zawija się w 2 linie, wyśrodkowana w pionie meta (ikony + #N) odkleja * się od 1. linii. Ramka + radius wydzielają pasek; align-items:flex-start + * flex na kolumnach trzymają meta wyrównaną do linii autora. */ .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: #f4a99a; } 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: #a9e6c3; } 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: #e8c98b; } 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(56,189,248,.10), 0 0 60px rgba(61,220,132,.06); } /* ====== 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(56,189,248,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 kolory na palecie) ====== */ .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(--muted); border-color: var(--muted); } .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); } /* ====== Lista zagadnień /issues — akcenty terminalowe (#7525) ====== * Rozszerza wspólny motyw tabel (sekcja Tables wyżej) o różnicowanie wierszy * listy zadań: ID w cyan z prefiksem #, status jako kolorowy tekst, priorytet * jako pasek na lewej krawędzi wiersza. Cel: złamać monotonię jednolitej * siatki (kierunek projektanta #7525 note-2). Selektory scope'owane do * table.issues, żeby nie ruszać innych list Redmine (repozytoria, użytkownicy, * changesety) ani wspólnej zebry/hoveru z sekcji Tables. */ /* ID zadania — cyan mono z prefiksem # (glyph terminalowy) */ table.issues td.id a { color: var(--cyan); font-weight: 600; } table.issues td.id a::before { content: "#"; color: var(--muted); } /* Status jako kolorowy tekst — mono uppercase, sam kolor fontu per status-id * (bez tła i obwódki, #7535). Kolor akcentu przypisany per status-id na * wierszu (status-N na , patrz Issue#css_classes). status-id są * instancyjne — plugin jest dedykowany tej instancji, mapowanie po id jest * zgodne z intencją projektanta. Zamknięte wyciszają się przez .closed * (fallback niezależny od id). */ 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; } /* chip renderujemy na samej komórce statusu — Redmine wstawia goły tekst */ table.issues tbody td.status { padding-top: 3px; padding-bottom: 3px; } table.issues tbody td.status::first-line { line-height: 1.6; } /* Kolor chipa per status (mapowanie note-2): * Nowy(1) -> cyan * W toku(2) -> green * Rozwiązany(3)-> green * Odpowiedź(4) -> amber * Oczekuje(34) -> amber przygaszony * Zamknięty/Odrzucony -> wyciszony (przez .closed niżej) */ table.issues tr.status-1 td.status { color: var(--cyan); } table.issues tr.status-2 td.status, table.issues tr.status-3 td.status { color: var(--green); } table.issues tr.status-4 td.status { color: var(--amber); } table.issues tr.status-34 td.status { color: #c9a24a; } /* Zamknięte/odrzucone — wyciszony tekst, niezależnie od status-id */ table.issues tr.closed td.status { color: var(--muted); } /* Priorytet jako pasek na lewej krawędzi wiersza (skanowalność ważności). * position_name z IssuePriority#css_classes: highest, high2.., default, low2.., lowest. * Normalny (default) bez paska — akcent tylko dla odstających od baseline. * Pasek renderujemy przez inset box-shadow na pierwszej komórce wiersza, żeby * nie kolidować z hover-kursorem (inset 3px green na , sekcja 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); } /* Nagłówek listy — dolna krawędź green (akcent terminalowy, spójny z main-menu * selected). Wspólny styl th (bg-soft, cyan) zostaje z sekcji Tables. */ table.issues thead th { border-bottom: 1px solid var(--green); } /* ====== Zamknięte zadania na listach — przygaszenie (#7557) ====== * Redmine oznacza wiersz zamkniętego zadania klasą `.issue.closed` na — * na liście /issues (table.issues) oraz w blokach Podzadania (#issue_tree) i * Powiązane zagadnienia (#relations) na widoku zadania. Bez tego cały wiersz * ma tekst tak samo jasny jak otwarty i nie widać na pierwszy rzut oka, co jest * zamknięte (#7555). Wyciszamy tekst całego wiersza do --muted — subtelnie, * spójnie z resztą skórki (link tematu już był --muted + line-through, sekcja * Links; td.status na liście już był wyciszony sekcją wyżej). Tło, pasek * priorytetu i hover zostają nietknięte — przygaszamy jasność, nie chowamy. */ 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(--muted); } /* ====== Obcy przypisany na liście — przygaszenie tekstu "Przypisany do" (#7637) ====== * W wierszach, w których przypisany ≠ zalogowany użytkownik, gaszimy delikatnie * SAM tekst kolumny "Przypisany do" (nie cały wiersz), żeby na pierwszy rzut oka * odróżnić własne przypisania od cudzych. Klasę `rdp-daidala-other-assignee` * przypina JS (daidala_task_states.js) na komórkę td.assigned_to na podstawie * DOM listy — czysto wizualnie, bez konfiguracji (YAGNI). Opacity tylko komórki: * subtelnie ("przyciemnij delikatnie"), reszta wiersza bez zmian. */ table.issues tbody tr.issue td.assigned_to.rdp-daidala-other-assignee { opacity: 0.55; } /* ====== Odnośniki do zadań — odznaczenie jako klikalne (#7557) ====== * Odnośnik do zadania (`a.issue`) w treści opisu/notatek i w blokach * Podzadania/Powiązane zagadnienia renderował się jak zwykły tekst (kolor --fg * ze wspólnej reguły `a` w sekcji Links), więc nie było widać, że to link. * Odznaczamy go delikatnie: cyan (spójnie z ID zadania na liście `#…`, sekcja * lista /issues) + kropkowane podkreślenie sygnalizujące klikalność. Subtelnie, * w duchu skórki. Zamkniętych (`a.issue.closed`) nie ruszamy — zostają --muted * + line-through z sekcji Links (nadpisanie byłoby regresją czytelności stanu). */ a.issue:not(.closed), a.issue:not(.closed):link, a.issue:not(.closed):visited { color: var(--cyan); text-decoration: underline dotted rgba(56,189,248,.5); text-underline-offset: 2px; } a.issue:not(.closed):hover, a.issue:not(.closed):active { color: var(--green); text-decoration-color: rgba(61,220,132,.6); } /* ====== Wskaźnik stanu obiegu daidali na liście zadań (#7554) ====== * JS (daidala_task_states.js) pulluje stany z core przez proxy pluginu i * przypina klasę stanu na wiersz zadania będącego w obiegu daidali: * .rdp-daidala-waiting → task czeka w obiegu (podjęty, przed spawnem runnera) * .rdp-daidala-active → runner aktualnie miele task * Wskaźnikiem jest sam numer zadania w kolumnie ID (td.id a) — spójnie z * intencją autora [#7550], żeby stan było widać na numerze taska. Wiersze bez * klasy (spoza obiegu daidali) zostają przy domyślnym cyan `#…` z sekcji wyżej, * więc "w obiegu" vs "spoza obiegu" jest rozróżnialne na pierwszy rzut oka. */ /* WAITING — statyczne wyróżnienie: numer w bursztynie z kropką-znacznikiem * przed `#`. Bez animacji (task stoi w kolejce), ale wyraźnie inny niż zwykły * cyan zadania spoza obiegu. */ 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 — animowane "oko Cylona" (BSG, intencja autora [#7550 note-2/3]): * poziomy sweep jasnego światła przelatujący w kółko po literach numeru. * Realizacja: ruchomy gradient (ciemna czerwień → jasny błysk → ciemna * czerwień) przyklejony do glifów przez background-clip: text, przesuwany * animacją tam i z powrotem — jak oscylujące oko robota. */ 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); /* prefiks `#` nie dziedziczy clip-text glifów numeru (osobny box ::before) */ -webkit-text-fill-color: var(--red); } @keyframes rdp-cylon-eye { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* Wygaszenie animacji dla użytkowników z prefers-reduced-motion — stan active * zostaje czytelny statycznie (czerwony numer). */ @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); } } /* ====== Wskaźnik stanu obiegu na widoku pojedynczego zadania (#7622) ====== * Ten sam wskaźnik co na liście (#7554), tylko na nagłówku "Zadanie #" * widoku /issues/. Na liście stan widać na numerze w td.id; tu numer * siedzi w środku tekstu nagłówka (h2 "Zadanie #7622"), więc JS * (daidala_task_states.js) owija samą część "#" w * i przypina klasę stanu na to . Reguły są tożsame wizualnie z listą — * amber/waiting, gradient "oko Cylona"/active, keyframes rdp-cylon-eye i * fallback prefers-reduced-motion współdzielone z sekcją listy wyżej. */ /* WAITING — statyczny bursztyn, tak jak numer na liście. */ .rdp-daidala-issue-number.rdp-daidala-waiting { color: var(--amber); } /* ACTIVE — animowane "oko Cylona" na literach "#". */ .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); } } /* ====== Znacznik "przyblokowany" na liście zadań (#7634) ====== * JS (daidala_task_states.js) pyta endpoint pluginu, które z widocznych zadań * mają otwarty bloker (niezamknięty subtask lub niezamknięty task blocks/follows), * i przypina klasę .rdp-daidala-blocked na komórkę tematu (td.subject). Powód * (tekst tooltipa) siedzi w title linku tematu — tu tylko rysujemy dyskretną * ikonę kłódki przed tematem. * * "Subtelny znaczek" (intencja Konrada [#7634]): mała monochromatyczna kłódka * w stonowanym bursztynie przed tekstem tematu. Text-variation selector * (U+FE0E) wymusza render tekstowy zamiast kolorowego emoji, więc glif * przyjmuje `color` i nie krzyczy. Nie rusza układu tabeli — ikona to inline * ::before z prawym marginesem, temat przesuwa się o szerokość glifu. */ 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; /* kłódka jest wskaźnikiem, nie linkiem — nie podkreślaj razem z tematem */ text-decoration: none; display: inline-block; } /* Gdy komórka tematu nie ma wewnętrznego / (rzadkie warianty * renderu listy), ikona ląduje bezpośrednio na komórce. */ 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; } /* ====== Ukrycie
w widoku zagadnienia — nagłówek i między sekcjami (#7632) ====== * Konrad nie chce poziomych linii
w widoku zadania (#7631 note-2: tylko * nagłówek i między sekcjami, NIE w historii notatek, NIE globalnie). Widok * issues#show renderuje dokładnie 3
(empirycznie #7632), wszystkie przed * sekcją #history — więc historia notatek nie ma żadnego
do ukrycia: * 1.
przed .description → separator nagłówek/atrybuty → opis * 2.
przed #issue_tree → separator sekcji Podzadania * 3.
przed #relations → separator sekcji Powiązane zagadnienia * Scope body.controller-issues.action-show ogranicza regułę do tego jednego * widoku (klasy body z Redmine::Controller), więc
na innych widokach * (wiki, aktywność) zostają nietknięte. :has() celuje w
poprzedzające * konkretną sekcję — pozostawia ewentualne
w treści notatek/opisu poza * zasięgiem, gdyby kiedyś się pojawiły. */ .controller-issues.action-show hr:has(+ .description), .controller-issues.action-show hr:has(+ #issue_tree), .controller-issues.action-show hr:has(+ #relations) { display: none; }