app/styles/layout/_quick-update.scss
.quick-update {
position: absolute;
left: 0;
right: 0;
top: 42px;
height: 270px;
background: $secondary-background-color;
border-bottom: 1px solid darken($secondary-background-color, 3);
overflow: hidden;
.carousel {
&:not(.flickity-enabled) {
display: none;
}
}
.flickity-viewport {
@extend .container;
height: 250px;
margin-top: 15px;
overflow: visible;
.flickity-slider {
width: 100vw;
}
.quick-update-actions {
flex: 1;
border-radius: 3px;
height: 100%;
}
.quick-update-title-block {
text-align: left;
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
color: $white;
opacity: 1;
z-index: 1;
.series-title {
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.quick-update-item {
width: 305px;
height: 200px;
border-radius: 3px;
margin-right: 15px;
overflow: hidden;
animation-delay: .5s;
position: relative;
z-index: $zIndex-1;
.quick-update-media-wrapper {
background: #677086;
transition: opacity .2s ease-in;
}
&.is-selected {
.quick-update-media-wrapper {
opacity: 1;
}
}
.overlay-panel {
display: flex;
flex-direction: column;
background: $background-color;
background-size: auto 200%;
background-repeat: repeat-x;
text-align: center;
position: absolute;
right: 0;
left: 0;
z-index: $zIndex-1;
box-shadow: 0 1px 10px rgba(0, 0, 0, .8);
transform: translate(0, -125px);
transition: transform .2s ease;
}
.poster-thumb, .title-info {
transform: translate(0,0);
transition: transform .2s ease;
}
.poster-thumb {
width: 60px;
height: 80px;
margin-left: 15px;
overflow: hidden;
border-radius: 3px;
}
.title-info {
.update--entry-title {
position: absolute;
top: 0;
transition: top .2s ease;
padding-bottom: 1px;
}
small {
display: block;
opacity: .6;
font-size: 12px;
transition: opacity .2s ease;
position: absolute;
top: 18px;
}
}
.series-progress {
position: absolute;
left: 15px;
right: 15px;
bottom: 0;
font-size: 12px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.progress {
height: 5px;
margin-bottom: 5px;
z-index: $zIndex-2;
.progress-bar {
display: block;
position: relative;
height: 5px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 999em;
.progress-completed {
position: absolute;
top: 0;
left: 0;
height: 5px;
background-color: #1ABC9C;
border-radius: 999em;
}
}
}
}
&:hover {
.overlay-panel {
transform: translate(0, 0);
}
.poster-thumb, .title-info {
transform: translate(-75px,0);
}
.title-info {
small {
display: block;
opacity: 0;
font-size: 12px;
}
.update--entry-title {
top: 20px;
}
}
}
}
.action-wrapper {
.update-actions {
@extend .clearfix;
margin-top: -6px;
padding: 10px;
a {
float: left;
font-size: 12px;
line-height: 36px;
color: $body-secondary-text-color;
&:hover {
color: $body-link-color;
}
}
.button--quick-update {
font-size: 13px;
font-weight: 700;
padding: 8px 16px;
float: right;
font-family: $base-font-family;
line-height: 18px;
float: right;
.progress-count {
color: $white;
font-weight: 700;
}
svg {
fill: rgba(0,0,0,.5);
width: 18px;
height: 18px;
float: left;
margin-right: 5px;
}
}
.quick-update--modal {
float: right;
line-height: 18px;
svg {
width: 15px;
margin-right: 10px;
fill: #6f6f6f;
position: relative;
top: 6px;
}
&:hover {
svg {
fill: $body-link-color;
}
}
}
}
textarea {
height: 60px;
width: 100%;
border: none;
resize: none;
border-bottom: 1px solid $divider-color;
font-size: 12px;
padding: 15px;
}
.review-button {
margin-top: 0;
margin-bottom: 50px;
}
}
}
.flickity-prev-next-button {
top: 90px;
height: 200px;
margin-top: 10px;
bottom: 0;
border-radius: 0;
background: rgba(0,0,0,1);
transition: all .2s ease-in;
opacity: .3;
svg {
top: 14%;
}
.arrow {
fill: $white;
}
&:disabled {
opacity: 0 !important;
}
&:hover {
background: rgba(0,0,0,1);
opacity: .6;
}
&.next {
right: 0;
}
&.previous {
left: 0;
}
}
}
.quick-update--input-wrapper {
position: relative;
.pop-out {
position: absolute;
top: -1px;
right: 4px;
width: 14px;
svg {
fill: #C3C3C3;
}
&:hover {
svg {
fill: $body-text-color;
}
}
}
}
.quick-update-loading {
text-align: center;
width: 100%;
margin-top: 80px;
}
.quick-update--header {
margin-top: 15px;
h6 {
color: #a3a9b7;
font-size: 16px;
margin-bottom: 0;
line-height: 26px;
font-weight: normal;
}
button {
padding: 3px 5px;
font-size: 12px;
background: transparent;
border: 1px solid #a3a9b7;
margin-left: 10px;
color: #a3a9b7;
&:hover {
background: rgba(255,255,255,.1);
}
}
>.row {
@media (max-width: 554px) {
margin-left: 0;
}
}
}
.quick-update--rate {
margin-top: 18px;
padding: 15px;
button {
background: #B4B4B4 !important;
}
.rating-button {
background: #16a085;
display: flex !important;
justify-content: center;
align-items: center;
}
}
a.update--entry-title {
color: $white;
display: inline-block;
font-weight: 700;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
&:hover {
color: $white;
opacity: .7;
}
}
.empty-panel {
text-align: center;
border: 2px dashed rgba(255,255,255,.2);
svg {
width: 60px;
fill: rgba(255,255,255,.1);
margin-top: 70px;
}
}
.hint-panel {
@extend .card;
padding: 15px;
font-size: 14px;
border: none;
.quick-update-item {
margin: 0;
}
.button {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
font-size: 14px;
padding: 10px;
&:hover {
color: $white;
}
}
}
.quick-update-poster {
position: relative;
.poster-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,.9) 100%);
}
.lazy-image img {
min-height: 200px;
object-fit: cover;
}
}