aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-09 09:33:28 +0200
committerGitHub <noreply@github.com>2020-06-09 09:33:28 +0200
commite66883b37ae0796256b3aba550670a2d76cfc98a (patch)
tree3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/app/menu
parent6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff)
downloadPeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list * normalize timestamp display on miniatures * use grid for abstract-video-list - refactor scss function var to pvar to avoid overriding css variables - move fluid-grid margins to adapt-margin-content-width mixin for maintainability - fix video-miniature-name margin-top on small screen * move sceenratio function in a mixin * display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/avatar-notification.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss22
2 files changed, 13 insertions, 13 deletions
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index ebb2a5424..88f2b6296 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -106,8 +106,8 @@
106 align-items: center; 106 align-items: center;
107 justify-content: center; 107 justify-content: center;
108 108
109 background-color: var(--mainColor); 109 background-color: pvar(--mainColor);
110 color: var(#fff); 110 color: #fff;
111 font-size: 10px; 111 font-size: 10px;
112 font-weight: $font-semibold; 112 font-weight: $font-semibold;
113 113
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 5bff0c328..8f8c31417 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -7,18 +7,18 @@
7 padding: 0; 7 padding: 0;
8 width: $menu-width; 8 width: $menu-width;
9 z-index: z(menu); 9 z-index: z(menu);
10 scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor); 10 scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
11} 11}
12 12
13menu { 13menu {
14 @include ellipsis; 14 @include ellipsis;
15 15
16 background-color: var(--menuBackgroundColor); 16 background-color: pvar(--menuBackgroundColor);
17 margin: 0; 17 margin: 0;
18 padding: 0; 18 padding: 0;
19 height: 100%; 19 height: 100%;
20 overflow-x: hidden; 20 overflow-x: hidden;
21 color: var(--menuForegroundColor); 21 color: pvar(--menuForegroundColor);
22 display: flex; 22 display: flex;
23 flex-direction: column; 23 flex-direction: column;
24 width: 100%; 24 width: 100%;
@@ -62,7 +62,7 @@ menu {
62 .logged-in-display-name { 62 .logged-in-display-name {
63 font-size: 16px; 63 font-size: 16px;
64 font-weight: $font-semibold; 64 font-weight: $font-semibold;
65 color: var(--menuForegroundColor); 65 color: pvar(--menuForegroundColor);
66 cursor: pointer; 66 cursor: pointer;
67 67
68 @include disable-default-a-behaviour; 68 @include disable-default-a-behaviour;
@@ -89,7 +89,7 @@ menu {
89 } 89 }
90 90
91 ::ng-deep { 91 ::ng-deep {
92 @include apply-svg-color(var(--menuForegroundColor)); 92 @include apply-svg-color(pvar(--menuForegroundColor));
93 } 93 }
94 } 94 }
95 } 95 }
@@ -139,7 +139,7 @@ menu {
139 display: flex; 139 display: flex;
140 align-items: center; 140 align-items: center;
141 padding-left: $menu-lateral-padding; 141 padding-left: $menu-lateral-padding;
142 color: var(--menuForegroundColor); 142 color: pvar(--menuForegroundColor);
143 cursor: pointer; 143 cursor: pointer;
144 min-height: 40px; 144 min-height: 40px;
145 font-size: 16px; 145 font-size: 16px;
@@ -206,7 +206,7 @@ menu {
206 a, span[role=button] { 206 a, span[role=button] {
207 display: inline-block; 207 display: inline-block;
208 text-decoration: none; 208 text-decoration: none;
209 color: var(--mainBackgroundColor); 209 color: pvar(--mainBackgroundColor);
210 opacity: $footer-links-base-opacity; 210 opacity: $footer-links-base-opacity;
211 white-space: nowrap; 211 white-space: nowrap;
212 font-size: 90%; 212 font-size: 90%;
@@ -221,7 +221,7 @@ menu {
221 height: 1.4rem; 221 height: 1.4rem;
222 222
223 my-global-icon { 223 my-global-icon {
224 @include apply-svg-color(var(--mainBackgroundColor)); 224 @include apply-svg-color(pvar(--mainBackgroundColor));
225 225
226 display: flex; 226 display: flex;
227 width: auto; 227 width: auto;
@@ -235,7 +235,7 @@ menu {
235 .footer-copyleft small a { 235 .footer-copyleft small a {
236 @include disable-default-a-behaviour; 236 @include disable-default-a-behaviour;
237 237
238 color: var(--mainBackgroundColor); 238 color: pvar(--mainBackgroundColor);
239 opacity: $footer-links-base-opacity - .2; 239 opacity: $footer-links-base-opacity - .2;
240 } 240 }
241 } 241 }
@@ -323,7 +323,7 @@ label {
323 left: 3px; 323 left: 3px;
324 width: 14px; 324 width: 14px;
325 height: 14px; 325 height: 14px;
326 background: var(--mainBackgroundColor); 326 background: pvar(--mainBackgroundColor);
327 border-radius: 50%; 327 border-radius: 50%;
328 transition: 0.3s ease-out; 328 transition: 0.3s ease-out;
329 } 329 }
@@ -334,7 +334,7 @@ label {
334} 334}
335 335
336input:checked + label { 336input:checked + label {
337 background: var(--mainColor); 337 background: pvar(--mainColor);
338 338
339 &:after { 339 &:after {
340 left: calc(100% - 3px); 340 left: calc(100% - 3px);