Mathias Wagner
22eca7d4e0
Some checks failed
Publish Docker image / Push Docker image to Docker Hub (push) Failing after 7m12s
182 lines
4.0 KiB
Sass
182 lines
4.0 KiB
Sass
// YouTube Search Component Styles
|
|
@import '../colors'
|
|
|
|
.search-group
|
|
margin-bottom: 1.5rem
|
|
|
|
.search-container
|
|
position: relative
|
|
margin-bottom: 1rem
|
|
|
|
.search-input
|
|
width: 100%
|
|
padding: 0.75rem 2.5rem 0.75rem 1rem
|
|
border-radius: 0.5rem
|
|
background: rgba(255, 255, 255, 0.1)
|
|
border: 1px solid rgba(255, 255, 255, 0.2)
|
|
color: $text
|
|
font-size: 1rem
|
|
|
|
&:focus
|
|
outline: none
|
|
border-color: $primary
|
|
box-shadow: 0 0 0 3px rgba($primary, 0.3)
|
|
|
|
.spinner-icon, .clear-icon
|
|
position: absolute
|
|
top: 50%
|
|
right: 1rem
|
|
transform: translateY(-50%)
|
|
color: $text-muted
|
|
|
|
.clear-icon
|
|
cursor: pointer
|
|
&:hover
|
|
color: $text
|
|
|
|
.selected-video
|
|
background: rgba($card-bg, 0.6)
|
|
border-radius: 0.75rem
|
|
padding: 1rem
|
|
margin-bottom: 1.5rem
|
|
border: 1px solid rgba($primary, 0.3)
|
|
|
|
.preview-header
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: center
|
|
margin-bottom: 0.75rem
|
|
|
|
h4
|
|
margin: 0
|
|
color: $primary
|
|
|
|
.preview-toggle
|
|
background: transparent
|
|
border: none
|
|
color: $secondary
|
|
cursor: pointer
|
|
padding: 0.25rem 0.5rem
|
|
border-radius: 0.25rem
|
|
font-size: 0.85rem
|
|
|
|
&:hover
|
|
background: rgba($secondary, 0.15)
|
|
|
|
.video-details
|
|
display: flex
|
|
gap: 1rem
|
|
margin-bottom: 1rem
|
|
|
|
.selected-thumbnail
|
|
width: 120px
|
|
height: 90px
|
|
object-fit: cover
|
|
border-radius: 0.25rem
|
|
|
|
.selected-info
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
|
|
h4
|
|
margin: 0 0 0.25rem 0
|
|
font-size: 1rem
|
|
|
|
p
|
|
margin: 0
|
|
color: $text-muted
|
|
font-size: 0.9rem
|
|
|
|
.video-preview
|
|
position: relative
|
|
padding-bottom: 56.25% // 16:9 aspect ratio
|
|
height: 0
|
|
overflow: hidden
|
|
border-radius: 0.5rem
|
|
margin-top: 1rem
|
|
|
|
iframe
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
border-radius: 0.5rem
|
|
|
|
.search-results
|
|
background: rgba($card-bg, 0.6)
|
|
border-radius: 0.75rem
|
|
padding: 1rem
|
|
max-height: 400px
|
|
overflow-y: auto
|
|
|
|
h4
|
|
margin-top: 0
|
|
margin-bottom: 0.75rem
|
|
color: $primary
|
|
font-size: 0.9rem
|
|
text-transform: uppercase
|
|
letter-spacing: 0.05em
|
|
|
|
.search-result
|
|
display: flex
|
|
padding: 0.75rem
|
|
border-radius: 0.5rem
|
|
gap: 1rem
|
|
cursor: pointer
|
|
transition: background-color 0.2s ease
|
|
margin-bottom: 0.5rem
|
|
|
|
&:hover
|
|
background-color: rgba(255, 255, 255, 0.05)
|
|
|
|
&.selected
|
|
background-color: rgba($primary, 0.15)
|
|
border-left: 3px solid $primary
|
|
|
|
.result-thumbnail-container
|
|
position: relative
|
|
width: 120px
|
|
flex-shrink: 0
|
|
|
|
.result-thumbnail
|
|
width: 120px
|
|
height: 68px
|
|
object-fit: cover
|
|
border-radius: 0.25rem
|
|
|
|
.preview-button
|
|
position: absolute
|
|
right: 0.25rem
|
|
bottom: 0.25rem
|
|
background: rgba(0, 0, 0, 0.6)
|
|
border: none
|
|
color: white
|
|
width: 24px
|
|
height: 24px
|
|
border-radius: 50%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
opacity: 0.7
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
opacity: 1
|
|
background: rgba($secondary, 0.8)
|
|
|
|
.result-info
|
|
flex-grow: 1
|
|
|
|
h4
|
|
margin: 0 0 0.25rem 0
|
|
font-size: 0.95rem
|
|
text-transform: none
|
|
letter-spacing: normal
|
|
|
|
p
|
|
margin: 0
|
|
color: $text-muted
|
|
font-size: 0.85rem
|