You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1444 lines
28 KiB
1444 lines
28 KiB
/* Import fonts - IBM Plex Serif for classic Roman feel with modern tech aesthetic */ |
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); |
|
|
|
/* GitRepublic Theme - Light/Dark Mode with Royal Plum Palette */ |
|
|
|
:root { |
|
/* Light theme colors */ |
|
--royal-plum: #7B1E6D; |
|
--snow: #FBF7FA; |
|
--lavender-blush: #EEE6EC; |
|
--thistle: #D9C8D4; |
|
--lilac: #C7A0BB; |
|
|
|
/* Light theme semantic colors */ |
|
--bg-primary: var(--snow); |
|
--bg-secondary: var(--lavender-blush); |
|
--bg-tertiary: var(--thistle); |
|
--text-primary: #0a0a0a; /* Darker for better contrast */ |
|
--text-secondary: #2a2a2a; /* Darker for better contrast */ |
|
--text-muted: #4a4a4a; /* Darker for better contrast */ |
|
--border-color: var(--thistle); |
|
--border-light: var(--lavender-blush); |
|
--accent: var(--royal-plum); |
|
--accent-hover: #6a1f4d; |
|
--accent-light: var(--lilac); |
|
--link-color: #5a0d4f; /* Darker plum for better contrast on light bg */ |
|
--link-hover: #4a0a3f; /* Even darker for hover */ |
|
--card-bg: #ffffff; |
|
--card-border: var(--border-color); |
|
--button-primary: var(--royal-plum); |
|
--button-primary-hover: var(--accent-hover); |
|
--button-secondary: #8b5a7a; /* Darker for better contrast */ |
|
--button-secondary-hover: #7a4a6a; /* Even darker for hover */ |
|
--input-bg: #ffffff; |
|
--input-border: var(--border-color); |
|
--input-focus: var(--royal-plum); |
|
--error-bg: #fee2e2; |
|
--error-text: #7a0a0a; /* Darker for better contrast */ |
|
--success-bg: #d1fae5; |
|
--success-text: #034a2e; /* Darker for better contrast */ |
|
--warning-bg: #fef3c7; |
|
--warning-text: #6a3000; /* Darker for better contrast */ |
|
} |
|
|
|
[data-theme="dark"] { |
|
/* Dark theme colors - darker versions of the palette */ |
|
--royal-plum: #9a2a7f; |
|
--snow: #1a1418; |
|
--lavender-blush: #2a1f26; |
|
--thistle: #3d2f38; |
|
--lilac: #5a4452; |
|
|
|
/* Dark theme semantic colors */ |
|
--bg-primary: var(--snow); |
|
--bg-secondary: var(--lavender-blush); |
|
--bg-tertiary: var(--thistle); |
|
--text-primary: #ffffff; /* Brighter for better contrast */ |
|
--text-secondary: #e0e0e0; /* Brighter for better contrast */ |
|
--text-muted: #b0b0b0; /* Brighter for better contrast */ |
|
--border-color: var(--thistle); |
|
--border-light: var(--lavender-blush); |
|
--accent: var(--royal-plum); |
|
--accent-hover: #b84a8a; |
|
--accent-light: var(--lilac); |
|
--link-color: #d84ab8; /* Brighter plum for better contrast on dark bg */ |
|
--link-hover: #e85ac8; /* Even brighter for hover */ |
|
--card-bg: var(--lavender-blush); |
|
--card-border: var(--border-color); |
|
--button-primary: var(--royal-plum); |
|
--button-primary-hover: var(--accent-hover); |
|
--button-secondary: #7a5a6a; /* Adjusted for dark theme */ |
|
--button-secondary-hover: #8a6a7a; /* Lighter for hover */ |
|
--input-bg: var(--lavender-blush); |
|
--input-border: var(--border-color); |
|
--input-focus: var(--royal-plum); |
|
--error-bg: #4a1f1f; |
|
--error-text: #ff8a8a; /* Brighter for better contrast */ |
|
--success-bg: #1a3a2a; |
|
--success-text: #6aff9a; /* Brighter for better contrast */ |
|
--warning-bg: #4a3a1f; |
|
--warning-text: #ffcc44; /* Brighter for better contrast */ |
|
} |
|
|
|
/* Base styles */ |
|
* { |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
margin: 0; |
|
padding: 0; |
|
font-family: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
background-color: var(--bg-primary); |
|
color: var(--text-primary); |
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
line-height: 1.6; |
|
} |
|
|
|
/* Monospace font for code */ |
|
code, pre, .mono { |
|
font-family: 'IBM Plex Mono', 'Courier New', monospace; |
|
} |
|
|
|
/* Headings */ |
|
h1, h2, h3, h4, h5, h6 { |
|
font-weight: 600; |
|
letter-spacing: -0.02em; |
|
color: var(--text-primary); |
|
margin: 0; |
|
} |
|
|
|
h1 { font-size: 2rem; } |
|
h2 { font-size: 1.5rem; } |
|
h3 { font-size: 1.25rem; } |
|
|
|
/* Links */ |
|
a { |
|
color: var(--link-color); |
|
text-decoration: none; |
|
transition: color 0.2s ease; |
|
} |
|
|
|
a:hover { |
|
color: var(--link-hover); |
|
} |
|
|
|
.back-link { |
|
display: inline-block; |
|
margin-bottom: 1rem; |
|
color: var(--link-color); |
|
text-decoration: none; |
|
transition: color 0.2s ease; |
|
font-size: 0.875rem; |
|
} |
|
|
|
.back-link:hover { |
|
color: var(--link-hover); |
|
text-decoration: underline; |
|
} |
|
|
|
/* Layout */ |
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
} |
|
|
|
.container-narrow { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
} |
|
|
|
/* Mobile responsive for containers */ |
|
@media (max-width: 768px) { |
|
.container, |
|
.container-narrow, |
|
.container-wide { |
|
padding: 1rem; |
|
} |
|
} |
|
|
|
/* Header and Navigation */ |
|
header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 2rem; |
|
border-bottom: 1px solid var(--border-color); |
|
padding-bottom: 1rem; |
|
position: relative; |
|
} |
|
|
|
.header-logo { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
text-decoration: none; |
|
color: inherit; |
|
transition: opacity 0.2s ease; |
|
flex-shrink: 0; |
|
} |
|
|
|
.header-logo:hover { |
|
opacity: 0.8; |
|
} |
|
|
|
.main-logo { |
|
height: 48px; |
|
width: auto; |
|
object-fit: contain; |
|
} |
|
|
|
.header-logo h1 { |
|
margin: 0; |
|
font-size: 1.75rem; |
|
font-weight: 600; |
|
color: var(--text-primary); |
|
} |
|
|
|
nav { |
|
display: grid; |
|
grid-template-columns: 1fr auto 1fr; |
|
align-items: center; |
|
gap: 1rem; |
|
flex: 1; |
|
position: relative; |
|
} |
|
|
|
.nav-links { |
|
grid-column: 2; |
|
display: flex; |
|
gap: 1rem; |
|
align-items: center; |
|
justify-self: center; |
|
} |
|
|
|
.auth-section { |
|
grid-column: 3; |
|
justify-self: end; |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
nav a { |
|
text-decoration: none; |
|
color: var(--link-color); |
|
transition: color 0.2s ease; |
|
} |
|
|
|
nav a:hover { |
|
color: var(--link-hover); |
|
} |
|
|
|
/* Buttons */ |
|
button, .button { |
|
padding: 0.5rem 1rem; |
|
border: none; |
|
border-radius: 0.375rem; |
|
cursor: pointer; |
|
font-size: 0.875rem; |
|
font-family: 'IBM Plex Serif', serif; |
|
transition: background 0.2s ease, border-color 0.2s ease; |
|
} |
|
|
|
button:disabled, .button:disabled { |
|
opacity: 0.6; |
|
cursor: not-allowed; |
|
} |
|
|
|
.btn-primary, .login-button, .save-button, .view-button, .search-button, .create-file-button, .create-branch-button, .create-tag-button, .create-issue-button, .create-pr-button, .add-comment-btn, .reply-btn { |
|
background: var(--button-primary); |
|
color: white; |
|
border: none; |
|
} |
|
|
|
.btn-primary:hover:not(:disabled), .login-button:hover:not(:disabled), .save-button:hover:not(:disabled), .view-button:hover, .search-button:hover:not(:disabled), .create-file-button:hover, .create-branch-button:hover, .create-tag-button:hover, .create-issue-button:hover, .create-pr-button:hover, .add-comment-btn:hover, .reply-btn:hover { |
|
background: var(--button-primary-hover); |
|
} |
|
|
|
.btn-secondary, .logout-button { |
|
background: var(--button-secondary); |
|
color: #ffffff; /* Ensure white text for contrast */ |
|
} |
|
|
|
.btn-secondary:hover, .logout-button:hover { |
|
background: var(--button-secondary-hover); |
|
} |
|
|
|
.logout-button { |
|
background: var(--error-text); |
|
} |
|
|
|
.logout-button:hover { |
|
opacity: 0.9; |
|
} |
|
|
|
.btn-danger { |
|
background: var(--error-text); |
|
color: white; |
|
} |
|
|
|
.btn-danger:hover { |
|
opacity: 0.9; |
|
} |
|
|
|
.cancel-button, .cancel-btn { |
|
padding: 0.5rem 1rem; |
|
background: var(--bg-tertiary); |
|
border: 1px solid var(--border-color); |
|
border-radius: 0.25rem; |
|
cursor: pointer; |
|
color: var(--text-primary); |
|
font-family: 'IBM Plex Serif', serif; |
|
transition: background 0.2s ease; |
|
} |
|
|
|
.cancel-button:hover, .cancel-btn:hover { |
|
background: var(--bg-secondary); |
|
} |
|
|
|
/* Forms */ |
|
form { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1.5rem; |
|
} |
|
|
|
.form-group { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
label, .label { |
|
font-weight: 500; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.25rem; |
|
color: var(--text-primary); |
|
} |
|
|
|
label small, .label small { |
|
font-weight: normal; |
|
color: var(--text-muted); |
|
font-size: 0.875rem; |
|
} |
|
|
|
.checkbox-label { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: flex-start; |
|
gap: 0.5rem; |
|
cursor: pointer; |
|
user-select: none; |
|
} |
|
|
|
.checkbox-label input[type="checkbox"] { |
|
width: 1.1rem; |
|
height: 1.1rem; |
|
accent-color: var(--accent); |
|
cursor: pointer; |
|
flex-shrink: 0; |
|
margin-top: 0.125rem; |
|
} |
|
|
|
.checkbox-label > span { |
|
font-weight: 500; |
|
color: var(--text-primary); |
|
flex: 1; |
|
} |
|
|
|
.checkbox-label small { |
|
display: block; |
|
margin-top: 0.25rem; |
|
} |
|
|
|
input, textarea, select { |
|
padding: 0.75rem; |
|
border: 1px solid var(--input-border); |
|
border-radius: 0.375rem; |
|
font-size: 1rem; |
|
background: var(--input-bg); |
|
color: var(--text-primary); |
|
font-family: 'IBM Plex Serif', serif; |
|
transition: border-color 0.2s ease; |
|
} |
|
|
|
input:focus, textarea:focus, select:focus { |
|
outline: none; |
|
border-color: var(--input-focus); |
|
} |
|
|
|
input:disabled, textarea:disabled, select:disabled { |
|
background: var(--bg-secondary); |
|
cursor: not-allowed; |
|
opacity: 0.6; |
|
} |
|
|
|
.input-group { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
} |
|
|
|
.input-group input { |
|
flex: 1; |
|
} |
|
|
|
/* URL Preview Styles */ |
|
.url-preview-container { |
|
position: relative; |
|
} |
|
|
|
.url-preview { |
|
position: absolute; |
|
top: 100%; |
|
left: 0; |
|
margin-top: 0.5rem; |
|
z-index: 1000; |
|
background: var(--card-bg); |
|
border: 1px solid var(--border-color); |
|
border-radius: 8px; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
width: 600px; |
|
max-width: 90vw; |
|
max-height: 500px; |
|
display: flex; |
|
flex-direction: column; |
|
overflow: hidden; |
|
pointer-events: auto; |
|
} |
|
|
|
/* Position preview above if near bottom of viewport */ |
|
@media (min-width: 769px) { |
|
.url-preview-container:last-child .url-preview { |
|
bottom: 100%; |
|
top: auto; |
|
margin-top: 0; |
|
margin-bottom: 0.5rem; |
|
} |
|
} |
|
|
|
.preview-loading, |
|
.preview-error { |
|
padding: 1rem; |
|
text-align: center; |
|
background: var(--bg-secondary); |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
|
|
.preview-error { |
|
background: var(--warning-bg); |
|
color: var(--warning-text); |
|
font-size: 0.9rem; |
|
} |
|
|
|
.preview-iframe { |
|
width: 100%; |
|
height: 400px; |
|
border: none; |
|
flex: 1; |
|
background: white; |
|
} |
|
|
|
.preview-url-display { |
|
padding: 0.5rem 1rem; |
|
background: var(--bg-secondary); |
|
border-top: 1px solid var(--border-color); |
|
font-size: 0.85rem; |
|
color: var(--text-secondary); |
|
font-family: 'IBM Plex Mono', monospace; |
|
word-break: break-all; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.url-preview { |
|
width: calc(100vw - 2rem); |
|
max-height: 400px; |
|
} |
|
|
|
.preview-iframe { |
|
height: 300px; |
|
} |
|
} |
|
|
|
/* Lookup Button Styles */ |
|
.lookup-button { |
|
padding: 0.5rem 0.75rem; |
|
font-size: 0.9rem; |
|
background: var(--button-secondary); |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
transition: background 0.2s; |
|
white-space: nowrap; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.lookup-button .loading-text { |
|
font-size: 0.85rem; |
|
} |
|
|
|
.icon-small { |
|
width: 16px; |
|
height: 16px; |
|
display: inline-block; |
|
vertical-align: middle; |
|
flex-shrink: 0; |
|
} |
|
|
|
.icon-small svg { |
|
width: 100%; |
|
height: 100%; |
|
color: inherit; |
|
} |
|
|
|
.icon-inline { |
|
width: 14px; |
|
height: 14px; |
|
display: inline-block; |
|
vertical-align: middle; |
|
margin-right: 0.25rem; |
|
} |
|
|
|
.icon-inline svg { |
|
width: 100%; |
|
height: 100%; |
|
color: inherit; |
|
} |
|
|
|
.clear-lookup-button img, |
|
.clear-lookup-button svg { |
|
width: 14px; |
|
height: 14px; |
|
display: block; |
|
} |
|
|
|
.lookup-button:hover:not(:disabled) { |
|
background: var(--button-secondary-hover); |
|
} |
|
|
|
.lookup-button:disabled { |
|
opacity: 0.5; |
|
cursor: not-allowed; |
|
} |
|
|
|
.lookup-error { |
|
margin-top: 0.5rem; |
|
padding: 0.5rem; |
|
background: var(--error-bg); |
|
color: var(--error-text); |
|
border-radius: 4px; |
|
font-size: 0.9rem; |
|
} |
|
|
|
.lookup-results { |
|
margin-top: 0.5rem; |
|
border: 1px solid var(--border-color); |
|
border-radius: 4px; |
|
background: var(--bg-secondary); |
|
max-height: 300px; |
|
overflow-y: auto; |
|
} |
|
|
|
.lookup-results-header { |
|
padding: 0.5rem; |
|
background: var(--bg-tertiary); |
|
font-weight: 600; |
|
font-size: 0.9rem; |
|
border-bottom: 1px solid var(--border-color); |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.clear-lookup-button { |
|
background: transparent; |
|
border: none; |
|
color: var(--text-muted); |
|
cursor: pointer; |
|
font-size: 1.2rem; |
|
padding: 0.25rem 0.5rem; |
|
border-radius: 4px; |
|
transition: background 0.2s, color 0.2s; |
|
} |
|
|
|
.clear-lookup-button:hover { |
|
background: var(--bg-secondary); |
|
color: var(--text-primary); |
|
} |
|
|
|
.lookup-result-item { |
|
padding: 0.75rem; |
|
cursor: pointer; |
|
border-bottom: 1px solid var(--border-light); |
|
transition: background 0.2s; |
|
} |
|
|
|
.lookup-result-item:hover { |
|
background: var(--bg-tertiary); |
|
} |
|
|
|
.lookup-result-item:last-child { |
|
border-bottom: none; |
|
} |
|
|
|
.lookup-result-item strong { |
|
display: block; |
|
margin-bottom: 0.25rem; |
|
color: var(--text-primary); |
|
} |
|
|
|
.lookup-result-item small { |
|
display: block; |
|
color: var(--text-muted); |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.85rem; |
|
} |
|
|
|
.lookup-result-item.repo-result, |
|
.lookup-result-item.profile-result { |
|
padding: 1rem; |
|
} |
|
|
|
.result-header { |
|
display: flex; |
|
gap: 1rem; |
|
align-items: flex-start; |
|
} |
|
|
|
.result-image { |
|
width: 60px; |
|
height: 60px; |
|
object-fit: cover; |
|
border-radius: 4px; |
|
flex-shrink: 0; |
|
} |
|
|
|
.result-avatar { |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
object-fit: cover; |
|
flex-shrink: 0; |
|
} |
|
|
|
.result-avatar-placeholder { |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
background: var(--accent); |
|
color: white; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
flex-shrink: 0; |
|
} |
|
|
|
.result-info { |
|
flex: 1; |
|
min-width: 0; |
|
} |
|
|
|
.result-info strong { |
|
display: block; |
|
margin-bottom: 0.25rem; |
|
color: var(--text-primary); |
|
font-size: 1rem; |
|
} |
|
|
|
.result-description { |
|
margin: 0.5rem 0; |
|
color: var(--text-secondary); |
|
font-size: 0.9rem; |
|
line-height: 1.4; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
} |
|
|
|
.result-meta { |
|
display: flex; |
|
gap: 1rem; |
|
margin-top: 0.5rem; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.result-meta small { |
|
color: var(--text-muted); |
|
font-size: 0.8rem; |
|
} |
|
|
|
.d-tag { |
|
display: inline-block; |
|
margin-top: 0.25rem; |
|
padding: 0.125rem 0.5rem; |
|
background: var(--bg-tertiary); |
|
border-radius: 3px; |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.8rem; |
|
} |
|
|
|
.npub-display { |
|
display: block; |
|
margin-top: 0.5rem; |
|
word-break: break-all; |
|
} |
|
|
|
.result-tags { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 0.5rem; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.tag-badge { |
|
display: inline-block; |
|
padding: 0.125rem 0.5rem; |
|
background: var(--accent-light); |
|
color: var(--accent); |
|
border-radius: 12px; |
|
font-size: 0.75rem; |
|
font-weight: 500; |
|
} |
|
|
|
.search-input { |
|
width: 100%; |
|
padding: 0.75rem; |
|
font-size: 1rem; |
|
border: 1px solid var(--input-border); |
|
border-radius: 4px; |
|
background: var(--input-bg); |
|
color: var(--text-primary); |
|
font-family: 'IBM Plex Serif', serif; |
|
} |
|
|
|
.search-type-select { |
|
padding: 0.75rem; |
|
font-size: 1rem; |
|
border: 1px solid var(--input-border); |
|
border-radius: 4px; |
|
background: var(--input-bg); |
|
color: var(--text-primary); |
|
font-family: 'IBM Plex Serif', serif; |
|
} |
|
|
|
.search-input:focus, .search-type-select:focus { |
|
outline: none; |
|
border-color: var(--input-focus); |
|
} |
|
|
|
.branch-select { |
|
padding: 0.5rem; |
|
border: 1px solid var(--input-border); |
|
border-radius: 0.25rem; |
|
background: var(--input-bg); |
|
color: var(--text-primary); |
|
font-family: 'IBM Plex Serif', serif; |
|
} |
|
|
|
/* Cards */ |
|
.card, .repo-card { |
|
border: 1px solid var(--card-border); |
|
border-radius: 0.5rem; |
|
background: var(--card-bg); |
|
overflow: hidden; |
|
transition: border-color 0.2s ease, box-shadow 0.2s ease; |
|
} |
|
|
|
.card:hover, .repo-card:hover { |
|
border-color: var(--accent); |
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.repo-card-banner { |
|
width: 100%; |
|
height: 200px; |
|
overflow: hidden; |
|
background: var(--bg-secondary); |
|
} |
|
|
|
.repo-card-banner img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
.repo-card-content { |
|
padding: 1.5rem; |
|
} |
|
|
|
.repo-card-image, .repo-image { |
|
width: 64px; |
|
height: 64px; |
|
border-radius: 8px; |
|
object-fit: cover; |
|
flex-shrink: 0; |
|
} |
|
|
|
.repo-item, .code-item { |
|
border: 1px solid var(--card-border); |
|
border-radius: 8px; |
|
padding: 1rem; |
|
cursor: pointer; |
|
transition: box-shadow 0.2s, border-color 0.2s; |
|
background: var(--card-bg); |
|
} |
|
|
|
.repo-item:hover, .code-item:hover { |
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|
border-color: var(--accent); |
|
} |
|
|
|
/* Messages */ |
|
.error, .warning, .success { |
|
padding: 1rem; |
|
border-radius: 0.5rem; |
|
margin: 1rem 0; |
|
} |
|
|
|
.error { |
|
background: var(--error-bg); |
|
color: var(--error-text); |
|
border: 1px solid var(--error-text); |
|
} |
|
|
|
.warning { |
|
background: var(--warning-bg); |
|
border: 1px solid var(--warning-text); |
|
color: var(--warning-text); |
|
} |
|
|
|
.success { |
|
background: var(--success-bg); |
|
color: var(--success-text); |
|
border: 1px solid var(--success-text); |
|
} |
|
|
|
.loading, .empty { |
|
text-align: center; |
|
padding: 2rem; |
|
color: var(--text-muted); |
|
} |
|
|
|
.no-results { |
|
text-align: center; |
|
padding: 2rem; |
|
color: var(--text-muted); |
|
} |
|
|
|
/* Status badges */ |
|
.pr-status, .issue-status { |
|
padding: 0.2rem 0.5rem; |
|
border-radius: 3px; |
|
font-weight: bold; |
|
font-size: 0.8rem; |
|
} |
|
|
|
.pr-status.open, .issue-status.open { |
|
background: var(--accent-light); |
|
color: var(--text-primary); /* Better contrast */ |
|
} |
|
|
|
.pr-status.closed, .issue-status.closed { |
|
background: var(--error-bg); |
|
color: var(--error-text); |
|
} |
|
|
|
.pr-status.merged, .issue-status.resolved { |
|
background: var(--success-bg); |
|
color: var(--success-text); |
|
} |
|
|
|
.fork-badge { |
|
padding: 0.25rem 0.5rem; |
|
background: var(--accent-light); |
|
color: var(--text-primary); /* Better contrast */ |
|
border-radius: 4px; |
|
font-size: 0.85rem; |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.fork-badge a { |
|
color: var(--link-color); /* Use link color for better visibility */ |
|
text-decoration: none; |
|
} |
|
|
|
.fork-badge a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.verification-status { |
|
padding: 0.25rem 0.5rem; |
|
border-radius: 0.25rem; |
|
font-size: 0.75rem; |
|
font-weight: 500; |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.verification-status.verified { |
|
background: var(--success-bg); |
|
color: var(--success-text); |
|
} |
|
|
|
.verification-status.unverified { |
|
background: var(--error-bg); |
|
color: var(--error-text); |
|
} |
|
|
|
/* Code blocks - consistent dark-gray background in both themes */ |
|
code { |
|
background: var(--bg-secondary); |
|
padding: 0.125rem 0.25rem; |
|
border-radius: 0.25rem; |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.875em; |
|
color: var(--text-primary); |
|
} |
|
|
|
pre { |
|
background: #1e1e1e; /* Consistent dark-gray background */ |
|
color: #d4d4d4; /* Light gray text for good contrast */ |
|
padding: 1rem; |
|
border-radius: 0.5rem; |
|
overflow-x: auto; |
|
margin: 1rem 0; |
|
border: 1px solid #3a3a3a; |
|
} |
|
|
|
pre code { |
|
background: transparent; |
|
padding: 0; |
|
color: inherit; |
|
} |
|
|
|
.clone-urls code { |
|
display: block; |
|
background: var(--bg-secondary); |
|
padding: 0.5rem; |
|
border-radius: 0.25rem; |
|
margin: 0.25rem 0; |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.875rem; |
|
color: var(--text-primary); |
|
border: 1px solid var(--border-light); |
|
} |
|
|
|
/* Utility classes */ |
|
.description { |
|
color: var(--text-secondary); |
|
margin: 0.5rem 0; |
|
} |
|
|
|
.repo-meta, .repo-description-header { |
|
font-size: 0.875rem; |
|
color: var(--text-muted); |
|
margin-top: 1rem; |
|
} |
|
|
|
.repo-description-header { |
|
margin: 0.25rem 0 0 0; |
|
font-size: 0.9rem; |
|
color: var(--text-secondary); |
|
} |
|
|
|
.npub, .auth-status { |
|
color: var(--text-muted); |
|
font-size: 0.875rem; |
|
} |
|
|
|
.user-info { |
|
color: var(--text-secondary); |
|
font-size: 0.875rem; |
|
} |
|
|
|
.docs-link { |
|
color: var(--link-color); |
|
text-decoration: none; |
|
font-size: 1.25rem; |
|
margin-left: 0.5rem; |
|
transition: color 0.2s ease; |
|
} |
|
|
|
.docs-link:hover { |
|
color: var(--link-hover); |
|
} |
|
|
|
/* Theme toggle button */ |
|
.theme-toggle { |
|
cursor: pointer; |
|
padding: 0.5rem 0.75rem; |
|
border: 1px solid var(--border-color); |
|
border-radius: 0.375rem; |
|
background: var(--card-bg); |
|
color: var(--text-primary); |
|
transition: all 0.2s ease; |
|
font-size: 0.875rem; |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
font-family: 'IBM Plex Serif', serif; |
|
} |
|
|
|
.theme-toggle:hover { |
|
background: var(--bg-secondary); |
|
border-color: var(--accent); |
|
color: var(--accent); |
|
} |
|
|
|
.theme-toggle:active { |
|
transform: scale(0.98); |
|
} |
|
|
|
.theme-toggle-icon { |
|
font-size: 1rem; |
|
line-height: 1; |
|
} |
|
|
|
/* Search form */ |
|
.search-form { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.search-controls { |
|
display: flex; |
|
gap: 1rem; |
|
align-items: center; |
|
} |
|
|
|
.results-header { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.results-section { |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.repo-list, .code-list { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
} |
|
|
|
.repo-item h4 { |
|
margin: 0 0 0.5rem 0; |
|
color: var(--link-color); |
|
} |
|
|
|
.repo-description { |
|
color: var(--text-secondary); |
|
margin: 0.5rem 0; |
|
} |
|
|
|
.code-file-path { |
|
font-family: 'IBM Plex Mono', monospace; |
|
color: var(--text-primary); |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.code-repo a { |
|
color: var(--link-color); |
|
} |
|
|
|
.code-repo a:hover { |
|
color: var(--link-hover); |
|
} |
|
|
|
/* Settings form */ |
|
.settings-form { |
|
background: var(--card-bg); |
|
border-radius: 8px; |
|
padding: 2rem; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
border: 1px solid var(--border-color); |
|
} |
|
|
|
.form-section { |
|
margin-bottom: 2rem; |
|
padding-bottom: 2rem; |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
|
|
.form-section:last-of-type { |
|
border-bottom: none; |
|
} |
|
|
|
.help-text { |
|
color: var(--text-muted); |
|
font-size: 0.9rem; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.array-input { |
|
display: flex; |
|
gap: 0.5rem; |
|
margin-bottom: 0.5rem; |
|
align-items: center; |
|
} |
|
|
|
.add-button, .remove-button { |
|
padding: 0.5rem 1rem; |
|
border: 1px solid var(--border-color); |
|
border-radius: 4px; |
|
background: var(--card-bg); |
|
cursor: pointer; |
|
font-size: 0.9rem; |
|
font-family: 'IBM Plex Serif', serif; |
|
transition: background 0.2s ease; |
|
} |
|
|
|
.add-button { |
|
color: var(--button-primary); |
|
border-color: var(--button-primary); |
|
} |
|
|
|
.add-button:hover { |
|
background: var(--accent-light); |
|
} |
|
|
|
.remove-button { |
|
color: var(--error-text); |
|
border-color: var(--error-text); |
|
} |
|
|
|
.remove-button:hover { |
|
background: var(--error-bg); |
|
} |
|
|
|
.form-actions { |
|
display: flex; |
|
gap: 1rem; |
|
justify-content: flex-end; |
|
margin-top: 2rem; |
|
} |
|
|
|
/* Repo header */ |
|
.repos-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.search-section { |
|
margin-bottom: 2rem; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
} |
|
|
|
.search-bar-container { |
|
width: 100%; |
|
} |
|
|
|
.search-bar-container .search-input { |
|
width: 100%; |
|
padding: 0.75rem 1rem; |
|
font-size: 1rem; |
|
border: 1px solid var(--border-color); |
|
border-radius: 0.375rem; |
|
background: var(--card-bg); |
|
color: var(--text-primary); |
|
font-family: 'IBM Plex Serif', serif; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.search-bar-container .search-input:focus { |
|
outline: none; |
|
border-color: var(--accent); |
|
box-shadow: 0 0 0 3px rgba(126, 40, 94, 0.1); |
|
} |
|
|
|
.search-bar-container .search-input:disabled { |
|
opacity: 0.6; |
|
cursor: not-allowed; |
|
background: var(--bg-secondary); |
|
} |
|
|
|
label.filter-checkbox, |
|
.filter-checkbox { |
|
display: flex !important; |
|
flex-direction: row !important; |
|
align-items: center; |
|
gap: 0.5rem; |
|
cursor: pointer; |
|
user-select: none; |
|
color: var(--text-primary); |
|
font-size: 0.9rem; |
|
} |
|
|
|
label.filter-checkbox input[type="checkbox"], |
|
.filter-checkbox input[type="checkbox"] { |
|
cursor: pointer; |
|
width: 1.1rem; |
|
height: 1.1rem; |
|
accent-color: var(--accent); |
|
flex-shrink: 0; |
|
margin: 0; |
|
display: block; |
|
} |
|
|
|
label.filter-checkbox > span, |
|
.filter-checkbox > span { |
|
display: inline; |
|
line-height: 1.5; |
|
} |
|
|
|
.repos-list { |
|
display: grid; |
|
gap: 1.5rem; |
|
} |
|
|
|
/* Repository sections */ |
|
.repo-section { |
|
margin-bottom: 3rem; |
|
} |
|
|
|
.section-header { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
margin-bottom: 1.5rem; |
|
padding-bottom: 0.75rem; |
|
border-bottom: 2px solid var(--card-border); |
|
} |
|
|
|
.section-header h3 { |
|
margin: 0; |
|
font-size: 1.5rem; |
|
font-weight: 600; |
|
} |
|
|
|
.section-badge { |
|
background: var(--accent); |
|
color: var(--accent-text); |
|
padding: 0.25rem 0.75rem; |
|
border-radius: 1rem; |
|
font-size: 0.875rem; |
|
font-weight: 600; |
|
} |
|
|
|
.section-description { |
|
color: var(--text-secondary); |
|
font-size: 0.875rem; |
|
margin-left: auto; |
|
} |
|
|
|
/* Visual distinction between registered and local repos */ |
|
.repo-card-registered { |
|
border-left: 4px solid var(--success, #10b981); |
|
} |
|
|
|
.repo-card-local { |
|
border-left: 4px solid var(--warning, #f59e0b); |
|
background: var(--bg-secondary, rgba(245, 158, 11, 0.05)); |
|
} |
|
|
|
/* Repo actions */ |
|
.repo-actions { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.delete-button, |
|
.register-button { |
|
padding: 0.5rem 1rem; |
|
border-radius: 0.375rem; |
|
font-size: 0.875rem; |
|
font-weight: 500; |
|
cursor: pointer; |
|
transition: all 0.2s ease; |
|
border: 1px solid; |
|
} |
|
|
|
.delete-button { |
|
background: var(--error-bg, rgba(239, 68, 68, 0.1)); |
|
color: var(--error, #ef4444); |
|
border-color: var(--error, #ef4444); |
|
} |
|
|
|
.delete-button:hover:not(:disabled) { |
|
background: var(--error, #ef4444); |
|
color: white; |
|
} |
|
|
|
.delete-button:disabled { |
|
opacity: 0.5; |
|
cursor: not-allowed; |
|
} |
|
|
|
.register-button { |
|
background: var(--accent); |
|
color: var(--accent-text, white); |
|
border-color: var(--accent); |
|
} |
|
|
|
.register-button:hover { |
|
opacity: 0.9; |
|
transform: translateY(-1px); |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.repo-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
margin-bottom: 0.5rem; |
|
gap: 1rem; |
|
} |
|
|
|
.repo-header-text { |
|
flex: 1; |
|
} |
|
|
|
.header-left { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
gap: 0.5rem; |
|
} |
|
|
|
.repo-title-section { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.header-right { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
/* Auth section */ |
|
.auth-section { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
} |
|
|
|
/* Code repo link */ |
|
.code-repo { |
|
font-size: 0.9rem; |
|
color: var(--text-secondary); |
|
} |
|
|
|
/* All pages use the same container width for consistency */ |
|
|
|
/* Highlight.js Syntax Highlighting - Consistent dark-gray background */ |
|
.hljs { |
|
background: #1e1e1e !important; /* Consistent dark-gray background in both themes */ |
|
color: #d4d4d4 !important; /* Light gray text for good contrast */ |
|
border: 1px solid #3a3a3a; |
|
border-radius: 4px; |
|
padding: 1rem; |
|
overflow-x: auto; |
|
} |
|
|
|
/* Syntax highlighting colors - high contrast for dark-gray background */ |
|
.hljs-comment, |
|
.hljs-quote { |
|
color: #6a9955; /* Green comments - good contrast */ |
|
font-style: italic; |
|
} |
|
|
|
.hljs-keyword, |
|
.hljs-selector-tag, |
|
.hljs-subst { |
|
color: #c586c0; /* Purple/magenta keywords - good contrast */ |
|
font-weight: 500; |
|
} |
|
|
|
.hljs-number, |
|
.hljs-literal { |
|
color: #b5cea8; /* Light green numbers - good contrast */ |
|
font-weight: 500; |
|
} |
|
|
|
.hljs-variable, |
|
.hljs-template-variable, |
|
.hljs-tag .hljs-attr { |
|
color: #9cdcfe; /* Light blue variables - good contrast */ |
|
} |
|
|
|
.hljs-string, |
|
.hljs-doctag { |
|
color: #ce9178; /* Orange strings - good contrast */ |
|
} |
|
|
|
.hljs-title, |
|
.hljs-section, |
|
.hljs-selector-id { |
|
color: #dcdcaa; /* Yellow titles - good contrast */ |
|
font-weight: 600; |
|
} |
|
|
|
.hljs-type, |
|
.hljs-class .hljs-title { |
|
color: #4ec9b0; /* Cyan types - good contrast */ |
|
font-weight: 500; |
|
} |
|
|
|
.hljs-tag, |
|
.hljs-name, |
|
.hljs-attribute { |
|
color: #569cd6; /* Blue tags - good contrast */ |
|
} |
|
|
|
.hljs-regexp, |
|
.hljs-link { |
|
color: #d16969; /* Red regexp - good contrast */ |
|
} |
|
|
|
.hljs-symbol, |
|
.hljs-bullet { |
|
color: #dcdcaa; /* Yellow symbols - good contrast */ |
|
} |
|
|
|
.hljs-built_in, |
|
.hljs-builtin-name { |
|
color: #4ec9b0; /* Cyan built-ins - good contrast */ |
|
} |
|
|
|
.hljs-meta { |
|
color: #808080; /* Gray meta - good contrast */ |
|
} |
|
|
|
.hljs-deletion { |
|
background: #4a1f1f; /* Dark red background */ |
|
color: #ff8a8a; /* Light red text */ |
|
} |
|
|
|
.hljs-addition { |
|
background: #1a3a2a; /* Dark green background */ |
|
color: #6aff9a; /* Light green text */ |
|
} |
|
|
|
.hljs-emphasis { |
|
font-style: italic; |
|
} |
|
|
|
.hljs-strong { |
|
font-weight: 600; |
|
} |
|
|
|
/* Code blocks use consistent dark-gray background in both themes */ |
|
/* All syntax highlighting colors are optimized for #1e1e1e background */
|
|
|