aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 16:41:07 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 17:53:57 +0200
commit931d3430184143ebd88e5243def6eb1d7acfdbf4 (patch)
tree909919bafd6fa8563d26d616c6257ebd0211c83c /client/src/app/shared
parent7d026caf683e42fd57a243a3b52a5e4f476fbb4e (diff)
downloadPeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.gz
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.zst
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.zip
Move to stylelint
Diffstat (limited to 'client/src/app/shared')
-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
31 files changed, 114 insertions, 108 deletions
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 }