/* * gitweb.css — neon-netrunner-storm theme (dark) + netrunner-dawn (light) * * Theming is done entirely via CSS custom properties on :root. * The JS toggle sets data-theme="dark"|"light" on to override. * Without JS (or before it runs) the system prefers-color-scheme wins. * Without any system preference, dark is the default. * * Dark palette — neon-netrunner-storm * Light palette — netrunner-dawn (hand-crafted complement) */ /* ============================================================ */ /* Custom properties — dark (default) */ /* ============================================================ */ :root { color-scheme: dark; /* backgrounds */ --bg: #24283b; --bg-dark: #1f2335; --bg-hi: #292e42; /* text */ --fg: #c0caf5; --fg-dark: #a9b1d6; --fg-dim: #737aa2; --fg-muted: #565f89; /* borders */ --border: #3b4261; --border-hi: #414868; /* links */ --link: #7aa2f7; --link-visited: #9d7cd8; --link-hover: #37f499; --link-list: #c0caf5; /* a.list — project/commit names */ /* accents */ --green1: #37f499; /* THE netrunner colour — hover, age0, accents */ --green: #9ece6a; /* age1 */ --cyan: #7dcfff; /* sha1, code hints */ --blue2: #0db9d7; /* electric cyan */ --orange: #e0af68; /* tags, warnings */ --purple: #a48cf2; /* diff chunk headers, keywords */ --red: #f7768e; /* errors, deletions */ --magenta: #9d7cd8; /* ref badges */ --magenta2: #ff007c; /* RSS/Atom buttons */ /* diff */ --diff-add: #37f499; --diff-rem: #f7768e; --diff-to: #9ece6a; --diff-from: #f7768e; --diff-add-bg: #152d20; --diff-rem-bg: #2d1520; --diff-chg-bg: #2d2a15; --add-mark: #1a3525; --rem-mark: #3a1020; --chunk-info: #1e1830; --chunk-hdr: #a48cf2; --chunk-sec: #9d7cd8; --no-diff: #e0af68; /* status / error */ --err-fg: #f7768e; --err-bg: #2d1515; /* ref badges: bg / border-light / border-dark / fg */ --ref-bg: #1e1830; --ref-bl: #4a3a70; --ref-bd: #9d7cd8; --ref-fg: #9d7cd8; --tag-bg: #2d2510; --tag-bl: #7a6030; --tag-bd: #e0af68; --tag-fg: #e0af68; --head-bg: #0f2620; --head-bl: #1a7a4a; --head-bd: #37f499; --head-fg: #37f499; /* blame row tints */ --color1: #152d20; --color2: #1a1830; --color3: #2d1520; /* RSS buttons */ --rss-bg: #ff007c; --rss-hov: #cc0063; --rss-bt: #ff5faa; --rss-br: #99004a; --rss-bb: #660033; --rss-gen-bg: #0db9d7; --rss-gen-hov: #0a95ae; --rss-gen-bt: #5fd5e8; --rss-gen-br: #007a91; --rss-gen-bb: #004d5c; /* popup / timezone */ --popup-bg: #292e42; --close-bg: #0f2620; --close-fg: #37f499; --close-bdr: #37f499; /* progress bar */ --progress: #37f499; /* theme toggle button */ --toggle-icon: '☀'; --toggle-title: 'Switch to light theme'; } /* ============================================================ */ /* Custom properties — light (system preference) */ /* ============================================================ */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --bg: #e9ecf5; --bg-dark: #c8cedf; --bg-hi: #d8dcee; --fg: #1a1d2e; --fg-dark: #343860; --fg-dim: #6070a0; --fg-muted: #7080a8; --border: #9098b8; --border-hi: #788098; --link: #2060d0; --link-visited: #6040b0; --link-hover: #088050; --link-list: #1a1d2e; --green1: #088050; --green: #3a7020; --cyan: #006090; --blue2: #006a8a; --orange: #8a6000; --purple: #5030a0; --red: #c01030; --magenta: #6040b0; --magenta2: #c0005a; --diff-add: #088050; --diff-rem: #c01030; --diff-to: #3a7020; --diff-from: #c01030; --diff-add-bg: #d0f0e0; --diff-rem-bg: #f5d0d8; --diff-chg-bg: #f5f0d0; --add-mark: #a8e8c0; --rem-mark: #f0b8c0; --chunk-info: #e8e0f8; --chunk-hdr: #5030a0; --chunk-sec: #6040b0; --no-diff: #8a6000; --err-fg: #c01030; --err-bg: #fde8e8; --ref-bg: #e0e8f8; --ref-bl: #8098d0; --ref-bd: #2060d0; --ref-fg: #2060d0; --tag-bg: #f8f0d8; --tag-bl: #c09030; --tag-bd: #8a6000; --tag-fg: #8a6000; --head-bg: #d8f5e8; --head-bl: #30a060; --head-bd: #088050; --head-fg: #088050; --color1: #d8f5e8; --color2: #e8e0f8; --color3: #f8d8e0; --rss-bg: #c0005a; --rss-hov: #99004a; --rss-bt: #e05090; --rss-br: #800040; --rss-bb: #600030; --rss-gen-bg: #006a8a; --rss-gen-hov: #005570; --rss-gen-bt: #4090b0; --rss-gen-br: #004060; --rss-gen-bb: #003050; --popup-bg: #e9ecf5; --close-bg: #d8f5e8; --close-fg: #088050; --close-bdr: #088050; --progress: #088050; --toggle-icon: '☾'; --toggle-title: 'Switch to dark theme'; } } /* ============================================================ */ /* Manual overrides — highest specificity, beat media query */ /* ============================================================ */ html[data-theme="dark"] { color-scheme: dark; --bg: #24283b; --bg-dark: #1f2335; --bg-hi: #292e42; --fg: #c0caf5; --fg-dark: #a9b1d6; --fg-dim: #737aa2; --fg-muted: #565f89; --border: #3b4261; --border-hi: #414868; --link: #7aa2f7; --link-visited: #9d7cd8; --link-hover: #37f499; --link-list: #c0caf5; --green1: #37f499; --green: #9ece6a; --cyan: #7dcfff; --blue2: #0db9d7; --orange: #e0af68; --purple: #a48cf2; --red: #f7768e; --magenta: #9d7cd8; --magenta2: #ff007c; --diff-add: #37f499; --diff-rem: #f7768e; --diff-to: #9ece6a; --diff-from: #f7768e; --diff-add-bg: #152d20; --diff-rem-bg: #2d1520; --diff-chg-bg: #2d2a15; --add-mark: #1a3525; --rem-mark: #3a1020; --chunk-info: #1e1830; --chunk-hdr: #a48cf2; --chunk-sec: #9d7cd8; --no-diff: #e0af68; --err-fg: #f7768e; --err-bg: #2d1515; --ref-bg: #1e1830; --ref-bl: #4a3a70; --ref-bd: #9d7cd8; --ref-fg: #9d7cd8; --tag-bg: #2d2510; --tag-bl: #7a6030; --tag-bd: #e0af68; --tag-fg: #e0af68; --head-bg: #0f2620; --head-bl: #1a7a4a; --head-bd: #37f499; --head-fg: #37f499; --color1: #152d20; --color2: #1a1830; --color3: #2d1520; --rss-bg: #ff007c; --rss-hov: #cc0063; --rss-bt: #ff5faa; --rss-br: #99004a; --rss-bb: #660033; --rss-gen-bg: #0db9d7; --rss-gen-hov: #0a95ae; --rss-gen-bt: #5fd5e8; --rss-gen-br: #007a91; --rss-gen-bb: #004d5c; --popup-bg: #292e42; --close-bg: #0f2620; --close-fg: #37f499; --close-bdr: #37f499; --progress: #37f499; --toggle-icon: '☀'; --toggle-title: 'Switch to light theme'; } html[data-theme="light"] { color-scheme: light; --bg: #e9ecf5; --bg-dark: #c8cedf; --bg-hi: #d8dcee; --fg: #1a1d2e; --fg-dark: #343860; --fg-dim: #6070a0; --fg-muted: #7080a8; --border: #9098b8; --border-hi: #788098; --link: #2060d0; --link-visited: #6040b0; --link-hover: #088050; --link-list: #1a1d2e; --green1: #088050; --green: #3a7020; --cyan: #006090; --blue2: #006a8a; --orange: #8a6000; --purple: #5030a0; --red: #c01030; --magenta: #6040b0; --magenta2: #c0005a; --diff-add: #088050; --diff-rem: #c01030; --diff-to: #3a7020; --diff-from: #c01030; --diff-add-bg: #d0f0e0; --diff-rem-bg: #f5d0d8; --diff-chg-bg: #f5f0d0; --add-mark: #a8e8c0; --rem-mark: #f0b8c0; --chunk-info: #e8e0f8; --chunk-hdr: #5030a0; --chunk-sec: #6040b0; --no-diff: #8a6000; --err-fg: #c01030; --err-bg: #fde8e8; --ref-bg: #e0e8f8; --ref-bl: #8098d0; --ref-bd: #2060d0; --ref-fg: #2060d0; --tag-bg: #f8f0d8; --tag-bl: #c09030; --tag-bd: #8a6000; --tag-fg: #8a6000; --head-bg: #d8f5e8; --head-bl: #30a060; --head-bd: #088050; --head-fg: #088050; --color1: #d8f5e8; --color2: #e8e0f8; --color3: #f8d8e0; --rss-bg: #c0005a; --rss-hov: #99004a; --rss-bt: #e05090; --rss-br: #800040; --rss-bb: #600030; --rss-gen-bg: #006a8a; --rss-gen-hov: #005570; --rss-gen-bt: #4090b0; --rss-gen-br: #004060; --rss-gen-bb: #003050; --popup-bg: #e9ecf5; --close-bg: #d8f5e8; --close-fg: #088050; --close-bdr: #088050; --progress: #088050; --toggle-icon: '☾'; --toggle-title: 'Switch to dark theme'; } /* ============================================================ */ /* Base / reset */ /* ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: sans-serif; border: 1px solid var(--border); margin: 10px; background-color: var(--bg); color: var(--fg); } a { color: var(--link); } a:visited { color: var(--link-visited); } a:hover, a:active { color: var(--link-hover); } span.cntrl { border: 1px dashed var(--fg-muted); padding: 0px 2px; margin: 0px 2px; } /* ============================================================ */ /* Theme toggle button */ /* ============================================================ */ #theme-toggle { float: right; margin-left: 8px; padding: 1px 7px 2px; background: transparent; border: 1px solid var(--border-hi); border-radius: 3px; color: var(--fg-dark); cursor: pointer; font-size: 13px; line-height: 1.4; vertical-align: middle; } #theme-toggle:hover { border-color: var(--green1); color: var(--green1); } /* ============================================================ */ /* Images */ /* ============================================================ */ img.logo { float: right; border-width: 0px; border-radius: 6px; /* rounds the dark pill background on the logo */ } img.avatar { vertical-align: middle; } img.blob { max-height: 100%; max-width: 100%; } a.list img.avatar { border-style: none; } /* ============================================================ */ /* Page structure */ /* ============================================================ */ div.page_header { min-height: 25px; padding: 8px; font-size: 150%; font-weight: bold; background-color: var(--bg-dark); overflow: hidden; } div.page_header a, div.page_header a:visited, a.header { color: var(--link); } div.page_header a:hover { color: var(--link-hover); } div.page_nav { padding: 8px; word-break: break-word; } div.page_nav a:visited { color: var(--link-visited); } div.page_path { padding: 8px; font-weight: bold; border: solid var(--border); border-width: 0px 0px 1px; color: var(--fg-dark); word-break: break-all; } div.page_footer { min-height: 22px; padding: 4px 8px; background-color: var(--bg-dark); overflow: hidden; } div.page_footer_text { line-height: 22px; float: left; color: var(--fg-dim); font-style: italic; } div#generating_info { margin: 4px; font-size: smaller; text-align: center; color: var(--fg-muted); } div.page_body { padding: 8px; font-family: monospace; overflow-x: auto; } /* ============================================================ */ /* Titles / sections */ /* ============================================================ */ div.title, a.title { display: block; padding: 6px 8px; font-weight: bold; background-color: var(--bg-hi); text-decoration: none; color: var(--fg); } div.readme { padding: 8px; } a.title:hover { background-color: var(--bg-dark); color: var(--green1); } div.title_text { padding: 6px 0px; border: solid var(--border); border-width: 0px 0px 1px; font-family: monospace; overflow-x: auto; } /* ============================================================ */ /* Log / commit list */ /* ============================================================ */ div.log_body { padding: 8px 8px 8px 150px; } span.age { position: relative; float: left; width: 142px; font-style: italic; } span.signoff { color: var(--fg-muted); } div.log_link { padding: 0px 8px; font-size: 70%; font-family: sans-serif; font-style: normal; position: relative; float: left; width: 136px; } div.list_head { padding: 6px 8px 4px; border: solid var(--border); border-width: 1px 0px 0px; font-style: italic; color: var(--fg-dark); } /* ============================================================ */ /* Author / date */ /* ============================================================ */ .author_date, .author { font-style: italic; color: var(--fg-dark); } div.author_date { padding: 8px; border: solid var(--border); border-width: 0px 0px 1px 0px; } /* ============================================================ */ /* Lists / links */ /* ============================================================ */ a.list { text-decoration: none; color: var(--link-list); } a.subject, a.name { font-weight: bold; } table.tags a.subject { font-weight: normal; } a.list:hover { text-decoration: underline; color: var(--link-hover); } a.text { text-decoration: none; color: var(--link); } a.text:visited { text-decoration: none; color: var(--link-visited); } a.text:hover { text-decoration: underline; color: var(--link-hover); } /* ============================================================ */ /* Tables */ /* ============================================================ */ table { padding: 8px 4px; border-spacing: 0; } table.diff_tree { font-family: monospace; } table.combined.diff_tree th { text-align: center; } table.combined.diff_tree td { padding-right: 24px; } table.combined.diff_tree th.link, table.combined.diff_tree td.link { padding: 0px 2px; } table.combined.diff_tree td.nochange a { color: var(--link); } table.combined.diff_tree td.nochange a:hover, table.combined.diff_tree td.nochange a:visited { color: var(--link-visited); } table.blame { border-collapse: collapse; } table.blame td { padding: 0px 5px; font-size: 100%; vertical-align: top; } th { padding: 2px 5px; font-size: 100%; text-align: left; color: var(--fg-dark); } /* ============================================================ */ /* Table row colours */ /* ============================================================ */ tr.light, table.blame .light:hover { background-color: var(--bg); } tr.dark, table.blame .dark:hover { background-color: var(--bg-dark); } tr.light:hover, tr.dark:hover { background-color: var(--bg-hi); } tr.boundary td.sha1, tr.no-previous td.linenr { font-weight: bold; } tr.color1 { background-color: var(--color1); } tr.color2 { background-color: var(--color2); } tr.color3 { background-color: var(--color3); } /* ============================================================ */ /* Table cells */ /* ============================================================ */ td { padding: 2px 5px; font-size: 100%; vertical-align: top; } td.link, td.selflink { padding: 2px 5px; font-family: sans-serif; font-size: 70%; } td.selflink { padding-right: 0px; } td.sha1 { font-family: monospace; color: var(--cyan); } .error { color: var(--err-fg); background-color: var(--err-bg); } td.current_head { text-decoration: underline; } td.category { background-color: var(--bg-dark); border-top: 1px solid var(--border-hi); border-left: 1px solid var(--border-hi); font-weight: bold; color: var(--green1); } /* ============================================================ */ /* Diff tree file status colours */ /* ============================================================ */ table.diff_tree span.file_status.new { color: var(--green1); } table.diff_tree span.file_status.deleted { color: var(--red); } table.diff_tree span.file_status.moved, table.diff_tree span.file_status.mode_chnge { color: var(--fg-dim); } table.diff_tree span.file_status.copied { color: var(--green); } /* ============================================================ */ /* Project list age classes */ /* ============================================================ */ table.project_list td.noage { color: var(--fg-muted); font-style: italic; } table.project_list td.age2, table.blame td.age2 { color: var(--fg-dim); font-style: italic; } table.project_list td.age1 { color: var(--green); font-style: italic; } table.blame td.age1 { color: var(--green); background: transparent; } table.project_list td.age0 { color: var(--green1); font-style: italic; font-weight: bold; } table.blame td.age0 { color: var(--green1); background: transparent; font-weight: bold; } /* ============================================================ */ /* Code / diff text */ /* ============================================================ */ td.pre, div.pre, div.diff { font-family: monospace; font-size: 12px; white-space: pre; } td.mode { font-family: monospace; color: var(--cyan); } /* ============================================================ */ /* Blame progress bar */ /* ============================================================ */ div#progress_bar { height: 2px; margin-bottom: -2px; background-color: var(--progress); } div#progress_info { float: right; text-align: right; color: var(--fg-dark); } /* ============================================================ */ /* Tree view */ /* ============================================================ */ td.size { font-family: monospace; text-align: right; color: var(--fg-dim); } /* ============================================================ */ /* Diff styling */ /* ============================================================ */ div.diff.header, div.diff.extended_header { white-space: normal; } div.diff.header { font-weight: bold; background-color: var(--bg-hi); margin-top: 4px; padding: 4px 0px 2px 0px; border: solid var(--border); border-width: 1px 0px 1px 0px; color: var(--fg); } div.diff.header a.path { text-decoration: underline; color: var(--link); } div.diff.extended_header, div.diff.extended_header a.path, div.diff.extended_header a.hash { color: var(--fg-dim); } div.diff.extended_header .info { color: var(--fg-muted); } div.diff.extended_header { background-color: var(--bg-dark); padding: 2px 0px; } div.diff a.list, div.diff a.path, div.diff a.hash { text-decoration: none; } div.diff a.list:hover, div.diff a.path:hover, div.diff a.hash:hover { text-decoration: underline; color: var(--link-hover); } div.diff.to_file a.path, div.diff.to_file { color: var(--diff-to); } div.diff.add { color: var(--diff-add); } div.diff.add span.marked { background-color: var(--add-mark); } div.diff.from_file a.path, div.diff.from_file { color: var(--diff-from); } div.diff.rem { color: var(--diff-rem); } div.diff.rem span.marked { background-color: var(--rem-mark); } div.diff.chunk_header a, div.diff.chunk_header { color: var(--chunk-hdr); } div.diff.chunk_header { border: dotted var(--border); border-width: 1px 0px 0px 0px; margin-top: 2px; } div.diff.chunk_header span.chunk_info { background-color: var(--chunk-info); } div.diff.chunk_header span.section { color: var(--chunk-sec); } div.diff.incomplete { color: var(--fg-muted); } div.diff.nodifferences { font-weight: bold; color: var(--no-diff); } /* ============================================================ */ /* Side-by-side diff */ /* ============================================================ */ div.chunk_block { overflow: hidden; } div.chunk_block div.old { float: left; width: 50%; overflow: hidden; } div.chunk_block div.new { margin-left: 50%; width: 50%; } div.chunk_block.rem div.old div.diff.rem { background-color: var(--diff-rem-bg); } div.chunk_block.add div.new div.diff.add { background-color: var(--diff-add-bg); } div.chunk_block.chg div div.diff { background-color: var(--diff-chg-bg); } div.chunk_block.ctx div div.diff.ctx { color: var(--fg-dim); } /* ============================================================ */ /* Miscellaneous */ /* ============================================================ */ div.index_include { border: solid var(--border); border-width: 0px 0px 1px; padding: 12px 8px; } div.search { font-size: 100%; font-weight: normal; margin: 4px 8px; float: right; top: 56px; right: 12px; } div.search input, div.search select { background-color: var(--bg-hi); color: var(--fg); border: 1px solid var(--border); } div.projsearch { text-align: center; margin: 20px 0px; } div.projsearch form { margin-bottom: 2px; } div.projsearch input[type="text"] { background-color: var(--bg-hi); color: var(--fg); border: 1px solid var(--border); } td.linenr { text-align: right; } a.linenr { color: var(--fg-muted); text-decoration: none; } /* ============================================================ */ /* RSS / feed buttons */ /* ============================================================ */ a.rss_logo { float: right; padding: 3px 5px; line-height: 10px; border: 1px solid; border-color: var(--rss-bt) var(--rss-br) var(--rss-bb) var(--rss-bt); color: #ffffff; background-color: var(--rss-bg); font-weight: bold; font-family: sans-serif; font-size: 70%; text-align: center; text-decoration: none; } a.rss_logo:hover { background-color: var(--rss-hov); } a.rss_logo.generic { background-color: var(--rss-gen-bg); border-color: var(--rss-gen-bt) var(--rss-gen-br) var(--rss-gen-bb) var(--rss-gen-bt); } a.rss_logo.generic:hover { background-color: var(--rss-gen-hov); } /* ============================================================ */ /* Refs / tags / branches */ /* ============================================================ */ span.refs span { padding: 0px 4px; font-size: 70%; font-weight: normal; border: 1px solid; background-color: var(--ref-bg); border-color: var(--ref-bl) var(--ref-bd) var(--ref-bd) var(--ref-bl); color: var(--ref-fg); } span.refs span a { text-decoration: none; color: inherit; } span.refs span a:hover { text-decoration: underline; color: var(--link-hover); } span.refs span.indirect { font-style: italic; } span.refs span.ref { background-color: var(--ref-bg); border-color: var(--ref-bl) var(--ref-bd) var(--ref-bd) var(--ref-bl); color: var(--ref-fg); } span.refs span.tag { background-color: var(--tag-bg); border-color: var(--tag-bl) var(--tag-bd) var(--tag-bd) var(--tag-bl); color: var(--tag-fg); } span.refs span.head { background-color: var(--head-bg); border-color: var(--head-bl) var(--head-bd) var(--head-bd) var(--head-bl); color: var(--head-fg); } span.atnight { color: var(--magenta2); } span.match { color: var(--green1); font-weight: bold; } div.binary { font-style: italic; color: var(--fg-dim); } div.remote { margin: .5em; border: 1px solid var(--border); display: inline-block; } /* ============================================================ */ /* Timezone popup */ /* ============================================================ */ .popup { position: absolute; top: 0; left: 0; border: 1px solid var(--border-hi); padding: 2px; background-color: var(--popup-bg); font-style: normal; color: var(--fg); cursor: auto; } .close-button { position: absolute; top: 0px; right: 0px; border: 1px solid var(--close-bdr); margin: 1px 1px 1px 1px; padding-bottom: 2px; width: 12px; height: 10px; font-size: 9px; font-weight: bold; text-align: center; background-color: var(--close-bg); color: var(--close-fg); cursor: pointer; } /* ============================================================ */ /* Syntax highlighting */ /* ============================================================ */ .num { color: var(--link); } .esc { color: var(--magenta2); } .str { color: var(--red); } .dstr { color: var(--orange); } .slc { color: var(--fg-muted); font-style: italic; } .com { color: var(--fg-muted); font-style: italic; } .dir { color: var(--green1); } .sym { color: var(--fg); } .line { color: var(--fg-dim); } .kwa { color: var(--purple); font-weight: bold; } .kwb { color: var(--red); } .kwc { color: var(--purple); font-weight: bold; } .kwd { color: var(--cyan); } /* ============================================================ */ /* ============================================================ */ /* RESPONSIVE — desktop FHD (≤ 1920px) */ /* ============================================================ */ /* ============================================================ */ @media (max-width: 1920px) { body { max-width: 1400px; margin: 0 auto; } } /* ============================================================ */ /* ============================================================ */ /* RESPONSIVE — tablet (≤ 900px) */ /* ============================================================ */ /* ============================================================ */ @media (max-width: 900px) { body { margin: 4px; font-size: 16px; } div.page_header { font-size: 120%; } div.log_body { padding: 8px 8px 8px 110px; } span.age { width: 100px; } div.log_link { width: 96px; } } /* ============================================================ */ /* ============================================================ */ /* RESPONSIVE — mobile (≤ 600px) */ /* ============================================================ */ /* ============================================================ */ @media (max-width: 600px) { /* ---- Base -------------------------------------------- */ /* 16px is the minimum comfortable reading size on mobile. line-height 1.6 gives text room to breathe vertically. */ body { margin: 2px; font-size: 18px; line-height: 1.6; } /* ---- Header ------------------------------------------ */ div.page_header { font-size: 100%; padding: 8px; line-height: 1.4; } #theme-toggle { font-size: 16px; padding: 3px 9px 4px; } img.logo { max-height: 27px; /* match original height attr */ width: auto; } /* ---- Navigation -------------------------------------- */ /* Make the pipe-separated links wrap at a comfortable line height so each is easy to tap without mis-tapping. */ div.page_nav { padding: 10px 8px; font-size: 95%; line-height: 2.2; word-break: break-word; border-bottom: 1px solid var(--border); } /* ---- Search form (project pages) --------------------- */ /* The form sits before page_nav in DOM. We turn div.search into a full-width block with a visual separator so it reads as a distinct zone rather than merging with the nav above. */ div.search { float: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin: 0; top: auto; right: auto; border-bottom: 1px solid var(--border); background-color: var(--bg-dark); } /* Type dropdown — fixed width, not squeezed */ div.search select { font-size: 16px; flex: 0 0 auto; padding: 4px 2px; } /* Text input — fills remaining space */ div.search input[type="text"] { font-size: 16px; flex: 1 1 120px; padding: 4px 6px; } /* ---- Homepage project search ------------------------- */ div.projsearch { margin: 14px 0; padding: 0 8px; } div.projsearch input[type="text"] { font-size: 16px; width: 85%; padding: 6px 8px; } /* ---- Metadata table (project summary page) ----------- */ /* table.projects_list shows description / last change / URLs. Render as label-above-value pairs with generous spacing. */ table.projects_list, table.projects_list tbody { display: block; width: 100%; } table.projects_list tr { display: block; padding: 8px 8px 6px; border-bottom: 1px solid var(--border); } table.projects_list td { display: block; padding: 0; word-break: break-all; white-space: normal; line-height: 1.5; } /* Label row: "DESCRIPTION", "LAST CHANGE", "URL" */ table.projects_list td:first-child { font-size: 80%; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); margin-bottom: 2px; } /* Value row */ table.projects_list td:last-child { font-size: 95%; color: var(--fg-dark); } /* ---- Shortlog card layout ---------------------------- */ /* Each commit row becomes a self-contained card with three clearly sized zones: ① age · author (small metadata, single line) ② subject [refs] (the main thing — larger) ③ commit · diff … (action links — legible, not tiny) */ table.shortlog, table.shortlog tbody { display: block; width: 100%; } table.shortlog tr { display: block; padding: 14px 10px 10px; border-bottom: 2px solid var(--border); } /* Re-declare backgrounds explicitly — display:block on table drops tr background painting in some mobile browsers */ table.shortlog tr.light { background-color: var(--bg); } table.shortlog tr.dark { background-color: var(--bg-dark); } table.shortlog tr:hover { background-color: var(--bg-hi); } /* Default all cells to block */ table.shortlog td { display: block; padding: 0; white-space: normal; width: auto; font-size: 100%; line-height: 1.5; } /* ① Age — inline, muted, italic */ table.shortlog td:nth-child(1) { display: inline; font-size: 80%; font-style: italic; color: var(--fg-muted); } /* ② Author — inline after age, separated by a dot */ table.shortlog td.author { display: inline; font-size: 80%; color: var(--fg-dim); } table.shortlog td.author::before { content: ' · '; color: var(--fg-muted); } /* ③ Subject — the main content, clearly the biggest element */ table.shortlog td:nth-child(3) { display: block; padding: 7px 0 5px; font-size: 110%; line-height: 1.5; white-space: normal; } /* ④ Action links — readable, use link colour not muted grey */ table.shortlog td.link { display: block; font-size: 90%; padding-top: 5px; color: var(--link); white-space: normal; line-height: 1.8; } /* ---- Project list / heads / diff tree --------------- */ /* Keep horizontal-scroll for these narrower tables. */ table.project_list td, table.project_list th, table.heads td, table.heads th, table.tags td, table.tags th, table.diff_tree td, table.diff_tree th { white-space: nowrap; } table.project_list td:nth-child(3) { white-space: normal; max-width: 120px; } /* ---- General link cells ------------------------------ */ /* Override the global 70% — that's legible on desktop but too small to read or tap comfortably on mobile. */ td.link, td.selflink { font-size: 90%; } /* ---- Log body (log/shortlog list view) --------------- */ div.log_body { padding: 10px 8px; } span.age { position: static; float: none; display: block; width: auto; font-size: 80%; margin-bottom: 3px; } div.log_link { position: static; float: none; display: block; width: auto; padding: 0 0 6px 0; font-size: 90%; } /* ---- Side-by-side diff: stack vertically ------------ */ div.chunk_block { overflow: visible; } div.chunk_block div.old { float: none; width: 100%; overflow-x: auto; border-bottom: 1px dashed var(--border); } div.chunk_block div.new { margin-left: 0; width: 100%; overflow-x: auto; } div.page_body { padding: 6px; } div.diff.header { word-break: break-word; white-space: normal; } /* ---- Footer ----------------------------------------- */ div.page_footer { height: auto; padding: 8px; } a.rss_logo { float: left; margin-right: 6px; margin-bottom: 4px; padding: 5px 8px; font-size: 80%; } div.page_footer_text { float: none; clear: both; padding-top: 6px; font-size: 90%; } }