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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_miniature' as *;
   4
   5 .root {
   6   display: grid;
   7   grid-template-columns: auto 1fr;
   8 }
   9
  10 .playlist-info {
  11   @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1));
  12
  13   grid-column: 1;
  14   background-color: pvar(--submenuBackgroundColor);
  15   margin-top: -$sub-menu-margin-bottom;
  16
  17   padding: 15px;
  18
  19   display: flex;
  20   flex-direction: column;
  21
  22   /* fix ellipsis dots background color */
  23   ::ng-deep .miniature-name::after {
  24     background-color: pvar(--submenuBackgroundColor) !important;
  25   }
  26 }
  27
  28 .playlist-buttons {
  29   display: flex;
  30   margin: 30px 0 10px;
  31
  32   .share-button {
  33     @include peertube-button;
  34     @include button-with-icon(17px, 3px, -1px);
  35     @include grey-button;
  36     @include apply-svg-color(pvar(--actionButtonColor));
  37
  38     @include margin-right(10px);
  39   }
  40 }
  41
  42 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
  43 .cdk-drag-preview {
  44   box-sizing: border-box;
  45   border-radius: 4px;
  46   box-shadow:
  47     0 5px 5px -3px rgba(0, 0, 0, 0.2),
  48     0 8px 10px 1px rgba(0, 0, 0, 0.14),
  49     0 3px 14px 2px rgba(0, 0, 0, 0.12);
  50 }
  51
  52 .cdk-drag-placeholder {
  53   opacity: 0;
  54 }
  55
  56 .cdk-drag-animating {
  57   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  58 }
  59
  60 .video:last-child {
  61   border: 0;
  62 }
  63
  64 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
  65   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  66 }
  67
  68 .playlist-elements {
  69   grid-column: 2;
  70 }
  71
  72 my-video-playlist-miniature {
  73   width: $video-thumbnail-width;
  74 }
  75
  76 @include on-small-main-col {
  77   my-video-playlist-miniature {
  78     width: $video-thumbnail-medium-width;
  79   }
  80 }
  81
  82 @include on-mobile-main-col {
  83   .root {
  84     display: block;
  85   }
  86
  87   .playlist-info {
  88     width: calc(100% + (2 * var(--horizontalMarginContent)));
  89     padding-top: 20px;
  90     margin-bottom: 10px;
  91   }
  92
  93   my-video-playlist-miniature,
  94   .playlist-buttons {
  95     @include margin-left(auto);
  96     @include margin-right(auto);
  97   }
  98
  99   ::ng-deep my-video-playlist-element-miniature {
 100
 101     .video {
 102       padding: 5px !important;
 103     }
 104
 105     .position {
 106       @include margin-right(5px !important);
 107     }
 108   }
 109 }