client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 .videos {
   6   .video {
   7     display: flex;
   8     align-items: center;
   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     .position {
  21       font-weight: $font-semibold;
  22       margin-right: 10px;
  23       color: $grey-foreground-color;
  24     }
  25
  26     my-video-thumbnail {
  27       display: flex; // Avoids an issue with line-height that adds space below the element
  28       margin-right: 10px;
  29
  30       /deep/ .video-thumbnail {
  31         @include miniature-thumbnail(130px, 72px);
  32       }
  33     }
  34
  35     .video-info {
  36       display: flex;
  37       flex-direction: column;
  38
  39       a {
  40         @include disable-default-a-behaviour;
  41
  42         color: var(--mainForegroundColor);
  43       }
  44
  45       .video-info-name {
  46         font-size: 18px;
  47         font-weight: $font-semibold;
  48       }
  49
  50       .video-info-account, .video-info-timestamp {
  51         color: $grey-foreground-color;
  52       }
  53     }
  54
  55     .more {
  56       justify-self: flex-end;
  57       margin-left: auto;
  58       cursor: pointer;
  59       display: none;
  60
  61       &.show {
  62         display: block;
  63       }
  64
  65       .icon-more {
  66         @include apply-svg-color($grey-foreground-color);
  67
  68         &::after {
  69           border: none;
  70         }
  71       }
  72
  73       .dropdown-item {
  74         @include dropdown-with-icon-item;
  75       }
  76
  77       .timestamp-options {
  78         padding-top: 0;
  79         padding-left: 35px;
  80         margin-bottom: 15px;
  81
  82         > div {
  83           display: flex;
  84           align-items: center;
  85         }
  86
  87         input {
  88           @include peertube-button;
  89           @include orange-button;
  90
  91           margin-top: 10px;
  92         }
  93       }
  94     }
  95   }
  96 }