From 6cdb266ec747c455a9b32f0585973cc2be61c74b Mon Sep 17 00:00:00 2001
From: Tolmachev Igor <me@igorek.dev>
Date: Tue, 21 Apr 2026 02:39:10 +0300
Subject: Fix submit hover contrast and add missing cgit element styles

- Fix input[type=submit]:hover contrast in light theme (white-on-pale-orange)
- Use on-error-container for error text pairing
- Shrink commit-subject decorations to 0.7rem
- Add :focus styles for inputs
- Add styles for age-* gradient, insertions/deletions, .oid
- Add logheader/logsubject/logmsg, reposection, sublevel-repo
- Add colored commitgraph channels (column1..6)
- Add ls-dir/ls-blob/ls-mod, ls-size/ls-mode
- Add pager, diffstat, notes, blame, ssdiff *_dark variants
- Add stats/vgraph/hgraph, cgit-panel, #downloads
---
 www/cgit.css | 465 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 461 insertions(+), 4 deletions(-)

(limited to 'www')

diff --git a/www/cgit.css b/www/cgit.css
index 1329a01..9f41e85 100644
--- a/www/cgit.css
+++ b/www/cgit.css
@@ -116,6 +116,14 @@ textarea {
     font-family: inherit;
 }
 
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+    border-color: var(--color-primary);
+}
+
 input[type="submit"] {
     background-color: var(--color-primary);
     color: var(--color-on-primary);
@@ -126,7 +134,8 @@ input[type="submit"] {
 }
 
 input[type="submit"]:hover {
-    background-color: var(--color-primary-fixed-dim);
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
 }
 
 /* 4. Tabs Navigation */
@@ -296,7 +305,7 @@ div#cgit table.ssdiff td.lineno {
 
 div#cgit table.ssdiff td:not(.lineno) {
     width: 48%;
-    min-width: 50ch;
+    max-width: 50ch;
     white-space: break-spaces;
 }
 
@@ -434,6 +443,15 @@ div#cgit a.deco {
     color: var(--color-on-secondary-fixed);
 }
 
+div#cgit div.commit-subject a.branch-deco,
+div#cgit div.commit-subject a.tag-deco,
+div#cgit div.commit-subject a.tag-annotated-deco,
+div#cgit div.commit-subject a.remote-deco,
+div#cgit div.commit-subject a.deco {
+    font-size: 0.7rem;
+    vertical-align: middle;
+}
+
 /* 9. Commit Info Table */
 div#cgit table.commit-info {
     background-color: var(--color-surface-container);
@@ -487,14 +505,441 @@ div#cgit div.footer {
 }
 
 div#cgit div.error {
-    color: var(--color-error);
+    color: var(--color-on-error-container);
     background: var(--color-error-container);
     padding: 1rem;
     border-radius: 4px;
     margin: 1rem 0;
 }
 
-/* 11. Responsive Adjustments */
+/* 11. Log / tree / listing extras */
+div#cgit table.list tr.logheader {
+    background: var(--color-surface-container);
+    color: var(--color-on-surface-variant);
+    font-weight: 600;
+}
+
+div#cgit table.list td.logsubject {
+    font-weight: 600;
+    color: var(--color-on-surface);
+    white-space: normal;
+}
+
+div#cgit table.list td.logmsg {
+    font-family: monospace;
+    white-space: pre;
+    color: var(--color-on-surface-variant);
+    padding: 0.75rem 0.5rem;
+}
+
+div#cgit table.list td a.ls-dir,
+div#cgit a.ls-dir {
+    font-family: monospace;
+    font-weight: 600;
+    color: var(--color-primary);
+}
+
+div#cgit table.list td a.ls-blob,
+div#cgit a.ls-blob,
+div#cgit .ls-mod {
+    font-family: monospace;
+}
+
+div#cgit td.ls-size,
+div#cgit td.ls-mode {
+    font-family: monospace;
+    text-align: right;
+    color: var(--color-on-surface-variant);
+}
+
+div#cgit td.ls-size {
+    width: 10em;
+}
+
+div#cgit td.ls-mode {
+    width: 10em;
+    text-align: left;
+}
+
+div#cgit table.list td.reposection {
+    font-style: italic;
+    color: var(--color-on-surface-variant);
+    background: var(--color-surface-container-low);
+    font-weight: 500;
+}
+
+div#cgit table.list td.sublevel-repo {
+    padding-left: 1.5em;
+}
+
+/* Commit graph colored channels */
+div#cgit table.list td.commitgraph .column1 {
+    color: var(--color-primary);
+}
+div#cgit table.list td.commitgraph .column2 {
+    color: var(--color-tertiary);
+}
+div#cgit table.list td.commitgraph .column3 {
+    color: var(--color-secondary);
+}
+div#cgit table.list td.commitgraph .column4 {
+    color: var(--color-primary-fixed-dim);
+}
+div#cgit table.list td.commitgraph .column5 {
+    color: var(--color-tertiary-fixed-dim);
+}
+div#cgit table.list td.commitgraph .column6 {
+    color: var(--color-secondary-fixed-dim);
+}
+
+/* Object ids and inline stats */
+div#cgit .oid {
+    font-family: monospace;
+    font-size: 0.9em;
+    color: var(--color-on-surface-variant);
+}
+
+div#cgit span.insertions {
+    color: var(--color-tertiary);
+    font-weight: 600;
+}
+
+div#cgit span.deletions {
+    color: var(--color-error);
+    font-weight: 600;
+}
+
+/* Age gradient: fresh = strong accent, stale = muted */
+div#cgit span.age-mins {
+    color: var(--color-primary);
+    font-weight: 600;
+}
+div#cgit span.age-hours {
+    color: var(--color-primary);
+}
+div#cgit span.age-days {
+    color: var(--color-on-surface);
+}
+div#cgit span.age-weeks {
+    color: var(--color-on-surface-variant);
+}
+div#cgit span.age-months {
+    color: var(--color-outline);
+}
+div#cgit span.age-years {
+    color: var(--color-outline);
+    opacity: 0.75;
+}
+
+/* Pager */
+div#cgit ul.pager {
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 1.5rem 0 0 0;
+}
+
+div#cgit ul.pager li {
+    display: inline-block;
+    margin: 0 0.25rem;
+}
+
+div#cgit ul.pager a {
+    display: inline-block;
+    padding: 0.25rem 0.6rem;
+    border-radius: 4px;
+    color: var(--color-on-surface-variant);
+    background: var(--color-surface-container-low);
+}
+
+div#cgit ul.pager a:hover {
+    background: var(--color-surface-container-high);
+    text-decoration: none;
+}
+
+div#cgit ul.pager .current {
+    display: inline-block;
+    padding: 0.25rem 0.6rem;
+    border-radius: 4px;
+    background: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+    font-weight: 600;
+}
+
+/* Diffstat (commit page: changed files + bar) */
+div#cgit div.diffstat-header {
+    font-weight: 600;
+    color: var(--color-primary);
+    margin-top: 1.5rem;
+    padding-top: 0;
+}
+
+div#cgit table.diffstat {
+    border-collapse: collapse;
+    width: 100%;
+    background: var(--color-surface-container-lowest);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: 4px;
+    margin-top: 0.5rem;
+}
+
+div#cgit table.diffstat td {
+    padding: 0.25rem 0.5rem;
+    border: none;
+    font-size: 0.9rem;
+}
+
+div#cgit table.diffstat td.mode {
+    white-space: nowrap;
+    font-family: monospace;
+    color: var(--color-on-surface-variant);
+}
+
+div#cgit table.diffstat td span.modechange {
+    padding-left: 1em;
+    color: var(--color-error);
+}
+
+div#cgit table.diffstat td.add a {
+    color: var(--color-tertiary);
+}
+div#cgit table.diffstat td.del a {
+    color: var(--color-error);
+}
+div#cgit table.diffstat td.upd a {
+    color: var(--color-primary);
+}
+
+div#cgit table.diffstat td.graph {
+    width: 500px;
+    vertical-align: middle;
+}
+
+div#cgit table.diffstat td.graph table {
+    border: none;
+    width: 100%;
+}
+
+div#cgit table.diffstat td.graph td {
+    padding: 0;
+    border: 0;
+    height: 8px;
+}
+
+div#cgit table.diffstat td.graph td.add {
+    background-color: var(--diff-add-bg);
+}
+div#cgit table.diffstat td.graph td.rem {
+    background-color: var(--diff-del-bg);
+}
+
+div#cgit div.diffstat-summary {
+    color: var(--color-on-surface-variant);
+    padding-top: 0.5rem;
+    font-size: 0.9rem;
+}
+
+/* Notes */
+div#cgit div.notes-header {
+    font-weight: 600;
+    color: var(--color-primary);
+    padding-top: 1.5rem;
+}
+
+div#cgit div.notes {
+    white-space: pre-wrap;
+    font-family: monospace;
+    border: 1px solid var(--color-outline-variant);
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+    padding: 0.75rem 1rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+}
+
+div#cgit div.notes-footer {
+    clear: left;
+}
+
+/* Blame */
+div#cgit table.blame td.hashes,
+div#cgit table.blame td.lines,
+div#cgit table.blame td.linenumbers {
+    padding: 0;
+    vertical-align: top;
+}
+
+div#cgit table.blame td.hashes {
+    background: var(--color-surface-container);
+    border-right: 1px solid var(--color-outline-variant);
+}
+
+div#cgit table.blame td.hashes div.alt,
+div#cgit table.blame td.lines div.alt,
+div#cgit table.blame td.linenumbers div.alt {
+    padding: 0 0.5em;
+}
+
+div#cgit table.blame div.alt:nth-child(even) {
+    background: var(--color-surface-container-low);
+}
+
+div#cgit table.blame div.alt:nth-child(odd) {
+    background: var(--color-surface-container-lowest);
+}
+
+div#cgit table.blame td.lines > div {
+    position: relative;
+}
+
+div#cgit table.blame td.lines > div > pre {
+    padding: 0 0 0 0.5em;
+    position: absolute;
+    top: 0;
+    margin: 0;
+}
+
+/* Side-by-side diff: intra-line dark-shaded variants */
+div#cgit table.ssdiff td.add_dark {
+    background-color: var(--diff-add-bg);
+    color: var(--diff-add-fg);
+    filter: brightness(0.92);
+}
+
+div#cgit table.ssdiff td.del_dark {
+    background-color: var(--diff-del-bg);
+    color: var(--diff-del-fg);
+    filter: brightness(0.92);
+}
+
+div#cgit table.ssdiff td.changed_dark {
+    background-color: var(--diff-changed-bg);
+    color: var(--diff-changed-fg);
+    filter: brightness(0.92);
+}
+
+div#cgit table.ssdiff span.add {
+    background: var(--diff-add-bg);
+    color: var(--diff-add-fg);
+    font-weight: 600;
+}
+
+div#cgit table.ssdiff span.del {
+    background: var(--diff-del-bg);
+    color: var(--diff-del-fg);
+    font-weight: 600;
+}
+
+div#cgit table.diff td div.head,
+div#cgit table.ssdiff td.head div.head {
+    font-weight: 600;
+    margin-top: 1rem;
+    color: var(--color-primary);
+}
+
+/* Stats (vgraph / hgraph / stats table) */
+div#cgit table.stats,
+div#cgit table.vgraph,
+div#cgit table.hgraph {
+    border: 1px solid var(--color-outline-variant);
+    border-collapse: collapse;
+    margin-top: 1rem;
+    background: var(--color-surface-container-lowest);
+}
+
+div#cgit table.stats th,
+div#cgit table.vgraph th,
+div#cgit table.hgraph th {
+    background: var(--color-surface-container);
+    color: var(--color-primary);
+    font-weight: 600;
+    text-align: left;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--color-outline-variant);
+}
+
+div#cgit table.stats td {
+    text-align: right;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid var(--color-outline-variant);
+}
+
+div#cgit table.stats td.total {
+    font-weight: 600;
+    text-align: left;
+    color: var(--color-on-surface);
+}
+
+div#cgit table.stats td.sum {
+    color: var(--color-primary);
+    font-weight: 600;
+}
+
+div#cgit table.stats td.left {
+    text-align: left;
+}
+
+div#cgit table.vgraph {
+    height: 200px;
+}
+
+div#cgit table.vgraph td {
+    vertical-align: bottom;
+    padding: 0 10px;
+}
+
+div#cgit table.vgraph div.bar,
+div#cgit table.hgraph div.bar {
+    background-color: var(--color-primary-container);
+}
+
+div#cgit table.hgraph {
+    width: 100%;
+}
+
+div#cgit table.hgraph td {
+    vertical-align: middle;
+    padding: 2px;
+}
+
+div#cgit table.hgraph div.bar {
+    height: 1em;
+}
+
+/* Cgit-panel (side panel on some pages) */
+div#cgit div.cgit-panel table {
+    border-collapse: collapse;
+    border: 1px solid var(--color-outline-variant);
+    background-color: var(--color-surface-container-low);
+}
+
+div#cgit div.cgit-panel th {
+    text-align: center;
+    background: var(--color-surface-container);
+    color: var(--color-primary);
+    padding: 0.25rem 0.5rem;
+}
+
+div#cgit div.cgit-panel td {
+    padding: 0.25rem 0.5rem;
+}
+
+/* Summary page download table */
+div#cgit table#downloads {
+    float: right;
+    border-collapse: collapse;
+    border: 1px solid var(--color-outline-variant);
+    margin: 0 0 0.5rem 0.5rem;
+}
+
+div#cgit table#downloads th {
+    background-color: var(--color-surface-container);
+    color: var(--color-primary);
+    padding: 0.25rem 0.5rem;
+    text-align: left;
+}
+
+/* 12. Responsive Adjustments */
 @media only screen and (max-width: 768px) {
     div#cgit table#header td.logo img {
         max-height: 40px;
@@ -536,4 +981,16 @@ div#cgit div.error {
         white-space: normal;
         min-width: 200px;
     }
+
+    div#cgit div.cgit-panel,
+    div#cgit table#downloads {
+        float: none;
+        width: 100%;
+        margin: 0.5rem 0;
+    }
+
+    div#cgit table.diffstat td.graph {
+        width: auto;
+        min-width: 120px;
+    }
 }
-- 
cgit v1.3