diff options
Diffstat (limited to 'client/src/app/menu')
-rw-r--r-- | client/src/app/menu/language-chooser.component.scss | 4 | ||||
-rw-r--r-- | client/src/app/menu/menu.component.scss | 33 | ||||
-rw-r--r-- | client/src/app/menu/notification.component.scss | 25 |
3 files changed, 34 insertions, 28 deletions
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index 6226a85cb..800b1ebef 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss | |||
@@ -5,12 +5,12 @@ | |||
5 | @include peertube-button-link; | 5 | @include peertube-button-link; |
6 | @include orange-button; | 6 | @include orange-button; |
7 | 7 | ||
8 | border-radius: 0; | ||
9 | |||
8 | &.focus-visible, | 10 | &.focus-visible, |
9 | &:focus { | 11 | &:focus { |
10 | box-shadow: none; | 12 | box-shadow: none; |
11 | } | 13 | } |
12 | |||
13 | border-radius: 0; | ||
14 | } | 14 | } |
15 | 15 | ||
16 | .modal-body { | 16 | .modal-body { |
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index c84a08b1d..d0edd820e 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss | |||
@@ -24,8 +24,9 @@ $footer-links-base-opacity: .8; | |||
24 | background-color: rgba(255, 255, 255, 0.15); | 24 | background-color: rgba(255, 255, 255, 0.15); |
25 | } | 25 | } |
26 | 26 | ||
27 | &:hover, &.focus-visible { | 27 | &:hover, |
28 | background-color: rgba(255, 255, 255, 0.10); | 28 | &.focus-visible { |
29 | background-color: rgba(255, 255, 255, 0.1); | ||
29 | } | 30 | } |
30 | 31 | ||
31 | my-global-icon { | 32 | my-global-icon { |
@@ -60,7 +61,8 @@ menu { | |||
60 | margin: 0; | 61 | margin: 0; |
61 | padding: 0; | 62 | padding: 0; |
62 | 63 | ||
63 | &:focus, &:hover { | 64 | &:focus, |
65 | &:hover { | ||
64 | overflow-y: auto; | 66 | overflow-y: auto; |
65 | } | 67 | } |
66 | 68 | ||
@@ -125,7 +127,7 @@ my-notification { | |||
125 | line-height: 1; | 127 | line-height: 1; |
126 | 128 | ||
127 | &.show { | 129 | &.show { |
128 | background-color: rgba(255, 255, 255, 0.20); | 130 | background-color: rgba(255, 255, 255, 0.2); |
129 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); | 131 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); |
130 | } | 132 | } |
131 | 133 | ||
@@ -158,14 +160,14 @@ my-notification { | |||
158 | position: absolute; | 160 | position: absolute; |
159 | right: -35px; | 161 | right: -35px; |
160 | top: -8px; | 162 | top: -8px; |
161 | color: grey; | 163 | color: #808080; |
162 | width: $main-radius; | 164 | width: $main-radius; |
163 | } | 165 | } |
164 | } | 166 | } |
165 | 167 | ||
166 | .dropdown-toggle { | 168 | .dropdown-toggle { |
167 | &::after { | 169 | &::after { |
168 | border: none; | 170 | border: 0; |
169 | } | 171 | } |
170 | } | 172 | } |
171 | 173 | ||
@@ -193,11 +195,11 @@ my-actor-avatar { | |||
193 | } | 195 | } |
194 | 196 | ||
195 | .logged-in-display-name { | 197 | .logged-in-display-name { |
198 | @include disable-default-a-behaviour; | ||
199 | |||
196 | font-size: 16px; | 200 | font-size: 16px; |
197 | font-weight: $font-semibold; | 201 | font-weight: $font-semibold; |
198 | color: pvar(--menuForegroundColor); | 202 | color: pvar(--menuForegroundColor); |
199 | |||
200 | @include disable-default-a-behaviour; | ||
201 | } | 203 | } |
202 | 204 | ||
203 | .logged-in-username { | 205 | .logged-in-username { |
@@ -251,7 +253,7 @@ my-actor-avatar { | |||
251 | } | 253 | } |
252 | 254 | ||
253 | .login-buttons-block { | 255 | .login-buttons-block { |
254 | margin: 30px 25px 35px 25px; | 256 | margin: 30px 25px 35px; |
255 | 257 | ||
256 | > a { | 258 | > a { |
257 | display: block; | 259 | display: block; |
@@ -305,7 +307,8 @@ my-actor-avatar { | |||
305 | } | 307 | } |
306 | 308 | ||
307 | .footer-links { | 309 | .footer-links { |
308 | &, > div { | 310 | &, |
311 | > div { | ||
309 | display: flex; | 312 | display: flex; |
310 | flex-wrap: wrap; | 313 | flex-wrap: wrap; |
311 | } | 314 | } |
@@ -388,29 +391,29 @@ my-actor-avatar { | |||
388 | .dropdown-item:hover, | 391 | .dropdown-item:hover, |
389 | .dropdown-item:active { | 392 | .dropdown-item:active { |
390 | &.settings-sensitive my-global-icon ::ng-deep svg { | 393 | &.settings-sensitive my-global-icon ::ng-deep svg { |
391 | margin-top: 0px !important; | 394 | margin-top: 0 !important; |
392 | } | 395 | } |
393 | } | 396 | } |
394 | } | 397 | } |
395 | 398 | ||
396 | my-global-icon { | 399 | my-global-icon { |
397 | &[iconName="playlists"] { | 400 | &[iconName=playlists] { |
398 | height: 24px; | 401 | height: 24px; |
399 | width: 24px; | 402 | width: 24px; |
400 | 403 | ||
401 | margin-right: 16px; | 404 | margin-right: 16px; |
402 | } | 405 | } |
403 | 406 | ||
404 | &[iconName="videos"] { | 407 | &[iconName=videos] { |
405 | position: relative; | 408 | position: relative; |
406 | right: -1px; | 409 | right: -1px; |
407 | } | 410 | } |
408 | 411 | ||
409 | &[iconName="channel"] { | 412 | &[iconName=channel] { |
410 | margin-top: -2px; | 413 | margin-top: -2px; |
411 | } | 414 | } |
412 | 415 | ||
413 | &[iconName="sign-out"] { | 416 | &[iconName='sign-out'] { |
414 | position: relative; | 417 | position: relative; |
415 | right: -2px; | 418 | right: -2px; |
416 | height: 20px; | 419 | height: 20px; |
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss index c65787779..554c20ca9 100644 --- a/client/src/app/menu/notification.component.scss +++ b/client/src/app/menu/notification.component.scss | |||
@@ -16,19 +16,20 @@ | |||
16 | .notification-inbox-popover, | 16 | .notification-inbox-popover, |
17 | .notification-inbox-link a { | 17 | .notification-inbox-link a { |
18 | @include apply-svg-color(#808080); | 18 | @include apply-svg-color(#808080); |
19 | ::ng-deep { | ||
20 | svg { | ||
21 | transition: color .1s ease-in-out; | ||
22 | } | ||
23 | } | ||
24 | 19 | ||
25 | transition: all .1s ease-in-out; | 20 | transition: all .1s ease-in-out; |
26 | border-radius: 25px; | 21 | border-radius: 25px; |
27 | cursor: pointer; | 22 | cursor: pointer; |
28 | 23 | ||
29 | &:hover, &:active { | 24 | ::ng-deep svg { |
30 | background-color: rgba(255, 255, 255, 0.15); | 25 | transition: color .1s ease-in-out; |
26 | } | ||
27 | |||
28 | &:hover, | ||
29 | &:active { | ||
31 | @include apply-svg-color(#fff); | 30 | @include apply-svg-color(#fff); |
31 | |||
32 | background-color: rgba(255, 255, 255, 0.15); | ||
32 | } | 33 | } |
33 | } | 34 | } |
34 | 35 | ||
@@ -59,7 +60,7 @@ | |||
59 | font-size: 14px; | 60 | font-size: 14px; |
60 | font-family: $main-fonts; | 61 | font-family: $main-fonts; |
61 | width: 400px; | 62 | width: 400px; |
62 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30); | 63 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); |
63 | 64 | ||
64 | .loader { | 65 | .loader { |
65 | display: flex; | 66 | display: flex; |
@@ -80,7 +81,7 @@ | |||
80 | max-height: 500px; | 81 | max-height: 500px; |
81 | } | 82 | } |
82 | 83 | ||
83 | & > my-user-notifications:nth-child(2) { | 84 | > my-user-notifications:nth-child(2) { |
84 | overflow-y: auto; | 85 | overflow-y: auto; |
85 | flex-grow: 1; | 86 | flex-grow: 1; |
86 | } | 87 | } |
@@ -110,7 +111,8 @@ | |||
110 | background: transparent; | 111 | background: transparent; |
111 | } | 112 | } |
112 | 113 | ||
113 | a, button { | 114 | a, |
115 | button { | ||
114 | color: rgba(20, 20, 20, 0.5); | 116 | color: rgba(20, 20, 20, 0.5); |
115 | 117 | ||
116 | &:hover:not(:disabled) { | 118 | &:hover:not(:disabled) { |
@@ -133,7 +135,8 @@ | |||
133 | } | 135 | } |
134 | } | 136 | } |
135 | 137 | ||
136 | .notification-inbox-popover, .notification-inbox-link { | 138 | .notification-inbox-popover, |
139 | .notification-inbox-link { | ||
137 | cursor: pointer; | 140 | cursor: pointer; |
138 | position: relative; | 141 | position: relative; |
139 | 142 | ||