From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 3 Apr 2020 10:30:52 +0000 (+0200)
Subject: Put box-shadow for input focus in variables, apply form-control to p-multiselect
X-Git-Tag: v2.2.0-rc.1~282
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=6a4c30de0e2ff82b8df1fc8ab4172ef63bd25566;p=oweals%2Fpeertube.git
Put box-shadow for input focus in variables, apply form-control to p-multiselect
---
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 0b292850e..75e52fa1b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -8,10 +8,6 @@
&:first-child {
font-size: 16px;
-
- & > div {
- font-weight: $font-semibold;
- }
}
& > div {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 5e95e2f9a..a755c4d69 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -1,5 +1,5 @@
<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
- <div class="form-group">
+ <div class="form-group form-group-select">
<label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
<my-help>
<ng-template ptTemplate="customHtml">
@@ -18,7 +18,7 @@
</div>
</div>
- <div class="form-group">
+ <div class="form-group form-group-select">
<label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
<my-help>
<ng-template ptTemplate="customHtml">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index 50da3ff37..430250b87 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
@@ -17,4 +17,8 @@ input[type=submit] {
@include peertube-select-container(340px);
margin-bottom: 30px;
-}
\ No newline at end of file
+}
+
+.form-group-select {
+ margin-bottom: 30px;
+}
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index f0357b579..e8c4528f4 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -240,10 +240,10 @@ ngb-tooltip-window {
&:focus-within,
&:focus {
- box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
&.input-error {
- box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
+ box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
}
}
}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index c1d1b3c59..5e591cf45 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -80,7 +80,8 @@ $play-overlay-width: 18px;
}
&.focus-visible {
- box-shadow: 0 0 0 2px var(--mainColor);
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ outline: none;
}
img {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d414704e9..56ada6b9e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -83,7 +83,7 @@
@mixin button-focus($color) {
&:focus,
&.focus-visible {
- box-shadow: 0 0 0 .2rem $color;
+ box-shadow: #{$focus-box-shadow-form} $color;
}
}
@@ -372,7 +372,7 @@
position: absolute;
&:focus + span {
- box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
}
& + span {
@@ -721,7 +721,7 @@
height: max-content;
&:focus-within {
- box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
}
}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d0f1a3630..f60d8ce94 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -72,6 +72,8 @@ $sub-menu-margin-bottom: 30px;
$activated-action-button-color: black;
+$focus-box-shadow-form: 0 0 0 .2rem;
+
/*** map theme ***/
// pass variables into a sass map,
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 06cd3f057..186146b3b 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -241,6 +241,21 @@ p-table {
// multiselect customizations
p-multiselect {
+ .ui-multiselect {
+ border-color: #C6C6C6;
+
+ &:not(.ui-state-disabled) {
+ &:hover {
+ border-color: #C6C6C6;
+ }
+
+ &:focus,
+ &.ui-state-focus {
+ box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+ }
+ }
+ }
+
.ui-multiselect-label {
font-size: 15px !important;
padding: 4px 30px 4px 12px !important;