aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_actor.scss3
-rw-r--r--client/src/sass/include/_miniature.scss11
-rw-r--r--client/src/sass/include/_mixins.scss95
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}