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

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