diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f605cbb7a..eddaff542 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -21,13 +21,6 @@ input[type=email] {
}
}
-.modal-footer.inputs {
- .action-button.action-button-cancel {
- width: auto !important;
- display: inline-block;
- }
-}
-
@media screen and (max-width: #{map-get($container-max-widths, sm)}) {
.modal-body {
#forgot-password-email {
@@ -35,10 +28,8 @@ input[type=email] {
}
}
- .modal-footer.inputs {
- .action-button.action-button-cancel {
- display: none;
- }
+ .modal-footer .grey-button {
+ display: none;
}
}
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index a60aa38d6..c754a99d1 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -5,6 +5,7 @@
#search-video {
@include peertube-input-text($search-input-width);
+
padding-left: 10px;
padding-right: 40px; // For the search icon
font-size: 14px;
@@ -14,7 +15,7 @@
}
}
-.icon.icon-search {
+.icon-search {
@include icon(25px);
height: 18px;
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index a0777660f..df5c7971d 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -40,9 +40,10 @@
<a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
- (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)">
- <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
- <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
+ (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)"
+ >
+ <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
+ <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
<span i18n>Sensitive:</span>
<span class="ml-auto text-muted">{{ nsfwPolicy }}</span>
</a>
@@ -72,17 +73,17 @@
</div>
<div class="logged-in-menu">
- <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
+ <a class="menu-link" routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
<my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
<ng-container i18n>My account</ng-container>
</a>
- <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
+ <a class="menu-link" routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
<my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
<ng-container i18n>My library</ng-container>
</a>
- <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
+ <a class="menu-link" *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<ng-container i18n>Administration</ng-container>
</a>
@@ -90,29 +91,29 @@
</div>
<div *ngIf="!isLoggedIn" class="login-buttons-block">
- <a i18n routerLink="/login" class="login-button">Login</a>
- <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
+ <a i18n routerLink="/login" class="peertube-button-link orange-button">Login</a>
+ <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link">Create an account</a>
</div>
<div *ngIf="isLoggedIn" class="in-my-library">
<div i18n class="block-title">IN MY LIBRARY</div>
- <a *ngIf="user.canSeeVideosLink" routerLink="/my-library/videos" routerLinkActive="active">
+ <a *ngIf="user.canSeeVideosLink" class="menu-link" routerLink="/my-library/videos" routerLinkActive="active">
<my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
<ng-container i18n>Videos</ng-container>
</a>
- <a routerLink="/my-library/video-playlists" routerLinkActive="active">
+ <a class="menu-link" routerLink="/my-library/video-playlists" routerLinkActive="active">
<my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
<ng-container i18n>Playlists</ng-container>
</a>
- <a routerLink="/videos/subscriptions" routerLinkActive="active">
+ <a class="menu-link" routerLink="/videos/subscriptions" routerLinkActive="active">
<my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
<ng-container i18n>Subscriptions</ng-container>
</a>
- <a routerLink="/my-library/history/videos" routerLinkActive="active">
+ <a class="menu-link" routerLink="/my-library/history/videos" routerLinkActive="active">
<my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
<ng-container i18n>History</ng-container>
</a>
@@ -122,22 +123,22 @@
<div class="on-instance">
<div i18n class="block-title">ON {{instanceName}}</div>
- <a routerLink="/videos/overview" routerLinkActive="active">
+ <a class="menu-link" routerLink="/videos/overview" routerLinkActive="active">
<my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
<ng-container i18n>Discover</ng-container>
</a>
- <a routerLink="/videos/trending" routerLinkActive="active">
+ <a class="menu-link" routerLink="/videos/trending" routerLinkActive="active">
<my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
<ng-container i18n>Trending</ng-container>
</a>
- <a routerLink="/videos/recently-added" routerLinkActive="active">
+ <a class="menu-link" routerLink="/videos/recently-added" routerLinkActive="active">
<my-global-icon iconName="recently-added" aria-hidden="true"></my-global-icon>
<ng-container i18n>Recently added</ng-container>
</a>
- <a routerLink="/videos/local" routerLinkActive="active">
+ <a class="menu-link" routerLink="/videos/local" routerLinkActive="active">
<my-global-icon iconName="home" aria-hidden="true"></my-global-icon>
<ng-container i18n>Local videos</ng-container>
</a>
@@ -146,18 +147,18 @@
<div class="footer">
<div class="footer-block">
- <a *ngIf="!isLoggedIn" (click)="openQuickSettings()">
+ <a *ngIf="!isLoggedIn" class="menu-link" (click)="openQuickSettings()">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<ng-container i18n>My settings</ng-container>
</a>
- <a routerLink="/about" routerLinkActive="active">
+ <a class="menu-link" routerLink="/about" routerLinkActive="active">
<my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
<ng-container i18n>About</ng-container>
</a>
</div>
- <div class="bottom-links">
+ <div class="footer-bottom">
<div class="footer-links">
<div *ngIf="isLoggedIn === false">
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 729dbc6ee..00d1a1f69 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -5,7 +5,9 @@ $menu-link-icon-size: 22px;
$menu-link-icon-margin-right: 18px;
$footer-links-base-opacity: .8;
-@mixin menu-link {
+.menu-link {
+ @include disable-default-a-behaviour;
+
display: flex;
align-items: center;
padding-left: $menu-lateral-padding;
@@ -91,32 +93,15 @@ menu {
display: flex;
align-items: center;
justify-content: left;
-
- my-notification {
- margin-left: auto;
- margin-right: 15px;
- }
}
}
+my-notification {
+ margin-left: auto;
+ margin-right: 15px;
+}
+
.logged-in-more {
- $main-radius: 25px;
-
- flex: 1;
- margin-left: 13px;
- border-radius: $main-radius;
- transition: all .1s ease-in-out;
- cursor: pointer;
-
- *, & {
- line-height: 1;
- }
-
- &.show {
- background-color: rgba(255, 255, 255, 0.20);
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
- }
-
@mixin display-hints($is-mobile: false) {
background-color: rgba(255, 255, 255, 0.15);
@@ -130,6 +115,20 @@ menu {
}
}
+ $main-radius: 25px;
+
+ flex: 1;
+ margin-left: 13px;
+ border-radius: $main-radius;
+ transition: all .1s ease-in-out;
+ cursor: pointer;
+ line-height: 1;
+
+ &.show {
+ background-color: rgba(255, 255, 255, 0.20);
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
+ }
+
&:hover {
@include display-hints;
}
@@ -140,13 +139,14 @@ menu {
/* fill space when on mobile */
max-width: calc(100% - 80px);
+
.dropdown-toggle {
max-width: 100%;
}
+
.logged-in-info {
max-width: calc(100% - 45px) !important;
}
-
}
.dropdown-toggle-indicator {
@@ -175,35 +175,35 @@ menu {
padding: 5px 7px;
border-radius: $main-radius;
}
+}
- my-account-avatar {
- margin-right: 10px;
- }
+my-account-avatar {
+ margin-right: 10px;
}
.logged-in-info {
max-width: 105px;
flex-grow: 1;
+}
- .logged-in-display-name,
- .logged-in-username {
- @include ellipsis;
- }
+.logged-in-display-name,
+.logged-in-username {
+ @include ellipsis;
+}
- .logged-in-display-name {
- font-size: 16px;
- font-weight: $font-semibold;
- color: pvar(--menuForegroundColor);
+.logged-in-display-name {
+ font-size: 16px;
+ font-weight: $font-semibold;
+ color: pvar(--menuForegroundColor);
- @include disable-default-a-behaviour;
- }
+ @include disable-default-a-behaviour;
+}
- .logged-in-username {
- font-size: 13px;
- color: #C6C6C6;
- margin-top: 3px;
- }
+.logged-in-username {
+ font-size: 13px;
+ color: #C6C6C6;
+ margin-top: 3px;
}
.logged-in-menu {
@@ -214,9 +214,6 @@ menu {
line-height: $line-height-normal;
a {
- @include menu-link;
- @include disable-default-a-behaviour;
-
$icon-size: 13px;
$additional-margin: ($menu-link-icon-size - $icon-size) / 2;
@@ -230,10 +227,6 @@ menu {
// Keep aligned with other icons
margin-left: $additional-margin;
-
- &[iconName="channel"] {
- margin-top: -2px;
- }
}
&.active,
@@ -260,78 +253,55 @@ menu {
.login-buttons-block {
margin: 30px 25px 35px 25px;
- .login-button {
- @include peertube-button-link;
- @include orange-button;
-
- display: block;
- width: 100%;
- margin-bottom: 10px;
- }
-
- .create-account-button {
- @include peertube-button-link;
-
+ > a {
display: block;
width: 100%;
- color: #fff;
- background-color: rgba(255, 255, 255, 0.25);
-
- &:hover {
- background-color: rgba(255, 255, 255, 0.28);
+ :not(:last-child) {
+ margin-bottom: 10px;
}
}
}
+.create-account-button {
+ color: #fff;
+ background-color: rgba(255, 255, 255, 0.25);
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.28);
+ }
+}
+
.in-my-library,
.on-instance,
.footer-block {
margin-bottom: 15px;
.block-title {
+ @include ellipsis;
+
text-transform: uppercase;
font-weight: $font-bold; // Bold
font-size: 13px;
margin-bottom: 25px;
margin-left: 26px;
-
- @include ellipsis;
-
margin-right: 30px;
}
a {
- @include menu-link;
- @include disable-default-a-behaviour;
-
min-height: 40px;
-
- my-global-icon {
- &[iconName="playlists"] {
- height: 24px;
- width: 24px;
-
- margin-right: 16px;
- }
-
- &[iconName="videos"] {
- position: relative;
- right: -1px;
- }
- }
}
}
.footer {
width: $menu-width;
padding-bottom: 15px;
+}
- .bottom-links {
- display: flex;
- flex-direction: column;
- padding: 0 $menu-lateral-padding;
- }
+.footer-bottom {
+ display: flex;
+ flex-direction: column;
+ padding: 0 $menu-lateral-padding;
}
.footer-links {
@@ -340,7 +310,8 @@ menu {
flex-wrap: wrap;
}
- a, span[role=button] {
+ a,
+ span[role=button] {
display: inline-block;
text-decoration: none;
color: pvar(--menuForegroundColor);
@@ -350,22 +321,6 @@ menu {
font-weight: 500;
line-height: 1.4rem;
margin-right: 8px;
-
- &.inline-global-icon {
- display: inline-flex;
- align-items: center;
- white-space: nowrap;
- height: 1.4rem;
-
- my-global-icon {
- @include apply-svg-color(pvar(--menuForegroundColor));
-
- display: flex;
- width: auto;
- height: 90%;
- margin-right: .2rem;
- }
- }
}
}
@@ -395,32 +350,13 @@ menu {
opacity: .4;
}
- my-global-icon {
- &[iconName="cog"],
- &[iconName="sign-out"] {
- position: relative;
- right: -2px;
- height: 20px;
- width: 20px;
- }
- }
-
- my-global-icon.not-displayed {
- display: none;
- }
-
&:hover {
- my-global-icon.hover-display-toggle.not-displayed {
- display: inherit;
- }
- my-global-icon.hover-display-toggle {
+ .hover-display-toggle {
display: none;
}
- &.settings-sensitive {
- my-global-icon ::ng-deep svg {
- margin-top: 2px !important;
- }
+ .hover-display-toggle[hidden] {
+ display: inherit !important;
}
}
}
@@ -440,7 +376,8 @@ menu {
}
}
- .top-menu, .footer {
+ .top-menu,
+ .footer {
width: 100% !important;
}
@@ -448,9 +385,35 @@ menu {
width: calc(100vw - 30px);
}
- .dropdown-item:hover, .dropdown-item:active {
+ .dropdown-item:hover,
+ .dropdown-item:active {
&.settings-sensitive my-global-icon ::ng-deep svg {
margin-top: 0px !important;
}
}
}
+
+my-global-icon {
+ &[iconName="playlists"] {
+ height: 24px;
+ width: 24px;
+
+ margin-right: 16px;
+ }
+
+ &[iconName="videos"] {
+ position: relative;
+ right: -1px;
+ }
+
+ &[iconName="channel"] {
+ margin-top: -2px;
+ }
+
+ &[iconName="sign-out"] {
+ position: relative;
+ right: -2px;
+ height: 20px;
+ width: 20px;
+ }
+}
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 2b723a15a..ea59ab346 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -4,82 +4,82 @@
.video-thumbnail {
@include miniature-thumbnail;
+}
- .progress-bar {
- height: 3px;
- width: 100%;
- position: absolute;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.20);
+.progress-bar {
+ height: 3px;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.20);
- div {
- height: 100%;
- background-color: pvar(--mainColor);
- }
- }
-
- .video-thumbnail-watch-later-overlay,
- .video-thumbnail-label-overlay,
- .video-thumbnail-duration-overlay,
- .video-thumbnail-live-overlay {
- @include static-thumbnail-overlay;
-
- border-radius: 3px;
- font-size: 12px;
- font-weight: $font-semibold;
- line-height: 1.1;
- z-index: z(miniature);
- }
-
- .video-thumbnail-label-overlay {
- position: absolute;
- padding: 0 5px;
- left: 5px;
- top: 5px;
- font-weight: $font-bold;
-
- &.warning { background-color: orange; }
- &.danger { background-color: red; }
- }
-
- .video-thumbnail-duration-overlay,
- .video-thumbnail-live-overlay {
- position: absolute;
- padding: 0 3px;
- right: 5px;
- bottom: 5px;
- }
-
- .video-thumbnail-live-overlay {
- font-weight: $font-semibold;
- color: #fff;
-
- &:not(.live-ended) {
- background-color: rgba(224, 8, 8, 0.7);
- }
- }
-
- .video-thumbnail-actions-overlay {
- position: absolute;
- display: flex;
- flex-direction: column;
- right: 5px;
- top: 5px;
- opacity: 0;
-
- div:not(:first-child) {
- margin-top: 2px;
- }
-
- .video-thumbnail-watch-later-overlay {
- padding: 3px;
-
- my-global-icon {
- width: 22px;
- height: 22px;
-
- @include apply-svg-color(#fff);
- }
- }
+ div {
+ height: 100%;
+ background-color: pvar(--mainColor);
+ }
+}
+
+.video-thumbnail-watch-later-overlay,
+.video-thumbnail-label-overlay,
+.video-thumbnail-duration-overlay,
+.video-thumbnail-live-overlay {
+ @include static-thumbnail-overlay;
+
+ border-radius: 3px;
+ font-size: 12px;
+ font-weight: $font-semibold;
+ line-height: 1.1;
+ z-index: z(miniature);
+}
+
+.video-thumbnail-label-overlay {
+ position: absolute;
+ padding: 0 5px;
+ left: 5px;
+ top: 5px;
+ font-weight: $font-bold;
+
+ &.warning { background-color: orange; }
+ &.danger { background-color: red; }
+}
+
+.video-thumbnail-duration-overlay,
+.video-thumbnail-live-overlay {
+ position: absolute;
+ padding: 0 3px;
+ right: 5px;
+ bottom: 5px;
+}
+
+.video-thumbnail-live-overlay {
+ font-weight: $font-semibold;
+ color: #fff;
+
+ &:not(.live-ended) {
+ background-color: rgba(224, 8, 8, 0.7);
+ }
+}
+
+.video-thumbnail-actions-overlay {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ right: 5px;
+ top: 5px;
+ opacity: 0;
+
+ div:not(:first-child) {
+ margin-top: 2px;
+ }
+}
+
+.video-thumbnail-watch-later-overlay {
+ padding: 3px;
+
+ my-global-icon {
+ width: 22px;
+ height: 22px;
+
+ @include apply-svg-color(#fff);
}
}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 9c11e7609..bc19127aa 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -10,10 +10,14 @@
<div class="video-bottom">
<div class="video-miniature-information">
<div class="d-flex video-miniature-meta">
- <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
- <img [src]="getAvatarUrl()" alt="" class="channel" />
+ <a *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" class="channel-avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+ <img [src]="getAvatarUrl()" alt="" />
</a>
- <my-account-avatar *ngIf="displayOptions.avatar && displayOwnerAccount()" [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel" [title]="channelLinkTitle"></my-account-avatar>
+
+ <my-account-avatar
+ *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
+ [account]="video.account" size="40" [internalHref]="'/video-channels/' + video.byVideoChannel"
+ ></my-account-avatar>
<div class="w-100 d-flex flex-column">
<a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name"
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 bf52b870c..f6f2925f0 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
@@ -13,12 +13,12 @@ $more-button-width: 40px;
}
my-account-avatar,
-.avatar {
+.channel-avatar {
margin: 10px 10px 0 0;
+}
- img.channel {
- @include channel-avatar(40px);
- }
+.channel-avatar img{
+ @include channel-avatar(40px);
}
.video-miniature-created-at-views {
@@ -78,9 +78,9 @@ my-account-avatar,
}
}
-.video-miniature {
- &:hover ::ng-deep .video-thumbnail-actions-overlay,
- &:hover .video-actions ::ng-deep .dropdown-root {
+.video-miniature:hover {
+ ::ng-deep .video-thumbnail-actions-overlay,
+ .video-actions ::ng-deep .dropdown-root {
opacity: 1 !important;
}
}
@@ -153,7 +153,7 @@ my-account-avatar,
}
// We don't display avatar in row mode
- .avatar {
+ .channel-avatar {
display: none;
}