diff --git a/client/src/common/styles/components/song-form-overlay.sass b/client/src/common/styles/components/song-form-overlay.sass new file mode 100644 index 0000000..463c999 --- /dev/null +++ b/client/src/common/styles/components/song-form-overlay.sass @@ -0,0 +1,54 @@ +// Song Form Overlay styles +@import '../colors' + +.song-form-overlay + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% + background-color: rgba(0, 0, 0, 0.75) + z-index: 1000 + display: flex + align-items: center + justify-content: center + padding: 2rem + backdrop-filter: blur(5px) + + .song-form + background-color: $card-bg + border: 4px solid #000 + box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5) + padding: 2rem + width: 100% + max-width: 600px + max-height: 90vh + overflow-y: auto + position: relative + image-rendering: pixelated + + h3 + margin-top: 0 + color: $primary + font-family: 'Press Start 2P', monospace + text-transform: uppercase + letter-spacing: 1px + text-shadow: 2px 2px 0 #000 + margin-bottom: 1.5rem + position: relative + + &:after + content: '' + display: block + width: 100% + height: 4px + background-color: $primary + margin-top: 0.75rem + box-shadow: 2px 2px 0 #000 + image-rendering: pixelated + + .form-actions + display: flex + justify-content: flex-end + gap: 1rem + margin-top: 2rem diff --git a/client/src/common/styles/components/song-submission-screen.sass b/client/src/common/styles/components/song-submission-screen.sass index 2831ef1..d059d4c 100644 --- a/client/src/common/styles/components/song-submission-screen.sass +++ b/client/src/common/styles/components/song-submission-screen.sass @@ -64,6 +64,7 @@ font-size: 1.2rem text-transform: uppercase margin-bottom: 1.5rem + text-shadow: 2px 2px 0 #000 &:after content: '' @@ -72,43 +73,59 @@ height: 4px background-color: $secondary margin-top: 0.5rem + box-shadow: 2px 2px 0 #000 + image-rendering: pixelated .song-item - margin-bottom: 1rem - padding: 0.75rem + margin-bottom: 1.5rem + padding: 1rem background-color: rgba(0, 0, 0, 0.3) border: 3px solid #000 position: relative + box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5) + transition: transform 0.2s ease + + &:hover + transform: translateX(2px) translateY(-2px) + box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5) .song-title font-weight: bold font-family: 'Press Start 2P', monospace font-size: 0.9rem color: $text - margin-bottom: 0.5rem + margin-bottom: 0.75rem + text-shadow: 1px 1px 0 #000 + letter-spacing: 0.5px .song-channel font-size: 0.8rem color: $text-muted + font-family: 'Press Start 2P', monospace + letter-spacing: 0.5px + text-shadow: 1px 1px 0 rgba(0,0,0,0.5) .remove-song position: absolute - top: 0.5rem - right: 0.5rem + top: 0.75rem + right: 0.75rem background: $danger - color: #000 + color: #fff border: 2px solid #000 - width: 24px - height: 24px + width: 28px + height: 28px font-family: 'Press Start 2P', monospace font-size: 0.7rem display: flex align-items: center justify-content: center cursor: pointer + box-shadow: 2px 2px 0 #000 + image-rendering: pixelated &:hover - transform: scale(1.1) + transform: translateY(-2px) + box-shadow: 2px 4px 0 #000 display: flex align-items: center gap: 0.5rem @@ -122,6 +139,7 @@ .song-card background-color: rgba(255, 255, 255, 0.05) border-radius: 0.5rem + box-sizing: border-box padding: 1rem position: relative transition: transform 0.2s, box-shadow 0.2s @@ -172,7 +190,9 @@ cursor: pointer gap: 0.5rem transition: all 0.2s - margin-top: 1rem + margin-top: 1.5rem + margin-bottom: 1rem + clear: both &:hover background-color: rgba($primary, 0.1) diff --git a/client/src/common/styles/components/voting-screen.sass b/client/src/common/styles/components/voting-screen.sass index 80bb9f5..6929420 100644 --- a/client/src/common/styles/components/voting-screen.sass +++ b/client/src/common/styles/components/voting-screen.sass @@ -65,6 +65,7 @@ perspective: 1000px .song-card + box-sizing: border-box width: 100% max-width: 600px background-color: $card-bg diff --git a/client/src/common/styles/components/youtube-search.sass b/client/src/common/styles/components/youtube-search.sass index 3ff6c3f..9242f06 100644 --- a/client/src/common/styles/components/youtube-search.sass +++ b/client/src/common/styles/components/youtube-search.sass @@ -14,7 +14,6 @@ background: rgba(0, 0, 0, 0.3) border: 3px solid #000 color: $text - font-size: 1rem font-family: 'Press Start 2P', monospace font-size: 0.8rem box-shadow: 4px 4px 0 #000 @@ -46,52 +45,6 @@ box-shadow: 4px 4px 0 #000 padding: 1rem margin-bottom: 1.5rem - - .video-details - h3 - margin-top: 0.5rem - margin-bottom: 0.5rem - color: $secondary - font-family: 'Press Start 2P', monospace - font-size: 0.9rem - - p - color: $text-muted - margin: 0 0 0.5rem - font-family: 'Press Start 2P', monospace - font-size: 0.7rem - - .btn - margin-top: 1rem - - .search-results - .result-item - background: rgba($card-bg, 0.7) - border: 2px solid #000 - margin-bottom: 0.5rem - padding: 0.75rem - cursor: pointer - transition: all 0.2s ease - - &:hover - border-color: $primary - background: rgba($card-bg, 0.9) - transform: translateX(4px) - - &.selected - border-color: $secondary - border-width: 3px - box-shadow: 0 0 8px rgba($secondary, 0.5) - - .result-title - font-family: 'Press Start 2P', monospace - font-size: 0.8rem - margin: 0 0 0.25rem - color: $text - - .result-channel - font-size: 0.7rem - color: $text-muted border: 1px solid rgba($primary, 0.3) .preview-header @@ -104,14 +57,12 @@ margin: 0 color: $primary - .preview-toggle - background: transparent - border: none + .external-link color: $secondary - cursor: pointer + text-decoration: none + font-size: 0.85rem padding: 0.25rem 0.5rem border-radius: 0.25rem - font-size: 0.85rem &:hover background: rgba($secondary, 0.15) @@ -121,11 +72,31 @@ gap: 1rem margin-bottom: 1rem - .selected-thumbnail + .thumbnail-container + position: relative width: 120px - height: 90px - object-fit: cover - border-radius: 0.25rem + flex-shrink: 0 + + .selected-thumbnail + width: 120px + height: 90px + object-fit: cover + border-radius: 0.25rem + + .play-overlay + position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) + color: white + background: rgba(0, 0, 0, 0.6) + width: 36px + height: 36px + border-radius: 50% + display: flex + align-items: center + justify-content: center + opacity: 0.7 .selected-info display: flex @@ -140,7 +111,6 @@ margin: 0 color: $text-muted font-size: 0.9rem - .video-preview position: relative padding-bottom: 56.25% @@ -159,11 +129,16 @@ border-radius: 0.5rem .search-results - background: rgba($card-bg, 0.6) + background: rgba($card-bg, 0.8) border-radius: 0.75rem padding: 1rem - max-height: 400px + max-height: 300px overflow-y: auto + margin-bottom: 1.5rem + border: 2px solid #000 + box-shadow: 4px 4px 0 #000 + position: relative + z-index: 10 h4 margin-top: 0 diff --git a/client/src/common/styles/main.sass b/client/src/common/styles/main.sass index 46f402b..ddde40d 100644 --- a/client/src/common/styles/main.sass +++ b/client/src/common/styles/main.sass @@ -11,6 +11,7 @@ @import './components/results-screen' @import './components/youtube-embed' @import './components/youtube-search' +@import './components/song-form-overlay' // Global styles html, body @@ -362,6 +363,7 @@ h1, h2, h3 margin-bottom: 2rem .song-card + box-sizing: border-box background-color: rgba($card-bg, 0.8) backdrop-filter: blur(10px) border-radius: 0.75rem diff --git a/client/src/components/SongSubmissionScreen.jsx b/client/src/components/SongSubmissionScreen.jsx index 200ba1e..69e417b 100644 --- a/client/src/components/SongSubmissionScreen.jsx +++ b/client/src/components/SongSubmissionScreen.jsx @@ -321,10 +321,11 @@ const SongSubmissionScreen = () => { {isFormVisible && ( -