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

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