diff options
Diffstat (limited to 'client/src/app/menu')
-rw-r--r-- | client/src/app/menu/menu.component.scss | 325 |
1 files changed, 162 insertions, 163 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 2ea66e57d..aa247d268 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss | |||
@@ -3,6 +3,7 @@ | |||
3 | 3 | ||
4 | $menu-link-icon-size: 22px; | 4 | $menu-link-icon-size: 22px; |
5 | $menu-link-icon-margin-right: 18px; | 5 | $menu-link-icon-margin-right: 18px; |
6 | $footer-links-base-opacity: .8; | ||
6 | 7 | ||
7 | @mixin menu-link { | 8 | @mixin menu-link { |
8 | display: flex; | 9 | display: flex; |
@@ -91,168 +92,168 @@ menu { | |||
91 | align-items: center; | 92 | align-items: center; |
92 | justify-content: left; | 93 | justify-content: left; |
93 | 94 | ||
94 | .logged-in-more { | 95 | my-notification { |
95 | $main-radius: 25px; | 96 | margin-left: auto; |
97 | margin-right: 15px; | ||
98 | } | ||
99 | } | ||
100 | } | ||
96 | 101 | ||
97 | flex: 1; | 102 | .logged-in-more { |
98 | margin-left: 13px; | 103 | $main-radius: 25px; |
99 | border-radius: $main-radius; | ||
100 | transition: all .1s ease-in-out; | ||
101 | cursor: pointer; | ||
102 | 104 | ||
103 | *, & { | 105 | flex: 1; |
104 | line-height: 1; | 106 | margin-left: 13px; |
105 | } | 107 | border-radius: $main-radius; |
108 | transition: all .1s ease-in-out; | ||
109 | cursor: pointer; | ||
106 | 110 | ||
107 | &.show { | 111 | *, & { |
108 | background-color: rgba(255, 255, 255, 0.20); | 112 | line-height: 1; |
109 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); | 113 | } |
110 | } | ||
111 | 114 | ||
112 | @mixin display-hints($is-mobile: false) { | 115 | &.show { |
113 | background-color: rgba(255, 255, 255, 0.15); | 116 | background-color: rgba(255, 255, 255, 0.20); |
114 | 117 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); | |
115 | @if $is-mobile { | 118 | } |
116 | .dropdown-toggle-indicator { | 119 | |
117 | display: inherit !important; | 120 | @mixin display-hints($is-mobile: false) { |
118 | } | 121 | background-color: rgba(255, 255, 255, 0.15); |
119 | .dropdown-toggle:first-child { | ||
120 | padding-right: 30px !important; | ||
121 | } | ||
122 | } | ||
123 | } | ||
124 | 122 | ||
125 | &:hover { | 123 | @if $is-mobile { |
126 | @include display-hints; | 124 | .dropdown-toggle-indicator { |
125 | display: inherit !important; | ||
126 | } | ||
127 | .dropdown-toggle:first-child { | ||
128 | padding-right: 30px !important; | ||
127 | } | 129 | } |
130 | } | ||
131 | } | ||
128 | 132 | ||
129 | /* smartphones and touchscreens */ | 133 | &:hover { |
130 | @media (hover: none) and (pointer: coarse) { | 134 | @include display-hints; |
131 | @include display-hints($is-mobile: true); | 135 | } |
132 | 136 | ||
133 | /* fill space when on mobile */ | 137 | /* smartphones and touchscreens */ |
134 | max-width: calc(100% - 80px); | 138 | @media (hover: none) and (pointer: coarse) { |
135 | .dropdown-toggle { | 139 | @include display-hints($is-mobile: true); |
136 | max-width: 100%; | ||
137 | } | ||
138 | .logged-in-info { | ||
139 | max-width: calc(100% - 45px) !important; | ||
140 | } | ||
141 | 140 | ||
142 | } | 141 | /* fill space when on mobile */ |
142 | max-width: calc(100% - 80px); | ||
143 | .dropdown-toggle { | ||
144 | max-width: 100%; | ||
145 | } | ||
146 | .logged-in-info { | ||
147 | max-width: calc(100% - 45px) !important; | ||
148 | } | ||
143 | 149 | ||
144 | .dropdown-toggle-indicator { | 150 | } |
145 | position: relative; | ||
146 | width: 0; | ||
147 | display: none; | ||
148 | |||
149 | span { | ||
150 | position: absolute; | ||
151 | right: -35px; | ||
152 | top: -8px; | ||
153 | color: grey; | ||
154 | width: $main-radius; | ||
155 | } | ||
156 | } | ||
157 | 151 | ||
158 | .dropdown-toggle { | 152 | .dropdown-toggle-indicator { |
159 | &::after { | 153 | position: relative; |
160 | border: none; | 154 | width: 0; |
161 | } | 155 | display: none; |
162 | } | ||
163 | 156 | ||
164 | .dropdown-toggle:first-child { | 157 | span { |
165 | display: flex; | 158 | position: absolute; |
166 | align-items: center; | 159 | right: -35px; |
167 | padding: 5px 7px; | 160 | top: -8px; |
168 | border-radius: $main-radius; | 161 | color: grey; |
169 | } | 162 | width: $main-radius; |
163 | } | ||
164 | } | ||
170 | 165 | ||
171 | img { | 166 | .dropdown-toggle { |
172 | @include avatar(34px); | 167 | &::after { |
168 | border: none; | ||
169 | } | ||
170 | } | ||
173 | 171 | ||
174 | margin-right: 10px; | 172 | .dropdown-toggle:first-child { |
175 | } | 173 | display: flex; |
174 | align-items: center; | ||
175 | padding: 5px 7px; | ||
176 | border-radius: $main-radius; | ||
177 | } | ||
178 | |||
179 | img { | ||
180 | @include avatar(34px); | ||
176 | 181 | ||
177 | .logged-in-info { | 182 | margin-right: 10px; |
178 | max-width: 105px; | 183 | } |
184 | } | ||
179 | 185 | ||
180 | flex-grow: 1; | 186 | .logged-in-info { |
187 | max-width: 105px; | ||
181 | 188 | ||
182 | .logged-in-display-name, | 189 | flex-grow: 1; |
183 | .logged-in-username { | ||
184 | @include ellipsis; | ||
185 | } | ||
186 | 190 | ||
187 | .logged-in-display-name { | 191 | .logged-in-display-name, |
188 | font-size: 16px; | 192 | .logged-in-username { |
189 | font-weight: $font-semibold; | 193 | @include ellipsis; |
190 | color: pvar(--menuForegroundColor); | 194 | } |
191 | 195 | ||
192 | @include disable-default-a-behaviour; | 196 | .logged-in-display-name { |
193 | } | 197 | font-size: 16px; |
198 | font-weight: $font-semibold; | ||
199 | color: pvar(--menuForegroundColor); | ||
194 | 200 | ||
195 | .logged-in-username { | 201 | @include disable-default-a-behaviour; |
196 | font-size: 13px; | 202 | } |
197 | color: #C6C6C6; | ||
198 | margin-top: 3px; | ||
199 | } | ||
200 | } | ||
201 | } | ||
202 | 203 | ||
203 | my-notification { | 204 | .logged-in-username { |
204 | margin-left: auto; | 205 | font-size: 13px; |
205 | margin-right: 15px; | 206 | color: #C6C6C6; |
206 | } | 207 | margin-top: 3px; |
207 | } | 208 | } |
209 | } | ||
208 | 210 | ||
209 | .logged-in-menu { | 211 | .logged-in-menu { |
210 | display: flex; | 212 | display: flex; |
211 | flex-direction: column; | 213 | flex-direction: column; |
212 | align-items: flex-start; | 214 | align-items: flex-start; |
213 | border-top: 1px solid var(--greyForegroundColor); | 215 | border-top: 1px solid var(--greyForegroundColor); |
214 | line-height: $line-height-normal; | 216 | line-height: $line-height-normal; |
215 | 217 | ||
216 | a { | 218 | a { |
217 | @include menu-link; | 219 | @include menu-link; |
218 | @include disable-default-a-behaviour; | 220 | @include disable-default-a-behaviour; |
219 | 221 | ||
220 | $icon-size: 13px; | 222 | $icon-size: 13px; |
221 | $additional-margin: ($menu-link-icon-size - $icon-size) / 2; | 223 | $additional-margin: ($menu-link-icon-size - $icon-size) / 2; |
222 | 224 | ||
223 | font-size: 14px; | 225 | font-size: 14px; |
224 | width: 100%; | 226 | width: 100%; |
225 | min-height: 35px; | 227 | min-height: 35px; |
226 | 228 | ||
227 | my-global-icon { | 229 | my-global-icon { |
228 | width: $icon-size; | 230 | width: $icon-size; |
229 | height: $icon-size; | 231 | height: $icon-size; |
230 | 232 | ||
231 | // Keep aligned with other icons | 233 | // Keep aligned with other icons |
232 | margin-left: $additional-margin; | 234 | margin-left: $additional-margin; |
233 | 235 | ||
234 | &[iconName="channel"] { | 236 | &[iconName="channel"] { |
235 | margin-top: -2px; | 237 | margin-top: -2px; |
236 | } | ||
237 | } | 238 | } |
239 | } | ||
238 | 240 | ||
239 | &.active, | 241 | &.active, |
240 | &:hover, | 242 | &:hover, |
241 | &:focus-visible { | 243 | &:focus-visible { |
242 | my-global-icon { | 244 | my-global-icon { |
243 | @include apply-svg-color(var(--menuForegroundColor)); | 245 | @include apply-svg-color(var(--menuForegroundColor)); |
244 | } | ||
245 | } | 246 | } |
247 | } | ||
246 | 248 | ||
247 | &.active { | 249 | &.active { |
248 | $border-left-width: 4px; | 250 | $border-left-width: 4px; |
249 | 251 | ||
250 | font-weight: $font-semibold; | 252 | font-weight: $font-semibold; |
251 | border-left: $border-left-width solid var(--mainColor); | 253 | border-left: $border-left-width solid var(--mainColor); |
252 | 254 | ||
253 | my-global-icon { | 255 | my-global-icon { |
254 | margin-left: $additional-margin - $border-left-width; | 256 | margin-left: $additional-margin - $border-left-width; |
255 | } | ||
256 | } | 257 | } |
257 | } | 258 | } |
258 | } | 259 | } |
@@ -333,50 +334,48 @@ menu { | |||
333 | flex-direction: column; | 334 | flex-direction: column; |
334 | padding: 0 $menu-lateral-padding; | 335 | padding: 0 $menu-lateral-padding; |
335 | } | 336 | } |
337 | } | ||
336 | 338 | ||
337 | $footer-links-base-opacity: .8; | 339 | .footer-links { |
338 | 340 | &, > div { | |
339 | .footer-links { | 341 | display: flex; |
340 | &, > div { | 342 | flex-wrap: wrap; |
341 | display: flex; | 343 | } |
342 | flex-wrap: wrap; | ||
343 | } | ||
344 | 344 | ||
345 | a, span[role=button] { | 345 | a, span[role=button] { |
346 | display: inline-block; | 346 | display: inline-block; |
347 | text-decoration: none; | 347 | text-decoration: none; |
348 | color: pvar(--menuForegroundColor); | 348 | color: pvar(--menuForegroundColor); |
349 | opacity: $footer-links-base-opacity; | 349 | opacity: $footer-links-base-opacity; |
350 | white-space: nowrap; | ||
351 | font-size: 90%; | ||
352 | font-weight: 500; | ||
353 | line-height: 1.4rem; | ||
354 | margin-right: 8px; | ||
355 | |||
356 | &.inline-global-icon { | ||
357 | display: inline-flex; | ||
358 | align-items: center; | ||
350 | white-space: nowrap; | 359 | white-space: nowrap; |
351 | font-size: 90%; | 360 | height: 1.4rem; |
352 | font-weight: 500; | 361 | |
353 | line-height: 1.4rem; | 362 | my-global-icon { |
354 | margin-right: 8px; | 363 | @include apply-svg-color(pvar(--menuForegroundColor)); |
355 | 364 | ||
356 | &.inline-global-icon { | 365 | display: flex; |
357 | display: inline-flex; | 366 | width: auto; |
358 | align-items: center; | 367 | height: 90%; |
359 | white-space: nowrap; | 368 | margin-right: .2rem; |
360 | height: 1.4rem; | ||
361 | |||
362 | my-global-icon { | ||
363 | @include apply-svg-color(pvar(--menuForegroundColor)); | ||
364 | |||
365 | display: flex; | ||
366 | width: auto; | ||
367 | height: 90%; | ||
368 | margin-right: .2rem; | ||
369 | } | ||
370 | } | 369 | } |
371 | } | 370 | } |
372 | } | 371 | } |
372 | } | ||
373 | 373 | ||
374 | .footer-copyleft small a { | 374 | .footer-copyleft small a { |
375 | @include disable-default-a-behaviour; | 375 | @include disable-default-a-behaviour; |
376 | 376 | ||
377 | color: pvar(--menuForegroundColor); | 377 | color: pvar(--menuForegroundColor); |
378 | opacity: $footer-links-base-opacity - .2; | 378 | opacity: $footer-links-base-opacity - .2; |
379 | } | ||
380 | } | 379 | } |
381 | 380 | ||
382 | .dropdown { | 381 | .dropdown { |