]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
63c4db6d | 3 | |
fbad87b0 C |
4 | $border-width: 3px; |
5 | $border-type: solid; | |
6 | $border-color: #EAEAEA; | |
9181bc0c | 7 | $nav-link-height: 40px; |
27e1a06c | 8 | |
4e1592da | 9 | .upload-message { |
dfe3f7b7 K |
10 | width: 100%; |
11 | text-align: center; | |
4e1592da MK |
12 | font-size: 15px; |
13 | margin-bottom: 0; | |
14 | ||
15 | &:last-child { | |
16 | margin-bottom: 1rem; | |
17 | } | |
dfe3f7b7 | 18 | |
4e1592da MK |
19 | .about-link, |
20 | .contact-link { | |
dfe3f7b7 K |
21 | @include peertube-button-link; |
22 | @include orange-button; | |
23 | ||
24 | height: fit-content; | |
25 | margin-top: 10px; | |
26 | } | |
4e1592da MK |
27 | } |
28 | ||
29 | .upload-image { | |
30 | width: 100%; | |
31 | text-align: center; | |
dfe3f7b7 K |
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 | ||
cd3d847d | 48 | .margin-content { |
2e7f2627 | 49 | padding-top: 20px; |
cd3d847d C |
50 | } |
51 | ||
45c6bcf3 C |
52 | ::ng-deep .video-add-nav { |
53 | border-bottom: $border-width $border-type $border-color; | |
931d3430 | 54 | margin: 20px 0 0 !important; |
45c6bcf3 | 55 | |
23f1b9da C |
56 | &.hide-nav { |
57 | display: none !important; | |
58 | } | |
59 | ||
45c6bcf3 C |
60 | a.nav-link { |
61 | @include disable-default-a-behaviour; | |
62 | ||
63 | margin-bottom: -$border-width; | |
9181bc0c | 64 | height: $nav-link-height !important; |
45c6bcf3 C |
65 | padding: 0 30px !important; |
66 | font-size: 15px; | |
67 | ||
ed5bb517 K |
68 | border: $border-width $border-type transparent; |
69 | ||
70 | span { | |
71 | border-bottom: 2px solid transparent; | |
72 | } | |
73 | ||
45c6bcf3 | 74 | &.active { |
ed5bb517 K |
75 | border-color: $border-color; |
76 | border-bottom-color: transparent; | |
218f730c | 77 | background-color: pvar(--submenuBackgroundColor) !important; |
45c6bcf3 C |
78 | |
79 | span { | |
ed5bb517 | 80 | border-bottom-color: pvar(--mainColor); |
cadb46d8 | 81 | } |
c182778e | 82 | } |
ed5bb517 K |
83 | |
84 | &:hover:not(.active) { | |
85 | border-color: transparent; | |
86 | } | |
c182778e | 87 | } |
45c6bcf3 | 88 | } |
c182778e | 89 | |
45c6bcf3 C |
90 | ::ng-deep .upload-video-container { |
91 | border: $border-width $border-type $border-color; | |
c9ff8a08 | 92 | border-top: transparent; |
45c6bcf3 | 93 | |
218f730c | 94 | background-color: pvar(--submenuBackgroundColor); |
c9ff8a08 RK |
95 | border-bottom-left-radius: 3px; |
96 | border-bottom-right-radius: 3px; | |
45c6bcf3 C |
97 | width: 100%; |
98 | min-height: 440px; | |
99 | padding-bottom: 20px; | |
100 | display: flex; | |
101 | justify-content: center; | |
2e7f2627 | 102 | padding-top: 20px; |
c9ff8a08 RK |
103 | |
104 | &.dragover { | |
e66883b3 | 105 | border: 3px dashed pvar(--mainColor); |
c9ff8a08 | 106 | } |
03652b31 | 107 | } |
9181bc0c K |
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 { | |
ed5bb517 | 118 | border-color: transparent; |
e66883b3 | 119 | background-color: pvar(--mainBackgroundColor) !important; |
9181bc0c K |
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 | } |