]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/app/+videos/+video-edit/video-add.component.scss
Bumped to version v5.2.1
[github/Chocobozzz/PeerTube.git] / client / src / app / +videos / +video-edit / video-add.component.scss
... / ...
CommitLineData
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 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 @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
55
56 a.nav-link {
57 &.active {
58 background-color: pvar(--submenuBackgroundColor) !important;
59 }
60 }
61}
62
63::ng-deep .upload-video-container {
64 border: $border-width $border-type $border-color;
65 border-top: transparent;
66
67 background-color: pvar(--submenuBackgroundColor);
68 border-bottom-left-radius: 3px;
69 border-bottom-right-radius: 3px;
70 width: 100%;
71 min-height: 440px;
72 padding-bottom: 20px;
73 display: flex;
74 justify-content: center;
75 padding-top: 20px;
76
77 &.dragover {
78 border: 3px dashed pvar(--mainColor);
79 }
80}
81
82@mixin nav-scroll {
83 ::ng-deep .video-add-nav {
84 height: #{$nav-link-height + $border-width * 2};
85 overflow-x: auto;
86 white-space: nowrap;
87 flex-wrap: unset;
88
89 /* Hide active tab style to not have a moving tab effect */
90 a.nav-link.active {
91 border-color: transparent;
92 background-color: pvar(--mainBackgroundColor) !important;
93 }
94 }
95}
96
97/* Make .video-add-nav tabs scrollable on small devices */
98@media screen and (max-width: $small-view) {
99 @include nav-scroll();
100}
101
102@media screen and (max-width: #{$small-view + $menu-width}) {
103 :host-context(.main-col:not(.expanded)) {
104 @include nav-scroll();
105 }
106}