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

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