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