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