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