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 .video, .cdk-drag-preview {
   6   display: flex;
   7   align-items: center;
   8   background-color: var(--mainBackgroundColor);
   9   cursor: pointer;
  10   padding: 10px;
  11   border-bottom: 1px solid $separator-border-color;
  12
  13   &:hover {
  14     background-color: rgba(0, 0, 0, 0.05);
  15
  16     .more {
  17       display: block;
  18     }
  19   }
  20
  21   .position {
  22     font-weight: $font-semibold;
  23     margin-right: 10px;
  24     color: $grey-foreground-color;
  25     min-width: 20px;
  26   }
  27
  28   my-video-thumbnail {
  29     display: flex; // Avoids an issue with line-height that adds space below the element
  30     margin-right: 10px;
  31
  32     /deep/ .video-thumbnail {
  33       @include miniature-thumbnail(130px, 72px);
  34     }
  35   }
  36
  37   .video-info {
  38     display: flex;
  39     flex-direction: column;
  40
  41     a {
  42       @include disable-default-a-behaviour;
  43
  44       color: var(--mainForegroundColor);
  45     }
  46
  47     .video-info-name {
  48       font-size: 18px;
  49       font-weight: $font-semibold;
  50     }
  51
  52     .video-info-account, .video-info-timestamp {
  53       color: $grey-foreground-color;
  54     }
  55   }
  56
  57   .more {
  58     justify-self: flex-end;
  59     margin-left: auto;
  60     cursor: pointer;
  61     display: none;
  62
  63     &.show {
  64       display: block;
  65     }
  66
  67     .icon-more {
  68       @include apply-svg-color($grey-foreground-color);
  69
  70       &::after {
  71         border: none;
  72       }
  73     }
  74
  75     .dropdown-item {
  76       @include dropdown-with-icon-item;
  77     }
  78
  79     .timestamp-options {
  80       padding-top: 0;
  81       padding-left: 35px;
  82       margin-bottom: 15px;
  83
  84       > div {
  85         display: flex;
  86         align-items: center;
  87       }
  88
  89       input {
  90         @include peertube-button;
  91         @include orange-button;
  92
  93         margin-top: 10px;
  94       }
  95     }
  96   }
  97 }
  98
  99 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
 100 .cdk-drag-preview {
 101   box-sizing: border-box;
 102   border-radius: 4px;
 103   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
 104   0 8px 10px 1px rgba(0, 0, 0, 0.14),
 105   0 3px 14px 2px rgba(0, 0, 0, 0.12);
 106 }
 107
 108 .cdk-drag-placeholder {
 109   opacity: 0;
 110 }
 111
 112 .cdk-drag-animating {
 113   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 114 }
 115
 116 .video:last-child {
 117   border: none;
 118 }
 119
 120 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
 121   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 122 }