From e66883b37ae0796256b3aba550670a2d76cfc98a Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 9 Jun 2020 09:33:28 +0200 Subject: [PATCH] `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.component.scss | 2 +- .../account-video-channels.component.html | 1 + .../followers-list.component.scss | 4 +- .../following-list.component.scss | 4 +- .../video-redundancies-list.component.scss | 4 +- .../instance-server-blocklist.component.scss | 4 +- .../moderation/moderation.component.scss | 20 ++--- .../plugins/shared/plugin-list.component.scss | 6 +- .../plugins/shared/toggle-plugin-type.scss | 8 +- .../+admin/system/logs/logs.component.scss | 2 +- .../my-account-subscriptions.component.scss | 2 +- .../my-account-video-channels.component.scss | 2 +- ...unt-video-playlist-elements.component.scss | 4 +- .../my-account-videos.component.scss | 6 +- .../+register/custom-stepper.component.scss | 10 +-- .../+signup/+register/register.component.scss | 4 +- .../video-channel-videos.component.ts | 4 + client/src/app/app.component.scss | 7 +- .../header/search-typeahead.component.scss | 10 +-- .../src/app/header/suggestion.component.scss | 12 +-- client/src/app/login/login.component.scss | 4 +- .../menu/avatar-notification.component.scss | 4 +- client/src/app/menu/menu.component.scss | 22 ++--- .../app/modal/welcome-modal.component.scss | 2 +- client/src/app/search/search.component.scss | 4 +- .../buttons/action-dropdown.component.scss | 2 +- .../app/shared/channel/avatar.component.scss | 4 +- .../forms/markdown-textarea.component.scss | 12 +-- .../forms/peertube-checkbox.component.scss | 2 +- .../forms/timestamp-input.component.scss | 2 +- .../images/preview-upload.component.scss | 2 +- .../instance-features-table.component.scss | 2 +- .../menu/top-menu-dropdown.component.scss | 4 +- .../src/app/shared/misc/help.component.scss | 6 +- .../shared/misc/list-overflow.component.scss | 6 +- client/src/app/shared/misc/utils.ts | 4 +- .../users/user-notifications.component.scss | 2 +- .../video-add-to-playlist.component.scss | 2 +- ...-playlist-element-miniature.component.scss | 12 +-- .../video-playlist-miniature.component.scss | 4 +- .../app/shared/video/abstract-video-list.html | 1 + .../app/shared/video/abstract-video-list.scss | 25 +++++- .../src/app/shared/video/feed.component.scss | 2 +- .../modals/video-download.component.scss | 4 +- .../video/video-miniature.component.html | 2 +- .../video/video-miniature.component.scss | 33 +++++-- .../shared/video/video-miniature.component.ts | 1 + .../video/video-thumbnail.component.scss | 8 +- .../shared/video-edit.component.scss | 4 +- .../video-import-torrent.component.scss | 2 +- .../+video-edit/video-add.component.scss | 10 +-- .../comment/video-comment.component.scss | 12 +-- .../video-watch-playlist.component.scss | 4 +- .../+video-watch/video-watch.component.scss | 32 +++---- .../video-list/video-overview.component.html | 6 +- client/src/sass/application.scss | 24 +++--- client/src/sass/bootstrap.scss | 30 +++---- client/src/sass/include/_miniature.scss | 55 ++++++------ client/src/sass/include/_mixins.scss | 86 +++++++++++-------- client/src/sass/include/_variables.scss | 2 +- client/src/sass/loading-bar.scss | 4 +- client/src/sass/player/context-menu.scss | 2 +- client/src/sass/player/peertube-skin.scss | 10 +-- client/src/sass/player/settings-menu.scss | 2 +- client/src/sass/primeng-custom.scss | 70 +++++++-------- 65 files changed, 355 insertions(+), 294 deletions(-) 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 @@ - + diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 16e7ea5ca..d5763527e 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -47,21 +47,21 @@ body { --actionButtonColor: #{$grey-foreground-color}; --supportButtonBackgroundColor: #{transparent}; - --supportButtonColor: #{var(--actionButtonColor)}; + --supportButtonColor: #{pvar(--actionButtonColor)}; --supportButtonHeartColor: #{$support-button-heart}; --activatedActionButtonColor: #{$activated-action-button-color}; font-family: $main-fonts; font-weight: $font-regular; - color: var(--mainForegroundColor); - background-color: var(--mainBackgroundColor); + color: pvar(--mainForegroundColor); + background-color: pvar(--mainBackgroundColor); font-size: 14px; } ::selection { - color: var(--mainBackgroundColor); - background-color: var(--mainHoverColor); + color: pvar(--mainBackgroundColor); + background-color: pvar(--mainHoverColor); } #incompatible-browser { @@ -78,12 +78,12 @@ strong { input.readonly { /* Force blank on readonly inputs */ - background-color: var(--inputBackgroundColor) !important; + background-color: pvar(--inputBackgroundColor) !important; } input, textarea { outline: none; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } label { @@ -128,7 +128,7 @@ label { } .sub-menu { - background-color: var(--submenuColor); + background-color: pvar(--submenuColor); width: 100%; height: 81px; margin-bottom: $sub-menu-margin-bottom; @@ -166,7 +166,7 @@ label { } .title-page { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); font-size: 16px; display: inline-block; margin-right: 55px; @@ -180,7 +180,7 @@ label { &.active { font-weight: $font-bold; - border-bottom: 2px solid var(--mainColor); + border-bottom: 2px solid pvar(--mainColor); } &.title-page-single { @@ -188,7 +188,7 @@ label { } &:hover, &:active, &:focus { - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } @media screen and (max-width: $mobile-view) { @@ -220,7 +220,7 @@ label { @include disable-default-a-behaviour; font-size: 16px; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); padding: 5px 15px; border-radius: 0.25rem; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 7985472ed..0dc58a7c9 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -51,8 +51,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; padding: 3px 15px; &.active { - color: var(--mainBackgroundColor) !important; - background-color: var(--mainHoverColor); + color: pvar(--mainBackgroundColor) !important; + background-color: pvar(--mainHoverColor); opacity: .9; } @@ -94,7 +94,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; text-align: center; .modal-content { - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); } .modal-header { @@ -161,7 +161,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; a { @include disable-default-a-behaviour; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } } @@ -170,7 +170,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .nav-link { @include disable-default-a-behaviour; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; } } @@ -180,9 +180,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } &.active { font-weight: $font-semibold; - background-color: var(--mainBackgroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; border: none; - border-bottom: 2px solid var(--mainColor); + border-bottom: 2px solid pvar(--mainColor); } &:hover { border-top-color: transparent; @@ -192,7 +192,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } .card { - background-color: var(--mainBackgroundColor); + background-color: pvar(--mainBackgroundColor); border-color: #dee2e6; } @@ -240,27 +240,27 @@ ngb-tooltip-window { } .btn-outline-tertiary { - color: var(--secondaryColor); - border-color: var(--secondaryColor); + color: pvar(--secondaryColor); + border-color: pvar(--secondaryColor); &:focus-within, &:focus, &:hover { - color: var(--mainBackgroundColor); - background-color: var(--secondaryColor); + color: pvar(--mainBackgroundColor); + background-color: pvar(--secondaryColor); } } // input box-shadow on focus .form-control { font-size: 15px; - color: var(--mainForegroundColor); - background-color: var(--inputBackgroundColor); + color: pvar(--mainForegroundColor); + background-color: pvar(--inputBackgroundColor); outline: none; &:focus-within, &:focus { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); &.input-error { box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)}; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index d0ee1e2f0..d89d6f9ff 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -6,7 +6,7 @@ transition: color 0.2s; font-weight: $font-semibold; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); margin-top: 10px; margin-bottom: 5px; @@ -80,7 +80,7 @@ $play-overlay-width: 18px; } &.focus-visible { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); outline: none; } @@ -168,7 +168,7 @@ $play-overlay-width: 18px; outline: none; } - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); } } @@ -187,7 +187,7 @@ $play-overlay-width: 18px; } .followers { - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); font-weight: normal; font-size: 14px; margin-left: 10px; @@ -203,7 +203,7 @@ $play-overlay-width: 18px; display: inline-block; font-size: 16px; text-transform: uppercase; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); margin-bottom: 10px; font-weight: $font-semibold; text-decoration: none; @@ -221,32 +221,37 @@ $play-overlay-width: 18px; } } -@mixin adapt-margin-content-width { - width: $video-miniature-width * 6; - margin: auto !important; +@mixin adapt-margin-content-width($fluid: false) { + @if $fluid { + margin-left: 3vw !important; + margin-right: 3vw !important; + } @else { + width: $video-miniature-width * 6; + margin: auto !important; - @media screen and (max-width: 1800px) { - width: $video-miniature-width * 5; - } + @media screen and (max-width: 1800px) { + width: $video-miniature-width * 5; + } - @media screen and (max-width: 1800px - $video-miniature-width) { - width: $video-miniature-width * 4; - } + @media screen and (max-width: 1800px - $video-miniature-width) { + width: $video-miniature-width * 4; + } - @media screen and (max-width: 1800px - (2* $video-miniature-width)) { - width: $video-miniature-width * 3; - } + @media screen and (max-width: 1800px - (2* $video-miniature-width)) { + width: $video-miniature-width * 3; + } - @media screen and (max-width: 1800px - (3* $video-miniature-width)) { - width: $video-miniature-width * 2; - } + @media screen and (max-width: 1800px - (3* $video-miniature-width)) { + width: $video-miniature-width * 2; + } - @media screen and (max-width: $mobile-view) { - width: auto; - margin: 0 !important; + @media screen and (max-width: $mobile-view) { + width: auto; + margin: 0 !important; - .videos { - @include video-miniature-small-screen; + .videos { + @include video-miniature-small-screen; + } } } } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 0b558a3f5..5971bb72a 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -90,8 +90,8 @@ display: inline-block; height: $button-height; width: $width; - color: var(--inputForegroundColor); - background-color: var(--inputBackgroundColor); + color: pvar(--inputForegroundColor); + background-color: pvar(--inputBackgroundColor); border: 1px solid #C6C6C6; border-radius: 3px; padding-left: 15px; @@ -99,7 +99,7 @@ font-size: 15px; &::placeholder { - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } @media screen and (max-width: $width) { @@ -122,24 +122,24 @@ @mixin peertube-textarea ($width, $height) { @include peertube-input-text($width); - color: var(--textareaForegroundColor); - background-color: var(--textareaBackgroundColor); + color: pvar(--textareaForegroundColor); + background-color: pvar(--textareaBackgroundColor); height: $height; padding: 5px 15px; font-size: 15px; } @mixin orange-button { - @include button-focus(var(--mainColorLightest)); + @include button-focus(pvar(--mainColorLightest)); &, &:active, &:focus { color: #fff; - background-color: var(--mainColor); + background-color: pvar(--mainColor); } &:hover { color: #fff; - background-color: var(--mainHoverColor); + background-color: pvar(--mainHoverColor); } &[disabled], &.disabled { @@ -156,7 +156,7 @@ @mixin tertiary-button { @include button-focus($grey-button-outline-color); - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); background-color: transparent; &[disabled], &.disabled { @@ -173,11 +173,11 @@ &, &:active, &:focus { background-color: $grey-background-color; - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); } &:hover, &:active, &:focus, &[disabled], &.disabled { - color: var(--greyForegroundColor); + color: pvar(--greyForegroundColor); background-color: $grey-background-hover-color; } @@ -186,7 +186,7 @@ } my-global-icon { - @include apply-svg-color(var(--greyForegroundColor)) + @include apply-svg-color(pvar(--greyForegroundColor)) } } @@ -283,8 +283,8 @@ margin: 0; width: $width; border-radius: 3px; - color: var(--inputForegroundColor); - background: var(--inputBackgroundColor); + color: pvar(--inputForegroundColor); + background: pvar(--inputBackgroundColor); position: relative; font-size: 15px; @@ -315,7 +315,7 @@ cursor: pointer; height: $button-height; text-overflow: ellipsis; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); &:focus { outline: none; @@ -375,7 +375,7 @@ position: absolute; &:focus + span { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } & + span { @@ -404,7 +404,7 @@ &:checked + span { border-color: transparent; - background: var(--mainColor); + background: pvar(--mainColor); animation: jelly 0.6s ease; &:after { @@ -464,14 +464,14 @@ @mixin in-content-small-title { text-transform: uppercase; - color: var(--mainColor); + color: pvar(--mainColor); font-weight: $font-bold; font-size: 13px; } @mixin settings-big-title { text-transform: uppercase; - color: var(--mainColor); + color: pvar(--mainColor); font-weight: $font-bold; font-size: 110%; margin-bottom: 10px; @@ -482,7 +482,7 @@ font-size: 13px; margin-top: 4px; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); span:hover { opacity: 0.8; @@ -612,8 +612,8 @@ border-radius: 0.25rem; .progress-bar { - color: var(--mainBackgroundColor); - background-color: var(--mainColor); + color: pvar(--mainBackgroundColor); + background-color: pvar(--mainColor); display: flex; flex-direction: column; justify-content: center; @@ -622,7 +622,7 @@ transition: width 0.6s ease; &.secondary { - background-color: var(--secondaryColor); + background-color: pvar(--secondaryColor); } } } @@ -633,14 +633,14 @@ padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; - background-color: var(--submenuColor); + background-color: pvar(--submenuColor); border-radius: 0.25rem; .breadcrumb-item { display: flex; a { - color: var(--mainColor); + color: pvar(--mainColor); } & + .breadcrumb-item { @@ -688,7 +688,7 @@ & > a, & > div { padding: 20px; - background: var(--submenuColor); + background: pvar(--submenuColor); border-radius: 4px; box-sizing: border-box; height: 100%; @@ -699,14 +699,14 @@ text-align: center; font-size: 130%; line-height: 21px; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); line-height: 30px; margin-bottom: 20px; } .dashboard-label { font-size: 90%; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); text-align: center; } } @@ -726,7 +726,7 @@ height: max-content; &:focus-within { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } } @@ -735,8 +735,8 @@ height: 30px !important; font-size: 12px !important; - background-color: var(--mainBackgroundColor) !important; - color: var(--mainForegroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; + color: pvar(--mainForegroundColor) !important; } } @@ -769,7 +769,7 @@ vertical-align: middle !important; path { - fill: var(--greyForegroundColor) !important; + fill: pvar(--greyForegroundColor) !important; } } @@ -780,7 +780,7 @@ } } -@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) { +@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) { width: 95%; border-top: .05rem solid $color; height: .05rem; @@ -810,7 +810,7 @@ border-radius: 5rem; display: inline-flex; font-size: 90%; - color: var(--mainForegroundColor); + color: pvar(--mainForegroundColor); height: $avatar-height; line-height: 1rem; margin: .1rem; @@ -887,3 +887,21 @@ } } } + +// applies 16:9 ratio to a child element (using $selector) only using +// an immediate's parent size. This allows 16:9 ratio without explicit +// dimensions, as width/height cannot be computed from each other. +@mixin large-screen-ratio ($selector: 'div') { + position: relative; + height: 0; + width: 100%; + padding-top: 56%; + + #{$selector} { + position: absolute; + width: 100%; + height: 100%; + top: 0; + @content; + } +} diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 11561e268..14f1ae76c 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -116,7 +116,7 @@ $variables: ( --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) ); -@function var($variable) { +@function pvar($variable) { @return map-get($variables, $variable); } diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss index d584b7c67..d7c308911 100644 --- a/client/src/sass/loading-bar.scss +++ b/client/src/sass/loading-bar.scss @@ -10,7 +10,7 @@ -moz-transition: 350ms linear all; -o-transition: 350ms linear all; transition: 350ms linear all; - color: var(--mainColor); + color: pvar(--mainColor); } #loading-bar .bar { @@ -19,7 +19,7 @@ -o-transition: width 350ms; transition: width 350ms; - background: var(--mainColor); + background: pvar(--mainColor); position: fixed; z-index: z(loadbar); top: 0; diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index eeab0ccdf..f3a28ead0 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -14,7 +14,7 @@ $context-menu-width: 350px; .vjs-menu-content { opacity: $primary-foreground-opacity; - color: var(--embedForegroundCsolor); + color: pvar(--embedForegroundCsolor); font-size: $font-size !important; font-weight: $font-semibold; } diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 836be23cc..92923a129 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -17,7 +17,7 @@ body { .video-js.vjs-peertube-skin { font-size: $font-size; - color: var(--embedForegroundColor); + color: pvar(--embedForegroundColor); .vjs-dock-text { padding-right: 10px; @@ -132,7 +132,7 @@ body { .vjs-control-bar, .vjs-big-play-button, .vjs-settings-dialog { - background-color: var(--embedBigPlayBackgroundColor); + background-color: pvar(--embedBigPlayBackgroundColor); } .vjs-poster { @@ -157,7 +157,7 @@ body { .vjs-theater-control, .vjs-settings { - color: var(--embedForegroundColor) !important; + color: pvar(--embedForegroundColor) !important; opacity: $primary-foreground-opacity; transition: opacity .1s; @@ -170,7 +170,7 @@ body { .vjs-current-time, .vjs-duration, .vjs-peertube { - color: var(--embedForegroundColor); + color: pvar(--embedForegroundColor); opacity: $primary-foreground-opacity; } @@ -190,7 +190,7 @@ body { transition: none; .vjs-play-progress { - background: var(--embedForegroundColor); + background: pvar(--embedForegroundColor); // Not display the circle if the progress is not hovered &::before { diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 83407b445..09c872ef7 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -38,7 +38,7 @@ $setting-transition-easing: ease-out; position: absolute; right: .5em; bottom: 3.5em; - color: var(--embedForegroundColor); + color: pvar(--embedForegroundColor); opacity: $primary-foreground-opacity; margin: 0 auto; font-size: $font-size !important; diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 056b88fc1..a9a950dc0 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -7,7 +7,7 @@ @mixin glyphicon-light { font-family: 'Glyphicons Halflings'; text-decoration: none !important; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; font-display: swap; } @@ -19,14 +19,14 @@ my-button { // focus box-shadow for primeng .ui-inputtext:enabled:focus:not(.ui-state-error) { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important; } // data table customizations p-table { .ui-table-caption { border: none !important; - background-color: var(--mainBackgroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; .caption { height: 40px; @@ -41,14 +41,14 @@ p-table { } th { - background-color: var(--mainBackgroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; outline: 0; } td, th { font-family: $main-fonts; font-size: 15px !important; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; } td { @@ -63,14 +63,14 @@ p-table { tr { outline: 0; - background-color: var(--mainBackgroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; height: 46px; &.ui-state-highlight { - background-color: var(--submenuColor) !important; + background-color: pvar(--submenuColor) !important; td, td > a { - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; } } } @@ -78,7 +78,7 @@ p-table { .ui-table-tbody { tr { &:hover { - background-color: var(--submenuColor) !important; + background-color: pvar(--submenuColor) !important; .action-cell { .dropdown-root, @@ -113,16 +113,16 @@ p-table { th { border: none !important; border-bottom: 1px solid !important; - border-color: var(--submenuColor) !important; + border-color: pvar(--submenuColor) !important; text-align: left !important; padding: 5px 0 5px 15px !important; font-weight: $font-semibold !important; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; &.ui-sortable-column:hover { - background-color: var(--submenuColor) !important; + background-color: pvar(--submenuColor) !important; border: 1px solid !important; - border-color: var(--submenuColor) !important; + border-color: pvar(--submenuColor) !important; border-width: 0 1px !important; &:first-child { @@ -131,7 +131,7 @@ p-table { } &.ui-state-highlight { - background-color: var(--submenuColor) !important; + background-color: pvar(--submenuColor) !important; .pi { @extend .glyphicon; @@ -143,13 +143,13 @@ p-table { &.pi-sort-amount-up-alt { @extend .glyphicon-triangle-top; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; } &.pi-sort-amount-down { @extend .glyphicon-triangle-bottom; - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; } } } @@ -184,11 +184,11 @@ p-table { p-paginator { .ui-paginator-bottom { - background-color: var(--mainBackgroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; position: relative; border: none; border-top: 1px solid !important; - border-color: var(--submenuColor) !important; + border-color: pvar(--submenuColor) !important; height: 40px; display: flex; justify-content: center; @@ -200,18 +200,18 @@ p-table { left: 0; &.ui-state-focus { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } .ui-dropdown-label { - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } } .ui-paginator-current { position: absolute; right: 0; - color: var(--inputPlaceholderColor); + color: pvar(--inputPlaceholderColor); } .ui-paginator-first, @@ -227,7 +227,7 @@ p-table { &.focus-within, &:focus { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } &.ui-state-disabled:hover { @@ -261,12 +261,12 @@ p-table { .ui-paginator-page { &.focus-within, &:focus { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important; } } a { - color: var(--mainForegroundColor) !important; + color: pvar(--mainForegroundColor) !important; font-weight: $font-semibold !important; margin: 0 5px !important; outline: 0 !important; @@ -278,7 +278,7 @@ p-table { &.ui-state-active { &, &:hover, &:active, &:focus { color: #fff !important; - background-color: var(--mainColor) !important; + background-color: pvar(--mainColor) !important; } } } @@ -328,7 +328,7 @@ p-multiselect { &:focus, &.ui-state-focus { - box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } } } @@ -368,11 +368,11 @@ p-multiselect { } .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight { - background-color: var(--mainColorLighter); + background-color: pvar(--mainColorLighter); } .ui-inputtext:enabled:focus:not(.ui-state-error) { - border-color: var(--mainColorLighter) !important; + border-color: pvar(--mainColorLighter) !important; box-shadow: none; } } @@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box { .ui-chkbox-box { &.ui-state-active { - border-color: var(--mainColor) !important; - background-color: var(--mainColor) !important; + border-color: pvar(--mainColor) !important; + background-color: pvar(--mainColor) !important; } .ui-chkbox-icon { @@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box { height: 12px; opacity: 0; transform: rotate(45deg) scale(0); - border-right: 2px solid var(--mainBackgroundColor); - border-bottom: 2px solid var(--mainBackgroundColor); + border-right: 2px solid pvar(--mainBackgroundColor); + border-bottom: 2px solid pvar(--mainBackgroundColor); } &.pi-check:after { @@ -478,7 +478,7 @@ p-inputswitch { height: 26px; .ui-inputswitch-checked .ui-inputswitch-slider { - background-color: var(--mainColor) !important; + background-color: pvar(--mainColor) !important; } &.small { @@ -520,8 +520,8 @@ p-toast { .ui-toast-message { font-family: $main-fonts; - background-color: var(--mainBackgroundColor) !important; - color: var(--mainForegroundColor) !important; + background-color: pvar(--mainBackgroundColor) !important; + color: pvar(--mainForegroundColor) !important; border-radius: 5px; box-sizing: border-box; border: 1px solid #EBEEF5 !important;