GitBrowser/Components/Layout/MainLayout.razor.css
+3
-3
diff --git a/GitBrowser/Components/Layout/MainLayout.razor.css b/GitBrowser/Components/Layout/MainLayout.razor.css
index 2c996ca..e465e08 100644
@@ -2,12 +2,12 @@
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #ffffff;
background-color: var(--gh-color-canvas-default);
}
.gh-header {
background-color: #24292f;
border-bottom: 1px solid #d0d7de;
background-color: var(--gh-color-canvas-subtle);
border-bottom: 1px solid var(--gh-color-border-default);
position: sticky;
top: 0;
z-index: 32;
GitBrowser/Components/Pages/Commit.razor.css
+37
-37
diff --git a/GitBrowser/Components/Pages/Commit.razor.css b/GitBrowser/Components/Pages/Commit.razor.css
index c9b1840..4f017eb 100644
@@ -7,13 +7,13 @@
.repo-title {
font-size: 1.75rem;
font-weight: 600;
color: #24292f;
color: var(--gh-color-fg-default);
margin: 0 0 1.5rem 0;
}
.commit-header {
background: white;
border: 1px solid #d0d7de;
background: var(--gh-color-canvas-subtle);
border: 1px solid var(--gh-color-border-default);
border-radius: 6px;
padding: 1.5rem;
}
@@ -24,7 +24,7 @@
grid-template-columns: auto 1fr auto auto;
align-items: center;
margin-bottom: 1rem;
border-bottom: 1px solid #d0d7de;
border-bottom: 1px solid var(--gh-color-border-default);
.commit-hash {
grid-area: commit;
@@ -53,22 +53,22 @@
}
.hash-label {
color: #57606a;
color: var(--gh-color-fg-muted);
font-weight: 600;
}
code {
background: #f6f8fa;
background: var(--gh-color-canvas-subtle);
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 0.875rem;
color: #24292f;
color: var(--gh-color-fg-default);
}
.parent-hash a,
.child-hash a {
color: #0969da;
color: var(--gh-color-accent-fg);
text-decoration: none;
}
@@ -80,18 +80,18 @@ code {
.commit-title {
font-size: 1.5rem;
font-weight: 600;
color: #24292f;
color: var(--gh-color-fg-default);
margin: 0;
line-height: 1.3;
}
.commit-author {
color: #57606a;
color: var(--gh-color-fg-muted);
font-size: 0.875rem;
}
.commit-author strong {
color: #24292f;
color: var(--gh-color-fg-default);
font-weight: 600;
}
@@ -104,7 +104,7 @@ code {
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 0.875rem;
line-height: 1.6;
color: #24292f;
color: var(--gh-color-fg-default);
white-space: pre-wrap;
word-wrap: break-word;
}
@@ -112,15 +112,15 @@ code {
.commit-actions {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #d0d7de;
border-top: 1px solid var(--gh-color-border-default);
}
.browse-button {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background: #0969da;
color: white;
background: var(--gh-color-success-emphasis);
color: #ffffff;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
@@ -129,7 +129,7 @@ code {
}
.browse-button:hover {
background: #0860ca;
background: var(--gh-color-success-emphasis-hover);
}
.diffs-container {
@@ -138,7 +138,7 @@ code {
.file-diff {
margin-bottom: 1.5rem;
border: 1px solid #d0d7de;
border: 1px solid var(--gh-color-border-default);
border-radius: 6px;
overflow: hidden;
}
@@ -148,15 +148,15 @@ code {
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: #f6f8fa;
border-bottom: 1px solid #d0d7de;
background: var(--gh-color-canvas-subtle);
border-bottom: 1px solid var(--gh-color-border-default);
}
.file-path {
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 0.875rem;
font-weight: 600;
color: #24292f;
color: var(--gh-color-fg-default);
}
.file-stats {
@@ -167,24 +167,24 @@ code {
}
.stats-added {
color: #1a7f37;
color: var(--gh-color-success-fg);
}
.stats-deleted {
color: #cf222e;
color: var(--gh-color-danger-fg);
}
.large-diff-warning {
padding: 2rem;
text-align: center;
background: #fff8c5;
color: #7d4e00;
background: var(--gh-color-attention-subtle);
color: var(--gh-color-attention-fg);
font-weight: 500;
border-top: 1px solid #d4a72c;
border-top: 1px solid var(--gh-color-attention-emphasis);
}
.diff-content {
background: white;
background: var(--gh-color-canvas-default);
overflow-x: auto;
}
@@ -197,29 +197,29 @@ code {
}
.diff-line-add {
background: #e6ffec;
color: #24292f;
background: var(--gh-color-diff-addition-bg);
color: var(--gh-color-fg-default);
}
.diff-line-add::before {
content: "+";
color: #1a7f37;
color: var(--gh-color-success-fg);
padding-right: 1rem;
}
.diff-line-del {
background: #ffebe9;
color: #24292f;
background: var(--gh-color-diff-deletion-bg);
color: var(--gh-color-fg-default);
}
.diff-line-del::before {
content: "-";
color: #cf222e;
color: var(--gh-color-danger-fg);
padding-right: 1rem;
}
.diff-line-context {
color: #57606a;
color: var(--gh-color-fg-muted);
}
.diff-line-context::before {
@@ -228,10 +228,10 @@ code {
}
.diff-line-hunk {
background: #f6f8fa;
color: #57606a;
background: var(--gh-color-canvas-subtle);
color: var(--gh-color-fg-muted);
padding: 0.25rem 1rem;
font-weight: 600;
border-top: 1px solid #d0d7de;
border-bottom: 1px solid #d0d7de;
border-top: 1px solid var(--gh-color-border-default);
border-bottom: 1px solid var(--gh-color-border-default);
}
GitBrowser/Components/Pages/Repo.razor.css
+29
-29
diff --git a/GitBrowser/Components/Pages/Repo.razor.css b/GitBrowser/Components/Pages/Repo.razor.css
index 868d2a0..cd76314 100644
@@ -7,7 +7,7 @@
.repo-title {
font-size: 1.75rem;
font-weight: 600;
color: #24292f;
color: var(--gh-color-fg-default);
margin: 2rem 0 1.5rem 0;
}
@@ -18,27 +18,27 @@
padding: 0.75rem 0;
margin-bottom: 1rem;
font-size: 0.875rem;
color: #24292f;
color: var(--gh-color-fg-default);
}
.branch-indicator {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
background: #f6f8fa;
border: 1px solid #d0d7de;
background: var(--gh-color-canvas-subtle);
border: 1px solid var(--gh-color-border-default);
border-radius: 6px;
font-weight: 600;
font-size: 0.75rem;
}
.breadcrumb .separator {
color: #57606a;
color: var(--gh-color-fg-muted);
margin: 0 0.25rem;
}
.breadcrumb a {
color: #0969da;
color: var(--gh-color-accent-fg);
text-decoration: none;
}
@@ -47,21 +47,21 @@
}
.breadcrumb .current {
color: #24292f;
color: var(--gh-color-fg-default);
font-weight: 600;
}
.empty-state {
padding: 2rem;
text-align: center;
color: #57606a;
background: #f6f8fa;
border: 1px solid #d0d7de;
color: var(--gh-color-fg-muted);
background: var(--gh-color-canvas-subtle);
border: 1px solid var(--gh-color-border-default);
border-radius: 6px;
}
.file-list {
border: 1px solid #d0d7de;
border: 1px solid var(--gh-color-border-default);
border-radius: 6px;
overflow: hidden;
}
@@ -72,8 +72,8 @@ table {
}
thead {
background: #f6f8fa;
border-bottom: 1px solid #d0d7de;
background: var(--gh-color-canvas-subtle);
border-bottom: 1px solid var(--gh-color-border-default);
}
thead th {
@@ -81,22 +81,22 @@ thead th {
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: #57606a;
color: var(--gh-color-fg-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
tbody tr {
border-top: 1px solid #d0d7de;
border-top: 1px solid var(--gh-color-border-default);
}
tbody tr:hover {
background: #f6f8fa;
background: var(--gh-color-canvas-subtle);
}
tbody td {
padding: 0.5rem 1rem;
color: #24292f;
color: var(--gh-color-fg-default);
}
.name-cell {
@@ -106,7 +106,7 @@ tbody td {
}
.name-cell a {
color: #0969da;
color: var(--gh-color-accent-fg);
text-decoration: none;
font-weight: 500;
}
@@ -125,19 +125,19 @@ tbody td {
.commit-message,
.commit-date {
color: #57606a;
color: var(--gh-color-fg-muted);
font-size: 0.875rem;
}
.commit-message a,
.commit-date a {
color: #57606a;
color: var(--gh-color-fg-muted);
text-decoration: none;
}
.commit-message a:hover,
.commit-date a:hover {
color: #0969da;
color: var(--gh-color-accent-fg);
text-decoration: underline;
}
@@ -146,17 +146,17 @@ tbody td {
}
.current-file {
background: #fff8c5 !important;
border-left: 3px solid #0969da;
background: var(--gh-color-attention-subtle) !important;
border-left: 3px solid var(--gh-color-accent-fg);
}
.current-file:hover {
background: #fff8c5 !important;
background: var(--gh-color-attention-subtle) !important;
}
.file-viewer {
margin-top: 1.5rem;
border: 1px solid #d0d7de;
border: 1px solid var(--gh-color-border-default);
border-radius: 6px;
overflow: hidden;
}
@@ -166,10 +166,10 @@ tbody td {
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: #f6f8fa;
border-bottom: 1px solid #d0d7de;
background: var(--gh-color-canvas-subtle);
border-bottom: 1px solid var(--gh-color-border-default);
font-weight: 600;
color: #24292f;
color: var(--gh-color-fg-default);
}
.file-content {
@@ -182,7 +182,7 @@ tbody td {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.875rem;
line-height: 1.5;
color: #24292f;
color: var(--gh-color-fg-default);
white-space: pre;
overflow-x: auto;
}
GitBrowser/wwwroot/app.css
+22
-15
diff --git a/GitBrowser/wwwroot/app.css b/GitBrowser/wwwroot/app.css
index 77cc3f6..2750e77 100644
@@ -1,19 +1,26 @@
/* GitHub-inspired color scheme and typography */
/* GitHub-inspired dark color scheme and typography */
:root {
--gh-color-canvas-default: #ffffff;
--gh-color-canvas-subtle: #f6f8fa;
--gh-color-border-default: #d0d7de;
--gh-color-border-muted: #d8dee4;
--gh-color-fg-default: #1f2328;
--gh-color-fg-muted: #656d76;
--gh-color-accent-fg: #0969da;
--gh-color-accent-emphasis: #0969da;
--gh-color-danger-fg: #d1242f;
--gh-color-success-fg: #1a7f37;
--gh-color-btn-bg: #f6f8fa;
--gh-color-btn-border: rgba(31, 35, 40, 0.15);
--gh-color-btn-hover-bg: #f3f4f6;
--gh-color-btn-hover-border: rgba(31, 35, 40, 0.15);
--gh-color-canvas-default: #0d1117;
--gh-color-canvas-subtle: #161b22;
--gh-color-border-default: #30363d;
--gh-color-border-muted: #21262d;
--gh-color-fg-default: #c9d1d9;
--gh-color-fg-muted: #8b949e;
--gh-color-accent-fg: #58a6ff;
--gh-color-accent-emphasis: #58a6ff;
--gh-color-danger-fg: #f85149;
--gh-color-success-fg: #3fb950;
--gh-color-success-emphasis: #238636;
--gh-color-success-emphasis-hover: #2ea043;
--gh-color-btn-bg: #21262d;
--gh-color-btn-border: rgba(240, 246, 252, 0.1);
--gh-color-btn-hover-bg: #30363d;
--gh-color-btn-hover-border: #8b949e;
--gh-color-diff-addition-bg: #1c2d20;
--gh-color-diff-deletion-bg: #3d1f22;
--gh-color-attention-subtle: #3d2c00;
--gh-color-attention-fg: #f2cc60;
--gh-color-attention-emphasis: #d29922;
}
html,