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   h4,
  10   .fake-element {
  11     flex: 1;
  12   }
  13
  14   input[type=text] {
  15     @include peertube-input-text(300px);
  16   }
  17 }
  18
  19 .action-button-delete-selection {
  20   display: inline-block;
  21
  22   @include peertube-button;
  23   @include orange-button;
  24   @include button-with-icon(21px);
  25
  26   my-global-icon {
  27     @include apply-svg-color(#fff);
  28   }
  29 }
  30
  31 ::ng-deep {
  32   .action-button span {
  33     white-space: nowrap;
  34   }
  35
  36   .video-miniature {
  37     &.display-as-row {
  38       // width: min-content !important;
  39       width: 100% !important;
  40
  41       .video-bottom .video-miniature-information {
  42         width: max-content !important;
  43         min-width: unset !important;
  44       }
  45     }
  46
  47     .video-bottom {
  48       max-width: 350px;
  49     }
  50   }
  51 }
  52
  53 my-delete-button,
  54 my-edit-button {
  55   margin-right: 10px;
  56 }
  57
  58 @media screen and (max-width: $small-view) {
  59   .videos-header {
  60     flex-direction: column;
  61   }
  62
  63   ::ng-deep {
  64     .video-miniature {
  65       align-items: center;
  66
  67       .video-bottom,
  68       .video-bottom .video-miniature-information {
  69         /* same width than a.video-thumbnail */
  70         max-width: 223px !important;
  71       }
  72     }
  73   }
  74
  75   my-delete-button,
  76   my-edit-button {
  77     margin-right: 0px;
  78
  79     ::ng-deep {
  80       span, a {
  81         margin-right: 0px;
  82       }
  83     }
  84   }
  85
  86   my-delete-button,
  87   my-edit-button,
  88   my-button {
  89     margin-top: 15px;
  90     width: 100%;
  91     text-align: center;
  92
  93     ::ng-deep {
  94       .action-button {
  95         /* same width than a.video-thumbnail */
  96         width: 223px;
  97       }
  98     }
  99   }
 100 }