diff options
Diffstat (limited to 'client/src/sass/include')
-rw-r--r-- | client/src/sass/include/_actor.scss | 3 | ||||
-rw-r--r-- | client/src/sass/include/_miniature.scss | 11 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 95 |
3 files changed, 86 insertions, 23 deletions
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index 372e7bd24..ab2038dde 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss | |||
@@ -30,7 +30,8 @@ | |||
30 | } | 30 | } |
31 | 31 | ||
32 | > div { | 32 | > div { |
33 | margin-left: $img-margin; | 33 | @include margin-left($img-margin); |
34 | |||
34 | min-width: 1px; | 35 | min-width: 1px; |
35 | } | 36 | } |
36 | 37 | ||
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 070aa3398..f782d374a 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -14,8 +14,9 @@ | |||
14 | } | 14 | } |
15 | 15 | ||
16 | &.blur-filter { | 16 | &.blur-filter { |
17 | @include padding-left(4px); | ||
18 | |||
17 | filter: blur(3px); | 19 | filter: blur(3px); |
18 | padding-left: 4px; | ||
19 | } | 20 | } |
20 | } | 21 | } |
21 | 22 | ||
@@ -102,11 +103,11 @@ | |||
102 | --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)}; | 103 | --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)}; |
103 | 104 | ||
104 | @if $margin { | 105 | @if $margin { |
105 | margin-left: var(--gridVideosMiniatureMargins) !important; | 106 | @include margin-left(var(--gridVideosMiniatureMargins) !important); |
106 | margin-right: var(--gridVideosMiniatureMargins) !important; | 107 | @include margin-right(var(--gridVideosMiniatureMargins) !important); |
107 | } @else { | 108 | } @else { |
108 | padding-left: var(--gridVideosMiniatureMargins) !important; | 109 | @include padding-left(var(--gridVideosMiniatureMargins) !important); |
109 | padding-right: var(--gridVideosMiniatureMargins) !important; | 110 | @include padding-right(var(--gridVideosMiniatureMargins) !important); |
110 | } | 111 | } |
111 | 112 | ||
112 | @media screen and (max-width: $mobile-view) { | 113 | @media screen and (max-width: $mobile-view) { |
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 4f2421aea..19454cdb2 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -84,6 +84,7 @@ | |||
84 | } | 84 | } |
85 | 85 | ||
86 | @mixin peertube-input-text($width) { | 86 | @mixin peertube-input-text($width) { |
87 | padding: 0 15px; | ||
87 | display: inline-block; | 88 | display: inline-block; |
88 | height: $button-height; | 89 | height: $button-height; |
89 | width: $width; | 90 | width: $width; |
@@ -91,8 +92,6 @@ | |||
91 | background-color: pvar(--inputBackgroundColor); | 92 | background-color: pvar(--inputBackgroundColor); |
92 | border: 1px solid #C6C6C6; | 93 | border: 1px solid #C6C6C6; |
93 | border-radius: 3px; | 94 | border-radius: 3px; |
94 | padding-left: 15px; | ||
95 | padding-right: 15px; | ||
96 | font-size: 15px; | 95 | font-size: 15px; |
97 | 96 | ||
98 | &::placeholder { | 97 | &::placeholder { |
@@ -257,6 +256,8 @@ | |||
257 | } | 256 | } |
258 | 257 | ||
259 | @mixin peertube-button { | 258 | @mixin peertube-button { |
259 | @include padding(0, 17px, 0, 13px); | ||
260 | |||
260 | border: 0; | 261 | border: 0; |
261 | font-weight: $font-semibold; | 262 | font-weight: $font-semibold; |
262 | font-size: 15px; | 263 | font-size: 15px; |
@@ -265,7 +266,6 @@ | |||
265 | // FIXME: because of primeng that redefines border-radius of all input[type="..."] | 266 | // FIXME: because of primeng that redefines border-radius of all input[type="..."] |
266 | border-radius: 3px !important; | 267 | border-radius: 3px !important; |
267 | text-align: center; | 268 | text-align: center; |
268 | padding: 0 17px 0 13px; | ||
269 | cursor: pointer; | 269 | cursor: pointer; |
270 | } | 270 | } |
271 | 271 | ||
@@ -290,9 +290,10 @@ | |||
290 | line-height: normal !important; | 290 | line-height: normal !important; |
291 | 291 | ||
292 | my-global-icon { | 292 | my-global-icon { |
293 | @include margin-right($margin-right); | ||
294 | |||
293 | position: relative; | 295 | position: relative; |
294 | width: $width; | 296 | width: $width; |
295 | margin-right: $margin-right; | ||
296 | top: $top; | 297 | top: $top; |
297 | } | 298 | } |
298 | } | 299 | } |
@@ -310,7 +311,7 @@ | |||
310 | width: 100%; | 311 | width: 100%; |
311 | height: 100%; | 312 | height: 100%; |
312 | font-size: 100px; | 313 | font-size: 100px; |
313 | text-align: right; | 314 | text-align: end; |
314 | filter: alpha(opacity=0); | 315 | filter: alpha(opacity=0); |
315 | opacity: 0; | 316 | opacity: 0; |
316 | outline: none; | 317 | outline: none; |
@@ -428,6 +429,8 @@ | |||
428 | cursor: pointer; | 429 | cursor: pointer; |
429 | 430 | ||
430 | &::before { | 431 | &::before { |
432 | @include margin-right(10px); | ||
433 | |||
431 | position: relative; | 434 | position: relative; |
432 | top: -2px; | 435 | top: -2px; |
433 | content: ''; | 436 | content: ''; |
@@ -440,7 +443,6 @@ | |||
440 | vertical-align: middle; | 443 | vertical-align: middle; |
441 | cursor: pointer; | 444 | cursor: pointer; |
442 | text-align: center; | 445 | text-align: center; |
443 | margin-right: 10px; | ||
444 | } | 446 | } |
445 | } | 447 | } |
446 | 448 | ||
@@ -500,9 +502,10 @@ | |||
500 | } | 502 | } |
501 | 503 | ||
502 | + span + span { | 504 | + span + span { |
505 | @include margin-left(5px); | ||
506 | |||
503 | font-size: 15px; | 507 | font-size: 15px; |
504 | font-weight: $font-regular; | 508 | font-weight: $font-regular; |
505 | margin-left: 5px; | ||
506 | cursor: pointer; | 509 | cursor: pointer; |
507 | display: inline; | 510 | display: inline; |
508 | } | 511 | } |
@@ -635,10 +638,10 @@ | |||
635 | padding: 6px 15px; | 638 | padding: 6px 15px; |
636 | 639 | ||
637 | my-global-icon { | 640 | my-global-icon { |
641 | @include margin-right(10px); | ||
642 | |||
638 | width: 22px; | 643 | width: 22px; |
639 | opacity: .7; | 644 | opacity: .7; |
640 | |||
641 | margin-right: 10px; | ||
642 | position: relative; | 645 | position: relative; |
643 | top: -2px; | 646 | top: -2px; |
644 | } | 647 | } |
@@ -705,10 +708,12 @@ | |||
705 | } | 708 | } |
706 | 709 | ||
707 | + .breadcrumb-item { | 710 | + .breadcrumb-item { |
708 | padding-left: 0.5rem; | 711 | @include padding-left(0.5rem); |
712 | |||
709 | &::before { | 713 | &::before { |
714 | @include padding-right(0.5rem); | ||
715 | |||
710 | display: inline-block; | 716 | display: inline-block; |
711 | padding-right: 0.5rem; | ||
712 | color: #6c757d; | 717 | color: #6c757d; |
713 | content: '/'; | 718 | content: '/'; |
714 | } | 719 | } |
@@ -822,8 +827,8 @@ | |||
822 | } | 827 | } |
823 | 828 | ||
824 | my-actor-avatar { | 829 | my-actor-avatar { |
825 | margin-left: -.4rem; | 830 | @include margin-left(-.4rem); |
826 | margin-right: .2rem; | 831 | @include margin-right(.2rem); |
827 | } | 832 | } |
828 | 833 | ||
829 | &.two-lines { | 834 | &.two-lines { |
@@ -836,11 +841,11 @@ | |||
836 | } | 841 | } |
837 | 842 | ||
838 | div { | 843 | div { |
844 | margin: 0 .1rem; | ||
845 | |||
839 | display: flex; | 846 | display: flex; |
840 | flex-direction: column; | 847 | flex-direction: column; |
841 | height: $avatar-height; | 848 | height: $avatar-height; |
842 | margin-left: .1rem; | ||
843 | margin-right: .1rem; | ||
844 | justify-content: center; | 849 | justify-content: center; |
845 | } | 850 | } |
846 | } | 851 | } |
@@ -875,14 +880,14 @@ | |||
875 | 880 | ||
876 | > span > my-global-icon, | 881 | > span > my-global-icon, |
877 | > my-global-icon { | 882 | > my-global-icon { |
878 | margin-right: 10px; | 883 | @include margin-right(10px); |
879 | width: 24px; | 884 | width: 24px; |
880 | height: 24px; | 885 | height: 24px; |
881 | vertical-align: top; | 886 | vertical-align: top; |
882 | } | 887 | } |
883 | 888 | ||
884 | .badge { | 889 | .badge { |
885 | margin-left: 7px; | 890 | @include margin-left(7px); |
886 | vertical-align: top; | 891 | vertical-align: top; |
887 | } | 892 | } |
888 | } | 893 | } |
@@ -930,3 +935,59 @@ | |||
930 | } | 935 | } |
931 | } | 936 | } |
932 | } | 937 | } |
938 | |||
939 | @mixin margin ($block-start, $inline-end, $block-end, $inline-start) { | ||
940 | @include margin-left($inline-start); | ||
941 | @include margin-right($inline-end); | ||
942 | |||
943 | margin-top: $block-start; | ||
944 | margin-bottom: $block-end; | ||
945 | } | ||
946 | |||
947 | @mixin padding ($block-start, $inline-end, $block-end, $inline-start) { | ||
948 | @include padding-left($inline-start); | ||
949 | @include padding-right($inline-end); | ||
950 | |||
951 | padding-top: $block-start; | ||
952 | padding-bottom: $block-end; | ||
953 | } | ||
954 | |||
955 | @mixin margin-left ($value) { | ||
956 | @supports (margin-inline-start: $value) { | ||
957 | margin-inline-start: $value; | ||
958 | } | ||
959 | |||
960 | @supports not (margin-inline-start: $value) { | ||
961 | margin-left: $value; | ||
962 | } | ||
963 | } | ||
964 | |||
965 | @mixin margin-right ($value) { | ||
966 | @supports (margin-inline-end: $value) { | ||
967 | margin-inline-end: $value; | ||
968 | } | ||
969 | |||
970 | @supports not (margin-inline-end: $value) { | ||
971 | margin-right: $value; | ||
972 | } | ||
973 | } | ||
974 | |||
975 | @mixin padding-left ($value) { | ||
976 | @supports (padding-inline-start: $value) { | ||
977 | padding-inline-start: $value; | ||
978 | } | ||
979 | |||
980 | @supports not (padding-inline-start: $value) { | ||
981 | padding-left: $value; | ||
982 | } | ||
983 | } | ||
984 | |||
985 | @mixin padding-right ($value) { | ||
986 | @supports (padding-inline-end: $value) { | ||
987 | padding-inline-end: $value; | ||
988 | } | ||
989 | |||
990 | @supports not (padding-inline-end: $value) { | ||
991 | padding-right: $value; | ||
992 | } | ||
993 | } | ||