diff options
Diffstat (limited to 'client/src/sass/include')
-rw-r--r-- | client/src/sass/include/_mixins.scss | 32 | ||||
-rw-r--r-- | client/src/sass/include/_variables.scss | 1 |
2 files changed, 20 insertions, 13 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 004f49262..1ce584f9b 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -80,8 +80,16 @@ | |||
80 | } | 80 | } |
81 | } | 81 | } |
82 | 82 | ||
83 | @mixin peertube-input-text($width) { | 83 | @mixin rounded-line-height-1-5 ($font-size) { |
84 | padding: 4px 15px; | 84 | line-height: $font-size + math.round(math.div($font-size, 2)); |
85 | } | ||
86 | |||
87 | @mixin peertube-input-text($width, $font-size: $form-input-font-size) { | ||
88 | @include rounded-line-height-1-5($font-size); | ||
89 | |||
90 | font-size: $font-size; | ||
91 | |||
92 | padding: 3px 15px; | ||
85 | display: inline-block; | 93 | display: inline-block; |
86 | width: $width; | 94 | width: $width; |
87 | max-width: $width; | 95 | max-width: $width; |
@@ -89,8 +97,6 @@ | |||
89 | background-color: pvar(--inputBackgroundColor); | 97 | background-color: pvar(--inputBackgroundColor); |
90 | border: 1px solid pvar(--inputBorderColor); | 98 | border: 1px solid pvar(--inputBorderColor); |
91 | border-radius: 3px; | 99 | border-radius: 3px; |
92 | font-size: $form-input-font-size; | ||
93 | line-height: $form-input-line-height; | ||
94 | 100 | ||
95 | &::placeholder { | 101 | &::placeholder { |
96 | color: pvar(--inputPlaceholderColor); | 102 | color: pvar(--inputPlaceholderColor); |
@@ -241,6 +247,8 @@ | |||
241 | } | 247 | } |
242 | 248 | ||
243 | @mixin peertube-button { | 249 | @mixin peertube-button { |
250 | @include rounded-line-height-1-5($button-font-size); | ||
251 | |||
244 | padding: 4px 13px; | 252 | padding: 4px 13px; |
245 | 253 | ||
246 | border: 0; | 254 | border: 0; |
@@ -253,7 +261,6 @@ | |||
253 | cursor: pointer; | 261 | cursor: pointer; |
254 | 262 | ||
255 | font-size: $button-font-size; | 263 | font-size: $button-font-size; |
256 | line-height: $button-font-size + math.round(math.div($button-font-size, 2)); | ||
257 | 264 | ||
258 | my-global-icon + * { | 265 | my-global-icon + * { |
259 | @include margin-right(4px); | 266 | @include margin-right(4px); |
@@ -303,10 +310,6 @@ | |||
303 | width: $width; | 310 | width: $width; |
304 | top: $top; | 311 | top: $top; |
305 | } | 312 | } |
306 | |||
307 | span { | ||
308 | vertical-align: middle; | ||
309 | } | ||
310 | } | 313 | } |
311 | 314 | ||
312 | @mixin peertube-file { | 315 | @mixin peertube-file { |
@@ -397,15 +400,17 @@ | |||
397 | } | 400 | } |
398 | 401 | ||
399 | select { | 402 | select { |
400 | padding: 4px 35px 4px 12px; | 403 | @include rounded-line-height-1-5($form-input-font-size); |
404 | |||
405 | font-size: $form-input-font-size; | ||
406 | |||
407 | padding: 3px 35px 3px 12px; | ||
401 | position: relative; | 408 | position: relative; |
402 | border: 1px solid pvar(--inputBorderColor); | 409 | border: 1px solid pvar(--inputBorderColor); |
403 | background: transparent none; | 410 | background: transparent none; |
404 | appearance: none; | 411 | appearance: none; |
405 | text-overflow: ellipsis; | 412 | text-overflow: ellipsis; |
406 | color: pvar(--mainForegroundColor); | 413 | color: pvar(--mainForegroundColor); |
407 | font-size: $form-input-font-size; | ||
408 | line-height: $form-input-line-height; | ||
409 | 414 | ||
410 | &:focus { | 415 | &:focus { |
411 | outline: none; | 416 | outline: none; |
@@ -432,6 +437,9 @@ | |||
432 | font-weight: $font-semibold; | 437 | font-weight: $font-semibold; |
433 | color: pvar(--greyForegroundColor); | 438 | color: pvar(--greyForegroundColor); |
434 | border: 0; | 439 | border: 0; |
440 | |||
441 | // No border, add +1 to vertical padding | ||
442 | padding: 4px 35px 4px 12px; | ||
435 | } | 443 | } |
436 | } | 444 | } |
437 | } | 445 | } |
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; |