client/src/app/+my-library/my-videos/my-videos.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 input[type=text] {
   5   @include peertube-input-text(300px);
   6 }
   7
   8 h1 {
   9   display: flex;
  10   justify-content: space-between;
  11
  12   .button-link {
  13     @include peertube-button-link;
  14     @include grey-button;
  15     @include button-with-icon(18px, 3px, -1px);
  16
  17     &:not(:last-child) {
  18       margin-right: 10px;
  19     }
  20   }
  21 }
  22
  23 .action-button-delete-selection {
  24   display: inline-block;
  25
  26   @include peertube-button;
  27   @include orange-button;
  28   @include button-with-icon(21px);
  29
  30   my-global-icon {
  31     @include apply-svg-color(#fff);
  32   }
  33 }
  34
  35 ::ng-deep {
  36   .video {
  37     flex-wrap: wrap;
  38   }
  39
  40   .action-button span {
  41     white-space: nowrap;
  42   }
  43
  44   .video-miniature {
  45     &.display-as-row {
  46       // width: min-content !important;
  47       width: 100% !important;
  48
  49       .video-bottom .video-miniature-information {
  50         width: max-content !important;
  51         min-width: unset !important;
  52       }
  53     }
  54
  55     .video-bottom {
  56       max-width: 350px;
  57     }
  58   }
  59 }
  60
  61 .action-button {
  62   display: flex;
  63   margin-left: 55px;
  64   margin-top: 10px;
  65   align-self: flex-end;
  66 }
  67
  68 my-edit-button {
  69   margin-right: 10px;
  70 }
  71
  72 @media screen and (max-width: $small-view) {
  73   h1 {
  74     flex-direction: column;
  75
  76     > span,
  77     .button-link {
  78       margin-bottom: 10px;
  79     }
  80   }
  81
  82   .action-button {
  83     flex-direction: column;
  84     align-self: center;
  85     align-items: center;
  86     margin-left: 0px;
  87   }
  88
  89   my-edit-button {
  90     margin: 15px 0 5px 0;
  91     width: 100%;
  92     text-align: center;
  93
  94     ::ng-deep {
  95       .action-button {
  96         /* same width than a.video-thumbnail */
  97         width: $video-thumbnail-width;
  98       }
  99     }
 100   }
 101
 102   ::ng-deep {
 103     .video-miniature {
 104       align-items: center;
 105
 106       .video-bottom,
 107       .video-bottom .video-miniature-information {
 108         /* same width than a.video-thumbnail */
 109         max-width: $video-thumbnail-width !important;
 110       }
 111     }
 112   }
 113 }
 114
 115 @media screen and (max-width: $mobile-view) {
 116   .videos-header {
 117     flex-direction: column;
 118
 119     input[type=text] {
 120       width: 100% !important;
 121     }
 122   }
 123 }