yvv/decision
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sceau Tsing: proportions avatars (1.3:1), emboss CSS, sans voile dark

Browse Source 
- SVG redessiné: viewBox 130×100, traits fins (5u), ratio calé sur Su.svg
- Emboss via CSS drop-shadow au lieu de filtre SVG inline (causait voile)
- Supprimé :global() dans scoped CSS (cause du voile sur dark moods)
- moods.css et useMood.ts inchangés, dark modes intacts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-02 13:10:13 +01:00
parent f087fb95c9
commit 4212e847d4
3 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/app/app.vue
View File

@@ -190,6 +190,25 @@ function isActive(to: string) {
<ErrorBoundary> <ErrorBoundary>
<NuxtPage /> <NuxtPage />
</ErrorBoundary> </ErrorBoundary>
<!-- 井 Tsing — sceau (proportions calées sur avatars Yvv) -->
<svg class="app-seal" viewBox="0 0 130 100" fill="currentColor" aria-hidden="true">
<!-- Line 6 (top) — yin -->
<rect x="5" y="5" width="49" height="5" rx="1"/>
<rect x="76" y="5" width="49" height="5" rx="1"/>
<!-- Line 5 — yang -->
<rect x="5" y="22" width="120" height="5" rx="1"/>
<!-- Line 4 — yin -->
<rect x="5" y="39" width="49" height="5" rx="1"/>
<rect x="76" y="39" width="49" height="5" rx="1"/>
<!-- Line 3 — yang -->
<rect x="5" y="56" width="120" height="5" rx="1"/>
<!-- Line 2 — yang -->
<rect x="5" y="73" width="120" height="5" rx="1"/>
<!-- Line 1 (bottom) — yin -->
<rect x="5" y="90" width="49" height="5" rx="1"/>
<rect x="76" y="90" width="49" height="5" rx="1"/>
</svg>
</main> </main>
</div> </div>
@@ -577,6 +596,17 @@ function isActive(to: string) {
opacity: 0.3; opacity: 0.3;
} }
/* === Seal — 井 Tsing === */
.app-seal {
display: block;
width: 44px;
margin: 1.5rem 0 0.5rem auto;
color: var(--mood-accent);
opacity: 0.28;
filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25))
drop-shadow(-0.5px -0.5px 0.5px rgba(255,255,255,0.15));
}
/* === Transitions === */ /* === Transitions === */
.slide-up-enter-active, .slide-up-enter-active,
.slide-up-leave-active { .slide-up-leave-active {

20
frontend/public/hexagram-tsing-flat.svg
View File

@@ -1,12 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 100" fill="currentColor">
<!-- Hexagram 48 — 井 Tsing — Le Puits (flat) --> <!-- Hexagram 48 — 井 Tsing — Le Puits (flat) -->
<rect x="10" y="10" width="80" height="18" rx="2"/> <rect x="5" y="5" width="49" height="5" rx="1"/>
<rect x="110" y="10" width="80" height="18" rx="2"/> <rect x="76" y="5" width="49" height="5" rx="1"/>
<rect x="10" y="52" width="180" height="18" rx="2"/> <rect x="5" y="22" width="120" height="5" rx="1"/>
<rect x="10" y="94" width="80" height="18" rx="2"/> <rect x="5" y="39" width="49" height="5" rx="1"/>
<rect x="110" y="94" width="80" height="18" rx="2"/> <rect x="76" y="39" width="49" height="5" rx="1"/>
<rect x="10" y="136" width="180" height="18" rx="2"/> <rect x="5" y="56" width="120" height="5" rx="1"/>
<rect x="10" y="178" width="180" height="18" rx="2"/> <rect x="5" y="73" width="120" height="5" rx="1"/>
<rect x="10" y="220" width="80" height="18" rx="2"/> <rect x="5" y="90" width="49" height="5" rx="1"/>
<rect x="110" y="220" width="80" height="18" rx="2"/> <rect x="76" y="90" width="49" height="5" rx="1"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 643 B

After

Width:  |  Height:  |  Size: 619 B

40
frontend/public/hexagram-tsing.svg
View File

@@ -1,29 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 100" fill="currentColor">
<!-- Hexagram 48 — 井 Tsing — Le Puits --> <!-- Hexagram 48 — 井 Tsing — Le Puits -->
<!-- K'an (Eau) / Souen (Bois) — signature Yvv --> <!-- K'an (Eau) / Souen (Bois) — signature Yvv -->
<!-- Proportions calées sur les avatars hexagrammes (ratio ~1.3:1) -->
<defs> <defs>
<filter id="emboss" x="-10%" y="-10%" width="120%" height="120%"> <filter id="emboss" x="-10%" y="-10%" width="120%" height="120%">
<!-- Invert alpha: outside shape = opaque -->
<feComponentTransfer in="SourceAlpha" result="inv"> <feComponentTransfer in="SourceAlpha" result="inv">
<feFuncA type="table" tableValues="1 0"/> <feFuncA type="table" tableValues="1 0"/>
</feComponentTransfer> </feComponentTransfer>
<feOffset in="inv" dx="1.5" dy="1.5" result="sOff"/>
<!-- Inset shadow: dark on top-left inner edges --> <feGaussianBlur in="sOff" stdDeviation="1" result="sBlur"/>
<feOffset in="inv" dx="4" dy="4" result="sOff"/> <feFlood flood-color="#000" flood-opacity="0.3"/>
<feGaussianBlur in="sOff" stdDeviation="2.5" result="sBlur"/>
<feFlood flood-color="#000" flood-opacity="0.35"/>
<feComposite in2="sBlur" operator="in" result="sDark"/> <feComposite in2="sBlur" operator="in" result="sDark"/>
<feComposite in="sDark" in2="SourceAlpha" operator="in" result="sClip"/> <feComposite in="sDark" in2="SourceAlpha" operator="in" result="sClip"/>
<feOffset in="inv" dx="-1" dy="-1" result="hOff"/>
<!-- Inset highlight: light on bottom-right inner edges --> <feGaussianBlur in="hOff" stdDeviation="0.8" result="hBlur"/>
<feOffset in="inv" dx="-3" dy="-3" result="hOff"/> <feFlood flood-color="#fff" flood-opacity="0.4"/>
<feGaussianBlur in="hOff" stdDeviation="2" result="hBlur"/>
<feFlood flood-color="#fff" flood-opacity="0.45"/>
<feComposite in2="hBlur" operator="in" result="hLight"/> <feComposite in2="hBlur" operator="in" result="hLight"/>
<feComposite in="hLight" in2="SourceAlpha" operator="in" result="hClip"/> <feComposite in="hLight" in2="SourceAlpha" operator="in" result="hClip"/>
<!-- Stack: base shape + shadow + highlight -->
<feMerge> <feMerge>
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic"/>
<feMergeNode in="sClip"/> <feMergeNode in="sClip"/>
@@ -34,19 +28,19 @@
<g filter="url(#emboss)"> <g filter="url(#emboss)">
<!-- Line 6 (top) — yin --> <!-- Line 6 (top) — yin -->
<rect x="10" y="10" width="80" height="18" rx="2"/> <rect x="5" y="5" width="49" height="5" rx="1"/>
<rect x="110" y="10" width="80" height="18" rx="2"/> <rect x="76" y="5" width="49" height="5" rx="1"/>
<!-- Line 5 — yang --> <!-- Line 5 — yang -->
<rect x="10" y="52" width="180" height="18" rx="2"/> <rect x="5" y="22" width="120" height="5" rx="1"/>
<!-- Line 4 — yin --> <!-- Line 4 — yin -->
<rect x="10" y="94" width="80" height="18" rx="2"/> <rect x="5" y="39" width="49" height="5" rx="1"/>
<rect x="110" y="94" width="80" height="18" rx="2"/> <rect x="76" y="39" width="49" height="5" rx="1"/>
<!-- Line 3 — yang --> <!-- Line 3 — yang -->
<rect x="10" y="136" width="180" height="18" rx="2"/> <rect x="5" y="56" width="120" height="5" rx="1"/>
<!-- Line 2 — yang --> <!-- Line 2 — yang -->
<rect x="10" y="178" width="180" height="18" rx="2"/> <rect x="5" y="73" width="120" height="5" rx="1"/>
<!-- Line 1 (bottom) — yin --> <!-- Line 1 (bottom) — yin -->
<rect x="10" y="220" width="80" height="18" rx="2"/> <rect x="5" y="90" width="49" height="5" rx="1"/>
<rect x="110" y="220" width="80" height="18" rx="2"/> <rect x="76" y="90" width="49" height="5" rx="1"/>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB