aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-03-16 10:05:55 +0100
committerChocobozzz <me@florianbigard.com>2023-03-16 10:05:55 +0100
commit30f939c4b785e8cf2ad829a86f4b2f5892c2fda8 (patch)
tree0e92c36b04d5eab37108120721d671454868cb19
parenta31aed9c1ceee068656115096d0652ad12848936 (diff)
downloadPeerTube-30f939c4b785e8cf2ad829a86f4b2f5892c2fda8.tar.gz
PeerTube-30f939c4b785e8cf2ad829a86f4b2f5892c2fda8.tar.zst
PeerTube-30f939c4b785e8cf2ad829a86f4b2f5892c2fda8.zip
Fix button/input/select heights
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html7
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss6
-rw-r--r--client/src/app/header/header.component.html2
-rw-r--r--client/src/app/header/header.component.scss4
-rw-r--r--client/src/app/header/search-typeahead.component.scss4
-rw-r--r--client/src/sass/include/_mixins.scss32
-rw-r--r--client/src/sass/include/_variables.scss1
-rw-r--r--client/src/sass/ng-select.scss3
8 files changed, 30 insertions, 29 deletions
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index b98cd1156..e3b226768 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,8 +1,9 @@
1<h1 class="visually-hidden" i18n>Notifications</h1> 1<h1 class="visually-hidden" i18n>Notifications</h1>
2
2<div class="header"> 3<div class="header">
3 <a routerLink="/my-account/settings" fragment="notifications" i18n> 4 <a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications">
4 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 5 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
5 Notification preferences 6 <span i18n>Notification preferences</span>
6 </a> 7 </a>
7 8
8 <div class="peertube-select-container peertube-select-button ms-2 me-2"> 9 <div class="peertube-select-container peertube-select-button ms-2 me-2">
@@ -13,7 +14,7 @@
13 </select> 14 </select>
14 </div> 15 </div>
15 16
16 <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()"> 17 <button class="ms-auto peertube-button grey-button" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
17 <ng-container *ngIf="hasUnreadNotifications()"> 18 <ng-container *ngIf="hasUnreadNotifications()">
18 <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon> 19 <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
19 20
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index d412e568f..cee338991 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,17 +3,13 @@
3 3
4.header { 4.header {
5 display: flex; 5 display: flex;
6 margin-bottom: 20px; 6 margin-bottom: 1.25rem;
7 7
8 a { 8 a {
9 @include peertube-button-link;
10 @include grey-button;
11 @include button-with-icon(18px, 3px, -1px); 9 @include button-with-icon(18px, 3px, -1px);
12 } 10 }
13 11
14 button { 12 button {
15 @include peertube-button;
16 @include grey-button;
17 @include button-with-icon(20px, 3px, -1px); 13 @include button-with-icon(20px, 3px, -1px);
18 } 14 }
19 15
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index b5e9e3dd8..4e327769d 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,6 +1,6 @@
1<my-search-typeahead class="w-100 d-flex justify-content-center"></my-search-typeahead> 1<my-search-typeahead class="w-100 d-flex justify-content-center"></my-search-typeahead>
2 2
3<a class="publish-button" routerLink="/videos/upload"> 3<a class="peertube-button-link orange-button publish-button" routerLink="/videos/upload">
4 <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon> 4 <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon>
5 <span i18n class="publish-button-label">Publish</span> 5 <span i18n class="publish-button-label">Publish</span>
6</a> 6</a>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index ef7749ced..37bee4645 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -2,9 +2,7 @@
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.publish-button { 4.publish-button {
5 @include peertube-button-link; 5 @include button-with-icon(21px, 3px, -1px);
6 @include orange-button;
7 @include button-with-icon(22px, 3px, -1px);
8 @include margin-right(25px); 6 @include margin-right(25px);
9 7
10 @media screen and (max-width: $mobile-view) { 8 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 48b61cf3f..b96853400 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -2,13 +2,11 @@
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4#search-video { 4#search-video {
5 @include peertube-input-text($search-input-width); 5 @include peertube-input-text($search-input-width, 14px);
6 6
7 @include padding-left(10px); 7 @include padding-left(10px);
8 @include padding-right(40px); // For the search icon 8 @include padding-right(40px); // For the search icon
9 9
10 font-size: 14px;
11
12 &::placeholder { 10 &::placeholder {
13 color: pvar(--inputPlaceholderColor); 11 color: pvar(--inputPlaceholderColor);
14 } 12 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0f301dab2..cafe830fe 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -91,8 +91,16 @@
91 } 91 }
92} 92}
93 93
94@mixin peertube-input-text($width) { 94@mixin rounded-line-height-1-5 ($font-size) {
95 padding: 4px 15px; 95 line-height: $font-size + math.round(math.div($font-size, 2));
96}
97
98@mixin peertube-input-text($width, $font-size: $form-input-font-size) {
99 @include rounded-line-height-1-5($font-size);
100
101 font-size: $font-size;
102
103 padding: 3px 15px;
96 display: inline-block; 104 display: inline-block;
97 width: $width; 105 width: $width;
98 max-width: $width; 106 max-width: $width;
@@ -100,8 +108,6 @@
100 background-color: pvar(--inputBackgroundColor); 108 background-color: pvar(--inputBackgroundColor);
101 border: 1px solid pvar(--inputBorderColor); 109 border: 1px solid pvar(--inputBorderColor);
102 border-radius: 3px; 110 border-radius: 3px;
103 font-size: $form-input-font-size;
104 line-height: $form-input-line-height;
105 111
106 &::placeholder { 112 &::placeholder {
107 color: pvar(--inputPlaceholderColor); 113 color: pvar(--inputPlaceholderColor);
@@ -252,6 +258,8 @@
252} 258}
253 259
254@mixin peertube-button { 260@mixin peertube-button {
261 @include rounded-line-height-1-5($button-font-size);
262
255 padding: 4px 13px; 263 padding: 4px 13px;
256 264
257 border: 0; 265 border: 0;
@@ -264,7 +272,6 @@
264 cursor: pointer; 272 cursor: pointer;
265 273
266 font-size: $button-font-size; 274 font-size: $button-font-size;
267 line-height: $button-font-size + math.round(math.div($button-font-size, 2));
268 275
269 my-global-icon + * { 276 my-global-icon + * {
270 @include margin-right(4px); 277 @include margin-right(4px);
@@ -314,10 +321,6 @@
314 width: $width; 321 width: $width;
315 top: $top; 322 top: $top;
316 } 323 }
317
318 span {
319 vertical-align: middle;
320 }
321} 324}
322 325
323@mixin peertube-file { 326@mixin peertube-file {
@@ -408,15 +411,17 @@
408 } 411 }
409 412
410 select { 413 select {
411 padding: 4px 35px 4px 12px; 414 @include rounded-line-height-1-5($form-input-font-size);
415
416 font-size: $form-input-font-size;
417
418 padding: 3px 35px 3px 12px;
412 position: relative; 419 position: relative;
413 border: 1px solid pvar(--inputBorderColor); 420 border: 1px solid pvar(--inputBorderColor);
414 background: transparent none; 421 background: transparent none;
415 appearance: none; 422 appearance: none;
416 text-overflow: ellipsis; 423 text-overflow: ellipsis;
417 color: pvar(--mainForegroundColor); 424 color: pvar(--mainForegroundColor);
418 font-size: $form-input-font-size;
419 line-height: $form-input-line-height;
420 425
421 &:focus { 426 &:focus {
422 outline: none; 427 outline: none;
@@ -443,6 +448,9 @@
443 font-weight: $font-semibold; 448 font-weight: $font-semibold;
444 color: pvar(--greyForegroundColor); 449 color: pvar(--greyForegroundColor);
445 border: 0; 450 border: 0;
451
452 // No border, add +1 to vertical padding
453 padding: 4px 35px 4px 12px;
446 } 454 }
447 } 455 }
448} 456}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8358270da..1eb3135f4 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -96,7 +96,6 @@ $activated-action-button-color: #212529;
96 96
97$focus-box-shadow-form: 0 0 0 .2rem; 97$focus-box-shadow-form: 0 0 0 .2rem;
98$form-input-font-size: 15px; 98$form-input-font-size: 15px;
99$form-input-line-height: 1.4;
100 99
101$video-watch-player-factor: math.div(16, 9); 100$video-watch-player-factor: math.div(16, 9);
102$video-watch-info-margin-left: 44px; 101$video-watch-info-margin-left: 44px;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 55494a556..a9455b38b 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -35,8 +35,9 @@ $ng-select-input-text: pvar(--mainForegroundColor);
35@import '@ng-select/ng-select/scss/default.theme'; 35@import '@ng-select/ng-select/scss/default.theme';
36 36
37.ng-select { 37.ng-select {
38 @include rounded-line-height-1-5($ng-select-value-font-size);
39
38 font-size: $ng-select-value-font-size; 40 font-size: $ng-select-value-font-size;
39 line-height: $form-input-line-height;
40 41
41 &.ng-select-focused { 42 &.ng-select-focused {
42 &:not(.ng-select-opened) > .ng-select-container { 43 &:not(.ng-select-opened) > .ng-select-container {