diff --git a/cabotage/client/static/main.css b/cabotage/client/static/main.css index 4726fde9..b2245af8 100644 --- a/cabotage/client/static/main.css +++ b/cabotage/client/static/main.css @@ -866,6 +866,197 @@ a.live-commit-sha:hover { letter-spacing: 0.05em; } +/* Dashboard Resource Tree */ +.dash-tree { + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.dash-org { + border-radius: 0.75rem; + background: var(--surface-card); + border: 1px solid var(--border-color); + overflow: hidden; +} +.dash-org-header { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 1rem; + text-decoration: none; + transition: background 0.15s ease; +} +.dash-org-header:hover { + background: var(--hover-overlay); +} +.dash-org-icon { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 0.5rem; + background: oklch(from var(--color-primary) l c h / 0.1); + color: var(--color-primary); + flex-shrink: 0; +} +.dash-org-name { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-bright); +} +.dash-org-slug { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: 0.6875rem; + color: var(--text-faint); + margin-left: 0.5rem; +} +.dash-org-meta { + font-size: 0.6875rem; + color: var(--text-faint); + flex-shrink: 0; +} + +.dash-projects { + border-top: 1px solid var(--border-color-subtle); +} +.dash-project { + border-bottom: 1px solid var(--border-color-subtle); +} +.dash-project:last-child { + border-bottom: none; +} +.dash-project-header { + padding: 0 1rem; +} +.dash-project-link { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 0; + padding-left: 2.75rem; + text-decoration: none; + transition: background 0.1s ease; +} +.dash-project-link:hover .dash-project-name { + color: var(--text-bright); +} +.dash-project-icon { + color: var(--text-faint); + flex-shrink: 0; +} +.dash-project-name { + font-size: 0.8125rem; + font-weight: 500; + color: var(--text-muted); + transition: color 0.1s ease; +} +.dash-project-slug { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: 0.6875rem; + color: var(--text-ghost); +} +.dash-count-pill { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: 0.625rem; + font-weight: 600; + color: var(--text-faint); + background: var(--hover-overlay); + padding: 0.0625rem 0.375rem; + border-radius: 9999px; + margin-left: auto; +} + +.dash-apps { + padding: 0.125rem 1rem 0.5rem; + padding-left: 4.25rem; + display: flex; + flex-direction: column; + gap: 0; +} +.dash-app { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.3125rem 0.5rem; + margin: 0 -0.5rem; + border-radius: 0.375rem; + text-decoration: none; + transition: background 0.1s ease; +} +.dash-app:hover { + background: var(--hover-overlay); +} +.dash-app-dot { + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + background: var(--accent-text); + opacity: 0.5; + flex-shrink: 0; +} +.dash-app:hover .dash-app-dot { + opacity: 1; +} +.dash-app-name { + font-size: 0.8125rem; + color: var(--text-muted); + transition: color 0.1s ease; +} +.dash-app:hover .dash-app-name { + color: var(--accent-text); +} +.dash-app-slug { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: 0.625rem; + color: var(--text-ghost); +} +.dash-dot-deploying { + background: #3b82f6; + opacity: 1; + animation: dash-pulse 1.5s ease-in-out infinite; +} +.dash-dot-building { + background: #f59e0b; + opacity: 1; + animation: dash-pulse 1.5s ease-in-out infinite; +} +.dash-dot-error { + background: #ef4444; + opacity: 1; +} +@keyframes dash-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} +.dash-status-badge { + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: 0.5625rem; + font-weight: 600; + letter-spacing: 0.02em; + padding: 0.0625rem 0.375rem; + border-radius: 9999px; + margin-left: auto; + flex-shrink: 0; + text-transform: uppercase; +} +.dash-badge-deploying { + background: rgba(59, 130, 246, 0.15); + color: #60a5fa; +} +.dash-badge-building { + background: rgba(245, 158, 11, 0.15); + color: #fbbf24; +} +.dash-badge-error { + background: rgba(239, 68, 68, 0.15); + color: #f87171; +} +.dash-empty-branch { + padding: 0.75rem 1rem 0.75rem 3.75rem; + border-top: 1px solid var(--border-color-subtle); +} + /* Process Card (legacy, see Process Grid below) */ .pod-dot { width: 0.5rem; diff --git a/cabotage/client/templates/main/home.html b/cabotage/client/templates/main/home.html index 3e7458a4..4cd0774a 100644 --- a/cabotage/client/templates/main/home.html +++ b/cabotage/client/templates/main/home.html @@ -21,7 +21,7 @@
Manage teams and access
-View all projects
-Get started deploying
+ {% if org.projects %} +