Die Regeln der schmalen Ansicht griffen nie: Ein Inline-Stil schlägt jede Klassenregel, und `padding: '0 14px'` samt `paddingTop: var(--safe-top)` stand genau dort. Gemessen kam padding-top als 0px an statt als 8px - Titel und Nutzerbereich klebten am oberen Fensterrand. Alle Abstaende stehen jetzt im CSS-Block, schmal 14px oben und 10px unten. Dazu das mitgelieferte App-Symbol neu gezeichnet: Die drei PNG lagen als Graustufen vor, der indigo Verlauf war zu Schwarz eingeebnet. Die Wolke besteht jetzt aus drei Kreisen und einem Rechteck dazwischen - gerade Unterkante, keine Kerben in der Silhouette. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
22 lines
1004 B
XML
22 lines
1004 B
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Aether">
|
||
<defs>
|
||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#6366f1"/>
|
||
<stop offset="1" stop-color="#4f46e5"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="512" height="512" rx="114" fill="url(#bg)"/>
|
||
<!-- Wolke aus drei Kreisen und einem Rechteck dazwischen.
|
||
Der Trick gegen Kerben in der Silhouette: Das Rechteck reicht **von
|
||
Mittelpunkt zu Mittelpunkt** der beiden äußeren Kreise und endet unten
|
||
auf derselben Höhe wie sie. So kreuzen sich nirgends zwei Ränder – die
|
||
Unterkante ist gerade, die Seiten sind rund. Eine abgerundete
|
||
Grundfläche ergab genau dort zwei kleine Dellen. -->
|
||
<g fill="#ffffff" transform="translate(0 17)">
|
||
<rect x="164" y="280" width="186" height="62"/>
|
||
<circle cx="256" cy="228" r="92"/>
|
||
<circle cx="164" cy="280" r="62"/>
|
||
<circle cx="350" cy="280" r="62"/>
|
||
</g>
|
||
</svg>
|