blob: cd9d0ce53f0d58bfde969443283b88f13a2545a0 (
plain) (
tree)
|
|
@use '_variables' as *;
@use '_mixins' as *;
@use '_miniature' as *;
$thumbnail-width: 130px;
$thumbnail-height: 72px;
my-video-thumbnail {
@include thumbnail-size-component($thumbnail-width, $thumbnail-height);
}
.fake-thumbnail {
width: $thumbnail-width;
height: $thumbnail-height;
background-color: #ececec;
}
my-video-thumbnail,
.fake-thumbnail {
@include margin-right(10px);
display: flex; // Avoids an issue with line-height that adds space below the element
}
.video {
display: grid;
grid-template-columns: 1fr auto;
background-color: pvar(--mainBackgroundColor);
padding: 10px;
border-bottom: 1px solid $separator-border-color;
.more {
display: flex;
}
&:hover {
background-color: rgba(0, 0, 0, 0.05);
.more {
opacity: 1;
}
}
@media not all and (hover: hover) and (pointer: fine) {
.more {
opacity: 1 !important;
}
}
&.playing {
background-color: rgba(0, 0, 0, 0.02);
}
a {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
display: flex;
min-width: 0;
align-items: center;
cursor: pointer;
.position {
@include margin-right(10px);
font-weight: $font-semibold;
color: pvar(--greyForegroundColor);
min-width: 25px;
my-global-icon {
@include apply-svg-color(pvar(--greyForegroundColor));
width: 17px;
position: relative;
left: -2px;
}
}
}
.more,
my-edit-button {
@include margin-left(auto);
justify-self: flex-end;
cursor: pointer;
min-width: 24px;
}
.more {
opacity: 0;
&.show {
opacity: 1;
}
.icon-more {
@include apply-svg-color(pvar(--greyForegroundColor));
display: flex;
&::after {
border: 0;
}
}
}
}
.video-info-name {
@include ellipsis;
font-size: 18px;
font-weight: $font-semibold;
display: inline-block;
}
.video-info {
display: flex;
flex-direction: column;
align-self: flex-start;
min-width: 0;
.video-info-header {
display: flex;
align-items: baseline;
a {
width: auto;
padding-right: 5px;
}
.pt-badge {
@include margin-right(5px);
}
}
.video-info-owner,
.video-info-timestamp {
color: pvar(--greyForegroundColor);
}
}
.video-info-owner,
.video-miniature-created-at-views {
font-size: 14px;
}
.dropdown-menu {
.dropdown-item {
@include dropdown-with-icon-item;
cursor: pointer;
}
.timestamp-options {
@include padding-left(35px);
padding-top: 0;
margin-top: 5px;
margin-bottom: 15px;
> div {
display: flex;
align-items: center;
margin-bottom: 5px;
}
my-peertube-checkbox {
@include margin-right(5px);
}
input {
@include peertube-button;
@include orange-button;
margin-top: 10px;
}
}
}
@mixin more-dropdown-control {
.video {
my-edit-button {
display: none;
+ .more {
display: inline-flex;
}
}
}
}
@mixin edit-button-control {
.video {
my-edit-button {
display: none;
}
&.playing {
my-edit-button {
display: inline-flex;
height: max-content;
margin: auto;
}
}
my-edit-button + .more {
display: none;
}
}
}
@mixin edit-button-in-mobile-view {
.video {
my-edit-button {
::ng-deep .action-button-edit {
padding: 0 13px;
.button-label {
display: none;
}
}
}
}
}
@media screen and (min-width: $small-view) {
:host-context(.expanded) {
@include more-dropdown-control();
}
}
@media screen and (max-width: $small-view) {
:host-context(.expanded) {
@include edit-button-control();
}
}
@media screen and (max-width: $mobile-view) {
:host-context(.expanded) {
@include edit-button-in-mobile-view();
}
}
@media screen and (min-width: #{$small-view + $menu-width}) {
:host-context(.main-col:not(.expanded)) {
@include more-dropdown-control();
}
}
@media screen and (max-width: #{$small-view + $menu-width}) {
:host-context(.main-col:not(.expanded)) {
@include edit-button-control();
}
}
@media screen and (max-width: #{$mobile-view + $menu-width}) {
:host-context(.main-col:not(.expanded)) {
@include edit-button-in-mobile-view();
}
}
|