mirror of
https://github.com/vitaliiromanenko/popcorn-md.git
synced 2026-07-22 07:45:25 +00:00
a5dd8ec4db
Implement arrow key navigation for movie search results. - Arrow Up/Down moves focus between movie cards - Enter triggers selection of the focused card - Escape closes the search modal - Focused card scrolls into view for long result lists Add .movie-item class for consistent styling with hover/focus states.
145 lines
2.4 KiB
CSS
145 lines
2.4 KiB
CSS
.popcorn-md-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.searchModal-container h1{
|
|
margin: 5px;
|
|
}
|
|
|
|
.searchModal-container input {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.searchModal-container .movie-list {
|
|
margin-top: 10px;
|
|
overflow-x: auto;
|
|
scroll-behavior: smooth;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.movie-item {
|
|
display: flex;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
flex-direction: row;
|
|
margin: 10px 0px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
position: relative;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.movie-item:hover {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.movie-item.focused {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.movie-item .movie-photo {
|
|
flex-shrink: 0;
|
|
padding: 10px;
|
|
}
|
|
|
|
.movie-item .movie-photo img{
|
|
width: 80px;
|
|
height: 120px;
|
|
}
|
|
.movie-item .movie-info {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
padding: 5px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.movie-item .movie-info h2{
|
|
margin-top: 2px;
|
|
margin-bottom: 3px;
|
|
margin-right: 3px;
|
|
display: inline-block;
|
|
}
|
|
.movie-item .movie-info span.original-name{
|
|
font-size: 0.8em;
|
|
color: #7f7f7f;
|
|
display: inline-block;
|
|
}
|
|
.movie-item .movie-info p {
|
|
font-size: 0.7em;
|
|
margin-top: 3px;
|
|
text-align: justify;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.movie-item .genres .genre {
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
padding: .2em .5em .3em;
|
|
margin: .25em .1em;
|
|
color: #fff;
|
|
background-image: linear-gradient(90deg,#ff8901,#db1d5f);
|
|
font-weight: 700;
|
|
font-size: 0.6em;
|
|
text-transform: uppercase;
|
|
}
|
|
.movie-subinfo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1em;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.movie-subinfo span.realise-year{
|
|
display: block;
|
|
}
|
|
|
|
.movie-subinfo .rating {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.movie-subinfo .rating .star {
|
|
position: relative;
|
|
font-size: 1em;
|
|
line-height: 1;
|
|
display: inline-block;
|
|
}
|
|
|
|
.movie-subinfo .rating .star.empty {
|
|
color: transparent;
|
|
-webkit-text-stroke: 1px gold;
|
|
}
|
|
|
|
.movie-subinfo .rating .star.full {
|
|
color: gold;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
.movie-subinfo .rating .star.part {
|
|
color: gold;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.adult_element {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.adult_element svg {
|
|
stroke: #ff8901
|
|
}
|