andrew
17c0174e7d
Add a new white SVG logo asset and wire it into the welcome and sidebar views; overhaul theme and component styles for a cleaner, modern dark theme. Changes include: - Added frontend/assets/logos/Gitpub-Word-Logo-2-White.svg and referenced it in frontend/js/app.js (welcome and sidebar). - Updated CSS variables and base styles in frontend/css/base.css: adjusted colors, radii, shadow, typography, input focus, button spacing and variants (primary, primary-blue, danger), and transitions. - Refined component styles in frontend/css/components.css: updated panel/sidebar backgrounds, paddings, repo-card sizing and hover, tab and pill behaviors, spacing, logo/sidebar-brand classes, git output font stack, and various UI polish tweaks (font sizes, weights, paddings, and responsive adjustments). These changes standardize the dark theme, introduce visual improvements and spacing refinements, and add branding to the UI.
429 lines
7.2 KiB
CSS
429 lines
7.2 KiB
CSS
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 260px 1fr 320px;
|
|
width: 100%;
|
|
height: 100%;
|
|
gap: 0;
|
|
}
|
|
|
|
.sidebar,
|
|
.rightbar {
|
|
background: var(--bg-panel);
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.sidebar {
|
|
padding: 16px 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.rightbar {
|
|
border-right: 0;
|
|
border-left: 1px solid var(--border);
|
|
padding: 0 12px 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.main {
|
|
padding: 16px;
|
|
overflow: auto;
|
|
background: var(--bg-app);
|
|
}
|
|
|
|
.panel {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--bg-panel);
|
|
box-shadow: var(--shadow);
|
|
padding: 16px;
|
|
}
|
|
|
|
.stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.row.wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.row.end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.server-chip,
|
|
.repo-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px;
|
|
background: var(--bg-panel);
|
|
transition: border-color 0.1s ease;
|
|
}
|
|
|
|
.repo-card:hover {
|
|
border-color: #8b949e;
|
|
}
|
|
|
|
.repo-grid {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
}
|
|
|
|
.repo-filter-pills {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pill-btn {
|
|
padding: 4px 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
|
}
|
|
|
|
.pill-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-main);
|
|
border-color: #8b949e;
|
|
}
|
|
|
|
.pill-btn.active {
|
|
background: var(--accent-strong);
|
|
border-color: rgba(240, 246, 252, 0.1);
|
|
color: #fff;
|
|
}
|
|
|
|
.org-group {
|
|
gap: 8px;
|
|
}
|
|
|
|
.org-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.org-badge {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
background: var(--bg-panel-alt);
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
padding: 1px 10px;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.app-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.list {
|
|
margin: 0;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.welcome-wrap {
|
|
min-height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 32px 24px;
|
|
background: var(--bg-app);
|
|
}
|
|
|
|
.welcome-card {
|
|
width: min(680px, 100%);
|
|
}
|
|
|
|
.welcome-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.welcome-logo-img {
|
|
height: 36px;
|
|
width: auto;
|
|
}
|
|
|
|
.welcome-logo-desktop {
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.status-ok {
|
|
color: var(--success);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-error {
|
|
color: var(--danger);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── Tabs ─────────────────────────────────────────── */
|
|
.tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tab-btn {
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: 0;
|
|
padding: 10px 16px;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: color 0.1s ease, border-color 0.1s ease;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
background: transparent;
|
|
color: var(--text-main);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
color: var(--text-main);
|
|
border-bottom-color: #f78166;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.tab-search {
|
|
width: 200px !important;
|
|
padding: 5px 10px !important;
|
|
font-size: 13px;
|
|
margin: 4px 8px 4px 0;
|
|
}
|
|
|
|
.main-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.right-tabs {
|
|
position: sticky;
|
|
top: 0;
|
|
margin: 0 -12px;
|
|
padding: 0 12px;
|
|
background: var(--bg-panel);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ── Sidebar ──────────────────────────────────────── */
|
|
.sidebar-brand {
|
|
padding: 4px 0 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sidebar-brand .title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sidebar-logo-img {
|
|
height: 22px;
|
|
width: auto;
|
|
}
|
|
|
|
.sidebar-logo-desktop {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sidebar .server-chip {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar .server-chip > div {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.sidebar-btn {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
padding: 5px 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-recents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.recent-item {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
padding: 4px 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.recent-item:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ── Git output ───────────────────────────────────── */
|
|
.git-output {
|
|
background: #010409;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px 14px;
|
|
font-size: 12px;
|
|
font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
|
|
color: var(--success);
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.git-output-placeholder {
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
.commit-note {
|
|
font-size: 11px;
|
|
margin-top: 4px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Local repo indicator ─────────────────────────── */
|
|
.selected-repo {
|
|
font-size: 13px;
|
|
padding: 6px 10px;
|
|
background: rgba(47, 129, 247, 0.06);
|
|
border: 1px solid rgba(47, 129, 247, 0.2);
|
|
border-radius: var(--radius-md);
|
|
word-break: break-all;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Empty state ──────────────────────────────────── */
|
|
.empty-state {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: 48px 16px;
|
|
}
|
|
|
|
.empty-state > div:first-child {
|
|
font-size: 15px;
|
|
color: var(--text-main);
|
|
margin-bottom: 6px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── Repo card details ────────────────────────────── */
|
|
.repo-card strong {
|
|
color: var(--accent);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.repo-card strong:hover {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ── Responsive ───────────────────────────────────── */
|
|
@media (max-width: 1180px) {
|
|
.layout {
|
|
grid-template-columns: 220px 1fr;
|
|
}
|
|
|
|
.rightbar {
|
|
display: none;
|
|
}
|
|
}
|