feat: Enhance CSS with custom properties for theming and layout adjustments
This commit is contained in:
@@ -1,3 +1,95 @@
|
||||
:root {
|
||||
--bg: #0b0f14;
|
||||
--bg-2: #0f141b;
|
||||
--card: #151b23;
|
||||
--text: #e6edf3;
|
||||
--muted: #a9b4c0;
|
||||
--brand: #f1b21a;
|
||||
--brand-2: #f6c648;
|
||||
--brand-3: #f9d475;
|
||||
--accent: #2ba58f;
|
||||
--danger: #d14b4b;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
--container: 1180px;
|
||||
--muted: var(--muted);
|
||||
--color-text-subtle: rgba(169, 180, 192, 0.6);
|
||||
--color-text-invert: #ffffff;
|
||||
--color-text-dark: #0f172a;
|
||||
--color-text-strong: #111827;
|
||||
--color-border: rgba(255, 255, 255, 0.08);
|
||||
--color-border-strong: rgba(255, 255, 255, 0.12);
|
||||
--color-highlight: rgba(241, 178, 26, 0.08);
|
||||
--color-panel-shadow: rgba(0, 0, 0, 0.25);
|
||||
--color-panel-shadow-deep: rgba(0, 0, 0, 0.35);
|
||||
--color-surface-alt: rgba(21, 27, 35, 0.7);
|
||||
--space-2xs: 0.25rem;
|
||||
--space-xs: 0.5rem;
|
||||
--space-sm: 0.75rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
--space-2xl: 3rem;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.25rem;
|
||||
--font-size-xl: 1.5rem;
|
||||
--font-size-2xl: 2rem;
|
||||
--panel-radius: var(--radius);
|
||||
--table-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto",
|
||||
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
color: var(--text);
|
||||
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.report-overview {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
@@ -199,97 +291,6 @@
|
||||
background: rgba(241, 178, 26, 0.14);
|
||||
border-color: var(--brand);
|
||||
}
|
||||
:root {
|
||||
--bg: #0b0f14;
|
||||
--bg-2: #0f141b;
|
||||
--card: #151b23;
|
||||
--text: #e6edf3;
|
||||
--muted: #a9b4c0;
|
||||
--brand: #f1b21a;
|
||||
--brand-2: #f6c648;
|
||||
--brand-3: #f9d475;
|
||||
--accent: #2ba58f;
|
||||
--danger: #d14b4b;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
--container: 1180px;
|
||||
--muted: var(--muted);
|
||||
--color-text-subtle: rgba(169, 180, 192, 0.6);
|
||||
--color-text-invert: #ffffff;
|
||||
--color-text-dark: #0f172a;
|
||||
--color-text-strong: #111827;
|
||||
--color-border: rgba(255, 255, 255, 0.08);
|
||||
--color-border-strong: rgba(255, 255, 255, 0.12);
|
||||
--color-highlight: rgba(241, 178, 26, 0.08);
|
||||
--color-panel-shadow: rgba(0, 0, 0, 0.25);
|
||||
--color-panel-shadow-deep: rgba(0, 0, 0, 0.35);
|
||||
--color-surface-alt: rgba(21, 27, 35, 0.7);
|
||||
--space-2xs: 0.25rem;
|
||||
--space-xs: 0.5rem;
|
||||
--space-sm: 0.75rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
--space-2xl: 3rem;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.25rem;
|
||||
--font-size-xl: 1.5rem;
|
||||
--font-size-2xl: 2rem;
|
||||
--panel-radius: var(--radius);
|
||||
--table-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto",
|
||||
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
color: var(--text);
|
||||
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
@@ -321,20 +322,29 @@ a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
a.sidebar-brand {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.sidebar-brand:hover,
|
||||
a.sidebar-brand:focus {
|
||||
color: var(--color-text-invert);
|
||||
background-color: rgba(148, 197, 255, 0.18);
|
||||
}
|
||||
|
||||
.sidebar-nav-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-chevron {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 1.2rem;
|
||||
@@ -886,8 +896,9 @@ a {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: var(--color-border);
|
||||
background-color: var(--brand);
|
||||
color: var(--color-text-dark);
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
@@ -899,7 +910,7 @@ a {
|
||||
|
||||
.btn.primary {
|
||||
background-color: var(--brand-2);
|
||||
color: var(--color-text-invert);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.btn.primary:hover,
|
||||
@@ -907,6 +918,14 @@ a {
|
||||
background-color: var(--brand-3);
|
||||
}
|
||||
|
||||
.btn.btn-link {
|
||||
background: var(--brand);
|
||||
color: var(--color-text-dark);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--brand);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.result-output {
|
||||
background-color: var(--color-text-dark);
|
||||
color: var(--color-surface-alt);
|
||||
|
||||
Reference in New Issue
Block a user