Sascha/perinco-CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Hintergrundgrafiken fuer Leiste und Seitenleiste je Theme

Browse Source 
Pixel Art, Outdoor und Cyberpunk legen jetzt eine Grafik hinter die obere
Leiste und die Seitenleiste: 8-bit-Himmel mit Wolken und Huegelkante
sowie eine Steinmauer, blauer Himmel mit Schleierwolken sowie eine Wiese,
Neonroehren im Regen sowie eine regnerische Gasse. perinco bleibt
einfarbig.

Sechs SVG in public/themes/, von Hand gezeichnet - stilisierte Grafik
statt Foto, damit sie in jeder Aufloesung scharf bleibt; zusammen 36 kB.
Die Pixel-Grafiken haben einen absichtlich winzigen viewBox (eine Einheit
= ein Bildpunkt) und shape-rendering="crispEdges", damit die Kanten beim
Hochskalieren hart bleiben; die Mauer blendet nach oben stufenweise aus
und nicht mit einem Verlauf - Pixelgrafik kennt keine Zwischentoene.

Im Markup nur zwei Anker: app-header und app-sidebar. Den Rest machen
zwei Variablen mit Rueckfall auf none, weshalb perinco unberuehrt bleibt.

Die Variable enthaelt zwei Ebenen: einen Schleier aus der Flaechenfarbe
des Themes und darunter die Grafik. Das erledigt zwei Dinge zugleich -
derselbe blaue Himmel wird im Dunkelmodus zur Nacht (keine zweite Datei
noetig), und die Schrift bleibt lesbar, weil der Schleier in der Leiste an
den Raendern dicht liegt und in der Seitenleiste oben ueber den
Menuepunkten.

Aus dem ersten Versuch gelernt: die Cyberpunk-Grafik hatte eine deckende
Nachtflaeche. Im hellen Modus wurde daraus unter dem weissen Schleier ein
grauer Schmutzstreifen. Sie ist jetzt durchsichtig und zeigt nur Licht -
ueber Dunkel leuchtet das Neon, ueber Weiss bleiben blasse farbige
Linien. Ebenso zurueckgenommen wurde der Schleier ueber der Steinmauer:
"Einstellungen" und der Benutzername stehen darauf.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
2026-09-09 15:08:17 +02:00
co-authored by Claude Opus 5
parent 93fe8cfd73
commit dc701f8522
12 changed files with 662 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/themes/cyberpunk-header.svg
+93
View File
@@ -0,0 +1,93 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Cyberpunk, obere Leiste: Neonroehren hinter Regen.
Die Roehren sind doppelt gezeichnet - einmal breit und unscharf (der Schein),
einmal duenn und hell (das Glas). Genau daraus besteht der Neoneffekt; eine
einzelne farbige Linie sieht nur nach Linie aus.
Der Regen faellt schraeg und ist bewusst blass: er soll Bewegung andeuten,
nicht die Schrift der Leiste stoeren. Die Deckung darueber kommt aus dem
Theme (index.css), damit dieselbe Grafik im hellen Modus blass bleibt.
-->
<defs>
<filter id="schein" x="-60%" y="-200%" width="220%" height="500%">
<feGaussianBlur stdDeviation="7" />
</filter>
<filter id="weiterSchein" x="-80%" y="-300%" width="260%" height="700%">
<feGaussianBlur stdDeviation="18" />
</filter>
</defs>
<!--
Bewusst KEINE deckende Nachtflaeche: die Grafik ist durchsichtig und zeigt
nur Licht. Ueber der dunklen Flaeche des Dunkelmodus ergibt das leuchtendes
Neon, ueber der weissen des hellen Modus blasse farbige Linien. Mit einer
dunklen Grundflaeche wurde daraus im hellen Modus ein grauer Schmutzstreifen.
-->
<!-- Ferne Fensterreihen: die Stadt im Hintergrund -->
<g fill="#4a6fa8" opacity="0.35">
<rect x="120" y="18" width="3" height="5" /><rect x="130" y="30" width="3" height="4" />
<rect x="148" y="12" width="3" height="6" /><rect x="160" y="26" width="3" height="5" />
<rect x="420" y="22" width="3" height="5" /><rect x="432" y="14" width="3" height="4" />
<rect x="446" y="34" width="3" height="5" /><rect x="458" y="20" width="3" height="6" />
<rect x="980" y="16" width="3" height="5" /><rect x="992" y="28" width="3" height="4" />
<rect x="1006" y="20" width="3" height="6" /><rect x="1018" y="34" width="3" height="4" />
<rect x="1320" y="24" width="3" height="5" /><rect x="1332" y="14" width="3" height="6" />
<rect x="1346" y="30" width="3" height="4" />
</g>
<!-- Waagerechte Neonroehren -->
<g>
<!-- Magenta, lang -->
<rect x="180" y="26" width="300" height="8" fill="#c026d3" opacity="0.5" filter="url(#weiterSchein)" />
<rect x="180" y="28" width="300" height="4" fill="#e879f9" opacity="0.85" filter="url(#schein)" />
<rect x="180" y="29" width="300" height="2" fill="#fbe3ff" opacity="0.95" />
<!-- Cyan, kurz -->
<rect x="620" y="50" width="180" height="8" fill="#0891b2" opacity="0.5" filter="url(#weiterSchein)" />
<rect x="620" y="52" width="180" height="4" fill="#22d3ee" opacity="0.85" filter="url(#schein)" />
<rect x="620" y="53" width="180" height="2" fill="#d6feff" opacity="0.95" />
<!-- Violett, mittig -->
<rect x="900" y="20" width="240" height="8" fill="#7326d6" opacity="0.5" filter="url(#weiterSchein)" />
<rect x="900" y="22" width="240" height="4" fill="#a24cff" opacity="0.85" filter="url(#schein)" />
<rect x="900" y="23" width="240" height="2" fill="#ecdcff" opacity="0.95" />
<!-- Cyan, rechts -->
<rect x="1260" y="46" width="220" height="8" fill="#0891b2" opacity="0.45" filter="url(#weiterSchein)" />
<rect x="1260" y="48" width="220" height="4" fill="#22d3ee" opacity="0.8" filter="url(#schein)" />
<rect x="1260" y="49" width="220" height="2" fill="#d6feff" opacity="0.9" />
</g>
<!-- Senkrechte Roehren: setzen Takt in die Breite -->
<g>
<rect x="540" y="0" width="6" height="80" fill="#c026d3" opacity="0.35" filter="url(#weiterSchein)" />
<rect x="542" y="0" width="2" height="80" fill="#f0a6ff" opacity="0.7" filter="url(#schein)" />
<rect x="1180" y="0" width="6" height="80" fill="#0891b2" opacity="0.35" filter="url(#weiterSchein)" />
<rect x="1182" y="0" width="2" height="80" fill="#7ce9f7" opacity="0.7" filter="url(#schein)" />
</g>
<!-- Regen: schraege Striche, unterschiedlich lang und blass -->
<g stroke="#a5c8ff" stroke-linecap="round">
<g stroke-width="1.2" opacity="0.3">
<path d="M40 -6 l-8 26" /><path d="M96 4 l-8 26" /><path d="M152 -8 l-8 26" />
<path d="M214 10 l-8 26" /><path d="M268 -4 l-8 26" /><path d="M330 16 l-8 26" />
<path d="M392 2 l-8 26" /><path d="M452 20 l-8 26" /><path d="M512 -2 l-8 26" />
<path d="M574 14 l-8 26" /><path d="M636 4 l-8 26" /><path d="M698 22 l-8 26" />
<path d="M760 -6 l-8 26" /><path d="M822 12 l-8 26" /><path d="M884 0 l-8 26" />
<path d="M946 18 l-8 26" /><path d="M1008 6 l-8 26" /><path d="M1070 24 l-8 26" />
<path d="M1132 -4 l-8 26" /><path d="M1194 14 l-8 26" /><path d="M1256 2 l-8 26" />
<path d="M1318 20 l-8 26" /><path d="M1380 8 l-8 26" /><path d="M1442 26 l-8 26" />
<path d="M1504 -2 l-8 26" /><path d="M1566 16 l-8 26" />
</g>
<g stroke-width="1.6" opacity="0.22">
<path d="M70 34 l-10 34" /><path d="M186 40 l-10 34" /><path d="M302 30 l-10 34" />
<path d="M418 44 l-10 34" /><path d="M534 36 l-10 34" /><path d="M650 46 l-10 34" />
<path d="M766 32 l-10 34" /><path d="M882 42 l-10 34" /><path d="M998 34 l-10 34" />
<path d="M1114 48 l-10 34" /><path d="M1230 36 l-10 34" /><path d="M1346 44 l-10 34" />
<path d="M1462 32 l-10 34" /><path d="M1578 42 l-10 34" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

public/themes/cyberpunk-sidebar.svg
+106
View File
@@ -0,0 +1,106 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Cyberpunk, Seitenleiste: Blick durch ein Fenster in eine regnerische Gasse.
Aufbau von hinten nach vorn: Fensterreihen der Haeuser, senkrechte
Neonroehren, eine Pfuetze mit Spiegelung, der Regen davor. Die Roehren sind
wieder doppelt gezeichnet - breit und unscharf als Schein, duenn und hell
als Glas.
Die obere Haelfte bleibt ruhig: dort stehen die Menuepunkte. Die Gasse steht
in den unteren rund 350 px, wo die Leiste frei ist.
-->
<defs>
<filter id="schein" x="-100%" y="-40%" width="300%" height="180%">
<feGaussianBlur stdDeviation="6" />
</filter>
<filter id="weiterSchein" x="-200%" y="-60%" width="500%" height="220%">
<feGaussianBlur stdDeviation="16" />
</filter>
<!--
Kein Schwarz: ein farbiger Dunst statt einer dunklen Flaeche. Ueber der
dunklen Flaeche des Dunkelmodus wirkt er wie Tiefe, ueber der weissen des
hellen Modus wie ein kuehler Schleier - grau wird er in keinem von beiden.
-->
<linearGradient id="tiefe" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3a4a80" stop-opacity="0" />
<stop offset="0.4" stop-color="#33407a" stop-opacity="0.16" />
<stop offset="1" stop-color="#2b3a72" stop-opacity="0.3" />
</linearGradient>
<linearGradient id="pfuetze" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#22d3ee" stop-opacity="0.35" />
<stop offset="1" stop-color="#22d3ee" stop-opacity="0" />
</linearGradient>
</defs>
<!-- Die Gasse wird nach unten dichter -->
<rect y="450" width="260" height="450" fill="url(#tiefe)" />
<!-- Fensterreihen: warm und kalt gemischt, wie bewohnte Haeuser -->
<g opacity="0.5">
<g fill="#f0b356">
<rect x="18" y="612" width="5" height="7" /><rect x="34" y="648" width="5" height="7" />
<rect x="18" y="700" width="5" height="7" /><rect x="50" y="676" width="5" height="7" />
<rect x="208" y="624" width="5" height="7" /><rect x="224" y="668" width="5" height="7" />
<rect x="240" y="708" width="5" height="7" />
</g>
<g fill="#7cc4ef">
<rect x="34" y="588" width="5" height="7" /><rect x="18" y="664" width="5" height="7" />
<rect x="50" y="628" width="5" height="7" /><rect x="224" y="596" width="5" height="7" />
<rect x="208" y="688" width="5" height="7" /><rect x="240" y="640" width="5" height="7" />
</g>
</g>
<!-- Senkrechte Neonroehren links und rechts, wie Schilder an den Haeusern -->
<g>
<rect x="26" y="520" width="10" height="180" fill="#c026d3" opacity="0.4" filter="url(#weiterSchein)" />
<rect x="29" y="520" width="4" height="180" fill="#e879f9" opacity="0.8" filter="url(#schein)" />
<rect x="30" y="520" width="2" height="180" fill="#fbe3ff" opacity="0.9" />
<rect x="222" y="580" width="10" height="230" fill="#0891b2" opacity="0.4" filter="url(#weiterSchein)" />
<rect x="225" y="580" width="4" height="230" fill="#22d3ee" opacity="0.8" filter="url(#schein)" />
<rect x="226" y="580" width="2" height="230" fill="#d6feff" opacity="0.9" />
<rect x="126" y="700" width="8" height="120" fill="#7326d6" opacity="0.35" filter="url(#weiterSchein)" />
<rect x="128" y="700" width="4" height="120" fill="#a24cff" opacity="0.75" filter="url(#schein)" />
</g>
<!-- Waagerechtes Schild, quer zur Gasse -->
<g>
<rect x="60" y="756" width="140" height="8" fill="#c026d3" opacity="0.4" filter="url(#weiterSchein)" />
<rect x="60" y="758" width="140" height="4" fill="#f0a6ff" opacity="0.8" filter="url(#schein)" />
</g>
<!-- Nasser Boden mit Spiegelung: die Roehren strahlen nach unten aus -->
<rect y="828" width="260" height="72" fill="#243060" opacity="0.3" />
<g>
<rect x="26" y="828" width="10" height="60" fill="url(#pfuetze)" filter="url(#schein)" />
<rect x="222" y="828" width="10" height="60" fill="url(#pfuetze)" filter="url(#schein)" />
<rect x="126" y="828" width="8" height="46" fill="url(#pfuetze)" filter="url(#schein)" />
</g>
<!-- Zwei Lichtstreifen als nasser Glanz -->
<g fill="#7ce9f7" opacity="0.16">
<rect x="0" y="846" width="260" height="2" />
<rect x="0" y="872" width="260" height="1.5" />
</g>
<!-- Regen ueber die ganze Hoehe, oben blasser -->
<g stroke="#a5c8ff" stroke-linecap="round">
<g stroke-width="1.2" opacity="0.12">
<path d="M20 60 l-6 40" /><path d="M78 20 l-6 40" /><path d="M140 90 l-6 40" />
<path d="M198 40 l-6 40" /><path d="M246 110 l-6 40" /><path d="M46 150 l-6 40" />
<path d="M112 130 l-6 40" /><path d="M176 170 l-6 40" /><path d="M228 200 l-6 40" />
</g>
<g stroke-width="1.3" opacity="0.2">
<path d="M32 300 l-7 46" /><path d="M96 340 l-7 46" /><path d="M158 310 l-7 46" />
<path d="M214 360 l-7 46" /><path d="M62 420 l-7 46" /><path d="M128 400 l-7 46" />
<path d="M190 440 l-7 46" /><path d="M244 410 l-7 46" />
</g>
<g stroke-width="1.6" opacity="0.3">
<path d="M24 520 l-9 56" /><path d="M88 560 l-9 56" /><path d="M150 530 l-9 56" />
<path d="M206 580 l-9 56" /><path d="M54 640 l-9 56" /><path d="M118 620 l-9 56" />
<path d="M182 660 l-9 56" /><path d="M240 630 l-9 56" /><path d="M40 740 l-9 56" />
<path d="M104 760 l-9 56" /><path d="M168 730 l-9 56" /><path d="M232 770 l-9 56" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

public/themes/outdoor-header.svg
+57
View File
@@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Outdoor, obere Leiste: blauer Himmel mit Schleierwolken.
Die Leiste ist nur 80 px hoch und traegt Text - deshalb keine kraeftigen
Kontraste, sondern ein weicher Verlauf und Wolken aus unscharfen Ellipsen.
Der Schleier darueber kommt aus dem Theme (index.css), nicht aus dieser
Datei: so tont derselbe Himmel im Dunkelmodus zur Nacht ab.
-->
<defs>
<linearGradient id="himmel" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#5eb3e4" />
<stop offset="0.55" stop-color="#8fcdec" />
<stop offset="1" stop-color="#cfe8f5" />
</linearGradient>
<filter id="weich" x="-30%" y="-120%" width="160%" height="340%">
<feGaussianBlur stdDeviation="9" />
</filter>
<filter id="sehrWeich" x="-40%" y="-200%" width="180%" height="500%">
<feGaussianBlur stdDeviation="20" />
</filter>
</defs>
<rect width="1600" height="80" fill="url(#himmel)" />
<!-- Sonnenschein oben links, gerade so sichtbar -->
<ellipse cx="240" cy="4" rx="260" ry="60" fill="#fff6d8" opacity="0.5" filter="url(#sehrWeich)" />
<!-- Wolkenbaenke: je drei bis vier Ellipsen, damit die Kanten unregelmaessig sind -->
<g fill="#ffffff" filter="url(#weich)">
<g opacity="0.85">
<ellipse cx="150" cy="52" rx="120" ry="20" />
<ellipse cx="230" cy="44" rx="80" ry="16" />
<ellipse cx="86" cy="58" rx="70" ry="14" />
</g>
<g opacity="0.6">
<ellipse cx="520" cy="30" rx="150" ry="17" />
<ellipse cx="610" cy="24" rx="90" ry="13" />
</g>
<g opacity="0.8">
<ellipse cx="880" cy="58" rx="170" ry="22" />
<ellipse cx="960" cy="50" rx="110" ry="16" />
<ellipse cx="800" cy="62" rx="90" ry="15" />
</g>
<g opacity="0.55">
<ellipse cx="1240" cy="26" rx="140" ry="16" />
<ellipse cx="1330" cy="34" rx="100" ry="14" />
</g>
<g opacity="0.78">
<ellipse cx="1520" cy="56" rx="150" ry="20" />
<ellipse cx="1440" cy="62" rx="90" ry="14" />
</g>
</g>
<!-- Dunstband am unteren Rand: laesst die Leiste sauber in den Inhalt uebergehen -->
<rect y="60" width="1600" height="20" fill="#ffffff" opacity="0.28" filter="url(#weich)" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

public/themes/outdoor-sidebar.svg
+70
View File
@@ -0,0 +1,70 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Outdoor, Seitenleiste: Wiese, die von unten hereinwaechst.
Der obere Teil ist absichtlich leer (durchsichtig): dort stehen die
Menuepunkte. Das Gras sitzt in den unteren rund 300 px, wo die Leiste
ohnehin frei ist, und wird nach oben hin blasser.
Gezeichnet mit quadratischen Bezierkurven statt Bildpunkten - die Halme
bleiben damit in jeder Hoehe scharf.
-->
<defs>
<linearGradient id="wiese" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7bbf5a" stop-opacity="0" />
<stop offset="0.45" stop-color="#6fb350" stop-opacity="0.55" />
<stop offset="1" stop-color="#4e8f39" stop-opacity="0.95" />
</linearGradient>
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#a8d68f" stop-opacity="0" />
<stop offset="1" stop-color="#a8d68f" stop-opacity="0.35" />
</linearGradient>
<filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="14" />
</filter>
</defs>
<!-- Gruener Schein, der den Uebergang traegt -->
<rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
<!-- Erdreich und Wiesenflaeche -->
<path d="M0 760 C 60 742 120 754 180 744 C 216 738 240 746 260 740 L260 900 L0 900 Z" fill="url(#wiese)" />
<!-- Hintere Halmreihe: hell, duenn, hoch -->
<g stroke="#8fca6e" stroke-width="2.4" stroke-linecap="round" fill="none" opacity="0.5">
<path d="M12 772 Q 6 720 20 686" />
<path d="M34 768 Q 40 716 30 676" />
<path d="M58 774 Q 52 726 66 692" />
<path d="M84 766 Q 92 714 82 680" />
<path d="M110 772 Q 104 722 118 690" />
<path d="M136 764 Q 144 712 134 678" />
<path d="M162 770 Q 156 720 170 688" />
<path d="M190 766 Q 198 716 188 684" />
<path d="M216 772 Q 210 724 224 694" />
<path d="M242 768 Q 250 718 240 686" />
</g>
<!-- Vordere Halmreihe: dunkler, kraeftiger, kuerzer -->
<g stroke="#3f7d2e" stroke-width="3.6" stroke-linecap="round" fill="none" opacity="0.85">
<path d="M0 830 Q 8 786 24 758" />
<path d="M24 836 Q 18 792 6 764" />
<path d="M48 828 Q 58 784 74 756" />
<path d="M72 838 Q 66 794 54 766" />
<path d="M98 830 Q 108 786 124 760" />
<path d="M122 840 Q 116 796 104 768" />
<path d="M148 828 Q 158 784 174 758" />
<path d="M172 838 Q 166 794 154 764" />
<path d="M198 832 Q 208 788 224 760" />
<path d="M222 840 Q 216 796 204 768" />
<path d="M248 830 Q 258 786 260 764" />
</g>
<!-- Ein paar Blueten, damit es nicht nach Rasenteppich aussieht -->
<g opacity="0.8">
<circle cx="42" cy="742" r="4" fill="#f7e07a" />
<circle cx="128" cy="726" r="3.4" fill="#f7f3e0" />
<circle cx="206" cy="748" r="3.8" fill="#f7e07a" />
<circle cx="88" cy="800" r="3" fill="#f7f3e0" />
<circle cx="186" cy="812" r="3.4" fill="#f7e07a" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

public/themes/pixel-header.svg
+68
View File
@@ -0,0 +1,68 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 20" width="400" height="20" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid slice">
<!--
Pixel Art, obere Leiste: 8-bit-Himmel mit Wolken und Huegelkante.
Der viewBox ist absichtlich winzig (400 x 20): eine Einheit ist ein
Bildpunkt, und die Grafik wird von der Leiste hochskaliert. Zusammen mit
shape-rendering="crispEdges" bleiben die Kanten hart - genau das, was ein
Pixelbild ausmacht. Ein feiner Verlauf waere hier ein Stilbruch, deshalb
liegen die Himmelstoene in Baendern uebereinander.
-->
<!-- Himmel in Stufen statt Verlauf -->
<rect width="400" height="6" fill="#7ec0e8" />
<rect y="6" width="400" height="5" fill="#96cfee" />
<rect y="11" width="400" height="4" fill="#b3dcf3" />
<rect y="15" width="400" height="5" fill="#cbe8f7" />
<!-- Sonne: ein Quadrat mit abgesetzter Ecke, wie in alten Spielen -->
<g fill="#ffe98a">
<rect x="26" y="2" width="8" height="8" />
<rect x="24" y="4" width="12" height="4" />
<rect x="28" y="0" width="4" height="12" />
</g>
<!-- Wolken: Bloecke, keine Rundungen -->
<g fill="#ffffff">
<rect x="70" y="4" width="16" height="3" />
<rect x="74" y="2" width="9" height="3" />
<rect x="66" y="7" width="24" height="3" />
<rect x="150" y="8" width="20" height="3" />
<rect x="156" y="6" width="10" height="3" />
<rect x="146" y="11" width="28" height="2" />
<rect x="248" y="3" width="14" height="3" />
<rect x="252" y="1" width="8" height="3" />
<rect x="244" y="6" width="22" height="3" />
<rect x="330" y="7" width="18" height="3" />
<rect x="335" y="5" width="9" height="3" />
<rect x="326" y="10" width="26" height="2" />
</g>
<!-- Vogelschwarm: je zwei Bildpunkte -->
<g fill="#4a5a66">
<rect x="200" y="4" width="2" height="1" />
<rect x="203" y="3" width="2" height="1" />
<rect x="290" y="6" width="2" height="1" />
<rect x="293" y="5" width="2" height="1" />
</g>
<!-- Huegelkante am unteren Rand, treppenfoermig -->
<g fill="#5fa83f">
<rect y="17" width="400" height="3" />
<rect x="0" y="16" width="40" height="1" />
<rect x="52" y="15" width="34" height="2" />
<rect x="60" y="14" width="18" height="1" />
<rect x="120" y="16" width="46" height="1" />
<rect x="196" y="15" width="40" height="2" />
<rect x="206" y="14" width="20" height="1" />
<rect x="280" y="16" width="52" height="1" />
<rect x="348" y="15" width="36" height="2" />
</g>
<!-- Grasspitzen als hellere Kante -->
<g fill="#7ec957">
<rect x="0" y="17" width="400" height="1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

public/themes/pixel-sidebar.svg
+66
View File
@@ -0,0 +1,66 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 225" width="65" height="225" shape-rendering="crispEdges" preserveAspectRatio="xMidYMax slice">
<!--
Pixel Art, Seitenleiste: Steinmauer, von unten aufgemauert.
Der viewBox ist winzig (65 x 225, eine Einheit = ein Bildpunkt), damit die
Mauer beim Hochskalieren blockig bleibt; shape-rendering="crispEdges" haelt
die Kanten hart. Oben ist die Grafik leer - dort stehen die Menuepunkte.
Nach oben hin wird die Mauer **stufenweise** durchsichtig, Reihe um Reihe.
Ein weicher Verlauf waere hier ein Stilbruch: Pixelgrafik kennt keine
Zwischentoene, sie staffelt.
Jeder Stein ist 12 x 6 Punkte, versetzt gemauert, mit heller Kante oben und
dunkler unten - damit taeuscht Pixelgrafik Tiefe vor.
-->
<defs>
<g id="stein">
<rect width="12" height="6" fill="#8a8f7a" />
<rect width="12" height="1" fill="#a8ad96" />
<rect y="5" width="12" height="1" fill="#5f6553" />
<rect x="11" width="1" height="6" fill="#5f6553" />
</g>
<!-- Eine ganze Reihe; der Versatz kommt beim Aufruf -->
<g id="reihe">
<use href="#stein" x="0" /><use href="#stein" x="13" /><use href="#stein" x="26" />
<use href="#stein" x="39" /><use href="#stein" x="52" />
</g>
</defs>
<!-- Reihen von unten nach oben, jede zweite um einen halben Stein versetzt -->
<use href="#reihe" y="219" opacity="1" />
<use href="#reihe" x="-6" y="212" opacity="1" />
<use href="#reihe" y="205" opacity="1" />
<use href="#reihe" x="-6" y="198" opacity="1" />
<use href="#reihe" y="191" opacity="0.9" />
<use href="#reihe" x="-6" y="184" opacity="0.8" />
<use href="#reihe" y="177" opacity="0.7" />
<use href="#reihe" x="-6" y="170" opacity="0.6" />
<use href="#reihe" y="163" opacity="0.5" />
<use href="#reihe" x="-6" y="156" opacity="0.4" />
<use href="#reihe" y="149" opacity="0.32" />
<use href="#reihe" x="-6" y="142" opacity="0.24" />
<use href="#reihe" y="135" opacity="0.18" />
<use href="#reihe" x="-6" y="128" opacity="0.13" />
<use href="#reihe" y="121" opacity="0.09" />
<use href="#reihe" x="-6" y="114" opacity="0.06" />
<use href="#reihe" y="107" opacity="0.03" />
<!-- Moos in den Fugen: sonst wirkt die Mauer steril -->
<g fill="#6f9c4a">
<rect x="4" y="218" width="3" height="1" />
<rect x="30" y="211" width="4" height="1" />
<rect x="17" y="204" width="2" height="1" />
<rect x="46" y="197" width="3" height="1" />
<rect x="9" y="190" width="4" height="1" opacity="0.9" />
<rect x="55" y="183" width="3" height="1" opacity="0.8" />
<rect x="24" y="176" width="2" height="1" opacity="0.7" />
<rect x="38" y="162" width="3" height="1" opacity="0.5" />
</g>
<!-- Zwei ausgebrochene Steine, damit die Mauer nicht zu regelmaessig ist -->
<g fill="#5f6553">
<rect x="26" y="219" width="12" height="6" />
<rect x="7" y="170" width="12" height="6" opacity="0.6" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB