]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/menu/menu.component.scss
8a4910605a88652c1b3892810acd6c60ca88981c
[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss
1 menu {
2 background-color: $black-background;
3 margin: 0;
4 padding: 0;
5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9 z-index: 1000;
10 color: $menu-color;
11
12 @media screen and (max-width: 550px) {
13 font-size: 90%;
14 }
15
16 .logged-in-block {
17 height: 100px;
18 background-color: rgba(255, 255, 255, 0.15);
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 margin-bottom: 35px;
23
24 .logged-in-info {
25 flex-grow: 1;
26 margin-left: 40px;
27
28 .logged-in-username {
29 font-size: 16px;
30 font-weight: $font-semibold;
31 }
32
33 .logged-in-email {
34 font-size: 13px;
35 color: #C6C6C6;
36 }
37 }
38
39 .logged-in-more {
40 margin-right: 20px;
41
42 .glyphicon {
43 cursor: pointer;
44 font-size: 18px;
45 }
46 }
47 }
48
49 .button-block {
50 margin: 30px 25px 35px 25px;
51
52 .login-button, .create-account-button {
53 font-weight: $font-semibold;
54 font-size: 15px;
55 height: $button-height;
56 line-height: $button-height;
57 width: 190px;
58 border-radius: 3px;
59 text-align: center;
60
61 &.login-button {
62 background-color: $orange-color;
63 margin-bottom: 10px;
64 }
65
66 &.create-account-button {
67 background-color: rgba(255, 255, 255, 0.25);
68 }
69 }
70 }
71
72 .block-title {
73 text-transform: uppercase;
74 font-weight: $font-bold; // Bold
75 font-size: 13px;
76 margin-bottom: 25px;
77 }
78
79 .panel-block {
80 margin-bottom: 45px;
81 margin-left: 26px;
82
83 a {
84 display: flex;
85
86 .icon {
87 width: 22px;
88 height: 22px;
89 display: inline-block;
90 margin-right: 18px;
91 background-size: contain;
92
93 &.icon-videos-trending {
94 position: relative;
95 top: -2px;
96 background-image: url('../../assets/menu/trending.svg');
97 }
98
99 &.icon-videos-recently-added {
100 width: 23px;
101 height: 23px;
102 position: relative;
103 top: -1px;
104 background-image: url('../../assets/menu/recently-added.svg');
105 }
106
107 &.icon-administration {
108 width: 23px;
109 height: 23px;
110
111 background-image: url('../../assets/menu/administration.svg');
112 }
113 }
114 }
115 }
116
117 a {
118 color: $menu-color;
119 height: 22px;
120 line-height: 22px;
121 display: block;
122 font-size: 16px;
123 cursor: pointer;
124 margin-bottom: 15px;
125
126 &:hover, &:focus {
127 text-decoration: none !important;
128 outline: none !important;
129 }
130 }
131 }