aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/menu.component.scss
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-02-28 13:52:21 +0100
committerGitHub <noreply@github.com>2020-02-28 13:52:21 +0100
commitd3217560a611b94f888ecf3de93b428a7521d4de (patch)
tree26fc984f351afb994dc13c94e138476ded50c76a /client/src/app/menu/menu.component.scss
parent64645512b08875c18ebdc009a550cdfa69def955 (diff)
downloadPeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.gz
PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.zst
PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.zip
Add visitor settings, rework logged-in dropdown (#2514)
* Add visitor settings, rework logged-in dropdown * Make user dropdown P2P switch functional * Fix lint * Fix unnecessary notification when user logs out * Simplify visitor settings code and remove unnecessary icons * Catch parsing errors and reindent menu styles
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r--client/src/app/menu/menu.component.scss200
1 files changed, 143 insertions, 57 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 40c9a2b25..a4b1ec000 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -29,7 +29,7 @@ menu {
29 29
30 &.logged-in { 30 &.logged-in {
31 .panel-block { 31 .panel-block {
32 margin-bottom: 25px; 32 margin-bottom: 20px;
33 } 33 }
34 34
35 .block-title { 35 .block-title {
@@ -88,22 +88,6 @@ menu {
88 @include apply-svg-color(var(--menuForegroundColor)); 88 @include apply-svg-color(var(--menuForegroundColor));
89 } 89 }
90 } 90 }
91
92 .dropdown-item {
93 @include dropdown-with-icon-item;
94
95 my-global-icon {
96 width: 22px;
97 height: 22px;
98
99 &[iconName="sign-out"] {
100 position: relative;
101 right: -1px;
102 height: 21px;
103 width: 21px;
104 }
105 }
106 }
107 } 91 }
108 } 92 }
109 93
@@ -143,7 +127,7 @@ menu {
143 } 127 }
144 128
145 .panel-block { 129 .panel-block {
146 margin-bottom: 45px; 130 margin-bottom: 15px;
147 131
148 a { 132 a {
149 @include disable-default-a-behaviour; 133 @include disable-default-a-behaviour;
@@ -198,60 +182,162 @@ menu {
198 } 182 }
199 183
200 .footer { 184 .footer {
201 padding-bottom: 15px;
202 padding-left: $menu-lateral-padding;
203 padding-right: $menu-lateral-padding;
204 width: $menu-width; 185 width: $menu-width;
186 padding-bottom: 15px;
205 187
206 .language, .shortcuts, .color-palette { 188 & > div:not(.panel-block) {
207 display: inline-block; 189 padding-left: $menu-lateral-padding;
208 color: $menu-bottom-color; 190 padding-right: $menu-lateral-padding;
209 cursor: pointer; 191 row-gap: 1em;
210 font-size: 12px; 192 }
211 font-weight: $font-semibold;
212 193
213 .icon { 194 $footer-links-base-opacity: .8;
214 @include disable-outline;
215 @include icon(28px);
216 opacity: 0.9;
217 195
218 &.icon-language { 196 .footer-links {
219 position: relative; 197 display: inline-flex;
220 top: -1px; 198 flex-wrap: wrap;
221 width: 28px; 199
222 height: 24px; 200 & > a {
201 @include disable-default-a-behaviour;
223 202
224 background-image: url('../../assets/images/menu/language.png'); 203 display: inline-block;
204 text-decoration: none;
205 color: var(--mainBackgroundColor);
206 opacity: $footer-links-base-opacity;
207 white-space: nowrap;
208 font-size: 90%;
209 font-weight: 500;
210 line-height: 1.4rem;
211 margin-right: 8px;
212
213 &.inline-global-icon {
214 display: inline-flex;
215 align-items: center;
216 white-space: nowrap;
217 height: 1.4rem;
218
219 my-global-icon {
220 @include apply-svg-color(var(--mainBackgroundColor));
221
222 display: flex;
223 width: auto;
224 height: 90%;
225 margin-right: .2rem;
226 }
225 } 227 }
228 }
229 }
226 230
227 &.icon-shortcuts { 231 .footer-copyleft small a {
228 position: relative; 232 @include disable-default-a-behaviour;
229 top: -1px;
230 width: 24px;
231 height: 24px;
232 233
233 background-image: url('../../assets/images/menu/keyboard.png'); 234 color: var(--mainBackgroundColor);
234 filter: invert(100%); 235 opacity: $footer-links-base-opacity - .2;
235 } 236 }
237 }
238}
236 239
237 &.icon-moonsun { 240.dropdown-menu {
238 margin-left: 10px; 241 width: calc(100% + 40px);
239 position: relative; 242}
240 top: -1px;
241 width: 24px;
242 height: 24px;
243 243
244 background-image: url('../../assets/images/menu/moonsun.svg'); 244.dropdown-item {
245 } 245 @include dropdown-with-icon-item;
246 246
247 &:hover { 247 cursor: pointer;
248 opacity: 1; 248 display: flex;
249 } 249 align-items: center;
250 } 250
251 i.glyphicon-menu-right {
252 opacity: .4;
253 }
254
255 my-global-icon {
256 &[iconName="cog"],
257 &[iconName="sign-out"] {
258 position: relative;
259 right: -2px;
260 height: 20px;
261 width: 20px;
262 }
263 }
264
265 my-global-icon.not-displayed {
266 display: none;
267 }
268
269 &:hover {
270 my-global-icon.hover-display-toggle.not-displayed {
271 display: inherit;
272 }
273 my-global-icon.hover-display-toggle {
274 display: none;
251 } 275 }
252 } 276 }
253} 277}
254 278
279.more-settings {
280 text-transform: uppercase;
281 font-size: 80%;
282 color: #6c757d;
283}
284
285.icon {
286 @include disable-outline;
287 @include icon(22px);
288 opacity: 0.8;
289
290 &.icon-shortcuts {
291 position: relative;
292 top: -1px;
293 margin-right: 10px;
294
295 background-image: url('../../assets/images/menu/keyboard.png');
296 }
297}
298
299input[type=checkbox]{
300 position: absolute;
301 visibility: hidden;
302}
303
304label {
305 cursor: pointer;
306 text-indent: -9999px;
307 width: 35px;
308 height: 20px;
309 background: #cccccc;
310 display: block;
311 border-radius: 100px;
312 position: relative;
313 margin: 0;
314
315 &:after {
316 content: '';
317 position: absolute;
318 top: 3px;
319 left: 3px;
320 width: 14px;
321 height: 14px;
322 background: var(--mainBackgroundColor);
323 border-radius: 50%;
324 transition: 0.3s ease-out;
325 }
326
327 &:active:after {
328 width: 40px;
329 }
330}
331
332input:checked + label {
333 background: var(--mainColor);
334
335 &:after {
336 left: calc(100% - 3px);
337 transform: translateX(-100%);
338 }
339}
340
255@media screen and (max-width: $mobile-view) { 341@media screen and (max-width: $mobile-view) {
256 .menu-wrapper { 342 .menu-wrapper {
257 width: 100% !important; 343 width: 100% !important;