From 931d3430184143ebd88e5243def6eb1d7acfdbf4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Apr 2021 16:41:07 +0200 Subject: Move to stylelint --- .../about-follows/about-follows.component.html | 2 +- .../about-follows/about-follows.component.scss | 4 +- .../about-instance/about-instance.component.scss | 6 +- .../about-peertube/about-peertube.component.scss | 3 +- .../account-video-channels.component.scss | 4 +- client/src/app/+accounts/accounts.component.scss | 6 +- .../edit-custom-config.component.scss | 5 +- .../followers-list/followers-list.component.scss | 3 +- .../following-list/following-list.component.scss | 3 +- .../src/app/+admin/follows/follows.component.scss | 2 +- .../video-redundancies-list.component.scss | 3 +- .../instance-account-blocklist.component.scss | 2 +- .../video-comment-list.component.scss | 3 +- .../plugin-list-installed.component.scss | 2 +- .../plugin-show-installed.component.scss | 3 +- .../plugins/shared/plugin-list.component.scss | 4 +- .../src/app/+admin/system/jobs/jobs.component.scss | 2 +- .../src/app/+admin/system/logs/logs.component.scss | 4 +- .../users/user-edit/user-edit.component.scss | 3 +- .../users/user-edit/user-password.component.scss | 2 +- .../users/user-list/user-list.component.scss | 2 +- client/src/app/+login/login.component.scss | 19 ++-- .../my-account-applications.component.scss | 2 +- .../my-account-notifications.component.scss | 3 +- .../my-account-danger-zone.component.scss | 2 +- ...account-notification-preferences.component.scss | 2 +- .../src/app/+my-account/my-account.component.scss | 6 +- .../my-video-channel-edit.component.scss | 3 +- .../my-video-channels.component.scss | 2 +- .../my-history/my-history.component.scss | 4 +- .../src/app/+my-library/my-library.component.scss | 6 +- .../my-ownership/my-ownership.component.scss | 8 +- .../my-video-imports.component.scss | 2 +- .../my-video-playlist-elements.component.scss | 13 +-- .../modals/video-change-ownership.component.scss | 2 +- .../+my-library/my-videos/my-videos.component.scss | 4 +- .../src/app/+search/search-filters.component.scss | 2 +- .../app/+signup/+register/register.component.scss | 2 +- .../+signup/shared/signup-success.component.scss | 22 ---- .../+video-channels/video-channels.component.scss | 14 +-- .../shared/video-caption-add-modal.component.scss | 4 +- .../+video-edit/shared/video-edit.component.scss | 6 +- .../video-add-components/video-send.scss | 6 +- .../+videos/+video-edit/video-add.component.scss | 2 +- .../comment/video-comment-add.component.scss | 6 +- .../comment/video-comment.component.scss | 7 +- .../comment/video-comments.component.scss | 5 +- .../recommended-videos.component.scss | 3 +- .../video-watch-playlist.component.scss | 2 +- .../+video-watch/video-watch.component.html | 2 +- .../+video-watch/video-watch.component.scss | 23 ++-- .../overview/video-overview.component.scss | 10 +- .../trending/video-trending-header.component.scss | 2 +- client/src/app/app.component.scss | 2 +- client/src/app/core/hotkeys/hotkeys.component.scss | 5 +- .../src/app/header/search-typeahead.component.scss | 13 +-- client/src/app/header/suggestion.component.scss | 8 +- .../src/app/menu/language-chooser.component.scss | 4 +- client/src/app/menu/menu.component.scss | 33 +++--- client/src/app/menu/notification.component.scss | 25 +++-- client/src/app/modal/welcome-modal.component.scss | 2 +- .../shared-actor-image/actor-avatar.component.scss | 14 +-- .../shared-forms/input-switch.component.scss | 8 +- .../shared-forms/markdown-textarea.component.scss | 25 ++--- .../shared-forms/peertube-checkbox.component.scss | 6 +- .../shared-forms/preview-upload.component.scss | 2 +- .../select/select-shared.component.scss | 6 +- .../shared-forms/timestamp-input.component.scss | 3 +- .../instance-about-accordion.component.scss | 4 +- .../instance-features-table.component.scss | 2 +- .../buttons/action-dropdown.component.scss | 13 ++- .../shared-main/date/date-toggle.component.scss | 2 +- .../shared/shared-main/feeds/feed.component.scss | 6 +- .../shared-main/loaders/loader.component.scss | 2 +- .../shared/shared-main/misc/help.component.scss | 11 +- .../shared-main/misc/list-overflow.component.html | 8 +- .../shared-main/misc/list-overflow.component.scss | 6 +- .../users/user-notifications.component.scss | 4 +- .../shared-main/users/user-quota.component.scss | 3 +- .../account-blocklist.component.scss | 3 +- .../app/shared/shared-moderation/moderation.scss | 22 ++-- .../server-blocklist.component.scss | 3 +- .../shared-moderation/video-block.component.scss | 2 +- .../video-thumbnail.component.scss | 10 +- .../remote-subscribe.component.scss | 2 +- .../subscribe-button.component.scss | 14 +-- .../abstract-video-list.scss | 17 ++- .../video-download.component.scss | 4 +- .../video-miniature.component.scss | 4 +- .../video-add-to-playlist.component.scss | 2 +- ...video-playlist-element-miniature.component.scss | 12 ++- .../video-playlist-miniature.component.scss | 2 +- client/src/sass/application.scss | 57 ++++++---- client/src/sass/bootstrap.scss | 40 ++++--- client/src/sass/include/_actor.scss | 2 +- client/src/sass/include/_bootstrap.scss | 2 +- client/src/sass/include/_fonts.scss | 4 +- client/src/sass/include/_miniature.scss | 14 ++- client/src/sass/include/_mixins.scss | 116 ++++++++++++--------- client/src/sass/include/_variables.scss | 6 +- client/src/sass/ng-select.scss | 9 +- client/src/sass/player/context-menu.scss | 10 +- client/src/sass/player/index.scss | 6 +- client/src/sass/player/mobile.scss | 2 +- client/src/sass/player/peertube-skin.scss | 48 +++++---- client/src/sass/player/playlist.scss | 12 +-- client/src/sass/player/settings-menu.scss | 2 +- client/src/sass/player/spinner.scss | 2 +- client/src/sass/player/stats.scss | 5 +- client/src/sass/player/upnext.scss | 14 +-- client/src/sass/primeng-custom.scss | 3 +- client/src/standalone/videos/embed.scss | 25 ++--- client/src/standalone/videos/test-embed.scss | 22 ++-- 113 files changed, 523 insertions(+), 456 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html index e9139b503..f81465f88 100644 --- a/client/src/app/+about/about-follows/about-follows.component.html +++ b/client/src/app/+about/about-follows/about-follows.component.html @@ -21,7 +21,7 @@ {{ following }} - + diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss index a393c9d92..83241e727 100644 --- a/client/src/app/+about/about-follows/about-follows.component.scss +++ b/client/src/app/+about/about-follows/about-follows.component.scss @@ -17,9 +17,9 @@ a { justify-content: flex-start; } -.showMore { +.show-more { @include peertube-button-link; @include grey-button; - + margin-top: 1%; } 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 7158a3a79..9886bdfef 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -63,7 +63,8 @@ position: relative; - &:hover, &:active { + &:hover, + &:active { &::after { content: '#'; display: inline-block; @@ -71,7 +72,8 @@ } } - .middle-title, .section-title { + .middle-title, + .section-title { display: inline-block; } diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss index e67252410..e5d2bc5b8 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube.component.scss @@ -45,7 +45,8 @@ .p2p-privacy, my-about-peertube-contributors { ::ng-deep { - p, li { + p, + li { font-size: 15px; } } diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 0c490ad53..f9d097644 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -65,13 +65,13 @@ } .description-html { + @include fade-text(30px, pvar(--channelBackgroundColor)); + grid-column: 2 / 4; grid-row: 2; max-height: 80px; font-size: 16px; - - @include fade-text(30px, pvar(--channelBackgroundColor)); } } diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 56927dea6..2e99fe8a5 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -40,7 +40,7 @@ my-user-moderation-dropdown, } .copy-button { - border: none; + border: 0; } .account-info { @@ -104,9 +104,9 @@ my-user-moderation-dropdown, } .description:not(.expanded) { - max-height: 70px; - @include fade-text(30px, pvar(--submenuBackgroundColor)); + + max-height: 70px; } .show-more { diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index c12465d45..cc2a98a17 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -57,7 +57,7 @@ input[type=submit] { display: flex; margin-left: auto; - & + .form-error { + + .form-error { display: inline; margin-left: 5px; } @@ -84,7 +84,8 @@ textarea { } .disabled-checkbox-extra { - &, ::ng-deep label { + &, + ::ng-deep label { opacity: .5; pointer-events: none; } 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 f2d752eb5..12c0cd033 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 @@ -13,7 +13,8 @@ a { @include disable-default-a-behaviour; display: inline-block; - &, &:hover { + &, + &:hover { color: pvar(--mainForegroundColor); } 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 b108218b8..797882d9a 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 @@ -5,7 +5,8 @@ a { @include disable-default-a-behaviour; display: inline-block; - &, &:hover { + &, + &:hover { color: pvar(--mainForegroundColor); } diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index 33ff17539..1ed0d925f 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -1,4 +1,4 @@ -@import "mixins"; +@import 'mixins'; .form-sub-title { flex-grow: 0; 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 adcf2037e..30b9f2147 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 @@ -5,7 +5,8 @@ a { @include disable-default-a-behaviour; display: inline-block; - &, &:hover { + &, + &:hover { color: pvar(--mainForegroundColor); } diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss index 6028b75ea..1d98e44d9 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss @@ -4,4 +4,4 @@ .unblock-button { @include peertube-button; @include grey-button; -} \ No newline at end of file +} diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss index c9262da09..5d97d9bdb 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss @@ -49,7 +49,8 @@ my-global-icon { max-height: 22px; } - div, p { + div, + p { @include ellipsis; } diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss index 9376e38b0..22d4a59ab 100644 --- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss +++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss @@ -1,6 +1,6 @@ @import '_variables'; @import '_mixins'; -.update-button[disabled="true"] ::ng-deep .action-button { +.update-button[disabled=true] ::ng-deep .action-button { cursor: default !important; } diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss index 5ab6e5f1b..6b7b84e29 100644 --- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss +++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss @@ -5,7 +5,8 @@ h2 { margin-bottom: 20px; } -input[type=submit], button { +input[type=submit], +button { @include peertube-button; @include orange-button; 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 f59a01b74..e4ddc9060 100644 --- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss @@ -27,7 +27,7 @@ my-global-icon { @include apply-svg-color(pvar(--greyForegroundColor)); - &[iconName="npm"] { + &[iconName=npm] { @include fill-svg-color(pvar(--greyForegroundColor)); } } @@ -49,7 +49,7 @@ justify-content: space-between; .description { - opacity: 0.8 + opacity: 0.8; } } diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss index 7c6159420..65ee6ec5f 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.scss +++ b/client/src/app/+admin/system/jobs/jobs.component.scss @@ -51,7 +51,7 @@ pre { } .job-error { - color: red; + color: #ff0000; } .badge { diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index 587a9795c..1a7c3be75 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -66,7 +66,7 @@ ng-select, my-button { width: 100% !important; - margin-left: 0px !important; + margin-left: 0 !important; margin-bottom: 10px !important; } @@ -85,7 +85,7 @@ ng-select, my-button { width: 100% !important; - margin-left: 0px !important; + margin-left: 0 !important; margin-bottom: 10px !important; } diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss index 8b0ac8783..145177fb9 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss @@ -37,7 +37,8 @@ my-select-custom-value { display: block; } -input[type=submit], button { +input[type=submit], +button { @include peertube-button; @include orange-button; diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss index 1f0d49227..66d15ee9c 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.scss +++ b/client/src/app/+admin/users/user-edit/user-password.component.scss @@ -7,7 +7,7 @@ input:not([type=submit]):not([type=checkbox]) { display: block; border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right: none; + border-right: 0; } input[type=submit] { diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index 50080bad6..f18747ec3 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -24,7 +24,7 @@ tr.banned > td { .user-table-primary-text .glyphicon { font-size: 80%; - color: gray; + color: #808080; margin-left: 0.1rem; } diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index eddaff542..62ae722c3 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss @@ -33,7 +33,8 @@ input[type=email] { } } -.create-an-account, .forgot-password-button { +.create-an-account, +.forgot-password-button { color: pvar(--mainForegroundColor); cursor: pointer; transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1); @@ -49,7 +50,7 @@ input[type=email] { justify-content: space-around; flex-wrap: wrap; - & > div { + > div { flex: 1 1; } @@ -65,7 +66,8 @@ input[type=email] { form { margin: 0; - &, input { + &, + input { width: 100%; } @@ -82,7 +84,8 @@ input[type=email] { color: var(--mainColor); - &:hover, &:active { + &:hover, + &:active { color: var(--mainHoverColor); } } @@ -111,7 +114,7 @@ input[type=email] { min-width: 100px; &:hover { - background-color: rgba(209, 215, 224, 0.5) + background-color: rgba(209, 215, 224, 0.5); } } } @@ -138,7 +141,7 @@ input[type=email] { } } -@mixin columnReverseDisplay { +@mixin column-reverse-display { flex-direction: column-reverse; .login-form-and-externals, @@ -168,14 +171,14 @@ input[type=email] { @media screen and (max-width: breakpoint(md)) { .wrapper { - @include columnReverseDisplay(); + @include column-reverse-display(); } } @media screen and (max-width: breakpoint(md) + $menu-width) { :host-context(.main-col:not(.expanded)) { .wrapper { - @include columnReverseDisplay(); + @include column-reverse-display(); } } } diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss index 704132c03..c1e1f2432 100644 --- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss +++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss @@ -21,7 +21,7 @@ input[type=submit] { display: flex; margin-left: auto; - & + .form-error { + + .form-error { display: inline; margin-left: 5px; } diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss index 035fa2b27..abf52504a 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss @@ -32,7 +32,8 @@ my-user-notifications { .header { flex-direction: column; - & >:first-child, .peertube-select-container { + > :first-child, + .peertube-select-container { margin-bottom: 15px; } diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss index d79ff690b..64f960964 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss @@ -7,4 +7,4 @@ @include danger-button; @include disable-outline; } -} \ No newline at end of file +} diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss index b06d8b16d..42319400d 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss @@ -10,7 +10,7 @@ font-size: 16px; } - & > div { + > div { padding: 10px; &:first-child { diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss index a5bb499b4..b32bc84e7 100644 --- a/client/src/app/+my-account/my-account.component.scss +++ b/client/src/app/+my-account/my-account.component.scss @@ -2,12 +2,12 @@ @import '_mixins'; .row { + @include sub-menu-h1; + flex-direction: column; width: 100%; - & > my-top-menu-dropdown:nth-child(1) { + > my-top-menu-dropdown:nth-child(1) { flex-grow: 1; } - - @include sub-menu-h1; } diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss index 22de103d1..667726c22 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss @@ -66,7 +66,8 @@ textarea { width: auto !important; } - label[for=name] + div, textarea { + label[for=name] + div, + textarea { width: 100%; } } diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss index dafba925e..bb5394094 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss @@ -83,7 +83,7 @@ input[type=text] { margin: auto; .video-channel-name { - margin-left: 0px !important; + margin-left: 0 !important; } } } diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss index af4a34b4b..28b809f71 100644 --- a/client/src/app/+my-library/my-history/my-history.component.scss +++ b/client/src/app/+my-library/my-history/my-history.component.scss @@ -39,12 +39,12 @@ } .delete-history { - grid-column: 4; - @include peertube-button; @include grey-button; @include button-with-icon; + grid-column: 4; + font-size: 15px; } } diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss index a5bb499b4..b32bc84e7 100644 --- a/client/src/app/+my-library/my-library.component.scss +++ b/client/src/app/+my-library/my-library.component.scss @@ -2,12 +2,12 @@ @import '_mixins'; .row { + @include sub-menu-h1; + flex-direction: column; width: 100%; - & > my-top-menu-dropdown:nth-child(1) { + > my-top-menu-dropdown:nth-child(1) { flex-grow: 1; } - - @include sub-menu-h1; } diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss index 7cac9c9f3..dfc8fc99e 100644 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss @@ -13,15 +13,15 @@ display: inline-flex; .video-table-video-image { - @include miniature-thumbnail; - $image-height: 45px; + @include miniature-thumbnail; + height: $image-height; width: #{(16/9) * $image-height}; margin-right: 0.5rem; border-radius: 2px; - border: none; + border: 0; background: transparent; display: inline-flex; justify-content: center; @@ -60,7 +60,7 @@ div .glyphicon { font-size: 80%; - color: gray; + color: #808080; margin-left: 0.1rem; } diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss index a93c28028..c4b847c3d 100644 --- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss +++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss @@ -6,7 +6,7 @@ pre { } .video-import-error { - color: red; + color: #ff0000; } .badge { diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss index 0c68dedf6..67587a58a 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss @@ -25,8 +25,8 @@ } .playlist-buttons { - display:flex; - margin: 30px 0 10px 0; + display: flex; + margin: 30px 0 10px; .share-button { @include peertube-button; @@ -42,9 +42,10 @@ .cdk-drag-preview { box-sizing: border-box; border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); + box-shadow: + 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder { @@ -56,7 +57,7 @@ } .video:last-child { - border: none; + border: 0; } .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss index a79fec179..16187bc4a 100644 --- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss +++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss @@ -7,4 +7,4 @@ p-autocomplete { .form-group { margin: 20px 0; -} \ No newline at end of file +} diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss index aaf21126b..57623c36f 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.scss +++ b/client/src/app/+my-library/my-videos/my-videos.component.scss @@ -26,12 +26,12 @@ h1 { } .action-button-delete-selection { - display: inline-block; - @include peertube-button; @include orange-button; @include button-with-icon(21px); + display: inline-block; + my-global-icon { @include apply-svg-color(#fff); } diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss index 68ac6d021..cfb7a1d98 100644 --- a/client/src/app/+search/search-filters.component.scss +++ b/client/src/app/+search/search-filters.component.scss @@ -46,7 +46,7 @@ input[type=submit] { font-weight: $font-semibold; display: inline-block; - padding: 0 10px 0 10px; + padding: 0 10px; white-space: nowrap; background: transparent; diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index 16ba9e2c0..f6a846ffa 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss @@ -84,7 +84,7 @@ button { border-color: pvar(--mainColor) transparent transparent transparent; } - & + div { + + div { font-size: 15px; } } diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss index fbc27c8bc..b302366e2 100644 --- a/client/src/app/+signup/shared/signup-success.component.scss +++ b/client/src/app/+signup/shared/signup-success.component.scss @@ -9,19 +9,16 @@ svg { stroke-dashoffset: 0; &.circle { - -webkit-animation: dash .9s ease-in-out; animation: dash .9s ease-in-out; } &.line { stroke-dashoffset: 1000; - -webkit-animation: dash .9s .35s ease-in-out forwards; animation: dash .9s .35s ease-in-out forwards; } &.check { stroke-dashoffset: -100; - -webkit-animation: dash-check .9s .35s ease-in-out forwards; animation: dash-check .9s .35s ease-in-out forwards; } } @@ -38,16 +35,6 @@ svg { text-align: center; } - -@-webkit-keyframes dash { - 0% { - stroke-dashoffset: 1000; - } - 100% { - stroke-dashoffset: 0; - } -} - @keyframes dash { 0% { stroke-dashoffset: 1000; @@ -57,15 +44,6 @@ svg { } } -@-webkit-keyframes dash-check { - 0% { - stroke-dashoffset: -100; - } - 100% { - stroke-dashoffset: 900; - } -} - @keyframes dash-check { 0% { stroke-dashoffset: -100; diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 360a99342..470f64878 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -131,10 +131,10 @@ } .owner-description { + @include fade-text(120px, pvar(--mainBackgroundColor)); + max-height: 140px; word-break: break-word; - - @include fade-text(120px, pvar(--mainBackgroundColor)); } } @@ -150,7 +150,7 @@ } .copy-button { - border: none; + border: 0; } @media screen and (max-width: 1400px) { @@ -178,9 +178,9 @@ } .channel-description:not(.expanded) { - max-height: 70px; - @include fade-text(30px, pvar(--channelBackgroundColor)); + + max-height: 70px; } .show-more { @@ -220,10 +220,10 @@ } .owner-description { + @include fade-text(30px, pvar(--mainBackgroundColor)); + grid-column: 2; max-height: 70px; - - @include fade-text(30px, pvar(--mainBackgroundColor)); } .view-account { diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss index 0958b5f80..a85cf444c 100644 --- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss @@ -16,6 +16,6 @@ label { } .warning-replace-caption { - color: red; + color: #ff0000; margin-top: 10px; -} \ No newline at end of file +} diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss index 0b70b0270..bc32d7964 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss @@ -150,7 +150,7 @@ p-calendar { @include media-breakpoint-up(md) { @include make-col(7); - & + .col-video-edit { + + .col-video-edit { @include make-col(5); } } @@ -158,7 +158,7 @@ p-calendar { @include media-breakpoint-up(xl) { @include make-col(8); - & + .col-video-edit { + + .col-video-edit { @include make-col(4); } } @@ -169,7 +169,7 @@ p-calendar { @include media-breakpoint-up(md) { @include make-col(8); - & + .col-video-edit { + + .col-video-edit { @include make-col(4); } } diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss index 17c5f63e9..dc9153b2b 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss @@ -6,7 +6,7 @@ $width-size: 190px; .alert.alert-danger { text-align: center; - & > div { + > div { font-weight: $font-semibold; } } @@ -17,10 +17,10 @@ $width-size: 190px; align-items: center; .upload-icon { + @include apply-svg-color(#C6C6C6); + width: 90px; margin-bottom: 25px; - - @include apply-svg-color(#C6C6C6); } .peertube-select-container { diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss index 1ebee946b..35bca24d0 100644 --- a/client/src/app/+videos/+video-edit/video-add.component.scss +++ b/client/src/app/+videos/+video-edit/video-add.component.scss @@ -44,7 +44,7 @@ $nav-link-height: 40px; ::ng-deep .video-add-nav { border-bottom: $border-width $border-type $border-color; - margin: 20px 0 0 0 !important; + margin: 20px 0 0 !important; &.hide-nav { display: none !important; diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss index 54e61eac4..7743bd41d 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss @@ -31,7 +31,7 @@ form { padding-right: $markdown-icon-width + 15px !important; @media screen and (max-width: 600px) { - padding-right: $markdown-icon-width + 19px !important; + padding-right: $markdown-icon-width + 19px !important; } &:focus::placeholder { @@ -57,7 +57,9 @@ form { } } - &:focus, &:active, &:hover { + &:focus, + &:active, + &:hover { my-global-icon svg { background-color: #C6C6C6; color: pvar(--mainBackgroundColor); diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss index f0dcc08b8..a4d2e237c 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss @@ -62,7 +62,7 @@ my-actor-avatar { display: inline-flex; padding-right: 6px; padding-left: 6px; - color: white !important; + color: #fff !important; } .comment-account { @@ -133,7 +133,10 @@ my-actor-avatar { cursor: pointer; margin-right: 10px; - &:hover, &:active, &:focus, &:focus-visible { + &:hover, + &:active, + &:focus, + &:focus-visible { color: pvar(--mainForegroundColor); } } diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss index e6778e1a9..a7e858069 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss @@ -11,7 +11,8 @@ cursor: pointer; } -.glyphicon, .comment-thread-loading { +.glyphicon, +.comment-thread-loading { margin-right: 5px; display: inline-block; font-size: 13px; @@ -40,7 +41,7 @@ #dropdown-sort-comments { font-weight: 600; text-transform: uppercase; - border: none; + border: 0; transform: translateY(-7%); } diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss index c9fae6f27..5e0373afc 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss @@ -8,7 +8,8 @@ margin-bottom: 25px; flex-wrap: wrap-reverse; - .title-page.active, .title-page.title-page-single { + .title-page.active, + .title-page.title-page-single { margin-bottom: unset; margin-right: .5rem !important; } diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss index 0b0a2a899..b3f93b83c 100644 --- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss @@ -45,7 +45,7 @@ my-global-icon { &:not(.active) { - opacity: .5 + opacity: .5; } ::ng-deep { diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html index eadb2148a..4779602d2 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html @@ -79,7 +79,7 @@ -
+
- +
- - +
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss index 1ec044489..7e31d3850 100644 --- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss +++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss @@ -15,13 +15,13 @@ button { width: 30px; - border: none; + border: 0; &::after { display: none; } - &.routeActive { + &.route-active { &::after { display: inherit; border: 2px solid pvar(--mainColor); @@ -36,7 +36,7 @@ button { margin-top: 0 !important; position: static; right: auto; - bottom: auto + bottom: auto; } .modal-body { diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss index fa9c55ec9..b69d4b5d6 100644 --- a/client/src/app/shared/shared-main/users/user-notifications.component.scss +++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss @@ -21,11 +21,11 @@ } my-global-icon { + @include apply-svg-color(#333); + width: 24px; margin-right: 11px; margin-left: 3px; - - @include apply-svg-color(#333); } .avatar { diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss index c670559d3..c06cafe29 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.scss +++ b/client/src/app/shared/shared-main/users/user-quota.component.scss @@ -11,7 +11,8 @@ label { margin-right: 5px; } - &, .progress { + &, + .progress { width: 100% !important; } diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss index 3eede44eb..63a9df823 100644 --- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss @@ -6,6 +6,7 @@ input { @include peertube-input-text(250px); + flex-grow: 1; } } @@ -17,4 +18,4 @@ .unblock-button { @include peertube-button; @include grey-button; -} \ No newline at end of file +} diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss index cdcc12fe0..ab43d8457 100644 --- a/client/src/app/shared/shared-moderation/moderation.scss +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -17,12 +17,18 @@ word-wrap: break-word; ::ng-deep p:last-child { - margin-bottom: 0px !important; + margin-bottom: 0 !important; } } } .screenratio { + @include block-ratio($selector: 'div, ::ng-deep iframe') { + width: 100% !important; + height: 100% !important; + left: 0; + }; + div { @include miniature-thumbnail; @@ -31,12 +37,6 @@ align-items: center; color: pvar(--inputPlaceholderColor); } - - @include block-ratio($selector: 'div, ::ng-deep iframe') { - width: 100% !important; - height: 100% !important; - left: 0; - }; } .input-group { @@ -93,15 +93,15 @@ my-action-dropdown.show { display: inline-flex; .table-video-image { - @include miniature-thumbnail; - $image-height: 45px; + @include miniature-thumbnail; + height: $image-height; width: #{(16/9) * $image-height}; margin-right: 0.5rem; border-radius: 2px; - border: none; + border: 0; background: transparent; display: inline-flex; justify-content: center; @@ -139,7 +139,7 @@ my-action-dropdown.show { div .glyphicon { font-size: 80%; - color: gray; + color: #808080; margin-left: 0.1rem; } diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss index 31db4d92b..af21c0c20 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss @@ -5,7 +5,8 @@ a { @include disable-default-a-behaviour; display: inline-block; - &, &:hover { + &, + &:hover { color: pvar(--mainForegroundColor); } diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss index afa0d96f7..a6e33070b 100644 --- a/client/src/app/shared/shared-moderation/video-block.component.scss +++ b/client/src/app/shared/shared-moderation/video-block.component.scss @@ -7,5 +7,5 @@ textarea { .live-info { font-size: 15px; - margin: 40px 0 20px 0; + margin: 40px 0 20px; } diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index ea59ab346..e678d6edf 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -11,7 +11,7 @@ width: 100%; position: absolute; bottom: 0; - background-color: rgba(0, 0, 0, 0.20); + background-color: rgba(0, 0, 0, 0.2); div { height: 100%; @@ -39,8 +39,8 @@ top: 5px; font-weight: $font-bold; - &.warning { background-color: orange; } - &.danger { background-color: red; } + &.warning { background-color: #ffa500; } + &.danger { background-color: #ff0000; } } .video-thumbnail-duration-overlay, @@ -77,9 +77,9 @@ padding: 3px; my-global-icon { + @include apply-svg-color(#fff); + width: 22px; height: 22px; - - @include apply-svg-color(#fff); } } diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss index 698c5866a..73db0d090 100644 --- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss +++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss @@ -3,4 +3,4 @@ .btn-remote-follow { @include peertube-button; @include orange-button; -} \ No newline at end of file +} diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss index f6cdc11c0..897ee7799 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss @@ -8,8 +8,8 @@ float: right; padding: 0; - & > .btn, - & > .dropdown > .dropdown-toggle { + > .btn, + > .dropdown > .dropdown-toggle { font-size: 15px; } @@ -20,7 +20,7 @@ &.big { height: 35px; - & > button:first-child { + > button:first-child { width: max-content; min-width: 175px; } @@ -29,7 +29,7 @@ span:first-child { line-height: 80%; } - + span:not(:first-child) { font-size: 75%; } @@ -37,15 +37,15 @@ } // Unlogged - & > .dropdown > .dropdown-toggle span { + > .dropdown > .dropdown-toggle span { padding-right: 3px; } // Logged - & > .btn { + > .btn { padding-right: 4px; - & + .dropdown > button { + + .dropdown > button { padding-left: 2px; &::after { diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss index 467ca1d2c..d9cf7a14f 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss @@ -3,7 +3,7 @@ @import '_mixins'; @import '_miniature'; -$iconSize: 16px; +$icon-size: 16px; ::ng-deep my-video-list-header { display: flex; @@ -17,20 +17,19 @@ $iconSize: 16px; my-feed { display: inline-block; - width: calc(#{$iconSize} - 2px); + width: calc(#{$icon-size} - 2px); } .moderation-block { - - my-global-icon { - position: relative; - width: $iconSize; - } - margin-left: .4rem; display: flex; justify-content: flex-end; align-items: center; + + my-global-icon { + position: relative; + width: $icon-size; + } } } @@ -72,7 +71,7 @@ $iconSize: 16px; .title-page { margin-bottom: 10px; - margin-right: 0px; + margin-right: 0; } } } diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss index 7f6e03c87..b689b1046 100644 --- a/client/src/app/shared/shared-video-miniature/video-download.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss @@ -28,7 +28,7 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right: none; + border-right: 0; select { height: inherit; @@ -85,7 +85,7 @@ &.metadata-attribute-tags { .metadata-attribute-value:not(:nth-child(2)) { &::before { - content: ', ' + content: ', '; } } } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index c142e2e93..5df89d019 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -41,7 +41,7 @@ my-actor-avatar { } .video-info-blocked { - color: red; + color: #ff0000; .blocked-reason::before { content: ' - '; @@ -49,7 +49,7 @@ my-actor-avatar { } .video-info-nsfw { - color: red; + color: #ff0000; } .video-actions { diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss index b84cacece..cb1168196 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss @@ -126,7 +126,7 @@ $timestamp-margin-right: 10px; border-top: 1px solid $separator-border-color; } -.new-playlist-button { +.new-playlist-button { cursor: pointer; my-global-icon { diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index 572f7d7a8..9ccd03912 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss @@ -84,21 +84,23 @@ my-video-thumbnail, width: auto; } - .video-info-account, .video-info-timestamp { + .video-info-account, + .video-info-timestamp { color: pvar(--greyForegroundColor); } } } .video-info-name { + @include ellipsis; + font-size: 18px; font-weight: $font-semibold; display: inline-block; - - @include ellipsis; } - .more, my-edit-button { + .more, + my-edit-button { justify-self: flex-end; margin-left: auto; cursor: pointer; @@ -118,7 +120,7 @@ my-video-thumbnail, display: flex; &::after { - border: none; + border: 0; } } } diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index 99089166c..a46a6e475 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss @@ -6,7 +6,7 @@ display: inline-block; width: 100%; - &.no-videos:not(.to-manage){ + &.no-videos:not(.to-manage) { a { cursor: default !important; } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index fa9c0d992..89b6f0c4c 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -8,9 +8,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; @import './bootstrap'; @import './primeng-custom'; -@import './ng-select.scss'; +@import './ng-select'; -@import './classes.scss'; +@import './classes'; [hidden] { display: none !important; @@ -89,14 +89,16 @@ input.readonly { background-color: pvar(--inputBackgroundColor) !important; } -input, textarea { +input, +textarea { outline: none; color: pvar(--inputForegroundColor); } button { - background: unset; @include disable-outline; + + background: unset; } label { @@ -121,12 +123,12 @@ code { margin-top: 5px; } -.input-error +.input-error, my-input-toggle-hidden ::ng-deep input { border-color: $red !important; } -.fullWidth { +.full-width { width: 100%; margin-left: auto; margin-right: auto; @@ -134,7 +136,7 @@ my-input-toggle-hidden ::ng-deep input { } .glyphicon-black { - color: black; + color: #000; } .row { @@ -184,26 +186,26 @@ my-input-toggle-hidden ::ng-deep input { width: 100%; } - &.lock-scroll .main-row > router-outlet + * { + &.lock-scroll .main-row > router-outlet + * { /* stylelint-disable-line selector-max-compound-selectors */ // Lock and hide body scrollbars position: fixed; // Lock and hide sub-menu scrollbars - .sub-menu { + .sub-menu { /* stylelint-disable-line */ overflow-x: hidden; } } } .title-page { + @include disable-default-a-behaviour; + opacity: 0.6; color: pvar(--mainForegroundColor); font-size: 16px; display: inline-block; margin-right: 55px; font-weight: $font-semibold; - @include disable-default-a-behaviour; - border-bottom: 2px solid transparent; &.title-page-single { @@ -219,13 +221,19 @@ my-input-toggle-hidden ::ng-deep input { font-size: 125%; } - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: pvar(--mainForegroundColor); } - &.active, &:hover, &:active, &:focus, &.title-page-single { + &.active, + &:hover, + &:active, + &:focus, + &.title-page-single { opacity: 1; - outline: 0px hidden !important; + outline: 0 hidden !important; } @media screen and (max-width: $mobile-view) { @@ -262,7 +270,10 @@ my-input-toggle-hidden ::ng-deep input { background-color: pvar(--submenuBackgroundColor); } - &.active, &:hover, &:active, &:focus { + &.active, + &:hover, + &:active, + &:focus { opacity: 1; } } @@ -275,8 +286,13 @@ my-input-toggle-hidden ::ng-deep input { // In tables, don't have a hover different background table { - .action-button-edit, .action-button-delete { - &:hover, &:active, &:focus, &[disabled], &.disabled { + .action-button-edit, + .action-button-delete { + &:hover, + &:active, + &:focus, + &[disabled], + &.disabled { background-color: $grey-background-color !important; } } @@ -329,15 +345,12 @@ ngx-loading-bar { @media screen and (max-width: #{breakpoint(xxl)}) { .main-col { - & { - --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2}; - } + --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2}; + --videosHorizontalMarginContent: 30px; &.expanded { --horizontalMarginContent: #{$expanded-horizontal-margins / 2}; } - - --videosHorizontalMarginContent: 30px; } } diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 0ab6230c8..548e55e1e 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -6,7 +6,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d .glyphicon-refresh-animate { - animation: spin .7s infinite linear; + animation: spin 0.7s infinite linear; } .glyphicon-duplicate { @@ -25,6 +25,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; from { transform: scale(1) rotate(0deg); } + to { transform: scale(1) rotate(360deg); } @@ -70,7 +71,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); - opacity: .9; + opacity: 0.9; } &:active { @@ -97,9 +98,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } @media screen and (min-width: #{breakpoint(md)}) { - .modal:before { + .modal::before { vertical-align: middle; - content: " "; + content: ' '; height: 100%; } @@ -123,7 +124,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } .modal-header { - border-bottom: none; + border-bottom: 0; margin-bottom: 5px; .modal-title { @@ -140,10 +141,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; margin: 0; padding: 0; - opacity: .5; + opacity: 0.5; - &[iconName="cross"] { + &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */ @include icon(16px); + top: -3px; } } @@ -154,7 +156,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; text-align: right; > .peertube-button:not(:first-child) { - margin-left: 10px + margin-left: 10px; } } } @@ -168,7 +170,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll @media (hover: none) and (pointer: coarse) { - .modal-open, .menu-open { + .modal-open, + .menu-open { overflow: hidden !important; } @@ -176,7 +179,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .menu-open { .main-col { &::before { - background-color: black; + background-color: #000; width: 100vw; height: 100vh; opacity: 0.75; @@ -204,7 +207,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; .nav-link { opacity: 0.6 !important; - &.active, &:hover, &:active, &:focus { + &.active, + &:hover, + &:active, + &:focus { opacity: 1 !important; } } @@ -221,7 +227,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; color: pvar(--mainForegroundColor); font-weight: $font-semibold; - border: none; + border: 0; border-bottom: 2px solid transparent; opacity: 0.6; @@ -231,7 +237,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; border-bottom-color: pvar(--mainColor); } - &.active, &:hover, &:active, &:focus { + &.active, + &:hover, + &:active, + &:focus { opacity: 1; } } @@ -314,9 +323,10 @@ ngb-tooltip-window { } .input-group { - & > .form-control { + > .form-control { flex: initial; } + input.form-control { width: unset !important; flex-grow: 1; @@ -366,7 +376,7 @@ ngb-tooltip-window { border: 1px solid #eee; border-radius: .25rem; - & > label { + > label { position: relative; top: -5px; left: -10px; diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index ccfd73ecd..38bd90ae6 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss @@ -17,7 +17,7 @@ @mixin show-more-description { color: pvar(--mainColor); cursor: pointer; - margin: 10px auto 45px auto; + margin: 10px auto 45px; } @mixin avatar-row-responsive ($img-margin, $grey-font-size) { diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index b1a23be6b..d9e5efc02 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -1,4 +1,4 @@ -@import "./_bootstrap-variables"; +@import './_bootstrap-variables'; @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss index 6313736e0..514261d01 100644 --- a/client/src/sass/include/_fonts.scss +++ b/client/src/sass/include/_fonts.scss @@ -1,4 +1,4 @@ -@font-face{ +@font-face { font-family: 'Source Sans Pro'; font-weight: 200 900; font-style: normal; @@ -7,7 +7,7 @@ src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2'); } -@font-face{ +@font-face { font-family: 'Source Sans Pro'; font-weight: 200 900; font-style: italic; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 3b86f29b4..fb504906c 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -21,12 +21,12 @@ } @mixin miniature-thumbnail { - @include disable-outline; - $play-overlay-transition: 0.2s ease; $play-overlay-height: 26px; $play-overlay-width: 18px; + @include disable-outline; + display: flex; flex-direction: column; position: relative; @@ -47,7 +47,8 @@ opacity: 0; background-color: rgba(0, 0, 0, 0.3); - &, .icon { + &, + .icon { transition: all $play-overlay-transition; } @@ -79,7 +80,7 @@ &.blur-filter { filter: blur(20px); - transform : scale(1.03); + transform: scale(1.03); } } } @@ -129,10 +130,7 @@ column-gap: 30px; grid-template-columns: repeat( auto-fill, - minmax( - var(--miniatureMinWidth), - 1fr - ) + minmax(var(--miniatureMinWidth), 1fr) ); .video-wrapper, diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index dc6ab8076..718e36f2c 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -1,7 +1,9 @@ @import '_variables'; @mixin disable-default-a-behaviour { - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { text-decoration: none !important; outline: none !important; } @@ -22,7 +24,7 @@ @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { display: block; /* Fallback for non-webkit */ - display: -webkit-box; + display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */ -webkit-line-clamp: $number-of-lines; /* Fallback for non-webkit */ font-size: $font-size; @@ -36,7 +38,7 @@ position: relative; overflow: hidden; - &:after { + &::after { content: ''; pointer-events: none; width: 100%; @@ -109,9 +111,9 @@ padding-bottom: 0; flex-wrap: nowrap; - .input-group-text{ + .input-group-text { font-size: 14px; - color: gray; + color: #808080; } } @@ -128,7 +130,9 @@ @mixin orange-button { @include button-focus(pvar(--mainColorLightest)); - &, &:active, &:focus { + &, + &:active, + &:focus { color: #fff; background-color: pvar(--mainColor); } @@ -138,14 +142,15 @@ background-color: pvar(--mainHoverColor); } - &[disabled], &.disabled { + &[disabled], + &.disabled { cursor: default; color: #fff; background-color: #C6C6C6; } my-global-icon { - @include apply-svg-color(#fff) + @include apply-svg-color(#fff); } } @@ -155,7 +160,9 @@ border: 2px solid pvar(--mainColor); font-weight: $font-semibold; - &, &:active, &:focus { + &, + &:active, + &:focus { color: pvar(--mainColor); background-color: pvar(--mainBackgroundColor); } @@ -165,14 +172,15 @@ background-color: pvar(--mainColorLightest); } - &[disabled], &.disabled { + &[disabled], + &.disabled { cursor: default; color: pvar(--mainColor); background-color: #C6C6C6; } my-global-icon { - @include apply-svg-color(pvar(--mainColor)) + @include apply-svg-color(pvar(--mainColor)); } } @@ -182,12 +190,13 @@ color: pvar(--greyForegroundColor); background-color: transparent; - &[disabled], &.disabled { + &[disabled], + .disabled { cursor: default; } my-global-icon { - @include apply-svg-color(transparent) + @include apply-svg-color(transparent); } } @@ -197,17 +206,22 @@ background-color: $grey-background-color; color: pvar(--greyForegroundColor); - &:hover, &:active, &:focus, &[disabled], &.disabled { + &:hover, + &:active, + &:focus, + &[disabled], + &.disabled { color: pvar(--greyForegroundColor); background-color: $grey-background-hover-color; } - &[disabled], &.disabled { + &[disabled], + &.disabled { cursor: default; } my-global-icon { - @include apply-svg-color(pvar(--greyForegroundColor)) + @include apply-svg-color(pvar(--greyForegroundColor)); } } @@ -216,24 +230,30 @@ $text: #fff6f5; @include button-focus(scale-color($color, $alpha: -95%)); + background-color: $color; color: $text; - &:hover, &:active, &:focus, &[disabled], &.disabled { + &:hover, + &:active, + &:focus, + &[disabled], + &.disabled { background-color: lighten($color: $color, $amount: 10); } - &[disabled], &.disabled { + &[disabled], + &.disabled { cursor: default; } my-global-icon { - @include apply-svg-color($text) + @include apply-svg-color($text); } } @mixin peertube-button { - border: none; + border: 0; font-weight: $font-semibold; font-size: 15px; height: $button-height; @@ -246,18 +266,17 @@ } @mixin peertube-button-link { - display: inline-block; - @include disable-default-a-behaviour; @include peertube-button; -} -@mixin peertube-button-outline { display: inline-block; +} +@mixin peertube-button-outline { @include disable-default-a-behaviour; @include peertube-button; + display: inline-block; border: 1px solid; } @@ -291,17 +310,17 @@ filter: alpha(opacity=0); opacity: 0; outline: none; - background: white; + background: #fff; cursor: inherit; display: block; } } @mixin peertube-button-file ($width) { - width: $width; - @include peertube-file; @include peertube-button; + + width: $width; } @mixin icon ($size) { @@ -317,7 +336,7 @@ @mixin select-arrow-down { top: 50%; right: calc(0% + 15px); - content: " "; + content: ' '; height: 0; width: 0; position: absolute; @@ -358,7 +377,7 @@ width: 100%; } - &:after { + &::after { @include select-arrow-down; } @@ -394,21 +413,21 @@ option { font-weight: $font-semibold; color: pvar(--greyForegroundColor); - border: none; + border: 0; } } } // Thanks: https://codepen.io/triss90/pen/XNEdRe/ @mixin peertube-radio-container { - input[type="radio"] { + input[type=radio] { display: none; - & + label { + + label { font-weight: $font-regular; cursor: pointer; - &:before { + &::before { position: relative; top: -2px; content: ''; @@ -425,12 +444,12 @@ } } - &:checked + label:before { + &:checked + label::before { background-color: #000; box-shadow: inset 0 0 0 4px #fff; } - &:focus + label:before { + &:focus + label::before { outline: none; border-color: #000; } @@ -445,7 +464,7 @@ box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); } - & + span { + + span { position: relative; width: 18px; min-width: 18px; @@ -455,7 +474,7 @@ vertical-align: middle; cursor: pointer; - &:after { + &::after { content: ''; position: absolute; top: calc(2px - #{$border-width}); @@ -474,13 +493,13 @@ background: pvar(--mainColor); animation: jelly 0.6s ease; - &:after { + &::after { opacity: 1; transform: rotate(45deg) scale(1); } } - & + span + span { + + span + span { font-size: 15px; font-weight: $font-regular; margin-left: 5px; @@ -489,7 +508,7 @@ } &[disabled] + span, - &[disabled] + span + span{ + &[disabled] + span + span { opacity: 0.5; cursor: default; } @@ -685,13 +704,13 @@ color: pvar(--mainColor); } - & + .breadcrumb-item { + + .breadcrumb-item { padding-left: 0.5rem; &::before { display: inline-block; padding-right: 0.5rem; color: #6c757d; - content: "/"; + content: '/'; } } @@ -706,13 +725,13 @@ flex-wrap: wrap; margin: 0 -5px; - & > div { + > div { box-sizing: border-box; flex: 0 0 percentage(1/3); padding: 0 5px; margin-bottom: 10px; - & > a { + > a { @include disable-default-a-behaviour; text-decoration: none; @@ -727,8 +746,8 @@ } } - & > a, - & > div { + > a, + > div { padding: 20px; background: pvar(--submenuBackgroundColor); border-radius: 4px; @@ -737,7 +756,8 @@ } } - .dashboard-num, .dashboard-text { + .dashboard-num, + .dashboard-text { text-align: center; font-size: 130%; color: pvar(--mainForegroundColor); @@ -831,7 +851,7 @@ flex-direction: column; .form-sub-title { - margin-right: 0px !important; + margin-right: 0 !important; margin-bottom: 10px; text-align: center; } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index d2a5d2bd9..d54563df6 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -60,7 +60,7 @@ $max-channels-width: 1200px; $footer-height: 30px; $footer-margin: 30px; -$separator-border-color: rgba(0, 0, 0, 0.10); +$separator-border-color: rgba(0, 0, 0, 0.1); $video-miniature-margin-bottom: 15px; @@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color; $sub-menu-margin-bottom: 30px; $sub-menu-margin-bottom-small-view: 10px; -$activated-action-button-color: black; +$activated-action-button-color: #000; $focus-box-shadow-form: 0 0 0 .2rem; @@ -147,7 +147,7 @@ $variables: ( @if map-has-key($variables, $variable) { @return map-get($variables, $variable); } @else { - @error "ERROR: Variable #{$variable} does not exist"; + @error 'ERROR: Variable #{$variable} does not exist'; } } diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss index 61da6d266..13b2012b2 100644 --- a/client/src/sass/ng-select.scss +++ b/client/src/sass/ng-select.scss @@ -14,7 +14,7 @@ $ng-select-height: 30px; $ng-select-value-padding-left: 15px; $ng-select-value-font-size: 15px; -@import "~@ng-select/ng-select/scss/default.theme.scss"; +@import '~@ng-select/ng-select/scss/default.theme'; .ng-select { font-size: $ng-select-value-font-size; @@ -31,13 +31,13 @@ $ng-select-value-font-size: 15px; } .ng-arrow-wrapper { - padding-right: 12px + padding-right: 12px; } &.ng-select-single .ng-value-container .ng-value { color: pvar(--inputForegroundColor); - .ng-value-label { + .ng-value-label { /* stylelint-disable-line */ display: flex; align-items: center; } @@ -45,7 +45,8 @@ $ng-select-value-font-size: 15px; &.ng-select-multiple .ng-select-container .ng-value-container { padding-left: 12px; - .ng-value { + + .ng-value { /* stylelint-disable-line */ margin-left: 3px; } } diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index 6bc66af0c..45cee3e77 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -31,26 +31,26 @@ $context-menu-width: 350px; background-color: rgba(255, 255, 255, 0.2); } - [class^="vjs-icon-"] { + [class^='vjs-icon-'] { + $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; + display: inline-flex; position: relative; top: 2px; cursor: pointer; width: 14px; height: 14px; - background-color: white; + background-color: #fff; mask-size: cover; margin-right: 0.8rem !important; - $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; - @each $icon in $icons { &[class$="-#{$icon}"] { mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); } } - &[class$="-tick-white"] { + &[class$='-tick-white'] { float: right; margin: 0 !important; } diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss index 502ee33ff..e674fa2f6 100644 --- a/client/src/sass/player/index.scss +++ b/client/src/sass/player/index.scss @@ -4,6 +4,6 @@ @import './settings-menu'; @import './spinner'; @import './upnext'; -@import './bezels.scss'; -@import './playlist.scss'; -@import './stats.scss'; +@import './bezels'; +@import './playlist'; +@import './stats'; diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss index c2fa855ab..26066d218 100644 --- a/client/src/sass/player/mobile.scss +++ b/client/src/sass/player/mobile.scss @@ -13,4 +13,4 @@ } } } -} \ No newline at end of file +} diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 81aacf1d7..8fe2e054d 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -52,12 +52,12 @@ body { } .vjs-big-play-button { - outline: 0; - font-size: 6em; - $big-play-width: 1.2em; $big-play-height: 1.2em; + outline: 0; + font-size: 6em; + border: 2px solid #fff; border-radius: 100%; @@ -72,7 +72,7 @@ body { &::-moz-focus-inner { border: 0; - padding: 0 + padding: 0; } .vjs-icon-placeholder::before { @@ -82,8 +82,9 @@ body { background-image: url('#{$assets-path}/player/images/big-play-button.svg'); } - &.focus-visible, &:hover { - background-color: var(--mainColor, dimgray); + &.focus-visible, + &:hover { + background-color: var(--mainColor, #696969); } } @@ -91,16 +92,19 @@ body { // Small effect when we click on the play button &.vjs-has-big-play-button-clicked { - .vjs-big-play-button, .vjs-poster { + .vjs-big-play-button, + .vjs-poster { display: block; visibility: hidden; - &.vjs-big-play-button, &.vjs-big-play-button::before { + &.vjs-big-play-button, + &.vjs-big-play-button::before { opacity: 0; transition: visibility 0.2s, opacity 0.2s; } - &.vjs-poster, &.vjs-poster::before { + &.vjs-poster, + &.vjs-poster::before { opacity: 0; transition: visibility 0.3s, opacity 0.3s; transition-delay: 0.05s; @@ -165,8 +169,7 @@ body { .vjs-fullscreen-control, .vjs-peertube-link, .vjs-theater-control, - .vjs-settings - { + .vjs-settings { color: pvar(--embedForegroundColor) !important; opacity: $primary-foreground-opacity; @@ -217,7 +220,8 @@ body { } .vjs-load-progress { - &, & div { + &, + div { background: rgba(255, 255, 255, .2); } } @@ -266,7 +270,7 @@ body { line-height: calc(#{$control-bar-height} - 1px); &::after { - content: "/"; + content: '/'; margin: 0 1px 0 2px; } } @@ -308,11 +312,17 @@ body { display: none; } - .download-speed-number, .upload-speed-number, .peers-number, .http-fallback { + .download-speed-number, + .upload-speed-number, + .peers-number, + .http-fallback { font-weight: $font-semibold; } - .download-speed-text, .upload-speed-text, .peers-text, .http-fallback { + .download-speed-text, + .upload-speed-text, + .peers-text, + .http-fallback { margin-right: 15px; } @@ -336,10 +346,8 @@ body { &.icon-next, &.icon-previous { mask-image: url('#{$assets-path}/player/images/next.svg'); - -webkit-mask-image: url('#{$assets-path}/player/images/next.svg'); - background-color: white; + background-color: #fff; mask-size: cover; - -webkit-mask-size: cover; width: 11px; height: 11px; margin-top: -2px; @@ -410,7 +418,7 @@ body { } .vjs-volume-bar { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat; background-size: 22px 14px; height: 100%; width: 100%; @@ -421,7 +429,7 @@ body { top: 3px; .vjs-volume-level { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat; background-size: 22px 14px; max-width: 22px; max-height: 14px; diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss index ebbed02d9..8558fc837 100644 --- a/client/src/sass/player/playlist.scss +++ b/client/src/sass/player/playlist.scss @@ -44,10 +44,8 @@ $playlist-menu-width: 350px; width: 20px; height: 20px; mask-image: url('#{$assets-path}/images/feather/x.svg'); - -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg'); - background-color: white; + background-color: #fff; mask-size: cover; - -webkit-mask-size: cover; } } } @@ -90,10 +88,8 @@ $playlist-menu-width: 350px; width: 22px; height: 22px; mask-image: url('#{$assets-path}/images/feather/list.svg'); - -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg'); - background-color: white; + background-color: #fff; mask-size: cover; - -webkit-mask-size: cover; margin-bottom: 3px; } @@ -133,9 +129,9 @@ $playlist-menu-width: 350px; } .item-player { - display: none; - @include play-icon(20px, 16px); + + display: none; } &.vjs-selected { diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 09c872ef7..74eee7d64 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -149,7 +149,7 @@ $setting-transition-easing: ease-out; background-color: inherit; padding: 8px 8px 13px 12px; margin-bottom: 5px; - border-bottom: 1px solid grey; + border-bottom: 1px solid #808080; text-align: left; &::before { diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss index a6af8da33..94f4d1008 100644 --- a/client/src/sass/player/spinner.scss +++ b/client/src/sass/player/spinner.scss @@ -51,4 +51,4 @@ opacity: 1; } } -} \ No newline at end of file +} diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss index 953f6032a..6fcbcd969 100644 --- a/client/src/sass/player/stats.scss +++ b/client/src/sass/player/stats.scss @@ -6,6 +6,8 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6); .video-js { .vjs-stats-content { + @include transition(opacity 0.1s); + position: absolute; background-color: $contextmenu-background-color; padding: 5px 0; @@ -18,8 +20,6 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6); z-index: 64; font-size: 12px; line-height: 1.2; - - @include transition(opacity 0.1s); } .vjs-stats-close { @@ -38,5 +38,4 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6); width: 11.5em; white-space: nowrap; } - } diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss index 7614bb3b6..8c9a6f784 100644 --- a/client/src/sass/player/upnext.scss +++ b/client/src/sass/player/upnext.scss @@ -11,15 +11,15 @@ $browser-context: 16; .video-js { .vjs-upnext-content { + @include transition(opacity 0.1s); + font-size: 1.8em; pointer-events: auto; position: absolute; top: 0; bottom: 0; - background: rgba(0,0,0,0.6); + background: rgba(0, 0, 0, 0.6); width: 100%; - - @include transition(opacity 0.1s); } .vjs-upnext-top { @@ -77,7 +77,7 @@ $browser-context: 16; float: none; padding: 10px !important; font-size: 16px !important; - border: none; + border: 0; } .vjs-upnext-cancel-button, @@ -86,7 +86,7 @@ $browser-context: 16; } .vjs-upnext-cancel-button:hover { - background-color: rgba(255,255,255,0.25); + background-color: rgba(255, 255, 255, 0.25); border-radius: 2px; } @@ -95,6 +95,8 @@ $browser-context: 16; } .vjs-upnext-autoplay-icon { + @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1)); + position: absolute; top: 50%; left: 50%; @@ -102,8 +104,6 @@ $browser-context: 16; height: 98px; margin: -49px 0 0 -49px; cursor: pointer; - - @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1)); } } diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 544d0039a..1abcd30e4 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -1,10 +1,11 @@ @import '_variables'; @import '_mixins'; +/* stylelint-disable */ @import '~primeng/resources/primeng.css'; // Override primeng style we don't want -input[type="button"] { +input[type=button] { border-radius: inherit; } diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index cbe6bdd01..e32cce54e 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -21,7 +21,8 @@ video { } /* fill the entire space */ -html, body { +html, +body { height: 100%; margin: 0; background-color: #000; @@ -70,18 +71,18 @@ html, body { text-align: center; width: 100%; height: 100%; - color: white; + color: #fff; box-sizing: border-box; font-family: sans-serif; +} - #error-title { - font-size: 45px; - margin-bottom: 5px; - } +#error-title { + font-size: 45px; + margin-bottom: 5px; +} - #error-content { - font-size: 24px; - } +#error-content { + font-size: 24px; } #placeholder-preview { @@ -97,10 +98,10 @@ html, body { @media screen and (max-width: 300px) { #error-block { font-size: 36px; + } - #error-content { - font-size: 14px; - } + #error-content { + font-size: 14px; } } diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss index 85ce4e0f7..b9ac3e74e 100644 --- a/client/src/standalone/videos/test-embed.scss +++ b/client/src/standalone/videos/test-embed.scss @@ -15,7 +15,7 @@ body { } iframe { - border: none; + border: 0; border-radius: 8px; min-width: 200px; width: 100%; @@ -41,7 +41,7 @@ aside { .icon { height: 100%; padding: 0 18px 0 32px; - background: white; + background: #fff; display: flex; align-items: center; margin-right: 0.5em; @@ -62,13 +62,13 @@ header { width: 100%; height: 3.2em; background-color: #F1680D; - color: white; + color: #fff; //background-image: url(../../assets/images/backdrop/network-o.png); display: flex; flex-direction: row; align-items: center; margin-bottom: 1em; - box-shadow: 1px 0px 10px rgba(0,0,0,0.6); + box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6); background-size: 50%; background-position: top left; padding-right: 1em; @@ -87,13 +87,13 @@ header { display: flex; flex-wrap: wrap; - & > * { + > * { flex-grow: 0; } } fieldset { - border: none; + border: 0; min-width: 8em; legend { border-bottom: 1px solid #ccc; @@ -103,12 +103,12 @@ fieldset { button { background: #F1680D; - color: white; + color: #fff; font-weight: bold; border-radius: 5px; margin: 0; padding: 1em 1.25em; - border: none; + border: 0; } a { @@ -118,7 +118,11 @@ a { text-decoration: underline; } - &, &:hover, &:focus, &:visited, &:active { + &, + &:hover, + &:focus, + &:visited, + &:active { color: #F44336; } } -- cgit v1.2.3