diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json index fc5a5307b..95c5bf57c 100644 --- a/client/.stylelintrc.json +++ b/client/.stylelintrc.json @@ -1,18 +1,55 @@ { "extends": "stylelint-config-sass-guidelines", + "plugins": [ + "stylelint-order" + ], "rules": { + "declaration-empty-line-before": [ + "always", + { + "except": [ + "first-nested" + ], + "ignore": [ "after-declaration", "after-comment" ] + } + ], + "at-rule-empty-line-before": [ + "always", + { + "except": [ + "first-nested", + "blockless-after-blockless" + ], + "ignore": [ "after-comment" ], + "ignoreAtRules": [ "else" ] + } + ], + "order/order": [ + "custom-properties", + "declarations", + { + "type": "at-rule", + "name": "include" + } + ], + "scss/selector-no-redundant-nesting-selector": null, "scss/at-import-no-partial-leading-underscore": null, "color-hex-length": null, "selector-pseudo-element-no-unknown": [ true, { - "ignorePseudoElements": [ "ng-deep" ] + "ignorePseudoElements": [ + "ng-deep" + ] } ], "max-nesting-depth": [ 8, { - "ignore": [ "blockless-at-rules", "pseudo-classes" ] + "ignore": [ + "blockless-at-rules", + "pseudo-classes" + ] } ], "selector-max-compound-selectors": 9, @@ -25,7 +62,10 @@ "property-no-vendor-prefix": [ true, { - "ignoreProperties": [ "mask-image", "mask-size" ] + "ignoreProperties": [ + "mask-image", + "mask-size" + ] } ] } diff --git a/client/package.json b/client/package.json index ee6be67fb..f3e859b9a 100644 --- a/client/package.json +++ b/client/package.json @@ -115,6 +115,7 @@ "socket.io-client": "^4.5.4", "stylelint": "^16.2.1", "stylelint-config-sass-guidelines": "^11.0.0", + "stylelint-order": "^6.0.4", "tinykeys": "^2.1.0", "ts-node": "^10.9.2", "tslib": "^2.4.0", 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 e328cfb60..ffb8ce307 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -14,10 +14,10 @@ } .middle-title { + margin-top: 0; + @include in-content-small-title; @include margin-bottom(1.5rem); - - margin-top: 0; } .block { @@ -25,17 +25,17 @@ } .anchor-link { - @include disable-outline; - position: relative; + @include disable-outline; + &:hover, &:active { &::after { - @include margin-left(0.2em); - content: '#'; display: inline-block; + + @include margin-left(0.2em); } } diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss index 6db6f13b3..80b962a37 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss @@ -12,8 +12,6 @@ input[type=text] { @include peertube-input-text(340px); - - display: block; } textarea { 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 11a5f2df6..ffa8fe1d5 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube.component.scss @@ -8,9 +8,9 @@ } .card { - @include margin(2rem); - flex-basis: 300px; + + @include margin(2rem); } .card-title { 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 9c2cbaecc..9a415a320 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 @@ -8,9 +8,6 @@ } .channel { - @include padding(1.75rem); - @include margin(2rem, 0); - max-width: $max-channels-width; background-color: pvar(--channelBackgroundColor); @@ -18,6 +15,9 @@ grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 15px; + + @include padding(1.75rem); + @include margin(2rem, 0); } .channel-avatar-row { @@ -29,16 +29,16 @@ grid-template-rows: auto 1fr; my-actor-avatar { - @include margin-right(15px); - grid-column: 1; grid-row: 1 / 3; + + @include margin-right(15px); } a { - @include peertube-word-wrap; - color: pvar(--mainForegroundColor); + + @include peertube-word-wrap; } h2 { @@ -47,20 +47,20 @@ } .actor-counters { - @include margin-left(15px); - @include actor-counters; - grid-row: 1; grid-column: 3; + + @include margin-left(15px); + @include actor-counters; } .description-html { - @include fade-text(50px, pvar(--channelBackgroundColor)); - grid-column: 2 / 4; grid-row: 2; max-height: 80px; + + @include fade-text(50px, pvar(--channelBackgroundColor)); } } @@ -77,18 +77,18 @@ my-subscribe-button { position: relative; my-video-miniature { - @include margin-right(15px); - min-width: $video-thumbnail-medium-width; max-width: $video-thumbnail-medium-width; + + @include margin-right(15px); } } .videos-overflow-workaround { - @include margin-top(2rem); - overflow-x: hidden; + + @include margin-top(2rem); } .miniature-show-channel { diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index aadd6f5c0..0709db6b2 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -13,12 +13,12 @@ } .links { - @include grid-videos-miniature-margins; - display: flex; justify-content: space-between; align-items: center; + @include grid-videos-miniature-margins; + &.on-channel-page { max-width: $max-channels-width; } @@ -33,16 +33,16 @@ my-copy-button { } .account-info { + grid-template-columns: 1fr min-content; + grid-template-rows: auto auto; + + background-color: pvar(--submenuBackgroundColor); + @include grid-videos-miniature-margins(false, 15px); @include padding-top(3.75rem); @include padding-bottom(3.75rem); @include margin-bottom(3rem); @include font-size(1rem); - - grid-template-columns: 1fr min-content; - grid-template-rows: auto auto; - - background-color: pvar(--submenuBackgroundColor); } .account-avatar-row { @@ -60,10 +60,10 @@ my-copy-button { } .show-more { + text-align: center; + @include show-more-description; @include padding-bottom(3.75rem); - - text-align: center; } .buttons { @@ -91,9 +91,9 @@ my-copy-button { @media screen and (max-width: $small-view) { .description:not(.expanded) { - @include fade-text(30px, pvar(--submenuBackgroundColor)); - max-height: 70px; + + @include fade-text(30px, pvar(--submenuBackgroundColor)); } .buttons { 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 138067fa3..c3b18a867 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 @@ -25,8 +25,6 @@ my-markdown-textarea { input[type=text], input[type=number] { @include peertube-input-text($form-base-input-width); - - display: block; } .number-with-unit { @@ -60,22 +58,22 @@ input[type=checkbox] { my-select-options, my-select-custom-value, my-select-checkbox { - @include responsive-width($form-base-input-width); - display: block; + + @include responsive-width($form-base-input-width); } input[type=submit] { + display: flex; + @include peertube-button; @include orange-button; @include margin-left(auto); - display: flex; - + .form-error { - @include margin-left(5px); - display: inline; + + @include margin-left(5px); } } @@ -85,11 +83,11 @@ input[type=submit] { } textarea { - @include peertube-textarea(500px, 150px); - max-width: 100%; display: block; + @include peertube-textarea(500px, 150px); + &.small { height: 75px; } @@ -136,8 +134,6 @@ ngb-tabset:not(.previews) ::ng-deep { justify-content: right; .callout-link { - @include peertube-button-link; - position: relative; right: 3.3em; top: .3em; @@ -145,6 +141,8 @@ ngb-tabset:not(.previews) ::ng-deep { color: pvar(--mainColor); background-color: pvar(--mainBackgroundColor); padding: 0 .3em; + + @include peertube-button-link; } } 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 3a7bf2ef8..f00d413a9 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 @@ -2,9 +2,10 @@ @use '_mixins' as *; a { - @include disable-default-a-behaviour; display: inline-block; + @include disable-default-a-behaviour; + &, &: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 405ddae5c..3f184e2b5 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 @@ -2,9 +2,10 @@ @use '_mixins' as *; a { - @include disable-default-a-behaviour; display: inline-block; + @include disable-default-a-behaviour; + &, &:hover { color: pvar(--mainForegroundColor); 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 667b4875b..cd4f48f46 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 @@ -2,9 +2,10 @@ @use '_mixins' as *; a { - @include disable-default-a-behaviour; display: inline-block; + @include disable-default-a-behaviour; + &, &:hover { color: pvar(--mainForegroundColor); diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.scss b/client/src/app/+admin/overview/comments/video-comment-list.component.scss index d7deffa29..bd69b11f0 100644 --- a/client/src/app/+admin/overview/comments/video-comment-list.component.scss +++ b/client/src/app/+admin/overview/comments/video-comment-list.component.scss @@ -2,8 +2,8 @@ @use '_mixins' as *; my-feed { - @include margin-left(5px); - display: inline-block; width: 15px; + + @include margin-left(5px); } diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss index 7eeac82a8..1f17e0da0 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss @@ -1,5 +1,4 @@ @use 'sass:math'; - @use '_variables' as *; @use '_mixins' as *; @@ -7,13 +6,12 @@ $form-base-input-width: 340px; input:not([type=submit]) { @include peertube-input-text($form-base-input-width); - display: block; } my-input-text { - @include responsive-width($form-base-input-width); - display: block; + + @include responsive-width($form-base-input-width); } .peertube-select-container { @@ -21,9 +19,9 @@ my-input-text { } my-select-custom-value { - @include responsive-width($form-base-input-width); - display: block; + + @include responsive-width($form-base-input-width); } .danger-zone { @@ -46,13 +44,13 @@ my-select-custom-value { margin-bottom: 10px; > a { - @include disable-default-a-behaviour; - text-decoration: none; color: inherit; display: block; font-size: 18px; + @include disable-default-a-behaviour; + &:active, &:focus, &:hover { diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss index 54f782086..8586adb2b 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss +++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss @@ -7,9 +7,9 @@ input[type=password] { } input[type=submit] { + margin-top: 10px; + @include peertube-button; @include danger-button; @include disable-outline; - - margin-top: 10px; } diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss index 1c4ca533f..172cba2a2 100644 --- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss @@ -1,8 +1,6 @@ @use 'sass:color'; - @use '_variables' as *; @use '_mixins' as *; - @use 'bootstrap/scss/functions' as *; tr.banned > td { @@ -31,10 +29,10 @@ my-global-icon { } .progress { - @include progressbar($small: true); - width: auto; max-width: 100%; + + @include progressbar($small: true); } @media screen and (max-width: $primeng-breakpoint) { diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss index 934e7080b..c836479c9 100644 --- a/client/src/app/+admin/overview/videos/video-list.component.scss +++ b/client/src/app/+admin/overview/videos/video-list.component.scss @@ -15,11 +15,11 @@ my-embed { display: flex; my-global-icon { - @include margin-left(3px); - width: 16px; position: relative; top: -2px; + + @include margin-left(3px); } } diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss index 1406adbf2..5018ffd71 100644 --- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss +++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss @@ -21,9 +21,9 @@ } .pt-badge { - @include margin-left(15px); - font-size: 13px; + + @include margin-left(15px); } .alert { 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 41a7be021..97d8604ca 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 @@ -7,8 +7,8 @@ h2 { input[type=submit], button { + margin-top: 10px; + @include peertube-button; @include orange-button; - - margin-top: 10px; } diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss index 7ee3376a7..bd327e1ae 100644 --- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss @@ -12,9 +12,9 @@ margin-bottom: 10px; .plugin-name { - @include margin-right(10px); - font-weight: $font-semibold; + + @include margin-right(10px); } .plugin-version { @@ -34,9 +34,9 @@ } .buttons { - @include margin-left(auto); - width: max-content; + + @include margin-left(auto); } } diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index 6467d5cbe..19fe075e3 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -23,9 +23,9 @@ } .log-level { - @include margin-right(5px); - font-weight: $font-semibold; + + @include margin-right(5px); } .log-by { @@ -100,10 +100,10 @@ my-copy-button { .peertube-select-container, ng-select, my-button { - @include margin-left(0 !important); - width: 100% !important; margin-bottom: 10px !important; + + @include margin-left(0 !important); } my-button { diff --git a/client/src/app/+error-page/error-page.component.scss b/client/src/app/+error-page/error-page.component.scss index d36cc1701..42ec3ee83 100644 --- a/client/src/app/+error-page/error-page.component.scss +++ b/client/src/app/+error-page/error-page.component.scss @@ -2,23 +2,22 @@ @use '_mixins' as *; .root { - @include margin-left(auto); - @include margin-right(auto); - @include padding-top(9rem); - @include rfs(45rem, width); - height: 100%; text-align: center; display: flex; justify-content: center; flex-direction: column-reverse; + @include margin-left(auto); + @include margin-right(auto); + @include padding-top(9rem); + @include rfs(45rem, width); .box { - @include font-size(1.25rem); - text-align: start; padding: 0 15px; + + @include font-size(1.25rem); } img { diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index c588c425a..a429c3eaf 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss @@ -2,10 +2,10 @@ @use '_mixins' as *; label { - @include font-size(18px); - display: block; margin-bottom: 5px; + + @include font-size(18px); } input[type=text], @@ -34,14 +34,14 @@ input[type=email] { } .login-form-and-externals { - @include margin-left(10px); - @include margin-right(10px); - @include margin-bottom(2.5rem); - display: flex; flex-wrap: wrap; justify-content: center; max-width: 450px; + + @include margin-left(10px); + @include margin-right(10px); + @include margin-bottom(2.5rem); } .external-login-blocks { @@ -49,8 +49,6 @@ input[type=email] { text-align: center; .external-login-block { - @include disable-default-a-behaviour; - cursor: pointer; border: 1px solid #d1d7e0; border-radius: 5px; @@ -62,6 +60,8 @@ input[type=email] { min-height: 35px; min-width: 100px; + @include disable-default-a-behaviour; + &:hover { background-color: rgba(209, 215, 224, 0.5); } @@ -69,12 +69,12 @@ input[type=email] { } .instance-information { + max-width: 600px; + @include margin-left(10px); @include margin-right(10px); @include margin-bottom(2.5rem); @include rfs (22rem, min-width); - - max-width: 600px; } .terms-anchor { @@ -91,13 +91,13 @@ input[type=email] { .login-form-and-externals, .instance-information { - @include margin-left(0); - @include margin-right(0); - width: 100%; max-width: 450px; min-width: unset; align-self: center; + + @include margin-left(0); + @include margin-right(0); } .instance-information { diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss index 567748760..2bd74bda4 100644 --- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss +++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss @@ -24,7 +24,3 @@ my-markdown-textarea { .peertube-select-container { @include peertube-select-container(340px); } - -.pt-two-cols .content-col { - max-width: 500px; -} diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss index 8d1804a93..6bc4a7c2f 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss @@ -12,8 +12,6 @@ my-input-text { input[type=email] { @include peertube-input-text(100%); - - display: block; } input[type=submit] { diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss index a29f04c36..f4cc18d8d 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss @@ -15,8 +15,8 @@ my-input-text + my-input-text { } input[type=submit] { + margin-top: 15px; + @include peertube-button; @include orange-button; - - margin-top: 15px; } diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss index 23e701332..c60a1b421 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss @@ -7,20 +7,19 @@ input#username + .muted { input[type=text] { @include peertube-input-text(340px); - - display: block; } input[type=submit] { + margin-top: 15px; + @include peertube-button; @include orange-button; - - margin-top: 15px; } textarea { - @include peertube-textarea(100%, 150px); max-width: 100%; display: block; + + @include peertube-textarea(100%, 150px); } diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss index 6275b7ac2..d50db5e28 100644 --- a/client/src/app/+my-account/my-account.component.scss +++ b/client/src/app/+my-account/my-account.component.scss @@ -2,11 +2,11 @@ @use '_mixins' as *; .root { - @include sub-menu-h1; - flex-direction: column; width: 100%; + @include sub-menu-h1; + > my-top-menu-dropdown:nth-child(1) { flex-grow: 1; } 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 12b19a0b5..d07f2d2e7 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 @@ -25,10 +25,10 @@ my-edit-button { } .video-channel { - @include row-blocks; - padding-bottom: 0; + @include row-blocks; + my-actor-avatar { @include margin-right(10px); } @@ -39,12 +39,12 @@ my-edit-button { } .video-channel-names { - @include disable-default-a-behaviour; - width: fit-content; display: flex; align-items: baseline; color: pvar(--mainForegroundColor); + + @include disable-default-a-behaviour; } .video-channel-display-name { @@ -53,10 +53,10 @@ my-edit-button { } .video-channel-name { - @include margin-left(5px); - font-size: 14px; color: $grey-actor-name; + + @include margin-left(5px); } .video-channel-followers { 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 21011a089..4546c6f63 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 @@ -23,13 +23,13 @@ } .history-switch { - @include margin-left(auto); - @include margin-right(15px); - grid-column: 3; display: flex; align-items: center; + @include margin-left(auto); + @include margin-right(15px); + label { margin: 0 0 0 5px; color: var(--greyForegroundColor); @@ -38,11 +38,11 @@ } .delete-history { + grid-column: 4; + @include peertube-button; @include grey-button; @include button-with-icon; - - grid-column: 4; } } diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss index 6275b7ac2..d50db5e28 100644 --- a/client/src/app/+my-library/my-library.component.scss +++ b/client/src/app/+my-library/my-library.component.scss @@ -2,11 +2,11 @@ @use '_mixins' as *; .root { - @include sub-menu-h1; - flex-direction: column; width: 100%; + @include sub-menu-h1; + > my-top-menu-dropdown:nth-child(1) { flex-grow: 1; } diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html index 0e481be07..daf2dec11 100644 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.html +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html @@ -41,19 +41,7 @@ - -
-
- -
-
-
- {{ videoChangeOwnership.video.name }} -
-
by {{ videoChangeOwnership.video.channel?.displayName }}
-
-
- + {{ videoChangeOwnership.createdAt | date: 'short' }} 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 deleted file mode 100644 index 98bed226d..000000000 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use 'sass:math'; -@use '_miniature' as *; -@use '_mixins' as *; - -.video-table-video { - display: inline-flex; - - .video-table-video-image { - $image-height: 45px; - - @include miniature-thumbnail; - @include margin-right(0.5rem); - - height: $image-height; - width: #{math.div(16, 9) * $image-height}; - border-radius: 2px; - border: 0; - background: transparent; - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - - img { - height: 100%; - width: 100%; - border-radius: 2px; - } - - span { - color: pvar(--inputPlaceholderColor); - } - - .video-table-video-image-label { - @include static-thumbnail-overlay; - position: absolute; - border-radius: 3px; - font-size: 10px; - padding: 0 3px; - line-height: 1.3; - bottom: 2px; - right: 2px; - } - } - - .video-table-video-text { - display: inline-flex; - flex-direction: column; - justify-content: center; - font-size: 90%; - color: pvar(--mainForegroundColor); - line-height: 1rem; - - div + div { - font-size: 80%; - } - } -} diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-ownership.component.ts index 7ddf34f3d..026e978c5 100644 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.ts +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.ts @@ -1,21 +1,21 @@ -import { SortMeta, SharedModule } from 'primeng/api' +import { DatePipe, NgClass, NgIf } from '@angular/common' import { Component, OnInit, ViewChild } from '@angular/core' import { Notifier, RestPagination, RestTable } from '@app/core' -import { VideoChangeOwnership, VideoChangeOwnershipStatus, VideoChangeOwnershipStatusType } from '@peertube/peertube-models' -import { MyAcceptOwnershipComponent } from './my-accept-ownership/my-accept-ownership.component' -import { AutoColspanDirective } from '../../shared/shared-main/angular/auto-colspan.directive' -import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component' -import { ButtonComponent } from '../../shared/shared-main/buttons/button.component' -import { NgIf, NgClass, DatePipe } from '@angular/common' -import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' -import { TableModule } from 'primeng/table' -import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component' -import { VideoOwnershipService } from '@app/shared/shared-main/video/video-ownership.service' import { Account } from '@app/shared/shared-main/account/account.model' +import { VideoOwnershipService } from '@app/shared/shared-main/video/video-ownership.service' +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' +import { VideoChangeOwnership, VideoChangeOwnershipStatus, VideoChangeOwnershipStatusType } from '@peertube/peertube-models' +import { SharedModule, SortMeta } from 'primeng/api' +import { TableModule } from 'primeng/table' +import { ActorAvatarComponent } from '../../shared/shared-actor-image/actor-avatar.component' +import { GlobalIconComponent } from '../../shared/shared-icons/global-icon.component' +import { AutoColspanDirective } from '../../shared/shared-main/angular/auto-colspan.directive' +import { ButtonComponent } from '../../shared/shared-main/buttons/button.component' +import { VideoCellComponent } from '../../shared/shared-tables/video-cell.component' +import { MyAcceptOwnershipComponent } from './my-accept-ownership/my-accept-ownership.component' @Component({ templateUrl: './my-ownership.component.html', - styleUrls: [ './my-ownership.component.scss' ], standalone: true, imports: [ GlobalIconComponent, @@ -28,7 +28,8 @@ import { Account } from '@app/shared/shared-main/account/account.model' NgClass, AutoColspanDirective, MyAcceptOwnershipComponent, - DatePipe + DatePipe, + VideoCellComponent ] }) export class MyOwnershipComponent extends RestTable implements OnInit { diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss index 153bfc6b1..783ba0ecb 100644 --- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss +++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss @@ -3,9 +3,9 @@ @use '_actor' as *; .actor { - @include actor-row($min-height: auto, $separator: true); - margin-bottom: 0; padding-bottom: 0; border: 0; + + @include actor-row($min-height: auto, $separator: true); } diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss index b34926cb5..1b2296d20 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss @@ -3,8 +3,6 @@ input[type=text] { @include peertube-input-text(340px); - - display: block; } .peertube-select-container { 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 6aaf16834..295f2015d 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 @@ -8,8 +8,6 @@ } .playlist-info { - @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1)); - grid-column: 1; background-color: pvar(--submenuBackgroundColor); margin-top: -$sub-menu-margin-bottom; @@ -19,6 +17,8 @@ display: flex; flex-direction: column; + @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1)); + /* fix ellipsis dots background color */ ::ng-deep .miniature-name::after { background-color: pvar(--submenuBackgroundColor) !important; @@ -34,7 +34,6 @@ @include button-with-icon(17px, 3px, -1px); @include grey-button; @include apply-svg-color(pvar(--actionButtonColor)); - @include margin-right(10px); } } diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss index f22feaa48..962e2b271 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss @@ -14,10 +14,10 @@ input[type=text] { } .video-playlist-buttons { - @include margin-left(10px); - display: flex; align-self: flex-end; + + @include margin-left(10px); } .video-playlists-header { @@ -43,9 +43,9 @@ my-delete-button { } .video-playlist-buttons { - @include margin-left(auto); - margin-top: 10px; + + @include margin-left(auto); } } 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 6c2ef6f76..c131fc8e9 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,22 +26,22 @@ 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); } } .action-button { - @include margin-left(10px); - display: flex; align-self: flex-end; + + @include margin-left(10px); } my-edit-button { @@ -59,9 +59,9 @@ my-edit-button { } .action-button { - @include margin-left(auto); - margin-top: 10px; + + @include margin-left(auto); } } diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss index fd997d33b..0b589a7f3 100644 --- a/client/src/app/+search/search-filters.component.scss +++ b/client/src/app/+search/search-filters.component.scss @@ -10,20 +10,19 @@ form { } .peertube-radio-container { - @include margin-right(30px); - display: inline-block; + + @include margin-right(30px); } .peertube-select-container { - @include peertube-select-container(auto); - margin-bottom: 1rem; + + @include peertube-select-container(auto); } input[type=text] { @include peertube-input-text(100%); - display: block; } input[type=submit] { diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss index 5b733ea9e..3a097cbb5 100644 --- a/client/src/app/+search/search.component.scss +++ b/client/src/app/+search/search.component.scss @@ -43,12 +43,12 @@ cursor: pointer; .icon.icon-filter { - @include icon(20px); - @include margin-right(5px); - position: relative; top: -1px; background-image: url('../../assets/images/feather/filter.svg'); + + @include icon(20px); + @include margin-right(5px); } } } @@ -72,13 +72,13 @@ } .video-channel-names { - @include disable-default-a-behaviour; - display: flex; align-items: baseline; color: pvar(--mainForegroundColor); width: fit-content; flex-wrap: wrap; + + @include disable-default-a-behaviour; } .video-channel-display-name { @@ -99,10 +99,10 @@ grid-template-rows: auto auto; my-actor-avatar { - @include build-channel-img-size($video-thumbnail-medium-width); - grid-column: 1; grid-row: 1 / -1; + + @include build-channel-img-size($video-thumbnail-medium-width); } } diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss index 264136b06..9781575f5 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.scss +++ b/client/src/app/+signup/+register/custom-stepper.component.scss @@ -51,11 +51,11 @@ header { overflow: hidden; my-global-icon { - @include apply-svg-color(pvar(--mainColor)); - display: flex; width: 12px; height: 12px; + + @include apply-svg-color(pvar(--mainColor)); } } } diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index ae0fdbb6e..2bf149762 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss @@ -26,9 +26,9 @@ my-instance-about-accordion { align-items: center; .skip-step { - @include margin-right(30px); - display: inline-block; + + @include margin-right(30px); } .skip-step-description { diff --git a/client/src/app/+signup/+register/steps/step.component.scss b/client/src/app/+signup/+register/steps/step.component.scss index 35cfdae91..35ef20d97 100644 --- a/client/src/app/+signup/+register/steps/step.component.scss +++ b/client/src/app/+signup/+register/steps/step.component.scss @@ -3,7 +3,6 @@ input:not([type=submit]) { @include peertube-input-text(100%); - display: block; &#username, &#name { diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss index c542f3d8a..55be9cf26 100644 --- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss +++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss @@ -3,6 +3,4 @@ input[type=email] { @include peertube-input-text(340px); - - display: block; } diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss index 99908d243..f0ac3735f 100644 --- a/client/src/app/+stats/video/video-stats.component.scss +++ b/client/src/app/+stats/video/video-stats.component.scss @@ -33,8 +33,6 @@ } .stats-card { - @include margin-right(15px); - display: flex; justify-content: center; align-items: center; @@ -44,6 +42,8 @@ background-color: pvar(--submenuBackgroundColor); margin-bottom: 15px; + @include margin-right(15px); + .label, .more-info { font-size: 14px; diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss index 588efd062..2a9dde031 100644 --- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss +++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss @@ -8,8 +8,9 @@ justify-content: center; .playlist-wrapper { - @include margin-right(15px); padding-bottom: 15px; + + @include margin-right(15px); } } @@ -24,9 +25,9 @@ } .playlists { + justify-content: left; + @include margin-left(pvar(--horizontalMarginContent) !important); @include margin-right(pvar(--horizontalMarginContent) !important); - - justify-content: left; } } diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index f73fa4e10..f8b0b1cd2 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -30,10 +30,6 @@ } .channel-info { - // Use the same margin as the videos grid - @include grid-videos-miniature-margins(false, 15px); - @include margin-bottom(3rem); - display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; @@ -41,6 +37,10 @@ background-color: pvar(--channelBackgroundColor); padding-top: var(--myGlobalTopPadding); font-size: var(--myFontSize); + + // Use the same margin as the videos grid + @include grid-videos-miniature-margins(false, 15px); + @include margin-bottom(3rem); } .channel-avatar-row { @@ -58,9 +58,9 @@ } .show-more { - @include show-more-description; - display: none; + + @include show-more-description; } .channel-buttons { @@ -75,20 +75,20 @@ // Only used on small screen &.bottom { - @include margin-bottom(2rem); - justify-content: center; display: none; + + @include margin-bottom(2rem); } } .owner-card { - @include margin-left(105px); - grid-column: 2; // Takes all the column grid-row: 1 / 3; place-self: end; + + @include margin-left(105px); } // Only used on mobile @@ -126,18 +126,18 @@ } .owner-description { - @include fade-text(120px, pvar(--mainBackgroundColor)); - max-height: 140px; word-break: break-word; + + @include fade-text(120px, pvar(--mainBackgroundColor)); } } .view-account.short { + margin-top: 30px; + @include peertube-button-link; @include orange-button-inverted; - - margin-top: 30px; } .view-account.complete { @@ -155,9 +155,9 @@ my-copy-button { } .owner-card { - @include margin-left(60px); - grid-row: 2; + + @include margin-left(60px); } } @@ -174,9 +174,9 @@ my-copy-button { } .channel-description:not(.expanded) { - @include fade-text(30px, pvar(--channelBackgroundColor)); - max-height: 70px; + + @include fade-text(30px, pvar(--channelBackgroundColor)); } .show-more { @@ -211,16 +211,16 @@ my-copy-button { padding: 0; .avatar-row { - @include margin-right(30px); - grid-column: 1; + + @include margin-right(30px); } .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/+video-studio/edit/video-studio-edit.component.scss b/client/src/app/+video-studio/edit/video-studio-edit.component.scss index f04218aee..52b6bbad9 100644 --- a/client/src/app/+video-studio/edit/video-studio-edit.component.scss +++ b/client/src/app/+video-studio/edit/video-studio-edit.component.scss @@ -5,10 +5,10 @@ display: flex; .information { - @include margin-left(50px); - width: 100%; + @include margin-left(50px); + > div { margin-bottom: 30px; } @@ -36,15 +36,14 @@ h2 { .section { $min-width: 600px; - @include padding-left(10px); - min-width: $min-width; - margin-bottom: 50px; border: 1px solid $separator-border-color; border-radius: 5px; width: fit-content; + @include padding-left(10px); + .form-group, .description { @include margin-left(5px); 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 fbe9d78cf..0537fc0b7 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 @@ -19,8 +19,9 @@ my-peertube-checkbox { min-height: 300px; input { - @include peertube-input-text(100%); display: block; + + @include peertube-input-text(100%); } } @@ -30,27 +31,27 @@ my-peertube-checkbox { align-items: center; a.caption-entry-label { - @include disable-default-a-behaviour; - color: #000; + @include disable-default-a-behaviour; + &:hover { opacity: 0.8; } } .caption-entry-label { - @include margin-right(20px); - font-weight: bold; min-width: 100px; + + @include margin-right(20px); } .caption-entry-state { - @include margin-right(15px); - min-width: 250px; + @include margin-right(15px); + &.caption-entry-state-create { color: #39CC0B; } @@ -78,10 +79,10 @@ my-peertube-checkbox { text-align: end; .message-submit { - @include margin-right(25px); - display: inline-block; color: pvar(--greyForegroundColor); + + @include margin-right(25px); } } @@ -94,8 +95,9 @@ p-calendar { } .p-inputtext { - @include peertube-input-text(100%); color: #000; + + @include peertube-input-text(100%); } } } 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 684ab23cc..3f323733d 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 @@ -17,10 +17,10 @@ $width-size: 275px; align-items: center; .upload-icon { - @include apply-svg-color(pvar(--inputBorderColor)); - width: 90px; margin-bottom: 25px; + + @include apply-svg-color(pvar(--inputBorderColor)); } .peertube-select-container { @@ -42,16 +42,17 @@ $width-size: 275px; } input[type=text] { - @include peertube-input-text($width-size); display: block; + + @include peertube-input-text($width-size); } input[type=button] { - @include peertube-button; - @include orange-button; - width: $width-size; margin-top: 30px; + + @include peertube-button; + @include orange-button; } .button-file { 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 7e766a818..3229571e1 100644 --- a/client/src/app/+videos/+video-edit/video-add.component.scss +++ b/client/src/app/+videos/+video-edit/video-add.component.scss @@ -19,11 +19,11 @@ $nav-link-height: 40px; .about-link, .contact-link { - @include peertube-button-link; - @include orange-button; - height: fit-content; margin-top: 10px; + + @include peertube-button-link; + @include orange-button; } } diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss index e4f9a62a9..b518b1b25 100644 --- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss +++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss @@ -16,9 +16,6 @@ } ::ng-deep.action-button { - @include peertube-button; - @include button-with-icon(21px, 0, -1px); - font-size: 100%; font-weight: $font-semibold; display: inline-block; @@ -28,6 +25,9 @@ color: pvar(--actionButtonColor); text-transform: uppercase; + @include peertube-button; + @include button-with-icon(21px, 0, -1px); + &::after { display: none; } diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss index ac228bafa..3f715fd67 100644 --- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss @@ -23,12 +23,12 @@ form { } textarea { + min-height: calc(#{$peertube-textarea-height} - 15px * 2); + @include peertube-textarea(100%, $peertube-textarea-height); @include button-focus(pvar(--mainColorLightest)); @include padding-right($markdown-icon-width + 15px !important); - min-height: calc(#{$peertube-textarea-height} - 15px * 2); - @media screen and (max-width: 600px) { @include padding-right($markdown-icon-width + 19px !important); } @@ -91,10 +91,10 @@ form { flex: 1; code { - @include margin-left(5px); - display: inline-block; vertical-align: middle; + + @include margin-left(5px); } } } diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss index 1686b8f0b..fe1970628 100644 --- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss @@ -5,12 +5,12 @@ display: flex; .left { - @include margin-right(10px); - display: flex; flex-direction: column; align-items: center; + @include margin-right(10px); + .vertical-border { width: 2px; height: 100%; @@ -47,9 +47,6 @@ } .video-author { - @include padding-right(6px); - @include padding-left(6px); - height: 20px; background-color: #888888; border-radius: 12px; @@ -60,6 +57,9 @@ align-items: center; display: inline-flex; color: #fff !important; + + @include padding-right(6px); + @include padding-left(6px); } .comment-account { @@ -68,10 +68,10 @@ font-size: 90%; a { - @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor); + @include disable-default-a-behaviour; + &:hover { text-decoration: underline; } @@ -83,12 +83,12 @@ } .comment-date { - @include margin-left(5px); - font-size: 90%; color: pvar(--greyForegroundColor); text-decoration: none; + @include margin-left(5px); + &:hover { text-decoration: underline; } @@ -101,11 +101,11 @@ ::ng-deep a { &:not(.linkified-url) { - @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor); font-weight: $font-semibold; + + @include disable-default-a-behaviour; } } @@ -127,11 +127,11 @@ ::ng-deep .dropdown-toggle, .comment-action-reply { - @include margin-right(10px); - color: pvar(--greyForegroundColor); cursor: pointer; + @include margin-right(10px); + &:hover, &:active, &:focus, diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss index 7720fe43b..a76eee96e 100644 --- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss @@ -21,13 +21,13 @@ } my-feed { - @include margin-left(5px); - display: inline-block; transition: ease-in .2s opacity; width: 12px; position: relative; top: -3px; + + @include margin-left(5px); } } diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss index f7f9dfd2f..bd4fb5d52 100644 --- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss +++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss @@ -44,11 +44,11 @@ } a { - @include disable-default-a-behaviour; - color: pvar(--mainColor); transition: color 0.3s; + @include disable-default-a-behaviour; + &:hover { color: pvar(--mainBackgroundColor); } diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss index 1470a9f6d..1e120e663 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.scss @@ -8,18 +8,19 @@ } .attribute-label { - @include padding-right(5px); - min-width: 142px; display: inline-block; color: pvar(--greyForegroundColor); font-weight: $font-bold; + + @include padding-right(5px); } a.attribute-value { - @include disable-default-a-behaviour; color: pvar(--mainForegroundColor); + @include disable-default-a-behaviour; + &:hover { opacity: 0.9; } diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss index fd9dd1a6a..88496685f 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-avatar-channel.component.scss @@ -1,11 +1,11 @@ @use '_mixins' as *; .wrapper { - @include margin-right(5px); - position: relative; margin-bottom: 5px; + @include margin-right(5px); + .second-avatar { height: 60%; width: 60%; diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss index d799ae2fc..081fa0cfb 100644 --- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss +++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss @@ -2,12 +2,12 @@ @use '_mixins' as *; .video-info-description { - @include margin-left($video-watch-info-margin-left); - @include margin-right(0); - margin-top: 20px; margin-bottom: 20px; + @include margin-left($video-watch-info-margin-left); + @include margin-right(0); + .video-info-description-html { @include peertube-word-wrap; @@ -27,12 +27,12 @@ } .video-info-description-more { - @include font-size(14px); - cursor: pointer; font-weight: $font-semibold; color: pvar(--greyForegroundColor); margin-top: 1rem; + + @include font-size(14px); } } diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss index 5b1bf9cab..998d03864 100644 --- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss +++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss @@ -9,27 +9,27 @@ flex-wrap: wrap-reverse; .title-page { - @include margin-right(.5rem !important); - margin-bottom: unset; margin-top: 0; + + @include margin-right(.5rem !important); } } .title-page-autoplay { - @include margin-left(auto); - display: flex; width: max-content; height: max-content; align-items: center; - span { - @include margin-right(0.3rem); + @include margin-left(auto); + span { text-transform: uppercase; font-size: 85%; font-weight: 600; + + @include margin-right(0.3rem); } } diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index 61d5ef156..61cd4206d 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -131,14 +131,13 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); } .video-info-name { - @include peertube-word-wrap; - - @include margin-right(30px); - min-height: 40px; // Align with the action buttons font-size: 27px; font-weight: $font-semibold; flex-grow: 1; + + @include peertube-word-wrap; + @include margin-right(30px); } .video-info-first-row-bottom { @@ -149,22 +148,22 @@ $video-max-height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); } .video-info-date-views { - @include margin-right(10px); - margin-bottom: 10px; align-self: start; font-size: 14px; + + @include margin-right(10px); } .video-info-channel { font-weight: $font-semibold; a { + color: pvar(--mainForegroundColor); + @include disable-default-a-behaviour; @include peertube-word-wrap; - color: pvar(--mainForegroundColor); - &:hover { opacity: 0.8; } @@ -196,29 +195,29 @@ my-subscribe-button { } my-video-attributes { - @include margin-left($video-watch-info-margin-left); - display: block; margin-bottom: 15px; + + @include margin-left($video-watch-info-margin-left); } my-action-buttons { - @include margin-left(auto); - @include margin-right(0); - display: block; margin-top: 0; margin-bottom: 10px; align-items: start; width: max-content; + + @include margin-left(auto); + @include margin-right(0); } my-recommended-videos { - @include padding-left(15px); - display: block; min-width: 250px; + + @include padding-left(15px); } my-video-comments { diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss index b1b42b517..6b78f310f 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.scss +++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss @@ -36,10 +36,10 @@ } my-actor-avatar { - @include margin-right(8px); - display: inline-block; vertical-align: text-top; + + @include margin-right(8px); } } diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 95bf67cd9..735917bcc 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -75,8 +75,6 @@ } .peertube-title { - @include disable-default-a-behaviour; - font-size: 20px; font-weight: $font-bold; color: inherit !important; @@ -85,22 +83,24 @@ overflow: hidden; padding: 0 0 0 10px; - .instance-name { - @include ellipsis; + @include disable-default-a-behaviour; + .instance-name { width: 100%; + @include ellipsis; + @media screen and (max-width: $mobile-view) { display: none; } } .icon.icon-logo { - @include margin-right(0.5rem); - display: inline-block; width: 23px; height: 24px; + + @include margin-right(0.5rem); } } diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 37bee4645..f2b5d0d4c 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -6,11 +6,11 @@ @include margin-right(25px); @media screen and (max-width: $mobile-view) { - @include margin-right(10px); - padding-right: 10px; padding-left: 10px; + @include margin-right(10px); + .icon.icon-upload { @include margin-right(0); } diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index 8ea2a16d9..0ab54d4e0 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss @@ -3,7 +3,6 @@ #search-video { @include peertube-input-text($search-input-width, 14px); - @include padding-left(10px); @include padding-right(40px); // For the search icon @@ -26,7 +25,9 @@ my-global-icon { @include icon(18px); - display: inline-flex; + & { + display: inline-flex; + } } } @@ -67,10 +68,10 @@ margin-bottom: .5rem; em { - @include margin-right(0.2rem); - font-weight: 600; font-style: normal; + + @include margin-right(0.2rem); } } } diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss index 09a3a0a32..d6bd1017e 100644 --- a/client/src/app/header/suggestion.component.scss +++ b/client/src/app/header/suggestion.component.scss @@ -2,10 +2,10 @@ @use '_mixins' as *; a { - @include disable-default-a-behaviour; - width: 100%; + @include disable-default-a-behaviour; + &, &:hover { color: pvar(--mainForegroundColor); @@ -23,9 +23,9 @@ a { } my-global-icon { - @include apply-svg-color(pvar(--mainForegroundColor)); - width: 17px; position: relative; top: -1px; + + @include apply-svg-color(pvar(--mainForegroundColor)); } diff --git a/client/src/app/hotkeys/hotkeys-cheat-sheet.component.scss b/client/src/app/hotkeys/hotkeys-cheat-sheet.component.scss index 8f3c543c2..bdfd4a30b 100644 --- a/client/src/app/hotkeys/hotkeys-cheat-sheet.component.scss +++ b/client/src/app/hotkeys/hotkeys-cheat-sheet.component.scss @@ -56,8 +56,6 @@ min-width: 90px; > span { - @include margin-right(5px); - display: inline-block; color: pvar(--mainBackgroundColor); background-color: pvar(--mainForegroundColor); @@ -67,13 +65,15 @@ box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb; padding: 5px 9px; font-size: 1em; + + @include margin-right(5px); } } .cfp-hotkeys-text { - @include padding-left(10px); - font-size: 1em; + + @include padding-left(10px); } .cfp-hotkeys-close { diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index b72a5be82..1bd06ac9d 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss @@ -2,11 +2,11 @@ @use '_mixins' as *; .help-to-translate { + border-radius: 0; + @include peertube-button-link; @include orange-button; - border-radius: 0; - &:focus-visible, &:focus { box-shadow: none; diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 99429d4d8..525dc8b58 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -23,10 +23,6 @@ ul { } .menu-link { - @include disable-default-a-behaviour; - @include padding-left($menu-lateral-padding); - @include padding-right(20px); - display: flex; align-items: center; @@ -38,6 +34,10 @@ ul { line-height: $line-height-normal; width: 100%; + @include disable-default-a-behaviour; + @include padding-left($menu-lateral-padding); + @include padding-right(20px); + &.active { background-color: rgba(255, 255, 255, 0.15); } @@ -48,12 +48,12 @@ ul { } my-global-icon { - @include apply-svg-color(#808080); - @include margin-right($menu-link-icon-margin-right); - display: flex; width: $menu-link-icon-size; height: $menu-link-icon-size; + + @include apply-svg-color(#808080); + @include margin-right($menu-link-icon-margin-right); } } @@ -67,8 +67,6 @@ ul { } nav { - @include ellipsis; - background-color: pvar(--menuBackgroundColor); color: pvar(--menuForegroundColor); @@ -79,6 +77,8 @@ nav { margin: 0; padding: 0; + @include ellipsis; + &:focus, &:hover { overflow-y: auto; @@ -122,6 +122,14 @@ my-notification { } .logged-in-more { + flex: 1; + min-width: 1px; + border-radius: 25px; + transition: all .1s ease-in-out; + cursor: pointer; + line-height: 1; + + @include margin-left(13px); @mixin display-hints($is-mobile: false) { background-color: rgba(255, 255, 255, 0.15); @@ -133,15 +141,6 @@ my-notification { } } - @include margin-left(13px); - - flex: 1; - min-width: 1px; - border-radius: 25px; - transition: all .1s ease-in-out; - cursor: pointer; - line-height: 1; - &.show { background-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); @@ -196,10 +195,10 @@ my-actor-avatar { } .logged-in-display-name { - @include disable-default-a-behaviour; - font-weight: $font-semibold; color: pvar(--menuForegroundColor); + + @include disable-default-a-behaviour; } .logged-in-username { @@ -224,11 +223,11 @@ my-actor-avatar { min-height: 35px; my-global-icon { - // Keep aligned with other icons - @include margin-left($additional-margin); - width: $icon-size; height: $icon-size; + + // Keep aligned with other icons + @include margin-left($additional-margin); } &.active, @@ -274,14 +273,14 @@ my-actor-avatar { margin-bottom: 15px; .block-title { - @include ellipsis; - @include margin-left(26px); - @include margin-right(15px); - text-transform: uppercase; font-weight: $font-bold; // Bold font-size: 13px; margin-bottom: 25px; + + @include ellipsis; + @include margin-left(26px); + @include margin-right(15px); } a, @@ -301,9 +300,6 @@ my-actor-avatar { .footer-links { a, button { - @include margin-right(8px); - @include disable-default-a-behaviour; - color: pvar(--menuForegroundColor); opacity: $footer-links-base-opacity; white-space: nowrap; @@ -311,6 +307,9 @@ my-actor-avatar { line-height: 1.4rem; font-weight: $font-semibold; + @include margin-right(8px); + @include disable-default-a-behaviour; + &:hover { opacity: $footer-links-base-opacity + .2; } @@ -318,12 +317,12 @@ my-actor-avatar { } .footer-copyleft a { - @include disable-default-a-behaviour; - color: pvar(--menuForegroundColor); opacity: $footer-links-base-opacity - .2; font-size: 0.85rem; + @include disable-default-a-behaviour; + &:hover { opacity: $footer-links-base-opacity; } @@ -343,12 +342,12 @@ my-actor-avatar { } .dropdown-item { - @include dropdown-with-icon-item; - cursor: pointer; display: flex; align-items: center; + @include dropdown-with-icon-item; + &:hover { .hover-display-toggle { display: none; @@ -390,10 +389,10 @@ my-global-icon { top: -1px; .playlist-icon { - @include margin-right(16px); - height: 24px; width: 24px; + + @include margin-right(16px); } &.channel-icon { diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss index 7f70aeff6..15057b6b6 100644 --- a/client/src/app/menu/notification.component.scss +++ b/client/src/app/menu/notification.component.scss @@ -15,30 +15,30 @@ .notification-inbox-popover, .notification-inbox-link a { - @include apply-svg-color(#808080); - transition: all .1s ease-in-out; border-radius: 25px; cursor: pointer; + @include apply-svg-color(#808080); + ::ng-deep svg { transition: color .1s ease-in-out; } &:hover, &:active { - @include apply-svg-color(#fff); - background-color: rgba(255, 255, 255, 0.15); + + @include apply-svg-color(#fff); } } .notification-inbox-popover.shown, .notification-inbox-link a.active { - @include apply-svg-color(#fff); - background-color: rgba(255, 255, 255, 0.28); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); + + @include apply-svg-color(#fff); } .notification-inbox-popover.hidden { @@ -105,10 +105,10 @@ } button { - @include peertube-button; - padding: 0; background: transparent; + + @include peertube-button; } a, @@ -157,11 +157,6 @@ top: 6px; left: 0; - @media screen and (max-width: $mobile-view) { - top: -4px; - left: -2px; - } - display: flex; align-items: center; justify-content: center; @@ -174,5 +169,10 @@ border-radius: 15px; width: 15px; height: 15px; + + @media screen and (max-width: $mobile-view) { + top: -4px; + left: -2px; + } } } diff --git a/client/src/app/modal/account-setup-warning-modal.component.scss b/client/src/app/modal/account-setup-warning-modal.component.scss index dbaf0f4e8..75ae7e21a 100644 --- a/client/src/app/modal/account-setup-warning-modal.component.scss +++ b/client/src/app/modal/account-setup-warning-modal.component.scss @@ -13,11 +13,11 @@ } .mascot { - @include margin-right(2rem); - display: block; width: 170px; height: 220px; + + @include margin-right(2rem); } .subtitle { diff --git a/client/src/app/modal/admin-welcome-modal.component.scss b/client/src/app/modal/admin-welcome-modal.component.scss index d19ff9bde..fec5e078d 100644 --- a/client/src/app/modal/admin-welcome-modal.component.scss +++ b/client/src/app/modal/admin-welcome-modal.component.scss @@ -13,10 +13,10 @@ } .mascot { - @include margin-right(2rem); - display: block; min-width: 170px; + + @include margin-right(2rem); } .subtitle { @@ -46,13 +46,13 @@ li { } .link-block { - @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor); padding: 10px; transition: background-color 0.2s ease-in; flex-basis: 33%; + @include disable-default-a-behaviour; + &:hover { background-color: rgba(0, 0, 0, 0.05); } diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss index 3372baf1a..0da8bf92a 100644 --- a/client/src/app/modal/confirm.component.scss +++ b/client/src/app/modal/confirm.component.scss @@ -6,6 +6,7 @@ } input[type=text] { - @include peertube-input-text(100%); display: block; + + @include peertube-input-text(100%); } diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss index bcc58c0d4..309e6e3ec 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss @@ -10,11 +10,11 @@ .abuse-messages { my-global-icon { - @include margin-left(3px); - width: 22px; position: relative; top: -2px; + + @include margin-left(3px); } } diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss index 3b43a4a4d..b0062d684 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss @@ -11,9 +11,9 @@ form { } textarea { - @include peertube-textarea(100%, 70px); - margin-top: 20px; + + @include peertube-textarea(100%, 70px); } .messages { diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss index 689c5873c..56d7376f5 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss @@ -11,11 +11,11 @@ } .actor-info-display-name { + font-weight: $font-bold; + @include peertube-word-wrap; @include font-size(1.25rem); - font-weight: $font-bold; - @media screen and (max-width: $small-view) { @include font-size(18px); } diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss index 9e4ff2654..371e6ed2b 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss @@ -6,20 +6,18 @@ } .actor-img-edit-button { - @include peertube-button-file(30px); - @include button-with-icon; + @include peertube-button-file(31px); + @include button-with-icon(19px, 0); @include orange-button; - display: flex; - justify-content: center; - cursor: pointer; + & { + display: flex; + justify-content: center; + cursor: pointer; + } input { width: 30px; height: 30px; } - - my-global-icon { - width: 19px; - } } diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss index e8ef478d9..b2dbcac7b 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss @@ -20,9 +20,9 @@ column-gap: 15px; a { - @include peertube-word-wrap; - color: pvar(--mainForegroundColor); + + @include peertube-word-wrap; } my-actor-avatar { @@ -36,17 +36,17 @@ } .actor-counters { - @include actor-counters(5px); - font-size: 13px; grid-column: 2; + + @include actor-counters(5px); } .description-html { - @include fade-text(30px, pvar(--channelBackgroundColor)); - max-height: 60px; grid-column: 2; + + @include fade-text(30px, pvar(--channelBackgroundColor)); } } diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss index 5830d6e18..966afefa0 100644 --- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss @@ -29,17 +29,17 @@ my-global-icon { $size: 19px; $margin: 2px; - @include margin-right($margin); - opacity: 1; width: $size; height: $size; - &.no-visible { - @include margin-right($size + $margin); + @include margin-right($margin); + &.no-visible { width: 0; height: 0; + + @include margin-right($size + $margin); } } diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss index dbb8845b9..4d7020403 100644 --- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss +++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss @@ -2,18 +2,18 @@ @use '_mixins' as *; input:not([type=submit]) { - @include peertube-input-text(340px); - max-width: 340px; width: 100%; display: block; + + @include peertube-input-text(340px); } textarea { - @include peertube-textarea(340px, 200px); - display: block; + + @include peertube-textarea(340px, 200px); } .peertube-select-container { diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index 1f30bf129..e765fb5c9 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss @@ -11,8 +11,6 @@ $input-border-radius: 3px; flex-direction: column; textarea { - @include peertube-textarea(100%, 150px); - background-color: pvar(--markdownTextareaBackgroundColor); font-family: monospace; @@ -20,6 +18,8 @@ $input-border-radius: 3px; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + + @include peertube-textarea(100%, 150px); } .nav-preview { diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss index ac9127677..cc6447eae 100644 --- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss +++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss @@ -30,8 +30,6 @@ } .recommended { - @include margin-left(.5rem); - align-self: baseline; display: inline-block; padding: 4px 6px; @@ -43,5 +41,7 @@ color: pvar(--inputPlaceholderColor); background-color: rgba(217, 225, 232, .1); border: 1px solid rgba(217, 225, 232, .5); + + @include margin-left(.5rem); } } diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss index a0afe1eee..2b6e37635 100644 --- a/client/src/app/shared/shared-forms/reactive-file.component.scss +++ b/client/src/app/shared/shared-forms/reactive-file.component.scss @@ -15,8 +15,8 @@ } .filename { - @include margin-left(5px); - font-weight: $font-semibold; + + @include margin-left(5px); } } diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss index 4de43077c..7e6496622 100644 --- a/client/src/app/shared/shared-forms/select/select-shared.component.scss +++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss @@ -45,10 +45,10 @@ ng-select ::ng-deep { } my-select-options + input { - @include peertube-input-text($form-base-input-width); - - @include margin-left(5px); display: block; + + @include peertube-input-text($form-base-input-width); + @include margin-left(5px); } .input-suffix { diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss index 5b5a6a5f6..345220b92 100644 --- a/client/src/app/shared/shared-forms/timestamp-input.component.scss +++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss @@ -27,7 +27,9 @@ p-inputmask { ::ng-deep input { @include peertube-input-text(80px); - padding: 3px 10px; + & { + padding: 3px 10px; + } } } } diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss index c5ad4b1f1..2bc2d52bd 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss @@ -15,8 +15,8 @@ } my-global-icon { - @include margin-right(15px); - line-height: 24px; + + @include margin-right(15px); } diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss index bfae0c112..d1ef506cd 100644 --- a/client/src/app/shared/shared-instance/instance-features-table.component.scss +++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss @@ -13,9 +13,9 @@ table { } &.sub-label { - @include padding-left(30px); - font-weight: $font-regular; + + @include padding-left(30px); } .more-info { diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss index 03a5a86ce..aaed9360a 100644 --- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss @@ -6,10 +6,10 @@ } .action-button { - @include peertube-button; - display: inline-block; + @include peertube-button; + &.button-styled { &.grey { @@ -89,8 +89,7 @@ .owner-moderator-privilege { margin: 0 !important; + width: 13px !important; @include margin-left(0.25rem !important); - - width: 13px !important; } diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss index 4300351eb..8ed7aa31d 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.scss +++ b/client/src/app/shared/shared-main/buttons/button.component.scss @@ -30,11 +30,11 @@ span[class$=-button] { width: 100%; // useful for ellipsis, allow to define a max-width on host component my-loader.displayed { - @include margin-right(3px); - display: inline-flex; vertical-align: middle; margin-top: -1px; + + @include margin-right(3px); } &.has-icon { diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss index 2aa176e1b..195f44164 100644 --- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss +++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss @@ -8,11 +8,11 @@ } my-global-icon { - @include apply-svg-color(pvar(--mainColor)); - width: 32px; align-self: flex-start; + @include apply-svg-color(pvar(--mainColor)); + + div { margin-left: 10px; text-align: center; @@ -20,9 +20,9 @@ my-global-icon { } .channels-settings-link { - @include peertube-button-link; - @include grey-button; - height: fit-content; margin-top: 10px; + + @include peertube-button-link; + @include grey-button; } diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss index 46f533f61..e9b9072d0 100644 --- a/client/src/app/shared/shared-main/misc/help.component.scss +++ b/client/src/app/shared/shared-main/misc/help.component.scss @@ -3,11 +3,11 @@ .help-tooltip-button { my-global-icon { - @include apply-svg-color(pvar(--greyForegroundColor)); - width: 17px; position: relative; top: -1px; + + @include apply-svg-color(pvar(--greyForegroundColor)); } } @@ -26,9 +26,9 @@ } ul { - @include padding-left(20px); - margin-bottom: 0; + + @include padding-left(20px); } } } 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 b06418568..5b54e324f 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 @@ -45,8 +45,6 @@ button { .modal-body { a { - @include disable-default-a-behaviour; - color: currentColor; box-sizing: border-box; display: block; @@ -56,6 +54,8 @@ button { text-transform: unset; width: 100%; + @include disable-default-a-behaviour; + &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss index 47d6d8d01..26062b793 100644 --- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss +++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss @@ -17,9 +17,9 @@ ul { } .dropdown-menu .dropdown-item { - @include dropdown-with-icon-item; - top: -1px; + + @include dropdown-with-icon-item; } .sub-menu.no-scroll { @@ -31,9 +31,11 @@ ul { display: none; } - a { - @include disable-default-a-behaviour; + my-global-icon { + @include margin-right(10px); + } + a { color: currentColor; box-sizing: border-box; display: block; @@ -43,6 +45,8 @@ ul { text-transform: unset; width: 100%; + @include disable-default-a-behaviour; + &.active { color: pvar(--mainBackgroundColor) !important; background-color: pvar(--mainHoverColor); 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 f3e86ce78..477e43b43 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 @@ -14,9 +14,7 @@ .progress { @include disable-outline; @include button-focus(pvar(--mainColorLightest)); - @include progressbar; - - height: 2rem; + @include progressbar($height: 2rem); span { align-self: center; diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.scss b/client/src/app/shared/shared-moderation/account-block-badges.component.scss index 301d8305e..95c84db0f 100644 --- a/client/src/app/shared/shared-moderation/account-block-badges.component.scss +++ b/client/src/app/shared/shared-moderation/account-block-badges.component.scss @@ -2,7 +2,7 @@ @use '_mixins' as *; .pt-badge { - @include margin-right(10px); - font-size: 12px; + + @include margin-right(10px); } diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss index 6aa277260..e983e812d 100644 --- a/client/src/app/shared/shared-moderation/moderation.scss +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -10,13 +10,13 @@ justify-content: space-between; .moderation-expanded-label { - @include margin-right(5px); - font-weight: $font-semibold; display: inline-block; vertical-align: top; text-align: end; min-width: 100px; + + @include margin-right(5px); } .moderation-expanded-text { @@ -48,10 +48,10 @@ my-action-dropdown.show { .table-comment-link, .table-account-link { - @include disable-outline; - color: var(--mainForegroundColor); + @include disable-outline; + ::ng-deep p:last-child { margin: 0; } 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 77a77e81d..ada0fbb6d 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss @@ -2,9 +2,10 @@ @use '_mixins' as *; a { - @include disable-default-a-behaviour; display: inline-block; + @include disable-default-a-behaviour; + &, &:hover { color: pvar(--mainForegroundColor); diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index 2f9f0d462..c724342b3 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html @@ -11,7 +11,7 @@
-
Share the playlist
+
Share the playlist
This playlist is private so you won't be able to share it with external users
@@ -97,7 +97,7 @@
-
Share the video
+
Share the video
This video is private so you won't be able to share it with external users
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss index e0676ce07..4b2f81253 100644 --- a/client/src/app/shared/shared-tables/video-cell.component.scss +++ b/client/src/app/shared/shared-tables/video-cell.component.scss @@ -4,29 +4,31 @@ @use '_miniature' as *; .table-video-link { - @include disable-outline; - position: relative; top: 3px; + + @include disable-outline; } .table-video { display: inline-flex; .table-video-image { - $image-height: 45px; - @include miniature-thumbnail; @include margin-right(0.5rem); - height: $image-height; - width: #{math.div(16, 9) * $image-height}; - border-radius: 2px; - border: 0; - background: transparent; - display: inline-flex; - justify-content: center; - position: relative; + & { + $image-height: 45px; + + height: $image-height; + width: #{math.div(16, 9) * $image-height}; + border-radius: 2px; + border: 0; + background: transparent; + display: inline-flex; + justify-content: center; + position: relative; + } img { height: 100%; @@ -39,8 +41,6 @@ } .table-video-image-label { - @include static-thumbnail-overlay; - position: absolute; border-radius: 3px; font-size: 10px; @@ -48,6 +48,8 @@ line-height: 1.3; bottom: 2px; right: 2px; + + @include static-thumbnail-overlay; } } 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 459539924..20b07f839 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -23,13 +23,13 @@ .video-thumbnail-label-overlay, .video-thumbnail-duration-overlay, .video-thumbnail-live-overlay { - @include static-thumbnail-overlay; - border-radius: 3px; font-size: 12px; font-weight: $font-semibold; line-height: 1.1; z-index: z(miniature); + + @include static-thumbnail-overlay; } .video-thumbnail-label-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-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss index da8202594..4114b8079 100644 --- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss @@ -2,15 +2,15 @@ @use '_mixins' as *; input[type=submit] { - @include peertube-button; - @include orange-button; - display: block; margin-top: 15px; + + @include peertube-button; + @include orange-button; } .peertube-select-container { - @include peertube-select-container(340px); - margin-bottom: 30px; + + @include peertube-select-container(340px); } diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss index 163c899d3..1917d5110 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss @@ -2,10 +2,10 @@ @use '_mixins' as *; input[type=submit] { + margin-top: 15px; + @include peertube-button; @include orange-button; - - margin-top: 15px; } .peertube-select-container { @@ -13,7 +13,7 @@ input[type=submit] { } my-select-languages { - @include responsive-width(340px); - display: block; + + @include responsive-width(340px); } 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 a39ce90e3..73dcdb26f 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 @@ -2,10 +2,10 @@ @use '_mixins' as *; .btn-group-subscribe { - @include peertube-button; - padding: 0; + @include peertube-button; + button.dropdown-toggle { font-size: $button-font-size; line-height: 1.2; @@ -55,8 +55,9 @@ &.subscribe-button { .btn { - @include orange-button; font-weight: 600; + + @include orange-button; } span.followers-count { @@ -66,9 +67,9 @@ &.unsubscribe-button { .btn { - @include grey-button; - font-weight: 600; + + @include grey-button; } } diff --git a/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.scss b/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.scss index 875ed2602..3cab61692 100644 --- a/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.scss +++ b/client/src/app/shared/shared-video-comment/video-comment-list-admin-owner.component.scss @@ -15,9 +15,9 @@ my-global-icon { } a { - @include ellipsis; - color: pvar(--mainForegroundColor); + + @include ellipsis; } } diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss index a0cb30897..09209f3fe 100644 --- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss +++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss @@ -14,9 +14,9 @@ p-autocomplete { } .pt-badge { - @include margin-right(5px); - font-size: 13px; + + @include margin-right(5px); } .journal-session { diff --git a/client/src/app/shared/shared-video-miniature/download/video-download.component.scss b/client/src/app/shared/shared-video-miniature/download/video-download.component.scss index 73b309028..0d1735105 100644 --- a/client/src/app/shared/shared-video-miniature/download/video-download.component.scss +++ b/client/src/app/shared/shared-video-miniature/download/video-download.component.scss @@ -8,11 +8,11 @@ } my-global-icon[iconName=shield] { - @include margin-left(10px); - width: 16px; position: relative; top: -2px; + + @include margin-left(10px); } .modal-footer { @@ -26,11 +26,11 @@ } .peertube-select-container.title-select { - @include peertube-select-container(auto); - display: inline-block; margin-left: 10px; vertical-align: top; + + @include peertube-select-container(auto); } #dropdown-download-type { diff --git a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss index 297492e2f..ee5445dd1 100644 --- a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss +++ b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.scss @@ -28,12 +28,12 @@ margin-bottom: 12px; > span:first-child { - @include padding-right(5px); - min-width: 142px; display: inline-block; color: pvar(--greyForegroundColor); font-weight: $font-bold; + + @include padding-right(5px); } } @@ -41,8 +41,8 @@ margin-top: 20px; .peertube-radio-container { - @include margin-right(30px); - display: inline-block; + + @include margin-right(30px); } } diff --git a/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.scss b/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.scss index c41485110..f4726517b 100644 --- a/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.scss +++ b/client/src/app/shared/shared-video-miniature/download/video-generate-download.component.scss @@ -2,8 +2,8 @@ @use '_mixins' as *; .peertube-radio-container strong { - @include margin-right(0.5rem); - display: inline-block; min-width: 80px; + + @include margin-right(0.5rem); } diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss index 27a0d3df6..c5785befb 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss @@ -44,13 +44,13 @@ } .pastille { - @include margin-right(15px); - border-radius: 24px; padding: 4px 15px; margin-bottom: 15px; cursor: pointer; + @include margin-right(15px); + &:focus-visible { outline: pvar(--mainColor) auto 1px; } @@ -95,11 +95,11 @@ } > .remove-button { - @include margin-left(10px); - border: 0; padding: 0; + @include margin-left(10px); + my-global-icon { width: 16px; color: pvar(--greyForegroundColor); 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 8a4a7e8d6..fd86c162e 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 @@ -26,13 +26,13 @@ my-actor-avatar { .video-miniature-account, .video-miniature-channel { - @include disable-default-a-behaviour; - @include ellipsis; - display: block; font-size: 13px; color: pvar(--greyForegroundColor); + @include disable-default-a-behaviour; + @include ellipsis; + &:hover { color: $grey-foreground-hover-color; } @@ -160,11 +160,11 @@ my-actor-avatar { } my-video-thumbnail { - @include margin-right(1rem); - min-width: var(--rowThumbnailWidth); max-width: var(--rowThumbnailWidth); height: var(--rowThumbnailHeight); + + @include margin-right(1rem); } .video-miniature-name { diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss index d1a35f899..dcbe4fd5b 100644 --- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss +++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss @@ -38,13 +38,13 @@ $margin-top: 2rem; } my-feed { - @include margin-left(5px); - display: inline-block; width: 16px; color: pvar(--mainColor); position: relative; top: -2px; + + @include margin-left(5px); } } @@ -83,10 +83,10 @@ my-global-icon[iconname=live] { @media screen and (max-width: $mobile-view) { my-video-filters-header { + display: inline-block; + @include margin-left(1rem); @include margin-right(1rem); - - display: inline-block; } .date-title { diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss index 3defaa7d0..791241292 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss @@ -12,9 +12,9 @@ display: flex; .action-button { - @include margin-left(55px); - display: block; + + @include margin-left(55px); } } @@ -31,11 +31,11 @@ } .checkbox-container { - @include margin-right(20px); - @include margin-left(12px); - display: flex; align-items: center; + + @include margin-right(20px); + @include margin-left(12px); } my-video-miniature { 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 25c7b4525..78bba9a9b 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 @@ -53,9 +53,9 @@ width: 100%; my-peertube-checkbox { - @include margin-right(10px); - align-self: center; + + @include margin-right(10px); } .display-name { @@ -68,21 +68,21 @@ } .optional-row-icon { - @include margin-left(0.5rem); - display: flex; align-items: center; font-size: 14px; cursor: pointer; - my-global-icon { - @include apply-svg-color(#333); - @include margin-right(0); + @include margin-left(0.5rem); + my-global-icon { position: relative; top: 1px; width: 19px; height: 19px; + + @include apply-svg-color(#333); + @include margin-right(0); } &:hover { @@ -127,21 +127,19 @@ cursor: pointer; my-global-icon { - @include apply-svg-color(#333); - @include margin-right(4px); - position: relative; left: -1px; top: -1px; width: 21px; height: 21px; + + @include apply-svg-color(#333); + @include margin-right(4px); } } input[type=text] { @include peertube-input-text(200px); - - display: block; } input[type=submit] { 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 5e7e2b436..a70b9e7d0 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 @@ -17,9 +17,9 @@ my-video-thumbnail { my-video-thumbnail, .fake-thumbnail { - @include margin-right(10px); - display: flex; // Avoids an issue with line-height that adds space below the element + + @include margin-right(10px); } .video { @@ -34,9 +34,9 @@ my-video-thumbnail, } a { - @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor); + + @include disable-default-a-behaviour; } > a { @@ -51,22 +51,22 @@ my-video-thumbnail, min-width: 25px; my-global-icon { - @include apply-svg-color(pvar(--greyForegroundColor)); - width: 17px; position: relative; left: -2px; + + @include apply-svg-color(pvar(--greyForegroundColor)); } } } .more, my-edit-button { - @include margin-left(auto); - justify-self: flex-end; cursor: pointer; min-width: 24px; + + @include margin-left(auto); } .more { @@ -107,11 +107,11 @@ my-video-thumbnail, } .video-info-name { - @include ellipsis; - font-size: 18px; font-weight: $font-semibold; display: inline-block; + + @include ellipsis; } .video-info { @@ -149,18 +149,18 @@ my-video-thumbnail, .dropdown-menu { .dropdown-item { - @include dropdown-with-icon-item; - cursor: pointer; + + @include dropdown-with-icon-item; } .timestamp-options { - @include padding-left(35px); - padding-top: 0; margin-top: 5px; margin-bottom: 15px; + @include padding-left(35px); + > div { display: flex; align-items: center; @@ -172,10 +172,10 @@ my-video-thumbnail, } input { + margin-top: 10px; + @include peertube-button; @include orange-button; - - margin-top: 10px; } } } 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 d14d02d0b..c9a6427c8 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 @@ -24,17 +24,20 @@ @include miniature-thumbnail; .miniature-playlist-info-overlay { - @include static-thumbnail-overlay; - position: absolute; right: 0; bottom: 0; height: 100%; padding: 0 10px; - display: flex; - align-items: center; font-size: 14px; font-weight: $font-semibold; + + @include static-thumbnail-overlay; + + & { + display: flex; + align-items: center; + } } } @@ -45,10 +48,10 @@ } .by { - @include disable-default-a-behaviour; - display: block; color: pvar(--greyForegroundColor); + + @include disable-default-a-behaviour; } .privacy-date { @@ -66,10 +69,10 @@ } .description { - @include peertube-word-wrap; - margin-top: 10px; color: pvar(--greyForegroundColor); + + @include peertube-word-wrap; } } @@ -81,10 +84,10 @@ } .miniature-thumbnail { - @include block-ratio($selector: '::ng-deep a'); - margin-top: 10px; margin-bottom: 5px; + + @include block-ratio($selector: '::ng-deep a'); } } @@ -99,11 +102,11 @@ } .miniature-thumbnail { - @include margin-right(1rem); - min-width: var(--rowThumbnailWidth); max-width: var(--rowThumbnailWidth); height: var(--rowThumbnailHeight); + + @include margin-right(1rem); } } diff --git a/client/src/app/shared/standalone-notifications/user-notifications.component.scss b/client/src/app/shared/standalone-notifications/user-notifications.component.scss index 8f4d4c7c1..ac1580540 100644 --- a/client/src/app/shared/standalone-notifications/user-notifications.component.scss +++ b/client/src/app/shared/standalone-notifications/user-notifications.component.scss @@ -21,21 +21,21 @@ } my-global-icon { + width: 24px; + @include apply-svg-color(#{pvar(--mainForegroundColor)}); @include margin-right(11px); @include margin-left(3px); - - width: 24px; } .avatar { - @include margin-right(10px); - width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 5px; + + @include margin-right(10px); } .message { @@ -47,12 +47,12 @@ } .from-date { - @include padding-left(5px); - @include margin-left(auto); - font-size: 0.85em; color: pvar(--greyForegroundColor); min-width: 70px; text-align: end; + + @include padding-left(5px); + @include margin-left(auto); } } diff --git a/client/src/app/shared/standalone-upload/upload-progress.component.scss b/client/src/app/shared/standalone-upload/upload-progress.component.scss index 609a31ed3..99fd1e026 100644 --- a/client/src/app/shared/standalone-upload/upload-progress.component.scss +++ b/client/src/app/shared/standalone-upload/upload-progress.component.scss @@ -7,12 +7,9 @@ margin-bottom: 40px; .progress { - @include progressbar; - flex-grow: 1; - height: 30px; - font-size: 14px; - background-color: rgba(11, 204, 41, 0.16); + + @include progressbar($height: 30px, $font-size: 14px, $background-color: rgba(11, 204, 41, 0.16)); .progress-bar { background-color: $green; @@ -21,9 +18,9 @@ font-weight: $font-semibold; span { - @include margin-left(13px); - color: pvar(--mainBackgroundColor); + + @include margin-left(13px); } } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 2732046d5..dba1eb8bb 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,21 +1,15 @@ @use 'sass:math'; @use 'sass:color'; - @use '_variables' as *; @use '_bootstrap-variables' as *; @use '_mixins' as *; @use '_icons' as *; - @use '_fonts'; - @use './custom-markup'; @use './ng-select'; - @use './bootstrap'; @use './primeng-custom'; - @use './z-index'; - @use './class-helpers/index.scss'; /* clears the ‘X’ from Chrome */ @@ -75,6 +69,7 @@ body { color: pvar(--mainForegroundColor); background-color: pvar(--mainBackgroundColor); font-size: 1rem; + // On desktop browsers, make sure vertical scroll bar is always visible // Allow to disable the scrollbar instead of hide it when the content fit the body // And not move the content and header horizontally sticked to right when the content is updating @@ -106,7 +101,7 @@ strong { } input[readonly] { - /* Force blank on readonly inputs */ + // Force blank on readonly inputs background-color: pvar(--inputBackgroundColor) !important; } @@ -117,10 +112,10 @@ textarea { } button { - @include disable-outline; - background: unset; color: pvar(--mainForegroundColor); + + @include disable-outline; } label { @@ -186,8 +181,9 @@ code { --horizontalMarginContent: #{$expanded-horizontal-margins}; --mainColWidth: 100vw; - @include margin-left(0); width: 100%; + + @include margin-left(0); } &.lock-scroll .main-row > router-outlet + * { /* stylelint-disable-line selector-max-compound-selectors */ diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index bfae0a58c..0cae00fe0 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,14 +1,11 @@ @use '_variables' as *; @use '_mixins' as *; - @import './_bootstrap-variables'; - @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/maps'; @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/utilities'; - @import 'bootstrap/scss/root'; @import 'bootstrap/scss/reboot'; @import 'bootstrap/scss/type'; @@ -27,7 +24,6 @@ @import 'bootstrap/scss/tooltip'; @import 'bootstrap/scss/popover'; @import 'bootstrap/scss/spinners'; - @import 'bootstrap/scss/helpers'; @import 'bootstrap/scss/utilities/api'; @@ -144,17 +140,17 @@ body { margin-bottom: 5px; .modal-title { - @include margin-right(auto); - font-size: 20px; font-weight: $font-semibold; + + @include margin-right(auto); } my-global-icon { - @include icon(22px); - opacity: 0.5; + @include icon(22px); + &:hover { opacity: 0.8; } @@ -310,10 +306,10 @@ body { } > * { - @include peertube-button-link; - box-shadow: none !important; + @include peertube-button-link; + &:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; diff --git a/client/src/sass/class-helpers/_forms.scss b/client/src/sass/class-helpers/_forms.scss index 4e5c98aa8..3bfd5b727 100644 --- a/client/src/sass/class-helpers/_forms.scss +++ b/client/src/sass/class-helpers/_forms.scss @@ -43,10 +43,10 @@ } .form-group-description { - @include muted; - font-size: 14px; margin-top: 10px; + + @include muted; } // Useful with a "reset" button @@ -63,11 +63,11 @@ label + .form-group-description, } .reset-button { + height: auto; + @include peertube-button; @include grey-button; - height: auto; - &.reset-button-small { font-size: 80%; padding: 2px 5px; diff --git a/client/src/sass/class-helpers/_layout.scss b/client/src/sass/class-helpers/_layout.scss index e404fe8f5..0b7319b4f 100644 --- a/client/src/sass/class-helpers/_layout.scss +++ b/client/src/sass/class-helpers/_layout.scss @@ -1,5 +1,4 @@ @use 'sass:color'; - @use '_variables' as *; @use '_mixins' as *; diff --git a/client/src/sass/class-helpers/_menu.scss b/client/src/sass/class-helpers/_menu.scss index a12012d60..18aaba7b2 100644 --- a/client/src/sass/class-helpers/_menu.scss +++ b/client/src/sass/class-helpers/_menu.scss @@ -2,9 +2,6 @@ @use '_mixins' as *; .sub-menu-entry { - @include disable-default-a-behaviour; - @include margin-right(55px); - border: 0; padding: 0; opacity: 0.7; @@ -15,6 +12,9 @@ white-space: nowrap; font-size: 1rem; + @include disable-default-a-behaviour; + @include margin-right(55px); + &.active { border-bottom-color: pvar(--mainColor); } @@ -45,8 +45,6 @@ } .title-page { - @include margin-right(55px); - margin-top: 30px; margin-bottom: 25px; @@ -55,11 +53,13 @@ font-weight: $font-semibold; font-size: 1.25rem; - a { - @include disable-default-a-behaviour; + @include margin-right(55px); + a { color: inherit; + @include disable-default-a-behaviour; + &:hover { color: inherit; opacity: 0.8; @@ -100,11 +100,11 @@ @include padding-left(0.5rem); &::before { - @include padding-right(0.5rem); - display: inline-block; color: #6c757d; content: '/'; + + @include padding-right(0.5rem); } } diff --git a/client/src/sass/class-helpers/_text.scss b/client/src/sass/class-helpers/_text.scss index 9aff2a88a..1aa913447 100644 --- a/client/src/sass/class-helpers/_text.scss +++ b/client/src/sass/class-helpers/_text.scss @@ -1,5 +1,4 @@ @use 'sass:color'; - @use '_badges' as *; @use '_icons' as *; @use '_variables' as *; diff --git a/client/src/sass/include/_account-channel-page.scss b/client/src/sass/include/_account-channel-page.scss index 9e75a4441..1c7addc04 100644 --- a/client/src/sass/include/_account-channel-page.scss +++ b/client/src/sass/include/_account-channel-page.scss @@ -16,22 +16,22 @@ } @mixin show-more-description { - @include margin(10px, auto, 45px); - color: pvar(--mainColor); cursor: pointer; + + @include margin(10px, auto, 45px); } @mixin avatar-row-responsive ($img-margin, $grey-font-size) { - @include margin-bottom(2rem); - display: flex; grid-column: 1; - > div { - @include margin-left($img-margin); + @include margin-bottom(2rem); + > div { min-width: 1px; + + @include margin-left($img-margin); } .actor-info { @@ -44,17 +44,17 @@ } .actor-display-name { - @include peertube-word-wrap; - display: flex; flex-wrap: wrap; + + @include peertube-word-wrap; } h1 { - @include font-size(2rem); - font-weight: $font-bold; margin: 0; + + @include font-size(2rem); } .actor-handle { @@ -63,9 +63,9 @@ .actor-handle, .actor-counters { - @include font-size($grey-font-size); - color: pvar(--greyForegroundColor); + + @include font-size($grey-font-size); } .actor-counters > *:not(:last-child)::after { diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index bf73b52dc..f57f5113f 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss @@ -13,12 +13,12 @@ } .actor-names { - @include disable-default-a-behaviour; - width: fit-content; display: flex; align-items: baseline; color: pvar(--mainForegroundColor); + + @include disable-default-a-behaviour; } .actor-display-name { @@ -27,19 +27,19 @@ } .actor-name { - @include margin-left(5px); - font-size: 14px; color: $grey-actor-name; + + @include margin-left(5px); } .actor-owner { - @include disable-default-a-behaviour; - color: pvar(--mainForegroundColor); display: flex; align-items: center; + @include disable-default-a-behaviour; + span:hover { opacity: 0.8; } diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss index 30224b7fe..f3ea288c1 100644 --- a/client/src/sass/include/_bootstrap-variables.scss +++ b/client/src/sass/include/_bootstrap-variables.scss @@ -1,5 +1,4 @@ @use 'sass:map'; - @use '_variables' as *; $modal-footer-border-width: 0; diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss index 08a0c02e3..9e961d003 100644 --- a/client/src/sass/include/_icons.scss +++ b/client/src/sass/include/_icons.scss @@ -12,55 +12,67 @@ } @mixin chevron-right ($size, $border-width) { + left: 0; + @include chevron($size, $border-width); - left: 0; - transform: rotate(45deg); + & { + transform: rotate(45deg); + } } @mixin chevron-right-default { - @include chevron-right(0.55rem, 0.15rem); - margin: 0 8px; + + @include chevron-right(0.55rem, 0.15rem); } @mixin chevron-down ($size, $border-width) { + bottom: 0.15em; + @include chevron($size, $border-width); - bottom: 0.15em; - transform: rotate(135deg); + & { + transform: rotate(135deg); + } } @mixin chevron-down-default { - @include chevron-down(0.55rem, 0.15rem); - margin: 0 8px; + + @include chevron-down(0.55rem, 0.15rem); } @mixin chevron-up ($size, $border-width) { + top: 0.15em; + @include chevron($size, $border-width); - top: 0.15em; - transform: rotate(-45deg); + & { + transform: rotate(-45deg); + } } @mixin chevron-up-default { - @include chevron-up(0.55rem, 0.15rem); - margin: 0 8px; + + @include chevron-up(0.55rem, 0.15rem); } @mixin chevron-left ($size, $border-width) { + left: 0.25em; + @include chevron($size, $border-width); - left: 0.25em; - transform: rotate(-135deg); + & { + transform: rotate(-135deg); + } } @mixin chevron-left-default { - @include chevron-left(0.55rem, 0.15rem); - margin: 0 8px; + + @include chevron-left(0.55rem, 0.15rem); } // --------------------------------------------------------------------------- diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 7159a336d..fd1d7f535 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -2,21 +2,21 @@ @use '_mixins' as *; @mixin miniature-name { - @include peertube-word-wrap(false); - font-size: 1.1em; transition: color 0.2s; font-weight: $font-semibold; color: pvar(--mainForegroundColor); + @include peertube-word-wrap(false); + &:hover { text-decoration: none; } &.blur-filter { - @include padding-left(4px); - filter: blur(3px); + + @include padding-left(4px); } } @@ -25,8 +25,6 @@ $play-overlay-height: 26px; $play-overlay-width: 18px; - @include disable-outline; - display: flex; flex-direction: column; position: relative; @@ -37,6 +35,8 @@ background-color: #ececec; transition: filter $play-overlay-transition; + @include disable-outline; + .play-overlay { position: absolute; right: 0; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 220f2a1d9..e0a7a9f8e 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -1,8 +1,6 @@ @use 'sass:math'; @use 'sass:color'; - @use '_variables' as *; - @import '_bootstrap-mixins'; @mixin disable-default-a-behaviour { @@ -87,12 +85,9 @@ } @mixin peertube-input-text($width, $font-size: $form-input-font-size) { - @include rounded-line-height-1-5($font-size); - font-size: $font-size; padding: 3px 15px; - display: inline-block; width: $width; max-width: $width; color: pvar(--inputForegroundColor); @@ -100,6 +95,8 @@ border: 1px solid pvar(--inputBorderColor); border-radius: 3px; + @include rounded-line-height-1-5($font-size); + &::placeholder { color: pvar(--inputPlaceholderColor); } @@ -114,12 +111,12 @@ } @mixin peertube-textarea ($width, $height) { - @include peertube-input-text($width); - color: pvar(--textareaForegroundColor) !important; background-color: pvar(--textareaBackgroundColor) !important; height: $height; padding: 5px 15px; + + @include peertube-input-text($width); } @mixin orange-button { @@ -150,12 +147,12 @@ } @mixin orange-button-inverted { - @include button-focus(pvar(--mainColorLightest)); - padding: 2px 13px; border: 2px solid pvar(--mainColor); font-weight: $font-semibold; + @include button-focus(pvar(--mainColorLightest)); + &, &:active, &:focus { @@ -181,11 +178,11 @@ } @mixin tertiary-button { - @include button-focus($grey-button-outline-color); - color: pvar(--greyForegroundColor); background-color: transparent; + @include button-focus($grey-button-outline-color); + &[disabled], .disabled { cursor: default; @@ -197,11 +194,11 @@ } @mixin grey-button { - @include button-focus($grey-button-outline-color); - background-color: pvar(--greyBackgroundColor); color: pvar(--greyForegroundColor); + @include button-focus($grey-button-outline-color); + &:hover, &:active, &:focus, @@ -225,11 +222,11 @@ $color: color.adjust($color: #c54130, $lightness: 10%); $text: #fff6f5; - @include button-focus(color.scale($color, $alpha: -95%)); - background-color: $color; color: $text; + @include button-focus(color.scale($color, $alpha: -95%)); + &:hover, &:active, &:focus, @@ -249,8 +246,6 @@ } @mixin peertube-button { - @include rounded-line-height-1-5($button-font-size); - padding: 4px 13px; border: 0; @@ -264,6 +259,8 @@ font-size: $button-font-size; + @include rounded-line-height-1-5($button-font-size); + my-global-icon + * { @include margin-right(4px); @include margin-left(4px); @@ -283,35 +280,35 @@ } @mixin peertube-button-link { + display: inline-block; + @include disable-default-a-behaviour; @include peertube-button; - - display: inline-block; } @mixin peertube-button-big-link { + display: inline-block; + @include disable-default-a-behaviour; @include peertube-button-big; - - display: inline-block; } @mixin peertube-button-outline { - @include disable-default-a-behaviour; - @include peertube-button; - display: inline-block; border: 1px solid; + + @include disable-default-a-behaviour; + @include peertube-button; } @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { my-global-icon { - @include margin-right($margin-right); - position: relative; display: inline-block; width: $width; top: $top; + + @include margin-right($margin-right); } } @@ -338,10 +335,10 @@ } @mixin peertube-button-file ($width) { + width: $width; + @include peertube-file; @include peertube-button; - - width: $width; } @mixin icon ($size) { @@ -403,8 +400,6 @@ } select { - @include rounded-line-height-1-5($form-input-font-size); - font-size: $form-input-font-size; padding: 3px 35px 3px 12px; @@ -415,6 +410,8 @@ text-overflow: ellipsis; color: pvar(--mainForegroundColor); + @include rounded-line-height-1-5($form-input-font-size); + &:focus { outline: none; } @@ -562,11 +559,11 @@ } + span + span { - @include margin-left(5px); - font-weight: $font-regular; cursor: pointer; display: inline; + + @include margin-left(5px); } &[disabled] + span, @@ -622,21 +619,21 @@ padding: 6px 15px; my-global-icon { - @include margin-right(10px); - width: 22px; opacity: .7; position: relative; top: -2px; + + @include margin-right(10px); } } -@mixin progressbar($small: false) { - background-color: pvar(--greyBackgroundColor); +@mixin progressbar($small: false, $height: 1rem, $font-size: 0.75rem, $background-color: pvar(--greyBackgroundColor)) { + background-color: $background-color; display: flex; - height: 1rem; + height: $height; overflow: hidden; - font-size: 0.75rem; + font-size: $font-size; border-radius: 0.25rem; position: relative; @@ -709,11 +706,11 @@ white-space: nowrap; my-actor-avatar { - @include margin-right(.2rem); - border-radius: 5rem; width: var(--avatar-size); height: var(--avatar-size); + + @include margin-right(.2rem); } &.two-lines { @@ -764,18 +761,18 @@ > span > my-global-icon, > my-global-icon { - @include margin-right(10px); - width: 24px; height: 24px; position: relative; top: -2px; + + @include margin-right(10px); } .pt-badge { - @include margin-left(7px); - vertical-align: top; + + @include margin-left(7px); } } } diff --git a/client/src/sass/include/_nav.scss b/client/src/sass/include/_nav.scss index 5fd32df45..e4311c1c1 100644 --- a/client/src/sass/include/_nav.scss +++ b/client/src/sass/include/_nav.scss @@ -15,14 +15,14 @@ } a.nav-link { - @include disable-default-a-behaviour; - margin-bottom: -$border-width; height: $nav-link-height !important; padding: 0 30px !important; border: $border-width $border-type transparent; + @include disable-default-a-behaviour; + span { border-bottom: 2px solid transparent; } diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss index ba7905c89..57db4c1af 100644 --- a/client/src/sass/ng-select.scss +++ b/client/src/sass/ng-select.scss @@ -1,6 +1,5 @@ @use 'sass:math'; @use 'sass:color'; - @use '_variables' as *; @use '_mixins' as *; @@ -38,10 +37,10 @@ $ng-select-input-text: pvar(--mainForegroundColor); @import '@ng-select/ng-select/scss/default.theme'; .ng-select { - @include rounded-line-height-1-5($ng-select-value-font-size); - font-size: $ng-select-value-font-size; + @include rounded-line-height-1-5($ng-select-value-font-size); + &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { border-color: $ng-select-border !important; @@ -88,10 +87,10 @@ $ng-select-input-text: pvar(--mainForegroundColor); @include padding-left(12px); .ng-value { - @include margin-left(12px); - background-color: pvar(--mainColorLightest); + @include margin-left(12px); + .ng-value-icon { border: 0 !important; } diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss index ae048af07..76884b49c 100644 --- a/client/src/sass/player/_player-variables.scss +++ b/client/src/sass/player/_player-variables.scss @@ -1,5 +1,4 @@ @use 'sass:color'; - @use 'bootstrap/scss/functions' as *; $primary-foreground-color: #fff; diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss index 629a677b1..fe06086c8 100644 --- a/client/src/sass/player/bezels.scss +++ b/client/src/sass/player/bezels.scss @@ -11,8 +11,6 @@ } .vjs-bezel { - @include margin-left(-26px); - position: absolute; left: 50%; top: 50%; @@ -24,6 +22,8 @@ border-radius: 26px; animation: bezels-fadeout .5s linear 1 normal forwards; pointer-events: none; + + @include margin-left(-26px); } .vjs-bezel-icon { diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index fef0d30c0..b5d152901 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -33,10 +33,6 @@ $context-menu-width: 350px; } [class^='vjs-icon-'] { - $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; - - @include margin-right(0.8rem !important); - display: inline-flex; position: relative; top: 2px; @@ -48,6 +44,10 @@ $context-menu-width: 350px; -webkit-mask-size: cover; mask-size: cover; + @include 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'); diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss index 5f7ccbe28..0a437a55d 100644 --- a/client/src/sass/player/control-bar.scss +++ b/client/src/sass/player/control-bar.scss @@ -87,14 +87,14 @@ $chapter-marker-size: 9px; } .vjs-progress-control { - @include margin-left($progress-margin); - position: absolute; top: $control-bar-slider-top; z-index: 100; // On top of the progress bar width: calc(100% - (2 * #{$progress-margin})); height: 20px; + @include margin-left($progress-margin); + .vjs-slider { margin: 0; border-radius: 0; @@ -142,11 +142,11 @@ $chapter-marker-size: 9px; } .vjs-play-control { - @include disable-outline; - cursor: pointer; width: $control-bar-button-width; + @include disable-outline; + .vjs-icon-placeholder::before { font-size: $control-bar-play-font-size; line-height: unset; @@ -159,19 +159,19 @@ $chapter-marker-size: 9px; line-height: inherit; &.vjs-current-time { - @include margin-left(.5em); - font-size: $control-bar-font-size; display: inline-block; padding: 0; + @include margin-left(.5em); + .vjs-current-time-display { line-height: calc(#{$control-bar-height} - 1px); &::after { - @include margin(0, 1px, 0, 2px); - content: '/'; + + @include margin(0, 1px, 0, 2px); } } } @@ -219,14 +219,14 @@ $chapter-marker-size: 9px; } .vjs-peertube { - @include margin-right(6px); - @include margin-left(auto); - line-height: $control-bar-height; text-align: end; overflow: hidden; font-size: $control-bar-font-size; + @include margin-right(6px); + @include margin-left(auto); + .vjs-peertube-displayed { display: block; } @@ -250,8 +250,6 @@ $chapter-marker-size: 9px; } .icon { - @include margin-right(2px); - display: inline-block; width: 15px; height: 15px; @@ -261,6 +259,8 @@ $chapter-marker-size: 9px; position: relative; top: -1px; + @include margin-right(2px); + &.icon-download { background-image: url('#{$assets-path}/player/images/arrow-down.svg'); } @@ -301,11 +301,11 @@ $chapter-marker-size: 9px; } .vjs-mute-control { - @include disable-outline; - padding: 0; width: $control-bar-icon-size; + @include disable-outline; + .vjs-icon-placeholder { display: inline-block; width: $control-bar-icon-size; @@ -326,11 +326,11 @@ $chapter-marker-size: 9px; } .vjs-volume-control { - @include margin(0, 5px, 0, 5px); - width: 28px; display: flex; align-items: center; + + @include margin(0, 5px, 0, 5px); } .vjs-volume-bar { @@ -397,11 +397,11 @@ $chapter-marker-size: 9px; } .vjs-settings { - @include disable-outline; - cursor: pointer; width: $control-bar-button-width - 4px; + @include disable-outline; + .vjs-icon-placeholder { display: inline-block; height: $control-bar-icon-size - 4px; @@ -417,23 +417,23 @@ $chapter-marker-size: 9px; } .vjs-peertube-link { - @include disable-outline; - @include disable-default-a-behaviour; - @include ellipsis; - text-decoration: none; line-height: $control-bar-height; font-weight: $font-semibold; padding: 0 5px; max-width: 150px; + + @include ellipsis; + @include disable-outline; + @include disable-default-a-behaviour; } .vjs-theater-control { - @include disable-outline; - width: $control-bar-button-width; cursor: pointer; + @include disable-outline; + .vjs-icon-placeholder { transition: transform 0.2s ease; display: inline-block; @@ -475,10 +475,10 @@ $chapter-marker-size: 9px; } .vjs-fullscreen-control { - @include disable-outline; - width: $control-bar-button-width; + @include disable-outline; + .vjs-icon-placeholder { display: inline-block; width: $control-bar-icon-size; @@ -567,9 +567,9 @@ $chapter-marker-size: 9px; } .vjs-play-control { - @include margin-left(0); - width: 30px; + + @include margin-left(0); } &.vjs-live { diff --git a/client/src/sass/player/dock.scss b/client/src/sass/player/dock.scss index b50297380..57d95908b 100644 --- a/client/src/sass/player/dock.scss +++ b/client/src/sass/player/dock.scss @@ -48,9 +48,9 @@ .peertube-dock-title, .peertube-dock-description { - @include ellipsis; - text-shadow: 0 1px 3px rgba(0, 0, 0, .5); + + @include ellipsis; } .peertube-dock-title + .peertube-dock-description { diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index eb43c05e2..256755910 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -37,8 +37,6 @@ body { $big-play-width: 1.2em; $big-play-height: 1.2em; - @include margin-left(-(math.div($big-play-width, 2))); - outline: 0; font-size: 6em; @@ -53,16 +51,18 @@ body { margin-top: -(math.div($big-play-height, 2)); transition: 0.2s background-color; + @include margin-left(-(math.div($big-play-width, 2))); + &::-moz-focus-inner { border: 0; padding: 0; } .vjs-icon-placeholder::before { - @include big-play-button-triangle-size(45px); - content: ''; background-image: url('#{$assets-path}/player/images/big-play-button.svg'); + + @include big-play-button-triangle-size(45px); } &:focus-visible, diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss index 4419df242..296556142 100644 --- a/client/src/sass/player/playlist.scss +++ b/client/src/sass/player/playlist.scss @@ -30,17 +30,17 @@ $playlist-menu-width: 350px; justify-content: space-between; .title { - @include ellipsis; - font-size: 14px; margin-bottom: 5px; + + @include ellipsis; } .channel { - @include ellipsis; - font-size: 11px; color: #bfbfbf; + + @include ellipsis; } .cross { @@ -139,9 +139,9 @@ $playlist-menu-width: 350px; } .item-player { - @include play-icon(20px, 16px); - display: none; + + @include play-icon(20px, 16px); } &.vjs-selected { @@ -170,18 +170,18 @@ $playlist-menu-width: 350px; min-width: 1px; .title { - @include ellipsis; - font-size: 13px; margin-bottom: 3px; + + @include ellipsis; } .channel, .timestamps { - @include ellipsis; - font-size: 11px; color: #bfbfbf; + + @include ellipsis; } .timestamps { diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 402aaf8fc..5041566f6 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -55,10 +55,11 @@ $setting-transition-easing: ease-out; .vjs-settings-panel { position: absolute; - @include right(0); overflow-y: auto; overflow-x: hidden; + + @include right(0); } .vjs-settings-panel-child { @@ -106,7 +107,6 @@ $setting-transition-easing: ease-out; .vjs-settings-sub-menu-value::after { @include chevron-right(9px, 2px); - @include margin-left(5px); } } @@ -128,7 +128,6 @@ $setting-transition-easing: ease-out; &::before { @include chevron-left(9px, 2px); - @include margin-right(10px); } } @@ -143,13 +142,13 @@ $setting-transition-easing: ease-out; } &::before { - @include icon(15px); - position: absolute; - @include left(15px); content: ' '; margin-top: 1px; background-image: url('#{$assets-path}/player/images/tick-white.svg'); + + @include icon(15px); + @include left(15px); } } } @@ -163,9 +162,9 @@ $setting-transition-easing: ease-out; text-align: start; .vjs-menu-item-text { - @include margin-left(25px); - text-transform: capitalize; + + @include margin-left(25px); } } } diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 2550ef1fe..1816617e7 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -704,11 +704,6 @@ p-table { height: auto !important; .p-paginator-page { - &.focus-within, - &:focus { - box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important; - } - color: pvar(--mainForegroundColor) !important; font-weight: $font-semibold !important; margin: 0 5px !important; @@ -718,6 +713,11 @@ p-table { height: auto !important; line-height: initial !important; + &.focus-within, + &:focus { + box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important; + } + &.p-highlight { &, &:hover, &:active, &:focus { color: #fff !important; diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index a320c145d..6a5d29da8 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -3,6 +3,7 @@ @use 'video.js/dist/video-js'; $assets-path: '../../assets/'; + @use '../../sass/player/index'; [hidden] { diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss index be1f9414a..b858130ee 100644 --- a/client/src/standalone/videos/test-embed.scss +++ b/client/src/standalone/videos/test-embed.scss @@ -32,8 +32,6 @@ aside { } .logo { - @include margin-right(0.5em); - font-size: 150%; height: 100%; font-weight: bold; @@ -41,14 +39,16 @@ aside { flex-direction: row; align-items: center; - .icon { - @include margin-right(0.5em); + @include margin-right(0.5em); + .icon { height: 100%; padding: 0 18px 0 32px; background: #fff; display: flex; align-items: center; + + @include margin-right(0.5em); } } @@ -63,13 +63,10 @@ main { } header { - @include padding-right(1em); - width: 100%; height: 3.2em; background-color: #F1680D; color: #fff; - //background-image: url(../../assets/images/backdrop/network-o.png); display: flex; flex-direction: row; align-items: center; @@ -78,6 +75,8 @@ header { background-size: 50%; background-position: top left; + @include padding-right(1em); + h1 { margin: 0; padding: 0 1em 0 0; diff --git a/client/yarn.lock b/client/yarn.lock index 1fb830b3b..54a91fd6d 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -9171,12 +9171,17 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-sorting@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-8.0.2.tgz#6393385ece272baf74bee9820fb1b58098e4eeca" + integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q== + postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@8.4.41, postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.40, postcss@^8.4.41: +postcss@8.4.41, postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.32, postcss@^8.4.33, postcss@^8.4.40, postcss@^8.4.41: version "8.4.41" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681" integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ== @@ -10517,6 +10522,14 @@ stylelint-config-sass-guidelines@^11.0.0: postcss-scss "^4.0.9" stylelint-scss "^6.2.1" +stylelint-order@^6.0.4: + version "6.0.4" + resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-6.0.4.tgz#3e80d876c61a98d2640de181433686f24284748b" + integrity sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA== + dependencies: + postcss "^8.4.32" + postcss-sorting "^8.0.2" + stylelint-scss@^6.2.1: version "6.5.0" resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.5.0.tgz#c5495f254195c41b97f9bc995e4d3725b375447a"