]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/app/menu/menu.component.scss
Display report reason in multiple lines (#957)
[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss
... / ...
CommitLineData
1@import '_variables';
2@import '_mixins';
3
4.menu-wrapper {
5 position: fixed;
6 height: calc(100vh - #{$header-height});
7 padding: 0;
8 width: $menu-width;
9}
10
11menu {
12 background-color: $black-background;
13 margin: 0;
14 padding: 0;
15 height: 100%;
16 white-space: nowrap;
17 text-overflow: ellipsis;
18 overflow: hidden;
19 z-index: 1000;
20 color: $menu-color;
21 overflow-y: auto;
22 display: flex;
23 flex-direction: column;
24
25 .top-menu {
26 flex-grow: 1;
27 }
28
29 .logged-in-block {
30 height: 100px;
31 background-color: rgba(255, 255, 255, 0.15);
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 margin-bottom: 35px;
36
37 img {
38 @include avatar(34px);
39
40 margin-left: 20px;
41 margin-right: 10px;
42 }
43
44 .logged-in-info {
45 flex-grow: 1;
46
47 .logged-in-username {
48 font-size: 16px;
49 font-weight: $font-semibold;
50 color: $menu-color;
51 cursor: pointer;
52
53 @include disable-default-a-behaviour;
54 }
55
56 .logged-in-email {
57 font-size: 13px;
58 color: #C6C6C6;
59 white-space: nowrap;
60 overflow: hidden;
61 text-overflow: ellipsis;
62 max-width: 140px;
63 }
64 }
65
66 .logged-in-more {
67 margin-right: 20px;
68
69 .glyphicon {
70 cursor: pointer;
71 font-size: 18px;
72
73 &::after {
74 border: none;
75 }
76 }
77 }
78 }
79
80 .button-block {
81 margin: 30px 25px 35px 25px;
82
83 .login-button {
84 @include peertube-button-link;
85 @include orange-button;
86
87 display: block;
88 width: 100%;
89 margin-bottom: 10px;
90 }
91
92 .create-account-button {
93 @include peertube-button-link;
94
95 display: block;
96 width: 100%;
97
98 color: #fff;
99 background-color: rgba(255, 255, 255, 0.25);
100
101 &:hover {
102 background-color: rgba(255, 255, 255, 0.28);
103 }
104 }
105 }
106
107 .block-title {
108 text-transform: uppercase;
109 font-weight: $font-bold; // Bold
110 font-size: 13px;
111 margin-bottom: 25px;
112 margin-left: 26px;
113 }
114
115 .panel-block {
116 margin-bottom: 45px;
117
118 a {
119 display: flex;
120 align-items: center;
121 padding-left: $menu-left-padding;
122 color: $menu-color;
123 cursor: pointer;
124 height: 40px;
125 font-size: 16px;
126 transition: background-color .1s ease-in-out;
127 @include disable-default-a-behaviour;
128
129 &:hover {
130 background-color: rgba(255, 255, 255, 0.15);
131 }
132
133 .icon {
134 @include icon(22px);
135
136 margin-right: 18px;
137
138 &.icon-videos-subscriptions {
139 position: relative;
140 top: -2px;
141 background-image: url('../../assets/images/menu/subscriptions.svg');
142 }
143
144 &.icon-videos-trending {
145 position: relative;
146 top: -2px;
147 background-image: url('../../assets/images/menu/trending.svg');
148 }
149
150 &.icon-videos-recently-added {
151 width: 23px;
152 height: 23px;
153 position: relative;
154 top: -1px;
155 background-image: url('../../assets/images/menu/recently-added.svg');
156 }
157
158 &.icon-videos-local {
159 width: 23px;
160 height: 23px;
161 position: relative;
162 top: -1px;
163 background-image: url('../../assets/images/menu/home.svg');
164 }
165
166 &.icon-administration {
167 width: 23px;
168 height: 23px;
169
170 background-image: url('../../assets/images/menu/administration.svg');
171 }
172
173 &.icon-about {
174 width: 23px;
175 height: 23px;
176
177 background-image: url('../../assets/images/menu/about.svg');
178 }
179 }
180 }
181 }
182
183 .footer {
184 margin-bottom: 15px;
185 padding-left: $menu-left-padding;
186
187 .language {
188 display: inline-block;
189 color: $menu-bottom-color;
190 cursor: pointer;
191 font-size: 12px;
192 font-weight: $font-semibold;
193
194 .icon {
195 @include icon(28px);
196 opacity: 0.9;
197
198 &.icon-language {
199 position: relative;
200 top: -1px;
201 width: 28px;
202 height: 24px;
203
204 background-image: url('../../assets/images/menu/language.png');
205 }
206
207 &:hover {
208 opacity: 1;
209 }
210 }
211 }
212 }
213}