-.upload-video-container {
- border-radius: 3px;
- background-color: #F7F7F7;
- border: 3px solid #EAEAEA;
- width: 100%;
- height: 440px;
- text-align: center;
- margin-top: 40px;
- display: flex;
- justify-content: center;
- align-items: center;
+@import '_variables';
+@import '_mixins';
- .upload-video {
- display: flex;
- flex-direction: column;
- align-items: center;
+$border-width: 3px;
+$border-type: solid;
+$border-color: #EAEAEA;
+$nav-link-height: 40px;
- .icon.icon-upload {
- @include icon(90px);
- margin-bottom: 25px;
+.margin-content {
+ padding-top: 50px;
+}
- background-image: url('../../../assets/images/video/upload.svg');
- }
+.alert {
+ font-size: 15px;
+}
- .button-file {
- position: relative;
- overflow: hidden;
- display: inline-block;
- margin-bottom: 70px;
-
- @include peertube-button;
- @include orange-button;
-
- input[type=file] {
- position: absolute;
- top: 0;
- right: 0;
- min-width: 100%;
- min-height: 100%;
- font-size: 100px;
- text-align: right;
- filter: alpha(opacity=0);
- opacity: 0;
- outline: none;
- background: white;
- cursor: inherit;
- display: block;
- }
- }
+::ng-deep .video-add-nav {
+ border-bottom: $border-width $border-type $border-color;
+ margin: 50px 0 0 0 !important;
+
+ &.hide-nav {
+ display: none !important;
+ }
+
+ a.nav-link {
+ @include disable-default-a-behaviour;
+
+ margin-bottom: -$border-width;
+ height: $nav-link-height !important;
+ padding: 0 30px !important;
+ font-size: 15px;
- select {
- @include peertube-select(auto);
+ &.active {
+ border: $border-width $border-type $border-color;
+ border-bottom: none;
+ background-color: pvar(--submenuColor) !important;
- display: inline-block;
- font-size: 15px
+ span {
+ border-bottom: 2px solid pvar(--mainColor);
+ font-weight: $font-bold;
+ }
}
}
}
-p-progressBar {
- margin-top: 50px;
- margin-bottom: 40px;
+::ng-deep .upload-video-container {
+ border: $border-width $border-type $border-color;
+ border-top: transparent;
- /deep/ .ui-progressbar {
- font-size: 15px !important;
- color: #fff !important;
- height: 30px !important;
- line-height: 30px !important;
- border-radius: 3px !important;
- background-color: rgba(11, 204, 41, 0.16) !important;
+ background-color: pvar(--submenuColor);
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ width: 100%;
+ min-height: 440px;
+ padding-bottom: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- .ui-progressbar-value {
- background-color: #0BCC29 !important;
- }
+ &.dragover {
+ border: 3px dashed pvar(--mainColor);
+ }
+}
+
+@mixin nav-scroll {
+ ::ng-deep .video-add-nav {
+ height: #{$nav-link-height + $border-width * 2};
+ overflow-x: auto;
+ white-space: nowrap;
+ flex-wrap: unset;
- .ui-progressbar-label {
- text-align: left;
- padding-left: 18px;
+ /* Hide active tab style to not have a moving tab effect */
+ a.nav-link.active {
+ border: none;
+ background-color: pvar(--mainBackgroundColor) !important;
}
}
}
+/* Make .video-add-nav tabs scrollable on small devices */
+@media screen and (max-width: $small-view) {
+ @include nav-scroll();
+}
+@media screen and (max-width: #{$small-view + $menu-width}) {
+ :host-context(.main-col:not(.expanded)) {
+ @include nav-scroll();
+ }
+}