<div class="form-group">
<label i18n for="fromName">Your name</label>
<input
- type="text" id="fromName"
+ type="text" id="fromName" class="form-control"
formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }"
>
<div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div>
<div class="form-group">
<label i18n for="fromEmail">Your email</label>
<input
- type="text" id="fromEmail"
+ type="text" id="fromEmail" class="form-control"
formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }"
>
<div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div>
<div class="form-group">
<label i18n for="subject">Subject</label>
<input
- type="text" id="subject"
+ type="text" id="subject" class="form-control"
formControlName="subject" [ngClass]="{ 'input-error': formErrors['subject'] }"
>
<div *ngIf="formErrors.subject" class="form-error">{{ formErrors.subject }}</div>
<div class="form-group">
<label i18n for="body">Your message</label>
- <textarea id="body" formControlName="body" [ngClass]="{ 'input-error': formErrors['body'] }">
+ <textarea id="body" formControlName="body" class="form-control" [ngClass]="{ 'input-error': formErrors['body'] }">
</textarea>
<div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div>
</div>
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Submit" class="action-button-submit"
<div class="form-group">
<label i18n for="instanceName">Name</label>
<input
- type="text" id="instanceName"
+ type="text" id="instanceName" class="form-control"
formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
>
<div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
<div class="form-group">
<label i18n for="instanceShortDescription">Short description</label>
<textarea
- id="instanceShortDescription" formControlName="shortDescription" class="small"
+ id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
></textarea>
<div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
</my-help>
<div class="peertube-select-container">
- <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
+ <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
<option i18n value="do_not_list">Do not list</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>
<div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
<textarea
- id="instanceCreationReason" formControlName="creationReason" class="small"
+ id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
[ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
></textarea>
<div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
<div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
<textarea
- id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small"
+ id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
></textarea>
<div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
<textarea
- id="instanceBusinessModel" formControlName="businessModel" class="small"
+ id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
[ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
></textarea>
<div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
<label i18n for="themeDefault">Theme</label>
<div class="peertube-select-container">
- <select formControlName="default" id="themeDefault">
+ <select formControlName="default" id="themeDefault" class="form-control">
<option i18n value="default">default</option>
<option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
<div class="form-group" formGroupName="instance">
<label i18n for="instanceDefaultClientRoute">Landing page</label>
<div class="peertube-select-container">
- <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
+ <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
<option i18n value="/videos/overview">Discover videos</option>
<option i18n value="/videos/trending">Trending videos</option>
<option i18n value="/videos/most-liked">Most liked videos</option>
<div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
<label i18n for="signupLimit">Signup limit</label>
<input
- type="number" min="-1" id="signupLimit"
+ type="number" min="-1" id="signupLimit" class="form-control"
formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
>
<div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
<div class="form-group">
<label i18n for="userVideoQuota">Default video quota per user</label>
<div class="peertube-select-container">
- <select id="userVideoQuota" formControlName="videoQuota">
+ <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
<option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
{{ videoQuotaOption.label }}
</option>
<div class="form-group">
<label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
<div class="peertube-select-container">
- <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
+ <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
<option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
{{ videoQuotaDailyOption.label }}
</option>
<div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
<label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
<input
- type="text" id="followingsInstanceAutoFollowIndexUrl"
+ type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
>
<div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
<div class="form-group" formGroupName="admin">
<label i18n for="adminEmail">Admin email</label>
<input
- type="text" id="adminEmail"
+ type="text" id="adminEmail" class="form-control"
formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
>
<div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
<label i18n for="signupLimit">Your Twitter username</label>
<input
- type="text" id="servicesTwitterUsername"
+ type="text" id="servicesTwitterUsername" class="form-control"
formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
>
<div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
<div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
<label i18n for="transcodingThreads">Transcoding threads</label>
<div class="peertube-select-container">
- <select id="transcodingThreads" formControlName="threads">
+ <select id="transcodingThreads" formControlName="threads" class="form-control">
<option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
{{ transcodingThreadOption.label }}
</option>
<div class="form-group" formGroupName="previews">
<label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
<input
- type="number" min="0" id="cachePreviewsSize"
+ type="number" min="0" id="cachePreviewsSize" class="form-control"
formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
>
<div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
<div class="form-group" formGroupName="captions">
<label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
<input
- type="number" min="0" id="cacheCaptionsSize"
+ type="number" min="0" id="cacheCaptionsSize" class="form-control"
formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
>
<div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
</my-help>
<textarea
- id="customizationJavascript" formControlName="javascript"
+ id="customizationJavascript" formControlName="javascript" class="form-control"
[ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
></textarea>
</my-help>
<textarea
- id="customizationCSS" formControlName="css"
+ id="customizationCSS" formControlName="css" class="form-control"
[ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
></textarea>
<div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
height: 250px;
}
-.form-control {
- &, &:focus {
- background-color: var(--inputBackgroundColor);
- color: var(--mainForegroundColor);
- }
-}
-
input[type=submit] {
@include peertube-button;
@include orange-button;
</div>
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Update this comment" class="action-button-submit"
<div class="form-group" *ngIf="isCreation()">
<label i18n for="username">Username</label>
<input
- type="text" id="username" i18n-placeholder placeholder="john"
+ type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
>
<div *ngIf="formErrors.username" class="form-error">
<div class="form-group">
<label i18n for="email">Email</label>
<input
- type="text" id="email" i18n-placeholder placeholder="mail@example.com"
+ type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
autocomplete="off"
>
</ng-template>
</my-help>
<input
- type="password" id="password" autocomplete="new-password"
+ type="password" id="password" autocomplete="new-password" class="form-control"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div *ngIf="formErrors.password" class="form-error">
<div class="modal-footer inputs">
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="dismiss()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="dismiss()" (key.enter)="dismiss()"
+ >
<input
type="submit" i18n-value value="Submit" class="action-button-submit"
<div class="form-group">
<label i18n for="new-email">New email</label>
<input
- type="email" id="new-email" i18n-placeholder placeholder="Your new email"
+ type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control"
formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
>
<div *ngIf="formErrors['new-email']" class="form-error">
<div class="form-group">
<input
type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
- formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+ formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
>
<div *ngIf="formErrors['password']" class="form-error">
{{ formErrors['password'] }}
<label i18n for="current-password">Change password</label>
<input
type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password"
- formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
+ formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" class="form-control"
>
<div *ngIf="formErrors['current-password']" class="form-error">
{{ formErrors['current-password'] }}
<input
type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password"
- formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
+ formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" class="form-control"
>
<div *ngIf="formErrors['new-password']" class="form-error">
{{ formErrors['new-password'] }}
<input
type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password"
- formControlName="new-confirmed-password"
+ formControlName="new-confirmed-password" class="form-control"
>
<div *ngIf="formErrors['new-confirmed-password']" class="form-error">
{{ formErrors['new-confirmed-password'] }}
<label i18n for="theme">Theme</label>
<div class="peertube-select-container">
- <select formControlName="theme" id="theme">
+ <select formControlName="theme" id="theme" class="form-control">
<option i18n value="instance-default">instance default</option>
<option i18n value="default">peertube default</option>
<div class="form-group">
<label i18n for="display-name">Display name</label>
<input
- type="text" id="display-name"
+ type="text" id="display-name" class="form-control"
formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
>
<div *ngIf="formErrors['display-name']" class="form-error">
<div class="form-group">
<label i18n for="description">Description</label>
<textarea
- id="description" formControlName="description"
+ id="description" formControlName="description" class="form-control"
[ngClass]="{ 'input-error': formErrors['description'] }"
></textarea>
<div *ngIf="formErrors.description" class="form-error">
</my-help>
<div class="peertube-select-container">
- <select id="nsfwPolicy" formControlName="nsfwPolicy">
+ <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
<option i18n value="do_not_list">Do not list</option>
<option i18n value="blur">Blur thumbnails</option>
<option i18n value="display">Display</option>
<div class="input-group">
<input
type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
- formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+ formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
>
<div class="input-group-append">
<span class="input-group-text">@{{ instanceHost }}</span>
<div class="form-group">
<label i18n for="display-name">Display name</label>
<input
- type="text" id="display-name"
+ type="text" id="display-name" class="form-control"
formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
>
<div *ngIf="formErrors['display-name']" class="form-error">
<div class="form-group">
<label i18n for="description">Description</label>
<textarea
- id="description" formControlName="description"
+ id="description" formControlName="description" class="form-control"
[ngClass]="{ 'input-error': formErrors['description'] }"
></textarea>
<div *ngIf="formErrors.description" class="form-error">
<div class="modal-footer inputs">
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="dismiss()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="dismiss()" (key.enter)="dismiss()"
+ >
<input
type="submit" i18n-value value="Submit" class="action-button-submit"
<div class="input-group">
<input
type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
- formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+ formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
>
<div class="input-group-append">
<span class="input-group-text">@{{ instanceHost }}</span>
<label for="email" i18n>Email</label>
<input
type="text" id="email" i18n-placeholder placeholder="Email"
- formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+ formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
>
<div *ngIf="formErrors.email" class="form-error">
{{ formErrors.email }}
<label for="password" i18n>Password</label>
<input
type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
- formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+ formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div *ngIf="formErrors.password" class="form-error">
{{ formErrors.password }}
<label i18n for="verify-email-email">Email</label>
<input
type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
- formControlName="verify-email-email" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
+ formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
>
<div *ngIf="formErrors['verify-email-email']" class="form-error">
{{ formErrors['verify-email-email'] }}
<label i18n for="username">User</label>
<input
type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
- formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
+ formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
>
<a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
or create an account
<div>
<input
type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
- formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+ formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
</div>
</div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
+ >
<input
type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
</my-peertube-checkbox>
- <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
+ <input
+ type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
</div>
</ng-template>
</div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span>
-
- <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
- rel="noopener noreferrer">
+ <input
+ type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
+ (click)="hide()" (key.enter)="hide()"
+ >
+
+ <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
+ class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
+ rel="noopener noreferrer" ngbAutofocus>
Configure my instance
</a>
</div>
type="text" id="original-publication-after" name="original-publication-after"
i18n-placeholder placeholder="After..."
[(ngModel)]="originallyPublishedStartYear"
+ class="form-control"
>
</div>
<div class="col-sm-6">
type="text" id="original-publication-before" name="original-publication-before"
i18n-placeholder placeholder="Before..."
[(ngModel)]="originallyPublishedEndYear"
+ class="form-control"
>
</div>
</div>
Reset
</button>
<div class="peertube-select-container">
- <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
+ <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf" class="form-control">
<option [value]="undefined" i18n>Display all categories</option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
Reset
</button>
<div class="peertube-select-container">
- <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
+ <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf" class="form-control">
<option [value]="undefined" i18n>Display all licenses</option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
Reset
</button>
<div class="peertube-select-container">
- <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
+ <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf" class="form-control">
<option [value]="undefined" i18n>Display all languages</option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
white-space: nowrap;
}
-::ng-deep {
- .ng2-tag-input {
- border: none !important;
- }
-
- .ng2-tags-container {
- display: flex;
- align-items: center;
- border: 1px solid #C6C6C6;
- border-radius: 3px;
- padding: 5px !important;
- height: max-content;
- }
-
- tag-input-form {
- input {
- height: 30px !important;
- font-size: 12px !important;
-
- background-color: var(--mainBackgroundColor) !important;
- color: var(--mainForegroundColor) !important;
- }
- }
-
- tag {
- background-color: $grey-background-color !important;
- color: #000 !important;
- border-radius: 3px !important;
- font-size: 12px !important;
- height: 30px !important;
- line-height: 30px !important;
- margin: 0 5px 0 0 !important;
- cursor: default !important;
- padding: 0 8px 0 10px !important;
-
- div {
- height: 100% !important;
- }
- }
-
- delete-icon {
- cursor: pointer !important;
- height: auto !important;
- vertical-align: middle !important;
- padding-left: 6px !important;
-
- svg {
- position: relative;
- top: -1px;
- height: auto !important;
- vertical-align: middle !important;
-
- path {
- fill: $grey-foreground-color !important;
- }
- }
-
- &:hover {
- transform: none !important;
- }
- }
-}
+@include ng2-tags
</div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="dismiss()" (key.enter)="dismiss()"
+ >
<input
+ ngbAutofocus
type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
- (click)="close()"
+ (click)="close()" (key.enter)="confirm()"
>
</div>
</ng-template>
)
}
- @HostListener('document:keydown.enter')
confirm () {
if (this.openedModal) this.openedModal.close()
}
<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
<textarea
[(ngModel)]="content" (ngModelChange)="onModelChange()"
- [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+ class="form-control" [ngClass]="classes"
+ [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
[id]="name" [name]="name">
</textarea>
<div class="modal-body">
<form novalidate [formGroup]="form" (ngSubmit)="banUser()">
<div class="form-group">
- <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
- </textarea>
+ <textarea
+ i18n-placeholder placeholder="Reason..." formControlName="reason"
+ class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
+ ></textarea>
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
</div>
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Ban this user" class="action-button-submit"
<form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
<div class="form-group">
- <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
- </textarea>
+ <textarea
+ i18n-placeholder placeholder="Reason..." formControlName="reason"
+ [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+ ></textarea>
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
</div>
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Submit" class="action-button-submit"
</div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Download" class="action-button-submit"
<form novalidate [formGroup]="form" (ngSubmit)="report()">
<div class="form-group">
- <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
- </textarea>
+ <textarea
+ i18n-placeholder placeholder="Reason..." formControlName="reason"
+ [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
+ ></textarea>
<div *ngIf="formErrors.reason" class="form-error">
{{ formErrors.reason }}
</div>
</div>
<div class="form-group inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Submit" class="action-button-submit"
<div class="video-actions">
<!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
<my-video-actions-dropdown
- *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
+ *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
(videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
></my-video-actions-dropdown>
</div>
</div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
<input
type="submit" i18n-value value="Add this caption" class="action-button-submit"
<div class="col-md-8">
<div class="form-group">
<label i18n for="name">Title</label>
- <input type="text" id="name" formControlName="name" />
+ <input type="text" id="name" class="form-control" formControlName="name" />
<div *ngIf="formErrors.name" class="form-error">
{{ formErrors.name }}
</div>
<div class="form-group">
<label i18n>Channel</label>
<div class="peertube-select-container">
- <select formControlName="channelId">
+ <select formControlName="channelId" class="form-control">
<option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
</select>
</div>
<div class="form-group">
<label i18n for="category">Category</label>
<div class="peertube-select-container">
- <select id="category" formControlName="category">
+ <select id="category" formControlName="category" class="form-control">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div class="form-group">
<label i18n for="licence">Licence</label>
<div class="peertube-select-container">
- <select id="licence" formControlName="licence">
+ <select id="licence" formControlName="licence" class="form-control">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div class="form-group">
<label i18n for="language">Language</label>
<div class="peertube-select-container">
- <select id="language" formControlName="language">
+ <select id="language" formControlName="language" class="form-control">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div class="form-group">
<label i18n for="privacy">Privacy</label>
<div class="peertube-select-container">
- <select id="privacy" formControlName="privacy">
+ <select id="privacy" formControlName="privacy" class="form-control">
<option></option>
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
<option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
@import '_variables';
@import '_mixins';
+label {
+ font-weight: $font-regular;
+ font-size: 100%;
+}
+
.peertube-select-container {
@include peertube-select-container(auto);
}
}
}
-::ng-deep {
- .ng2-tag-input {
- border: none !important;
- }
-
- .ng2-tags-container {
- display: flex;
- align-items: center;
- border: 1px solid #C6C6C6;
- border-radius: 3px;
- padding: 5px !important;
- height: max-content;
- }
-
- tag-input-form {
- input {
- height: 30px !important;
- font-size: 12px !important;
-
- background-color: var(--mainBackgroundColor) !important;
- color: var(--mainForegroundColor) !important;
- }
- }
-
- tag {
- background-color: $grey-background-color !important;
- color: #000 !important;
- border-radius: 3px !important;
- font-size: 12px !important;
- height: 30px !important;
- line-height: 30px !important;
- margin: 0 5px 0 0 !important;
- cursor: default !important;
- padding: 0 8px 0 10px !important;
-
- div {
- height: 100% !important;
- }
- }
-
- delete-icon {
- cursor: pointer !important;
- height: auto !important;
- vertical-align: middle !important;
- padding-left: 6px !important;
-
- svg {
- position: relative;
- top: -1px;
- height: auto !important;
- vertical-align: middle !important;
-
- path {
- fill: $grey-foreground-color !important;
- }
- }
-
- &:hover {
- transform: none !important;
- }
- }
-}
+@include ng2-tags
<div class="first-step-block">
<my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
- <div class="button-file">
+ <div class="button-file form-control">
<span i18n>Select the file to upload</span>
- <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" />
+ <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
</div>
<span class="button-file-extension">({{ videoExtensions }})</span>
<div class="form-group form-group-channel">
<label i18n for="first-step-channel">Channel</label>
<div class="peertube-select-container">
- <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
+ <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
<option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
</select>
</div>
<div class="form-group">
<label i18n for="first-step-privacy">Privacy</label>
<div class="peertube-select-container">
- <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
+ <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
<option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
</select>
<my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
</div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">
- Cancel
- </span>
+ <input
+ type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+ (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
+ >
<input
type="submit" i18n-value value="Login to comment" class="action-button-submit"
<div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
<div class="modal-footer inputs">
- <span i18n class="action-button action-button-cancel" (click)="hide()">Maybe later</span>
+ <input
+ type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
+ (click)="hide()" (key.enter)="hide()"
+ >
</div>
</ng-template>
// for css custom properties #{$var}
--mainColor: #{$main-color};
--mainColorLighter: #{$main-color-lighter};
+ --mainColorLightest: #{$main-color-lightest};
--mainHoverColor: #{$main-hover-color};
--mainBackgroundColor: #{$bg-color};
--mainForegroundColor: #{$fg-color};
.main-col {
margin-left: $menu-width;
width: calc(100% - #{$menu-width});
+ outline: none;
.margin-content {
margin-left: $not-expanded-horizontal-margins;
background-color: var(--secondaryColor);
}
}
+
+// input box-shadow on focus
+.form-control {
+ font-size: 15px;
+ color: var(--mainForegroundColor);
+ background-color: var(--inputBackgroundColor);
+ outline: none;
+
+ &:focus-within,
+ &:focus {
+ box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+
+ &.input-error {
+ box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
+ }
+ }
+}
}
}
-@mixin button-focus-visible-shadow($color) {
+@mixin button-focus($color) {
+ &:focus,
&.focus-visible {
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+ box-shadow: 0 0 0 .2rem $color;
}
}
}
@mixin orange-button {
- @include button-focus-visible-shadow(var(--mainHoverColor));
+ @include button-focus(var(--mainColorLightest));
&, &:active, &:focus {
color: #fff;
}
@mixin tertiary-button {
+ @include button-focus($grey-button-outline-color);
+
color: $grey-foreground-color;
background-color: transparent;
}
@mixin grey-button {
+ @include button-focus($grey-button-outline-color);
+
&, &:active, &:focus {
background-color: $grey-background-color;
color: $grey-foreground-color;
@mixin peertube-select-container ($width) {
padding: 0;
margin: 0;
- border: 1px solid #C6C6C6;
width: $width;
border-radius: 3px;
- overflow: hidden;
background: var(--inputBackgroundColor);
position: relative;
font-size: 15px;
width: calc(100% + 2px);
position: relative;
left: 1px;
- border: none;
- box-shadow: none;
+ border: 1px solid #C6C6C6;
background: transparent none;
appearance: none;
cursor: pointer;
position: absolute;
&:focus + span {
- box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
+ box-shadow: 0 0 0 .2rem var(--mainColorLightest);
}
& + span {
text-align: center;
}
}
+
+@mixin ng2-tags {
+ ::ng-deep {
+ .ng2-tag-input {
+ border: none !important;
+ }
+
+ .ng2-tags-container {
+ display: flex;
+ align-items: center;
+ border: 1px solid #C6C6C6;
+ border-radius: 3px;
+ padding: 5px !important;
+ height: max-content;
+
+ &:focus-within {
+ box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+ }
+ }
+
+ tag-input-form {
+ input {
+ height: 30px !important;
+ font-size: 12px !important;
+
+ background-color: var(--mainBackgroundColor) !important;
+ color: var(--mainForegroundColor) !important;
+ }
+ }
+
+ tag {
+ background-color: $grey-background-color !important;
+ color: #000 !important;
+ border-radius: 3px !important;
+ font-size: 12px !important;
+ height: 30px !important;
+ line-height: 30px !important;
+ margin: 0 5px 0 0 !important;
+ cursor: default !important;
+ padding: 0 8px 0 10px !important;
+
+ div {
+ height: 100% !important;
+ }
+ }
+
+ delete-icon {
+ cursor: pointer !important;
+ height: auto !important;
+ vertical-align: middle !important;
+ padding-left: 6px !important;
+
+ svg {
+ position: relative;
+ top: -1px;
+ height: auto !important;
+ vertical-align: middle !important;
+
+ path {
+ fill: $grey-foreground-color !important;
+ }
+ }
+
+ &:hover {
+ transform: none !important;
+ }
+ }
+ }
+}
$grey-background-hover-color: #EFEFEF;
$grey-foreground-color: #585858;
$grey-foreground-hover-color: #303030;
+$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
// Palette
$main-color: hsl(24, 90%, 50%);
$main-hover-color: lighten($main-color, 5%);
$main-color-lighter: lighten($main-color, 10%);
+$main-color-lightest: lighten($main-color, 40%);
$secondary-color: hsl(187, 77, 34);
//
$variables: (
--mainColor: var(--mainColor),
--mainColorLighter: var(--mainColorLighter),
+ --mainColorLightest: var(--mainColorLightest),
--mainHoverColor: var(--mainHoverColor),
--mainBackgroundColor: var(--mainBackgroundColor),
--mainForegroundColor: var(--mainForegroundColor),
projects / oweals / peertube.git / commitdiff