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   .video {
  33     flex-wrap: wrap;
  34   }
  35
  36   .action-button span {
  37     white-space: nowrap;
  38   }
  39
  40   .video-miniature {
  41     &.display-as-row {
  42       // width: min-content !important;
  43       width: 100% !important;
  44
  45       .video-bottom .video-miniature-information {
  46         width: max-content !important;
  47         min-width: unset !important;
  48       }
  49     }
  50
  51     .video-bottom {
  52       max-width: 350px;
  53     }
  54   }
  55 }
  56
  57 .action-button {
  58   display: flex;
  59   margin-left: 55px;
  60   margin-top: 10px;
  61   align-self: flex-end;
  62 }
  63
  64 my-delete-button,
  65 my-edit-button {
  66   margin-right: 10px;
  67 }
  68
  69 @media screen and (max-width: $small-view) {
  70   .videos-header {
  71     flex-direction: column;
  72   }
  73
  74   .action-button {
  75     flex-direction: column;
  76     align-self: center;
  77     margin-left: 0px;
  78   }
  79
  80   ::ng-deep {
  81     .video-miniature {
  82       align-items: center;
  83
  84       .video-bottom,
  85       .video-bottom .video-miniature-information {
  86         /* same width than a.video-thumbnail */
  87         max-width: $video-thumbnail-width !important;
  88       }
  89     }
  90   }
  91
  92   my-delete-button,
  93   my-edit-button {
  94     margin-right: 0px;
  95
  96     ::ng-deep {
  97       span, a {
  98         margin-right: 0px;
  99       }
 100     }
 101   }
 102
 103   my-delete-button,
 104   my-edit-button,
 105   my-button {
 106     margin-top: 15px;
 107     width: 100%;
 108     text-align: center;
 109
 110     ::ng-deep {
 111       .action-button {
 112         /* same width than a.video-thumbnail */
 113         width: $video-thumbnail-width;
 114       }
 115     }
 116   }
 117 }
 118
 119 // Adapt my-video-miniature on small screens with menu
 120 @media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
 121   :host-context(.main-col:not(.expanded)) {
 122     ::ng-deep {
 123       .video-miniature {
 124         flex-direction: column;
 125
 126         .video-miniature-name {
 127           max-width: $video-thumbnail-width;
 128         }
 129       }
 130     }
 131   }
 132 }