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

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