gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-10-23 20:25:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(portal): tighten typography and geometry

Browse Source
This commit is contained in:
rcourtman
2026-03-27 15:51:01 +00:00
parent c8e4a7a680
commit e3aa20ad26
3 changed files with 128 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/cloudcp/portal/dist/build_manifest.json
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
{
"source_hash": "3b31c205a79f7c867444f852e0c63518ac751ef055d7c7679830912af99327cf",
"source_hash": "0e9ac055e4ca87b33a6dcf2f05065682e246c38a1ed4c59cf88d2bf14ae8bdee",
"build_inputs": [
"package.json",
"tsconfig.json",
internal/cloudcp/portal/dist/portal_app.css
Vendored
+67 -64
View File
@@ -1,29 +1,29 @@
/* src/styles.css */
:root {
color-scheme: light;
--bg: #f4efe5;
--panel: #fffdf8;
--panel-strong: #fffaf1;
--panel-muted: #f7f1e7;
--ink: #1f2933;
--ink-soft: #536171;
--ink-muted: #7a8795;
--line: #dfd2bd;
--line-strong: #cbb799;
--accent: #0f6d73;
--accent-strong: #0a4f57;
--accent-soft: #d9efef;
--bg: #f3f4f6;
--panel: #ffffff;
--panel-strong: #fbfbfc;
--panel-muted: #f6f7f9;
--ink: #17202a;
--ink-soft: #5a6675;
--ink-muted: #7d8895;
--line: #dde3ea;
--line-strong: #c5d0da;
--accent: #0b6a72;
--accent-strong: #084d53;
--accent-soft: #dceef0;
--warn: #9a3412;
--warn-soft: #fff1df;
--warn-soft: #fff3e6;
--danger: #a61b1b;
--danger-soft: #fde8e8;
--success: #1f6b42;
--success-soft: #dff4e7;
--shadow-sm: 0 1px 3px rgba(31, 41, 51, 0.08);
--shadow-md: 0 14px 32px rgba(31, 41, 51, 0.08);
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--danger-soft: #fdeaea;
--success: #19603c;
--success-soft: #e3f3e8;
--shadow-sm: 0 1px 2px rgba(23, 32, 42, 0.06);
--shadow-md: 0 10px 24px rgba(23, 32, 42, 0.08);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px;
}
* {
box-sizing: border-box;
@@ -35,19 +35,22 @@ body {
margin: 0;
min-height: 100vh;
font-family:
"Avenir Next",
Inter,
"Segoe UI Variable Text",
"Segoe UI",
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
sans-serif;
background:
radial-gradient(
circle at top left,
rgba(15, 109, 115, 0.08),
transparent 32%),
rgba(11, 106, 114, 0.045),
transparent 28%),
linear-gradient(
180deg,
#f7f3eb 0%,
#f2ece1 100%);
#f7f8fa 0%,
#f1f3f6 100%);
color: var(--ink);
}
a {
@@ -62,23 +65,23 @@ header {
justify-content: space-between;
gap: 16px;
padding: 18px 28px;
border-bottom: 1px solid rgba(203, 183, 153, 0.55);
background: rgba(255, 251, 244, 0.9);
border-bottom: 1px solid rgba(197, 208, 218, 0.8);
background: rgba(248, 249, 251, 0.92);
backdrop-filter: blur(14px);
}
header .brand {
font-size: 19px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.03em;
letter-spacing: -0.02em;
}
.header-account-chip {
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(203, 183, 153, 0.75);
background: rgba(255, 253, 248, 0.95);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.96);
border-radius: 999px;
padding: 6px 8px 6px 14px;
padding: 4px 8px 4px 12px;
}
.header-account-email {
font-size: 13px;
@@ -101,8 +104,8 @@ header .logout-btn,
border: 1px solid var(--line-strong);
background: #fff;
color: var(--ink);
border-radius: 999px;
padding: 10px 16px;
border-radius: 8px;
padding: 9px 14px;
cursor: pointer;
transition:
border-color 140ms ease,
@@ -119,8 +122,8 @@ header .logout-btn:hover,
box-shadow: var(--shadow-sm);
}
.btn-primary {
border-radius: 999px;
padding: 11px 18px;
border-radius: 8px;
padding: 10px 15px;
background: var(--accent);
color: #fff;
font-weight: 600;
@@ -136,8 +139,8 @@ header .logout-btn:hover,
box-shadow: var(--shadow-sm);
}
.btn-danger {
border-radius: 999px;
padding: 11px 18px;
border-radius: 8px;
padding: 10px 15px;
background: var(--danger-soft);
color: var(--danger);
cursor: pointer;
@@ -165,18 +168,18 @@ header .logout-btn:hover,
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr);
gap: 20px;
padding: 34px;
border: 1px solid rgba(203, 183, 153, 0.8);
padding: 30px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background:
linear-gradient(
135deg,
rgba(15, 109, 115, 0.08),
rgba(255, 255, 255, 0) 42%),
rgba(11, 106, 114, 0.035),
rgba(255, 255, 255, 0) 38%),
linear-gradient(
180deg,
rgba(255, 253, 248, 0.98),
rgba(248, 241, 231, 0.98));
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.98));
box-shadow: var(--shadow-md);
}
.portal-hero-copy {
@@ -205,15 +208,15 @@ header .logout-btn:hover,
.portal-hero h1,
.intro-card h1 {
margin: 0;
font-size: clamp(2rem, 3.6vw, 3.3rem);
line-height: 0.96;
letter-spacing: -0.05em;
font-size: clamp(1.85rem, 3.1vw, 2.9rem);
line-height: 0.98;
letter-spacing: -0.045em;
}
.portal-hero p,
.intro-card p {
margin: 0;
font-size: 16px;
line-height: 1.7;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
}
.portal-hero-stats {
@@ -226,11 +229,11 @@ header .logout-btn:hover,
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 136px;
padding: 18px;
border: 1px solid rgba(203, 183, 153, 0.75);
min-height: 120px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: rgba(255, 251, 244, 0.9);
background: rgba(255, 255, 255, 0.92);
}
.portal-hero-stat-label {
font-size: 12px;
@@ -269,8 +272,8 @@ header .logout-btn:hover,
.service-panel,
.account-surface,
.empty-state {
border: 1px solid rgba(203, 183, 153, 0.78);
background: rgba(255, 253, 248, 0.96);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-sm);
}
.portal-section-link {
@@ -418,7 +421,7 @@ header .logout-btn:hover,
.team-invite-panel,
.service-card,
.service-panel .subsection {
border: 1px solid rgba(203, 183, 153, 0.72);
border: 1px solid var(--line);
background: var(--panel);
border-radius: var(--radius-md);
}
@@ -441,9 +444,9 @@ header .logout-btn:hover,
.service-panel h3,
.service-panel .subsection h4 {
margin: 8px 0 0;
font-size: 22px;
line-height: 1.05;
letter-spacing: -0.04em;
font-size: 20px;
line-height: 1.08;
letter-spacing: -0.03em;
}
.account-overview-card p,
.account-stage-header p,
@@ -556,9 +559,9 @@ header .logout-btn:hover,
.workspace-management-content h4,
.team-panel-heading h4 {
margin: 0;
font-size: 21px;
line-height: 1.08;
letter-spacing: -0.04em;
font-size: 18px;
line-height: 1.1;
letter-spacing: -0.025em;
}
.workspace-meta {
display: flex;
@@ -845,7 +848,7 @@ header .logout-btn:hover,
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.badge-role,
internal/cloudcp/portal/frontend/src/styles.css
+60 -60
View File
@@ -1,28 +1,28 @@
:root {
color-scheme: light;
--bg: #f4efe5;
--panel: #fffdf8;
--panel-strong: #fffaf1;
--panel-muted: #f7f1e7;
--ink: #1f2933;
--ink-soft: #536171;
--ink-muted: #7a8795;
--line: #dfd2bd;
--line-strong: #cbb799;
--accent: #0f6d73;
--accent-strong: #0a4f57;
--accent-soft: #d9efef;
--bg: #f3f4f6;
--panel: #ffffff;
--panel-strong: #fbfbfc;
--panel-muted: #f6f7f9;
--ink: #17202a;
--ink-soft: #5a6675;
--ink-muted: #7d8895;
--line: #dde3ea;
--line-strong: #c5d0da;
--accent: #0b6a72;
--accent-strong: #084d53;
--accent-soft: #dceef0;
--warn: #9a3412;
--warn-soft: #fff1df;
--warn-soft: #fff3e6;
--danger: #a61b1b;
--danger-soft: #fde8e8;
--success: #1f6b42;
--success-soft: #dff4e7;
--shadow-sm: 0 1px 3px rgba(31, 41, 51, 0.08);
--shadow-md: 0 14px 32px rgba(31, 41, 51, 0.08);
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--danger-soft: #fdeaea;
--success: #19603c;
--success-soft: #e3f3e8;
--shadow-sm: 0 1px 2px rgba(23, 32, 42, 0.06);
--shadow-md: 0 10px 24px rgba(23, 32, 42, 0.08);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px;
}
* { box-sizing: border-box; }
@@ -34,10 +34,10 @@ html {
body {
margin: 0;
min-height: 100vh;
font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
font-family: Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
background:
radial-gradient(circle at top left, rgba(15, 109, 115, 0.08), transparent 32%),
linear-gradient(180deg, #f7f3eb 0%, #f2ece1 100%);
radial-gradient(circle at top left, rgba(11, 106, 114, 0.045), transparent 28%),
linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 100%);
color: var(--ink);
}
@@ -52,25 +52,25 @@ header {
justify-content: space-between;
gap: 16px;
padding: 18px 28px;
border-bottom: 1px solid rgba(203, 183, 153, 0.55);
background: rgba(255, 251, 244, 0.9);
border-bottom: 1px solid rgba(197, 208, 218, 0.8);
background: rgba(248, 249, 251, 0.92);
backdrop-filter: blur(14px);
}
header .brand {
font-size: 19px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.03em;
letter-spacing: -0.02em;
}
.header-account-chip {
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(203, 183, 153, 0.75);
background: rgba(255, 253, 248, 0.95);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.96);
border-radius: 999px;
padding: 6px 8px 6px 14px;
padding: 4px 8px 4px 12px;
}
.header-account-email {
@@ -96,8 +96,8 @@ header .logout-btn,
border: 1px solid var(--line-strong);
background: #fff;
color: var(--ink);
border-radius: 999px;
padding: 10px 16px;
border-radius: 8px;
padding: 9px 14px;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
@@ -112,8 +112,8 @@ header .logout-btn:hover,
}
.btn-primary {
border-radius: 999px;
padding: 11px 18px;
border-radius: 8px;
padding: 10px 15px;
background: var(--accent);
color: #fff;
font-weight: 600;
@@ -128,8 +128,8 @@ header .logout-btn:hover,
}
.btn-danger {
border-radius: 999px;
padding: 11px 18px;
border-radius: 8px;
padding: 10px 15px;
background: var(--danger-soft);
color: var(--danger);
cursor: pointer;
@@ -162,12 +162,12 @@ header .logout-btn:hover,
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.95fr);
gap: 20px;
padding: 34px;
border: 1px solid rgba(203, 183, 153, 0.8);
padding: 30px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, rgba(15, 109, 115, 0.08), rgba(255, 255, 255, 0) 42%),
linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 241, 231, 0.98));
linear-gradient(135deg, rgba(11, 106, 114, 0.035), rgba(255, 255, 255, 0) 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
box-shadow: var(--shadow-md);
}
@@ -201,16 +201,16 @@ header .logout-btn:hover,
.portal-hero h1,
.intro-card h1 {
margin: 0;
font-size: clamp(2rem, 3.6vw, 3.3rem);
line-height: 0.96;
letter-spacing: -0.05em;
font-size: clamp(1.85rem, 3.1vw, 2.9rem);
line-height: 0.98;
letter-spacing: -0.045em;
}
.portal-hero p,
.intro-card p {
margin: 0;
font-size: 16px;
line-height: 1.7;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
}
@@ -225,11 +225,11 @@ header .logout-btn:hover,
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 136px;
padding: 18px;
border: 1px solid rgba(203, 183, 153, 0.75);
min-height: 120px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: rgba(255, 251, 244, 0.9);
background: rgba(255, 255, 255, 0.92);
}
.portal-hero-stat-label {
@@ -274,8 +274,8 @@ header .logout-btn:hover,
.service-panel,
.account-surface,
.empty-state {
border: 1px solid rgba(203, 183, 153, 0.78);
background: rgba(255, 253, 248, 0.96);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-sm);
}
@@ -443,7 +443,7 @@ header .logout-btn:hover,
.team-invite-panel,
.service-card,
.service-panel .subsection {
border: 1px solid rgba(203, 183, 153, 0.72);
border: 1px solid var(--line);
background: var(--panel);
border-radius: var(--radius-md);
}
@@ -468,9 +468,9 @@ header .logout-btn:hover,
.service-panel h3,
.service-panel .subsection h4 {
margin: 8px 0 0;
font-size: 22px;
line-height: 1.05;
letter-spacing: -0.04em;
font-size: 20px;
line-height: 1.08;
letter-spacing: -0.03em;
}
.account-overview-card p,
@@ -591,9 +591,9 @@ header .logout-btn:hover,
.workspace-management-content h4,
.team-panel-heading h4 {
margin: 0;
font-size: 21px;
line-height: 1.08;
letter-spacing: -0.04em;
font-size: 18px;
line-height: 1.1;
letter-spacing: -0.025em;
}
.workspace-meta {
@@ -930,7 +930,7 @@ header .logout-btn:hover,
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
letter-spacing: 0.08em;
text-transform: uppercase;
}