Add white logo and revamp UI styles
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.
This commit is contained in:
+114
-42
@@ -13,12 +13,12 @@
|
||||
|
||||
.sidebar,
|
||||
.rightbar {
|
||||
background: rgba(13, 21, 34, 0.88);
|
||||
background: var(--bg-panel);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 16px;
|
||||
padding: 16px 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -29,18 +29,18 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
background: var(--bg-app);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 26, 41, 0.92);
|
||||
background: var(--bg-panel);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stack {
|
||||
@@ -66,14 +66,19 @@
|
||||
.repo-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px;
|
||||
background: rgba(23, 34, 53, 0.75);
|
||||
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(250px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.repo-filter-pills {
|
||||
@@ -90,17 +95,18 @@
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.pill-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-main);
|
||||
border-color: #8b949e;
|
||||
}
|
||||
|
||||
.pill-btn.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-strong);
|
||||
border-color: rgba(240, 246, 252, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -115,13 +121,13 @@
|
||||
}
|
||||
|
||||
.org-badge {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-panel-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
@@ -132,16 +138,19 @@
|
||||
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: 13px;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -171,28 +180,50 @@
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
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: 2px;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 4px;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -201,24 +232,24 @@
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
padding: 10px 14px;
|
||||
padding: 10px 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
transition: color 0.1s ease, border-color 0.1s ease;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
transform: none;
|
||||
background: transparent;
|
||||
color: var(--text-main);
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--text-main);
|
||||
border-bottom-color: var(--accent);
|
||||
border-bottom-color: #f78166;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-spacer {
|
||||
@@ -226,10 +257,10 @@
|
||||
}
|
||||
|
||||
.tab-search {
|
||||
width: 180px !important;
|
||||
padding: 6px 10px !important;
|
||||
width: 200px !important;
|
||||
padding: 5px 10px !important;
|
||||
font-size: 13px;
|
||||
margin: 4px 4px 4px 0;
|
||||
margin: 4px 8px 4px 0;
|
||||
}
|
||||
|
||||
.main-tabs {
|
||||
@@ -241,13 +272,39 @@
|
||||
top: 0;
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px;
|
||||
background: rgba(13, 21, 34, 0.96);
|
||||
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: 16px;
|
||||
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 {
|
||||
@@ -267,8 +324,8 @@
|
||||
|
||||
.sidebar-btn {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
padding: 7px 8px;
|
||||
font-size: 13px;
|
||||
padding: 5px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -286,22 +343,22 @@
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
padding: 3px 0;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.recent-item:hover {
|
||||
color: var(--text-main);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Git output ───────────────────────────────────── */
|
||||
.git-output {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: #010409;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 14px;
|
||||
font-size: 12px;
|
||||
font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
|
||||
font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
|
||||
color: var(--success);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
@@ -313,35 +370,50 @@
|
||||
.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: 7px 10px;
|
||||
background: rgba(79, 157, 255, 0.08);
|
||||
border: 1px solid rgba(79, 157, 255, 0.18);
|
||||
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: 40px 16px;
|
||||
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 ───────────────────────────────────── */
|
||||
|
||||
Reference in New Issue
Block a user