This commit is contained in:
salam committed 2026-09-10 18:28:53 +02:00
1 parent b1add2f055
commit 57bca26ad2
8 files changed
+125 -132

No files matched your search

+31
View File
@@ -249,4 +249,35 @@ less padding in table
@apply bg-gray-100 dark:bg-gray-600/30 drop-shadow
}
}
}
.soccer-field {
width: 100%;
height: 400px;
/* Höhe nach Bedarf anpassen */
/* Linienfarbe hier flexibel definieren: */
background-color: currentColor;
/* Das SVG dient als Maske */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='black'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='black'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='black'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='black' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='black'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='black'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='black' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='black'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.soccer-field-classic {
width: 100%;
height: 400px;
background-color: transparent;
/* Hintergrund bleibt transparent */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 1050 680'%3E%3Crect x='2' y='2' width='1046' height='676' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cline x1='525' y1='0' x2='525' y2='680' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='91.5' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='525' cy='340' r='4' fill='%23ffffff'/%3E%3Crect x='0' y='138.5' width='165' height='403' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='0' y='248.5' width='55' height='183' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='110' cy='340' r='4' fill='%23ffffff'/%3E%3Cpath d='M 165 284.6 A 91.5 91.5 0 0 1 165 395.4' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='885' y='138.5' width='165' height='403' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='995' y='248.5' width='55' height='183' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='940' cy='340' r='4' fill='%23ffffff'/%3E%3Cpath d='M 885 284.6 A 91.5 91.5 0 0 0 885 395.4' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 0 10 A 10 10 0 0 0 10 0' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 0 670 A 10 10 0 0 1 10 680' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 1040 0 A 10 10 0 0 0 1050 10' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M 1040 680 A 10 10 0 0 1 1050 670' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}