openclaw/buildpulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: sharpen buildpulse mobile edges

Browse Source
This commit is contained in:
OpenClaw Bot
2026-05-12 23:36:50 +02:00
parent 4cfed90f37
commit 223d9325a1
3 changed files with 241 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "buildpulse",
"private": true,
"version": "0.4.4",
"version": "0.4.5",
"type": "module",
"scripts": {
"api": "node --env-file=../.env server/index.mjs",
src/App.tsx
+1 -1
View File
@@ -1580,7 +1580,7 @@ function App() {
<div className="app-shell">
<header className="mobile-shell-header card">
<div>
<p className="eyebrow">BuildPulse v0.4.4</p>
<p className="eyebrow">BuildPulse v0.4.5</p>
<h1>BuildPulse</h1>
<p className="hero-goal compact-goal">
<strong>Current goal:</strong> {appState.project.current_goal || 'Classify new ideas before they become work.'}
src/index.css
+239
View File
@@ -2870,3 +2870,242 @@ select {
width: 100%;
}
}
/* v0.4.5 — sharper, uneven mobile surfaces. Kill the capsule SaaS softness. */
:root {
--edge-cut-sm: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
--edge-cut-md: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
--edge-snag-left: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
--edge-snag-right: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
.card,
.hero-card,
.focus-panel,
.item-card,
.markdown-card,
.editor-sheet,
.triage-modal,
.top-status-row,
.tab-bar,
.tab,
.primary-triage-button,
button.primary,
button:not(.ghost):not(.tab),
button.ghost,
.import-label,
input,
textarea,
select,
.today-command-drawer,
.drawer-command,
.result-progress-strip {
border-radius: 2px;
}
.pill,
.tap-chip {
border-radius: 1px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.card,
.focus-panel,
.item-card,
.editor-sheet,
.triage-modal,
.today-command-drawer,
.result-progress-strip {
clip-path: var(--edge-cut-sm);
}
.item-card:nth-child(2n),
.feature-column-details:nth-child(2n),
.focus-panel:nth-child(2n) {
clip-path: var(--edge-snag-left);
}
.item-card:nth-child(3n),
.feature-column-details:nth-child(3n),
.focus-panel:nth-child(3n) {
clip-path: var(--edge-snag-right);
}
.primary-triage-button,
button.primary,
.drawer-command.primary {
clip-path: var(--edge-cut-md);
background: linear-gradient(135deg, #f8fbff 0%, #bfdbfe 72%, #7dd3fc 100%);
}
button.ghost,
.drawer-command {
clip-path: var(--edge-cut-sm);
}
.tab-bar {
clip-path: none;
}
.tab.active {
clip-path: var(--edge-cut-sm);
}
@media (max-width: 760px) {
body {
background:
linear-gradient(180deg, rgba(12, 16, 27, 0.9), rgba(4, 7, 13, 1) 38%),
#04070d;
}
.mobile-shell-header.card,
.today-card.card {
clip-path: none;
}
.top-status-row,
.today-command-bar button,
.today-command-drawer,
.today-focus-card,
.today-release-card,
.today-decision-card,
.feature-column-details.card,
.item-card,
.editor-sheet,
.triage-modal,
.result-progress-strip {
border-radius: 0;
}
.top-status-row,
.today-command-drawer,
.item-card,
.result-progress-strip {
clip-path: var(--edge-cut-sm);
}
.today-primary-command {
clip-path: var(--edge-cut-md);
}
.today-drawer-toggle {
clip-path: var(--edge-snag-right);
}
.feature-column-details.card {
padding-block: 0.48rem;
}
.feature-column-details:not([open]) {
min-height: 0;
padding: 0.48rem 0.15rem;
}
.feature-column-details:not([open]) .column-header {
min-height: 2.35rem;
}
.feature-column-details[open] {
border-left: 2px solid rgba(125, 211, 252, 0.42);
padding-left: 0.45rem;
}
.item-card {
background: rgba(18, 25, 42, 0.92);
border-color: rgba(203, 213, 225, 0.18);
}
.section-heading p,
.item-card p,
.focus-panel p,
.tap-hint,
small {
color: #b7c4d8;
}
.feature-signal-row span:last-child {
color: #dbeafe;
text-decoration: underline;
text-underline-offset: 0.18em;
}
}
/* v0.4.5a — contrast repair after the angular pass. Edgy should not mean illegible. */
@media (max-width: 760px) {
.simplified-feature-card,
.compact-feature-card {
color: #edf5ff;
}
.simplified-feature-card .item-card-header strong,
.compact-feature-card .item-card-header strong {
color: #ffffff;
}
.simplified-feature-card .pill,
.compact-feature-card .pill,
.focus-badges .pill {
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(15, 23, 42, 0.86);
color: #eef6ff;
}
.simplified-feature-card .pill.must,
.compact-feature-card .pill.must {
border-color: rgba(125, 211, 252, 0.52);
background: rgba(14, 165, 233, 0.2);
color: #e0f7ff;
}
.feature-signal-row,
.simplified-feature-card .feature-signal-row {
color: #cbd7e8;
}
.feature-signal-row span:last-child {
color: #ffffff;
font-weight: 900;
}
}
/* v0.4.5b — force readable ink on the bright active feature slab. */
@media (max-width: 760px) {
.item-card.simplified-feature-card,
.item-card.compact-feature-card {
background: rgba(8, 13, 24, 0.96);
border-color: rgba(125, 211, 252, 0.34);
}
.item-card.simplified-feature-card p,
.item-card.compact-feature-card p,
.item-card.simplified-feature-card small,
.item-card.compact-feature-card small {
color: #d8e4f4;
}
.item-card.simplified-feature-card .feature-signal-row,
.item-card.compact-feature-card .feature-signal-row {
color: #d8e4f4;
}
.item-card.simplified-feature-card .feature-signal-row span,
.item-card.compact-feature-card .feature-signal-row span {
color: #d8e4f4;
}
.item-card.simplified-feature-card .feature-signal-row span:last-child,
.item-card.compact-feature-card .feature-signal-row span:last-child {
color: #ffffff;
}
}
/* v0.4.5c — beat the global button skin on tappable feature cards. */
@media (max-width: 760px) {
button.item-card.simplified-feature-card,
button.item-card.compact-feature-card {
background: rgba(8, 13, 24, 0.96);
color: #edf5ff;
border: 1px solid rgba(125, 211, 252, 0.34);
}
}