client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 $thumbnail-width: 130px;
   6 $thumbnail-height: 72px;
   7
   8 my-video-thumbnail {
   9   @include thumbnail-size-component($thumbnail-width, $thumbnail-height);
  10 }
  11
  12 .fake-thumbnail {
  13   width: $thumbnail-width;
  14   height: $thumbnail-height;
  15   background-color: #ececec;
  16 }
  17
  18 my-video-thumbnail,
  19 .fake-thumbnail {
  20   display: flex; // Avoids an issue with line-height that adds space below the element
  21   margin-right: 10px;
  22 }
  23
  24 .video {
  25   display: flex;
  26   align-items: center;
  27   background-color: pvar(--mainBackgroundColor);
  28   padding: 10px;
  29   border-bottom: 1px solid $separator-border-color;
  30
  31   &:hover {
  32     background-color: rgba(0, 0, 0, 0.05);
  33
  34     .more {
  35       opacity: 1;
  36     }
  37   }
  38
  39   @media not all and (hover: hover) and (pointer: fine) {
  40     .more {
  41       opacity: 1 !important;
  42     }
  43   }
  44
  45   &.playing {
  46     background-color: rgba(0, 0, 0, 0.02);
  47   }
  48
  49   a {
  50     @include disable-default-a-behaviour;
  51
  52     color: pvar(--mainForegroundColor);
  53     display: flex;
  54     min-width: 0;
  55     align-items: center;
  56     cursor: pointer;
  57
  58     .position {
  59       font-weight: $font-semibold;
  60       margin-right: 10px;
  61       color: pvar(--greyForegroundColor);
  62       min-width: 25px;
  63
  64       my-global-icon {
  65         @include apply-svg-color(pvar(--greyForegroundColor));
  66
  67         width: 17px;
  68         position: relative;
  69         left: -2px;
  70       }
  71     }
  72
  73     .video-info {
  74       display: flex;
  75       flex-direction: column;
  76       align-self: flex-start;
  77       min-width: 0;
  78
  79       a {
  80         width: auto;
  81       }
  82
  83       .video-info-account, .video-info-timestamp {
  84         color: pvar(--greyForegroundColor);
  85       }
  86     }
  87   }
  88
  89   .video-info-name {
  90     font-size: 18px;
  91     font-weight: $font-semibold;
  92     display: inline-block;
  93
  94     @include ellipsis;
  95   }
  96
  97   .more, my-edit-button {
  98     justify-self: flex-end;
  99     margin-left: auto;
 100     cursor: pointer;
 101     min-width: 24px;
 102   }
 103
 104   .more {
 105     opacity: 0;
 106
 107     &.show {
 108       opacity: 1;
 109     }
 110
 111     .icon-more {
 112       @include apply-svg-color(pvar(--greyForegroundColor));
 113
 114       display: flex;
 115
 116       &::after {
 117         border: none;
 118       }
 119     }
 120
 121     .dropdown-item {
 122       @include dropdown-with-icon-item;
 123     }
 124
 125     .timestamp-options {
 126       padding-top: 0;
 127       padding-left: 35px;
 128       margin-bottom: 15px;
 129
 130       > div {
 131         display: flex;
 132         align-items: center;
 133       }
 134
 135       input {
 136         @include peertube-button;
 137         @include orange-button;
 138
 139         margin-top: 10px;
 140       }
 141     }
 142   }
 143 }
 144
 145 @mixin more-dropdown-control {
 146   .video {
 147     my-edit-button {
 148       display: none;
 149
 150       + .more {
 151         display: inline-flex;
 152       }
 153     }
 154   }
 155 }
 156
 157 @mixin edit-button-control {
 158   .video {
 159     my-edit-button {
 160       display: none;
 161     }
 162
 163     &.playing {
 164       my-edit-button {
 165         display: inline-flex;
 166         height: max-content;
 167       }
 168     }
 169
 170     my-edit-button + .more {
 171       display: none;
 172     }
 173   }
 174 }
 175
 176 @mixin edit-button-in-mobile-view {
 177   .video {
 178     my-edit-button {
 179       ::ng-deep .action-button-edit {
 180         padding: 0 13px;
 181
 182         .button-label {
 183           display: none;
 184         }
 185       }
 186     }
 187   }
 188 }
 189
 190 @media screen and (min-width: $small-view) {
 191   :host-context(.expanded) {
 192     @include more-dropdown-control();
 193   }
 194 }
 195
 196 @media screen and (max-width: $small-view) {
 197   :host-context(.expanded) {
 198     @include edit-button-control();
 199   }
 200 }
 201
 202 @media screen and (max-width: $mobile-view) {
 203   :host-context(.expanded) {
 204     @include edit-button-in-mobile-view();
 205   }
 206 }
 207
 208 @media screen and (min-width: #{$small-view + $menu-width}) {
 209   :host-context(.main-col:not(.expanded)) {
 210     @include more-dropdown-control();
 211   }
 212 }
 213
 214 @media screen and (max-width: #{$small-view + $menu-width}) {
 215   :host-context(.main-col:not(.expanded)) {
 216     @include edit-button-control();
 217   }
 218 }
 219
 220 @media screen and (max-width: #{$mobile-view + $menu-width}) {
 221   :host-context(.main-col:not(.expanded)) {
 222     @include edit-button-in-mobile-view();
 223   }
 224 }