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

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 .playlist-info {
   6   background-color: pvar(--submenuBackgroundColor);
   7   margin-left: -$not-expanded-horizontal-margins;
   8   margin-top: -$sub-menu-margin-bottom;
   9
  10   padding: 10px;
  11
  12   display: flex;
  13   flex-direction: column;
  14   justify-content: flex-start;
  15   align-items: center;
  16
  17   /* fix ellipsis dots background color */
  18   ::ng-deep .miniature-name::after {
  19     background-color: pvar(--submenuBackgroundColor) !important;
  20   }
  21 }
  22
  23 .playlist-buttons {
  24   display:flex;
  25   margin: 30px 0 10px 0;
  26
  27   .share-button {
  28     @include peertube-button;
  29     @include button-with-icon(17px, 3px, -1px);
  30     @include grey-button;
  31     @include apply-svg-color(pvar(--actionButtonColor));
  32
  33     margin-right: 10px;
  34   }
  35 }
  36
  37 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
  38 .cdk-drag-preview {
  39   box-sizing: border-box;
  40   border-radius: 4px;
  41   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  42   0 8px 10px 1px rgba(0, 0, 0, 0.14),
  43   0 3px 14px 2px rgba(0, 0, 0, 0.12);
  44 }
  45
  46 .cdk-drag-placeholder {
  47   opacity: 0;
  48 }
  49
  50 .cdk-drag-animating {
  51   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  52 }
  53
  54 .video:last-child {
  55   border: none;
  56 }
  57
  58 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
  59   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  60 }
  61
  62 @media screen and (max-width: $small-view) {
  63   .playlist-info {
  64     width: 100vw;
  65     padding-top: 20px;
  66     margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
  67   }
  68
  69   .playlist-elements {
  70     padding: 0 !important;
  71   }
  72
  73   ::ng-deep my-video-playlist-element-miniature {
  74
  75     .video {
  76       padding: 5px !important;
  77     }
  78
  79     .position {
  80       margin-right: 5px !important;
  81     }
  82   }
  83 }