diff options
Diffstat (limited to 'client/src/sass/include')
-rw-r--r-- | client/src/sass/include/_bootstrap-variables.scss | 1 | ||||
-rw-r--r-- | client/src/sass/include/_miniature.scss | 2 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 19 |
3 files changed, 6 insertions, 16 deletions
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss index ca4a835f9..47ebe685c 100644 --- a/client/src/sass/include/_bootstrap-variables.scss +++ b/client/src/sass/include/_bootstrap-variables.scss | |||
@@ -41,6 +41,7 @@ $input-focus-bg: pvar(--inputBackgroundColor); | |||
41 | $input-btn-focus-width: 0; | 41 | $input-btn-focus-width: 0; |
42 | $input-btn-focus-color: inherit; | 42 | $input-btn-focus-color: inherit; |
43 | $input-focus-border-color: #ced4da; | 43 | $input-focus-border-color: #ced4da; |
44 | $input-focus-box-shadow: 0 0 0 0.25rem pvar(--mainColorLightest); | ||
44 | 45 | ||
45 | $input-group-addon-color: pvar(--mainForegroundColor); | 46 | $input-group-addon-color: pvar(--mainForegroundColor); |
46 | $input-group-addon-bg: pvar(--greyBackgroundColor); | 47 | $input-group-addon-bg: pvar(--greyBackgroundColor); |
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index a1b963400..eb77f2c3d 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -2,9 +2,9 @@ | |||
2 | @use '_mixins' as *; | 2 | @use '_mixins' as *; |
3 | 3 | ||
4 | @mixin miniature-name { | 4 | @mixin miniature-name { |
5 | @include ellipsis-multiline(1.1em, 2); | ||
6 | @include peertube-word-wrap(false); | 5 | @include peertube-word-wrap(false); |
7 | 6 | ||
7 | font-size: 1.1em; | ||
8 | transition: color 0.2s; | 8 | transition: color 0.2s; |
9 | font-weight: $font-semibold; | 9 | font-weight: $font-semibold; |
10 | color: pvar(--mainForegroundColor); | 10 | color: pvar(--mainForegroundColor); |
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 0f301dab2..004f49262 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -8,13 +8,16 @@ | |||
8 | &:focus, | 8 | &:focus, |
9 | &:active { | 9 | &:active { |
10 | text-decoration: none !important; | 10 | text-decoration: none !important; |
11 | } | ||
12 | |||
13 | &:focus:not(.focus-visible) { | ||
11 | outline: none !important; | 14 | outline: none !important; |
12 | } | 15 | } |
13 | } | 16 | } |
14 | 17 | ||
15 | @mixin disable-outline { | 18 | @mixin disable-outline { |
16 | &:focus:not(.focus-visible) { | 19 | &:focus:not(.focus-visible) { |
17 | outline: none; | 20 | outline: none !important; |
18 | } | 21 | } |
19 | } | 22 | } |
20 | 23 | ||
@@ -24,20 +27,6 @@ | |||
24 | text-overflow: ellipsis; | 27 | text-overflow: ellipsis; |
25 | } | 28 | } |
26 | 29 | ||
27 | @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) { | ||
28 | display: block; | ||
29 | /* Fallback for non-webkit */ | ||
30 | display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */ | ||
31 | -webkit-line-clamp: $number-of-lines; | ||
32 | -webkit-box-orient: vertical; | ||
33 | /* Fallback for non-webkit */ | ||
34 | font-size: $font-size; | ||
35 | line-height: $line-height; | ||
36 | overflow: hidden; | ||
37 | text-overflow: ellipsis; | ||
38 | max-height: $font-size * $number-of-lines; | ||
39 | } | ||
40 | |||
41 | @mixin muted { | 30 | @mixin muted { |
42 | color: pvar(--greyForegroundColor) !important; | 31 | color: pvar(--greyForegroundColor) !important; |
43 | } | 32 | } |