andrew
3684245cda
Introduce new CSS variables (--bg-input, --bg-code, --code-text, --code-gutter) in base.css for both dark and light themes and replace hardcoded colors across components.css to use these variables. Updates touch textareas, filter inputs, diff/code previews, markdown code blocks and git output to centralize theming. Also add light-mode styles for modal backdrops, syntax token colors, and diff gutter border to improve light/dark parity and maintainability. Files changed: frontend/css/base.css, frontend/css/components.css.
175 lines
3.5 KiB
CSS
175 lines
3.5 KiB
CSS
:root {
|
||
/* Backgrounds – Gitpub Brand Palette */
|
||
--bg-app: #0F1115;
|
||
--bg-panel: #171B21;
|
||
--bg-panel-alt: #1E242C;
|
||
--bg-panel-lift: #222931;
|
||
--bg-hover: #252D38;
|
||
|
||
/* Borders */
|
||
--border: #2C3440;
|
||
--border-subtle: #1F2730;
|
||
|
||
/* Text */
|
||
--text-main: #F3F2EE;
|
||
--text-muted: #9CA6B5;
|
||
|
||
/* Accent – Amber Ale */
|
||
--accent: #E5A13E;
|
||
--accent-strong: #C57B27;
|
||
--accent-glow: rgba(229, 161, 62, 0.18);
|
||
--accent-subtle: rgba(229, 161, 62, 0.09);
|
||
|
||
/* Status */
|
||
--success: #3FB950;
|
||
--danger: #F85149;
|
||
|
||
/* Code / editor surfaces */
|
||
--bg-input: rgba(0, 0, 0, 0.28);
|
||
--bg-code: #0B0D11;
|
||
--code-text: #E6EDF3;
|
||
--code-gutter: #7D8590;
|
||
|
||
/* Shape */
|
||
--radius-md: 7px;
|
||
--radius-lg: 11px;
|
||
--radius-window: 14px;
|
||
--shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
:root[data-theme="light"] {
|
||
--bg-app: #FDF8F0;
|
||
--bg-panel: #FFFFFF;
|
||
--bg-panel-alt: #F5EFE0;
|
||
--bg-panel-lift: #FEFCF8;
|
||
--bg-hover: #EDDFC8;
|
||
--border: #D4C4A0;
|
||
--border-subtle: #E8DFC8;
|
||
--text-main: #1A120A;
|
||
--text-muted: #6B5C40;
|
||
--accent: #C57B27;
|
||
--accent-strong: #A86020;
|
||
--accent-glow: rgba(197, 123, 39, 0.18);
|
||
--accent-subtle: rgba(197, 123, 39, 0.09);
|
||
--success: #16a34a;
|
||
--danger: #dc2626;
|
||
--shadow: 0 8px 28px rgba(197, 123, 39, 0.12);
|
||
|
||
/* Code / editor surfaces */
|
||
--bg-input: rgba(255, 255, 255, 0.85);
|
||
--bg-code: #F8F3EC;
|
||
--code-text: #2B1D0E;
|
||
--code-gutter: #8B7A60;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: transparent;
|
||
color: var(--text-main);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
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.12s ease, border-color 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
|
||
font-size: 13px;
|
||
}
|
||
|
||
button:hover {
|
||
background: var(--bg-hover);
|
||
border-color: #4a5e78;
|
||
}
|
||
|
||
button:disabled {
|
||
opacity: 0.45;
|
||
cursor: default;
|
||
}
|
||
|
||
button:disabled:hover {
|
||
background: var(--bg-panel-alt);
|
||
border-color: var(--border);
|
||
}
|
||
|
||
button.primary {
|
||
background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
|
||
border-color: transparent;
|
||
color: #ffffff;
|
||
}
|
||
|
||
button.primary:hover {
|
||
opacity: 0.88;
|
||
border-color: transparent;
|
||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||
}
|
||
|
||
button.primary-blue {
|
||
background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
|
||
border-color: transparent;
|
||
color: #ffffff;
|
||
}
|
||
|
||
button.primary-blue:hover {
|
||
opacity: 0.88;
|
||
border-color: transparent;
|
||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||
}
|
||
|
||
button.danger {
|
||
border-color: rgba(248, 81, 73, 0.35);
|
||
color: var(--danger);
|
||
background: transparent;
|
||
}
|
||
|
||
button.danger:hover {
|
||
background: rgba(248, 81, 73, 0.1);
|
||
border-color: var(--danger);
|
||
}
|
||
|
||
input,
|
||
select,
|
||
textarea {
|
||
width: 100%;
|
||
padding: 5px 10px;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-input);
|
||
color: var(--text-main);
|
||
font-size: 13px;
|
||
transition: border-color 0.12s ease, box-shadow 0.12s ease;
|
||
}
|
||
|
||
input:focus,
|
||
select:focus,
|
||
textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||
}
|
||
|
||
textarea {
|
||
min-height: 80px;
|
||
resize: vertical;
|
||
}
|