mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-08-28 17:01:18 +00:00
ENH - add transparent VaultX header mark
Replace the framed header glyph with a background-free faceted VaultX mark that echoes the app icon while remaining crisp and transparent in the compact navbar.
This commit is contained in:
@@ -65,6 +65,8 @@ describe('VaultX crypto app contracts', () => {
|
||||
|
||||
it('uses the compact Flare-style navigation and polished overlay transitions', () => {
|
||||
expect(source).toContain('class="vault-navbar"')
|
||||
expect(source).toContain('class="vault-header-logo"')
|
||||
expect(source).not.toContain('.vault-header-brand > i')
|
||||
expect(source).toContain(':show-back="Boolean(detail)"')
|
||||
expect(source).not.toMatch(/<SkyNavbar[\s\S]*?\slarge(?:\s|>)/)
|
||||
expect(source).toContain('class="vault-view"')
|
||||
|
||||
@@ -273,7 +273,38 @@ onMounted(() => void crypto.load())
|
||||
v-if="!detail && (!authenticated || tab === 'portfolio')"
|
||||
class="vault-header-brand"
|
||||
>
|
||||
<i><ChartCandlestick :size="16" /></i>
|
||||
<svg class="vault-header-logo" aria-hidden="true" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="vault-logo-top" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#79e8ff" />
|
||||
<stop offset="1" stop-color="#2677ff" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="vault-logo-bottom"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="1"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0" stop-color="#164dce" />
|
||||
<stop offset="1" stop-color="#31d6aa" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M16 2 28 16 16 14 4 16Z" fill="url(#vault-logo-top)" />
|
||||
<path d="m4 16 12-2 12 2-12 14Z" fill="url(#vault-logo-bottom)" />
|
||||
<path
|
||||
d="m16 2 12 14-12 14L4 16Z"
|
||||
fill="none"
|
||||
stroke="#f5cf6a"
|
||||
stroke-width="1.4"
|
||||
/>
|
||||
<path
|
||||
d="m16 2v12L4 16m12-2 12 2"
|
||||
fill="none"
|
||||
stroke="rgba(255,255,255,.58)"
|
||||
stroke-width=".8"
|
||||
/>
|
||||
</svg>
|
||||
<span>{{ t('name') }}</span>
|
||||
</span>
|
||||
<span v-else-if="detail" class="vault-detail-title">
|
||||
@@ -1654,16 +1685,12 @@ onMounted(() => void crypto.load())
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.vault-header-brand > i {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
color: #07100e;
|
||||
background: linear-gradient(145deg, #9affe4, #5f9dff);
|
||||
border: 1px solid rgba(255, 255, 255, 0.38);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 7px 18px rgba(101, 251, 210, 0.16);
|
||||
.vault-header-logo {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
flex: 0 0 auto;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(0 4px 6px rgba(49, 214, 170, 0.24));
|
||||
}
|
||||
.vault-section-title {
|
||||
font-size: 17px;
|
||||
|
||||
Reference in New Issue
Block a user