2 @use '_variables' as *;
4 @import '_bootstrap-mixins';
6 @mixin disable-default-a-behaviour {
10 text-decoration: none !important;
11 outline: none !important;
15 @mixin disable-outline {
16 &:focus:not(.focus-visible) {
24 text-overflow: ellipsis;
27 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) {
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;
37 text-overflow: ellipsis;
38 max-height: $font-size * $number-of-lines;
42 color: pvar(--greyForegroundColor) !important;
45 @mixin fade-text ($fade-after, $background-color) {
57 background: linear-gradient(transparent $fade-after, $background-color);
61 @mixin peertube-word-wrap ($with-hyphen: true) {
62 word-break: break-word;
63 word-wrap: break-word;
64 overflow-wrap: break-word;
71 @mixin apply-svg-color ($color) {
79 @mixin fill-svg-color ($color) {
87 @mixin button-focus($color) {
90 box-shadow: #{$focus-box-shadow-form} $color;
94 @mixin peertube-input-text($width) {
96 display: inline-block;
99 color: pvar(--inputForegroundColor);
100 background-color: pvar(--inputBackgroundColor);
101 border: 1px solid pvar(--inputBorderColor);
103 font-size: $form-input-font-size;
104 line-height: $form-input-line-height;
107 color: pvar(--inputPlaceholderColor);
114 @media screen and (max-width: calc(#{$width} + 40px)) {
119 @mixin peertube-textarea ($width, $height) {
120 @include peertube-input-text($width);
122 color: pvar(--textareaForegroundColor) !important;
123 background-color: pvar(--textareaBackgroundColor) !important;
128 @mixin orange-button {
129 @include button-focus(pvar(--mainColorLightest));
135 background-color: pvar(--mainColor);
140 background-color: pvar(--mainHoverColor);
147 background-color: pvar(--inputBorderColor);
151 @include apply-svg-color(#fff);
155 @mixin orange-button-inverted {
156 @include button-focus(pvar(--mainColorLightest));
159 border: 2px solid pvar(--mainColor);
160 font-weight: $font-semibold;
165 color: pvar(--mainColor);
166 background-color: pvar(--mainBackgroundColor);
170 color: pvar(--mainColor);
171 background-color: pvar(--mainColorLightest);
177 color: pvar(--mainColor);
178 background-color: pvar(--inputBorderColor);
182 @include apply-svg-color(pvar(--mainColor));
186 @mixin tertiary-button {
187 @include button-focus($grey-button-outline-color);
189 color: pvar(--greyForegroundColor);
190 background-color: transparent;
198 @include apply-svg-color(transparent);
203 @include button-focus($grey-button-outline-color);
205 background-color: pvar(--greyBackgroundColor);
206 color: pvar(--greyForegroundColor);
213 color: pvar(--greyForegroundColor);
214 background-color: pvar(--greySecondaryBackgroundColor);
223 @include apply-svg-color(pvar(--greyForegroundColor));
227 @mixin danger-button {
228 $color: lighten($color: #c54130, $amount: 10);
231 @include button-focus(scale-color($color, $alpha: -95%));
233 background-color: $color;
241 background-color: lighten($color: $color, $amount: 10);
250 @include apply-svg-color($text);
254 @mixin peertube-button {
258 font-weight: $font-semibold;
260 // Because of primeng that redefines border-radius of all input[type="..."]
261 border-radius: 3px !important;
266 font-size: $button-font-size;
267 line-height: $button-font-size + math.round(math.div($button-font-size, 2));
270 @include margin-right(4px);
271 @include margin-left(4px);
275 @mixin peertube-button-big {
281 font-weight: $font-semibold;
283 // Because of primeng that redefines border-radius of all input[type="..."]
284 border-radius: 3px !important;
287 @mixin peertube-button-link {
288 @include disable-default-a-behaviour;
289 @include peertube-button;
291 display: inline-block;
294 @mixin peertube-button-big-link {
295 @include disable-default-a-behaviour;
296 @include peertube-button-big;
298 display: inline-block;
301 @mixin peertube-button-outline {
302 @include disable-default-a-behaviour;
303 @include peertube-button;
305 display: inline-block;
309 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
311 @include margin-right($margin-right);
319 vertical-align: middle;
323 @mixin peertube-file {
326 display: inline-block;
336 filter: alpha(opacity=0);
339 background: pvar(--mainBackgroundColor);
345 @mixin peertube-button-file ($width) {
346 @include peertube-file;
347 @include peertube-button;
352 @mixin icon ($size) {
353 display: inline-block;
354 background-repeat: no-repeat;
355 background-size: contain;
358 vertical-align: middle;
362 @mixin responsive-width ($width) {
365 @media screen and (max-width: $width) {
370 @mixin peertube-select-container ($width) {
375 color: pvar(--inputForegroundColor);
376 background: pvar(--inputBackgroundColor);
381 background-color: #E5E5E5;
389 background-color: #f9f9f9;
392 @media screen and (max-width: $width) {
398 right: calc(0% + 15px);
403 pointer-events: none;
404 border: 5px solid rgba(0, 0, 0, 0);
405 border-top-color: pvar(--mainForegroundColor);
411 padding: 4px 35px 4px 12px;
413 border: 1px solid pvar(--inputBorderColor);
414 background: transparent none;
416 text-overflow: ellipsis;
417 color: pvar(--mainForegroundColor);
418 font-size: $form-input-font-size;
419 line-height: $form-input-line-height;
427 text-shadow: 0 0 0 #000;
434 font-weight: $font-semibold;
439 &.peertube-select-button {
440 @include grey-button;
443 font-weight: $font-semibold;
444 color: pvar(--greyForegroundColor);
450 // Thanks: https://codepen.io/manabox/pen/raQmpL
451 @mixin peertube-radio-container {
453 font-size: $form-input-font-size;
456 [type=radio]:checked,
457 [type=radio]:not(:checked) {
465 [type=radio]:checked + label,
466 [type=radio]:not(:checked) + label {
471 display: inline-block;
472 font-weight: $font-regular;
475 [type=radio]:checked + label::before,
476 [type=radio]:not(:checked) + label::before {
483 border: 1px solid pvar(--inputBorderColor);
488 [type=radio]:checked + label::after,
489 [type=radio]:not(:checked) + label::after {
493 background: pvar(--mainColor);
498 transition: all 0.2s ease;
500 [type=radio]:not(:checked) + label::after {
504 [type=radio]:checked + label::after {
509 .form-group-description {
517 @mixin peertube-checkbox ($border-width) {
522 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
530 border: $border-width solid pvar(--inputBorderColor);
532 vertical-align: middle;
538 top: calc(2px - #{$border-width});
543 transform: rotate(45deg) scale(0);
544 border-right: 2px solid pvar(--mainBackgroundColor);
545 border-bottom: 2px solid pvar(--mainBackgroundColor);
550 border-color: transparent;
551 background: pvar(--mainColor);
552 animation: jelly 0.6s ease;
556 transform: rotate(45deg) scale(1);
561 @include margin-left(5px);
563 font-weight: $font-regular;
569 &[disabled] + span + span {
575 @mixin actor-avatar-size ($size) {
576 display: inline-block;
583 @mixin actor-counters ($separator-margin: 10px) {
584 color: pvar(--greyForegroundColor);
588 > *:not(:last-child)::after {
590 margin: 0 $separator-margin;
591 color: pvar(--mainColor);
595 @mixin in-content-small-title {
596 text-transform: uppercase;
597 color: pvar(--mainColor);
598 font-weight: $font-bold;
602 @mixin settings-big-title {
603 text-transform: uppercase;
604 color: pvar(--mainColor);
605 font-weight: $font-bold;
610 @mixin create-button {
611 @include peertube-button-link;
612 @include orange-button;
613 @include button-with-icon(20px, 5px, -1px);
616 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
618 min-height: $min-height;
619 padding-bottom: 20px;
623 border-bottom: 1px solid pvar(--inputBorderColor);
626 @media screen and (max-width: $small-view) {
627 @if $column-responsive {
628 flex-direction: column;
633 padding-bottom: 10px;
639 @mixin dropdown-with-icon-item {
643 @include margin-right(10px);
652 @mixin progressbar($small: false) {
653 background-color: pvar(--greyBackgroundColor);
658 border-radius: 0.25rem;
663 color: pvar(--greyForegroundColor);
678 color: pvar(--mainBackgroundColor);
679 background-color: pvar(--mainColor);
681 flex-direction: column;
682 justify-content: center;
685 transition: width 0.6s ease;
688 background-color: lighten($color: #c54130, $amount: 10);
699 font-weight: $font-semibold;
705 color: pvar(--mainColor);
709 @include padding-left(0.5rem);
712 @include padding-right(0.5rem);
714 display: inline-block;
732 box-sizing: border-box;
733 flex: 0 0 percentage(math.div(1, 3));
738 @include disable-default-a-behaviour;
740 text-decoration: none;
755 background: pvar(--submenuBackgroundColor);
757 box-sizing: border-box;
766 color: pvar(--mainForegroundColor);
773 color: pvar(--inputPlaceholderColor);
778 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
780 border-top: .05rem solid $color;
790 background: $background;
792 content: attr(data-content);
793 display: inline-block;
796 transform: translateY(-.65rem);
802 --avatar-size: 1.2rem;
804 display: inline-flex;
805 color: pvar(--mainForegroundColor);
806 height: var(--avatar-size);
809 text-decoration: none;
810 text-overflow: ellipsis;
811 vertical-align: middle;
815 @include margin-right(.2rem);
818 width: var(--avatar-size);
819 height: var(--avatar-size);
829 display: inline-block;
834 flex-direction: column;
835 justify-content: center;
840 // applies ratio (default to 16:9) to a child element (using $selector) only using
841 // an immediate's parent size. This allows to set a ratio without explicit
842 // dimensions, as width/height cannot be computed from each other.
843 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
844 $padding-percent: percentage($inverted-ratio);
849 padding-top: $padding-percent;
864 border-bottom: 2px solid $grey-background-color;
865 padding-bottom: 15px;
866 margin-bottom: $sub-menu-margin-bottom;
868 > span > my-global-icon,
870 @include margin-right(10px);
877 @include margin-left(7px);
884 @mixin play-icon ($width, $height) {
891 transform: translate(-50%, -50%) scale(0.5);
893 border-top: #{math.div($height, 2)} solid transparent;
894 border-bottom: #{math.div($height, 2)} solid transparent;
896 border-left: $width solid rgba(255, 255, 255, 0.95);
899 @mixin on-small-main-col () {
900 :host-context(.main-col:not(.expanded)) {
901 @media screen and (max-width: $small-view + $menu-width) {
906 :host-context(.main-col.expanded) {
907 @media screen and (max-width: $small-view) {
913 @mixin on-mobile-main-col () {
914 :host-context(.main-col:not(.expanded)) {
915 @media screen and (max-width: $mobile-view + $menu-width) {
920 :host-context(.main-col.expanded) {
921 @media screen and (max-width: $mobile-view) {
927 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
928 @if $arg2 == null and $arg3 == null and $arg4 == null {
929 @include margin-original($arg1, $arg1, $arg1, $arg1);
930 } @else if $arg3 == null and $arg4 == null {
931 @include margin-original($arg1, $arg2, $arg1, $arg2);
932 } @else if $arg4 == null {
933 @include margin-original($arg1, $arg2, $arg3, $arg2);
935 @include margin-original($arg1, $arg2, $arg3, $arg4);
939 @mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
940 @include margin-left($inline-start);
941 @include margin-right($inline-end);
942 @include margin-top($block-start);
943 @include margin-bottom($block-end);
946 @mixin margin-left ($value) {
947 @supports (margin-inline-start: $value) {
948 @include rfs($value, margin-inline-start);
951 @supports not (margin-inline-start: $value) {
952 @include rfs($value, margin-left);
956 @mixin margin-right ($value) {
957 @supports (margin-inline-end: $value) {
958 @include rfs($value, margin-inline-end);
961 @supports not (margin-inline-end: $value) {
962 @include rfs($value, margin-right);
966 @mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
967 @include padding-left($inline-start);
968 @include padding-right($inline-end);
969 @include padding-top($block-start);
970 @include padding-bottom($block-end);
974 @mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
975 @if $arg2 == null and $arg3 == null and $arg4 == null {
976 @include padding-original($arg1, $arg1, $arg1, $arg1);
977 } @else if $arg3 == null and $arg4 == null {
978 @include padding-original($arg1, $arg2, $arg1, $arg2);
979 } @else if $arg4 == null {
980 @include padding-original($arg1, $arg2, $arg3, $arg2);
982 @include padding-original($arg1, $arg2, $arg3, $arg4);
986 @mixin padding-left ($value) {
987 @supports (padding-inline-start: $value) {
988 @include rfs($value, padding-inline-start);
991 @supports not (padding-inline-start: $value) {
992 @include rfs($value, padding-left);
996 @mixin padding-right ($value) {
997 @supports (padding-inline-end: $value) {
998 @include rfs($value, padding-inline-end);
1001 @supports not (padding-inline-end: $value) {
1002 @include rfs($value, padding-right);