fix(redesign): brand snap, event sentences, palette glass, full width
Round-up of feedback: - Brand: drop italic-gradient 'Bridge' wordmark + 'SERVICE NOTIFICATIONS' tag. Now plain 'Notify Bridge' bold sans + 'v0.5.2' mono — exactly what the Aurora mockup shows. - Event rows: replaced [collection_name] [event_tag] [count_tag] with a sentence form — bold provider, muted verb, bold count, gradient italic-feeling collection. Matches the mockup's 'Immich added 14 assets to «...»' pattern. Tracker → provider trail kept underneath. - SearchPalette: re-skinned to Aurora glass — solid surface (was using the now-translucent --color-card token and was nearly invisible), backdrop blur, hairline section headers with letterspaced mono labels, gradient active row, glass-bordered result icons + detail pills. - 'On watch' provider deck hidden when a global provider filter is active (deck would only show that one provider — redundant). Two-col grid collapses to single full-width column in that mode. - Layout: dropped the max-w-7xl cap on the topbar and the page container. Pages now stretch to full available width on wide displays. - Section labels in sidebar: dropped :global() wrapper since the element is in the same component. Added font-mono for tighter letterspacing match to the mockup. Build clean.
This commit is contained in:
@@ -271,129 +271,175 @@
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 9998;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(8px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(120%);
|
||||
}
|
||||
.sp-container {
|
||||
position: fixed;
|
||||
top: 20vh;
|
||||
top: 18vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 9999;
|
||||
width: min(500px, 90vw);
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
width: min(640px, 92vw);
|
||||
background: color-mix(in srgb, var(--color-background) 92%, transparent);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-rule-strong);
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.sp-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
gap: 0.65rem;
|
||||
padding: 0.95rem 1.15rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-muted-foreground);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.sp-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-foreground);
|
||||
font-family: var(--font-sans);
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.sp-input::placeholder { color: var(--color-muted-foreground); }
|
||||
.sp-kbd {
|
||||
font-size: 0.6rem;
|
||||
font-size: 0.62rem;
|
||||
font-family: var(--font-mono);
|
||||
padding: 0.15rem 0.35rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--color-muted);
|
||||
color: var(--color-muted-foreground);
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 6px;
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-foreground);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.sp-results {
|
||||
max-height: 50vh;
|
||||
max-height: 52vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
padding: 0.25rem;
|
||||
padding: 0.35rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.sp-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 2rem;
|
||||
gap: 0.55rem;
|
||||
padding: 2.5rem 2rem;
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.sp-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
gap: 0.45rem;
|
||||
padding: 0.6rem 0.85rem 0.35rem;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--color-muted-foreground);
|
||||
font-family: var(--font-mono);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.sp-group-header::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
.sp-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.65rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-foreground);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.88rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s;
|
||||
transition: background 0.12s, border-color 0.12s;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.sp-item:hover, .sp-item.sp-active {
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.sp-item.sp-active {
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--color-primary) 14%, transparent),
|
||||
color-mix(in srgb, var(--color-orchid) 14%, transparent));
|
||||
border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
|
||||
box-shadow: inset 0 1px 0 var(--color-highlight);
|
||||
}
|
||||
.sp-item-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-muted-foreground);
|
||||
width: 28px; height: 28px;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 8px;
|
||||
background: var(--color-glass-strong);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.sp-item.sp-active .sp-item-icon {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-glass-elev);
|
||||
}
|
||||
.sp-item-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sp-item-detail {
|
||||
font-size: 0.7rem;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-muted-foreground);
|
||||
padding: 0.1rem 0.35rem;
|
||||
padding: 0.12rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
border: 1px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sp-footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.6rem 1.15rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-muted-foreground);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--color-glass-strong);
|
||||
}
|
||||
.sp-footer kbd {
|
||||
font-family: var(--font-mono);
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 0.2rem;
|
||||
background: var(--color-muted);
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 5px;
|
||||
background: var(--color-glass);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 0.6rem;
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -367,16 +367,16 @@
|
||||
<!-- Header -->
|
||||
<div class="sidebar-header flex items-center {collapsed ? 'justify-center p-3' : 'justify-between px-5 py-5'}">
|
||||
{#if !collapsed}
|
||||
<div class="animate-fade-slide-in flex items-center gap-2.5">
|
||||
<div class="animate-fade-slide-in flex items-center gap-3">
|
||||
<div class="brand-orb"></div>
|
||||
<div>
|
||||
<h1 class="brand-mark">
|
||||
<div class="brand-text">
|
||||
<h1 class="brand-name">
|
||||
{#if globalProviderFilter.provider}
|
||||
<span class="brand-mark__icon" style="color: var(--color-primary);"><NavIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={16} /></span>
|
||||
<span class="brand-mark__icon" style="color: var(--color-primary);"><NavIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={14} /></span>
|
||||
{/if}
|
||||
<span class="brand-mark__notify">Notify</span> <em>Bridge</em>
|
||||
Notify Bridge
|
||||
</h1>
|
||||
<p class="brand-tag">{t('app.tagline')}</p>
|
||||
<p class="brand-version font-mono">v0.5.2</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -607,7 +607,7 @@
|
||||
style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
|
||||
|
||||
<!-- Always-visible topbar — search + utilities + primary CTA -->
|
||||
<div class="topbar max-w-7xl mx-auto px-4 md:px-8 pt-4 md:pt-6">
|
||||
<div class="topbar px-4 md:px-8 pt-4 md:pt-6">
|
||||
<div class="topbar-glass">
|
||||
<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
|
||||
<NavIcon name="mdiMagnify" size={16} />
|
||||
@@ -630,7 +630,7 @@
|
||||
</div>
|
||||
|
||||
{#key page.url.pathname}
|
||||
<div class="max-w-7xl mx-auto px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
|
||||
<div class="px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
|
||||
{@render children()}
|
||||
</div>
|
||||
{/key}
|
||||
@@ -717,41 +717,29 @@
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Brand mark — italic Newsreader serif */
|
||||
.brand-mark {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-foreground);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.brand-mark__notify {
|
||||
/* Brand — snapped to Aurora mockup: bold sans wordmark + mono version */
|
||||
.brand-text { line-height: 1.1; min-width: 0; }
|
||||
.brand-name {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.brand-mark em {
|
||||
font-style: italic;
|
||||
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--color-foreground);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.brand-mark__icon {
|
||||
margin-right: 2px;
|
||||
align-self: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-tag {
|
||||
font-size: 0.62rem;
|
||||
.brand-version {
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-muted-foreground);
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.13em;
|
||||
text-transform: uppercase;
|
||||
margin: 3px 0 0;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.brand-orb {
|
||||
@@ -898,7 +886,7 @@
|
||||
}
|
||||
|
||||
/* Section labels above each nav group */
|
||||
:global(.nav-section-label) {
|
||||
.nav-section-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
@@ -908,8 +896,9 @@
|
||||
text-transform: uppercase;
|
||||
color: var(--color-muted-foreground);
|
||||
padding: 0.85rem 0.85rem 0.4rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
:global(.nav-section-label::after) {
|
||||
.nav-section-label::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
|
||||
@@ -453,7 +453,7 @@
|
||||
{@render statCards()}
|
||||
|
||||
<!-- ==================== TWO COL: stream + provider deck ==================== -->
|
||||
<div class="two-col">
|
||||
<div class="two-col" class:two-col--single={!!globalProviderFilter.id}>
|
||||
<!-- Signal stream -->
|
||||
<section class="panel">
|
||||
<header class="panel-head">
|
||||
@@ -532,20 +532,22 @@
|
||||
<MdiIcon name={eventIcons[event.event_type] || 'mdiBell'} size={18} />
|
||||
</div>
|
||||
<div class="signal-body min-w-0">
|
||||
<div class="signal-head">
|
||||
<span class="signal-verb truncate">{event.collection_name}</span>
|
||||
<span class="signal-tag">{t(eventLabels[event.event_type] || event.event_type)}</span>
|
||||
<div class="signal-sentence">
|
||||
{#if event.provider_name}<b class="signal-emph">{event.provider_name}</b>{/if}
|
||||
<span class="signal-verb">{t(eventLabels[event.event_type] || event.event_type)}</span>
|
||||
{#if event.assets_count > 0}
|
||||
<span class="signal-tag accent">{event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')}</span>
|
||||
<b class="signal-emph">{event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')}</b>
|
||||
{/if}
|
||||
{#if event.collection_name}
|
||||
<span class="signal-conn">·</span>
|
||||
<b class="signal-emph signal-emph--accent truncate">«{event.collection_name}»</b>
|
||||
{/if}
|
||||
</div>
|
||||
{#if event.provider_name || event.tracker_name}
|
||||
{#if event.tracker_name}
|
||||
<div class="signal-trail">
|
||||
{#if event.tracker_name}
|
||||
<span class="ch"><MdiIcon name="mdiRadar" size={11} />{event.tracker_name}</span>
|
||||
<span class="arrow">→</span>
|
||||
{/if}
|
||||
<span class="ch"><MdiIcon name="mdiRadar" size={11} />{event.tracker_name}</span>
|
||||
{#if event.provider_name}
|
||||
<span class="arrow">→</span>
|
||||
<span class="ch"><MdiIcon name="mdiServer" size={11} />{event.provider_name}</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -565,7 +567,9 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- On watch — provider deck -->
|
||||
<!-- On watch — provider deck. Hidden when a global provider filter is
|
||||
active (the deck would only show that one provider — redundant). -->
|
||||
{#if !globalProviderFilter.id}
|
||||
<section class="panel">
|
||||
<header class="panel-head">
|
||||
<div>
|
||||
@@ -614,6 +618,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- ==================== PULSE CHART ==================== -->
|
||||
@@ -899,6 +904,7 @@
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.two-col.two-col--single { grid-template-columns: 1fr; }
|
||||
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ============================================================
|
||||
@@ -1029,31 +1035,32 @@
|
||||
box-shadow: 0 4px 14px -4px var(--g1, var(--color-primary)), inset 0 1px 0 rgba(255,255,255,0.3);
|
||||
}
|
||||
.signal-body { min-width: 0; }
|
||||
.signal-head {
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
.signal-sentence {
|
||||
display: flex; align-items: baseline;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.45;
|
||||
color: var(--color-foreground);
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.signal-emph {
|
||||
font-weight: 600;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
.signal-verb { font-weight: 500; max-width: 26ch; }
|
||||
.signal-tag {
|
||||
display: inline-block;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.13rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-muted-foreground);
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
border: 1px solid var(--color-border);
|
||||
.signal-emph--accent {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 600;
|
||||
max-width: 24ch;
|
||||
}
|
||||
.signal-tag.accent {
|
||||
background: rgba(184, 167, 255, 0.14);
|
||||
border-color: rgba(184, 167, 255, 0.3);
|
||||
color: var(--color-primary);
|
||||
.signal-verb {
|
||||
font-weight: 400;
|
||||
color: var(--color-muted-foreground);
|
||||
}
|
||||
.signal-conn {
|
||||
color: var(--color-rule-strong);
|
||||
}
|
||||
.signal-trail {
|
||||
display: flex; align-items: center; gap: 0.4rem;
|
||||
|
||||
Reference in New Issue
Block a user