From e66883b37ae0796256b3aba550670a2d76cfc98a Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 9 Jun 2020 09:33:28 +0200 Subject: `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 --- .../about-instance/about-instance.component.scss | 2 +- .../account-video-channels.component.html | 1 + .../followers-list/followers-list.component.scss | 4 +-- .../following-list/following-list.component.scss | 4 +-- .../video-redundancies-list.component.scss | 4 +-- .../instance-server-blocklist.component.scss | 4 +-- .../+admin/moderation/moderation.component.scss | 20 ++++--------- .../plugins/shared/plugin-list.component.scss | 6 ++-- .../+admin/plugins/shared/toggle-plugin-type.scss | 8 +++--- .../src/app/+admin/system/logs/logs.component.scss | 2 +- .../my-account-subscriptions.component.scss | 2 +- .../my-account-video-channels.component.scss | 2 +- ...-account-video-playlist-elements.component.scss | 4 +-- .../my-account-videos.component.scss | 6 ++-- .../+register/custom-stepper.component.scss | 10 +++---- .../app/+signup/+register/register.component.scss | 4 +-- .../video-channel-videos.component.ts | 4 +++ client/src/app/app.component.scss | 7 +++-- .../src/app/header/search-typeahead.component.scss | 10 +++---- client/src/app/header/suggestion.component.scss | 12 ++++---- client/src/app/login/login.component.scss | 4 +-- .../app/menu/avatar-notification.component.scss | 4 +-- client/src/app/menu/menu.component.scss | 22 +++++++-------- client/src/app/modal/welcome-modal.component.scss | 2 +- client/src/app/search/search.component.scss | 4 +-- .../shared/buttons/action-dropdown.component.scss | 2 +- .../src/app/shared/channel/avatar.component.scss | 4 +-- .../shared/forms/markdown-textarea.component.scss | 12 ++++---- .../shared/forms/peertube-checkbox.component.scss | 2 +- .../shared/forms/timestamp-input.component.scss | 2 +- .../shared/images/preview-upload.component.scss | 2 +- .../instance-features-table.component.scss | 2 +- .../shared/menu/top-menu-dropdown.component.scss | 4 +-- client/src/app/shared/misc/help.component.scss | 6 ++-- .../app/shared/misc/list-overflow.component.scss | 6 ++-- client/src/app/shared/misc/utils.ts | 4 ++- .../shared/users/user-notifications.component.scss | 2 +- .../video-add-to-playlist.component.scss | 2 +- ...video-playlist-element-miniature.component.scss | 12 ++++---- .../video-playlist-miniature.component.scss | 4 +-- .../src/app/shared/video/abstract-video-list.html | 1 + .../src/app/shared/video/abstract-video-list.scss | 25 ++++++++++++++-- client/src/app/shared/video/feed.component.scss | 2 +- .../video/modals/video-download.component.scss | 4 +-- .../shared/video/video-miniature.component.html | 2 +- .../shared/video/video-miniature.component.scss | 33 ++++++++++++++++------ .../app/shared/video/video-miniature.component.ts | 1 + .../shared/video/video-thumbnail.component.scss | 8 ++++-- .../+video-edit/shared/video-edit.component.scss | 4 +-- .../video-import-torrent.component.scss | 2 +- .../videos/+video-edit/video-add.component.scss | 10 +++---- .../comment/video-comment.component.scss | 12 ++++---- .../video-watch-playlist.component.scss | 4 +-- .../videos/+video-watch/video-watch.component.scss | 32 ++++++++++----------- .../video-list/video-overview.component.html | 6 ++-- 55 files changed, 201 insertions(+), 163 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss index 909ae5c21..154031939 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -27,7 +27,7 @@ margin-right: 5px; &.category { - background-color: var(--mainColor); + background-color: pvar(--mainColor); } } } diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index 8f1ff21a5..b45ca58da 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html @@ -19,6 +19,7 @@
This channel doesn't have any videos.
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss index 14189ff11..f2d752eb5 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss @@ -14,12 +14,12 @@ a { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss index 563f8d2bc..b108218b8 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.scss +++ b/client/src/app/+admin/follows/following-list/following-list.component.scss @@ -6,12 +6,12 @@ a { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss index dc43e4007..adcf2037e 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss @@ -6,12 +6,12 @@ a { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss index c6c71587f..c1f66116b 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss @@ -6,12 +6,12 @@ a { display: inline-block; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } span { font-size: 80%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index 26c2a30d4..404eb0504 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss @@ -47,29 +47,19 @@ } .screenratio { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56%; - div { @include miniature-thumbnail; - position: absolute; - height: 100%; - width: 100%; display: inline-flex; justify-content: center; align-items: center; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } - ::ng-deep iframe { - position: absolute; + @include large-screen-ratio($selector: 'div, ::ng-deep iframe') { width: 100% !important; height: 100% !important; left: 0; - top: 0; - } + }; } .chip { @@ -115,7 +105,7 @@ my-action-dropdown.show { } span { - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } .video-table-video-image-label { @@ -135,7 +125,7 @@ my-action-dropdown.show { flex-direction: column; justify-content: center; font-size: 90%; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); line-height: 1rem; div .glyphicon { diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss index 1daa7b741..83030b7e0 100644 --- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss @@ -3,7 +3,7 @@ .plugin { margin: 15px 0; - background-color: var(--submenuColor); + background-color: pvar(--submenuColor); } .first-row { @@ -25,10 +25,10 @@ margin-left: 10px; my-global-icon { - @include apply-svg-color(var(--greyForegroundColor)); + @include apply-svg-color(pvar(--greyForegroundColor)); &[iconName="npm"] { - @include fill-svg-color(var(--greyForegroundColor)); + @include fill-svg-color(pvar(--greyForegroundColor)); } } } diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss index 56ea91d0b..b653abfaa 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss @@ -19,12 +19,12 @@ } .ui-button.ui-state-active { - background-color: var(--mainColor); - border-color: var(--mainColor); + background-color: pvar(--mainColor); + border-color: pvar(--mainColor); &:hover { - background-color: var(--mainHoverColor); - border-color: var(--mainHoverColor); + background-color: pvar(--mainHoverColor); + border-color: pvar(--mainHoverColor); } } diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index 087155254..6b92f4d0b 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -28,7 +28,7 @@ } .warn { - color: var(--mainColor); + color: pvar(--mainColor); } .error { diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss index ba8d56689..dd990c42b 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss @@ -19,7 +19,7 @@ width: fit-content; display: flex; align-items: baseline; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); .video-channel-display-name { font-weight: $font-semibold; diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index 144c2440b..76fb2cde0 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -30,7 +30,7 @@ width: fit-content; display: flex; align-items: baseline; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); .video-channel-display-name { font-weight: $font-semibold; diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss index d47810566..3f2c345d2 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss @@ -3,7 +3,7 @@ @import '_miniature'; .playlist-info { - background-color: var(--submenuColor); + background-color: pvar(--submenuColor); margin-left: -15px; margin-top: -$sub-menu-margin-bottom; @@ -14,7 +14,7 @@ /* fix ellipsis dots background color */ ::ng-deep .miniature-name::after { - background-color: var(--submenuColor) !important; + background-color: pvar(--submenuColor) !important; } } diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index a3422c239..67a58d8d5 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -84,7 +84,7 @@ my-edit-button { .video-bottom, .video-bottom .video-miniature-information { /* same width than a.video-thumbnail */ - max-width: 223px !important; + max-width: $video-thumbnail-width !important; } } } @@ -110,7 +110,7 @@ my-edit-button { ::ng-deep { .action-button { /* same width than a.video-thumbnail */ - width: 223px; + width: $video-thumbnail-width; } } } @@ -124,7 +124,7 @@ my-edit-button { flex-direction: column; .video-miniature-name { - max-width: 223px; + max-width: $video-thumbnail-width; } } } diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss index 2371c8ae5..cc1591ee8 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.scss +++ b/client/src/app/+signup/+register/custom-stepper.component.scss @@ -28,7 +28,7 @@ header { margin-bottom: 10px; my-global-icon { - @include apply-svg-color(var(--mainBackgroundColor)); + @include apply-svg-color(pvar(--mainBackgroundColor)); width: 22px; height: 22px; @@ -42,13 +42,13 @@ header { &.active, &.completed { .step-index { - border-color: var(--mainColor); - background-color: var(--mainColor); - color: var(--mainBackgroundColor); + border-color: pvar(--mainColor); + background-color: pvar(--mainColor); + color: pvar(--mainBackgroundColor); } .step-label { - color: var(--mainColor); + color: pvar(--mainColor); } } diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index e135b5cb4..6a7e361e3 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss @@ -39,7 +39,7 @@ ngb-accordion ::ng-deep { .btn { font-weight: $font-semibold !important; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; } } } @@ -94,7 +94,7 @@ button { margin-bottom: 20px; ::ng-deep .loader div { - border-color: var(--mainColor) transparent transparent transparent; + border-color: pvar(--mainColor) transparent transparent transparent; } & + div { diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts index 9eaa3ba32..6df47d11c 100644 --- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts +++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts @@ -47,6 +47,10 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On super() this.titlePage = this.i18n('Published videos') + this.displayOptions = { + ...this.displayOptions, + avatar: false + } } ngOnInit () { diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 27fd69c8d..a2180e19d 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -13,7 +13,7 @@ .sub-header-container { margin-top: $header-height; - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); width: 100%; } @@ -22,7 +22,7 @@ position: fixed; top: 0; width: 100%; - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); z-index: z(header); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); display: flex; @@ -38,7 +38,7 @@ @include icon(24px); &.icon-menu { - background-color: var(--mainForegroundColor); + background-color: pvar(--mainForegroundColor); mask-image: url('../assets/images/header/menu.svg'); margin: 0 18px 0 20px; } @@ -65,6 +65,7 @@ background: url('../assets/images/logo.svg') no-repeat; width: 23px; height: 24px; + margin-right: .5rem; } } diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index 33b88825f..0a30ebd55 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss @@ -10,7 +10,7 @@ font-size: 14px; &::placeholder { - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } @@ -18,7 +18,7 @@ @include icon(25px); height: 21px; - background-color: var(--mainForegroundColor); + background-color: pvar(--mainForegroundColor); mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%; // yolo @@ -37,10 +37,10 @@ #typeahead-help, #typeahead-instructions, my-suggestions ::ng-deep ul { - border: 1px solid var(--mainBackgroundColor); + border: 1px solid pvar(--mainBackgroundColor); border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; - background: var(--mainBackgroundColor); + background: pvar(--mainBackgroundColor); transition: .3s ease; transition-property: box-shadow; } @@ -67,7 +67,7 @@ my-suggestions ::ng-deep ul { #typeahead-container { input { - border: 1px solid var(--mainBackgroundColor) !important; + border: 1px solid pvar(--mainBackgroundColor) !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; flex-grow: 1; transition: box-shadow .3s ease, width .2s ease; diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss index 1de2f43bd..692a81daa 100644 --- a/client/src/app/header/suggestion.component.scss +++ b/client/src/app/header/suggestion.component.scss @@ -5,21 +5,21 @@ a { width: 100%; &, &:hover { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); &.focus-visible { - background-color: var(--mainHoverColor); - color: var(--mainBackgroundColor); + background-color: pvar(--mainHoverColor); + color: pvar(--mainBackgroundColor); } } } .bg-gray { - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); } .text-gray-light { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } my-global-icon { @@ -28,5 +28,5 @@ my-global-icon { top: -2px; margin: 5px; - @include apply-svg-color(var(--mainForegroundColor)); + @include apply-svg-color(pvar(--mainForegroundColor)); } diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss index db9f78f7c..fde6cc15e 100644 --- a/client/src/app/login/login.component.scss +++ b/client/src/app/login/login.component.scss @@ -18,7 +18,7 @@ input[type=submit] { } .create-an-account, .forgot-password-button { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); cursor: pointer; transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1); @@ -50,7 +50,7 @@ input[type=submit] { cursor: pointer; border: 1px solid #d1d7e0; border-radius: 5px; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); margin: 10px 10px 0 0; display: flex; justify-content: center; 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 @@ align-items: center; justify-content: center; - background-color: var(--mainColor); - color: var(#fff); + background-color: pvar(--mainColor); + color: #fff; font-size: 10px; font-weight: $font-semibold; 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 @@ padding: 0; width: $menu-width; z-index: z(menu); - scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor); + scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor); } menu { @include ellipsis; - background-color: var(--menuBackgroundColor); + background-color: pvar(--menuBackgroundColor); margin: 0; padding: 0; height: 100%; overflow-x: hidden; - color: var(--menuForegroundColor); + color: pvar(--menuForegroundColor); display: flex; flex-direction: column; width: 100%; @@ -62,7 +62,7 @@ menu { .logged-in-display-name { font-size: 16px; font-weight: $font-semibold; - color: var(--menuForegroundColor); + color: pvar(--menuForegroundColor); cursor: pointer; @include disable-default-a-behaviour; @@ -89,7 +89,7 @@ menu { } ::ng-deep { - @include apply-svg-color(var(--menuForegroundColor)); + @include apply-svg-color(pvar(--menuForegroundColor)); } } } @@ -139,7 +139,7 @@ menu { display: flex; align-items: center; padding-left: $menu-lateral-padding; - color: var(--menuForegroundColor); + color: pvar(--menuForegroundColor); cursor: pointer; min-height: 40px; font-size: 16px; @@ -206,7 +206,7 @@ menu { a, span[role=button] { display: inline-block; text-decoration: none; - color: var(--mainBackgroundColor); + color: pvar(--mainBackgroundColor); opacity: $footer-links-base-opacity; white-space: nowrap; font-size: 90%; @@ -221,7 +221,7 @@ menu { height: 1.4rem; my-global-icon { - @include apply-svg-color(var(--mainBackgroundColor)); + @include apply-svg-color(pvar(--mainBackgroundColor)); display: flex; width: auto; @@ -235,7 +235,7 @@ menu { .footer-copyleft small a { @include disable-default-a-behaviour; - color: var(--mainBackgroundColor); + color: pvar(--mainBackgroundColor); opacity: $footer-links-base-opacity - .2; } } @@ -323,7 +323,7 @@ label { left: 3px; width: 14px; height: 14px; - background: var(--mainBackgroundColor); + background: pvar(--mainBackgroundColor); border-radius: 50%; transition: 0.3s ease-out; } @@ -334,7 +334,7 @@ label { } input:checked + label { - background: var(--mainColor); + background: pvar(--mainColor); &:after { left: calc(100% - 3px); diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss index c04772546..a93dbcef9 100644 --- a/client/src/app/modal/welcome-modal.component.scss +++ b/client/src/app/modal/welcome-modal.component.scss @@ -51,7 +51,7 @@ li { .link-block { @include disable-default-a-behaviour; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); padding: 10px; transition: background-color 0.2s ease-in; flex-basis: 33%; diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 78749cf20..6e59adb60 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -62,7 +62,7 @@ display: flex; align-items: baseline; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); width: fit-content; .video-channel-display-name { @@ -111,7 +111,7 @@ // Override the min-width: 500px to not break screen ::ng-deep .video-miniature-information { - min-width: 223px !important; + min-width: $video-thumbnail-width !important; } } diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index 7a030f32c..724a04efc 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss @@ -34,7 +34,7 @@ width: 21px; ::ng-deep { - @include apply-svg-color(var(--actionButtonColor)); + @include apply-svg-color(pvar(--actionButtonColor)); } } diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss index 77b90c579..4bf8fcd21 100644 --- a/client/src/app/shared/channel/avatar.component.scss +++ b/client/src/app/shared/channel/avatar.component.scss @@ -30,9 +30,9 @@ a:nth-of-type(2) img { height: 60%; width: 60%; - border: 2px solid var(--mainBackgroundColor); + border: 2px solid pvar(--mainBackgroundColor); transform: translateX(15%); position: relative; - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); } } diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss index 33f52fa6e..f2c76f7a1 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.scss +++ b/client/src/app/shared/forms/markdown-textarea.component.scss @@ -14,7 +14,7 @@ $input-border-radius: 3px; textarea { @include peertube-textarea(100%, 150px); - background-color: var(--markdownTextareaBackgroundColor); + background-color: pvar(--markdownTextareaBackgroundColor); font-family: monospace; font-size: 13px; @@ -61,7 +61,7 @@ $input-border-radius: 3px; flex-grow: 1; border-bottom-left-radius: unset; border-bottom-right-radius: unset; - border-bottom: 2px solid var(--mainColor); + border-bottom: 2px solid pvar(--mainColor); :first-child { margin-left: auto; @@ -112,7 +112,7 @@ $input-border-radius: 3px; padding-left: 0px; padding-right: 0px; position: absolute; - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); width: 100% !important; border-top: none; border-left: none; @@ -125,8 +125,8 @@ $input-border-radius: 3px; ::ng-deep .tab-content { @include content-preview-base(); - background-color: var(--mainBackgroundColor); - scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); + scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor); } textarea, @@ -214,7 +214,7 @@ $input-border-radius: 3px; padding: $base-padding; border-right: 1px dashed $input-border-color !important; resize: none; - scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor); + scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor); &:focus { box-shadow: none; diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss index c1233e8a5..cf8540dc3 100644 --- a/client/src/app/shared/forms/peertube-checkbox.component.scss +++ b/client/src/app/shared/forms/peertube-checkbox.component.scss @@ -45,7 +45,7 @@ font-size: 12px; line-height: 12px; font-weight: 500; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); background-color: rgba(217,225,232,.1); border: 1px solid rgba(217,225,232,.5); } diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss index 9671cc65f..8092b095b 100644 --- a/client/src/app/shared/forms/timestamp-input.component.scss +++ b/client/src/app/shared/forms/timestamp-input.component.scss @@ -9,7 +9,7 @@ p-inputmask { &:focus-within, &:focus { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } } } diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss index 8f3522115..88eccd5f7 100644 --- a/client/src/app/shared/images/preview-upload.component.scss +++ b/client/src/app/shared/images/preview-upload.component.scss @@ -22,7 +22,7 @@ &.no-image { border: 2px solid grey; - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); } } } diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss index 67f2b6c84..47c064265 100644 --- a/client/src/app/shared/instance/instance-features-table.component.scss +++ b/client/src/app/shared/instance/instance-features-table.component.scss @@ -3,7 +3,7 @@ table { font-size: 14px; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); .label, .sub-label { diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss index 5f90dcf80..84dd7dce3 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.scss +++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss @@ -48,8 +48,8 @@ width: 100%; &.active { - color: var(--mainBackgroundColor) !important; - background-color: var(--mainHoverColor); + color: pvar(--mainBackgroundColor) !important; + background-color: pvar(--mainHoverColor); opacity: .9; } } diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 3c8b66cd5..43f33a53a 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -11,7 +11,7 @@ top: -2px; margin: 5px; - @include apply-svg-color(var(--mainForegroundColor)) + @include apply-svg-color(pvar(--mainForegroundColor)) } } @@ -25,8 +25,8 @@ text-align: left; padding: 10px; font-size: 13px; - background-color: var(--mainBackgroundColor); - color: var(--mainForegroundColor); + background-color: pvar(--mainBackgroundColor); + color: pvar(--mainForegroundColor); border-radius: 3px; p { diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss index 1e5fe4c10..1ec044489 100644 --- a/client/src/app/shared/misc/list-overflow.component.scss +++ b/client/src/app/shared/misc/list-overflow.component.scss @@ -24,7 +24,7 @@ button { &.routeActive { &::after { display: inherit; - border: 2px solid var(--mainColor); + border: 2px solid pvar(--mainColor); position: relative; right: 95%; top: 50%; @@ -53,8 +53,8 @@ button { width: 100%; &.active { - color: var(--mainBackgroundColor) !important; - background-color: var(--mainHoverColor); + color: pvar(--mainBackgroundColor) !important; + background-color: pvar(--mainHoverColor); opacity: .9; } } diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 3d1e906a2..bc3ab85b3 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -59,7 +59,9 @@ function durationToString (duration: number) { const secondsPadding = seconds >= 10 ? '' : '0' const displayedHours = hours > 0 ? hours.toString() + ':' : '' - return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString() + return ( + displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString() + ).replace(/^0/, '') } function immutableAssign (target: A, source: B) { diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss index ddd7abe8a..5166bd559 100644 --- a/client/src/app/shared/users/user-notifications.component.scss +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -44,7 +44,7 @@ .from-date { font-size: 0.85em; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); padding-left: 5px; min-width: 70px; text-align: right; diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss index f572dd902..47baa997b 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss @@ -68,7 +68,7 @@ .timestamp-info { font-size: 0.9em; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); margin-left: 5px; } } diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss index 649272c52..afd775b25 100644 --- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss @@ -24,7 +24,7 @@ my-video-thumbnail, .video { display: flex; align-items: center; - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); padding: 10px; border-bottom: 1px solid $separator-border-color; @@ -49,7 +49,7 @@ my-video-thumbnail, a { @include disable-default-a-behaviour; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); display: flex; min-width: 0; align-items: center; @@ -58,11 +58,11 @@ my-video-thumbnail, .position { font-weight: $font-semibold; margin-right: 10px; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); min-width: 25px; my-global-icon { - @include apply-svg-color(var(--greyForegroundColor)); + @include apply-svg-color(pvar(--greyForegroundColor)); width: 17px; position: relative; @@ -81,7 +81,7 @@ my-video-thumbnail, } .video-info-account, .video-info-timestamp { - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); } } } @@ -109,7 +109,7 @@ my-video-thumbnail, } .icon-more { - @include apply-svg-color(var(--greyForegroundColor)); + @include apply-svg-color(pvar(--greyForegroundColor)); display: flex; diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss index 527993496..1b16dbb01 100644 --- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss @@ -53,7 +53,7 @@ @include disable-default-a-behaviour; display: block; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); } .privacy-date { @@ -72,7 +72,7 @@ .video-info-description { margin-top: 10px; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); } } } diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html index a811fc0a8..cd8a5b840 100644 --- a/client/src/app/shared/video/abstract-video-list.html +++ b/client/src/app/shared/video/abstract-video-list.html @@ -36,6 +36,7 @@ +
{{ object.category.label }}
- + @@ -21,7 +21,7 @@ #{{ object.tag }} - + @@ -34,7 +34,7 @@ - + -- cgit v1.2.3