// MAIN CONTAINER
.video-row {
--content-height: 50px;
display: flex;
align-items: center;
padding: calc( var(--spacing-base) * 2 ) var(--spacing-base); // 16px | 8px
background-color: var(--jp-white);
gap: calc( var(--spacing-base) * 2 ); // 16px
&.disabled {
color: var(--jp-gray-10);
}
&:not(.disabled) {
cursor: pointer;
}
&:hover:not(.disabled),
&.pressed:not(.disabled) {
background-color: var(--jp-gray-0);
}
&:focus {
outline: 1px solid black;
}
}
// CHECKBOX
.checkbox-wrapper-small {
height: var(--content-height);
align-self: flex-start;
display: flex;
align-items: center;
}
// DATA CONTAINER
.video-data-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc( var(--spacing-base) * 2 ); // 16px
border: none;
min-width: 0; // Allows flex to be smaller than the content
flex: 1;
&.small {
flex-direction: column;
align-items: normal;
}
}
// TITLE / POSTER SECTION
.info-wrapper {
display: flex;
align-items: center;
gap: calc( var(--spacing-base) * 3 ); // 24px
min-width: 0; // Allows flex to be smaller than the content
position: relative;
height: var(--content-height);
width: 100%;
&.small {
cursor: pointer;
}
}
.poster {
--width: 90px;
--height: 50px;
max-width: var(--width);
min-width: var(--width);
max-height: var(--height);
min-height: var(--height);
border-radius: var(--jp-border-radius);
}
.title-wrapper {
width: 100%;
overflow: hidden;
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
align-items: center;
}
.label {
opacity: 0;
position: absolute;
top: -10px;
background: var(--jp-yellow-20);
padding: 0px var(--spacing-base); // 0 | 8px
font-size: var(--font-body-extra-small);
border-radius: 4px;
line-height: 20px;
transition: opacity .5s;
white-space: nowrap;
}
&:hover > .label {
opacity: 1;
}
}
// METADATA SECTION
.meta-wrapper {
width: fit-content;
&.small {
width: 100%;
}
}
.stats {
display: flex;
align-items: center;
gap: calc( var(--spacing-base) * 3 ); // 24px
& > * {
flex: 1;
min-width: 50px;
}
& > .upload {
min-width: 166px;
width: fit-content;
white-space: nowrap;
}
&.small {
flex-direction: column;
align-items: flex-start;
margin-bottom: var(--spacing-base); // 8px
gap: 0;
& > * {
display: flex;
width: 100%;
margin-bottom: var(--spacing-base); // 8px
& > * {
flex: 1;
}
}
}
}
.actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: calc( var(--spacing-base) * 3 ); // 24px
margin-right: calc( var(--spacing-base) * 3 ); // 24px
}
.mobile-actions {
display: flex;
justify-content: space-between;
}
// STORYBOOK
.storybook-wrapper {
width: 90vw;
max-width: 1000px;
}