]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/menu/menu.component.scss
Add new anchors in my-settings and handle offset sub-menu height (#3032)
[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss
CommitLineData
63c4db6d
C
1@import '_variables';
2@import '_mixins';
3
8afc19a6
C
4.menu-wrapper {
5 position: fixed;
6 height: calc(100vh - #{$header-height});
7 padding: 0;
8 width: $menu-width;
36f2981f 9 z-index: z(menu);
e66883b3 10 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
8afc19a6
C
11}
12
b33f657c 13menu {
ef80c66c
C
14 @include ellipsis;
15
e66883b3 16 background-color: pvar(--menuBackgroundColor);
b33f657c
C
17 margin: 0;
18 padding: 0;
19 height: 100%;
606793b9 20 overflow-x: hidden;
e66883b3 21 color: pvar(--menuForegroundColor);
8afc19a6
C
22 display: flex;
23 flex-direction: column;
46ae6f67 24 width: 100%;
8afc19a6 25
a54991da
RK
26 &:focus, &:hover {
27 overflow-y: auto;
28 }
29
ca4b1594
K
30 @media not all and (hover: hover) and (pointer: fine) {
31 overflow-y: auto;
32 }
33
a55052c9
C
34 &.logged-in {
35 .panel-block {
d3217560 36 margin-bottom: 20px;
a55052c9
C
37 }
38
39 .block-title {
40 margin-bottom: 15px;
41 }
42 }
43
66467298
RK
44 .top-menu {
45 flex-grow: 1;
c13e2bf3 46 width: $menu-width;
66467298
RK
47 }
48
b33f657c
C
49 .logged-in-block {
50 height: 100px;
51 background-color: rgba(255, 255, 255, 0.15);
52 display: flex;
53 align-items: center;
54 justify-content: center;
a55052c9 55 margin-bottom: 20px;
b33f657c
C
56
57 .logged-in-info {
ef80c66c
C
58 @include ellipsis;
59
b33f657c 60 flex-grow: 1;
b33f657c 61
b7a7e801 62 .logged-in-display-name {
b33f657c
C
63 font-size: 16px;
64 font-weight: $font-semibold;
e66883b3 65 color: pvar(--menuForegroundColor);
c30745f3
C
66 cursor: pointer;
67
68 @include disable-default-a-behaviour;
b33f657c
C
69 }
70
b7a7e801 71 .logged-in-username {
ef80c66c
C
72 @include ellipsis;
73
b33f657c
C
74 font-size: 13px;
75 color: #C6C6C6;
cadb46d8 76 max-width: 140px;
223b24e6 77 cursor: pointer;
b33f657c
C
78 }
79 }
80
81 .logged-in-more {
82 margin-right: 20px;
83
e5b432e0 84 my-global-icon.dropdown-toggle {
b33f657c 85 cursor: pointer;
63347a0f
C
86
87 &::after {
88 border: none;
89 }
e5b432e0 90
03652b31 91 ::ng-deep {
e66883b3 92 @include apply-svg-color(pvar(--menuForegroundColor));
e5b432e0 93 }
b33f657c
C
94 }
95 }
96 }
97
98 .button-block {
99 margin: 30px 25px 35px 25px;
100
9bce8112
C
101 .login-button {
102 @include peertube-button-link;
103 @include orange-button;
104
c30745f3 105 display: block;
9bce8112
C
106 width: 100%;
107 margin-bottom: 10px;
108 }
c30745f3 109
9bce8112
C
110 .create-account-button {
111 @include peertube-button-link;
b33f657c 112
9bce8112
C
113 display: block;
114 width: 100%;
115
116 color: #fff;
117 background-color: rgba(255, 255, 255, 0.25);
b33f657c 118
9bce8112
C
119 &:hover {
120 background-color: rgba(255, 255, 255, 0.28);
b33f657c
C
121 }
122 }
123 }
124
125 .block-title {
126 text-transform: uppercase;
127 font-weight: $font-bold; // Bold
128 font-size: 13px;
129 margin-bottom: 25px;
829be6e8 130 margin-left: 26px;
b33f657c
C
131 }
132
133 .panel-block {
d3217560 134 margin-bottom: 15px;
b33f657c
C
135
136 a {
24e0d900
C
137 @include disable-default-a-behaviour;
138
b33f657c 139 display: flex;
829be6e8 140 align-items: center;
35c29307 141 padding-left: $menu-lateral-padding;
e66883b3 142 color: pvar(--menuForegroundColor);
c30745f3 143 cursor: pointer;
24e0d900 144 min-height: 40px;
c30745f3 145 font-size: 16px;
829be6e8 146 transition: background-color .1s ease-in-out;
24e0d900
C
147 white-space: normal;
148 word-break: break-word;
149 padding-right: 20px;
b33f657c 150
e6d5a4f1 151 &.active {
829be6e8
CL
152 background-color: rgba(255, 255, 255, 0.15);
153 }
154
e6d5a4f1
C
155 &:hover, &.focus-visible {
156 background-color: rgba(255, 255, 255, 0.10);
157 }
158
a55052c9
C
159 my-global-icon {
160 @include apply-svg-color(#808080);
0727cab0 161
a55052c9
C
162 display: flex;
163 width: 22px;
164 height: 22px;
b33f657c 165 margin-right: 18px;
b33f657c 166
a55052c9
C
167 &[iconName="playlists"] {
168 height: 24px;
169 width: 24px;
b33f657c 170
a55052c9 171 margin-right: 16px;
b33f657c
C
172 }
173
a55052c9 174 &[iconName="videos"] {
066e94c5 175 position: relative;
a55052c9 176 right: -1px;
b33f657c 177 }
a55052c9 178 }
36f9424f 179
a55052c9
C
180 .icon {
181 @include icon(22px);
36f9424f 182
a55052c9 183 margin-right: 18px;
b33f657c
C
184 }
185 }
186 }
8afc19a6
C
187
188 .footer {
c13e2bf3 189 width: $menu-width;
d3217560 190 padding-bottom: 15px;
8afc19a6 191
14f83c68
C
192 .bottom-links {
193 display: flex;
194 flex-direction: column;
195 padding: 0 $menu-lateral-padding;
d3217560 196 }
8afc19a6 197
d3217560 198 $footer-links-base-opacity: .8;
8afc19a6 199
d3217560 200 .footer-links {
14f83c68
C
201 &, > div {
202 display: flex;
203 flex-wrap: wrap;
204 }
8afc19a6 205
14f83c68 206 a, span[role=button] {
d3217560
RK
207 display: inline-block;
208 text-decoration: none;
e66883b3 209 color: pvar(--mainBackgroundColor);
d3217560
RK
210 opacity: $footer-links-base-opacity;
211 white-space: nowrap;
212 font-size: 90%;
213 font-weight: 500;
214 line-height: 1.4rem;
215 margin-right: 8px;
216
217 &.inline-global-icon {
218 display: inline-flex;
219 align-items: center;
220 white-space: nowrap;
221 height: 1.4rem;
222
223 my-global-icon {
e66883b3 224 @include apply-svg-color(pvar(--mainBackgroundColor));
14f83c68 225
d3217560
RK
226 display: flex;
227 width: auto;
228 height: 90%;
229 margin-right: .2rem;
230 }
8afc19a6 231 }
d3217560
RK
232 }
233 }
8afc19a6 234
d3217560
RK
235 .footer-copyleft small a {
236 @include disable-default-a-behaviour;
4a216666 237
e66883b3 238 color: pvar(--mainBackgroundColor);
d3217560
RK
239 opacity: $footer-links-base-opacity - .2;
240 }
241 }
242}
4a216666 243
d3217560
RK
244.dropdown-menu {
245 width: calc(100% + 40px);
246}
9a0fc840 247
d3217560
RK
248.dropdown-item {
249 @include dropdown-with-icon-item;
9a0fc840 250
d3217560
RK
251 cursor: pointer;
252 display: flex;
253 align-items: center;
254
255 i.glyphicon-menu-right {
256 opacity: .4;
257 }
258
259 my-global-icon {
260 &[iconName="cog"],
261 &[iconName="sign-out"] {
262 position: relative;
263 right: -2px;
264 height: 20px;
265 width: 20px;
266 }
267 }
268
269 my-global-icon.not-displayed {
270 display: none;
271 }
272
273 &:hover {
274 my-global-icon.hover-display-toggle.not-displayed {
275 display: inherit;
276 }
277 my-global-icon.hover-display-toggle {
278 display: none;
8afc19a6
C
279 }
280 }
b33f657c 281}
46ae6f67 282
d3217560
RK
283.more-settings {
284 text-transform: uppercase;
285 font-size: 80%;
286 color: #6c757d;
287}
288
289.icon {
290 @include disable-outline;
291 @include icon(22px);
292 opacity: 0.8;
293
294 &.icon-shortcuts {
295 position: relative;
296 top: -1px;
297 margin-right: 10px;
298
c41c0e28 299 background-image: url('../../assets/images/misc/keyboard.png');
d3217560
RK
300 }
301}
302
303input[type=checkbox]{
304 position: absolute;
305 visibility: hidden;
306}
307
308label {
309 cursor: pointer;
310 text-indent: -9999px;
311 width: 35px;
312 height: 20px;
313 background: #cccccc;
314 display: block;
315 border-radius: 100px;
316 position: relative;
317 margin: 0;
318
319 &:after {
320 content: '';
321 position: absolute;
322 top: 3px;
323 left: 3px;
324 width: 14px;
325 height: 14px;
e66883b3 326 background: pvar(--mainBackgroundColor);
d3217560
RK
327 border-radius: 50%;
328 transition: 0.3s ease-out;
329 }
330
331 &:active:after {
332 width: 40px;
333 }
334}
335
336input:checked + label {
e66883b3 337 background: pvar(--mainColor);
d3217560
RK
338
339 &:after {
340 left: calc(100% - 3px);
341 transform: translateX(-100%);
342 }
343}
344
fdebd9a3 345@media screen and (max-width: $mobile-view) {
46ae6f67
C
346 .menu-wrapper {
347 width: 100% !important;
c06be129 348
c06be129
C
349 menu {
350 overflow-y: auto;
351 }
352 }
c0022613
C
353
354 .top-menu, .footer {
355 width: 100% !important;
356 }
c06be129 357}