diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-15 13:43:50 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-15 13:43:50 +0200 |
commit | f1ac63488c0050fec1c4d713d74db4f4ea944395 (patch) | |
tree | fbb3a33152bef18bac501c1a4c3f46ae9b586bb6 /client/src | |
parent | fe88ca697d4c43b24cdc2462f5e4e83548776a51 (diff) | |
download | PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.gz PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.tar.zst PeerTube-f1ac63488c0050fec1c4d713d74db4f4ea944395.zip |
Refactor menu css
Diffstat (limited to 'client/src')
7 files changed, 194 insertions, 234 deletions
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index f605cbb7a..eddaff542 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss | |||
@@ -21,13 +21,6 @@ input[type=email] { | |||
21 | } | 21 | } |
22 | } | 22 | } |
23 | 23 | ||
24 | .modal-footer.inputs { | ||
25 | .action-button.action-button-cancel { | ||
26 | width: auto !important; | ||
27 | display: inline-block; | ||
28 | } | ||
29 | } | ||
30 | |||
31 | @media screen and (max-width: #{map-get($container-max-widths, sm)}) { | 24 | @media screen and (max-width: #{map-get($container-max-widths, sm)}) { |
32 | .modal-body { | 25 | .modal-body { |
33 | #forgot-password-email { | 26 | #forgot-password-email { |
@@ -35,10 +28,8 @@ input[type=email] { | |||
35 | } | 28 | } |
36 | } | 29 | } |
37 | 30 | ||
38 | .modal-footer.inputs { | 31 | .modal-footer .grey-button { |
39 | .action-button.action-button-cancel { | 32 | display: none; |
40 | display: none; | ||
41 | } | ||
42 | } | 33 | } |
43 | } | 34 | } |
44 | 35 | ||
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index a60aa38d6..c754a99d1 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss | |||
@@ -5,6 +5,7 @@ | |||
5 | 5 | ||
6 | #search-video { | 6 | #search-video { |
7 | @include peertube-input-text($search-input-width); | 7 | @include peertube-input-text($search-input-width); |
8 | |||
8 | padding-left: 10px; | 9 | padding-left: 10px; |
9 | padding-right: 40px; // For the search icon | 10 | padding-right: 40px; // For the search icon |
10 | font-size: 14px; | 11 | font-size: 14px; |
@@ -14,7 +15,7 @@ | |||
14 | } | 15 | } |
15 | } | 16 | } |
16 | 17 | ||
17 | .icon.icon-search { | 18 | .icon-search { |
18 | @include icon(25px); | 19 | @include icon(25px); |
19 | height: 18px; | 20 | height: 18px; |
20 | 21 | ||
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index a0777660f..df5c7971d 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html | |||
@@ -40,9 +40,10 @@ | |||
40 | 40 | ||
41 | <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings" | 41 | <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings" |
42 | fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy | 42 | fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy |
43 | (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"> | 43 | (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)" |
44 | <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon> | 44 | > |
45 | <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon> | 45 | <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon> |
46 | <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon> | ||
46 | <span i18n>Sensitive:</span> | 47 | <span i18n>Sensitive:</span> |
47 | <span class="ml-auto text-muted">{{ nsfwPolicy }}</span> | 48 | <span class="ml-auto text-muted">{{ nsfwPolicy }}</span> |
48 | </a> | 49 | </a> |
@@ -72,17 +73,17 @@ | |||
72 | </div> | 73 | </div> |
73 | 74 | ||
74 | <div class="logged-in-menu"> | 75 | <div class="logged-in-menu"> |
75 | <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)"> | 76 | <a class="menu-link" routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)"> |
76 | <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> | 77 | <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> |
77 | <ng-container i18n>My account</ng-container> | 78 | <ng-container i18n>My account</ng-container> |
78 | </a> | 79 | </a> |
79 | 80 | ||
80 | <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)"> | 81 | <a class="menu-link" routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)"> |
81 | <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> | 82 | <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> |
82 | <ng-container i18n>My library</ng-container> | 83 | <ng-container i18n>My library</ng-container> |
83 | </a> | 84 | </a> |
84 | 85 | ||
85 | <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active"> | 86 | <a class="menu-link" *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active"> |
86 | <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> | 87 | <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> |
87 | <ng-container i18n>Administration</ng-container> | 88 | <ng-container i18n>Administration</ng-container> |
88 | </a> | 89 | </a> |
@@ -90,29 +91,29 @@ | |||
90 | </div> | 91 | </div> |
91 | 92 | ||
92 | <div *ngIf="!isLoggedIn" class="login-buttons-block"> | 93 | <div *ngIf="!isLoggedIn" class="login-buttons-block"> |
93 | <a i18n routerLink="/login" class="login-button">Login</a> | 94 | <a i18n routerLink="/login" class="peertube-button-link orange-button">Login</a> |
94 | <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a> | 95 | <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link">Create an account</a> |
95 | </div> | 96 | </div> |
96 | 97 | ||
97 | <div *ngIf="isLoggedIn" class="in-my-library"> | 98 | <div *ngIf="isLoggedIn" class="in-my-library"> |
98 | <div i18n class="block-title">IN MY LIBRARY</div> | 99 | <div i18n class="block-title">IN MY LIBRARY</div> |
99 | 100 | ||
100 | <a *ngIf="user.canSeeVideosLink" routerLink="/my-library/videos" routerLinkActive="active"> | 101 | <a *ngIf="user.canSeeVideosLink" class="menu-link" routerLink="/my-library/videos" routerLinkActive="active"> |
101 | <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> | 102 | <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> |
102 | <ng-container i18n>Videos</ng-container> | 103 | <ng-container i18n>Videos</ng-container> |
103 | </a> | 104 | </a> |
104 | 105 | ||
105 | <a routerLink="/my-library/video-playlists" routerLinkActive="active"> | 106 | <a class="menu-link" routerLink="/my-library/video-playlists" routerLinkActive="active"> |
106 | <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> | 107 | <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> |
107 | <ng-container i18n>Playlists</ng-container> | 108 | <ng-container i18n>Playlists</ng-container> |
108 | </a> | 109 | </a> |
109 | 110 | ||
110 | <a routerLink="/videos/subscriptions" routerLinkActive="active"> | 111 | <a class="menu-link" routerLink="/videos/subscriptions" routerLinkActive="active"> |
111 | <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> | 112 | <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> |
112 | <ng-container i18n>Subscriptions</ng-container> | 113 | <ng-container i18n>Subscriptions</ng-container> |
113 | </a> | 114 | </a> |
114 | 115 | ||
115 | <a routerLink="/my-library/history/videos" routerLinkActive="active"> | 116 | <a class="menu-link" routerLink="/my-library/history/videos" routerLinkActive="active"> |
116 | <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> | 117 | <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> |
117 | <ng-container i18n>History</ng-container> | 118 | <ng-container i18n>History</ng-container> |
118 | </a> | 119 | </a> |
@@ -122,22 +123,22 @@ | |||
122 | <div class="on-instance"> | 123 | <div class="on-instance"> |
123 | <div i18n class="block-title">ON {{instanceName}}</div> | 124 | <div i18n class="block-title">ON {{instanceName}}</div> |
124 | 125 | ||
125 | <a routerLink="/videos/overview" routerLinkActive="active"> | 126 | <a class="menu-link" routerLink="/videos/overview" routerLinkActive="active"> |
126 | <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon> | 127 | <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon> |
127 | <ng-container i18n>Discover</ng-container> | 128 | <ng-container i18n>Discover</ng-container> |
128 | </a> | 129 | </a> |
129 | 130 | ||
130 | <a routerLink="/videos/trending" routerLinkActive="active"> | 131 | <a class="menu-link" routerLink="/videos/trending" routerLinkActive="active"> |
131 | <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon> | 132 | <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon> |
132 | <ng-container i18n>Trending</ng-container> | 133 | <ng-container i18n>Trending</ng-container> |
133 | </a> | 134 | </a> |
134 | 135 | ||
135 | <a routerLink="/videos/recently-added" routerLinkActive="active"> | 136 | <a class="menu-link" routerLink="/videos/recently-added" routerLinkActive="active"> |
136 | <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon> | 137 | <my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon> |
137 | <ng-container i18n>Recently added</ng-container> | 138 | <ng-container i18n>Recently added</ng-container> |
138 | </a> | 139 | </a> |
139 | 140 | ||
140 | <a routerLink="/videos/local" routerLinkActive="active"> | 141 | <a class="menu-link" routerLink="/videos/local" routerLinkActive="active"> |
141 | <my-global-icon iconName="home" aria-hidden="true"></my-global-icon> | 142 | <my-global-icon iconName="home" aria-hidden="true"></my-global-icon> |
142 | <ng-container i18n>Local videos</ng-container> | 143 | <ng-container i18n>Local videos</ng-container> |
143 | </a> | 144 | </a> |
@@ -146,18 +147,18 @@ | |||
146 | 147 | ||
147 | <div class="footer"> | 148 | <div class="footer"> |
148 | <div class="footer-block"> | 149 | <div class="footer-block"> |
149 | <a *ngIf="!isLoggedIn" (click)="openQuickSettings()"> | 150 | <a *ngIf="!isLoggedIn" class="menu-link" (click)="openQuickSettings()"> |
150 | <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> | 151 | <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> |
151 | <ng-container i18n>My settings</ng-container> | 152 | <ng-container i18n>My settings</ng-container> |
152 | </a> | 153 | </a> |
153 | 154 | ||
154 | <a routerLink="/about" routerLinkActive="active"> | 155 | <a class="menu-link" routerLink="/about" routerLinkActive="active"> |
155 | <my-global-icon iconName="help" aria-hidden="true"></my-global-icon> | 156 | <my-global-icon iconName="help" aria-hidden="true"></my-global-icon> |
156 | <ng-container i18n>About</ng-container> | 157 | <ng-container i18n>About</ng-container> |
157 | </a> | 158 | </a> |
158 | </div> | 159 | </div> |
159 | 160 | ||
160 | <div class="bottom-links"> | 161 | <div class="footer-bottom"> |
161 | 162 | ||
162 | <div class="footer-links"> | 163 | <div class="footer-links"> |
163 | <div *ngIf="isLoggedIn === false"> | 164 | <div *ngIf="isLoggedIn === false"> |
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 729dbc6ee..00d1a1f69 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss | |||
@@ -5,7 +5,9 @@ $menu-link-icon-size: 22px; | |||
5 | $menu-link-icon-margin-right: 18px; | 5 | $menu-link-icon-margin-right: 18px; |
6 | $footer-links-base-opacity: .8; | 6 | $footer-links-base-opacity: .8; |
7 | 7 | ||
8 | @mixin menu-link { | 8 | .menu-link { |
9 | @include disable-default-a-behaviour; | ||
10 | |||
9 | display: flex; | 11 | display: flex; |
10 | align-items: center; | 12 | align-items: center; |
11 | padding-left: $menu-lateral-padding; | 13 | padding-left: $menu-lateral-padding; |
@@ -91,32 +93,15 @@ menu { | |||
91 | display: flex; | 93 | display: flex; |
92 | align-items: center; | 94 | align-items: center; |
93 | justify-content: left; | 95 | justify-content: left; |
94 | |||
95 | my-notification { | ||
96 | margin-left: auto; | ||
97 | margin-right: 15px; | ||
98 | } | ||
99 | } | 96 | } |
100 | } | 97 | } |
101 | 98 | ||
102 | .logged-in-more { | 99 | my-notification { |
103 | $main-radius: 25px; | 100 | margin-left: auto; |
104 | 101 | margin-right: 15px; | |
105 | flex: 1; | 102 | } |
106 | margin-left: 13px; | ||
107 | border-radius: $main-radius; | ||
108 | transition: all .1s ease-in-out; | ||
109 | cursor: pointer; | ||
110 | |||
111 | *, & { | ||
112 | line-height: 1; | ||
113 | } | ||
114 | |||
115 | &.show { | ||
116 | background-color: rgba(255, 255, 255, 0.20); | ||
117 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); | ||
118 | } | ||
119 | 103 | ||
104 | .logged-in-more { | ||
120 | @mixin display-hints($is-mobile: false) { | 105 | @mixin display-hints($is-mobile: false) { |
121 | background-color: rgba(255, 255, 255, 0.15); | 106 | background-color: rgba(255, 255, 255, 0.15); |
122 | 107 | ||
@@ -130,6 +115,20 @@ menu { | |||
130 | } | 115 | } |
131 | } | 116 | } |
132 | 117 | ||
118 | $main-radius: 25px; | ||
119 | |||
120 | flex: 1; | ||
121 | margin-left: 13px; | ||
122 | border-radius: $main-radius; | ||
123 | transition: all .1s ease-in-out; | ||
124 | cursor: pointer; | ||
125 | line-height: 1; | ||
126 | |||
127 | &.show { | ||
128 | background-color: rgba(255, 255, 255, 0.20); | ||
129 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); | ||
130 | } | ||
131 | |||
133 | &:hover { | 132 | &:hover { |
134 | @include display-hints; | 133 | @include display-hints; |
135 | } | 134 | } |
@@ -140,13 +139,14 @@ menu { | |||
140 | 139 | ||
141 | /* fill space when on mobile */ | 140 | /* fill space when on mobile */ |
142 | max-width: calc(100% - 80px); | 141 | max-width: calc(100% - 80px); |
142 | |||
143 | .dropdown-toggle { | 143 | .dropdown-toggle { |
144 | max-width: 100%; | 144 | max-width: 100%; |
145 | } | 145 | } |
146 | |||
146 | .logged-in-info { | 147 | .logged-in-info { |
147 | max-width: calc(100% - 45px) !important; | 148 | max-width: calc(100% - 45px) !important; |
148 | } | 149 | } |
149 | |||
150 | } | 150 | } |
151 | 151 | ||
152 | .dropdown-toggle-indicator { | 152 | .dropdown-toggle-indicator { |
@@ -175,35 +175,35 @@ menu { | |||
175 | padding: 5px 7px; | 175 | padding: 5px 7px; |
176 | border-radius: $main-radius; | 176 | border-radius: $main-radius; |
177 | } | 177 | } |
178 | } | ||
178 | 179 | ||
179 | my-account-avatar { | 180 | my-account-avatar { |
180 | margin-right: 10px; | 181 | margin-right: 10px; |
181 | } | ||
182 | } | 182 | } |
183 | 183 | ||
184 | .logged-in-info { | 184 | .logged-in-info { |
185 | max-width: 105px; | 185 | max-width: 105px; |
186 | 186 | ||
187 | flex-grow: 1; | 187 | flex-grow: 1; |
188 | } | ||
188 | 189 | ||
189 | .logged-in-display-name, | 190 | .logged-in-display-name, |
190 | .logged-in-username { | 191 | .logged-in-username { |
191 | @include ellipsis; | 192 | @include ellipsis; |
192 | } | 193 | } |
193 | 194 | ||
194 | .logged-in-display-name { | 195 | .logged-in-display-name { |
195 | font-size: 16px; | 196 | font-size: 16px; |
196 | font-weight: $font-semibold; | 197 | font-weight: $font-semibold; |
197 | color: pvar(--menuForegroundColor); | 198 | color: pvar(--menuForegroundColor); |
198 | 199 | ||
199 | @include disable-default-a-behaviour; | 200 | @include disable-default-a-behaviour; |
200 | } | 201 | } |
201 | 202 | ||
202 | .logged-in-username { | 203 | .logged-in-username { |
203 | font-size: 13px; | 204 | font-size: 13px; |
204 | color: #C6C6C6; | 205 | color: #C6C6C6; |
205 | margin-top: 3px; | 206 | margin-top: 3px; |
206 | } | ||
207 | } | 207 | } |
208 | 208 | ||
209 | .logged-in-menu { | 209 | .logged-in-menu { |
@@ -214,9 +214,6 @@ menu { | |||
214 | line-height: $line-height-normal; | 214 | line-height: $line-height-normal; |
215 | 215 | ||
216 | a { | 216 | a { |
217 | @include menu-link; | ||
218 | @include disable-default-a-behaviour; | ||
219 | |||
220 | $icon-size: 13px; | 217 | $icon-size: 13px; |
221 | $additional-margin: ($menu-link-icon-size - $icon-size) / 2; | 218 | $additional-margin: ($menu-link-icon-size - $icon-size) / 2; |
222 | 219 | ||
@@ -230,10 +227,6 @@ menu { | |||
230 | 227 | ||
231 | // Keep aligned with other icons | 228 | // Keep aligned with other icons |
232 | margin-left: $additional-margin; | 229 | margin-left: $additional-margin; |
233 | |||
234 | &[iconName="channel"] { | ||
235 | margin-top: -2px; | ||
236 | } | ||
237 | } | 230 | } |
238 | 231 | ||
239 | &.active, | 232 | &.active, |
@@ -260,27 +253,22 @@ menu { | |||
260 | .login-buttons-block { | 253 | .login-buttons-block { |
261 | margin: 30px 25px 35px 25px; | 254 | margin: 30px 25px 35px 25px; |
262 | 255 | ||
263 | .login-button { | 256 | > a { |
264 | @include peertube-button-link; | ||
265 | @include orange-button; | ||
266 | |||
267 | display: block; | 257 | display: block; |
268 | width: 100%; | 258 | width: 100%; |
269 | margin-bottom: 10px; | ||
270 | } | ||
271 | 259 | ||
272 | .create-account-button { | 260 | :not(:last-child) { |
273 | @include peertube-button-link; | 261 | margin-bottom: 10px; |
274 | 262 | } | |
275 | display: block; | 263 | } |
276 | width: 100%; | 264 | } |
277 | 265 | ||
278 | color: #fff; | 266 | .create-account-button { |
279 | background-color: rgba(255, 255, 255, 0.25); | 267 | color: #fff; |
268 | background-color: rgba(255, 255, 255, 0.25); | ||
280 | 269 | ||
281 | &:hover { | 270 | &:hover { |
282 | background-color: rgba(255, 255, 255, 0.28); | 271 | background-color: rgba(255, 255, 255, 0.28); |
283 | } | ||
284 | } | 272 | } |
285 | } | 273 | } |
286 | 274 | ||
@@ -290,48 +278,30 @@ menu { | |||
290 | margin-bottom: 15px; | 278 | margin-bottom: 15px; |
291 | 279 | ||
292 | .block-title { | 280 | .block-title { |
281 | @include ellipsis; | ||
282 | |||
293 | text-transform: uppercase; | 283 | text-transform: uppercase; |
294 | font-weight: $font-bold; // Bold | 284 | font-weight: $font-bold; // Bold |
295 | font-size: 13px; | 285 | font-size: 13px; |
296 | margin-bottom: 25px; | 286 | margin-bottom: 25px; |
297 | margin-left: 26px; | 287 | margin-left: 26px; |
298 | |||
299 | @include ellipsis; | ||
300 | |||
301 | margin-right: 30px; | 288 | margin-right: 30px; |
302 | } | 289 | } |
303 | 290 | ||
304 | a { | 291 | a { |
305 | @include menu-link; | ||
306 | @include disable-default-a-behaviour; | ||
307 | |||
308 | min-height: 40px; | 292 | min-height: 40px; |
309 | |||
310 | my-global-icon { | ||
311 | &[iconName="playlists"] { | ||
312 | height: 24px; | ||
313 | width: 24px; | ||
314 | |||
315 | margin-right: 16px; | ||
316 | } | ||
317 | |||
318 | &[iconName="videos"] { | ||
319 | position: relative; | ||
320 | right: -1px; | ||
321 | } | ||
322 | } | ||
323 | } | 293 | } |
324 | } | 294 | } |
325 | 295 | ||
326 | .footer { | 296 | .footer { |
327 | width: $menu-width; | 297 | width: $menu-width; |
328 | padding-bottom: 15px; | 298 | padding-bottom: 15px; |
299 | } | ||
329 | 300 | ||
330 | .bottom-links { | 301 | .footer-bottom { |
331 | display: flex; | 302 | display: flex; |
332 | flex-direction: column; | 303 | flex-direction: column; |
333 | padding: 0 $menu-lateral-padding; | 304 | padding: 0 $menu-lateral-padding; |
334 | } | ||
335 | } | 305 | } |
336 | 306 | ||
337 | .footer-links { | 307 | .footer-links { |
@@ -340,7 +310,8 @@ menu { | |||
340 | flex-wrap: wrap; | 310 | flex-wrap: wrap; |
341 | } | 311 | } |
342 | 312 | ||
343 | a, span[role=button] { | 313 | a, |
314 | span[role=button] { | ||
344 | display: inline-block; | 315 | display: inline-block; |
345 | text-decoration: none; | 316 | text-decoration: none; |
346 | color: pvar(--menuForegroundColor); | 317 | color: pvar(--menuForegroundColor); |
@@ -350,22 +321,6 @@ menu { | |||
350 | font-weight: 500; | 321 | font-weight: 500; |
351 | line-height: 1.4rem; | 322 | line-height: 1.4rem; |
352 | margin-right: 8px; | 323 | margin-right: 8px; |
353 | |||
354 | &.inline-global-icon { | ||
355 | display: inline-flex; | ||
356 | align-items: center; | ||
357 | white-space: nowrap; | ||
358 | height: 1.4rem; | ||
359 | |||
360 | my-global-icon { | ||
361 | @include apply-svg-color(pvar(--menuForegroundColor)); | ||
362 | |||
363 | display: flex; | ||
364 | width: auto; | ||
365 | height: 90%; | ||
366 | margin-right: .2rem; | ||
367 | } | ||
368 | } | ||
369 | } | 324 | } |
370 | } | 325 | } |
371 | 326 | ||
@@ -395,32 +350,13 @@ menu { | |||
395 | opacity: .4; | 350 | opacity: .4; |
396 | } | 351 | } |
397 | 352 | ||
398 | my-global-icon { | ||
399 | &[iconName="cog"], | ||
400 | &[iconName="sign-out"] { | ||
401 | position: relative; | ||
402 | right: -2px; | ||
403 | height: 20px; | ||
404 | width: 20px; | ||
405 | } | ||
406 | } | ||
407 | |||
408 | my-global-icon.not-displayed { | ||
409 | display: none; | ||
410 | } | ||
411 | |||
412 | &:hover { | 353 | &:hover { |
413 | my-global-icon.hover-display-toggle.not-displayed { | 354 | .hover-display-toggle { |
414 | display: inherit; | ||
415 | } | ||
416 | my-global-icon.hover-display-toggle { | ||
417 | display: none; | 355 | display: none; |
418 | } | 356 | } |
419 | 357 | ||
420 | &.settings-sensitive { | 358 | .hover-display-toggle[hidden] { |
421 | my-global-icon ::ng-deep svg { | 359 | display: inherit !important; |
422 | margin-top: 2px !important; | ||
423 | } | ||
424 | } | 360 | } |
425 | } | 361 | } |
426 | } | 362 | } |
@@ -440,7 +376,8 @@ menu { | |||
440 | } | 376 | } |
441 | } | 377 | } |
442 | 378 | ||
443 | .top-menu, .footer { | 379 | .top-menu, |
380 | .footer { | ||
444 | width: 100% !important; | 381 | width: 100% !important; |
445 | } | 382 | } |
446 | 383 | ||
@@ -448,9 +385,35 @@ menu { | |||
448 | width: calc(100vw - 30px); | 385 | width: calc(100vw - 30px); |
449 | } | 386 | } |
450 | 387 | ||
451 | .dropdown-item:hover, .dropdown-item:active { | 388 | .dropdown-item:hover, |
389 | .dropdown-item:active { | ||
452 | &.settings-sensitive my-global-icon ::ng-deep svg { | 390 | &.settings-sensitive my-global-icon ::ng-deep svg { |
453 | margin-top: 0px !important; | 391 | margin-top: 0px !important; |
454 | } | 392 | } |
455 | } | 393 | } |
456 | } | 394 | } |
395 | |||
396 | my-global-icon { | ||
397 | &[iconName="playlists"] { | ||
398 | height: 24px; | ||
399 | width: 24px; | ||
400 | |||
401 | margin-right: 16px; | ||
402 | } | ||
403 | |||
404 | &[iconName="videos"] { | ||
405 | position: relative; | ||
406 | right: -1px; | ||
407 | } | ||
408 | |||
409 | &[iconName="channel"] { | ||
410 | margin-top: -2px; | ||
411 | } | ||
412 | |||
413 | &[iconName="sign-out"] { | ||
414 | position: relative; | ||
415 | right: -2px; | ||
416 | height: 20px; | ||
417 | width: 20px; | ||
418 | } | ||
419 | } | ||
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 2b723a15a..ea59ab346 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss | |||
@@ -4,82 +4,82 @@ | |||
4 | 4 | ||
5 | .video-thumbnail { | 5 | .video-thumbnail { |
6 | @include miniature-thumbnail; | 6 | @include miniature-thumbnail; |
7 | } | ||
7 | 8 | ||
8 | .progress-bar { | 9 | .progress-bar { |
9 | height: 3px; | 10 | height: 3px; |
10 | width: 100%; | 11 | width: 100%; |
11 | position: absolute; | 12 | position: absolute; |
12 | bottom: 0; | 13 | bottom: 0; |
13 | background-color: rgba(0, 0, 0, 0.20); | 14 | background-color: rgba(0, 0, 0, 0.20); |
14 | 15 | ||
15 | div { | 16 | div { |
16 | height: 100%; | 17 | height: 100%; |
17 | background-color: pvar(--mainColor); | 18 | background-color: pvar(--mainColor); |
18 | } | ||
19 | } | 19 | } |
20 | } | ||
20 | 21 | ||
21 | .video-thumbnail-watch-later-overlay, | 22 | .video-thumbnail-watch-later-overlay, |
22 | .video-thumbnail-label-overlay, | 23 | .video-thumbnail-label-overlay, |
23 | .video-thumbnail-duration-overlay, | 24 | .video-thumbnail-duration-overlay, |
24 | .video-thumbnail-live-overlay { | 25 | .video-thumbnail-live-overlay { |
25 | @include static-thumbnail-overlay; | 26 | @include static-thumbnail-overlay; |
26 | 27 | ||
27 | border-radius: 3px; | 28 | border-radius: 3px; |
28 | font-size: 12px; | 29 | font-size: 12px; |
29 | font-weight: $font-semibold; | 30 | font-weight: $font-semibold; |
30 | line-height: 1.1; | 31 | line-height: 1.1; |
31 | z-index: z(miniature); | 32 | z-index: z(miniature); |
32 | } | 33 | } |
33 | 34 | ||
34 | .video-thumbnail-label-overlay { | 35 | .video-thumbnail-label-overlay { |
35 | position: absolute; | 36 | position: absolute; |
36 | padding: 0 5px; | 37 | padding: 0 5px; |
37 | left: 5px; | 38 | left: 5px; |
38 | top: 5px; | 39 | top: 5px; |
39 | font-weight: $font-bold; | 40 | font-weight: $font-bold; |
40 | 41 | ||
41 | &.warning { background-color: orange; } | 42 | &.warning { background-color: orange; } |
42 | &.danger { background-color: red; } | 43 | &.danger { background-color: red; } |
43 | } | 44 | } |
44 | 45 | ||
45 | .video-thumbnail-duration-overlay, | 46 | .video-thumbnail-duration-overlay, |
46 | .video-thumbnail-live-overlay { | 47 | .video-thumbnail-live-overlay { |
47 | position: absolute; | 48 | position: absolute; |
48 | padding: 0 3px; | 49 | padding: 0 3px; |
49 | right: 5px; | 50 | right: 5px; |
50 | bottom: 5px; | 51 | bottom: 5px; |
51 | } | 52 | } |
52 | 53 | ||
53 | .video-thumbnail-live-overlay { | 54 | .video-thumbnail-live-overlay { |
54 | font-weight: $font-semibold; | 55 | font-weight: $font-semibold; |
55 | color: #fff; | 56 | color: #fff; |
56 | 57 | ||
57 | &:not(.live-ended) { | 58 | &:not(.live-ended) { |
58 | background-color: rgba(224, 8, 8, 0.7); | 59 | background-color: rgba(224, 8, 8, 0.7); |
59 | } | ||
60 | } | 60 | } |
61 | } | ||
61 | 62 | ||
62 | .video-thumbnail-actions-overlay { | 63 | .video-thumbnail-actions-overlay { |
63 | position: absolute; | 64 | position: absolute; |
64 | display: flex; | 65 | display: flex; |
65 | flex-direction: column; | 66 | flex-direction: column; |
66 | right: 5px; | 67 | right: 5px; |
67 | top: 5px; | 68 | top: 5px; |
68 | opacity: 0; | 69 | opacity: 0; |
69 | 70 | ||
70 | div:not(:first-child) { | 71 | div:not(:first-child) { |
71 | margin-top: 2px; | 72 | margin-top: 2px; |
72 | } | 73 | } |
74 | } | ||
73 | 75 | ||
74 | .video-thumbnail-watch-later-overlay { | 76 | .video-thumbnail-watch-later-overlay { |
75 | padding: 3px; | 77 | padding: 3px; |
76 | 78 | ||
77 | my-global-icon { | 79 | my-global-icon { |
78 | width: 22px; | 80 | width: 22px; |
79 | height: 22px; | 81 | height: 22px; |
80 | 82 | ||
81 | @include apply-svg-color(#fff); | 83 | @include apply-svg-color(#fff); |
82 | } | ||
83 | } | ||
84 | } | 84 | } |
85 | } | 85 | } |
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 9c11e7609..bc19127aa 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html | |||
@@ -10,10 +10,14 @@ | |||
10 | <div class="video-bottom"> | 10 | <div class="video-bottom"> |
11 | <div class="video-miniature-information"> | 11 | <div class="video-miniature-information"> |
12 | <div class="d-flex video-miniature-meta"> | 12 | <div class="d-flex video-miniature-meta"> |
13 | <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> | 13 | <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="channel-avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> |
14 | <img [src]="getAvatarUrl()" alt="" class="channel" /> | 14 | <img [src]="getAvatarUrl()" alt="" /> |
15 | </a> | 15 | </a> |
16 | <my-account-avatar *ngIf="displayOptions.avatar && displayOwnerAccount()" [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel" [title]="channelLinkTitle"></my-account-avatar> | 16 | |
17 | <my-account-avatar | ||
18 | *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle" | ||
19 | [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel" | ||
20 | ></my-account-avatar> | ||
17 | 21 | ||
18 | <div class="w-100 d-flex flex-column"> | 22 | <div class="w-100 d-flex flex-column"> |
19 | <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name" | 23 | <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name" |
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index bf52b870c..f6f2925f0 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss | |||
@@ -13,12 +13,12 @@ $more-button-width: 40px; | |||
13 | } | 13 | } |
14 | 14 | ||
15 | my-account-avatar, | 15 | my-account-avatar, |
16 | .avatar { | 16 | .channel-avatar { |
17 | margin: 10px 10px 0 0; | 17 | margin: 10px 10px 0 0; |
18 | } | ||
18 | 19 | ||
19 | img.channel { | 20 | .channel-avatar img{ |
20 | @include channel-avatar(40px); | 21 | @include channel-avatar(40px); |
21 | } | ||
22 | } | 22 | } |
23 | 23 | ||
24 | .video-miniature-created-at-views { | 24 | .video-miniature-created-at-views { |
@@ -78,9 +78,9 @@ my-account-avatar, | |||
78 | } | 78 | } |
79 | } | 79 | } |
80 | 80 | ||
81 | .video-miniature { | 81 | .video-miniature:hover { |
82 | &:hover ::ng-deep .video-thumbnail-actions-overlay, | 82 | ::ng-deep .video-thumbnail-actions-overlay, |
83 | &:hover .video-actions ::ng-deep .dropdown-root { | 83 | .video-actions ::ng-deep .dropdown-root { |
84 | opacity: 1 !important; | 84 | opacity: 1 !important; |
85 | } | 85 | } |
86 | } | 86 | } |
@@ -153,7 +153,7 @@ my-account-avatar, | |||
153 | } | 153 | } |
154 | 154 | ||
155 | // We don't display avatar in row mode | 155 | // We don't display avatar in row mode |
156 | .avatar { | 156 | .channel-avatar { |
157 | display: none; | 157 | display: none; |
158 | } | 158 | } |
159 | 159 | ||