5 .video, .cdk-drag-preview {
8 background-color: var(--mainBackgroundColor);
11 border-bottom: 1px solid $separator-border-color;
14 background-color: rgba(0, 0, 0, 0.05);
22 font-weight: $font-semibold;
24 color: $grey-foreground-color;
29 display: flex; // Avoids an issue with line-height that adds space below the element
32 /deep/ .video-thumbnail {
33 @include miniature-thumbnail(130px, 72px);
39 flex-direction: column;
42 @include disable-default-a-behaviour;
44 color: var(--mainForegroundColor);
49 font-weight: $font-semibold;
52 .video-info-account, .video-info-timestamp {
53 color: $grey-foreground-color;
58 justify-self: flex-end;
68 @include apply-svg-color($grey-foreground-color);
76 @include dropdown-with-icon-item;
90 @include peertube-button;
91 @include orange-button;
99 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
101 box-sizing: border-box;
103 box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
104 0 8px 10px 1px rgba(0, 0, 0, 0.14),
105 0 3px 14px 2px rgba(0, 0, 0, 0.12);
108 .cdk-drag-placeholder {
112 .cdk-drag-animating {
113 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
120 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
121 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);