* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: #0d1117;
color: #c9d1d9;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
border-bottom: 1px solid #30363d;
padding-bottom: 20px;
margin-bottom: 30px;
}
h1 {
color: #f0f6fc;
font-size: 1.8rem;
margin-bottom: 10px;
}
h2 {
color: #f0f6fc;
font-size: 1.4rem;
margin: 20px 0 15px;
padding-bottom: 10px;
border-bottom: 1px solid #21262d;
}
h3 {
color: #f0f6fc;
font-size: 1.1rem;
margin: 15px 0 10px;
}
.nav {
margin-top: 10px;
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.nav a {
color: #58a6ff;
text-decoration: none;
}
.nav a:hover {
text-decoration: underline;
}
.repo-selector {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.repo-selector label {
color: #8b949e;
font-size: 0.875rem;
}
.repo-selector select {
background: #21262d;
color: #f0f6fc;
border: 1px solid #30363d;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.875rem;
cursor: pointer;
}
.repo-selector select:hover {
border-color: #58a6ff;
}
.commit-list {
list-style: none;
margin-top: 20px;
}
.commit-item {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
padding: 16px;
margin-bottom: 12px;
transition: border-color 0.2s;
}
.commit-item:hover {
border-color: #58a6ff;
}
.commit-hash {
font-family: 'SFMono-Regular', Consolas, monospace;
font-size: 0.85rem;
color: #58a6ff;
text-decoration: none;
}
.commit-meta {
font-size: 0.875rem;
color: #8b949e;
margin-top: 8px;
}
.commit-author {
color: #f0f6fc;
font-weight: 500;
}
.commit-date {
color: #8b949e;
}
.commit-message {
margin-top: 8px;
color: #c9d1d9;
white-space: pre-wrap;
}
.file-list {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
overflow: hidden;
}
.file-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #21262d;
text-decoration: none;
color: #c9d1d9;
transition: background 0.2s;
}
.file-item:last-child {
border-bottom: none;
}
.file-item:hover {
background: #1f242c;
}
.file-mode {
font-family: monospace;
color: #8b949e;
width: 80px;
font-size: 0.875rem;
}
.file-name {
flex: 1;
color: #58a6ff;
}
.file-item:hover .file-name {
text-decoration: underline;
}
.breadcrumb {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 20px;
color: #8b949e;
}
.breadcrumb a {
color: #58a6ff;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.blob-content {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
overflow: hidden;
}
.blob-header {
background: #21262d;
padding: 12px 16px;
border-bottom: 1px solid #30363d;
font-size: 0.875rem;
color: #8b949e;
}
.blob-code {
padding: 16px;
overflow-x: auto;
font-family: 'SFMono-Regular', Consolas, monospace;
font-size: 0.875rem;
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.refs-list {
display: grid;
gap: 10px;
}
.ref-item {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
}
.ref-type {
background: #238636;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.ref-type.tag {
background: #8957e5;
}
.ref-name {
font-weight: 600;
color: #f0f6fc;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #8b949e;
}
.commit-details {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
.commit-header {
margin-bottom: 20px;
}
.commit-title {
font-size: 1.25rem;
color: #f0f6fc;
margin-bottom: 10px;
}
.commit-info {
display: grid;
gap: 8px;
font-size: 0.875rem;
}
.commit-info-row {
display: flex;
gap: 10px;
}
.commit-info-label {
color: #8b949e;
width: 80px;
flex-shrink: 0;
}
.commit-info-value {
color: #c9d1d9;
font-family: monospace;
}
.parent-link {
color: #58a6ff;
text-decoration: none;
}
.parent-link:hover {
text-decoration: underline;
}
.repo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 20px;
}
.repo-card {
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
padding: 20px;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, transform 0.1s;
}
.repo-card:hover {
border-color: #58a6ff;
transform: translateY(-2px);
}
.repo-card h3 {
color: #58a6ff;
margin-bottom: 8px;
font-size: 1.1rem;
}
.repo-card p {
color: #8b949e;
font-size: 0.875rem;
margin: 0;
}
.current-repo {
background: #21262d;
border: 1px solid #58a6ff;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.875rem;
color: #f0f6fc;
}
.current-repo strong {
color: #58a6ff;
}
.branch-badge {
background: #238636;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
margin-left: 10px;
}
.commit-row {
display: flex;
padding: 10px 0;
border-bottom: 1px solid #30363d;
gap: 15px;
align-items: baseline;
}
.commit-row:last-child {
border-bottom: none;
}
.commit-row .sha {
font-family: monospace;
color: #58a6ff;
text-decoration: none;
}
.commit-row .message {
flex: 1;
font-weight: 500;
}
.commit-row .meta {
font-size: 0.85em;
color: #8b949e;
white-space: nowrap;
}
.blob-content-image {
text-align: center;
padding: 20px;
background: #0d1117;
}
.blob-content-image img {
max-width: 100%;
border: 1px solid #30363d;
}
.blob-content-video {
text-align: center;
padding: 20px;
background: #000;
}
.blob-content-video video {
max-width: 100%;
max-height: 80vh;
}
.blob-content-audio {
text-align: center;
padding: 40px;
background: #161b22;
}
.blob-content-audio audio {
width: 100%;
max-width: 600px;
}
.download-state {
text-align: center;
padding: 40px;
border: 1px solid #30363d;
border-radius: 6px;
margin-top: 10px;
}
.download-state p {
margin-bottom: 20px;
color: #8b949e;
}
.btn-download {
display: inline-block;
padding: 6px 16px;
background: #238636;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
}
.repo-info-banner {
margin-top: 15px;
}
.file-icon-container {
width: 20px;
text-align: center;
margin-right: 5px;
color: #8b949e;
}
.file-size {
color: #8b949e;
font-size: 0.8em;
margin-left: 10px;
}
.file-date {
color: #8b949e;
font-size: 0.8em;
margin-left: auto;
}
.repo-card-time {
margin-top: 8px;
color: #58a6ff;
}
.diff-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.diff-file {
background: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
overflow: hidden;
}
.diff-header {
background: #21262d;
padding: 10px 16px;
border-bottom: 1px solid #30363d;
display: flex;
align-items: center;
gap: 10px;
}
.diff-path {
font-family: monospace;
font-size: 0.9rem;
color: #f0f6fc;
}
.diff-binary {
padding: 20px;
text-align: center;
color: #8b949e;
font-style: italic;
}
.diff-content {
overflow-x: auto;
}
.diff-content table {
width: 100%;
border-collapse: collapse;
font-family: 'SFMono-Regular', Consolas, monospace;
font-size: 12px;
}
.diff-content td {
padding: 2px 0;
line-height: 20px;
}
.diff-num {
width: 1%;
min-width: 40px;
text-align: right;
padding-right: 10px;
color: #6e7681;
user-select: none;
background: #0d1117;
border-right: 1px solid #30363d;
}
.diff-num::before {
content: attr(data-num);
}
.diff-code {
padding-left: 10px;
white-space: pre-wrap;
word-break: break-all;
color: #c9d1d9;
}
.diff-marker {
display: inline-block;
width: 15px;
user-select: none;
color: #8b949e;
}
.diff-add {
background-color: rgba(2, 59, 149, 0.25);
}
.diff-add .diff-code {
color: #79c0ff;
}
.diff-add .diff-marker {
color: #79c0ff;
}
.diff-del {
background-color: rgba(148, 99, 0, 0.25);
}
.diff-del .diff-code {
color: #d29922;
}
.diff-del .diff-marker {
color: #d29922;
}
.diff-gap {
background: #0d1117;
color: #484f58;
text-align: center;
font-size: 0.8em;
height: 20px;
}
.diff-gap td {
padding: 0;
line-height: 20px;
background: rgba(110, 118, 129, 0.1);
}
.status-add { color: #58a6ff; }
.status-del { color: #d29922; }
.status-mod { color: #a371f7; }
.tag-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.tag-table th {
text-align: left;
padding: 10px 16px;
border-bottom: 2px solid #30363d;
color: #8b949e;
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.tag-table td {
padding: 12px 16px;
border-bottom: 1px solid #21262d;
vertical-align: top;
color: #c9d1d9;
font-size: 0.9rem;
}
.tag-table tr:hover td {
background: #161b22;
}
.tag-table .tag-name {
min-width: 140px;
width: 20%;
}
.tag-table .tag-message {
width: auto;
white-space: normal;
word-break: break-word;
color: #c9d1d9;
font-weight: 500;
}
.tag-table .tag-author,
.tag-table .tag-time,
.tag-table .tag-hash {
width: 1%;
white-space: nowrap;
}
.tag-table .tag-time {
text-align: right;
color: #8b949e;
}
.tag-table .tag-hash {
text-align: right;
}
.tag-table .tag-name a {
color: #58a6ff;
text-decoration: none;
font-family: 'SFMono-Regular', Consolas, monospace;
}
.tag-table .tag-author {
color: #c9d1d9;
}
.tag-table .tag-age-header {
text-align: right;
}
.tag-table .tag-commit-header {
text-align: right;
}
.tag-table .commit-hash {
font-family: 'SFMono-Regular', Consolas, monospace;
color: #58a6ff;
text-decoration: none;
}
.tag-table .commit-hash:hover {
text-decoration: underline;
}
.blob-code {
font-family: 'SFMono-Regular', Consolas, monospace;
background-color: #161b22;
color: #fcfcfa;
font-size: 0.875rem;
line-height: 1.6;
tab-size: 2;
}
.hl-comment,
.hl-doc-comment {
color: #727072;
font-style: italic;
}
.hl-function,
.hl-method {
color: #78dce8;
}
.hl-tag {
color: #3e8bff;
}
.hl-class,
.hl-type,
.hl-interface,
.hl-struct {
color: #a9dc76;
}
.hl-keyword,
.hl-storage,
.hl-modifier,
.hl-statement {
color: #ff6188;
font-weight: 600;
}
.hl-string,
.hl-string_interp {
color: #ffd866;
}
.hl-number,
.hl-boolean,
.hl-constant,
.hl-preprocessor {
color: #ab9df2;
}
.hl-variable {
color: #fcfcfa;
}
.hl-attribute,
.hl-property {
color: #fc9867;
}
.hl-operator,
.hl-punctuation,
.hl-escape {
color: #939293;
}
.hl-interp-punct {
color: #ff6188;
}
.hl-math {
color: #ab9df2;
font-style: italic;
}
.hl-code {
display: inline-block;
width: 100%;
background-color: #0d1117;
color: #c9d1d9;
padding: 2px 4px;
border-radius: 3px;
}