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

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 my-video-thumbnail {
   6   @include thumbnail-size-component(130px, 72px);
   7
   8   display: flex; // Avoids an issue with line-height that adds space below the element
   9   margin-right: 10px;
  10 }
  11
  12 .video {
  13   display: flex;
  14   align-items: center;
  15   background-color: var(--mainBackgroundColor);
  16   padding: 10px;
  17   border-bottom: 1px solid $separator-border-color;
  18
  19   &:hover {
  20     background-color: rgba(0, 0, 0, 0.05);
  21
  22     .more {
  23       opacity: 1;
  24     }
  25   }
  26
  27   &.playing {
  28     background-color: rgba(0, 0, 0, 0.02);
  29   }
  30
  31   a {
  32     @include disable-default-a-behaviour;
  33
  34     display: flex;
  35     min-width: 0;
  36     align-items: center;
  37     cursor: pointer;
  38
  39     .position {
  40       font-weight: $font-semibold;
  41       margin-right: 10px;
  42       color: $grey-foreground-color;
  43       min-width: 25px;
  44
  45       my-global-icon {
  46         @include apply-svg-color($grey-foreground-color);
  47
  48         width: 17px;
  49         position: relative;
  50         left: -2px;
  51       }
  52     }
  53
  54     .video-info {
  55       display: flex;
  56       flex-direction: column;
  57       align-self: flex-start;
  58       min-width: 0;
  59
  60       a {
  61         color: var(--mainForegroundColor);
  62         width: auto;
  63
  64         &:hover {
  65           text-decoration: underline !important;
  66         }
  67       }
  68
  69       .video-info-name {
  70         font-size: 18px;
  71         font-weight: $font-semibold;
  72         display: inline-block;
  73
  74         @include ellipsis;
  75       }
  76
  77       .video-info-account, .video-info-timestamp {
  78         color: $grey-foreground-color;
  79       }
  80     }
  81   }
  82
  83   .more {
  84     justify-self: flex-end;
  85     margin-left: auto;
  86     cursor: pointer;
  87     opacity: 0;
  88
  89     &.show {
  90       opacity: 1;
  91     }
  92
  93     .icon-more {
  94       @include apply-svg-color($grey-foreground-color);
  95
  96       display: flex;
  97
  98       &::after {
  99         border: none;
 100       }
 101     }
 102
 103     .dropdown-item {
 104       @include dropdown-with-icon-item;
 105     }
 106
 107     .timestamp-options {
 108       padding-top: 0;
 109       padding-left: 35px;
 110       margin-bottom: 15px;
 111
 112       > div {
 113         display: flex;
 114         align-items: center;
 115       }
 116
 117       input {
 118         @include peertube-button;
 119         @include orange-button;
 120
 121         margin-top: 10px;
 122       }
 123     }
 124   }
 125 }