mmcghen/IKnowThem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve layout and visual styles for search pages

Browse Source 
Enhanced the MainLayout and search pages with improved CSS for smoother scrolling, better overflow handling, and more visually appealing backgrounds. Updated the SearchShows match result section for a cleaner, more modern look. Refined keyframe animations and mobile responsiveness for a more polished user experience.
This commit is contained in:
Michael McGhen
2025-08-26 09:29:12 -04:00
parent 9f238ebafc
commit 26a7b04e82
3 changed files with 344 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MovieActorLookup/Components/Pages/SearchMovies.razor
+62 -13
View File
@@ -176,20 +176,24 @@
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: -100px;
left: -100px;
right: -100px;
bottom: -100px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
opacity: 0.3;
pointer-events: none;
animation: float 20s ease-in-out infinite;
animation: floatContained 20s ease-in-out infinite;
z-index: -1;
will-change: transform;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.search-container {
@@ -199,32 +203,51 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
z-index: 1;
overflow: hidden;
}
.search-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: -100px;
left: -100px;
right: -100px;
bottom: -100px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
opacity: 0.3;
pointer-events: none;
animation: float 20s ease-in-out infinite;
animation: floatContained 20s ease-in-out infinite;
z-index: -1;
overflow: hidden;
will-change: transform;
backface-visibility: hidden;
transform-style: preserve-3d;
}
@@keyframes float {
@@keyframes floatContained {
0%, 100%
{
transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg) scale(1);
}
25% {
transform: translateY(-5px) rotate(45deg) scale(1.02);
}
50% {
transform: translateY(-20px) rotate(180deg);
transform: translateY(-8px) rotate(90deg) scale(0.98);
}
75% {
transform: translateY(-5px) rotate(135deg) scale(1.02);
}
}
html {
overflow-x: hidden;
scroll-behavior: smooth;
}
.search-header {
@@ -799,6 +822,7 @@
font-weight: 500;
}
/* Mobile optimization */
@@media (max-width: 768px) {
.search-container
@@ -828,6 +852,31 @@
gap: 1rem;
}
body::before,
.search-container::before {
animation: floatContained 25s ease-in-out infinite;
}
@@keyframes floatContained {
0%, 100%
{
transform: translateY(0px) rotate(0deg) scale(1);
}
25% {
transform: translateY(-3px) rotate(45deg) scale(1.01);
}
50% {
transform: translateY(-5px) rotate(90deg) scale(0.99);
}
75% {
transform: translateY(-3px) rotate(135deg) scale(1.01);
}
}
}
</style>