aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 16:41:07 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 17:53:57 +0200
commit931d3430184143ebd88e5243def6eb1d7acfdbf4 (patch)
tree909919bafd6fa8563d26d616c6257ebd0211c83c /client/src/app
parent7d026caf683e42fd57a243a3b52a5e4f476fbb4e (diff)
downloadPeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.gz
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.zst
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.zip
Move to stylelint
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.html2
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.scss4
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss6
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.scss3
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss4
-rw-r--r--client/src/app/+accounts/accounts.component.scss6
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss5
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.scss3
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.scss3
-rw-r--r--client/src/app/+admin/follows/follows.component.scss2
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss3
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss2
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss3
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss2
-rw-r--r--client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss3
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss4
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss2
-rw-r--r--client/src/app/+admin/system/logs/logs.component.scss4
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.scss3
-rw-r--r--client/src/app/+admin/users/user-edit/user-password.component.scss2
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss2
-rw-r--r--client/src/app/+login/login.component.scss19
-rw-r--r--client/src/app/+my-account/my-account-applications/my-account-applications.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss3
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss2
-rw-r--r--client/src/app/+my-account/my-account.component.scss6
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss3
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss2
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.scss4
-rw-r--r--client/src/app/+my-library/my-library.component.scss6
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.scss8
-rw-r--r--client/src/app/+my-library/my-video-imports/my-video-imports.component.scss2
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss13
-rw-r--r--client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss2
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.scss4
-rw-r--r--client/src/app/+search/search-filters.component.scss2
-rw-r--r--client/src/app/+signup/+register/register.component.scss2
-rw-r--r--client/src/app/+signup/shared/signup-success.component.scss22
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss14
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss4
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss6
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-send.scss6
-rw-r--r--client/src/app/+videos/+video-edit/video-add.component.scss2
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss6
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.scss7
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comments.component.scss5
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss3
-rw-r--r--client/src/app/+videos/+video-watch/video-watch-playlist.component.scss2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss23
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss10
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending-header.component.scss2
-rw-r--r--client/src/app/app.component.scss2
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.scss5
-rw-r--r--client/src/app/header/search-typeahead.component.scss13
-rw-r--r--client/src/app/header/suggestion.component.scss8
-rw-r--r--client/src/app/menu/language-chooser.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss33
-rw-r--r--client/src/app/menu/notification.component.scss25
-rw-r--r--client/src/app/modal/welcome-modal.component.scss2
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.scss14
-rw-r--r--client/src/app/shared/shared-forms/input-switch.component.scss8
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss25
-rw-r--r--client/src/app/shared/shared-forms/peertube-checkbox.component.scss6
-rw-r--r--client/src/app/shared/shared-forms/preview-upload.component.scss2
-rw-r--r--client/src/app/shared/shared-forms/select/select-shared.component.scss6
-rw-r--r--client/src/app/shared/shared-forms/timestamp-input.component.scss3
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.scss4
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.scss2
-rw-r--r--client/src/app/shared/shared-main/buttons/action-dropdown.component.scss13
-rw-r--r--client/src/app/shared/shared-main/date/date-toggle.component.scss2
-rw-r--r--client/src/app/shared/shared-main/feeds/feed.component.scss6
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.scss2
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.scss11
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.html8
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.scss6
-rw-r--r--client/src/app/shared/shared-main/users/user-notifications.component.scss4
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.scss3
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.scss3
-rw-r--r--client/src/app/shared/shared-moderation/moderation.scss22
-rw-r--r--client/src/app/shared/shared-moderation/server-blocklist.component.scss3
-rw-r--r--client/src/app/shared/shared-moderation/video-block.component.scss2
-rw-r--r--client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss10
-rw-r--r--client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss2
-rw-r--r--client/src/app/shared/shared-user-subscription/subscribe-button.component.scss14
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss17
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss4
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss2
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss12
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss2
92 files changed, 297 insertions, 281 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index e9139b503..f81465f88 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -21,7 +21,7 @@
21 {{ following }} 21 {{ following }}
22 </a> 22 </a>
23 23
24 <button i18n class="showMore" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button> 24 <button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
25 </div> 25 </div>
26 26
27</div> 27</div>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index a393c9d92..83241e727 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -17,9 +17,9 @@ a {
17 justify-content: flex-start; 17 justify-content: flex-start;
18} 18}
19 19
20.showMore { 20.show-more {
21 @include peertube-button-link; 21 @include peertube-button-link;
22 @include grey-button; 22 @include grey-button;
23 23
24 margin-top: 1%; 24 margin-top: 1%;
25} 25}
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 7158a3a79..9886bdfef 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -63,7 +63,8 @@
63 63
64 position: relative; 64 position: relative;
65 65
66 &:hover, &:active { 66 &:hover,
67 &:active {
67 &::after { 68 &::after {
68 content: '#'; 69 content: '#';
69 display: inline-block; 70 display: inline-block;
@@ -71,7 +72,8 @@
71 } 72 }
72 } 73 }
73 74
74 .middle-title, .section-title { 75 .middle-title,
76 .section-title {
75 display: inline-block; 77 display: inline-block;
76 } 78 }
77 79
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index e67252410..e5d2bc5b8 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -45,7 +45,8 @@
45.p2p-privacy, 45.p2p-privacy,
46my-about-peertube-contributors { 46my-about-peertube-contributors {
47 ::ng-deep { 47 ::ng-deep {
48 p, li { 48 p,
49 li {
49 font-size: 15px; 50 font-size: 15px;
50 } 51 }
51 } 52 }
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 0c490ad53..f9d097644 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -65,13 +65,13 @@
65 } 65 }
66 66
67 .description-html { 67 .description-html {
68 @include fade-text(30px, pvar(--channelBackgroundColor));
69
68 grid-column: 2 / 4; 70 grid-column: 2 / 4;
69 grid-row: 2; 71 grid-row: 2;
70 72
71 max-height: 80px; 73 max-height: 80px;
72 font-size: 16px; 74 font-size: 16px;
73
74 @include fade-text(30px, pvar(--channelBackgroundColor));
75 } 75 }
76} 76}
77 77
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 56927dea6..2e99fe8a5 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -40,7 +40,7 @@ my-user-moderation-dropdown,
40} 40}
41 41
42.copy-button { 42.copy-button {
43 border: none; 43 border: 0;
44} 44}
45 45
46.account-info { 46.account-info {
@@ -104,9 +104,9 @@ my-user-moderation-dropdown,
104 } 104 }
105 105
106 .description:not(.expanded) { 106 .description:not(.expanded) {
107 max-height: 70px;
108
109 @include fade-text(30px, pvar(--submenuBackgroundColor)); 107 @include fade-text(30px, pvar(--submenuBackgroundColor));
108
109 max-height: 70px;
110 } 110 }
111 111
112 .show-more { 112 .show-more {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index c12465d45..cc2a98a17 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -57,7 +57,7 @@ input[type=submit] {
57 display: flex; 57 display: flex;
58 margin-left: auto; 58 margin-left: auto;
59 59
60 & + .form-error { 60 + .form-error {
61 display: inline; 61 display: inline;
62 margin-left: 5px; 62 margin-left: 5px;
63 } 63 }
@@ -84,7 +84,8 @@ textarea {
84} 84}
85 85
86.disabled-checkbox-extra { 86.disabled-checkbox-extra {
87 &, ::ng-deep label { 87 &,
88 ::ng-deep label {
88 opacity: .5; 89 opacity: .5;
89 pointer-events: none; 90 pointer-events: none;
90 } 91 }
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index f2d752eb5..12c0cd033 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -13,7 +13,8 @@ a {
13 @include disable-default-a-behaviour; 13 @include disable-default-a-behaviour;
14 display: inline-block; 14 display: inline-block;
15 15
16 &, &:hover { 16 &,
17 &:hover {
17 color: pvar(--mainForegroundColor); 18 color: pvar(--mainForegroundColor);
18 } 19 }
19 20
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index b108218b8..797882d9a 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -5,7 +5,8 @@ a {
5 @include disable-default-a-behaviour; 5 @include disable-default-a-behaviour;
6 display: inline-block; 6 display: inline-block;
7 7
8 &, &:hover { 8 &,
9 &:hover {
9 color: pvar(--mainForegroundColor); 10 color: pvar(--mainForegroundColor);
10 } 11 }
11 12
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index 33ff17539..1ed0d925f 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,4 @@
1@import "mixins"; 1@import 'mixins';
2 2
3.form-sub-title { 3.form-sub-title {
4 flex-grow: 0; 4 flex-grow: 0;
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index adcf2037e..30b9f2147 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -5,7 +5,8 @@ a {
5 @include disable-default-a-behaviour; 5 @include disable-default-a-behaviour;
6 display: inline-block; 6 display: inline-block;
7 7
8 &, &:hover { 8 &,
9 &:hover {
9 color: pvar(--mainForegroundColor); 10 color: pvar(--mainForegroundColor);
10 } 11 }
11 12
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
index 6028b75ea..1d98e44d9 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
@@ -4,4 +4,4 @@
4.unblock-button { 4.unblock-button {
5 @include peertube-button; 5 @include peertube-button;
6 @include grey-button; 6 @include grey-button;
7} \ No newline at end of file 7}
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
index c9262da09..5d97d9bdb 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -49,7 +49,8 @@ my-global-icon {
49 max-height: 22px; 49 max-height: 22px;
50 } 50 }
51 51
52 div, p { 52 div,
53 p {
53 @include ellipsis; 54 @include ellipsis;
54 } 55 }
55 56
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 9376e38b0..22d4a59ab 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -1,6 +1,6 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.update-button[disabled="true"] ::ng-deep .action-button { 4.update-button[disabled=true] ::ng-deep .action-button {
5 cursor: default !important; 5 cursor: default !important;
6} 6}
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
index 5ab6e5f1b..6b7b84e29 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -5,7 +5,8 @@ h2 {
5 margin-bottom: 20px; 5 margin-bottom: 20px;
6} 6}
7 7
8input[type=submit], button { 8input[type=submit],
9button {
9 @include peertube-button; 10 @include peertube-button;
10 @include orange-button; 11 @include orange-button;
11 12
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index f59a01b74..e4ddc9060 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -27,7 +27,7 @@
27 my-global-icon { 27 my-global-icon {
28 @include apply-svg-color(pvar(--greyForegroundColor)); 28 @include apply-svg-color(pvar(--greyForegroundColor));
29 29
30 &[iconName="npm"] { 30 &[iconName=npm] {
31 @include fill-svg-color(pvar(--greyForegroundColor)); 31 @include fill-svg-color(pvar(--greyForegroundColor));
32 } 32 }
33 } 33 }
@@ -49,7 +49,7 @@
49 justify-content: space-between; 49 justify-content: space-between;
50 50
51 .description { 51 .description {
52 opacity: 0.8 52 opacity: 0.8;
53 } 53 }
54} 54}
55 55
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 7c6159420..65ee6ec5f 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -51,7 +51,7 @@ pre {
51} 51}
52 52
53.job-error { 53.job-error {
54 color: red; 54 color: #ff0000;
55} 55}
56 56
57.badge { 57.badge {
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 587a9795c..1a7c3be75 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -66,7 +66,7 @@
66 ng-select, 66 ng-select,
67 my-button { 67 my-button {
68 width: 100% !important; 68 width: 100% !important;
69 margin-left: 0px !important; 69 margin-left: 0 !important;
70 margin-bottom: 10px !important; 70 margin-bottom: 10px !important;
71 } 71 }
72 72
@@ -85,7 +85,7 @@
85 ng-select, 85 ng-select,
86 my-button { 86 my-button {
87 width: 100% !important; 87 width: 100% !important;
88 margin-left: 0px !important; 88 margin-left: 0 !important;
89 margin-bottom: 10px !important; 89 margin-bottom: 10px !important;
90 } 90 }
91 91
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 8b0ac8783..145177fb9 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -37,7 +37,8 @@ my-select-custom-value {
37 display: block; 37 display: block;
38} 38}
39 39
40input[type=submit], button { 40input[type=submit],
41button {
41 @include peertube-button; 42 @include peertube-button;
42 @include orange-button; 43 @include orange-button;
43 44
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
index 1f0d49227..66d15ee9c 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -7,7 +7,7 @@ input:not([type=submit]):not([type=checkbox]) {
7 display: block; 7 display: block;
8 border-top-right-radius: 0; 8 border-top-right-radius: 0;
9 border-bottom-right-radius: 0; 9 border-bottom-right-radius: 0;
10 border-right: none; 10 border-right: 0;
11} 11}
12 12
13input[type=submit] { 13input[type=submit] {
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 50080bad6..f18747ec3 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -24,7 +24,7 @@ tr.banned > td {
24 24
25.user-table-primary-text .glyphicon { 25.user-table-primary-text .glyphicon {
26 font-size: 80%; 26 font-size: 80%;
27 color: gray; 27 color: #808080;
28 margin-left: 0.1rem; 28 margin-left: 0.1rem;
29} 29}
30 30
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index eddaff542..62ae722c3 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -33,7 +33,8 @@ input[type=email] {
33 } 33 }
34} 34}
35 35
36.create-an-account, .forgot-password-button { 36.create-an-account,
37.forgot-password-button {
37 color: pvar(--mainForegroundColor); 38 color: pvar(--mainForegroundColor);
38 cursor: pointer; 39 cursor: pointer;
39 transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1); 40 transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -49,7 +50,7 @@ input[type=email] {
49 justify-content: space-around; 50 justify-content: space-around;
50 flex-wrap: wrap; 51 flex-wrap: wrap;
51 52
52 & > div { 53 > div {
53 flex: 1 1; 54 flex: 1 1;
54 } 55 }
55 56
@@ -65,7 +66,8 @@ input[type=email] {
65 form { 66 form {
66 margin: 0; 67 margin: 0;
67 68
68 &, input { 69 &,
70 input {
69 width: 100%; 71 width: 100%;
70 } 72 }
71 73
@@ -82,7 +84,8 @@ input[type=email] {
82 84
83 color: var(--mainColor); 85 color: var(--mainColor);
84 86
85 &:hover, &:active { 87 &:hover,
88 &:active {
86 color: var(--mainHoverColor); 89 color: var(--mainHoverColor);
87 } 90 }
88 } 91 }
@@ -111,7 +114,7 @@ input[type=email] {
111 min-width: 100px; 114 min-width: 100px;
112 115
113 &:hover { 116 &:hover {
114 background-color: rgba(209, 215, 224, 0.5) 117 background-color: rgba(209, 215, 224, 0.5);
115 } 118 }
116 } 119 }
117 } 120 }
@@ -138,7 +141,7 @@ input[type=email] {
138 } 141 }
139} 142}
140 143
141@mixin columnReverseDisplay { 144@mixin column-reverse-display {
142 flex-direction: column-reverse; 145 flex-direction: column-reverse;
143 146
144 .login-form-and-externals, 147 .login-form-and-externals,
@@ -168,14 +171,14 @@ input[type=email] {
168 171
169@media screen and (max-width: breakpoint(md)) { 172@media screen and (max-width: breakpoint(md)) {
170 .wrapper { 173 .wrapper {
171 @include columnReverseDisplay(); 174 @include column-reverse-display();
172 } 175 }
173} 176}
174 177
175@media screen and (max-width: breakpoint(md) + $menu-width) { 178@media screen and (max-width: breakpoint(md) + $menu-width) {
176 :host-context(.main-col:not(.expanded)) { 179 :host-context(.main-col:not(.expanded)) {
177 .wrapper { 180 .wrapper {
178 @include columnReverseDisplay(); 181 @include column-reverse-display();
179 } 182 }
180 } 183 }
181} 184}
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 704132c03..c1e1f2432 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -21,7 +21,7 @@ input[type=submit] {
21 display: flex; 21 display: flex;
22 margin-left: auto; 22 margin-left: auto;
23 23
24 & + .form-error { 24 + .form-error {
25 display: inline; 25 display: inline;
26 margin-left: 5px; 26 margin-left: 5px;
27 } 27 }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 035fa2b27..abf52504a 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -32,7 +32,8 @@ my-user-notifications {
32 .header { 32 .header {
33 flex-direction: column; 33 flex-direction: column;
34 34
35 & >:first-child, .peertube-select-container { 35 > :first-child,
36 .peertube-select-container {
36 margin-bottom: 15px; 37 margin-bottom: 15px;
37 } 38 }
38 39
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
index d79ff690b..64f960964 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
@@ -7,4 +7,4 @@
7 @include danger-button; 7 @include danger-button;
8 @include disable-outline; 8 @include disable-outline;
9 } 9 }
10} \ No newline at end of file 10}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index b06d8b16d..42319400d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -10,7 +10,7 @@
10 font-size: 16px; 10 font-size: 16px;
11 } 11 }
12 12
13 & > div { 13 > div {
14 padding: 10px; 14 padding: 10px;
15 15
16 &:first-child { 16 &:first-child {
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index a5bb499b4..b32bc84e7 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -2,12 +2,12 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.row { 4.row {
5 @include sub-menu-h1;
6
5 flex-direction: column; 7 flex-direction: column;
6 width: 100%; 8 width: 100%;
7 9
8 & > my-top-menu-dropdown:nth-child(1) { 10 > my-top-menu-dropdown:nth-child(1) {
9 flex-grow: 1; 11 flex-grow: 1;
10 } 12 }
11
12 @include sub-menu-h1;
13} 13}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
index 22de103d1..667726c22 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -66,7 +66,8 @@ textarea {
66 width: auto !important; 66 width: auto !important;
67 } 67 }
68 68
69 label[for=name] + div, textarea { 69 label[for=name] + div,
70 textarea {
70 width: 100%; 71 width: 100%;
71 } 72 }
72} 73}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index dafba925e..bb5394094 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -83,7 +83,7 @@ input[type=text] {
83 margin: auto; 83 margin: auto;
84 84
85 .video-channel-name { 85 .video-channel-name {
86 margin-left: 0px !important; 86 margin-left: 0 !important;
87 } 87 }
88 } 88 }
89 } 89 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index af4a34b4b..28b809f71 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -39,12 +39,12 @@
39 } 39 }
40 40
41 .delete-history { 41 .delete-history {
42 grid-column: 4;
43
44 @include peertube-button; 42 @include peertube-button;
45 @include grey-button; 43 @include grey-button;
46 @include button-with-icon; 44 @include button-with-icon;
47 45
46 grid-column: 4;
47
48 font-size: 15px; 48 font-size: 15px;
49 } 49 }
50} 50}
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index a5bb499b4..b32bc84e7 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -2,12 +2,12 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.row { 4.row {
5 @include sub-menu-h1;
6
5 flex-direction: column; 7 flex-direction: column;
6 width: 100%; 8 width: 100%;
7 9
8 & > my-top-menu-dropdown:nth-child(1) { 10 > my-top-menu-dropdown:nth-child(1) {
9 flex-grow: 1; 11 flex-grow: 1;
10 } 12 }
11
12 @include sub-menu-h1;
13} 13}
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index 7cac9c9f3..dfc8fc99e 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -13,15 +13,15 @@
13 display: inline-flex; 13 display: inline-flex;
14 14
15 .video-table-video-image { 15 .video-table-video-image {
16 @include miniature-thumbnail;
17
18 $image-height: 45px; 16 $image-height: 45px;
19 17
18 @include miniature-thumbnail;
19
20 height: $image-height; 20 height: $image-height;
21 width: #{(16/9) * $image-height}; 21 width: #{(16/9) * $image-height};
22 margin-right: 0.5rem; 22 margin-right: 0.5rem;
23 border-radius: 2px; 23 border-radius: 2px;
24 border: none; 24 border: 0;
25 background: transparent; 25 background: transparent;
26 display: inline-flex; 26 display: inline-flex;
27 justify-content: center; 27 justify-content: center;
@@ -60,7 +60,7 @@
60 60
61 div .glyphicon { 61 div .glyphicon {
62 font-size: 80%; 62 font-size: 80%;
63 color: gray; 63 color: #808080;
64 margin-left: 0.1rem; 64 margin-left: 0.1rem;
65 } 65 }
66 66
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
index a93c28028..c4b847c3d 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
@@ -6,7 +6,7 @@ pre {
6} 6}
7 7
8.video-import-error { 8.video-import-error {
9 color: red; 9 color: #ff0000;
10} 10}
11 11
12.badge { 12.badge {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 0c68dedf6..67587a58a 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -25,8 +25,8 @@
25} 25}
26 26
27.playlist-buttons { 27.playlist-buttons {
28 display:flex; 28 display: flex;
29 margin: 30px 0 10px 0; 29 margin: 30px 0 10px;
30 30
31 .share-button { 31 .share-button {
32 @include peertube-button; 32 @include peertube-button;
@@ -42,9 +42,10 @@
42.cdk-drag-preview { 42.cdk-drag-preview {
43 box-sizing: border-box; 43 box-sizing: border-box;
44 border-radius: 4px; 44 border-radius: 4px;
45 box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 45 box-shadow:
46 0 8px 10px 1px rgba(0, 0, 0, 0.14), 46 0 5px 5px -3px rgba(0, 0, 0, 0.2),
47 0 3px 14px 2px rgba(0, 0, 0, 0.12); 47 0 8px 10px 1px rgba(0, 0, 0, 0.14),
48 0 3px 14px 2px rgba(0, 0, 0, 0.12);
48} 49}
49 50
50.cdk-drag-placeholder { 51.cdk-drag-placeholder {
@@ -56,7 +57,7 @@
56} 57}
57 58
58.video:last-child { 59.video:last-child {
59 border: none; 60 border: 0;
60} 61}
61 62
62.videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { 63.videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
index a79fec179..16187bc4a 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -7,4 +7,4 @@ p-autocomplete {
7 7
8.form-group { 8.form-group {
9 margin: 20px 0; 9 margin: 20px 0;
10} \ No newline at end of file 10}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index aaf21126b..57623c36f 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -26,12 +26,12 @@ h1 {
26} 26}
27 27
28.action-button-delete-selection { 28.action-button-delete-selection {
29 display: inline-block;
30
31 @include peertube-button; 29 @include peertube-button;
32 @include orange-button; 30 @include orange-button;
33 @include button-with-icon(21px); 31 @include button-with-icon(21px);
34 32
33 display: inline-block;
34
35 my-global-icon { 35 my-global-icon {
36 @include apply-svg-color(#fff); 36 @include apply-svg-color(#fff);
37 } 37 }
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 68ac6d021..cfb7a1d98 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -46,7 +46,7 @@ input[type=submit] {
46 46
47 font-weight: $font-semibold; 47 font-weight: $font-semibold;
48 display: inline-block; 48 display: inline-block;
49 padding: 0 10px 0 10px; 49 padding: 0 10px;
50 white-space: nowrap; 50 white-space: nowrap;
51 background: transparent; 51 background: transparent;
52 52
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 16ba9e2c0..f6a846ffa 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -84,7 +84,7 @@ button {
84 border-color: pvar(--mainColor) transparent transparent transparent; 84 border-color: pvar(--mainColor) transparent transparent transparent;
85 } 85 }
86 86
87 & + div { 87 + div {
88 font-size: 15px; 88 font-size: 15px;
89 } 89 }
90 } 90 }
diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss
index fbc27c8bc..b302366e2 100644
--- a/client/src/app/+signup/shared/signup-success.component.scss
+++ b/client/src/app/+signup/shared/signup-success.component.scss
@@ -9,19 +9,16 @@ svg {
9 stroke-dashoffset: 0; 9 stroke-dashoffset: 0;
10 10
11 &.circle { 11 &.circle {
12 -webkit-animation: dash .9s ease-in-out;
13 animation: dash .9s ease-in-out; 12 animation: dash .9s ease-in-out;
14 } 13 }
15 14
16 &.line { 15 &.line {
17 stroke-dashoffset: 1000; 16 stroke-dashoffset: 1000;
18 -webkit-animation: dash .9s .35s ease-in-out forwards;
19 animation: dash .9s .35s ease-in-out forwards; 17 animation: dash .9s .35s ease-in-out forwards;
20 } 18 }
21 19
22 &.check { 20 &.check {
23 stroke-dashoffset: -100; 21 stroke-dashoffset: -100;
24 -webkit-animation: dash-check .9s .35s ease-in-out forwards;
25 animation: dash-check .9s .35s ease-in-out forwards; 22 animation: dash-check .9s .35s ease-in-out forwards;
26 } 23 }
27} 24}
@@ -38,16 +35,6 @@ svg {
38 text-align: center; 35 text-align: center;
39} 36}
40 37
41
42@-webkit-keyframes dash {
43 0% {
44 stroke-dashoffset: 1000;
45 }
46 100% {
47 stroke-dashoffset: 0;
48 }
49}
50
51@keyframes dash { 38@keyframes dash {
52 0% { 39 0% {
53 stroke-dashoffset: 1000; 40 stroke-dashoffset: 1000;
@@ -57,15 +44,6 @@ svg {
57 } 44 }
58} 45}
59 46
60@-webkit-keyframes dash-check {
61 0% {
62 stroke-dashoffset: -100;
63 }
64 100% {
65 stroke-dashoffset: 900;
66 }
67}
68
69@keyframes dash-check { 47@keyframes dash-check {
70 0% { 48 0% {
71 stroke-dashoffset: -100; 49 stroke-dashoffset: -100;
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 360a99342..470f64878 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -131,10 +131,10 @@
131 } 131 }
132 132
133 .owner-description { 133 .owner-description {
134 @include fade-text(120px, pvar(--mainBackgroundColor));
135
134 max-height: 140px; 136 max-height: 140px;
135 word-break: break-word; 137 word-break: break-word;
136
137 @include fade-text(120px, pvar(--mainBackgroundColor));
138 } 138 }
139} 139}
140 140
@@ -150,7 +150,7 @@
150} 150}
151 151
152.copy-button { 152.copy-button {
153 border: none; 153 border: 0;
154} 154}
155 155
156@media screen and (max-width: 1400px) { 156@media screen and (max-width: 1400px) {
@@ -178,9 +178,9 @@
178 } 178 }
179 179
180 .channel-description:not(.expanded) { 180 .channel-description:not(.expanded) {
181 max-height: 70px;
182
183 @include fade-text(30px, pvar(--channelBackgroundColor)); 181 @include fade-text(30px, pvar(--channelBackgroundColor));
182
183 max-height: 70px;
184 } 184 }
185 185
186 .show-more { 186 .show-more {
@@ -220,10 +220,10 @@
220 } 220 }
221 221
222 .owner-description { 222 .owner-description {
223 @include fade-text(30px, pvar(--mainBackgroundColor));
224
223 grid-column: 2; 225 grid-column: 2;
224 max-height: 70px; 226 max-height: 70px;
225
226 @include fade-text(30px, pvar(--mainBackgroundColor));
227 } 227 }
228 228
229 .view-account { 229 .view-account {
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index 0958b5f80..a85cf444c 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -16,6 +16,6 @@ label {
16} 16}
17 17
18.warning-replace-caption { 18.warning-replace-caption {
19 color: red; 19 color: #ff0000;
20 margin-top: 10px; 20 margin-top: 10px;
21} \ No newline at end of file 21}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 0b70b0270..bc32d7964 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -150,7 +150,7 @@ p-calendar {
150 @include media-breakpoint-up(md) { 150 @include media-breakpoint-up(md) {
151 @include make-col(7); 151 @include make-col(7);
152 152
153 & + .col-video-edit { 153 + .col-video-edit {
154 @include make-col(5); 154 @include make-col(5);
155 } 155 }
156 } 156 }
@@ -158,7 +158,7 @@ p-calendar {
158 @include media-breakpoint-up(xl) { 158 @include media-breakpoint-up(xl) {
159 @include make-col(8); 159 @include make-col(8);
160 160
161 & + .col-video-edit { 161 + .col-video-edit {
162 @include make-col(4); 162 @include make-col(4);
163 } 163 }
164 } 164 }
@@ -169,7 +169,7 @@ p-calendar {
169 @include media-breakpoint-up(md) { 169 @include media-breakpoint-up(md) {
170 @include make-col(8); 170 @include make-col(8);
171 171
172 & + .col-video-edit { 172 + .col-video-edit {
173 @include make-col(4); 173 @include make-col(4);
174 } 174 }
175 } 175 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 17c5f63e9..dc9153b2b 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -6,7 +6,7 @@ $width-size: 190px;
6.alert.alert-danger { 6.alert.alert-danger {
7 text-align: center; 7 text-align: center;
8 8
9 & > div { 9 > div {
10 font-weight: $font-semibold; 10 font-weight: $font-semibold;
11 } 11 }
12} 12}
@@ -17,10 +17,10 @@ $width-size: 190px;
17 align-items: center; 17 align-items: center;
18 18
19 .upload-icon { 19 .upload-icon {
20 @include apply-svg-color(#C6C6C6);
21
20 width: 90px; 22 width: 90px;
21 margin-bottom: 25px; 23 margin-bottom: 25px;
22
23 @include apply-svg-color(#C6C6C6);
24 } 24 }
25 25
26 .peertube-select-container { 26 .peertube-select-container {
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 1ebee946b..35bca24d0 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -44,7 +44,7 @@ $nav-link-height: 40px;
44 44
45::ng-deep .video-add-nav { 45::ng-deep .video-add-nav {
46 border-bottom: $border-width $border-type $border-color; 46 border-bottom: $border-width $border-type $border-color;
47 margin: 20px 0 0 0 !important; 47 margin: 20px 0 0 !important;
48 48
49 &.hide-nav { 49 &.hide-nav {
50 display: none !important; 50 display: none !important;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 54e61eac4..7743bd41d 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -31,7 +31,7 @@ form {
31 padding-right: $markdown-icon-width + 15px !important; 31 padding-right: $markdown-icon-width + 15px !important;
32 32
33 @media screen and (max-width: 600px) { 33 @media screen and (max-width: 600px) {
34 padding-right: $markdown-icon-width + 19px !important; 34 padding-right: $markdown-icon-width + 19px !important;
35 } 35 }
36 36
37 &:focus::placeholder { 37 &:focus::placeholder {
@@ -57,7 +57,9 @@ form {
57 } 57 }
58 } 58 }
59 59
60 &:focus, &:active, &:hover { 60 &:focus,
61 &:active,
62 &:hover {
61 my-global-icon svg { 63 my-global-icon svg {
62 background-color: #C6C6C6; 64 background-color: #C6C6C6;
63 color: pvar(--mainBackgroundColor); 65 color: pvar(--mainBackgroundColor);
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index f0dcc08b8..a4d2e237c 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -62,7 +62,7 @@ my-actor-avatar {
62 display: inline-flex; 62 display: inline-flex;
63 padding-right: 6px; 63 padding-right: 6px;
64 padding-left: 6px; 64 padding-left: 6px;
65 color: white !important; 65 color: #fff !important;
66} 66}
67 67
68.comment-account { 68.comment-account {
@@ -133,7 +133,10 @@ my-actor-avatar {
133 cursor: pointer; 133 cursor: pointer;
134 margin-right: 10px; 134 margin-right: 10px;
135 135
136 &:hover, &:active, &:focus, &:focus-visible { 136 &:hover,
137 &:active,
138 &:focus,
139 &:focus-visible {
137 color: pvar(--mainForegroundColor); 140 color: pvar(--mainForegroundColor);
138 } 141 }
139 } 142 }
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
index e6778e1a9..a7e858069 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
@@ -11,7 +11,8 @@
11 cursor: pointer; 11 cursor: pointer;
12} 12}
13 13
14.glyphicon, .comment-thread-loading { 14.glyphicon,
15.comment-thread-loading {
15 margin-right: 5px; 16 margin-right: 5px;
16 display: inline-block; 17 display: inline-block;
17 font-size: 13px; 18 font-size: 13px;
@@ -40,7 +41,7 @@
40#dropdown-sort-comments { 41#dropdown-sort-comments {
41 font-weight: 600; 42 font-weight: 600;
42 text-transform: uppercase; 43 text-transform: uppercase;
43 border: none; 44 border: 0;
44 transform: translateY(-7%); 45 transform: translateY(-7%);
45} 46}
46 47
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index c9fae6f27..5e0373afc 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -8,7 +8,8 @@
8 margin-bottom: 25px; 8 margin-bottom: 25px;
9 flex-wrap: wrap-reverse; 9 flex-wrap: wrap-reverse;
10 10
11 .title-page.active, .title-page.title-page-single { 11 .title-page.active,
12 .title-page.title-page-single {
12 margin-bottom: unset; 13 margin-bottom: unset;
13 margin-right: .5rem !important; 14 margin-right: .5rem !important;
14 } 15 }
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
index 0b0a2a899..b3f93b83c 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
@@ -45,7 +45,7 @@
45 45
46 my-global-icon { 46 my-global-icon {
47 &:not(.active) { 47 &:not(.active) {
48 opacity: .5 48 opacity: .5;
49 } 49 }
50 50
51 ::ng-deep { 51 ::ng-deep {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index eadb2148a..4779602d2 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -79,7 +79,7 @@
79 <span [innerHTML]="getRatePopoverText()"></span> 79 <span [innerHTML]="getRatePopoverText()"></span>
80 </ng-template> 80 </ng-template>
81 81
82 <div class="video-actions fullWidth justify-content-end"> 82 <div class="video-actions full-width justify-content-end">
83 <button 83 <button
84 [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()" 84 [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
85 class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike" 85 class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
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 e8ad10a11..301762695 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -6,12 +6,12 @@
6$player-factor: 16/9; 6$player-factor: 16/9;
7$video-info-margin-left: 44px; 7$video-info-margin-left: 44px;
8 8
9@function getPlayerHeight($width){ 9@function getPlayerHeight ($width) {
10 @return calc(#{$width} / #{$player-factor}) 10 @return calc(#{$width} / #{$player-factor});
11} 11}
12 12
13@function getPlayerWidth($height){ 13@function getPlayerWidth ($height) {
14 @return calc(#{$height} * #{$player-factor}) 14 @return calc(#{$height} * #{$player-factor});
15} 15}
16 16
17@mixin playlist-below-player { 17@mixin playlist-below-player {
@@ -24,11 +24,11 @@ $video-info-margin-left: 44px;
24 24
25.root { 25.root {
26 &.theater-enabled #video-wrapper { 26 &.theater-enabled #video-wrapper {
27 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
28
27 flex-direction: column; 29 flex-direction: column;
28 justify-content: center; 30 justify-content: center;
29 31
30 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
31
32 #videojs-wrapper { 32 #videojs-wrapper {
33 width: 100%; 33 width: 100%;
34 height: $height; 34 height: $height;
@@ -141,7 +141,7 @@ $video-info-margin-left: 44px;
141 .video-info-first-row { 141 .video-info-first-row {
142 display: flex; 142 display: flex;
143 143
144 & > div:first-child { 144 > div:first-child {
145 flex-grow: 1; 145 flex-grow: 1;
146 } 146 }
147 147
@@ -207,7 +207,7 @@ $video-info-margin-left: 44px;
207 } 207 }
208 208
209 .video-actions-rates { 209 .video-actions-rates {
210 margin: 0 0 10px 0; 210 margin: 0 0 10px;
211 align-items: start; 211 align-items: start;
212 width: max-content; 212 width: max-content;
213 margin-left: auto; 213 margin-left: auto;
@@ -231,7 +231,7 @@ $video-info-margin-left: 44px;
231 font-size: 100%; 231 font-size: 100%;
232 font-weight: $font-semibold; 232 font-weight: $font-semibold;
233 display: inline-block; 233 display: inline-block;
234 padding: 0 10px 0 10px; 234 padding: 0 10px;
235 white-space: nowrap; 235 white-space: nowrap;
236 background-color: transparent !important; 236 background-color: transparent !important;
237 color: pvar(--actionButtonColor); 237 color: pvar(--actionButtonColor);
@@ -346,7 +346,8 @@ $video-info-margin-left: 44px;
346 } 346 }
347 } 347 }
348 348
349 .glyphicon, .description-loading { 349 .glyphicon,
350 .description-loading {
350 margin-left: 3px; 351 margin-left: 3px;
351 } 352 }
352 353
@@ -396,7 +397,7 @@ $video-info-margin-left: 44px;
396 &.video-attribute-tags { 397 &.video-attribute-tags {
397 .video-attribute-value:not(:nth-child(2)) { 398 .video-attribute-value:not(:nth-child(2)) {
398 &::before { 399 &::before {
399 content: ', ' 400 content: ', ';
400 } 401 }
401 } 402 }
402 } 403 }
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 251eae456..8fbac1b46 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
@@ -16,7 +16,7 @@
16 padding-top: 30px; 16 padding-top: 30px;
17 17
18 .section-title { 18 .section-title {
19 border-top: none !important; 19 border-top: 0 !important;
20 } 20 }
21 } 21 }
22 22
@@ -33,12 +33,14 @@
33 } 33 }
34 34
35 a { 35 a {
36 &:hover, &:focus:not(.focus-visible), &:active { 36 color: pvar(--mainForegroundColor);
37
38 &:hover,
39 &:focus:not(.focus-visible),
40 &:active {
37 text-decoration: none; 41 text-decoration: none;
38 outline: none; 42 outline: none;
39 } 43 }
40
41 color: pvar(--mainForegroundColor);
42 } 44 }
43 } 45 }
44 46
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
index 923a1d67a..6daacc78e 100644
--- a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
@@ -14,4 +14,4 @@
14 height: 1rem; 14 height: 1rem;
15 margin-right: .1rem; 15 margin-right: .1rem;
16 } 16 }
17} \ No newline at end of file 17}
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e7d05369b..e21ada0f1 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -79,7 +79,7 @@
79 display: inline-block; 79 display: inline-block;
80 width: 23px; 80 width: 23px;
81 height: 24px; 81 height: 24px;
82 margin-right: .5rem; 82 margin-right: 0.5rem;
83 } 83 }
84 84
85 @media screen and (max-width: $mobile-view) { 85 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index a970260c9..b39ffa98d 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -12,16 +12,13 @@
12 left: 0; 12 left: 0;
13 color: #333; 13 color: #333;
14 font-size: 1em; 14 font-size: 1em;
15 background-color: rgba(255,255,255,0.9); 15 background-color: rgba(255, 255, 255, 0.9);
16} 16}
17 17
18.cfp-hotkeys-container.fade { 18.cfp-hotkeys-container.fade {
19 z-index: -1024; 19 z-index: -1024;
20 visibility: hidden; 20 visibility: hidden;
21 opacity: 0; 21 opacity: 0;
22 -webkit-transition: opacity 0.15s linear;
23 -moz-transition: opacity 0.15s linear;
24 -o-transition: opacity 0.15s linear;
25 transition: opacity 0.15s linear; 22 transition: opacity 0.15s linear;
26} 23}
27 24
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index c754a99d1..3e0350ba0 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -44,7 +44,8 @@ li.suggestion {
44 44
45 // soft border-radius for the last suggestion and the link inside 45 // soft border-radius for the last suggestion and the link inside
46 &:last-of-type { 46 &:last-of-type {
47 &, & ::ng-deep a { 47 &,
48 ::ng-deep a {
48 border-bottom-right-radius: 3px; 49 border-bottom-right-radius: 3px;
49 border-bottom-left-radius: 3px; 50 border-bottom-left-radius: 3px;
50 } 51 }
@@ -74,7 +75,7 @@ li.suggestion {
74#typeahead-container { 75#typeahead-container {
75 input { 76 input {
76 border: 1px solid pvar(--mainBackgroundColor) !important; 77 border: 1px solid pvar(--mainBackgroundColor) !important;
77 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; 78 box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
78 flex-grow: 1; 79 flex-grow: 1;
79 transition: box-shadow .3s ease, width .2s ease; 80 transition: box-shadow .3s ease, width .2s ease;
80 } 81 }
@@ -95,7 +96,7 @@ li.suggestion {
95 right: 10px; 96 right: 10px;
96 } 97 }
97 98
98 & > div:last-child { 99 > div:last-child {
99 // we have to switch the display and not the opacity, 100 // we have to switch the display and not the opacity,
100 // to avoid clashing with the rest of the interface. 101 // to avoid clashing with the rest of the interface.
101 display: none; 102 display: none;
@@ -103,7 +104,7 @@ li.suggestion {
103 104
104 &:focus, 105 &:focus,
105 ::ng-deep &:focus-within { 106 ::ng-deep &:focus-within {
106 & > div:last-child { 107 > div:last-child {
107 @media screen and (min-width: $mobile-view) { 108 @media screen and (min-width: $mobile-view) {
108 display: initial !important; 109 display: initial !important;
109 } 110 }
@@ -111,12 +112,12 @@ li.suggestion {
111 #typeahead-help, 112 #typeahead-help,
112 #typeahead-instructions, 113 #typeahead-instructions,
113 li.suggestion { 114 li.suggestion {
114 box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px; 115 box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
115 } 116 }
116 } 117 }
117 118
118 ::ng-deep input { 119 ::ng-deep input {
119 box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px; 120 box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
120 border-end-start-radius: 0; 121 border-end-start-radius: 0;
121 border-end-end-radius: 0; 122 border-end-end-radius: 0;
122 123
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 692a81daa..9163de0b1 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -2,9 +2,11 @@
2 2
3a { 3a {
4 @include disable-default-a-behaviour; 4 @include disable-default-a-behaviour;
5
5 width: 100%; 6 width: 100%;
6 7
7 &, &:hover { 8 &,
9 &:hover {
8 color: pvar(--mainForegroundColor); 10 color: pvar(--mainForegroundColor);
9 11
10 &.focus-visible { 12 &.focus-visible {
@@ -23,10 +25,10 @@ a {
23} 25}
24 26
25my-global-icon { 27my-global-icon {
28 @include apply-svg-color(pvar(--mainForegroundColor));
29
26 width: 17px; 30 width: 17px;
27 position: relative; 31 position: relative;
28 top: -2px; 32 top: -2px;
29 margin: 5px; 33 margin: 5px;
30
31 @include apply-svg-color(pvar(--mainForegroundColor));
32} 34}
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 6226a85cb..800b1ebef 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -5,12 +5,12 @@
5 @include peertube-button-link; 5 @include peertube-button-link;
6 @include orange-button; 6 @include orange-button;
7 7
8 border-radius: 0;
9
8 &.focus-visible, 10 &.focus-visible,
9 &:focus { 11 &:focus {
10 box-shadow: none; 12 box-shadow: none;
11 } 13 }
12
13 border-radius: 0;
14} 14}
15 15
16.modal-body { 16.modal-body {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c84a08b1d..d0edd820e 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -24,8 +24,9 @@ $footer-links-base-opacity: .8;
24 background-color: rgba(255, 255, 255, 0.15); 24 background-color: rgba(255, 255, 255, 0.15);
25 } 25 }
26 26
27 &:hover, &.focus-visible { 27 &:hover,
28 background-color: rgba(255, 255, 255, 0.10); 28 &.focus-visible {
29 background-color: rgba(255, 255, 255, 0.1);
29 } 30 }
30 31
31 my-global-icon { 32 my-global-icon {
@@ -60,7 +61,8 @@ menu {
60 margin: 0; 61 margin: 0;
61 padding: 0; 62 padding: 0;
62 63
63 &:focus, &:hover { 64 &:focus,
65 &:hover {
64 overflow-y: auto; 66 overflow-y: auto;
65 } 67 }
66 68
@@ -125,7 +127,7 @@ my-notification {
125 line-height: 1; 127 line-height: 1;
126 128
127 &.show { 129 &.show {
128 background-color: rgba(255, 255, 255, 0.20); 130 background-color: rgba(255, 255, 255, 0.2);
129 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); 131 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
130 } 132 }
131 133
@@ -158,14 +160,14 @@ my-notification {
158 position: absolute; 160 position: absolute;
159 right: -35px; 161 right: -35px;
160 top: -8px; 162 top: -8px;
161 color: grey; 163 color: #808080;
162 width: $main-radius; 164 width: $main-radius;
163 } 165 }
164 } 166 }
165 167
166 .dropdown-toggle { 168 .dropdown-toggle {
167 &::after { 169 &::after {
168 border: none; 170 border: 0;
169 } 171 }
170 } 172 }
171 173
@@ -193,11 +195,11 @@ my-actor-avatar {
193} 195}
194 196
195.logged-in-display-name { 197.logged-in-display-name {
198 @include disable-default-a-behaviour;
199
196 font-size: 16px; 200 font-size: 16px;
197 font-weight: $font-semibold; 201 font-weight: $font-semibold;
198 color: pvar(--menuForegroundColor); 202 color: pvar(--menuForegroundColor);
199
200 @include disable-default-a-behaviour;
201} 203}
202 204
203.logged-in-username { 205.logged-in-username {
@@ -251,7 +253,7 @@ my-actor-avatar {
251} 253}
252 254
253.login-buttons-block { 255.login-buttons-block {
254 margin: 30px 25px 35px 25px; 256 margin: 30px 25px 35px;
255 257
256 > a { 258 > a {
257 display: block; 259 display: block;
@@ -305,7 +307,8 @@ my-actor-avatar {
305} 307}
306 308
307.footer-links { 309.footer-links {
308 &, > div { 310 &,
311 > div {
309 display: flex; 312 display: flex;
310 flex-wrap: wrap; 313 flex-wrap: wrap;
311 } 314 }
@@ -388,29 +391,29 @@ my-actor-avatar {
388 .dropdown-item:hover, 391 .dropdown-item:hover,
389 .dropdown-item:active { 392 .dropdown-item:active {
390 &.settings-sensitive my-global-icon ::ng-deep svg { 393 &.settings-sensitive my-global-icon ::ng-deep svg {
391 margin-top: 0px !important; 394 margin-top: 0 !important;
392 } 395 }
393 } 396 }
394} 397}
395 398
396my-global-icon { 399my-global-icon {
397 &[iconName="playlists"] { 400 &[iconName=playlists] {
398 height: 24px; 401 height: 24px;
399 width: 24px; 402 width: 24px;
400 403
401 margin-right: 16px; 404 margin-right: 16px;
402 } 405 }
403 406
404 &[iconName="videos"] { 407 &[iconName=videos] {
405 position: relative; 408 position: relative;
406 right: -1px; 409 right: -1px;
407 } 410 }
408 411
409 &[iconName="channel"] { 412 &[iconName=channel] {
410 margin-top: -2px; 413 margin-top: -2px;
411 } 414 }
412 415
413 &[iconName="sign-out"] { 416 &[iconName='sign-out'] {
414 position: relative; 417 position: relative;
415 right: -2px; 418 right: -2px;
416 height: 20px; 419 height: 20px;
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index c65787779..554c20ca9 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -16,19 +16,20 @@
16.notification-inbox-popover, 16.notification-inbox-popover,
17.notification-inbox-link a { 17.notification-inbox-link a {
18 @include apply-svg-color(#808080); 18 @include apply-svg-color(#808080);
19 ::ng-deep {
20 svg {
21 transition: color .1s ease-in-out;
22 }
23 }
24 19
25 transition: all .1s ease-in-out; 20 transition: all .1s ease-in-out;
26 border-radius: 25px; 21 border-radius: 25px;
27 cursor: pointer; 22 cursor: pointer;
28 23
29 &:hover, &:active { 24 ::ng-deep svg {
30 background-color: rgba(255, 255, 255, 0.15); 25 transition: color .1s ease-in-out;
26 }
27
28 &:hover,
29 &:active {
31 @include apply-svg-color(#fff); 30 @include apply-svg-color(#fff);
31
32 background-color: rgba(255, 255, 255, 0.15);
32 } 33 }
33} 34}
34 35
@@ -59,7 +60,7 @@
59 font-size: 14px; 60 font-size: 14px;
60 font-family: $main-fonts; 61 font-family: $main-fonts;
61 width: 400px; 62 width: 400px;
62 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30); 63 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
63 64
64 .loader { 65 .loader {
65 display: flex; 66 display: flex;
@@ -80,7 +81,7 @@
80 max-height: 500px; 81 max-height: 500px;
81 } 82 }
82 83
83 & > my-user-notifications:nth-child(2) { 84 > my-user-notifications:nth-child(2) {
84 overflow-y: auto; 85 overflow-y: auto;
85 flex-grow: 1; 86 flex-grow: 1;
86 } 87 }
@@ -110,7 +111,8 @@
110 background: transparent; 111 background: transparent;
111 } 112 }
112 113
113 a, button { 114 a,
115 button {
114 color: rgba(20, 20, 20, 0.5); 116 color: rgba(20, 20, 20, 0.5);
115 117
116 &:hover:not(:disabled) { 118 &:hover:not(:disabled) {
@@ -133,7 +135,8 @@
133 } 135 }
134} 136}
135 137
136.notification-inbox-popover, .notification-inbox-link { 138.notification-inbox-popover,
139.notification-inbox-link {
137 cursor: pointer; 140 cursor: pointer;
138 position: relative; 141 position: relative;
139 142
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index 28d5dc49c..5e9e3dc51 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -42,7 +42,7 @@ li {
42 text-align: center; 42 text-align: center;
43 font-weight: 600; 43 font-weight: 600;
44 font-size: 18px; 44 font-size: 18px;
45 margin: 20px 0 40px 0; 45 margin: 20px 0 40px;
46} 46}
47 47
48.columns { 48.columns {
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
index f014dec48..bf50de4e9 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -30,29 +30,29 @@
30} 30}
31 31
32.avatar-32 { 32.avatar-32 {
33 --avatarSize: 32px; 33 --avatarSize: 32px;
34} 34}
35 35
36.avatar-34 { 36.avatar-34 {
37 --avatarSize: 34px; 37 --avatarSize: 34px;
38} 38}
39 39
40.avatar-36 { 40.avatar-36 {
41 --avatarSize: 36px; 41 --avatarSize: 36px;
42} 42}
43 43
44.avatar-40 { 44.avatar-40 {
45 --avatarSize: 40px; 45 --avatarSize: 40px;
46} 46}
47 47
48.avatar-100 { 48.avatar-100 {
49 --avatarSize: 100px; 49 --avatarSize: 100px;
50 --initialFontSize: 40px; 50 --initialFontSize: 40px;
51 } 51}
52 52
53.avatar-120 { 53.avatar-120 {
54 --avatarSize: 120px; 54 --avatarSize: 120px;
55 --initialFontSize: 46px; 55 --initialFontSize: 46px;
56} 56}
57 57
58a:hover { 58a:hover {
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
index c14950bd7..290a70db8 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -5,7 +5,7 @@ input {
5 position: absolute; 5 position: absolute;
6 visibility: hidden; 6 visibility: hidden;
7 7
8 & + label { 8 + label {
9 cursor: pointer; 9 cursor: pointer;
10 text-indent: -9999px; 10 text-indent: -9999px;
11 width: 35px; 11 width: 35px;
@@ -16,7 +16,7 @@ input {
16 position: relative; 16 position: relative;
17 margin: 0; 17 margin: 0;
18 18
19 &:after { 19 &::after {
20 content: ''; 20 content: '';
21 position: absolute; 21 position: absolute;
22 top: 3px; 22 top: 3px;
@@ -28,7 +28,7 @@ input {
28 transition: 0.3s ease-out; 28 transition: 0.3s ease-out;
29 } 29 }
30 30
31 &:active:after { 31 &:active::after {
32 width: 40px; 32 width: 40px;
33 } 33 }
34 } 34 }
@@ -36,7 +36,7 @@ input {
36 &:checked + label { 36 &:checked + label {
37 background: pvar(--mainColor); 37 background: pvar(--mainColor);
38 38
39 &:after { 39 &::after {
40 left: calc(100% - 3px); 40 left: calc(100% - 3px);
41 transform: translateX(-100%); 41 transform: translateX(-100%);
42 } 42 }
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 8203c7d1c..1f72dbc32 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -18,7 +18,7 @@ $input-border-radius: 3px;
18 18
19 font-family: monospace; 19 font-family: monospace;
20 font-size: 13px; 20 font-size: 13px;
21 border-bottom: none; 21 border-bottom: 0;
22 border-bottom-left-radius: unset; 22 border-bottom-left-radius: unset;
23 border-bottom-right-radius: unset; 23 border-bottom-right-radius: unset;
24 } 24 }
@@ -51,7 +51,8 @@ $input-border-radius: 3px;
51 opacity: 0.6; 51 opacity: 0.6;
52 } 52 }
53 53
54 &:hover, &:active { 54 &:hover,
55 &:active {
55 svg { 56 svg {
56 opacity: 1; 57 opacity: 1;
57 } 58 }
@@ -105,6 +106,8 @@ $input-border-radius: 3px;
105} 106}
106 107
107@mixin maximized-base { 108@mixin maximized-base {
109 $nav-preview-vertical-padding: 40px;
110
108 flex-direction: row; 111 flex-direction: row;
109 z-index: #{z(header) - 1}; 112 z-index: #{z(header) - 1};
110 position: fixed; 113 position: fixed;
@@ -115,20 +118,18 @@ $input-border-radius: 3px;
115 width: calc(100% - #{$menu-width}); 118 width: calc(100% - #{$menu-width});
116 height: calc(100vh - #{$header-height}) !important; 119 height: calc(100vh - #{$header-height}) !important;
117 120
118 $nav-preview-vertical-padding: 40px;
119
120 .nav-preview { 121 .nav-preview {
121 @include nav-preview-medium(); 122 @include nav-preview-medium();
122 padding-top: #{$nav-preview-vertical-padding / 2}; 123 padding-top: #{$nav-preview-vertical-padding / 2};
123 padding-bottom: #{$nav-preview-vertical-padding / 2}; 124 padding-bottom: #{$nav-preview-vertical-padding / 2};
124 padding-left: 0px; 125 padding-left: 0;
125 padding-right: 0px; 126 padding-right: 0;
126 position: absolute; 127 position: absolute;
127 background-color: pvar(--mainBackgroundColor); 128 background-color: pvar(--mainBackgroundColor);
128 width: 100% !important; 129 width: 100% !important;
129 border-top: none; 130 border-top: 0;
130 border-left: none; 131 border-left: 0;
131 border-right: none; 132 border-right: 0;
132 133
133 :last-child { 134 :last-child {
134 margin-right: pvar(--horizontalMarginContent); 135 margin-right: pvar(--horizontalMarginContent);
@@ -148,7 +149,7 @@ $input-border-radius: 3px;
148 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important; 149 margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
149 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important; 150 height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
150 width: 50% !important; 151 width: 50% !important;
151 border: none !important; 152 border: 0 !important;
152 border-radius: unset !important; 153 border-radius: unset !important;
153 } 154 }
154 155
@@ -249,11 +250,11 @@ $input-border-radius: 3px;
249} 250}
250 251
251@media only screen and (min-width: $small-view) { 252@media only screen and (min-width: $small-view) {
253 @include maximized-in-medium-view();
254
252 :host-context(.expanded) { 255 :host-context(.expanded) {
253 @include in-medium-view(); 256 @include in-medium-view();
254 } 257 }
255
256 @include maximized-in-medium-view();
257} 258}
258 259
259@media only screen and (min-width: #{$small-view + $menu-width}) { 260@media only screen and (min-width: #{$small-view + $menu-width}) {
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 cf8540dc3..203b82d0b 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -46,7 +46,7 @@
46 line-height: 12px; 46 line-height: 12px;
47 font-weight: 500; 47 font-weight: 500;
48 color: pvar(--inputPlaceholderColor); 48 color: pvar(--inputPlaceholderColor);
49 background-color: rgba(217,225,232,.1); 49 background-color: rgba(217, 225, 232, .1);
50 border: 1px solid rgba(217,225,232,.5); 50 border: 1px solid rgba(217, 225, 232, .5);
51 } 51 }
52} \ No newline at end of file 52}
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.scss b/client/src/app/shared/shared-forms/preview-upload.component.scss
index 88eccd5f7..c2ee0d6a9 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.scss
+++ b/client/src/app/shared/shared-forms/preview-upload.component.scss
@@ -21,7 +21,7 @@
21 max-width: 100%; 21 max-width: 100%;
22 22
23 &.no-image { 23 &.no-image {
24 border: 2px solid grey; 24 border: 2px solid #808080;
25 background-color: pvar(--mainBackgroundColor); 25 background-color: pvar(--mainBackgroundColor);
26 } 26 }
27 } 27 }
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 80196b8df..7006adab1 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
@@ -32,7 +32,7 @@ ng-select ::ng-deep {
32} 32}
33 33
34.root { 34.root {
35 display:flex; 35 display: flex;
36 align-items: center; 36 align-items: center;
37 37
38 > my-select-options { 38 > my-select-options {
@@ -41,9 +41,9 @@ ng-select ::ng-deep {
41} 41}
42 42
43my-select-options + input { 43my-select-options + input {
44 margin-left: 5px;
45
46 @include peertube-input-text($form-base-input-width); 44 @include peertube-input-text($form-base-input-width);
45
46 margin-left: 5px;
47 display: block; 47 display: block;
48} 48}
49 49
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 66e9aa032..36f5711a6 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,8 +4,7 @@ p-inputmask {
4 ::ng-deep input { 4 ::ng-deep input {
5 width: 80px; 5 width: 80px;
6 font-size: 15px; 6 font-size: 15px;
7 7 border: 0;
8 border: none;
9 8
10 &:focus-within, 9 &:focus-within,
11 &:focus { 10 &:focus {
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 2f6b420e3..615e08bcc 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
@@ -1,6 +1,6 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3@import "./_bootstrap-variables"; 3@import './_bootstrap-variables';
4 4
5@import '~bootstrap/scss/functions'; 5@import '~bootstrap/scss/functions';
6@import '~bootstrap/scss/variables'; 6@import '~bootstrap/scss/variables';
@@ -30,7 +30,7 @@ ngb-accordion ::ng-deep {
30 background-color: unset; 30 background-color: unset;
31 padding: 0; 31 padding: 0;
32 32
33 & + .collapse.show { 33 + .collapse.show {
34 background-color: var(--submenuBackgroundColor); 34 background-color: var(--submenuBackgroundColor);
35 } 35 }
36 } 36 }
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 d17e91fc2..11cf11616 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
@@ -19,7 +19,7 @@ table {
19 .more-info { 19 .more-info {
20 font-style: italic; 20 font-style: italic;
21 font-weight: initial; 21 font-weight: initial;
22 font-size: 14px 22 font-size: 14px;
23 } 23 }
24 } 24 }
25 25
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 724a04efc..b9a4d46dc 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
@@ -8,6 +8,9 @@
8.action-button { 8.action-button {
9 @include peertube-button; 9 @include peertube-button;
10 10
11 display: inline-block;
12 padding: 0 10px;
13
11 &.button-styled { 14 &.button-styled {
12 15
13 &.grey { 16 &.grey {
@@ -18,14 +21,13 @@
18 @include orange-button; 21 @include orange-button;
19 } 22 }
20 23
21 &:hover, &:active, &:focus { 24 &:hover,
25 &:active,
26 &:focus {
22 background-color: $grey-background-color; 27 background-color: $grey-background-color;
23 } 28 }
24 } 29 }
25 30
26 display: inline-block;
27 padding: 0 10px;
28
29 &::after { 31 &::after {
30 display: none; 32 display: none;
31 } 33 }
@@ -64,7 +66,8 @@
64 @include dropdown-with-icon-item; 66 @include dropdown-with-icon-item;
65 } 67 }
66 68
67 a, span { 69 a,
70 span {
68 display: block; 71 display: block;
69 width: 100%; 72 width: 100%;
70 } 73 }
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.scss b/client/src/app/shared/shared-main/date/date-toggle.component.scss
index 86700d1d4..b87f7c475 100644
--- a/client/src/app/shared/shared-main/date/date-toggle.component.scss
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.scss
@@ -1,5 +1,5 @@
1.date-toggle { 1.date-toggle {
2 &:hover { 2 &:hover {
3 cursor: default 3 cursor: default;
4 } 4 }
5} 5}
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index b655ee708..d39f31d70 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -5,14 +5,14 @@
5 width: 100%; 5 width: 100%;
6 6
7 a { 7 a {
8 color: black; 8 color: #000;
9 display: block; 9 display: block;
10 } 10 }
11} 11}
12 12
13my-global-icon { 13my-global-icon {
14 @include apply-svg-color(pvar(--mainForegroundColor));
15
14 cursor: pointer; 16 cursor: pointer;
15 width: 100%; 17 width: 100%;
16
17 @include apply-svg-color(pvar(--mainForegroundColor))
18} 18}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
index ffac9c707..64138afe4 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ b/client/src/app/shared/shared-main/loaders/loader.component.scss
@@ -20,7 +20,7 @@
20 border: 4px solid; 20 border: 4px solid;
21 border-radius: 50%; 21 border-radius: 50%;
22 animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; 22 animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
23 border-color: #999999 transparent transparent transparent; 23 border-color: #999999 transparent transparent;
24} 24}
25 25
26.loader div:nth-child(1) { 26.loader div:nth-child(1) {
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 ccc91ffab..68d7ad48f 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -2,20 +2,19 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.help-tooltip-button { 4.help-tooltip-button {
5 cursor: pointer; 5 @include disable-outline;
6 border: none;
7 6
7 cursor: pointer;
8 border: 0;
8 margin: 5px; 9 margin: 5px;
9 10
10 my-global-icon { 11 my-global-icon {
12 @include apply-svg-color(pvar(--greyForegroundColor));
13
11 width: 17px; 14 width: 17px;
12 position: relative; 15 position: relative;
13 top: -1px; 16 top: -1px;
14
15 @include apply-svg-color(pvar(--greyForegroundColor))
16 } 17 }
17
18 @include disable-outline;
19} 18}
20 19
21::ng-deep { 20::ng-deep {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index 986572801..b2e0982f1 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -2,19 +2,19 @@
2 <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id"> 2 <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
3 <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container> 3 <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
4 </span> 4 </span>
5 5
6 <ng-container *ngIf="isMenuDisplayed()"> 6 <ng-container *ngIf="isMenuDisplayed()">
7 <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()"> 7 <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
8 <span class="glyphicon glyphicon-chevron-down"></span> 8 <span class="glyphicon glyphicon-chevron-down"></span>
9 </button> 9 </button>
10 10
11 <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)"> 11 <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
12 <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }" 12 <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
13 ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button" 13 ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
14 > 14 >
15 <span class="glyphicon glyphicon-chevron-down"></span> 15 <span class="glyphicon glyphicon-chevron-down"></span>
16 </button> 16 </button>
17 17
18 <div ngbDropdownMenu> 18 <div ngbDropdownMenu>
19 <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length" 19 <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
20 [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item"> 20 [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 1ec044489..7e31d3850 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -15,13 +15,13 @@
15 15
16button { 16button {
17 width: 30px; 17 width: 30px;
18 border: none; 18 border: 0;
19 19
20 &::after { 20 &::after {
21 display: none; 21 display: none;
22 } 22 }
23 23
24 &.routeActive { 24 &.route-active {
25 &::after { 25 &::after {
26 display: inherit; 26 display: inherit;
27 border: 2px solid pvar(--mainColor); 27 border: 2px solid pvar(--mainColor);
@@ -36,7 +36,7 @@ button {
36 margin-top: 0 !important; 36 margin-top: 0 !important;
37 position: static; 37 position: static;
38 right: auto; 38 right: auto;
39 bottom: auto 39 bottom: auto;
40} 40}
41 41
42.modal-body { 42.modal-body {
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
index fa9c55ec9..b69d4b5d6 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -21,11 +21,11 @@
21 } 21 }
22 22
23 my-global-icon { 23 my-global-icon {
24 @include apply-svg-color(#333);
25
24 width: 24px; 26 width: 24px;
25 margin-right: 11px; 27 margin-right: 11px;
26 margin-left: 3px; 28 margin-left: 3px;
27
28 @include apply-svg-color(#333);
29 } 29 }
30 30
31 .avatar { 31 .avatar {
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index c670559d3..c06cafe29 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -11,7 +11,8 @@ label {
11 margin-right: 5px; 11 margin-right: 5px;
12 } 12 }
13 13
14 &, .progress { 14 &,
15 .progress {
15 width: 100% !important; 16 width: 100% !important;
16 } 17 }
17 18
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
index 3eede44eb..63a9df823 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -6,6 +6,7 @@
6 6
7 input { 7 input {
8 @include peertube-input-text(250px); 8 @include peertube-input-text(250px);
9
9 flex-grow: 1; 10 flex-grow: 1;
10 } 11 }
11} 12}
@@ -17,4 +18,4 @@
17.unblock-button { 18.unblock-button {
18 @include peertube-button; 19 @include peertube-button;
19 @include grey-button; 20 @include grey-button;
20} \ No newline at end of file 21}
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index cdcc12fe0..ab43d8457 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -17,12 +17,18 @@
17 word-wrap: break-word; 17 word-wrap: break-word;
18 18
19 ::ng-deep p:last-child { 19 ::ng-deep p:last-child {
20 margin-bottom: 0px !important; 20 margin-bottom: 0 !important;
21 } 21 }
22 } 22 }
23} 23}
24 24
25.screenratio { 25.screenratio {
26 @include block-ratio($selector: 'div, ::ng-deep iframe') {
27 width: 100% !important;
28 height: 100% !important;
29 left: 0;
30 };
31
26 div { 32 div {
27 @include miniature-thumbnail; 33 @include miniature-thumbnail;
28 34
@@ -31,12 +37,6 @@
31 align-items: center; 37 align-items: center;
32 color: pvar(--inputPlaceholderColor); 38 color: pvar(--inputPlaceholderColor);
33 } 39 }
34
35 @include block-ratio($selector: 'div, ::ng-deep iframe') {
36 width: 100% !important;
37 height: 100% !important;
38 left: 0;
39 };
40} 40}
41 41
42.input-group { 42.input-group {
@@ -93,15 +93,15 @@ my-action-dropdown.show {
93 display: inline-flex; 93 display: inline-flex;
94 94
95 .table-video-image { 95 .table-video-image {
96 @include miniature-thumbnail;
97
98 $image-height: 45px; 96 $image-height: 45px;
99 97
98 @include miniature-thumbnail;
99
100 height: $image-height; 100 height: $image-height;
101 width: #{(16/9) * $image-height}; 101 width: #{(16/9) * $image-height};
102 margin-right: 0.5rem; 102 margin-right: 0.5rem;
103 border-radius: 2px; 103 border-radius: 2px;
104 border: none; 104 border: 0;
105 background: transparent; 105 background: transparent;
106 display: inline-flex; 106 display: inline-flex;
107 justify-content: center; 107 justify-content: center;
@@ -139,7 +139,7 @@ my-action-dropdown.show {
139 139
140 div .glyphicon { 140 div .glyphicon {
141 font-size: 80%; 141 font-size: 80%;
142 color: gray; 142 color: #808080;
143 margin-left: 0.1rem; 143 margin-left: 0.1rem;
144 } 144 }
145 145
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index 31db4d92b..af21c0c20 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -5,7 +5,8 @@ a {
5 @include disable-default-a-behaviour; 5 @include disable-default-a-behaviour;
6 display: inline-block; 6 display: inline-block;
7 7
8 &, &:hover { 8 &,
9 &:hover {
9 color: pvar(--mainForegroundColor); 10 color: pvar(--mainForegroundColor);
10 } 11 }
11 12
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index afa0d96f7..a6e33070b 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -7,5 +7,5 @@ textarea {
7 7
8.live-info { 8.live-info {
9 font-size: 15px; 9 font-size: 15px;
10 margin: 40px 0 20px 0; 10 margin: 40px 0 20px;
11} 11}
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index ea59ab346..e678d6edf 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -11,7 +11,7 @@
11 width: 100%; 11 width: 100%;
12 position: absolute; 12 position: absolute;
13 bottom: 0; 13 bottom: 0;
14 background-color: rgba(0, 0, 0, 0.20); 14 background-color: rgba(0, 0, 0, 0.2);
15 15
16 div { 16 div {
17 height: 100%; 17 height: 100%;
@@ -39,8 +39,8 @@
39 top: 5px; 39 top: 5px;
40 font-weight: $font-bold; 40 font-weight: $font-bold;
41 41
42 &.warning { background-color: orange; } 42 &.warning { background-color: #ffa500; }
43 &.danger { background-color: red; } 43 &.danger { background-color: #ff0000; }
44} 44}
45 45
46.video-thumbnail-duration-overlay, 46.video-thumbnail-duration-overlay,
@@ -77,9 +77,9 @@
77 padding: 3px; 77 padding: 3px;
78 78
79 my-global-icon { 79 my-global-icon {
80 @include apply-svg-color(#fff);
81
80 width: 22px; 82 width: 22px;
81 height: 22px; 83 height: 22px;
82
83 @include apply-svg-color(#fff);
84 } 84 }
85} 85}
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
index 698c5866a..73db0d090 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
@@ -3,4 +3,4 @@
3.btn-remote-follow { 3.btn-remote-follow {
4 @include peertube-button; 4 @include peertube-button;
5 @include orange-button; 5 @include orange-button;
6} \ No newline at end of file 6}
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index f6cdc11c0..897ee7799 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -8,8 +8,8 @@
8 float: right; 8 float: right;
9 padding: 0; 9 padding: 0;
10 10
11 & > .btn, 11 > .btn,
12 & > .dropdown > .dropdown-toggle { 12 > .dropdown > .dropdown-toggle {
13 font-size: 15px; 13 font-size: 15px;
14 } 14 }
15 15
@@ -20,7 +20,7 @@
20 &.big { 20 &.big {
21 height: 35px; 21 height: 35px;
22 22
23 & > button:first-child { 23 > button:first-child {
24 width: max-content; 24 width: max-content;
25 min-width: 175px; 25 min-width: 175px;
26 } 26 }
@@ -29,7 +29,7 @@
29 span:first-child { 29 span:first-child {
30 line-height: 80%; 30 line-height: 80%;
31 } 31 }
32 32
33 span:not(:first-child) { 33 span:not(:first-child) {
34 font-size: 75%; 34 font-size: 75%;
35 } 35 }
@@ -37,15 +37,15 @@
37 } 37 }
38 38
39 // Unlogged 39 // Unlogged
40 & > .dropdown > .dropdown-toggle span { 40 > .dropdown > .dropdown-toggle span {
41 padding-right: 3px; 41 padding-right: 3px;
42 } 42 }
43 43
44 // Logged 44 // Logged
45 & > .btn { 45 > .btn {
46 padding-right: 4px; 46 padding-right: 4px;
47 47
48 & + .dropdown > button { 48 + .dropdown > button {
49 padding-left: 2px; 49 padding-left: 2px;
50 50
51 &::after { 51 &::after {
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 467ca1d2c..d9cf7a14f 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -3,7 +3,7 @@
3@import '_mixins'; 3@import '_mixins';
4@import '_miniature'; 4@import '_miniature';
5 5
6$iconSize: 16px; 6$icon-size: 16px;
7 7
8::ng-deep my-video-list-header { 8::ng-deep my-video-list-header {
9 display: flex; 9 display: flex;
@@ -17,20 +17,19 @@ $iconSize: 16px;
17 17
18 my-feed { 18 my-feed {
19 display: inline-block; 19 display: inline-block;
20 width: calc(#{$iconSize} - 2px); 20 width: calc(#{$icon-size} - 2px);
21 } 21 }
22 22
23 .moderation-block { 23 .moderation-block {
24
25 my-global-icon {
26 position: relative;
27 width: $iconSize;
28 }
29
30 margin-left: .4rem; 24 margin-left: .4rem;
31 display: flex; 25 display: flex;
32 justify-content: flex-end; 26 justify-content: flex-end;
33 align-items: center; 27 align-items: center;
28
29 my-global-icon {
30 position: relative;
31 width: $icon-size;
32 }
34 } 33 }
35} 34}
36 35
@@ -72,7 +71,7 @@ $iconSize: 16px;
72 71
73 .title-page { 72 .title-page {
74 margin-bottom: 10px; 73 margin-bottom: 10px;
75 margin-right: 0px; 74 margin-right: 0;
76 } 75 }
77 } 76 }
78} 77}
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index 7f6e03c87..b689b1046 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -28,7 +28,7 @@
28 28
29 border-top-right-radius: 0; 29 border-top-right-radius: 0;
30 border-bottom-right-radius: 0; 30 border-bottom-right-radius: 0;
31 border-right: none; 31 border-right: 0;
32 32
33 select { 33 select {
34 height: inherit; 34 height: inherit;
@@ -85,7 +85,7 @@
85 &.metadata-attribute-tags { 85 &.metadata-attribute-tags {
86 .metadata-attribute-value:not(:nth-child(2)) { 86 .metadata-attribute-value:not(:nth-child(2)) {
87 &::before { 87 &::before {
88 content: ', ' 88 content: ', ';
89 } 89 }
90 } 90 }
91 } 91 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index c142e2e93..5df89d019 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -41,7 +41,7 @@ my-actor-avatar {
41} 41}
42 42
43.video-info-blocked { 43.video-info-blocked {
44 color: red; 44 color: #ff0000;
45 45
46 .blocked-reason::before { 46 .blocked-reason::before {
47 content: ' - '; 47 content: ' - ';
@@ -49,7 +49,7 @@ my-actor-avatar {
49} 49}
50 50
51.video-info-nsfw { 51.video-info-nsfw {
52 color: red; 52 color: #ff0000;
53} 53}
54 54
55.video-actions { 55.video-actions {
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index b84cacece..cb1168196 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -126,7 +126,7 @@ $timestamp-margin-right: 10px;
126 border-top: 1px solid $separator-border-color; 126 border-top: 1px solid $separator-border-color;
127} 127}
128 128
129.new-playlist-button { 129.new-playlist-button {
130 cursor: pointer; 130 cursor: pointer;
131 131
132 my-global-icon { 132 my-global-icon {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 572f7d7a8..9ccd03912 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -84,21 +84,23 @@ my-video-thumbnail,
84 width: auto; 84 width: auto;
85 } 85 }
86 86
87 .video-info-account, .video-info-timestamp { 87 .video-info-account,
88 .video-info-timestamp {
88 color: pvar(--greyForegroundColor); 89 color: pvar(--greyForegroundColor);
89 } 90 }
90 } 91 }
91 } 92 }
92 93
93 .video-info-name { 94 .video-info-name {
95 @include ellipsis;
96
94 font-size: 18px; 97 font-size: 18px;
95 font-weight: $font-semibold; 98 font-weight: $font-semibold;
96 display: inline-block; 99 display: inline-block;
97
98 @include ellipsis;
99 } 100 }
100 101
101 .more, my-edit-button { 102 .more,
103 my-edit-button {
102 justify-self: flex-end; 104 justify-self: flex-end;
103 margin-left: auto; 105 margin-left: auto;
104 cursor: pointer; 106 cursor: pointer;
@@ -118,7 +120,7 @@ my-video-thumbnail,
118 display: flex; 120 display: flex;
119 121
120 &::after { 122 &::after {
121 border: none; 123 border: 0;
122 } 124 }
123 } 125 }
124 } 126 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 99089166c..a46a6e475 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -6,7 +6,7 @@
6 display: inline-block; 6 display: inline-block;
7 width: 100%; 7 width: 100%;
8 8
9 &.no-videos:not(.to-manage){ 9 &.no-videos:not(.to-manage) {
10 a { 10 a {
11 cursor: default !important; 11 cursor: default !important;
12 } 12 }