aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-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
-rw-r--r--client/src/sass/application.scss57
-rw-r--r--client/src/sass/bootstrap.scss40
-rw-r--r--client/src/sass/include/_actor.scss2
-rw-r--r--client/src/sass/include/_bootstrap.scss2
-rw-r--r--client/src/sass/include/_fonts.scss4
-rw-r--r--client/src/sass/include/_miniature.scss14
-rw-r--r--client/src/sass/include/_mixins.scss116
-rw-r--r--client/src/sass/include/_variables.scss6
-rw-r--r--client/src/sass/ng-select.scss9
-rw-r--r--client/src/sass/player/context-menu.scss10
-rw-r--r--client/src/sass/player/index.scss6
-rw-r--r--client/src/sass/player/mobile.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss48
-rw-r--r--client/src/sass/player/playlist.scss12
-rw-r--r--client/src/sass/player/settings-menu.scss2
-rw-r--r--client/src/sass/player/spinner.scss2
-rw-r--r--client/src/sass/player/stats.scss5
-rw-r--r--client/src/sass/player/upnext.scss14
-rw-r--r--client/src/sass/primeng-custom.scss3
-rw-r--r--client/src/standalone/videos/embed.scss25
-rw-r--r--client/src/standalone/videos/test-embed.scss22
113 files changed, 523 insertions, 456 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 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index fa9c0d992..89b6f0c4c 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -8,9 +8,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
8 8
9@import './bootstrap'; 9@import './bootstrap';
10@import './primeng-custom'; 10@import './primeng-custom';
11@import './ng-select.scss'; 11@import './ng-select';
12 12
13@import './classes.scss'; 13@import './classes';
14 14
15[hidden] { 15[hidden] {
16 display: none !important; 16 display: none !important;
@@ -89,14 +89,16 @@ input.readonly {
89 background-color: pvar(--inputBackgroundColor) !important; 89 background-color: pvar(--inputBackgroundColor) !important;
90} 90}
91 91
92input, textarea { 92input,
93textarea {
93 outline: none; 94 outline: none;
94 color: pvar(--inputForegroundColor); 95 color: pvar(--inputForegroundColor);
95} 96}
96 97
97button { 98button {
98 background: unset;
99 @include disable-outline; 99 @include disable-outline;
100
101 background: unset;
100} 102}
101 103
102label { 104label {
@@ -121,12 +123,12 @@ code {
121 margin-top: 5px; 123 margin-top: 5px;
122} 124}
123 125
124.input-error 126.input-error,
125my-input-toggle-hidden ::ng-deep input { 127my-input-toggle-hidden ::ng-deep input {
126 border-color: $red !important; 128 border-color: $red !important;
127} 129}
128 130
129.fullWidth { 131.full-width {
130 width: 100%; 132 width: 100%;
131 margin-left: auto; 133 margin-left: auto;
132 margin-right: auto; 134 margin-right: auto;
@@ -134,7 +136,7 @@ my-input-toggle-hidden ::ng-deep input {
134} 136}
135 137
136.glyphicon-black { 138.glyphicon-black {
137 color: black; 139 color: #000;
138} 140}
139 141
140.row { 142.row {
@@ -184,26 +186,26 @@ my-input-toggle-hidden ::ng-deep input {
184 width: 100%; 186 width: 100%;
185 } 187 }
186 188
187 &.lock-scroll .main-row > router-outlet + * { 189 &.lock-scroll .main-row > router-outlet + * { /* stylelint-disable-line selector-max-compound-selectors */
188 // Lock and hide body scrollbars 190 // Lock and hide body scrollbars
189 position: fixed; 191 position: fixed;
190 192
191 // Lock and hide sub-menu scrollbars 193 // Lock and hide sub-menu scrollbars
192 .sub-menu { 194 .sub-menu { /* stylelint-disable-line */
193 overflow-x: hidden; 195 overflow-x: hidden;
194 } 196 }
195 } 197 }
196} 198}
197 199
198.title-page { 200.title-page {
201 @include disable-default-a-behaviour;
202
199 opacity: 0.6; 203 opacity: 0.6;
200 color: pvar(--mainForegroundColor); 204 color: pvar(--mainForegroundColor);
201 font-size: 16px; 205 font-size: 16px;
202 display: inline-block; 206 display: inline-block;
203 margin-right: 55px; 207 margin-right: 55px;
204 font-weight: $font-semibold; 208 font-weight: $font-semibold;
205 @include disable-default-a-behaviour;
206
207 border-bottom: 2px solid transparent; 209 border-bottom: 2px solid transparent;
208 210
209 &.title-page-single { 211 &.title-page-single {
@@ -219,13 +221,19 @@ my-input-toggle-hidden ::ng-deep input {
219 font-size: 125%; 221 font-size: 125%;
220 } 222 }
221 223
222 &:hover, &:active, &:focus { 224 &:hover,
225 &:active,
226 &:focus {
223 color: pvar(--mainForegroundColor); 227 color: pvar(--mainForegroundColor);
224 } 228 }
225 229
226 &.active, &:hover, &:active, &:focus, &.title-page-single { 230 &.active,
231 &:hover,
232 &:active,
233 &:focus,
234 &.title-page-single {
227 opacity: 1; 235 opacity: 1;
228 outline: 0px hidden !important; 236 outline: 0 hidden !important;
229 } 237 }
230 238
231 @media screen and (max-width: $mobile-view) { 239 @media screen and (max-width: $mobile-view) {
@@ -262,7 +270,10 @@ my-input-toggle-hidden ::ng-deep input {
262 background-color: pvar(--submenuBackgroundColor); 270 background-color: pvar(--submenuBackgroundColor);
263 } 271 }
264 272
265 &.active, &:hover, &:active, &:focus { 273 &.active,
274 &:hover,
275 &:active,
276 &:focus {
266 opacity: 1; 277 opacity: 1;
267 } 278 }
268 } 279 }
@@ -275,8 +286,13 @@ my-input-toggle-hidden ::ng-deep input {
275 286
276// In tables, don't have a hover different background 287// In tables, don't have a hover different background
277table { 288table {
278 .action-button-edit, .action-button-delete { 289 .action-button-edit,
279 &:hover, &:active, &:focus, &[disabled], &.disabled { 290 .action-button-delete {
291 &:hover,
292 &:active,
293 &:focus,
294 &[disabled],
295 &.disabled {
280 background-color: $grey-background-color !important; 296 background-color: $grey-background-color !important;
281 } 297 }
282 } 298 }
@@ -329,15 +345,12 @@ ngx-loading-bar {
329 345
330@media screen and (max-width: #{breakpoint(xxl)}) { 346@media screen and (max-width: #{breakpoint(xxl)}) {
331 .main-col { 347 .main-col {
332 & { 348 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
333 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2}; 349 --videosHorizontalMarginContent: 30px;
334 }
335 350
336 &.expanded { 351 &.expanded {
337 --horizontalMarginContent: #{$expanded-horizontal-margins / 2}; 352 --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
338 } 353 }
339
340 --videosHorizontalMarginContent: 30px;
341 } 354 }
342} 355}
343 356
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0ab6230c8..548e55e1e 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -6,7 +6,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
6 6
7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
8.glyphicon-refresh-animate { 8.glyphicon-refresh-animate {
9 animation: spin .7s infinite linear; 9 animation: spin 0.7s infinite linear;
10} 10}
11 11
12.glyphicon-duplicate { 12.glyphicon-duplicate {
@@ -25,6 +25,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
25 from { 25 from {
26 transform: scale(1) rotate(0deg); 26 transform: scale(1) rotate(0deg);
27 } 27 }
28
28 to { 29 to {
29 transform: scale(1) rotate(360deg); 30 transform: scale(1) rotate(360deg);
30 } 31 }
@@ -70,7 +71,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
70 &.active { 71 &.active {
71 color: pvar(--mainBackgroundColor) !important; 72 color: pvar(--mainBackgroundColor) !important;
72 background-color: pvar(--mainHoverColor); 73 background-color: pvar(--mainHoverColor);
73 opacity: .9; 74 opacity: 0.9;
74 } 75 }
75 76
76 &:active { 77 &:active {
@@ -97,9 +98,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
97} 98}
98 99
99@media screen and (min-width: #{breakpoint(md)}) { 100@media screen and (min-width: #{breakpoint(md)}) {
100 .modal:before { 101 .modal::before {
101 vertical-align: middle; 102 vertical-align: middle;
102 content: " "; 103 content: ' ';
103 height: 100%; 104 height: 100%;
104 } 105 }
105 106
@@ -123,7 +124,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
123 } 124 }
124 125
125 .modal-header { 126 .modal-header {
126 border-bottom: none; 127 border-bottom: 0;
127 margin-bottom: 5px; 128 margin-bottom: 5px;
128 129
129 .modal-title { 130 .modal-title {
@@ -140,10 +141,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
140 141
141 margin: 0; 142 margin: 0;
142 padding: 0; 143 padding: 0;
143 opacity: .5; 144 opacity: 0.5;
144 145
145 &[iconName="cross"] { 146 &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
146 @include icon(16px); 147 @include icon(16px);
148
147 top: -3px; 149 top: -3px;
148 } 150 }
149 } 151 }
@@ -154,7 +156,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
154 text-align: right; 156 text-align: right;
155 157
156 > .peertube-button:not(:first-child) { 158 > .peertube-button:not(:first-child) {
157 margin-left: 10px 159 margin-left: 10px;
158 } 160 }
159 } 161 }
160} 162}
@@ -168,7 +170,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
168 170
169// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll 171// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
170@media (hover: none) and (pointer: coarse) { 172@media (hover: none) and (pointer: coarse) {
171 .modal-open, .menu-open { 173 .modal-open,
174 .menu-open {
172 overflow: hidden !important; 175 overflow: hidden !important;
173 } 176 }
174 177
@@ -176,7 +179,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
176 .menu-open { 179 .menu-open {
177 .main-col { 180 .main-col {
178 &::before { 181 &::before {
179 background-color: black; 182 background-color: #000;
180 width: 100vw; 183 width: 100vw;
181 height: 100vh; 184 height: 100vh;
182 opacity: 0.75; 185 opacity: 0.75;
@@ -204,7 +207,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
204 .nav-link { 207 .nav-link {
205 opacity: 0.6 !important; 208 opacity: 0.6 !important;
206 209
207 &.active, &:hover, &:active, &:focus { 210 &.active,
211 &:hover,
212 &:active,
213 &:focus {
208 opacity: 1 !important; 214 opacity: 1 !important;
209 } 215 }
210 } 216 }
@@ -221,7 +227,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
221 227
222 color: pvar(--mainForegroundColor); 228 color: pvar(--mainForegroundColor);
223 font-weight: $font-semibold; 229 font-weight: $font-semibold;
224 border: none; 230 border: 0;
225 border-bottom: 2px solid transparent; 231 border-bottom: 2px solid transparent;
226 opacity: 0.6; 232 opacity: 0.6;
227 233
@@ -231,7 +237,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
231 border-bottom-color: pvar(--mainColor); 237 border-bottom-color: pvar(--mainColor);
232 } 238 }
233 239
234 &.active, &:hover, &:active, &:focus { 240 &.active,
241 &:hover,
242 &:active,
243 &:focus {
235 opacity: 1; 244 opacity: 1;
236 } 245 }
237} 246}
@@ -314,9 +323,10 @@ ngb-tooltip-window {
314} 323}
315 324
316.input-group { 325.input-group {
317 & > .form-control { 326 > .form-control {
318 flex: initial; 327 flex: initial;
319 } 328 }
329
320 input.form-control { 330 input.form-control {
321 width: unset !important; 331 width: unset !important;
322 flex-grow: 1; 332 flex-grow: 1;
@@ -366,7 +376,7 @@ ngb-tooltip-window {
366 border: 1px solid #eee; 376 border: 1px solid #eee;
367 border-radius: .25rem; 377 border-radius: .25rem;
368 378
369 & > label { 379 > label {
370 position: relative; 380 position: relative;
371 top: -5px; 381 top: -5px;
372 left: -10px; 382 left: -10px;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ccfd73ecd..38bd90ae6 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -17,7 +17,7 @@
17@mixin show-more-description { 17@mixin show-more-description {
18 color: pvar(--mainColor); 18 color: pvar(--mainColor);
19 cursor: pointer; 19 cursor: pointer;
20 margin: 10px auto 45px auto; 20 margin: 10px auto 45px;
21} 21}
22 22
23@mixin avatar-row-responsive ($img-margin, $grey-font-size) { 23@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index b1a23be6b..d9e5efc02 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,4 +1,4 @@
1@import "./_bootstrap-variables"; 1@import './_bootstrap-variables';
2 2
3@import '~bootstrap/scss/functions'; 3@import '~bootstrap/scss/functions';
4@import '~bootstrap/scss/variables'; 4@import '~bootstrap/scss/variables';
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index 6313736e0..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,4 +1,4 @@
1@font-face{ 1@font-face {
2 font-family: 'Source Sans Pro'; 2 font-family: 'Source Sans Pro';
3 font-weight: 200 900; 3 font-weight: 200 900;
4 font-style: normal; 4 font-style: normal;
@@ -7,7 +7,7 @@
7 src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2'); 7 src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
8} 8}
9 9
10@font-face{ 10@font-face {
11 font-family: 'Source Sans Pro'; 11 font-family: 'Source Sans Pro';
12 font-weight: 200 900; 12 font-weight: 200 900;
13 font-style: italic; 13 font-style: italic;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 3b86f29b4..fb504906c 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -21,12 +21,12 @@
21} 21}
22 22
23@mixin miniature-thumbnail { 23@mixin miniature-thumbnail {
24 @include disable-outline;
25
26 $play-overlay-transition: 0.2s ease; 24 $play-overlay-transition: 0.2s ease;
27 $play-overlay-height: 26px; 25 $play-overlay-height: 26px;
28 $play-overlay-width: 18px; 26 $play-overlay-width: 18px;
29 27
28 @include disable-outline;
29
30 display: flex; 30 display: flex;
31 flex-direction: column; 31 flex-direction: column;
32 position: relative; 32 position: relative;
@@ -47,7 +47,8 @@
47 opacity: 0; 47 opacity: 0;
48 background-color: rgba(0, 0, 0, 0.3); 48 background-color: rgba(0, 0, 0, 0.3);
49 49
50 &, .icon { 50 &,
51 .icon {
51 transition: all $play-overlay-transition; 52 transition: all $play-overlay-transition;
52 } 53 }
53 54
@@ -79,7 +80,7 @@
79 80
80 &.blur-filter { 81 &.blur-filter {
81 filter: blur(20px); 82 filter: blur(20px);
82 transform : scale(1.03); 83 transform: scale(1.03);
83 } 84 }
84 } 85 }
85} 86}
@@ -129,10 +130,7 @@
129 column-gap: 30px; 130 column-gap: 30px;
130 grid-template-columns: repeat( 131 grid-template-columns: repeat(
131 auto-fill, 132 auto-fill,
132 minmax( 133 minmax(var(--miniatureMinWidth), 1fr)
133 var(--miniatureMinWidth),
134 1fr
135 )
136 ); 134 );
137 135
138 .video-wrapper, 136 .video-wrapper,
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index dc6ab8076..718e36f2c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,7 +1,9 @@
1@import '_variables'; 1@import '_variables';
2 2
3@mixin disable-default-a-behaviour { 3@mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active { 4 &:hover,
5 &:focus,
6 &:active {
5 text-decoration: none !important; 7 text-decoration: none !important;
6 outline: none !important; 8 outline: none !important;
7 } 9 }
@@ -22,7 +24,7 @@
22@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { 24@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
23 display: block; 25 display: block;
24 /* Fallback for non-webkit */ 26 /* Fallback for non-webkit */
25 display: -webkit-box; 27 display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
26 -webkit-line-clamp: $number-of-lines; 28 -webkit-line-clamp: $number-of-lines;
27 /* Fallback for non-webkit */ 29 /* Fallback for non-webkit */
28 font-size: $font-size; 30 font-size: $font-size;
@@ -36,7 +38,7 @@
36 position: relative; 38 position: relative;
37 overflow: hidden; 39 overflow: hidden;
38 40
39 &:after { 41 &::after {
40 content: ''; 42 content: '';
41 pointer-events: none; 43 pointer-events: none;
42 width: 100%; 44 width: 100%;
@@ -109,9 +111,9 @@
109 padding-bottom: 0; 111 padding-bottom: 0;
110 flex-wrap: nowrap; 112 flex-wrap: nowrap;
111 113
112 .input-group-text{ 114 .input-group-text {
113 font-size: 14px; 115 font-size: 14px;
114 color: gray; 116 color: #808080;
115 } 117 }
116} 118}
117 119
@@ -128,7 +130,9 @@
128@mixin orange-button { 130@mixin orange-button {
129 @include button-focus(pvar(--mainColorLightest)); 131 @include button-focus(pvar(--mainColorLightest));
130 132
131 &, &:active, &:focus { 133 &,
134 &:active,
135 &:focus {
132 color: #fff; 136 color: #fff;
133 background-color: pvar(--mainColor); 137 background-color: pvar(--mainColor);
134 } 138 }
@@ -138,14 +142,15 @@
138 background-color: pvar(--mainHoverColor); 142 background-color: pvar(--mainHoverColor);
139 } 143 }
140 144
141 &[disabled], &.disabled { 145 &[disabled],
146 &.disabled {
142 cursor: default; 147 cursor: default;
143 color: #fff; 148 color: #fff;
144 background-color: #C6C6C6; 149 background-color: #C6C6C6;
145 } 150 }
146 151
147 my-global-icon { 152 my-global-icon {
148 @include apply-svg-color(#fff) 153 @include apply-svg-color(#fff);
149 } 154 }
150} 155}
151 156
@@ -155,7 +160,9 @@
155 border: 2px solid pvar(--mainColor); 160 border: 2px solid pvar(--mainColor);
156 font-weight: $font-semibold; 161 font-weight: $font-semibold;
157 162
158 &, &:active, &:focus { 163 &,
164 &:active,
165 &:focus {
159 color: pvar(--mainColor); 166 color: pvar(--mainColor);
160 background-color: pvar(--mainBackgroundColor); 167 background-color: pvar(--mainBackgroundColor);
161 } 168 }
@@ -165,14 +172,15 @@
165 background-color: pvar(--mainColorLightest); 172 background-color: pvar(--mainColorLightest);
166 } 173 }
167 174
168 &[disabled], &.disabled { 175 &[disabled],
176 &.disabled {
169 cursor: default; 177 cursor: default;
170 color: pvar(--mainColor); 178 color: pvar(--mainColor);
171 background-color: #C6C6C6; 179 background-color: #C6C6C6;
172 } 180 }
173 181
174 my-global-icon { 182 my-global-icon {
175 @include apply-svg-color(pvar(--mainColor)) 183 @include apply-svg-color(pvar(--mainColor));
176 } 184 }
177} 185}
178 186
@@ -182,12 +190,13 @@
182 color: pvar(--greyForegroundColor); 190 color: pvar(--greyForegroundColor);
183 background-color: transparent; 191 background-color: transparent;
184 192
185 &[disabled], &.disabled { 193 &[disabled],
194 .disabled {
186 cursor: default; 195 cursor: default;
187 } 196 }
188 197
189 my-global-icon { 198 my-global-icon {
190 @include apply-svg-color(transparent) 199 @include apply-svg-color(transparent);
191 } 200 }
192} 201}
193 202
@@ -197,17 +206,22 @@
197 background-color: $grey-background-color; 206 background-color: $grey-background-color;
198 color: pvar(--greyForegroundColor); 207 color: pvar(--greyForegroundColor);
199 208
200 &:hover, &:active, &:focus, &[disabled], &.disabled { 209 &:hover,
210 &:active,
211 &:focus,
212 &[disabled],
213 &.disabled {
201 color: pvar(--greyForegroundColor); 214 color: pvar(--greyForegroundColor);
202 background-color: $grey-background-hover-color; 215 background-color: $grey-background-hover-color;
203 } 216 }
204 217
205 &[disabled], &.disabled { 218 &[disabled],
219 &.disabled {
206 cursor: default; 220 cursor: default;
207 } 221 }
208 222
209 my-global-icon { 223 my-global-icon {
210 @include apply-svg-color(pvar(--greyForegroundColor)) 224 @include apply-svg-color(pvar(--greyForegroundColor));
211 } 225 }
212} 226}
213 227
@@ -216,24 +230,30 @@
216 $text: #fff6f5; 230 $text: #fff6f5;
217 231
218 @include button-focus(scale-color($color, $alpha: -95%)); 232 @include button-focus(scale-color($color, $alpha: -95%));
233
219 background-color: $color; 234 background-color: $color;
220 color: $text; 235 color: $text;
221 236
222 &:hover, &:active, &:focus, &[disabled], &.disabled { 237 &:hover,
238 &:active,
239 &:focus,
240 &[disabled],
241 &.disabled {
223 background-color: lighten($color: $color, $amount: 10); 242 background-color: lighten($color: $color, $amount: 10);
224 } 243 }
225 244
226 &[disabled], &.disabled { 245 &[disabled],
246 &.disabled {
227 cursor: default; 247 cursor: default;
228 } 248 }
229 249
230 my-global-icon { 250 my-global-icon {
231 @include apply-svg-color($text) 251 @include apply-svg-color($text);
232 } 252 }
233} 253}
234 254
235@mixin peertube-button { 255@mixin peertube-button {
236 border: none; 256 border: 0;
237 font-weight: $font-semibold; 257 font-weight: $font-semibold;
238 font-size: 15px; 258 font-size: 15px;
239 height: $button-height; 259 height: $button-height;
@@ -246,18 +266,17 @@
246} 266}
247 267
248@mixin peertube-button-link { 268@mixin peertube-button-link {
249 display: inline-block;
250
251 @include disable-default-a-behaviour; 269 @include disable-default-a-behaviour;
252 @include peertube-button; 270 @include peertube-button;
253}
254 271
255@mixin peertube-button-outline {
256 display: inline-block; 272 display: inline-block;
273}
257 274
275@mixin peertube-button-outline {
258 @include disable-default-a-behaviour; 276 @include disable-default-a-behaviour;
259 @include peertube-button; 277 @include peertube-button;
260 278
279 display: inline-block;
261 border: 1px solid; 280 border: 1px solid;
262} 281}
263 282
@@ -291,17 +310,17 @@
291 filter: alpha(opacity=0); 310 filter: alpha(opacity=0);
292 opacity: 0; 311 opacity: 0;
293 outline: none; 312 outline: none;
294 background: white; 313 background: #fff;
295 cursor: inherit; 314 cursor: inherit;
296 display: block; 315 display: block;
297 } 316 }
298} 317}
299 318
300@mixin peertube-button-file ($width) { 319@mixin peertube-button-file ($width) {
301 width: $width;
302
303 @include peertube-file; 320 @include peertube-file;
304 @include peertube-button; 321 @include peertube-button;
322
323 width: $width;
305} 324}
306 325
307@mixin icon ($size) { 326@mixin icon ($size) {
@@ -317,7 +336,7 @@
317@mixin select-arrow-down { 336@mixin select-arrow-down {
318 top: 50%; 337 top: 50%;
319 right: calc(0% + 15px); 338 right: calc(0% + 15px);
320 content: " "; 339 content: ' ';
321 height: 0; 340 height: 0;
322 width: 0; 341 width: 0;
323 position: absolute; 342 position: absolute;
@@ -358,7 +377,7 @@
358 width: 100%; 377 width: 100%;
359 } 378 }
360 379
361 &:after { 380 &::after {
362 @include select-arrow-down; 381 @include select-arrow-down;
363 } 382 }
364 383
@@ -394,21 +413,21 @@
394 option { 413 option {
395 font-weight: $font-semibold; 414 font-weight: $font-semibold;
396 color: pvar(--greyForegroundColor); 415 color: pvar(--greyForegroundColor);
397 border: none; 416 border: 0;
398 } 417 }
399 } 418 }
400} 419}
401 420
402// Thanks: https://codepen.io/triss90/pen/XNEdRe/ 421// Thanks: https://codepen.io/triss90/pen/XNEdRe/
403@mixin peertube-radio-container { 422@mixin peertube-radio-container {
404 input[type="radio"] { 423 input[type=radio] {
405 display: none; 424 display: none;
406 425
407 & + label { 426 + label {
408 font-weight: $font-regular; 427 font-weight: $font-regular;
409 cursor: pointer; 428 cursor: pointer;
410 429
411 &:before { 430 &::before {
412 position: relative; 431 position: relative;
413 top: -2px; 432 top: -2px;
414 content: ''; 433 content: '';
@@ -425,12 +444,12 @@
425 } 444 }
426 } 445 }
427 446
428 &:checked + label:before { 447 &:checked + label::before {
429 background-color: #000; 448 background-color: #000;
430 box-shadow: inset 0 0 0 4px #fff; 449 box-shadow: inset 0 0 0 4px #fff;
431 } 450 }
432 451
433 &:focus + label:before { 452 &:focus + label::before {
434 outline: none; 453 outline: none;
435 border-color: #000; 454 border-color: #000;
436 } 455 }
@@ -445,7 +464,7 @@
445 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 464 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
446 } 465 }
447 466
448 & + span { 467 + span {
449 position: relative; 468 position: relative;
450 width: 18px; 469 width: 18px;
451 min-width: 18px; 470 min-width: 18px;
@@ -455,7 +474,7 @@
455 vertical-align: middle; 474 vertical-align: middle;
456 cursor: pointer; 475 cursor: pointer;
457 476
458 &:after { 477 &::after {
459 content: ''; 478 content: '';
460 position: absolute; 479 position: absolute;
461 top: calc(2px - #{$border-width}); 480 top: calc(2px - #{$border-width});
@@ -474,13 +493,13 @@
474 background: pvar(--mainColor); 493 background: pvar(--mainColor);
475 animation: jelly 0.6s ease; 494 animation: jelly 0.6s ease;
476 495
477 &:after { 496 &::after {
478 opacity: 1; 497 opacity: 1;
479 transform: rotate(45deg) scale(1); 498 transform: rotate(45deg) scale(1);
480 } 499 }
481 } 500 }
482 501
483 & + span + span { 502 + span + span {
484 font-size: 15px; 503 font-size: 15px;
485 font-weight: $font-regular; 504 font-weight: $font-regular;
486 margin-left: 5px; 505 margin-left: 5px;
@@ -489,7 +508,7 @@
489 } 508 }
490 509
491 &[disabled] + span, 510 &[disabled] + span,
492 &[disabled] + span + span{ 511 &[disabled] + span + span {
493 opacity: 0.5; 512 opacity: 0.5;
494 cursor: default; 513 cursor: default;
495 } 514 }
@@ -685,13 +704,13 @@
685 color: pvar(--mainColor); 704 color: pvar(--mainColor);
686 } 705 }
687 706
688 & + .breadcrumb-item { 707 + .breadcrumb-item {
689 padding-left: 0.5rem; 708 padding-left: 0.5rem;
690 &::before { 709 &::before {
691 display: inline-block; 710 display: inline-block;
692 padding-right: 0.5rem; 711 padding-right: 0.5rem;
693 color: #6c757d; 712 color: #6c757d;
694 content: "/"; 713 content: '/';
695 } 714 }
696 } 715 }
697 716
@@ -706,13 +725,13 @@
706 flex-wrap: wrap; 725 flex-wrap: wrap;
707 margin: 0 -5px; 726 margin: 0 -5px;
708 727
709 & > div { 728 > div {
710 box-sizing: border-box; 729 box-sizing: border-box;
711 flex: 0 0 percentage(1/3); 730 flex: 0 0 percentage(1/3);
712 padding: 0 5px; 731 padding: 0 5px;
713 margin-bottom: 10px; 732 margin-bottom: 10px;
714 733
715 & > a { 734 > a {
716 @include disable-default-a-behaviour; 735 @include disable-default-a-behaviour;
717 736
718 text-decoration: none; 737 text-decoration: none;
@@ -727,8 +746,8 @@
727 } 746 }
728 } 747 }
729 748
730 & > a, 749 > a,
731 & > div { 750 > div {
732 padding: 20px; 751 padding: 20px;
733 background: pvar(--submenuBackgroundColor); 752 background: pvar(--submenuBackgroundColor);
734 border-radius: 4px; 753 border-radius: 4px;
@@ -737,7 +756,8 @@
737 } 756 }
738 } 757 }
739 758
740 .dashboard-num, .dashboard-text { 759 .dashboard-num,
760 .dashboard-text {
741 text-align: center; 761 text-align: center;
742 font-size: 130%; 762 font-size: 130%;
743 color: pvar(--mainForegroundColor); 763 color: pvar(--mainForegroundColor);
@@ -831,7 +851,7 @@
831 flex-direction: column; 851 flex-direction: column;
832 852
833 .form-sub-title { 853 .form-sub-title {
834 margin-right: 0px !important; 854 margin-right: 0 !important;
835 margin-bottom: 10px; 855 margin-bottom: 10px;
836 text-align: center; 856 text-align: center;
837 } 857 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d2a5d2bd9..d54563df6 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -60,7 +60,7 @@ $max-channels-width: 1200px;
60$footer-height: 30px; 60$footer-height: 30px;
61$footer-margin: 30px; 61$footer-margin: 30px;
62 62
63$separator-border-color: rgba(0, 0, 0, 0.10); 63$separator-border-color: rgba(0, 0, 0, 0.1);
64 64
65$video-miniature-margin-bottom: 15px; 65$video-miniature-margin-bottom: 15px;
66 66
@@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color;
90$sub-menu-margin-bottom: 30px; 90$sub-menu-margin-bottom: 30px;
91$sub-menu-margin-bottom-small-view: 10px; 91$sub-menu-margin-bottom-small-view: 10px;
92 92
93$activated-action-button-color: black; 93$activated-action-button-color: #000;
94 94
95$focus-box-shadow-form: 0 0 0 .2rem; 95$focus-box-shadow-form: 0 0 0 .2rem;
96 96
@@ -147,7 +147,7 @@ $variables: (
147 @if map-has-key($variables, $variable) { 147 @if map-has-key($variables, $variable) {
148 @return map-get($variables, $variable); 148 @return map-get($variables, $variable);
149 } @else { 149 } @else {
150 @error "ERROR: Variable #{$variable} does not exist"; 150 @error 'ERROR: Variable #{$variable} does not exist';
151 } 151 }
152} 152}
153 153
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 61da6d266..13b2012b2 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -14,7 +14,7 @@ $ng-select-height: 30px;
14$ng-select-value-padding-left: 15px; 14$ng-select-value-padding-left: 15px;
15$ng-select-value-font-size: 15px; 15$ng-select-value-font-size: 15px;
16 16
17@import "~@ng-select/ng-select/scss/default.theme.scss"; 17@import '~@ng-select/ng-select/scss/default.theme';
18 18
19.ng-select { 19.ng-select {
20 font-size: $ng-select-value-font-size; 20 font-size: $ng-select-value-font-size;
@@ -31,13 +31,13 @@ $ng-select-value-font-size: 15px;
31 } 31 }
32 32
33 .ng-arrow-wrapper { 33 .ng-arrow-wrapper {
34 padding-right: 12px 34 padding-right: 12px;
35 } 35 }
36 36
37 &.ng-select-single .ng-value-container .ng-value { 37 &.ng-select-single .ng-value-container .ng-value {
38 color: pvar(--inputForegroundColor); 38 color: pvar(--inputForegroundColor);
39 39
40 .ng-value-label { 40 .ng-value-label { /* stylelint-disable-line */
41 display: flex; 41 display: flex;
42 align-items: center; 42 align-items: center;
43 } 43 }
@@ -45,7 +45,8 @@ $ng-select-value-font-size: 15px;
45 45
46 &.ng-select-multiple .ng-select-container .ng-value-container { 46 &.ng-select-multiple .ng-select-container .ng-value-container {
47 padding-left: 12px; 47 padding-left: 12px;
48 .ng-value { 48
49 .ng-value { /* stylelint-disable-line */
49 margin-left: 3px; 50 margin-left: 3px;
50 } 51 }
51 } 52 }
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 6bc66af0c..45cee3e77 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -31,26 +31,26 @@ $context-menu-width: 350px;
31 background-color: rgba(255, 255, 255, 0.2); 31 background-color: rgba(255, 255, 255, 0.2);
32 } 32 }
33 33
34 [class^="vjs-icon-"] { 34 [class^='vjs-icon-'] {
35 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
36
35 display: inline-flex; 37 display: inline-flex;
36 position: relative; 38 position: relative;
37 top: 2px; 39 top: 2px;
38 cursor: pointer; 40 cursor: pointer;
39 width: 14px; 41 width: 14px;
40 height: 14px; 42 height: 14px;
41 background-color: white; 43 background-color: #fff;
42 mask-size: cover; 44 mask-size: cover;
43 margin-right: 0.8rem !important; 45 margin-right: 0.8rem !important;
44 46
45 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
46
47 @each $icon in $icons { 47 @each $icon in $icons {
48 &[class$="-#{$icon}"] { 48 &[class$="-#{$icon}"] {
49 mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); 49 mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
50 } 50 }
51 } 51 }
52 52
53 &[class$="-tick-white"] { 53 &[class$='-tick-white'] {
54 float: right; 54 float: right;
55 margin: 0 !important; 55 margin: 0 !important;
56 } 56 }
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 502ee33ff..e674fa2f6 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -4,6 +4,6 @@
4@import './settings-menu'; 4@import './settings-menu';
5@import './spinner'; 5@import './spinner';
6@import './upnext'; 6@import './upnext';
7@import './bezels.scss'; 7@import './bezels';
8@import './playlist.scss'; 8@import './playlist';
9@import './stats.scss'; 9@import './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index c2fa855ab..26066d218 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -13,4 +13,4 @@
13 } 13 }
14 } 14 }
15 } 15 }
16} \ No newline at end of file 16}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 81aacf1d7..8fe2e054d 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -52,12 +52,12 @@ body {
52 } 52 }
53 53
54 .vjs-big-play-button { 54 .vjs-big-play-button {
55 outline: 0;
56 font-size: 6em;
57
58 $big-play-width: 1.2em; 55 $big-play-width: 1.2em;
59 $big-play-height: 1.2em; 56 $big-play-height: 1.2em;
60 57
58 outline: 0;
59 font-size: 6em;
60
61 border: 2px solid #fff; 61 border: 2px solid #fff;
62 border-radius: 100%; 62 border-radius: 100%;
63 63
@@ -72,7 +72,7 @@ body {
72 72
73 &::-moz-focus-inner { 73 &::-moz-focus-inner {
74 border: 0; 74 border: 0;
75 padding: 0 75 padding: 0;
76 } 76 }
77 77
78 .vjs-icon-placeholder::before { 78 .vjs-icon-placeholder::before {
@@ -82,8 +82,9 @@ body {
82 background-image: url('#{$assets-path}/player/images/big-play-button.svg'); 82 background-image: url('#{$assets-path}/player/images/big-play-button.svg');
83 } 83 }
84 84
85 &.focus-visible, &:hover { 85 &.focus-visible,
86 background-color: var(--mainColor, dimgray); 86 &:hover {
87 background-color: var(--mainColor, #696969);
87 } 88 }
88 89
89 } 90 }
@@ -91,16 +92,19 @@ body {
91 // Small effect when we click on the play button 92 // Small effect when we click on the play button
92 &.vjs-has-big-play-button-clicked { 93 &.vjs-has-big-play-button-clicked {
93 94
94 .vjs-big-play-button, .vjs-poster { 95 .vjs-big-play-button,
96 .vjs-poster {
95 display: block; 97 display: block;
96 visibility: hidden; 98 visibility: hidden;
97 99
98 &.vjs-big-play-button, &.vjs-big-play-button::before { 100 &.vjs-big-play-button,
101 &.vjs-big-play-button::before {
99 opacity: 0; 102 opacity: 0;
100 transition: visibility 0.2s, opacity 0.2s; 103 transition: visibility 0.2s, opacity 0.2s;
101 } 104 }
102 105
103 &.vjs-poster, &.vjs-poster::before { 106 &.vjs-poster,
107 &.vjs-poster::before {
104 opacity: 0; 108 opacity: 0;
105 transition: visibility 0.3s, opacity 0.3s; 109 transition: visibility 0.3s, opacity 0.3s;
106 transition-delay: 0.05s; 110 transition-delay: 0.05s;
@@ -165,8 +169,7 @@ body {
165 .vjs-fullscreen-control, 169 .vjs-fullscreen-control,
166 .vjs-peertube-link, 170 .vjs-peertube-link,
167 .vjs-theater-control, 171 .vjs-theater-control,
168 .vjs-settings 172 .vjs-settings {
169 {
170 color: pvar(--embedForegroundColor) !important; 173 color: pvar(--embedForegroundColor) !important;
171 174
172 opacity: $primary-foreground-opacity; 175 opacity: $primary-foreground-opacity;
@@ -217,7 +220,8 @@ body {
217 } 220 }
218 221
219 .vjs-load-progress { 222 .vjs-load-progress {
220 &, & div { 223 &,
224 div {
221 background: rgba(255, 255, 255, .2); 225 background: rgba(255, 255, 255, .2);
222 } 226 }
223 } 227 }
@@ -266,7 +270,7 @@ body {
266 line-height: calc(#{$control-bar-height} - 1px); 270 line-height: calc(#{$control-bar-height} - 1px);
267 271
268 &::after { 272 &::after {
269 content: "/"; 273 content: '/';
270 margin: 0 1px 0 2px; 274 margin: 0 1px 0 2px;
271 } 275 }
272 } 276 }
@@ -308,11 +312,17 @@ body {
308 display: none; 312 display: none;
309 } 313 }
310 314
311 .download-speed-number, .upload-speed-number, .peers-number, .http-fallback { 315 .download-speed-number,
316 .upload-speed-number,
317 .peers-number,
318 .http-fallback {
312 font-weight: $font-semibold; 319 font-weight: $font-semibold;
313 } 320 }
314 321
315 .download-speed-text, .upload-speed-text, .peers-text, .http-fallback { 322 .download-speed-text,
323 .upload-speed-text,
324 .peers-text,
325 .http-fallback {
316 margin-right: 15px; 326 margin-right: 15px;
317 } 327 }
318 328
@@ -336,10 +346,8 @@ body {
336 &.icon-next, 346 &.icon-next,
337 &.icon-previous { 347 &.icon-previous {
338 mask-image: url('#{$assets-path}/player/images/next.svg'); 348 mask-image: url('#{$assets-path}/player/images/next.svg');
339 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg'); 349 background-color: #fff;
340 background-color: white;
341 mask-size: cover; 350 mask-size: cover;
342 -webkit-mask-size: cover;
343 width: 11px; 351 width: 11px;
344 height: 11px; 352 height: 11px;
345 margin-top: -2px; 353 margin-top: -2px;
@@ -410,7 +418,7 @@ body {
410 } 418 }
411 419
412 .vjs-volume-bar { 420 .vjs-volume-bar {
413 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat; 421 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
414 background-size: 22px 14px; 422 background-size: 22px 14px;
415 height: 100%; 423 height: 100%;
416 width: 100%; 424 width: 100%;
@@ -421,7 +429,7 @@ body {
421 top: 3px; 429 top: 3px;
422 430
423 .vjs-volume-level { 431 .vjs-volume-level {
424 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat; 432 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
425 background-size: 22px 14px; 433 background-size: 22px 14px;
426 max-width: 22px; 434 max-width: 22px;
427 max-height: 14px; 435 max-height: 14px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index ebbed02d9..8558fc837 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -44,10 +44,8 @@ $playlist-menu-width: 350px;
44 width: 20px; 44 width: 20px;
45 height: 20px; 45 height: 20px;
46 mask-image: url('#{$assets-path}/images/feather/x.svg'); 46 mask-image: url('#{$assets-path}/images/feather/x.svg');
47 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg'); 47 background-color: #fff;
48 background-color: white;
49 mask-size: cover; 48 mask-size: cover;
50 -webkit-mask-size: cover;
51 } 49 }
52 } 50 }
53} 51}
@@ -90,10 +88,8 @@ $playlist-menu-width: 350px;
90 width: 22px; 88 width: 22px;
91 height: 22px; 89 height: 22px;
92 mask-image: url('#{$assets-path}/images/feather/list.svg'); 90 mask-image: url('#{$assets-path}/images/feather/list.svg');
93 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg'); 91 background-color: #fff;
94 background-color: white;
95 mask-size: cover; 92 mask-size: cover;
96 -webkit-mask-size: cover;
97 margin-bottom: 3px; 93 margin-bottom: 3px;
98} 94}
99 95
@@ -133,9 +129,9 @@ $playlist-menu-width: 350px;
133 } 129 }
134 130
135 .item-player { 131 .item-player {
136 display: none;
137
138 @include play-icon(20px, 16px); 132 @include play-icon(20px, 16px);
133
134 display: none;
139 } 135 }
140 136
141 &.vjs-selected { 137 &.vjs-selected {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 09c872ef7..74eee7d64 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -149,7 +149,7 @@ $setting-transition-easing: ease-out;
149 background-color: inherit; 149 background-color: inherit;
150 padding: 8px 8px 13px 12px; 150 padding: 8px 8px 13px 12px;
151 margin-bottom: 5px; 151 margin-bottom: 5px;
152 border-bottom: 1px solid grey; 152 border-bottom: 1px solid #808080;
153 text-align: left; 153 text-align: left;
154 154
155 &::before { 155 &::before {
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index a6af8da33..94f4d1008 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -51,4 +51,4 @@
51 opacity: 1; 51 opacity: 1;
52 } 52 }
53 } 53 }
54} \ No newline at end of file 54}
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 953f6032a..6fcbcd969 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -6,6 +6,8 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
6.video-js { 6.video-js {
7 7
8 .vjs-stats-content { 8 .vjs-stats-content {
9 @include transition(opacity 0.1s);
10
9 position: absolute; 11 position: absolute;
10 background-color: $contextmenu-background-color; 12 background-color: $contextmenu-background-color;
11 padding: 5px 0; 13 padding: 5px 0;
@@ -18,8 +20,6 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
18 z-index: 64; 20 z-index: 64;
19 font-size: 12px; 21 font-size: 12px;
20 line-height: 1.2; 22 line-height: 1.2;
21
22 @include transition(opacity 0.1s);
23 } 23 }
24 24
25 .vjs-stats-close { 25 .vjs-stats-close {
@@ -38,5 +38,4 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
38 width: 11.5em; 38 width: 11.5em;
39 white-space: nowrap; 39 white-space: nowrap;
40 } 40 }
41
42} 41}
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 7614bb3b6..8c9a6f784 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -11,15 +11,15 @@ $browser-context: 16;
11.video-js { 11.video-js {
12 12
13 .vjs-upnext-content { 13 .vjs-upnext-content {
14 @include transition(opacity 0.1s);
15
14 font-size: 1.8em; 16 font-size: 1.8em;
15 pointer-events: auto; 17 pointer-events: auto;
16 position: absolute; 18 position: absolute;
17 top: 0; 19 top: 0;
18 bottom: 0; 20 bottom: 0;
19 background: rgba(0,0,0,0.6); 21 background: rgba(0, 0, 0, 0.6);
20 width: 100%; 22 width: 100%;
21
22 @include transition(opacity 0.1s);
23 } 23 }
24 24
25 .vjs-upnext-top { 25 .vjs-upnext-top {
@@ -77,7 +77,7 @@ $browser-context: 16;
77 float: none; 77 float: none;
78 padding: 10px !important; 78 padding: 10px !important;
79 font-size: 16px !important; 79 font-size: 16px !important;
80 border: none; 80 border: 0;
81 } 81 }
82 82
83 .vjs-upnext-cancel-button, 83 .vjs-upnext-cancel-button,
@@ -86,7 +86,7 @@ $browser-context: 16;
86 } 86 }
87 87
88 .vjs-upnext-cancel-button:hover { 88 .vjs-upnext-cancel-button:hover {
89 background-color: rgba(255,255,255,0.25); 89 background-color: rgba(255, 255, 255, 0.25);
90 border-radius: 2px; 90 border-radius: 2px;
91 } 91 }
92 92
@@ -95,6 +95,8 @@ $browser-context: 16;
95 } 95 }
96 96
97 .vjs-upnext-autoplay-icon { 97 .vjs-upnext-autoplay-icon {
98 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
99
98 position: absolute; 100 position: absolute;
99 top: 50%; 101 top: 50%;
100 left: 50%; 102 left: 50%;
@@ -102,8 +104,6 @@ $browser-context: 16;
102 height: 98px; 104 height: 98px;
103 margin: -49px 0 0 -49px; 105 margin: -49px 0 0 -49px;
104 cursor: pointer; 106 cursor: pointer;
105
106 @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
107 } 107 }
108 108
109} 109}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 544d0039a..1abcd30e4 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,10 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4/* stylelint-disable */
4@import '~primeng/resources/primeng.css'; 5@import '~primeng/resources/primeng.css';
5 6
6// Override primeng style we don't want 7// Override primeng style we don't want
7input[type="button"] { 8input[type=button] {
8 border-radius: inherit; 9 border-radius: inherit;
9} 10}
10 11
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index cbe6bdd01..e32cce54e 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -21,7 +21,8 @@ video {
21} 21}
22 22
23/* fill the entire space */ 23/* fill the entire space */
24html, body { 24html,
25body {
25 height: 100%; 26 height: 100%;
26 margin: 0; 27 margin: 0;
27 background-color: #000; 28 background-color: #000;
@@ -70,18 +71,18 @@ html, body {
70 text-align: center; 71 text-align: center;
71 width: 100%; 72 width: 100%;
72 height: 100%; 73 height: 100%;
73 color: white; 74 color: #fff;
74 box-sizing: border-box; 75 box-sizing: border-box;
75 font-family: sans-serif; 76 font-family: sans-serif;
77}
76 78
77 #error-title { 79#error-title {
78 font-size: 45px; 80 font-size: 45px;
79 margin-bottom: 5px; 81 margin-bottom: 5px;
80 } 82}
81 83
82 #error-content { 84#error-content {
83 font-size: 24px; 85 font-size: 24px;
84 }
85} 86}
86 87
87#placeholder-preview { 88#placeholder-preview {
@@ -97,10 +98,10 @@ html, body {
97@media screen and (max-width: 300px) { 98@media screen and (max-width: 300px) {
98 #error-block { 99 #error-block {
99 font-size: 36px; 100 font-size: 36px;
101 }
100 102
101 #error-content { 103 #error-content {
102 font-size: 14px; 104 font-size: 14px;
103 }
104 } 105 }
105} 106}
106 107
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
index 85ce4e0f7..b9ac3e74e 100644
--- a/client/src/standalone/videos/test-embed.scss
+++ b/client/src/standalone/videos/test-embed.scss
@@ -15,7 +15,7 @@ body {
15} 15}
16 16
17iframe { 17iframe {
18 border: none; 18 border: 0;
19 border-radius: 8px; 19 border-radius: 8px;
20 min-width: 200px; 20 min-width: 200px;
21 width: 100%; 21 width: 100%;
@@ -41,7 +41,7 @@ aside {
41 .icon { 41 .icon {
42 height: 100%; 42 height: 100%;
43 padding: 0 18px 0 32px; 43 padding: 0 18px 0 32px;
44 background: white; 44 background: #fff;
45 display: flex; 45 display: flex;
46 align-items: center; 46 align-items: center;
47 margin-right: 0.5em; 47 margin-right: 0.5em;
@@ -62,13 +62,13 @@ header {
62 width: 100%; 62 width: 100%;
63 height: 3.2em; 63 height: 3.2em;
64 background-color: #F1680D; 64 background-color: #F1680D;
65 color: white; 65 color: #fff;
66 //background-image: url(../../assets/images/backdrop/network-o.png); 66 //background-image: url(../../assets/images/backdrop/network-o.png);
67 display: flex; 67 display: flex;
68 flex-direction: row; 68 flex-direction: row;
69 align-items: center; 69 align-items: center;
70 margin-bottom: 1em; 70 margin-bottom: 1em;
71 box-shadow: 1px 0px 10px rgba(0,0,0,0.6); 71 box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
72 background-size: 50%; 72 background-size: 50%;
73 background-position: top left; 73 background-position: top left;
74 padding-right: 1em; 74 padding-right: 1em;
@@ -87,13 +87,13 @@ header {
87 display: flex; 87 display: flex;
88 flex-wrap: wrap; 88 flex-wrap: wrap;
89 89
90 & > * { 90 > * {
91 flex-grow: 0; 91 flex-grow: 0;
92 } 92 }
93} 93}
94 94
95fieldset { 95fieldset {
96 border: none; 96 border: 0;
97 min-width: 8em; 97 min-width: 8em;
98 legend { 98 legend {
99 border-bottom: 1px solid #ccc; 99 border-bottom: 1px solid #ccc;
@@ -103,12 +103,12 @@ fieldset {
103 103
104button { 104button {
105 background: #F1680D; 105 background: #F1680D;
106 color: white; 106 color: #fff;
107 font-weight: bold; 107 font-weight: bold;
108 border-radius: 5px; 108 border-radius: 5px;
109 margin: 0; 109 margin: 0;
110 padding: 1em 1.25em; 110 padding: 1em 1.25em;
111 border: none; 111 border: 0;
112} 112}
113 113
114a { 114a {
@@ -118,7 +118,11 @@ a {
118 text-decoration: underline; 118 text-decoration: underline;
119 } 119 }
120 120
121 &, &:hover, &:focus, &:visited, &:active { 121 &,
122 &:hover,
123 &:focus,
124 &:visited,
125 &:active {
122 color: #F44336; 126 color: #F44336;
123 } 127 }
124} 128}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-02 08:46:23 +0000