2 @use '_variables' as *;
4 @import '_bootstrap-mixins';
7 @mixin disable-default-a-behaviour {
11 text-decoration: none !important;
12 outline: none !important;
16 @mixin disable-outline {
17 &:focus:not(.focus-visible) {
25 text-overflow: ellipsis;
28 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
30 /* Fallback for non-webkit */
31 display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
32 -webkit-line-clamp: $number-of-lines;
33 -webkit-box-orient: vertical;
34 /* Fallback for non-webkit */
35 font-size: $font-size;
36 line-height: $font-size;
38 text-overflow: ellipsis;
39 max-height: $font-size * $number-of-lines;
43 color: pvar(--greyForegroundColor) !important;
46 @mixin fade-text ($fade-after, $background-color) {
58 background: linear-gradient(transparent $fade-after, $background-color);
62 @mixin peertube-word-wrap ($with-hyphen: true) {
63 word-break: break-word;
64 word-wrap: break-word;
65 overflow-wrap: break-word;
72 @mixin apply-svg-color ($color) {
80 @mixin fill-svg-color ($color) {
88 @mixin button-focus($color) {
91 box-shadow: #{$focus-box-shadow-form} $color;
95 @mixin peertube-input-text($width) {
97 display: inline-block;
100 color: pvar(--inputForegroundColor);
101 background-color: pvar(--inputBackgroundColor);
102 border: 1px solid pvar(--inputBorderColor);
104 font-size: $form-input-font-size;
105 line-height: $form-input-line-height;
108 color: pvar(--inputPlaceholderColor);
115 @media screen and (max-width: calc(#{$width} + 40px)) {
120 @mixin peertube-textarea ($width, $height) {
121 @include peertube-input-text($width);
123 color: pvar(--textareaForegroundColor) !important;
124 background-color: pvar(--textareaBackgroundColor) !important;
129 @mixin orange-button {
130 @include button-focus(pvar(--mainColorLightest));
136 background-color: pvar(--mainColor);
141 background-color: pvar(--mainHoverColor);
148 background-color: pvar(--inputBorderColor);
152 @include apply-svg-color(#fff);
156 @mixin orange-button-inverted {
157 @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;
269 @include margin-right(4px);
270 @include margin-left(4px);
274 @mixin peertube-button-big {
280 font-weight: $font-semibold;
282 // Because of primeng that redefines border-radius of all input[type="..."]
283 border-radius: 3px !important;
286 @mixin peertube-button-link {
287 @include disable-default-a-behaviour;
288 @include peertube-button;
290 display: inline-block;
293 @mixin peertube-button-big-link {
294 @include disable-default-a-behaviour;
295 @include peertube-button-big;
297 display: inline-block;
300 @mixin peertube-button-outline {
301 @include disable-default-a-behaviour;
302 @include peertube-button;
304 display: inline-block;
308 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
310 @include margin-right($margin-right);
318 @mixin peertube-file {
321 display: inline-block;
331 filter: alpha(opacity=0);
334 background: pvar(--mainBackgroundColor);
340 @mixin peertube-button-file ($width) {
341 @include peertube-file;
342 @include peertube-button;
347 @mixin icon ($size) {
348 display: inline-block;
349 background-repeat: no-repeat;
350 background-size: contain;
353 vertical-align: middle;
357 @mixin responsive-width ($width) {
360 @media screen and (max-width: $width) {
365 @mixin peertube-select-container ($width) {
370 color: pvar(--inputForegroundColor);
371 background: pvar(--inputBackgroundColor);
376 background-color: #E5E5E5;
384 background-color: #f9f9f9;
387 @media screen and (max-width: $width) {
393 right: calc(0% + 15px);
398 pointer-events: none;
399 border: 5px solid rgba(0, 0, 0, 0);
400 border-top-color: pvar(--mainForegroundColor);
406 padding: 4px 35px 4px 12px;
408 border: 1px solid pvar(--inputBorderColor);
409 background: transparent none;
411 text-overflow: ellipsis;
412 color: pvar(--mainForegroundColor);
413 font-size: $form-input-font-size;
414 line-height: $form-input-line-height;
422 text-shadow: 0 0 0 #000;
429 font-weight: $font-semibold;
434 &.peertube-select-button {
435 @include grey-button;
438 font-weight: $font-semibold;
439 color: pvar(--greyForegroundColor);
445 // Thanks: https://codepen.io/manabox/pen/raQmpL
446 @mixin peertube-radio-container {
448 font-size: $form-input-font-size;
451 [type=radio]:checked,
452 [type=radio]:not(:checked) {
460 [type=radio]:checked + label,
461 [type=radio]:not(:checked) + label {
466 display: inline-block;
467 font-weight: $font-regular;
470 [type=radio]:checked + label::before,
471 [type=radio]:not(:checked) + label::before {
478 border: 1px solid pvar(--inputBorderColor);
483 [type=radio]:checked + label::after,
484 [type=radio]:not(:checked) + label::after {
488 background: pvar(--mainColor);
493 transition: all 0.2s ease;
495 [type=radio]:not(:checked) + label::after {
499 [type=radio]:checked + label::after {
504 .form-group-description {
512 @mixin peertube-checkbox ($border-width) {
517 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
525 border: $border-width solid pvar(--inputBorderColor);
527 vertical-align: middle;
533 top: calc(2px - #{$border-width});
538 transform: rotate(45deg) scale(0);
539 border-right: 2px solid pvar(--mainBackgroundColor);
540 border-bottom: 2px solid pvar(--mainBackgroundColor);
545 border-color: transparent;
546 background: pvar(--mainColor);
547 animation: jelly 0.6s ease;
551 transform: rotate(45deg) scale(1);
556 @include margin-left(5px);
558 font-weight: $font-regular;
564 &[disabled] + span + span {
570 @mixin actor-avatar-size ($size) {
571 display: inline-block;
578 @mixin actor-counters ($separator-margin: 10px) {
579 color: pvar(--greyForegroundColor);
583 > *:not(:last-child)::after {
585 margin: 0 $separator-margin;
586 color: pvar(--mainColor);
590 @mixin in-content-small-title {
591 text-transform: uppercase;
592 color: pvar(--mainColor);
593 font-weight: $font-bold;
597 @mixin settings-big-title {
598 text-transform: uppercase;
599 color: pvar(--mainColor);
600 font-weight: $font-bold;
605 @mixin create-button {
606 @include peertube-button-link;
607 @include orange-button;
608 @include button-with-icon(20px, 5px, -1px);
611 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
613 min-height: $min-height;
614 padding-bottom: 20px;
618 border-bottom: 1px solid pvar(--inputBorderColor);
621 @media screen and (max-width: $small-view) {
622 @if $column-responsive {
623 flex-direction: column;
628 padding-bottom: 10px;
634 @mixin dropdown-with-icon-item {
638 @include margin-right(10px);
647 @mixin progressbar($small: false) {
648 background-color: pvar(--greyBackgroundColor);
653 border-radius: 0.25rem;
658 color: pvar(--greyForegroundColor);
673 color: pvar(--mainBackgroundColor);
674 background-color: pvar(--mainColor);
676 flex-direction: column;
677 justify-content: center;
680 transition: width 0.6s ease;
683 background-color: lighten($color: #c54130, $amount: 10);
694 font-weight: $font-semibold;
700 color: pvar(--mainColor);
704 @include padding-left(0.5rem);
707 @include padding-right(0.5rem);
709 display: inline-block;
727 box-sizing: border-box;
728 flex: 0 0 percentage(math.div(1, 3));
733 @include disable-default-a-behaviour;
735 text-decoration: none;
750 background: pvar(--submenuBackgroundColor);
752 box-sizing: border-box;
761 color: pvar(--mainForegroundColor);
768 color: pvar(--inputPlaceholderColor);
773 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
775 border-top: .05rem solid $color;
785 background: $background;
787 content: attr(data-content);
788 display: inline-block;
791 transform: translateY(-.65rem);
797 --avatar-size: 1.2rem;
799 display: inline-flex;
800 color: pvar(--mainForegroundColor);
801 height: var(--avatar-size);
804 text-decoration: none;
805 text-overflow: ellipsis;
806 vertical-align: middle;
810 @include margin-right(.2rem);
813 width: var(--avatar-size);
814 height: var(--avatar-size);
824 display: inline-block;
829 flex-direction: column;
830 justify-content: center;
835 // applies ratio (default to 16:9) to a child element (using $selector) only using
836 // an immediate's parent size. This allows to set a ratio without explicit
837 // dimensions, as width/height cannot be computed from each other.
838 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
839 $padding-percent: percentage($inverted-ratio);
844 padding-top: $padding-percent;
859 border-bottom: 2px solid $grey-background-color;
860 padding-bottom: 15px;
861 margin-bottom: $sub-menu-margin-bottom;
863 > span > my-global-icon,
865 @include margin-right(10px);
872 @include margin-left(7px);
879 @mixin play-icon ($width, $height) {
886 transform: translate(-50%, -50%) scale(0.5);
888 border-top: #{math.div($height, 2)} solid transparent;
889 border-bottom: #{math.div($height, 2)} solid transparent;
891 border-left: $width solid rgba(255, 255, 255, 0.95);
894 @mixin on-small-main-col () {
895 :host-context(.main-col:not(.expanded)) {
896 @media screen and (max-width: $small-view + $menu-width) {
901 :host-context(.main-col.expanded) {
902 @media screen and (max-width: $small-view) {
908 @mixin on-mobile-main-col () {
909 :host-context(.main-col:not(.expanded)) {
910 @media screen and (max-width: $mobile-view + $menu-width) {
915 :host-context(.main-col.expanded) {
916 @media screen and (max-width: $mobile-view) {
922 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
923 @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
924 @include margin-original($arg1, $arg1, $arg1, $arg1);
925 } @else if $arg3 ==null and $arg4 ==null {
926 @include margin-original($arg1, $arg2, $arg1, $arg2);
927 } @else if $arg4 ==null {
928 @include margin-original($arg1, $arg2, $arg3, $arg2);
930 @include margin-original($arg1, $arg2, $arg3, $arg4);
934 @mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
935 @include margin-left($inline-start);
936 @include margin-right($inline-end);
937 @include margin-top($block-start);
938 @include margin-bottom($block-end);
941 @mixin margin-left ($value) {
942 @supports (margin-inline-start: $value) {
943 @include rfs($value, margin-inline-start);
946 @supports not (margin-inline-start: $value) {
947 @include rfs($value, margin-left);
951 @mixin margin-right ($value) {
952 @supports (margin-inline-end: $value) {
953 @include rfs($value, margin-inline-end);
956 @supports not (margin-inline-end: $value) {
957 @include rfs($value, margin-right);
961 @mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
962 @include padding-left($inline-start);
963 @include padding-right($inline-end);
964 @include padding-top($block-start);
965 @include padding-bottom($block-end);
969 @mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
970 @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
971 @include padding-original($arg1, $arg1, $arg1, $arg1);
972 } @else if $arg3 ==null and $arg4 ==null {
973 @include padding-original($arg1, $arg2, $arg1, $arg2);
974 } @else if $arg4 ==null {
975 @include padding-original($arg1, $arg2, $arg3, $arg2);
977 @include padding-original($arg1, $arg2, $arg3, $arg4);
981 @mixin padding-left ($value) {
982 @supports (padding-inline-start: $value) {
983 @include rfs($value, padding-inline-start);
986 @supports not (padding-inline-start: $value) {
987 @include rfs($value, padding-left);
991 @mixin padding-right ($value) {
992 @supports (padding-inline-end: $value) {
993 @include rfs($value, padding-inline-end);
996 @supports not (padding-inline-end: $value) {
997 @include rfs($value, padding-right);