midas/schiffe-versenken
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Midas Wollinger
2026-07-29 12:53:44 +02:00
parent 3279d6a67e
commit 2698ac751a
4 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
static/css/style.css
View File

@ -148,34 +148,34 @@ button:disabled { opacity: 0.4; cursor: not-allowed; }
font-size: 18px;
}
/* --- Dwarf ship sprite, built purely from CSS shapes --- */
.dwarf {
/* --- Wappler ship sprite, built purely from CSS shapes --- */
.wappler {
position: relative;
width: 24px;
height: 26px;
}
.dwarf .hat {
.wappler .cap {
position: absolute;
top: -2px;
top: -1px;
left: 2px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 12px solid var(--hat, #c0392b);
width: 18px;
height: 9px;
background: var(--hat, #c0392b);
border-radius: 9px 9px 3px 3px;
transform: rotate(-8deg);
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.dwarf .hat::after {
.wappler .cap::after {
content: "";
position: absolute;
top: 11px;
left: -6px;
width: 12px;
top: 6px;
right: -7px;
width: 10px;
height: 4px;
background: var(--hat, #c0392b);
border-radius: 2px;
border-radius: 0 4px 4px 0;
}
.dwarf .head {
.wappler .head {
position: absolute;
top: 9px;
left: 4px;
@ -184,28 +184,38 @@ button:disabled { opacity: 0.4; cursor: not-allowed; }
background: #f0c090;
border-radius: 50% 50% 45% 45%;
}
.dwarf .beard {
.wappler .stoppel {
position: absolute;
top: 15px;
left: 3px;
width: 18px;
height: 12px;
background: #d9d9d9;
border-radius: 0 0 9px 9px;
top: 17px;
left: 4px;
width: 16px;
height: 6px;
background: rgba(60, 40, 20, 0.28);
border-radius: 0 0 8px 8px;
}
.dwarf .eyes {
.wappler .brille {
position: absolute;
top: 13px;
left: 7px;
width: 10px;
height: 2px;
background: transparent;
box-shadow: 0 0 0 1px #2a1c00, 8px 0 0 -1px #2a1c00;
left: 5px;
width: 14px;
height: 4px;
background: #111;
border-radius: 2px;
box-shadow: 2px -1px 0 -1px rgba(255,255,255,0.6);
}
.wappler .grinser {
position: absolute;
top: 18px;
left: 8px;
width: 8px;
height: 4px;
border-bottom: 2px solid #7a4a2a;
border-radius: 0 0 8px 8px;
}
.cell.hit .dwarf { filter: grayscale(1) brightness(0.6); transform: rotate(90deg); }
.cell.hit .dwarf .eyes { box-shadow: none; }
.cell.hit .dwarf::before {
.cell.hit .wappler { filter: grayscale(1) brightness(0.6); transform: rotate(90deg); }
.cell.hit .wappler .brille { box-shadow: none; }
.cell.hit .wappler::before {
content: "✕";
position: absolute;
inset: 0;