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.
114 lines
2.0 KiB
CSS
114 lines
2.0 KiB
CSS
:root {
|
|
--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);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-app);
|
|
color: var(--text-main);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-panel-alt);
|
|
color: var(--text-main);
|
|
padding: 5px 12px;
|
|
cursor: pointer;
|
|
transition: background 0.1s ease, border-color 0.1s ease;
|
|
font-size: 14px;
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--bg-hover);
|
|
border-color: #8b949e;
|
|
}
|
|
|
|
button.primary {
|
|
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: 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: 5px 12px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border);
|
|
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 {
|
|
min-height: 96px;
|
|
resize: vertical;
|
|
}
|