client/src/app/+videos/+video-edit/video-add.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_nav' as *;
   4
   5 $border-width: 3px;
   6 $border-type: solid;
   7 $border-color: #EAEAEA;
   8 $nav-link-height: 40px;
   9
  10 .upload-message {
  11   width: 100%;
  12   text-align: center;
  13   font-size: 15px;
  14   margin-bottom: 0;
  15   border-radius: 0;
  16
  17   &:last-child {
  18     margin-bottom: 1rem;
  19   }
  20
  21   .about-link,
  22   .contact-link {
  23     @include peertube-button-link;
  24     @include orange-button;
  25
  26     height: fit-content;
  27     margin-top: 10px;
  28   }
  29 }
  30
  31 .upload-image {
  32   width: 100%;
  33   text-align: center;
  34
  35   img {
  36     margin-top: 10px;
  37     margin-bottom: 75px;
  38     width: 220px;
  39     height: auto;
  40   }
  41
  42   @media screen and (max-height: 600px) {
  43     img {
  44       margin-top: 5px;
  45       width: 160px;
  46     }
  47   }
  48 }
  49
  50 .margin-content {
  51   padding-top: 20px;
  52 }
  53
  54 ::ng-deep .video-add-nav {
  55   @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
  56
  57   a.nav-link {
  58     &.active {
  59       background-color: pvar(--submenuBackgroundColor) !important;
  60     }
  61   }
  62 }
  63
  64 ::ng-deep .upload-video-container {
  65   border: $border-width $border-type $border-color;
  66   border-top: transparent;
  67
  68   background-color: pvar(--submenuBackgroundColor);
  69   border-bottom-left-radius: 3px;
  70   border-bottom-right-radius: 3px;
  71   width: 100%;
  72   min-height: 440px;
  73   padding-bottom: 20px;
  74   display: flex;
  75   justify-content: center;
  76   padding-top: 20px;
  77
  78   &.dragover {
  79     border: 3px dashed pvar(--mainColor);
  80   }
  81 }
  82
  83 @mixin nav-scroll {
  84   ::ng-deep .video-add-nav {
  85     height: #{$nav-link-height + $border-width * 2};
  86     overflow-x: auto;
  87     white-space: nowrap;
  88     flex-wrap: unset;
  89
  90     /* Hide active tab style to not have a moving tab effect */
  91     a.nav-link.active {
  92       border-color: transparent;
  93       background-color: pvar(--mainBackgroundColor) !important;
  94     }
  95   }
  96 }
  97
  98 /* Make .video-add-nav tabs scrollable on small devices */
  99 @media screen and (max-width: $small-view) {
 100   @include nav-scroll();
 101 }
 102
 103 @media screen and (max-width: #{$small-view + $menu-width}) {
 104   :host-context(.main-col:not(.expanded)) {
 105     @include nav-scroll();
 106   }
 107 }