aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/menu.component.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-07 17:38:31 +0200
committerChocobozzz <me@florianbigard.com>2021-06-07 18:14:05 +0200
commit27bc95867442c772841fb183a625bbda61dede51 (patch)
tree6fe20951f1109c1f5388d9a681f0df0758d463e0 /client/src/app/menu/menu.component.scss
parent8beea2d37d90e9a12d895f4a9eebc1e532313d8c (diff)
downloadPeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.gz
PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.zst
PeerTube-27bc95867442c772841fb183a625bbda61dede51.zip
Bidi support
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r--client/src/app/menu/menu.component.scss38
1 files changed, 21 insertions, 17 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index daaed2d32..8e9c02b23 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -7,16 +7,17 @@ $footer-links-base-opacity: .8;
7 7
8.menu-link { 8.menu-link {
9 @include disable-default-a-behaviour; 9 @include disable-default-a-behaviour;
10 @include padding-left($menu-lateral-padding);
11 @include padding-right(20px);
10 12
11 display: flex; 13 display: flex;
12 align-items: center; 14 align-items: center;
13 padding-left: $menu-lateral-padding; 15
14 color: pvar(--menuForegroundColor); 16 color: pvar(--menuForegroundColor);
15 cursor: pointer; 17 cursor: pointer;
16 font-size: 16px; 18 font-size: 16px;
17 white-space: normal; 19 white-space: normal;
18 word-break: break-word; 20 word-break: break-word;
19 padding-right: 20px;
20 transition: background-color .1s ease-in-out; 21 transition: background-color .1s ease-in-out;
21 line-height: $line-height-normal; 22 line-height: $line-height-normal;
22 23
@@ -31,11 +32,11 @@ $footer-links-base-opacity: .8;
31 32
32 my-global-icon { 33 my-global-icon {
33 @include apply-svg-color(#808080); 34 @include apply-svg-color(#808080);
35 @include margin-right($menu-link-icon-margin-right);
34 36
35 display: flex; 37 display: flex;
36 width: $menu-link-icon-size; 38 width: $menu-link-icon-size;
37 height: $menu-link-icon-size; 39 height: $menu-link-icon-size;
38 margin-right: $menu-link-icon-margin-right;
39 } 40 }
40} 41}
41 42
@@ -99,8 +100,8 @@ menu {
99} 100}
100 101
101my-notification { 102my-notification {
102 margin-left: auto; 103 @include margin-left(auto);
103 margin-right: 15px; 104 @include margin-right(15px);
104} 105}
105 106
106.logged-in-more { 107.logged-in-more {
@@ -111,16 +112,18 @@ my-notification {
111 .dropdown-toggle-indicator { 112 .dropdown-toggle-indicator {
112 display: inherit !important; 113 display: inherit !important;
113 } 114 }
115
114 .dropdown-toggle:first-child { 116 .dropdown-toggle:first-child {
115 padding-right: 30px !important; 117 @include padding-left(30px !important);
116 } 118 }
117 } 119 }
118 } 120 }
119 121
120 $main-radius: 25px; 122 $main-radius: 25px;
121 123
124 @include margin-left(13px);
125
122 flex: 1; 126 flex: 1;
123 margin-left: 13px;
124 border-radius: $main-radius; 127 border-radius: $main-radius;
125 transition: all .1s ease-in-out; 128 transition: all .1s ease-in-out;
126 cursor: pointer; 129 cursor: pointer;
@@ -180,7 +183,7 @@ my-notification {
180} 183}
181 184
182my-actor-avatar { 185my-actor-avatar {
183 margin-right: 10px; 186 @include margin-right(10px);
184} 187}
185 188
186.logged-in-info { 189.logged-in-info {
@@ -224,11 +227,11 @@ my-actor-avatar {
224 min-height: 35px; 227 min-height: 35px;
225 228
226 my-global-icon { 229 my-global-icon {
230 // Keep aligned with other icons
231 @include margin-left($additional-margin);
232
227 width: $icon-size; 233 width: $icon-size;
228 height: $icon-size; 234 height: $icon-size;
229
230 // Keep aligned with other icons
231 margin-left: $additional-margin;
232 } 235 }
233 236
234 &.active, 237 &.active,
@@ -246,7 +249,7 @@ my-actor-avatar {
246 border-left: $border-left-width solid var(--mainColor); 249 border-left: $border-left-width solid var(--mainColor);
247 250
248 my-global-icon { 251 my-global-icon {
249 margin-left: $additional-margin - $border-left-width; 252 @include margin-left($additional-margin - $border-left-width);
250 } 253 }
251 } 254 }
252 } 255 }
@@ -280,13 +283,13 @@ my-actor-avatar {
280 283
281 .block-title { 284 .block-title {
282 @include ellipsis; 285 @include ellipsis;
286 @include margin-left(26px);
287 @include margin-right(30px);
283 288
284 text-transform: uppercase; 289 text-transform: uppercase;
285 font-weight: $font-bold; // Bold 290 font-weight: $font-bold; // Bold
286 font-size: 13px; 291 font-size: 13px;
287 margin-bottom: 25px; 292 margin-bottom: 25px;
288 margin-left: 26px;
289 margin-right: 30px;
290 } 293 }
291 294
292 a { 295 a {
@@ -314,6 +317,8 @@ my-actor-avatar {
314 317
315 a, 318 a,
316 span[role=button] { 319 span[role=button] {
320 @include margin-right(8px);
321
317 display: inline-block; 322 display: inline-block;
318 text-decoration: none; 323 text-decoration: none;
319 color: pvar(--menuForegroundColor); 324 color: pvar(--menuForegroundColor);
@@ -322,7 +327,6 @@ my-actor-avatar {
322 font-size: 90%; 327 font-size: 90%;
323 font-weight: 500; 328 font-weight: 500;
324 line-height: 1.4rem; 329 line-height: 1.4rem;
325 margin-right: 8px;
326 } 330 }
327} 331}
328 332
@@ -397,10 +401,10 @@ my-actor-avatar {
397 401
398my-global-icon { 402my-global-icon {
399 &[iconName=playlists] { 403 &[iconName=playlists] {
404 @include margin-right(16px);
405
400 height: 24px; 406 height: 24px;
401 width: 24px; 407 width: 24px;
402
403 margin-right: 16px;
404 } 408 }
405 409
406 &[iconName=videos] { 410 &[iconName=videos] {