CSS Fix for Firefox

This commit is contained in:
Andreas Knuth 2026-02-02 16:49:10 -06:00
parent c632cd90b5
commit 21d7f16289
1 changed files with 19 additions and 11 deletions

View File

@ -19,13 +19,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: linear-gradient( background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0) 100%);
180deg,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.15) 40%,
rgba(0, 0, 0, 0.05) 70%,
rgba(0, 0, 0, 0) 100%
);
border-radius: 20px; border-radius: 20px;
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
@ -130,7 +124,9 @@ input[type='text'][name='aiSearchText'] {
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s; transition:
width 0.6s,
height 0.6s;
pointer-events: none; pointer-events: none;
} }
@ -190,7 +186,9 @@ select,
// Trust section container - more prominent // Trust section container - more prominent
.trust-section-container { .trust-section-container {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease; transition:
box-shadow 0.3s ease,
transform 0.3s ease;
&:hover { &:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
@ -207,7 +205,9 @@ select,
} }
.trust-icon { .trust-icon {
transition: background-color 0.2s ease, color 0.2s ease; transition:
background-color 0.2s ease,
color 0.2s ease;
} }
.trust-badge:hover .trust-icon { .trust-badge:hover .trust-icon {
@ -227,7 +227,15 @@ select,
// Search form container enhancement // Search form container enhancement
.search-form-container { .search-form-container {
transition: all 0.3s ease; transition: all 0.3s ease;
// Fallback: Etwas weniger transparent, damit es ohne Blur gut lesbar bleibt
background-color: rgba(255, 255, 255, 0.95);
// Nur anwenden, wenn der Browser backdrop-filter unterstützt
@supports (backdrop-filter: blur(10px)) {
background-color: rgba(255, 255, 255, 0.8); // Hier wieder transparenter
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);