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       opacity: 1;
  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     display: flex;
  28     min-width: 0;
  29     align-items: center;
  30     cursor: pointer;
  31
  32     .position {
  33       font-weight: $font-semibold;
  34       margin-right: 10px;
  35       color: $grey-foreground-color;
  36       min-width: 25px;
  37
  38       my-global-icon {
  39         @include apply-svg-color($grey-foreground-color);
  40
  41         width: 17px;
  42         position: relative;
  43         left: -2px;
  44       }
  45     }
  46
  47     my-video-thumbnail {
  48       @include thumbnail-size-component(130px, 72px);
  49
  50       display: flex; // Avoids an issue with line-height that adds space below the element
  51       margin-right: 10px;
  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 }