</div>
</div>
- <div class="results-filter collapse-transition" [ngbCollapse]="isSearchFilterCollapsed">
+ <div class="results-filter" [ngbCollapse]="isSearchFilterCollapsed" [animation]="true">
<my-search-filters [advancedSearch]="advancedSearch" (filtered)="onFiltered()"></my-search-filters>
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="root-header">
<div class="top-left-block">
- <span class="icon icon-menu" role="button" [title]="getToggleTitle()" (click)="menu.toggleMenu()"></span>
+ <span role="button" tabindex="0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()">
+ <span class="icon icon-menu"></span>
+ </span>
- <a class="peertube-title c-hand" (click)="goToDefaultRoute()">
+ <a class="peertube-title c-hand" [routerLink]="getDefaultRoute()">
<span class="icon icon-logo"></span>
<span class="instance-name">{{ instanceName }}</span>
</a>
<div class="sub-header-container">
<my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
- <div id="content" tabindex="-1" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
+ <div id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
<div class="main-row">
return this.serverConfig.instance.name
}
- goToDefaultRoute () {
- return this.router.navigateByUrl(this.redirectService.getDefaultRoute())
- }
-
ngOnInit () {
document.getElementById('incompatible-browser').className += ' browser-ok'
this.pluginService.initializeCustomModal(this.customModal)
}
+ getDefaultRoute () {
+ return this.redirectService.getDefaultRoute()
+ }
+
getToggleTitle () {
if (this.menu.isDisplayed()) return $localize`Close the left menu`
class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
[container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
>
- <div ngbDropdownToggle>
+ <button class="border-0 text-start" ngbDropdownToggle>
<my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
<div class="logged-in-info">
<div class="dropdown-toggle-indicator">
<span class="chevron-down"></span>
</div>
- </div>
+ </button>
<div ngbDropdownMenu>
<a
<div class="dropdown-divider"></div>
- <a
+ <button
myPluginSelector pluginSelectorId="menu-user-dropdown-language-item"
ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()"
>
<my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
<span i18n>Interface:</span>
<span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
- </a>
+ </button>
<a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
#settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
<span class="ms-auto muted">{{ nsfwPolicy }}</span>
</a>
- <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
+ <button ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
<my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
<ng-container i18n>Help share videos</ng-container>
<my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
- </a>
+ </button>
<div class="dropdown-divider"></div>
</div>
<div *ngIf="!isLoggedIn" class="login-buttons-block">
- <my-login-link className="peertube-button-link orange-button w-100"></my-login-link>
+ <my-login-link className="peertube-button-link orange-button w-100 text-truncate"></my-login-link>
- <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">
+ <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button text-truncate">
<my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
</a>
</div>
> a,
> my-login-link {
- @include ellipsis;
-
display: block;
width: 100%;
<div *ngIf="unreadNotifications >= 100" class="unread-notifications">99+</div>
</ng-template>
-<div
+<button
[ngbPopover]="popContent" autoClose="outside" placement="bottom" container={this} popoverClass="popover-notifications"
- i18n-title title="View your notifications" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
+ i18n-title title="View your notifications"
+ class="border-0 text-start" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
#popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()"
>
<ng-container *ngTemplateOutlet="notificationNumber"></ng-container>
<my-global-icon iconName="bell"></my-global-icon>
-</div>
+</button>
<div *ngIf="isInMobileView" i18n-title title="View your notifications" class="notification-inbox-link">
<ng-container *ngTemplateOutlet="notificationNumber"></ng-container>
</ng-template>
</ng-container>
- <my-global-icon
- *ngIf="!isMaximized" role="button" [ngbTooltip]="maximizeInText"
- class="maximize-button" iconName="fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
- ></my-global-icon>
-
- <my-global-icon
- *ngIf="isMaximized" role="button" [ngbTooltip]="maximizeOutText"
- class="maximize-button" iconName="exit-fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
- ></my-global-icon>
+ <button (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
+ <my-global-icon *ngIf="!isMaximized" [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
+
+ <my-global-icon *ngIf="isMaximized" [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
+ </button>
</div>
<div [ngbNavOutlet]="nav"></div>
}
.nav-preview {
- padding: 10px;
+ padding: 10px 0;
border: 1px solid pvar(--inputBorderColor);
border-top: 1px dashed pvar(--inputBorderColor);
border-bottom: 2px solid pvar(--mainColor);
.maximize-button {
- @include margin-left(15px);
-
opacity: 0.6;
- cursor: default;
-
- &:not(.disabled) {
- cursor: pointer;
+ &:not([disabled]) {
&:hover,
&:active {
opacity: 1;
padding: 20px 0;
width: 100% !important;
-
- .maximize-button {
- @include margin-right(15px);
- }
}
textarea {
<h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
-<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+<div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
<ngb-panel *ngIf="panels.features" id="instance-features">
}
.instance-short-description {
- @include ellipsis-multiline(1rem, 3, inherit);
-
+ font-size: 1rem;
margin: 25px 0;
}
-.no-class {
+.inherit-parent {
color: inherit;
text-decoration: inherit;
position: inherit;
@Input() title?: string
@Input() className?: string
+ @Input() inheritParentCSS = false
@Input() tabindex: string | number
builtClasses: string
ngOnInit () {
- this.builtClasses = this.className
- ? this.className
- : 'no-class'
+ this.builtClasses = this.className || ''
+
+ if (!this.builtClasses || this.inheritParentCSS) {
+ this.builtClasses += ' inherit-parent'
+ }
}
}
-<div class="feed" *ngIf="syndicationItems && syndicationItems.length !== 0">
+<button class="feed border-0 p-0" *ngIf="syndicationItems && syndicationItems.length !== 0">
<my-global-icon
role="button" aria-label="Open syndication dropdown" i18n-aria-label
*ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
<ng-template #feedsList>
<a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
</ng-template>
-</div>
+</button>
.feed {
width: 100%;
+ color: inherit;
a {
- color: #000;
+ color: pvar(--mainForegroundColor);
display: block;
min-width: 100px;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
}
my-global-icon {
- cursor: pointer;
width: 100%;
}
</p>
</ng-template>
-<span
- role="button"
- class="help-tooltip-button"
+<button
+ class="help-tooltip-button p-0 border-0 mx-1"
[title]="title"
- tabindex=0
popoverClass="help-popover"
[attr.aria-pressed]="isPopoverOpened"
[ngbPopover]="tooltipTemplate"
(onShown)="onPopoverShown()"
>
<my-global-icon [iconName]="iconName"></my-global-icon>
-</span>
+</button>
@use '_mixins' as *;
.help-tooltip-button {
- @include disable-outline;
-
- cursor: pointer;
- border: 0;
- margin: 5px;
-
my-global-icon {
@include apply-svg-color(pvar(--greyForegroundColor));
<ng-template #modal let-hide="close">
<div class="modal-header">
<h4 i18n class="modal-title">Share</h4>
- <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+
+ <button class="border-0 p-0" (click)="hide()">
+ <my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon>
+ </button>
</div>
<div [ngbNavOutlet]="nav"></div>
<div class="filters">
- <div>
- <div class="form-group start-at" *ngIf="!video.isLive">
+ <div class="form-group start-at" *ngIf="!video.isLive">
+ <my-peertube-checkbox
+ inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
+ i18n-labelText labelText="Start at"
+ ></my-peertube-checkbox>
+
+ <my-timestamp-input
+ [timestamp]="customizations.startAt"
+ [maxTimestamp]="video.duration"
+ [disabled]="!customizations.startAtCheckbox"
+ [(ngModel)]="customizations.startAt"
+ >
+ </my-timestamp-input>
+ </div>
+
+ <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
+ <my-peertube-checkbox
+ inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
+ i18n-labelText labelText="Auto select subtitle"
+ ></my-peertube-checkbox>
+
+ <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
+ <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
+ <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group" *ngIf="isInVideoEmbedTab()">
+ <my-peertube-checkbox
+ inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+ i18n-labelText labelText="Only display embed URL"
+ ></my-peertube-checkbox>
+ </div>
+
+ <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
+
+ <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
+ <div class="form-group stop-at" *ngIf="!video.isLive">
<my-peertube-checkbox
- inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
- i18n-labelText labelText="Start at"
+ inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
+ i18n-labelText labelText="Stop at"
></my-peertube-checkbox>
<my-timestamp-input
- [timestamp]="customizations.startAt"
+ [timestamp]="customizations.stopAt"
[maxTimestamp]="video.duration"
- [disabled]="!customizations.startAtCheckbox"
- [(ngModel)]="customizations.startAt"
+ [disabled]="!customizations.stopAtCheckbox"
+ [(ngModel)]="customizations.stopAt"
>
</my-timestamp-input>
</div>
- <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
+ <div class="form-group">
<my-peertube-checkbox
- inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
- i18n-labelText labelText="Auto select subtitle"
+ inputName="autoplay" [(ngModel)]="customizations.autoplay"
+ i18n-labelText labelText="Autoplay"
></my-peertube-checkbox>
-
- <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
- <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
- <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
- </select>
- </div>
</div>
- <div class="form-group" *ngIf="isInVideoEmbedTab()">
+ <div class="form-group">
<my-peertube-checkbox
- inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
- i18n-labelText labelText="Only display embed URL"
+ inputName="muted" [(ngModel)]="customizations.muted"
+ i18n-labelText labelText="Muted"
></my-peertube-checkbox>
</div>
- <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
- </div>
-
- <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
- <div>
- <div class="form-group stop-at" *ngIf="!video.isLive">
- <my-peertube-checkbox
- inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
- i18n-labelText labelText="Stop at"
- ></my-peertube-checkbox>
-
- <my-timestamp-input
- [timestamp]="customizations.stopAt"
- [maxTimestamp]="video.duration"
- [disabled]="!customizations.stopAtCheckbox"
- [(ngModel)]="customizations.stopAt"
- >
- </my-timestamp-input>
- </div>
-
- <div class="form-group">
- <my-peertube-checkbox
- inputName="autoplay" [(ngModel)]="customizations.autoplay"
- i18n-labelText labelText="Autoplay"
- ></my-peertube-checkbox>
- </div>
-
- <div class="form-group">
- <my-peertube-checkbox
- inputName="muted" [(ngModel)]="customizations.muted"
- i18n-labelText labelText="Muted"
- ></my-peertube-checkbox>
- </div>
-
- <div class="form-group" *ngIf="!video.isLive">
- <my-peertube-checkbox
- inputName="loop" [(ngModel)]="customizations.loop"
- i18n-labelText labelText="Loop"
- ></my-peertube-checkbox>
- </div>
+ <div class="form-group" *ngIf="!video.isLive">
+ <my-peertube-checkbox
+ inputName="loop" [(ngModel)]="customizations.loop"
+ i18n-labelText labelText="Loop"
+ ></my-peertube-checkbox>
+ </div>
- <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
- <my-peertube-checkbox
- inputName="originUrl" [(ngModel)]="customizations.originUrl"
- i18n-labelText labelText="Use origin instance URL"
- ></my-peertube-checkbox>
- </div>
+ <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
+ <my-peertube-checkbox
+ inputName="originUrl" [(ngModel)]="customizations.originUrl"
+ i18n-labelText labelText="Use origin instance URL"
+ ></my-peertube-checkbox>
</div>
<ng-container *ngIf="isInVideoEmbedTab()">
</ng-container>
</div>
- <div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
- [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
-
+ <button
+ class="border-0 p-0 mt-4 mx-auto fw-semibold d-block"
+ (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
+ [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
+ >
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
<span class="chevron-down"></span>
Less customization
</ng-container>
</ng-container>
- </div>
+ </button>
</div>
</div>
</div>
}
.advanced-filters-button {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
font-weight: $font-semibold;
- cursor: pointer;
}
.video-caption-block {
-<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail">
+<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
<ng-container *ngTemplateOutlet="aContent"></ng-container>
</a>
-<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail">
+<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
<ng-container *ngTemplateOutlet="aContent"></ng-container>
</a>
<div [ngbNavOutlet]="resolutionNav"></div>
- <div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
+ <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
<div ngbNav #navMetadata="ngbNav" class="nav-tabs nav-metadata">
<ng-container ngbNavItem>
<a ngbNavLink i18n>Format</a>
<div class="first-row">
<div class="active-filters">
- <div
- class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button"
+ <button
+ class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed"
[attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
[ngClass]="{ active: !areFiltersCollapsed }"
>
<ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container>
<my-global-icon iconName="chevrons-up"></my-global-icon>
- </div>
+ </button>
<div
*ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
</div>
- <div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed">
+ <div [ngbCollapse]="areFiltersCollapsed" [animation]="true">
<div class="filters">
<div class="form-group">
<label class="with-description" for="languageOneOf" i18n>Languages:</label>
padding: 4px 15px;
margin-bottom: 15px;
cursor: pointer;
+
+ &:focus-visible {
+ outline: pvar(--mainColor) auto 1px;
+ }
}
.filters-toggle {
<div class="w-100 d-flex flex-column">
<my-link
- [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget"
- [title]="video.name"class="video-miniature-name" [ngClass]="{ 'blur-filter': isVideoBlur }" tabindex="-1"
+ [internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget" [inheritParentCSS]="true"
+ [title]="video.name" class="video-miniature-name" className="ellipsis-multiline-2" [ngClass]="{ 'blur-filter': isVideoBlur }"
>
{{ video.name }}
</my-link>
</span>
</span>
- <a tabindex="-1" *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
+ <a *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
<ng-container *ngIf="displayOwnerAccount()">{{ authorAccount }}</ng-container>
<ng-container *ngIf="displayOwnerVideoChannel()">{{ authorChannel }}</ng-container>
</a>
}
.video-miniature-name {
- @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+ font-size: $video-miniature-row-name-font-size;
}
.video-miniature-created-at-views,
<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
<my-link
- [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget"
+ [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true"
[title]="playlist.description" class="miniature-thumbnail"
>
<img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
<div class="miniature-info">
<my-link
- [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget"
- [title]="playlist.description" class="miniature-name" tabindex="-1"
+ [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true"
+ [title]="playlist.description" class="miniature-name" className="ellipsis-multiline-2"
>
{{ playlist.displayName }}
</my-link>
display: flex;
.miniature-name {
- @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
+ font-size: $video-miniature-row-name-font-size;
}
.miniature-thumbnail {
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
@import 'bootstrap/scss/dropdown';
@import 'bootstrap/scss/button-group';
@import 'bootstrap/scss/nav';
display: flex !important;
align-items: center;
height: 30px !important;
- padding: 10px 15px !important;
}
.nav.nav-pills {
border-color: #dee2e6;
}
-.collapse-transition {
- // Animation when we show/hide the filters
- transition: max-height 0.3s;
- display: block !important;
- overflow: hidden !important;
- max-height: 0;
-
- &.show {
- max-height: 1500px;
- overflow: inherit !important;
- }
-}
-
.accordion-button {
font-size: 18px;
display: none;
}
}
+
+.text-truncate {
+ // Prevent invalid height in parent: https://stackoverflow.com/a/22425601
+ vertical-align: top;
+}
@use '_variables' as *;
@use '_mixins' as *;
-.link-orange {
- color: pvar(--mainForegroundColor);
- font-weight: $font-semibold;
- border-bottom: 0.18em solid pvar(--mainColor);
- display: inline-block;
- line-height: 1.1;
-
- &:hover {
- color: pvar(--mainForegroundColor);
- opacity: 0.8;
- }
-}
-
-.underline-orange {
- display: inline-block;
- border-bottom: 0.19em solid pvar(--mainColor);
-}
-
-// ---------------------------------------------------------------------------
-
-.muted {
- @include muted;
-}
-
// ---------------------------------------------------------------------------
.pt-badge {
--- /dev/null
+@use '_badges' as *;
+@use '_icons' as *;
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.link-orange {
+ color: pvar(--mainForegroundColor);
+ font-weight: $font-semibold;
+ border-bottom: 0.18em solid pvar(--mainColor);
+ display: inline-block;
+ line-height: 1.1;
+
+ &:hover {
+ color: pvar(--mainForegroundColor);
+ opacity: 0.8;
+ }
+}
+
+.underline-orange {
+ display: inline-block;
+ border-bottom: 0.19em solid pvar(--mainColor);
+}
+
+// ---------------------------------------------------------------------------
+
+.muted {
+ @include muted;
+}
+
+// ---------------------------------------------------------------------------
+
+@mixin ellipsis-multiline($number-of-lines) {
+ display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
+ -webkit-line-clamp: $number-of-lines;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.ellipsis-multiline-2 {
+ @include ellipsis-multiline(2);
+}
+
+.ellipsis-multiline-3 {
+ @include ellipsis-multiline(3);
+}
+
+// ---------------------------------------------------------------------------
@use './_custom-bootstrap-helpers';
@use './_forms';
@use './_menu';
+@use './_text';
$input-btn-focus-width: 0;
$input-btn-focus-color: inherit;
$input-focus-border-color: #ced4da;
+$input-focus-box-shadow: 0 0 0 0.25rem pvar(--mainColorLightest);
$input-group-addon-color: pvar(--mainForegroundColor);
$input-group-addon-bg: pvar(--greyBackgroundColor);
@use '_mixins' as *;
@mixin miniature-name {
- @include ellipsis-multiline(1.1em, 2);
@include peertube-word-wrap(false);
+ font-size: 1.1em;
transition: color 0.2s;
font-weight: $font-semibold;
color: pvar(--mainForegroundColor);
&:focus,
&:active {
text-decoration: none !important;
+ }
+
+ &:focus:not(.focus-visible) {
outline: none !important;
}
}
@mixin disable-outline {
&:focus:not(.focus-visible) {
- outline: none;
+ outline: none !important;
}
}
text-overflow: ellipsis;
}
-@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) {
- display: block;
- /* Fallback for non-webkit */
- display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
- -webkit-line-clamp: $number-of-lines;
- -webkit-box-orient: vertical;
- /* Fallback for non-webkit */
- font-size: $font-size;
- line-height: $line-height;
- overflow: hidden;
- text-overflow: ellipsis;
- max-height: $font-size * $number-of-lines;
-}
-
@mixin muted {
color: pvar(--greyForegroundColor) !important;
}
&.ng-select-focused {
&:not(.ng-select-opened) > .ng-select-container {
- border-color: #ccc !important;
- box-shadow: none !important;
+ border-color: $ng-select-border !important;
}
}