diff --git a/public/style.css b/public/style.css index 265f727..840993b 100644 --- a/public/style.css +++ b/public/style.css @@ -8,7 +8,7 @@ --text-secondary: #a0a0a0; --hover-overlay: rgba(255, 255, 255, 0.1); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); - --radius: 4px; + --radius: 8px; --transition: all 0.25s ease; --transition-fast: all 0.15s ease; --blur-amount: 10px; @@ -18,7 +18,8 @@ margin: 0; padding: 0; box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, sans-serif; } body { @@ -49,15 +50,16 @@ header { } .logo h1 { - font-size: 1.3rem; + font-size: 1.2rem; color: var(--text-primary); font-weight: 500; letter-spacing: 0.5px; + margin-bottom: 1px; } .logo-icon { color: var(--text-primary); - font-size: 1.5rem; + font-size: 1rem; } .search-bar { @@ -78,11 +80,12 @@ header { color: var(--text-primary); font-size: 1rem; transition: var(--transition); + background-color: var(--surface-light); } .search-input:focus { outline: none; - box-shadow: 0 0 0 2px var(--primary); + background-color: var(--hover-overlay); } .search-button { @@ -112,7 +115,8 @@ header { border-radius: 50%; background-color: var(--surface-light); color: var(--text-primary); - font-size: 1.1rem; + font-size: 1rem; + font-weight: 700; transition: var(--transition); cursor: pointer; text-decoration: none; @@ -121,7 +125,6 @@ header { .github-button:hover { background-color: var(--hover-overlay); - transform: scale(1.05); } .container { @@ -131,12 +134,13 @@ header { perspective: 1000px; } - -.trending-grid, -.search-grid { +.trending-grid, .search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 24px; + gap: 12px; +} + +.search-grid { margin-top: 32px; } @@ -162,7 +166,6 @@ header { position: relative; overflow: hidden; padding-top: 56.25%; - } .thumbnail { @@ -200,6 +203,7 @@ header { margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: var(--transition); @@ -245,7 +249,6 @@ header { gap: 4px; } - .page { opacity: 0; visibility: hidden; @@ -282,8 +285,6 @@ header { filter: blur(var(--blur-amount)); } - - .transition-overlay { position: fixed; top: 0; @@ -313,9 +314,13 @@ header { border-radius: 0; } - .skeleton { - background: linear-gradient(90deg, var(--surface), var(--surface-light), var(--surface)); + background: linear-gradient( + 90deg, + var(--surface), + var(--surface-light), + var(--surface) + ); background-size: 200% 100%; animation: shine 1.5s infinite; border-radius: var(--radius); @@ -352,7 +357,6 @@ header { width: 40%; } - .video-player-container { display: flex; flex-direction: column; @@ -362,7 +366,7 @@ header { .player-wrapper { position: relative; padding-bottom: 56.25%; - + height: 0; overflow: hidden; border-radius: var(--radius); @@ -440,7 +444,6 @@ header { font-size: 1.2rem; } - .related-videos { margin-top: 32px; } @@ -455,7 +458,7 @@ header { } .section-title::after { - content: ''; + content: ""; position: absolute; left: 0; bottom: -4px; @@ -470,8 +473,6 @@ header { gap: 20px; } - - .search-heading { margin-bottom: 16px; display: flex; @@ -501,7 +502,6 @@ header { font-size: 1.1rem; } - @keyframes fadeIn { from { opacity: 0; @@ -525,8 +525,6 @@ header { transform: translateY(0); } - - .preparation-overlay { position: absolute; top: 0; @@ -571,16 +569,18 @@ header { } .preparation-progress-bar::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: linear-gradient(90deg, - rgba(255, 255, 255, 0.1), - rgba(255, 255, 255, 0.2), - rgba(255, 255, 255, 0.1)); + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.1), + rgba(255, 255, 255, 0.2), + rgba(255, 255, 255, 0.1) + ); animation: shimmer 1.5s infinite; transform: translateX(-100%); } @@ -609,8 +609,6 @@ header { } } - - .loading-container { display: flex; justify-content: center; @@ -637,9 +635,7 @@ header { } } - @media (max-width: 768px) { - .trending-grid, .search-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); @@ -667,7 +663,6 @@ header { } @media (max-width: 480px) { - .trending-grid, .search-grid { grid-template-columns: 1fr; @@ -682,8 +677,6 @@ header { } } - - .channel-header { border-radius: var(--radius); overflow: hidden; @@ -713,7 +706,6 @@ header { } .channel-avatar-container { - margin-top: -40px; flex-shrink: 0; } @@ -811,19 +803,19 @@ header { align-items: center; text-align: center; } - + .channel-avatar-container { margin-top: -50px; } - + .channel-title-container { justify-content: center; } - + .channel-description { text-align: left; } - + .channel-videos-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } @@ -833,4 +825,4 @@ header { .channel-videos-grid { grid-template-columns: 1fr; } -} \ No newline at end of file +}