aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/menu.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r--client/src/app/menu/menu.component.scss296
1 files changed, 179 insertions, 117 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 975604055..a95a80af6 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,6 +1,39 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4$menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px;
6
7@mixin menu-link {
8 display: flex;
9 align-items: center;
10 padding-left: $menu-lateral-padding;
11 color: pvar(--menuForegroundColor);
12 cursor: pointer;
13 font-size: 16px;
14 white-space: normal;
15 word-break: break-word;
16 padding-right: 20px;
17 transition: background-color .1s ease-in-out;
18
19 &.active {
20 background-color: rgba(255, 255, 255, 0.15);
21 }
22
23 &:hover, &.focus-visible {
24 background-color: rgba(255, 255, 255, 0.10);
25 }
26
27 my-global-icon {
28 @include apply-svg-color(#808080);
29
30 display: flex;
31 width: $menu-link-icon-size;
32 height: $menu-link-icon-size;
33 margin-right: $menu-link-icon-margin-right;
34 }
35}
36
4.menu-wrapper { 37.menu-wrapper {
5 position: fixed; 38 position: fixed;
6 height: calc(100vh - #{$header-height}); 39 height: calc(100vh - #{$header-height});
@@ -14,14 +47,14 @@ menu {
14 @include ellipsis; 47 @include ellipsis;
15 48
16 background-color: pvar(--menuBackgroundColor); 49 background-color: pvar(--menuBackgroundColor);
17 margin: 0;
18 padding: 0;
19 height: 100%;
20 overflow-x: hidden;
21 color: pvar(--menuForegroundColor); 50 color: pvar(--menuForegroundColor);
51
22 display: flex; 52 display: flex;
23 flex-direction: column; 53 flex-direction: column;
54 height: 100%;
24 width: 100%; 55 width: 100%;
56 margin: 0;
57 padding: 0;
25 58
26 &:focus, &:hover { 59 &:focus, &:hover {
27 overflow-y: auto; 60 overflow-y: auto;
@@ -31,7 +64,7 @@ menu {
31 overflow-y: auto; 64 overflow-y: auto;
32 } 65 }
33 66
34 &.logged-in { 67 &.is-logged-in {
35 .panel-block { 68 .panel-block {
36 margin-bottom: 20px; 69 margin-bottom: 20px;
37 } 70 }
@@ -40,19 +73,22 @@ menu {
40 margin-bottom: 15px; 73 margin-bottom: 15px;
41 } 74 }
42 } 75 }
76}
43 77
44 .top-menu { 78.top-menu {
45 flex-grow: 1; 79 flex-grow: 1;
46 width: $menu-width; 80 width: $menu-width;
47 } 81}
48 82
49 .logged-in-block { 83.logged-in-block {
50 height: 100px; 84 margin-bottom: 20px;
51 background-color: rgba(255, 255, 255, 0.15); 85 background-color: rgba(255, 255, 255, 0.15);
86
87 > div:first-child {
88 height: 80px;
52 display: flex; 89 display: flex;
53 align-items: center; 90 align-items: center;
54 justify-content: center; 91 justify-content: center;
55 margin-bottom: 20px;
56 92
57 .logged-in-info { 93 .logged-in-info {
58 @include ellipsis; 94 @include ellipsis;
@@ -95,32 +131,88 @@ menu {
95 } 131 }
96 } 132 }
97 133
98 .button-block { 134 .logged-in-menu {
99 margin: 30px 25px 35px 25px; 135 display: flex;
136 flex-direction: column;
137 align-items: flex-start;
138 border-top: 1px solid var(--greyForegroundColor);
139
140 a {
141 @include menu-link;
142 @include disable-default-a-behaviour;
100 143
101 .login-button { 144 $icon-size: 13px;
102 @include peertube-button-link; 145 $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
103 @include orange-button;
104 146
105 display: block; 147 font-size: 14px;
106 width: 100%; 148 width: 100%;
107 margin-bottom: 10px; 149 min-height: 35px;
108 }
109 150
110 .create-account-button { 151 my-global-icon {
111 @include peertube-button-link; 152 width: $icon-size;
153 height: $icon-size;
112 154
113 display: block; 155 // Keep aligned with other icons
114 width: 100%; 156 margin-left: $additional-margin;
157
158 &[iconName="channel"] {
159 margin-top: -2px;
160 }
161 }
162
163 &.active,
164 &:hover,
165 &:focus-visible {
166 my-global-icon {
167 @include apply-svg-color(var(--mainBackgroundColor));
168 }
169 }
170
171 &.active {
172 $border-left-width: 4px;
115 173
116 color: #fff; 174 font-weight: $font-semibold;
117 background-color: rgba(255, 255, 255, 0.25); 175 border-left: $border-left-width solid var(--mainColor);
118 176
119 &:hover { 177 my-global-icon {
120 background-color: rgba(255, 255, 255, 0.28); 178 margin-left: $additional-margin - $border-left-width;
179 }
121 } 180 }
122 } 181 }
123 } 182 }
183}
184
185.login-buttons-block {
186 margin: 30px 25px 35px 25px;
187
188 .login-button {
189 @include peertube-button-link;
190 @include orange-button;
191
192 display: block;
193 width: 100%;
194 margin-bottom: 10px;
195 }
196
197 .create-account-button {
198 @include peertube-button-link;
199
200 display: block;
201 width: 100%;
202
203 color: #fff;
204 background-color: rgba(255, 255, 255, 0.25);
205
206 &:hover {
207 background-color: rgba(255, 255, 255, 0.28);
208 }
209 }
210}
211
212.in-my-account,
213.on-instance,
214.footer-block {
215 margin-bottom: 15px;
124 216
125 .block-title { 217 .block-title {
126 text-transform: uppercase; 218 text-transform: uppercase;
@@ -128,116 +220,86 @@ menu {
128 font-size: 13px; 220 font-size: 13px;
129 margin-bottom: 25px; 221 margin-bottom: 25px;
130 margin-left: 26px; 222 margin-left: 26px;
131 }
132 223
133 .panel-block { 224 @include ellipsis;
134 margin-bottom: 15px;
135 225
136 a { 226 margin-right: 30px;
137 @include disable-default-a-behaviour; 227 }
138
139 display: flex;
140 align-items: center;
141 padding-left: $menu-lateral-padding;
142 color: pvar(--menuForegroundColor);
143 cursor: pointer;
144 min-height: 40px;
145 font-size: 16px;
146 transition: background-color .1s ease-in-out;
147 white-space: normal;
148 word-break: break-word;
149 padding-right: 20px;
150
151 &.active {
152 background-color: rgba(255, 255, 255, 0.15);
153 }
154
155 &:hover, &.focus-visible {
156 background-color: rgba(255, 255, 255, 0.10);
157 }
158
159 my-global-icon {
160 @include apply-svg-color(#808080);
161 228
162 display: flex; 229 a {
163 width: 22px; 230 @include menu-link;
164 height: 22px; 231 @include disable-default-a-behaviour;
165 margin-right: 18px;
166 232
167 &[iconName="playlists"] { 233 min-height: 40px;
168 height: 24px;
169 width: 24px;
170 234
171 margin-right: 16px; 235 my-global-icon {
172 } 236 &[iconName="playlists"] {
237 height: 24px;
238 width: 24px;
173 239
174 &[iconName="videos"] { 240 margin-right: 16px;
175 position: relative;
176 right: -1px;
177 }
178 } 241 }
179 242
180 .icon { 243 &[iconName="videos"] {
181 @include icon(22px); 244 position: relative;
182 245 right: -1px;
183 margin-right: 18px;
184 } 246 }
185 } 247 }
186 } 248 }
249}
250
251.footer {
252 width: $menu-width;
253 padding-bottom: 15px;
254
255 .bottom-links {
256 display: flex;
257 flex-direction: column;
258 padding: 0 $menu-lateral-padding;
259 }
187 260
188 .footer { 261 $footer-links-base-opacity: .8;
189 width: $menu-width;
190 padding-bottom: 15px;
191 262
192 .bottom-links { 263 .footer-links {
264 &, > div {
193 display: flex; 265 display: flex;
194 flex-direction: column; 266 flex-wrap: wrap;
195 padding: 0 $menu-lateral-padding;
196 } 267 }
197 268
198 $footer-links-base-opacity: .8; 269 a, span[role=button] {
270 display: inline-block;
271 text-decoration: none;
272 color: pvar(--mainBackgroundColor);
273 opacity: $footer-links-base-opacity;
274 white-space: nowrap;
275 font-size: 90%;
276 font-weight: 500;
277 line-height: 1.4rem;
278 margin-right: 8px;
279
280 &.inline-global-icon {
281 display: inline-flex;
282 align-items: center;
283 white-space: nowrap;
284 height: 1.4rem;
199 285
200 .footer-links { 286 my-global-icon {
201 &, > div { 287 @include apply-svg-color(pvar(--mainBackgroundColor));
202 display: flex;
203 flex-wrap: wrap;
204 }
205 288
206 a, span[role=button] { 289 display: flex;
207 display: inline-block; 290 width: auto;
208 text-decoration: none; 291 height: 90%;
209 color: pvar(--mainBackgroundColor); 292 margin-right: .2rem;
210 opacity: $footer-links-base-opacity;
211 white-space: nowrap;
212 font-size: 90%;
213 font-weight: 500;
214 line-height: 1.4rem;
215 margin-right: 8px;
216
217 &.inline-global-icon {
218 display: inline-flex;
219 align-items: center;
220 white-space: nowrap;
221 height: 1.4rem;
222
223 my-global-icon {
224 @include apply-svg-color(pvar(--mainBackgroundColor));
225
226 display: flex;
227 width: auto;
228 height: 90%;
229 margin-right: .2rem;
230 }
231 } 293 }
232 } 294 }
233 } 295 }
296 }
234 297
235 .footer-copyleft small a { 298 .footer-copyleft small a {
236 @include disable-default-a-behaviour; 299 @include disable-default-a-behaviour;
237 300
238 color: pvar(--mainBackgroundColor); 301 color: pvar(--mainBackgroundColor);
239 opacity: $footer-links-base-opacity - .2; 302 opacity: $footer-links-base-opacity - .2;
240 }
241 } 303 }
242} 304}
243 305
@@ -292,7 +354,7 @@ menu {
292 354
293.icon { 355.icon {
294 @include disable-outline; 356 @include disable-outline;
295 @include icon(22px); 357 @include icon($menu-link-icon-size);
296 opacity: 0.8; 358 opacity: 0.8;
297 359
298 &.icon-shortcuts { 360 &.icon-shortcuts {