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;
  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:
  46     0 5px 5px -3px rgba(0, 0, 0, 0.2),
  47     0 8px 10px 1px rgba(0, 0, 0, 0.14),
  48     0 3px 14px 2px rgba(0, 0, 0, 0.12);
  49 }
  50
  51 .cdk-drag-placeholder {
  52   opacity: 0;
  53 }
  54
  55 .cdk-drag-animating {
  56   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  57 }
  58
  59 .video:last-child {
  60   border: 0;
  61 }
  62
  63 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
  64   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
  65 }
  66
  67 .playlist-elements {
  68   grid-column: 2;
  69 }
  70
  71 my-video-playlist-miniature {
  72   width: $video-thumbnail-width;
  73 }
  74
  75 @include on-small-main-col {
  76   my-video-playlist-miniature {
  77     width: $video-thumbnail-medium-width;
  78   }
  79 }
  80
  81 @include on-mobile-main-col {
  82   .root {
  83     display: block;
  84   }
  85
  86   .playlist-info {
  87     width: calc(100% + (2 * var(--horizontalMarginContent)));
  88     padding-top: 20px;
  89     margin-bottom: 10px;
  90   }
  91
  92   my-video-playlist-miniature,
  93   .playlist-buttons {
  94     margin-left: auto;
  95     margin-right: auto;
  96   }
  97
  98   ::ng-deep my-video-playlist-element-miniature {
  99
 100     .video {
 101       padding: 5px !important;
 102     }
 103
 104     .position {
 105       margin-right: 5px !important;
 106     }
 107   }
 108 }