wip
This commit is contained in:
1 parent
b1add2f055
commit
57bca26ad2
8 files changed
+125
-132
No files matched your search
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user