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.
2157 lines
50 KiB
2157 lines
50 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 - Three Themes: Light, Dark (Purple), and Black */ |
|
|
|
/* GitRepublic Light Theme */ |
|
:root, |
|
[data-theme="light"] { |
|
/* 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: #1a1a1a; /* Darker for better contrast on light backgrounds */ |
|
--text-muted: #3a3a3a; /* Darker for better contrast on light backgrounds */ |
|
--border-color: var(--thistle); |
|
--border-light: var(--lavender-blush); |
|
--accent: var(--royal-plum); |
|
--accent-hover: #6a1f4d; |
|
--accent-light: var(--lilac); |
|
--accent-text: #ffffff; /* White text for accent backgrounds */ |
|
--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); |
|
--input-placeholder: #6a6a6a; /* Medium gray for placeholder text */ |
|
--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 */ |
|
--shadow-color: rgba(0, 0, 0, 0.15); /* Shadow for light theme */ |
|
--shadow-color-light: rgba(0, 0, 0, 0.1); /* Lighter shadow for light theme */ |
|
--focus-ring: rgba(123, 30, 109, 0.15); /* Focus ring for light theme */ |
|
} |
|
|
|
/* GitRepublic Dark Theme (Purple) - Default */ |
|
[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: #e8e8e8; /* Brighter for better contrast on dark backgrounds */ |
|
--text-muted: #c0c0c0; /* Brighter for better contrast on dark backgrounds */ |
|
--border-color: var(--thistle); |
|
--border-light: var(--lavender-blush); |
|
--accent: var(--royal-plum); |
|
--accent-hover: #b84a8a; |
|
--accent-light: var(--lilac); |
|
--accent-text: #ffffff; /* White text for accent backgrounds */ |
|
--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: #8a6a7a; /* Lighter for better contrast with white text */ |
|
--button-secondary-hover: #9a7a8a; /* Even lighter for hover */ |
|
--input-bg: var(--lavender-blush); |
|
--input-border: var(--border-color); |
|
--input-focus: var(--royal-plum); |
|
--input-placeholder: #b0b0b0; /* Lighter gray for better contrast on dark bg */ |
|
--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 */ |
|
--shadow-color: rgba(0, 0, 0, 0.3); /* Shadow for dark theme */ |
|
--shadow-color-light: rgba(0, 0, 0, 0.2); /* Lighter shadow for dark theme */ |
|
--focus-ring: rgba(123, 30, 109, 0.15); /* Focus ring for dark theme */ |
|
} |
|
|
|
/* GitRepublic Black Theme - GitHub-style all black */ |
|
[data-theme="black"] { |
|
/* Black theme colors - GitHub-inspired with burgundy/red accent */ |
|
--royal-plum: #C41E3A; /* Crimson/burgundy red */ |
|
--snow: #0d1117; /* GitHub's black background */ |
|
--lavender-blush: #161b22; /* GitHub's slightly lighter black */ |
|
--thistle: #21262d; /* GitHub's border color */ |
|
--lilac: #30363d; /* GitHub's hover color */ |
|
|
|
/* Black theme semantic colors */ |
|
--bg-primary: #0d1117; /* Pure black background */ |
|
--bg-secondary: #161b22; /* Slightly lighter for cards */ |
|
--bg-tertiary: #21262d; /* Even lighter for nested elements */ |
|
--text-primary: #f0f6fc; /* GitHub's primary text color */ |
|
--text-secondary: #c9d1d9; /* GitHub's secondary text color */ |
|
--text-muted: #8b949e; /* GitHub's muted text color */ |
|
--border-color: #30363d; /* GitHub's border color */ |
|
--border-light: #21262d; /* Lighter border */ |
|
--accent: var(--royal-plum); /* Crimson red */ |
|
--accent-hover: #DC143C; /* Brighter crimson for hover */ |
|
--accent-light: #8B4A5A; /* Lighter burgundy */ |
|
--accent-text: #ffffff; |
|
--link-color: #FF6B6B; /* Light red for links */ |
|
--link-hover: #FF8E8E; /* Brighter red for link hover */ |
|
--card-bg: #161b22; /* GitHub's card background */ |
|
--card-border: #30363d; /* GitHub's card border */ |
|
--button-primary: var(--royal-plum); /* Crimson red */ |
|
--button-primary-hover: #DC143C; /* Brighter crimson */ |
|
--button-secondary: #30363d; /* GitHub's secondary button - lighter for contrast */ |
|
--button-secondary-hover: #484f58; /* GitHub's secondary button hover - even lighter */ |
|
--input-bg: #0d1117; /* GitHub's input background */ |
|
--input-border: #30363d; /* GitHub's input border */ |
|
--input-focus: var(--royal-plum); /* Crimson red for focus */ |
|
--input-placeholder: #6e7681; /* GitHub's placeholder color */ |
|
--error-bg: #3d1f1f; |
|
--error-text: #f85149; /* GitHub's error color */ |
|
--success-bg: #1a3a2a; |
|
--success-text: #3fb950; /* GitHub's success color */ |
|
--warning-bg: #3d2f1f; |
|
--warning-text: #d29922; /* GitHub's warning color */ |
|
--shadow-color: rgba(0, 0, 0, 0.4); /* Shadow for black theme */ |
|
--shadow-color-light: rgba(0, 0, 0, 0.3); /* Lighter shadow for black theme */ |
|
--focus-ring: rgba(196, 30, 58, 0.15); /* Focus ring for black theme (crimson) */ |
|
} |
|
|
|
/* 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; |
|
min-height: auto; |
|
overflow: visible; |
|
} |
|
|
|
/* Ensure forms are fully visible on mobile */ |
|
.container main, |
|
.container-narrow main, |
|
.container-wide main { |
|
min-height: auto; |
|
overflow: visible; |
|
} |
|
|
|
/* Ensure body/html allow scrolling on mobile */ |
|
/* Remove height constraints to allow full content scrolling */ |
|
html { |
|
height: auto; |
|
min-height: 100%; |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
} |
|
|
|
body { |
|
height: auto; |
|
min-height: 100%; |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
/* Ensure body can grow beyond viewport for proper scrolling */ |
|
position: relative; |
|
} |
|
|
|
/* Ensure container and main elements don't constrain height on mobile */ |
|
.container, |
|
.container-narrow, |
|
.container-wide { |
|
min-height: auto; |
|
height: auto; |
|
padding-bottom: 2rem; /* Add bottom padding so content isn't cut off */ |
|
} |
|
|
|
.container main, |
|
.container-narrow main, |
|
.container-wide main { |
|
min-height: auto; |
|
height: auto; |
|
overflow: visible; |
|
padding-bottom: 1rem; /* Add bottom padding */ |
|
} |
|
|
|
/* Repo cards - make more responsive on mobile */ |
|
.repo-header { |
|
flex-direction: column; |
|
align-items: stretch; |
|
gap: 1rem; |
|
} |
|
|
|
.repo-header-text { |
|
flex: 1; |
|
min-width: 0; /* Allow text to shrink */ |
|
width: 100%; |
|
max-width: 100%; |
|
} |
|
|
|
.repo-header-text h3 { |
|
margin: 0 0 0.5rem 0; |
|
word-wrap: break-word; |
|
overflow-wrap: break-word; |
|
} |
|
|
|
.repo-header-text .description { |
|
width: 100%; |
|
max-width: 100%; |
|
margin: 0.5rem 0; |
|
line-height: 1.5; |
|
word-wrap: break-word; |
|
overflow-wrap: break-word; |
|
} |
|
|
|
.repo-card-image { |
|
align-self: flex-start; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.register-button { |
|
align-self: flex-start; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.repo-actions { |
|
flex-direction: column; |
|
align-items: stretch; |
|
width: 100%; |
|
} |
|
|
|
.repo-actions .register-button, |
|
.repo-actions .delete-button { |
|
width: 100%; |
|
text-align: center; |
|
} |
|
|
|
.repo-card-content { |
|
padding: 1rem; |
|
} |
|
|
|
.clone-urls { |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
.clone-urls code { |
|
word-break: break-all; |
|
display: block; |
|
} |
|
} |
|
|
|
/* 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, .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: var(--accent-text, #ffffff); /* Use theme-aware text color */ |
|
border: none; |
|
} |
|
|
|
.btn-primary:hover:not(:disabled), .login-button:hover:not(:disabled), .save-button:hover:not(:disabled), .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: var(--accent-text, #ffffff); /* Use theme-aware text color */ |
|
} |
|
|
|
.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: #ffffff; /* Always white on error background for maximum contrast */ |
|
} |
|
|
|
.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; |
|
} |
|
|
|
/* Placeholder styling with proper contrast for all themes */ |
|
input::placeholder, |
|
textarea::placeholder { |
|
color: var(--input-placeholder, var(--text-muted)); |
|
opacity: 1; /* Ensure full opacity for better contrast */ |
|
} |
|
|
|
input:focus, textarea:focus, select:focus { |
|
outline: none; |
|
border-color: var(--input-focus); |
|
} |
|
|
|
input:disabled, textarea:disabled, select:disabled { |
|
background: var(--bg-secondary); |
|
color: var(--text-muted); |
|
cursor: not-allowed; |
|
opacity: 0.7; |
|
} |
|
|
|
input:disabled::placeholder, |
|
textarea:disabled::placeholder { |
|
color: var(--text-muted); |
|
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 var(--shadow-color); |
|
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: var(--accent-text, #ffffff); /* Use theme-aware text color */ |
|
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; |
|
} |
|
|
|
/* Make icon images theme-aware using filters */ |
|
/* Target both img inside .icon and img with icon classes */ |
|
img.icon, |
|
.icon img, |
|
img.icon-small, |
|
.icon-small img, |
|
img.icon-inline, |
|
.icon-inline img, |
|
.hamburger-icon img, |
|
.platform-icon img, |
|
.repo-badge-icon img, |
|
.btn-icon img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* Default white for dark themes */ |
|
opacity: 1 !important; |
|
transition: filter 0.3s ease, opacity 0.3s ease; |
|
} |
|
|
|
/* Light theme: icons should be dark (black) */ |
|
[data-theme="light"] img.icon, |
|
[data-theme="light"] .icon img, |
|
[data-theme="light"] img.icon-small, |
|
[data-theme="light"] .icon-small img, |
|
[data-theme="light"] img.icon-inline, |
|
[data-theme="light"] .icon-inline img, |
|
[data-theme="light"] .hamburger-icon img, |
|
[data-theme="light"] .platform-icon img, |
|
[data-theme="light"] .repo-badge-icon img, |
|
[data-theme="light"] .btn-icon img { |
|
filter: brightness(0) saturate(100%) !important; /* Black in light theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Dark theme (Purple): icons should be light (white/light gray) */ |
|
[data-theme="dark"] img.icon, |
|
[data-theme="dark"] .icon img, |
|
[data-theme="dark"] img.icon-small, |
|
[data-theme="dark"] .icon-small img, |
|
[data-theme="dark"] img.icon-inline, |
|
[data-theme="dark"] .icon-inline img, |
|
[data-theme="dark"] .hamburger-icon img, |
|
[data-theme="dark"] .platform-icon img, |
|
[data-theme="dark"] .repo-badge-icon img, |
|
[data-theme="dark"] .btn-icon img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* White in dark/purple theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Black theme: icons should be light (white/light gray) */ |
|
[data-theme="black"] img.icon, |
|
[data-theme="black"] .icon img, |
|
[data-theme="black"] img.icon-small, |
|
[data-theme="black"] .icon-small img, |
|
[data-theme="black"] img.icon-inline, |
|
[data-theme="black"] .icon-inline img, |
|
[data-theme="black"] .hamburger-icon img, |
|
[data-theme="black"] .platform-icon img, |
|
[data-theme="black"] .repo-badge-icon img, |
|
[data-theme="black"] .btn-icon img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* White in black theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Theme icons - handled separately for better control */ |
|
.theme-icon img:not(.theme-toggle .theme-icon img), |
|
.theme-icon-option img:not(.theme-option .theme-icon-option img) { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* Default white for dark backgrounds */ |
|
opacity: 1 !important; |
|
transition: filter 0.3s ease, opacity 0.3s ease; |
|
} |
|
|
|
/* Light theme: theme icons should be dark */ |
|
[data-theme="light"] .theme-icon img:not(.theme-toggle .theme-icon img), |
|
[data-theme="light"] .theme-icon-option img:not(.theme-option .theme-icon-option img) { |
|
filter: brightness(0) saturate(100%) !important; /* Black in light theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
/* Ensure icons in buttons and interactive elements have proper contrast */ |
|
button img.icon, |
|
button .icon img, |
|
button img.icon-inline, |
|
button .icon-inline img, |
|
button img.icon-small, |
|
button .icon-small img, |
|
.button img.icon, |
|
.button .icon img, |
|
.button img.icon-inline, |
|
.button .icon-inline img, |
|
.button img.icon-small, |
|
.button .icon-small img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* Default white for dark themes */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Light theme: button icons should be dark */ |
|
[data-theme="light"] button img.icon, |
|
[data-theme="light"] button .icon img, |
|
[data-theme="light"] button img.icon-inline, |
|
[data-theme="light"] button .icon-inline img, |
|
[data-theme="light"] button img.icon-small, |
|
[data-theme="light"] button .icon-small img, |
|
[data-theme="light"] .button img.icon, |
|
[data-theme="light"] .button .icon img, |
|
[data-theme="light"] .button img.icon-inline, |
|
[data-theme="light"] .button .icon-inline img, |
|
[data-theme="light"] .button img.icon-small, |
|
[data-theme="light"] .button .icon-small img { |
|
filter: brightness(0) saturate(100%) !important; /* Black in light theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Dark theme (Purple): button icons should be light */ |
|
[data-theme="dark"] button img.icon, |
|
[data-theme="dark"] button .icon img, |
|
[data-theme="dark"] button img.icon-inline, |
|
[data-theme="dark"] button .icon-inline img, |
|
[data-theme="dark"] button img.icon-small, |
|
[data-theme="dark"] button .icon-small img, |
|
[data-theme="dark"] .button img.icon, |
|
[data-theme="dark"] .button .icon img, |
|
[data-theme="dark"] .button img.icon-inline, |
|
[data-theme="dark"] .button .icon-inline img, |
|
[data-theme="dark"] .button img.icon-small, |
|
[data-theme="dark"] .button .icon-small img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* White in dark/purple theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Black theme: button icons should be light */ |
|
[data-theme="black"] button img.icon, |
|
[data-theme="black"] button .icon img, |
|
[data-theme="black"] button img.icon-inline, |
|
[data-theme="black"] button .icon-inline img, |
|
[data-theme="black"] button img.icon-small, |
|
[data-theme="black"] button .icon-small img, |
|
[data-theme="black"] .button img.icon, |
|
[data-theme="black"] .button .icon img, |
|
[data-theme="black"] .button img.icon-inline, |
|
[data-theme="black"] .button .icon-inline img, |
|
[data-theme="black"] .button img.icon-small, |
|
[data-theme="black"] .button .icon-small img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* White in black theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Icons on accent backgrounds should be white */ |
|
button[class*="primary"] .icon-inline img, |
|
button[class*="primary"] .icon-small img, |
|
.button[class*="primary"] .icon-inline img, |
|
.button[class*="primary"] .icon-small img, |
|
.theme-toggle:hover .theme-icon img { |
|
filter: brightness(0) saturate(100%) invert(1) !important; |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Theme toggle icons - ensure high contrast with maximum specificity */ |
|
button.theme-toggle img.theme-icon, |
|
.theme-toggle img.theme-icon, |
|
button.theme-option img.theme-icon-option, |
|
.theme-option img.theme-icon-option { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* Default to white for dark backgrounds */ |
|
opacity: 1 !important; |
|
transition: filter 0.3s ease, opacity 0.3s ease; |
|
} |
|
|
|
/* Light theme: pure black */ |
|
:root button.theme-toggle img.theme-icon, |
|
:root .theme-toggle img.theme-icon, |
|
[data-theme="light"] button.theme-toggle img.theme-icon, |
|
[data-theme="light"] .theme-toggle img.theme-icon, |
|
:root button.theme-option img.theme-icon-option, |
|
:root .theme-option img.theme-icon-option, |
|
[data-theme="light"] button.theme-option img.theme-icon-option, |
|
[data-theme="light"] .theme-option img.theme-icon-option { |
|
filter: brightness(0) saturate(100%) !important; /* Pure black in light theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Dark themes: pure white */ |
|
[data-theme="dark"] button.theme-toggle img.theme-icon, |
|
[data-theme="dark"] .theme-toggle img.theme-icon, |
|
[data-theme="black"] button.theme-toggle img.theme-icon, |
|
[data-theme="black"] .theme-toggle img.theme-icon, |
|
[data-theme="dark"] button.theme-option img.theme-icon-option, |
|
[data-theme="dark"] .theme-option img.theme-icon-option, |
|
[data-theme="black"] button.theme-option img.theme-icon-option, |
|
[data-theme="black"] .theme-option img.theme-icon-option { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* Pure white in dark themes */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Hover state: always white for maximum visibility */ |
|
button.theme-toggle:hover img.theme-icon, |
|
.theme-toggle:hover img.theme-icon { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* White on hover for visibility */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Light theme hover: keep black */ |
|
[data-theme="light"] button.theme-toggle:hover img.theme-icon, |
|
[data-theme="light"] .theme-toggle:hover img.theme-icon { |
|
filter: brightness(0) saturate(100%) !important; /* Black in light theme on hover */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Dropdown option icons - always visible */ |
|
button.theme-option:hover img.theme-icon-option, |
|
.theme-option:hover img.theme-icon-option, |
|
button.theme-option.active img.theme-icon-option, |
|
.theme-option.active img.theme-icon-option { |
|
filter: brightness(0) saturate(100%) invert(1) !important; /* White for visibility */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Light theme: dropdown icons should be black */ |
|
[data-theme="light"] button.theme-option:hover img.theme-icon-option, |
|
[data-theme="light"] .theme-option:hover img.theme-icon-option, |
|
[data-theme="light"] button.theme-option.active img.theme-icon-option, |
|
[data-theme="light"] .theme-option.active img.theme-icon-option { |
|
filter: brightness(0) saturate(100%) !important; /* Black in light theme */ |
|
opacity: 1 !important; |
|
} |
|
|
|
/* Verification badge icons - maintain color while ensuring visibility */ |
|
.verification-badge .icon-inline img { |
|
filter: var(--icon-filter, brightness(0) saturate(100%) invert(var(--icon-invert, 0))); |
|
} |
|
|
|
/* Verified badge: green checkmark - adjust based on theme */ |
|
[data-theme="light"] .verification-badge.verified .icon-inline img { |
|
filter: brightness(0) saturate(100%) invert(0.4) sepia(1) saturate(3) hue-rotate(90deg); |
|
} |
|
|
|
[data-theme="dark"] .verification-badge.verified .icon-inline img, |
|
[data-theme="black"] .verification-badge.verified .icon-inline img { |
|
filter: brightness(0) saturate(100%) invert(0.6) sepia(1) saturate(3) hue-rotate(90deg); |
|
} |
|
|
|
[data-theme="dark"] .verification-badge.unverified .icon-inline img, |
|
[data-theme="black"] .verification-badge.unverified .icon-inline img { |
|
filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(5) hue-rotate(0deg); |
|
} |
|
|
|
[data-theme="light"] .verification-badge.unverified .icon-inline img { |
|
filter: brightness(0) saturate(100%) invert(0.2) sepia(1) saturate(3) hue-rotate(0deg); |
|
} |
|
|
|
/* Alert triangle icons in verification badges - ensure visibility on dark backgrounds */ |
|
.verification-badge.unverified img[src*="alert-triangle.svg"].icon-inline, |
|
.verification-badge.unverified .icon-inline img[src*="alert-triangle.svg"] { |
|
filter: brightness(0) saturate(100%) invert(1) sepia(1) saturate(5) hue-rotate(0deg); |
|
} |
|
|
|
[data-theme="light"] .verification-badge.unverified img[src*="alert-triangle.svg"].icon-inline, |
|
[data-theme="light"] .verification-badge.unverified .icon-inline img[src*="alert-triangle.svg"] { |
|
filter: brightness(0) saturate(100%) invert(0.2) sepia(1) saturate(3) hue-rotate(0deg); |
|
} |
|
|
|
.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 */ |
|
/* My Repositories Section */ |
|
.my-repos-section { |
|
margin-bottom: 2rem; |
|
padding: 1.5rem; |
|
background: var(--bg-secondary); |
|
border: 1px solid var(--border-color); |
|
border-radius: 0.5rem; |
|
} |
|
|
|
.my-repos-section h3 { |
|
margin: 0 0 1rem 0; |
|
font-size: 1.25rem; |
|
color: var(--text-primary); |
|
font-weight: 600; |
|
} |
|
|
|
.my-repos-badges { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 0.75rem; |
|
} |
|
|
|
.repo-badge { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
padding: 0.5rem 0.75rem; |
|
background: var(--card-bg); |
|
border: 1px solid var(--border-color); |
|
border-radius: 0.375rem; |
|
text-decoration: none; |
|
color: var(--text-primary); |
|
transition: all 0.2s ease; |
|
font-size: 0.9rem; |
|
/* Ensure good contrast in all themes */ |
|
min-height: 2.5rem; |
|
} |
|
|
|
.repo-badge:hover { |
|
background: var(--bg-secondary); |
|
border-color: var(--accent); |
|
box-shadow: 0 2px 4px var(--shadow-color-light); |
|
font-size: 0.9rem; /* Preserve font size on hover */ |
|
color: var(--text-primary); |
|
} |
|
|
|
.repo-badge-image { |
|
width: 24px; |
|
height: 24px; |
|
object-fit: cover; |
|
border-radius: 50%; |
|
flex-shrink: 0; |
|
/* Ensure image is visible in all themes */ |
|
border: 1px solid var(--border-color); |
|
background: var(--bg-secondary); |
|
} |
|
|
|
.repo-badge-icon { |
|
width: 24px; |
|
height: 24px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex-shrink: 0; |
|
/* Ensure icon is visible in all themes */ |
|
color: var(--text-primary); |
|
} |
|
|
|
.repo-badge-icon svg { |
|
width: 100%; |
|
height: 100%; |
|
stroke: var(--text-primary); |
|
fill: none; |
|
} |
|
|
|
.repo-badge-icon img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: contain; |
|
filter: var(--icon-filter, none); |
|
} |
|
|
|
.repo-badge-name { |
|
font-weight: 500; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
max-width: 200px; |
|
color: var(--text-primary); |
|
/* Ensure text is readable */ |
|
line-height: 1.4; |
|
} |
|
|
|
.repo-badge.transferred { |
|
opacity: 0.6; |
|
filter: grayscale(0.5); |
|
position: relative; |
|
} |
|
|
|
.repo-badge.transferred:hover { |
|
opacity: 0.8; |
|
filter: grayscale(0.3); |
|
} |
|
|
|
.transferred-badge { |
|
font-size: 0.8rem; |
|
color: var(--text-secondary); |
|
margin-left: 0.25rem; |
|
opacity: 0.7; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.my-repos-section { |
|
padding: 1rem; |
|
} |
|
|
|
.my-repos-badges { |
|
gap: 0.5rem; |
|
} |
|
|
|
.repo-badge { |
|
padding: 0.4rem 0.6rem; |
|
font-size: 0.85rem; |
|
} |
|
|
|
.repo-badge:hover { |
|
font-size: 0.85rem; /* Preserve font size on hover for mobile */ |
|
} |
|
|
|
.repo-badge-name { |
|
max-width: 150px; |
|
} |
|
} |
|
|
|
.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 var(--shadow-color-light); |
|
} |
|
|
|
.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: 50%; |
|
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 var(--shadow-color-light); |
|
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(--accent); /* Use accent color for better contrast on light background */ |
|
font-weight: 600; |
|
} |
|
|
|
.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 button - ensure it uses primary button style */ |
|
.fork-button { |
|
background: var(--button-primary); |
|
color: var(--accent-text, #ffffff); |
|
border: none; |
|
padding: 0.5rem 1rem; |
|
border-radius: 0.375rem; |
|
font-size: 0.875rem; |
|
font-weight: 500; |
|
cursor: pointer; |
|
transition: background 0.2s ease; |
|
font-family: 'IBM Plex Serif', serif; |
|
} |
|
|
|
.fork-button:hover:not(:disabled) { |
|
background: var(--button-primary-hover); |
|
} |
|
|
|
.fork-button:disabled { |
|
opacity: 0.6; |
|
cursor: not-allowed; |
|
} |
|
|
|
[data-theme="dark"] .fork-button { |
|
background: var(--button-primary); |
|
color: #ffffff; |
|
} |
|
|
|
.fork-badge { |
|
padding: 0.25rem 0.5rem; |
|
background: var(--accent); |
|
color: var(--accent-text, #ffffff); |
|
border-radius: 4px; |
|
font-size: 0.85rem; |
|
margin-left: 0.5rem; |
|
font-weight: 500; |
|
} |
|
|
|
[data-theme="dark"] .fork-badge { |
|
background: var(--accent); |
|
color: #ffffff; |
|
} |
|
|
|
.fork-badge a { |
|
color: var(--accent-text, #ffffff); |
|
text-decoration: none; |
|
font-weight: 500; |
|
} |
|
|
|
[data-theme="dark"] .fork-badge a { |
|
color: #ffffff; |
|
} |
|
|
|
.fork-badge a:hover { |
|
text-decoration: underline; |
|
opacity: 0.9; |
|
} |
|
|
|
.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); |
|
} |
|
|
|
/* Unified code styling - all code uses highlight.js standard theme with dark-gray background */ |
|
|
|
/* Inline code - matches highlight.js theme */ |
|
code:not(pre code) { |
|
background: #1e1e1e !important; |
|
color: #d4d4d4 !important; |
|
padding: 0.125rem 0.25rem; |
|
border-radius: 0.25rem; |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.875em; |
|
border: 1px solid #3a3a3a; |
|
} |
|
|
|
/* Pre wrappers are transparent - only code.hljs has styling */ |
|
pre { |
|
margin: 0; |
|
padding: 0; |
|
background: transparent; |
|
border: none; |
|
overflow: visible; |
|
} |
|
|
|
/* Code blocks - highlight.js handles everything */ |
|
pre code.hljs { |
|
display: block; |
|
width: 100%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.clone-urls { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.clone-urls code { |
|
display: block; |
|
background: #1e1e1e !important; /* Dark-gray background - theme independent */ |
|
color: #d4d4d4 !important; /* Light gray text - theme independent */ |
|
padding: 0.5rem; |
|
border-radius: 0.25rem; |
|
margin: 0.25rem 0; |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.875rem; |
|
border: 1px solid #3a3a3a; |
|
word-break: break-all; |
|
overflow-wrap: break-word; |
|
} |
|
|
|
/* 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 var(--shadow-color-light); |
|
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(--input-focus); |
|
/* Use theme-aware focus ring - will be crimson in black theme, purple in others */ |
|
} |
|
|
|
/* Theme-specific focus rings */ |
|
[data-theme="black"] .search-bar-container .search-input:focus, |
|
[data-theme="dark"] .search-bar-container .search-input:focus, |
|
[data-theme="light"] .search-bar-container .search-input:focus { |
|
box-shadow: 0 0 0 3px var(--focus-ring); |
|
} |
|
|
|
.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); |
|
} |
|
|
|
/* 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); |
|
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: 1px solid var(--accent); |
|
padding: 0.5rem 1rem; |
|
border-radius: 0.375rem; |
|
font-size: 0.875rem; |
|
font-weight: 500; |
|
cursor: pointer; |
|
transition: all 0.2s ease; |
|
text-decoration: none; |
|
display: inline-block; |
|
} |
|
|
|
.register-button:hover { |
|
opacity: 0.9; |
|
transform: translateY(-1px); |
|
box-shadow: 0 2px 4px var(--shadow-color-light); |
|
} |
|
|
|
.repo-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
margin-bottom: 0.5rem; |
|
gap: 1rem; |
|
} |
|
|
|
.repo-header-text { |
|
flex: 1; |
|
min-width: 0; /* Allow text to shrink and wrap */ |
|
} |
|
|
|
.repo-header-text .description { |
|
max-width: 100%; |
|
word-wrap: break-word; |
|
overflow-wrap: break-word; |
|
} |
|
|
|
.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 - unified code block styling - theme independent */ |
|
.hljs { |
|
display: block; |
|
background: #1e1e1e !important; |
|
color: #d4d4d4 !important; |
|
border: 1px solid #3a3a3a !important; |
|
border-radius: 4px !important; |
|
padding: 1rem !important; |
|
overflow-x: auto; |
|
margin: 0; |
|
font-family: 'IBM Plex Mono', monospace; |
|
font-size: 0.875rem; |
|
line-height: 1.5; |
|
} |
|
|
|
/* Syntax highlighting colors - high contrast for dark-gray background - theme independent */ |
|
.hljs-comment, |
|
.hljs-quote { |
|
color: #6a9955 !important; /* Green comments - good contrast */ |
|
font-style: italic; |
|
} |
|
|
|
.hljs-keyword, |
|
.hljs-selector-tag, |
|
.hljs-subst { |
|
color: #c586c0 !important; /* Purple/magenta keywords - good contrast */ |
|
font-weight: 500; |
|
} |
|
|
|
.hljs-number, |
|
.hljs-literal { |
|
color: #b5cea8 !important; /* Light green numbers - good contrast */ |
|
font-weight: 500; |
|
} |
|
|
|
.hljs-variable, |
|
.hljs-template-variable, |
|
.hljs-tag .hljs-attr { |
|
color: #9cdcfe !important; /* Light blue variables - good contrast */ |
|
} |
|
|
|
.hljs-string, |
|
.hljs-doctag { |
|
color: #ce9178 !important; /* Orange strings - good contrast */ |
|
} |
|
|
|
.hljs-title, |
|
.hljs-section, |
|
.hljs-selector-id { |
|
color: #dcdcaa !important; /* Yellow titles - good contrast */ |
|
font-weight: 600; |
|
} |
|
|
|
.hljs-type, |
|
.hljs-class .hljs-title { |
|
color: #4ec9b0 !important; /* Cyan types - good contrast */ |
|
font-weight: 500; |
|
} |
|
|
|
.hljs-tag, |
|
.hljs-name, |
|
.hljs-attribute { |
|
color: #569cd6 !important; /* Blue tags - good contrast */ |
|
} |
|
|
|
.hljs-regexp, |
|
.hljs-link { |
|
color: #d16969 !important; /* Red regexp - good contrast */ |
|
} |
|
|
|
.hljs-symbol, |
|
.hljs-bullet { |
|
color: #dcdcaa !important; /* Yellow symbols - good contrast */ |
|
} |
|
|
|
.hljs-built_in, |
|
.hljs-builtin-name { |
|
color: #4ec9b0 !important; /* Cyan built-ins - good contrast */ |
|
} |
|
|
|
.hljs-meta { |
|
color: #808080 !important; /* Gray meta - good contrast */ |
|
} |
|
|
|
.hljs-deletion { |
|
background: #4a1f1f !important; /* Dark red background */ |
|
color: #ff8a8a !important; /* Light red text */ |
|
} |
|
|
|
.hljs-addition { |
|
background: #1a3a2a !important; /* Dark green background */ |
|
color: #6aff9a !important; /* 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 */ |
|
|
|
/* Swagger UI: Make response body backgrounds darker in light mode for better contrast */ |
|
/* This ensures light green/blue/yellow syntax highlighting is readable */ |
|
html[data-theme="light"] .swagger-ui .response pre, |
|
html[data-theme="light"] .swagger-ui .response .highlight-code, |
|
html[data-theme="light"] .swagger-ui .response .highlight-code pre, |
|
html[data-theme="light"] .swagger-ui .response-body pre, |
|
html[data-theme="light"] .swagger-ui .response-body .highlight-code, |
|
html[data-theme="light"] .swagger-ui .response-body .highlight-code pre, |
|
html[data-theme="light"] .swagger-ui .responses-wrapper pre, |
|
html[data-theme="light"] .swagger-ui .responses-wrapper .highlight-code, |
|
html[data-theme="light"] .swagger-ui .responses-wrapper .highlight-code pre, |
|
html[data-theme="light"] .swagger-ui .responses-inner pre, |
|
html[data-theme="light"] .swagger-ui .responses-inner .highlight-code, |
|
html[data-theme="light"] .swagger-ui .responses-inner .highlight-code pre, |
|
html[data-theme="light"] .swagger-ui .response pre.microlight, |
|
html[data-theme="light"] .swagger-ui .response-body pre.microlight, |
|
html[data-theme="light"] .swagger-ui .responses-wrapper pre.microlight { |
|
background: #0f172a !important; /* Darker slate background for light mode (slate-900) */ |
|
color: #e2e8f0 !important; /* Light text for dark background */ |
|
} |
|
|
|
/* Fix scrolling issue on signup page - ensure page can scroll to bottom */ |
|
/* Override any height constraints that might prevent scrolling */ |
|
/* Apply to all screen sizes, not just mobile */ |
|
html { |
|
overflow-y: auto !important; |
|
height: auto !important; |
|
min-height: 100%; |
|
} |
|
|
|
body { |
|
overflow-y: auto !important; |
|
height: auto !important; |
|
min-height: 100vh; |
|
position: relative; |
|
} |
|
|
|
/* Ensure container allows full scrolling on all pages */ |
|
.container, |
|
.container-narrow, |
|
.container-wide { |
|
min-height: auto !important; |
|
height: auto !important; |
|
max-height: none !important; |
|
overflow: visible !important; |
|
padding-bottom: 3rem; /* Extra padding at bottom to ensure content is accessible */ |
|
} |
|
|
|
.container main, |
|
.container-narrow main, |
|
.container-wide main { |
|
min-height: auto !important; |
|
height: auto !important; |
|
max-height: none !important; |
|
overflow: visible !important; |
|
padding-bottom: 2rem; |
|
}
|
|
|