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:
+61
-26
@@ -1,18 +1,18 @@
|
||||
:root {
|
||||
--bg-app: #0b1018;
|
||||
--bg-panel: #111a27;
|
||||
--bg-panel-alt: #172234;
|
||||
--bg-hover: #1c2a3f;
|
||||
--border: #253349;
|
||||
--text-main: #e5edf7;
|
||||
--text-muted: #94a7c0;
|
||||
--accent: #4f9dff;
|
||||
--accent-strong: #2f85f4;
|
||||
--success: #41c48f;
|
||||
--danger: #ef6a6a;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--shadow: 0 14px 40px rgba(5, 9, 16, 0.45);
|
||||
--bg-app: #0d1117;
|
||||
--bg-panel: #161b22;
|
||||
--bg-panel-alt: #21262d;
|
||||
--bg-hover: #30363d;
|
||||
--border: #30363d;
|
||||
--text-main: #e6edf3;
|
||||
--text-muted: #848d97;
|
||||
--accent: #2f81f7;
|
||||
--accent-strong: #1f6feb;
|
||||
--success: #3fb950;
|
||||
--danger: #f85149;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--shadow: 0 8px 24px rgba(1, 4, 9, 0.75);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -24,9 +24,11 @@ body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at top right, #172a47 0%, var(--bg-app) 55%);
|
||||
background: var(--bg-app);
|
||||
color: var(--text-main);
|
||||
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -41,35 +43,68 @@ button {
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-panel-alt);
|
||||
color: var(--text-main);
|
||||
padding: 8px 12px;
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
transition: background 0.1s ease, border-color 0.1s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #3b4f6e;
|
||||
background: var(--bg-hover);
|
||||
border-color: #8b949e;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: linear-gradient(180deg, #5ca7ff 0%, var(--accent-strong) 100%);
|
||||
border-color: #2670d6;
|
||||
background: #238636;
|
||||
border-color: rgba(240, 246, 252, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button.primary:hover {
|
||||
background: #2ea043;
|
||||
border-color: rgba(240, 246, 252, 0.1);
|
||||
}
|
||||
|
||||
button.primary-blue {
|
||||
background: var(--accent-strong);
|
||||
border-color: rgba(240, 246, 252, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button.primary-blue:hover {
|
||||
background: var(--accent);
|
||||
border-color: rgba(240, 246, 252, 0.1);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
border-color: #813434;
|
||||
color: #ffcaca;
|
||||
border-color: rgba(248, 81, 73, 0.4);
|
||||
color: #f85149;
|
||||
}
|
||||
|
||||
button.danger:hover {
|
||||
background: rgba(248, 81, 73, 0.1);
|
||||
border-color: #f85149;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
padding: 5px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
background: #0f1724;
|
||||
background: var(--bg-app);
|
||||
color: var(--text-main);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.15);
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
Reference in New Issue
Block a user