diff --git a/client/.sass-lint.yml b/client/.sass-lint.yml deleted file mode 100644 index a6e949cb2..000000000 --- a/client/.sass-lint.yml +++ /dev/null @@ -1,30 +0,0 @@ -files: - include: - - "src/app/**/*.scss" - - "src/assets/**/*.scss" - - "src/sass/**/*.scss" - - "src/standalone/**/*.scss" -syntax: - include: - - scss - - sass -rules: - property-sort-order: 0 - attribute-quotes: 0 - border-zero: 0 - no-color-keywords: 0 - no-color-literals: 0 - no-css-comments: 0 - no-important: 0 - no-trailing-zero: 1 - space-after-bang: 1 - space-before-bang: 1 - space-after-colon: 1 - space-before-colon: 1 - clean-import-paths: 0 - hex-length: 1 - hex-notation: 0 - nesting-depth: - - 1 - - max-depth: 4 - indentation: 2 diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json new file mode 100644 index 000000000..25f0b1002 --- /dev/null +++ b/client/.stylelintrc.json @@ -0,0 +1,29 @@ +{ + "extends": "stylelint-config-sass-guidelines", + "rules": { + "scss/at-import-no-partial-leading-underscore": null, + "color-hex-case": null, + "color-hex-length": null, + "order/properties-alphabetical-order": null, + "selector-pseudo-element-no-unknown": [ + true, + { + "ignorePseudoElements": [ "ng-deep" ] + } + ], + "max-nesting-depth": [ + 8, + { + "ignore": [ "blockless-at-rules", "pseudo-classes" ] + } + ], + "selector-max-compound-selectors": 9, + "selector-no-qualifying-type": null, + "scss/at-extend-no-missing-placeholder": null, + "number-leading-zero": null, + "rule-empty-line-before": null, + "selector-max-id": null, + "scss/at-function-pattern": null, + "function-parentheses-space-inside": "never-single-line" + } +} diff --git a/client/package.json b/client/package.json index 8a344c1af..140fc3095 100644 --- a/client/package.json +++ b/client/package.json @@ -15,14 +15,14 @@ "scripts": { "lint": "npm run lint-ts && npm run lint-scss", "lint-ts": "tslint --project ./tsconfig.app.json -c ./tslint.json 'src/app/**/*.ts' 'src/standalone/**/*.ts'", - "lint-scss": "sass-lint -c .sass-lint.yml", + "lint-scss": "stylelint 'src/**/*.scss'", "webpack": "webpack", "tslint": "tslint", "ng": "ng", "webpack-bundle-analyzer": "webpack-bundle-analyzer", "webdriver-manager": "webdriver-manager", "ngx-extractor": "ngx-extractor", - "sass-lint": "sass-lint" + "stylelint": "stylelint" }, "typings": "*.d.ts", "resolutions": { @@ -106,13 +106,14 @@ "rxjs": "^6.5.2", "sanitize-html": "^2.1.2", "sass": "^1.29.0", - "sass-lint": "^1.13.1", "sass-loader": "^10", "sass-resources-loader": "^2.0.0", "sha.js": "^2.4.11", "socket.io-client": "^4.0.1", "stream-browserify": "^3.0.0", "stream-http": "^3.0.0", + "stylelint": "^13.13.0", + "stylelint-config-sass-guidelines": "^8.0.0", "terser-webpack-plugin": "^4", "ts-loader": "^8.0.14", "tslib": "^2.0.0", 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 @@ -