Refactor menu css
This commit is contained in:
Chocobozzz
parent
fe88ca697d
commit
f1ac63488c
7 changed files with 209 additions and 249 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue