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