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

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