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) {
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: $font-size;
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));
158 border: 2px solid pvar(--mainColor);
159 font-weight: $font-semibold;
164 color: pvar(--mainColor);
165 background-color: pvar(--mainBackgroundColor);
169 color: pvar(--mainColor);
170 background-color: pvar(--mainColorLightest);
176 color: pvar(--mainColor);
177 background-color: pvar(--inputBorderColor);
181 @include apply-svg-color(pvar(--mainColor));
185 @mixin tertiary-button {
186 @include button-focus($grey-button-outline-color);
188 color: pvar(--greyForegroundColor);
189 background-color: transparent;
197 @include apply-svg-color(transparent);
202 @include button-focus($grey-button-outline-color);
204 background-color: pvar(--greyBackgroundColor);
205 color: pvar(--greyForegroundColor);
212 color: pvar(--greyForegroundColor);
213 background-color: pvar(--greySecondaryBackgroundColor);
222 @include apply-svg-color(pvar(--greyForegroundColor));
226 @mixin danger-button {
227 $color: lighten($color: #c54130, $amount: 10);
230 @include button-focus(scale-color($color, $alpha: -95%));
232 background-color: $color;
240 background-color: lighten($color: $color, $amount: 10);
249 @include apply-svg-color($text);
253 @mixin peertube-button {
257 font-weight: $font-semibold;
259 // Because of primeng that redefines border-radius of all input[type="..."]
260 border-radius: 3px !important;
265 font-size: $button-font-size;
268 @include margin-right(4px);
269 @include margin-left(4px);
273 @mixin peertube-button-big {
279 font-weight: $font-semibold;
281 // Because of primeng that redefines border-radius of all input[type="..."]
282 border-radius: 3px !important;
285 @mixin peertube-button-link {
286 @include disable-default-a-behaviour;
287 @include peertube-button;
289 display: inline-block;
292 @mixin peertube-button-big-link {
293 @include disable-default-a-behaviour;
294 @include peertube-button-big;
296 display: inline-block;
299 @mixin peertube-button-outline {
300 @include disable-default-a-behaviour;
301 @include peertube-button;
303 display: inline-block;
307 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
309 @include margin-right($margin-right);
317 @mixin peertube-file {
320 display: inline-block;
330 filter: alpha(opacity=0);
333 background: pvar(--mainBackgroundColor);
339 @mixin peertube-button-file ($width) {
340 @include peertube-file;
341 @include peertube-button;
346 @mixin icon ($size) {
347 display: inline-block;
348 background-repeat: no-repeat;
349 background-size: contain;
352 vertical-align: middle;
356 @mixin responsive-width ($width) {
359 @media screen and (max-width: $width) {
364 @mixin peertube-select-container ($width) {
369 color: pvar(--inputForegroundColor);
370 background: pvar(--inputBackgroundColor);
375 background-color: #E5E5E5;
383 background-color: #f9f9f9;
386 @media screen and (max-width: $width) {
392 right: calc(0% + 15px);
397 pointer-events: none;
398 border: 5px solid rgba(0, 0, 0, 0);
399 border-top-color: pvar(--mainForegroundColor);
405 padding: 4px 35px 4px 12px;
407 border: 1px solid pvar(--inputBorderColor);
408 background: transparent none;
410 text-overflow: ellipsis;
411 color: pvar(--mainForegroundColor);
412 font-size: $form-input-font-size;
413 line-height: $form-input-line-height;
421 text-shadow: 0 0 0 #000;
428 font-weight: $font-semibold;
433 &.peertube-select-button {
434 @include grey-button;
437 font-weight: $font-semibold;
438 color: pvar(--greyForegroundColor);
444 // Thanks: https://codepen.io/manabox/pen/raQmpL
445 @mixin peertube-radio-container {
447 font-size: $form-input-font-size;
450 [type=radio]:checked,
451 [type=radio]:not(:checked) {
459 [type=radio]:checked + label,
460 [type=radio]:not(:checked) + label {
465 display: inline-block;
466 font-weight: $font-regular;
469 [type=radio]:checked + label::before,
470 [type=radio]:not(:checked) + label::before {
477 border: 1px solid pvar(--inputBorderColor);
482 [type=radio]:checked + label::after,
483 [type=radio]:not(:checked) + label::after {
487 background: pvar(--mainColor);
492 transition: all 0.2s ease;
494 [type=radio]:not(:checked) + label::after {
498 [type=radio]:checked + label::after {
503 .form-group-description {
511 @mixin peertube-checkbox ($border-width) {
516 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
524 border: $border-width solid pvar(--inputBorderColor);
526 vertical-align: middle;
532 top: calc(2px - #{$border-width});
537 transform: rotate(45deg) scale(0);
538 border-right: 2px solid pvar(--mainBackgroundColor);
539 border-bottom: 2px solid pvar(--mainBackgroundColor);
544 border-color: transparent;
545 background: pvar(--mainColor);
546 animation: jelly 0.6s ease;
550 transform: rotate(45deg) scale(1);
555 @include margin-left(5px);
557 font-weight: $font-regular;
563 &[disabled] + span + span {
569 @mixin actor-avatar-size ($size) {
570 display: inline-block;
577 @mixin actor-counters ($separator-margin: 10px) {
578 color: pvar(--greyForegroundColor);
582 > *:not(:last-child)::after {
584 margin: 0 $separator-margin;
585 color: pvar(--mainColor);
589 @mixin in-content-small-title {
590 text-transform: uppercase;
591 color: pvar(--mainColor);
592 font-weight: $font-bold;
596 @mixin settings-big-title {
597 text-transform: uppercase;
598 color: pvar(--mainColor);
599 font-weight: $font-bold;
604 @mixin create-button {
605 @include peertube-button-link;
606 @include orange-button;
607 @include button-with-icon(20px, 5px, -1px);
610 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
612 min-height: $min-height;
613 padding-bottom: 20px;
617 border-bottom: 1px solid pvar(--inputBorderColor);
620 @media screen and (max-width: $small-view) {
621 @if $column-responsive {
622 flex-direction: column;
627 padding-bottom: 10px;
633 @mixin dropdown-with-icon-item {
637 @include margin-right(10px);
646 @mixin progressbar($small: false) {
647 background-color: pvar(--greyBackgroundColor);
652 border-radius: 0.25rem;
657 color: pvar(--greyForegroundColor);
672 color: pvar(--mainBackgroundColor);
673 background-color: pvar(--mainColor);
675 flex-direction: column;
676 justify-content: center;
679 transition: width 0.6s ease;
682 background-color: lighten($color: #c54130, $amount: 10);
693 font-weight: $font-semibold;
699 color: pvar(--mainColor);
703 @include padding-left(0.5rem);
706 @include padding-right(0.5rem);
708 display: inline-block;
726 box-sizing: border-box;
727 flex: 0 0 percentage(math.div(1, 3));
732 @include disable-default-a-behaviour;
734 text-decoration: none;
749 background: pvar(--submenuBackgroundColor);
751 box-sizing: border-box;
760 color: pvar(--mainForegroundColor);
767 color: pvar(--inputPlaceholderColor);
772 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
774 border-top: .05rem solid $color;
784 background: $background;
786 content: attr(data-content);
787 display: inline-block;
790 transform: translateY(-.65rem);
796 --avatar-size: 1.2rem;
798 display: inline-flex;
799 color: pvar(--mainForegroundColor);
800 height: var(--avatar-size);
803 text-decoration: none;
804 text-overflow: ellipsis;
805 vertical-align: middle;
809 @include margin-right(.2rem);
812 width: var(--avatar-size);
813 height: var(--avatar-size);
823 display: inline-block;
828 flex-direction: column;
829 justify-content: center;
834 // applies ratio (default to 16:9) to a child element (using $selector) only using
835 // an immediate's parent size. This allows to set a ratio without explicit
836 // dimensions, as width/height cannot be computed from each other.
837 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
838 $padding-percent: percentage($inverted-ratio);
843 padding-top: $padding-percent;
858 border-bottom: 2px solid $grey-background-color;
859 padding-bottom: 15px;
860 margin-bottom: $sub-menu-margin-bottom;
862 > span > my-global-icon,
864 @include margin-right(10px);
871 @include margin-left(7px);
878 @mixin play-icon ($width, $height) {
885 transform: translate(-50%, -50%) scale(0.5);
887 border-top: #{math.div($height, 2)} solid transparent;
888 border-bottom: #{math.div($height, 2)} solid transparent;
890 border-left: $width solid rgba(255, 255, 255, 0.95);
893 @mixin on-small-main-col () {
894 :host-context(.main-col:not(.expanded)) {
895 @media screen and (max-width: $small-view + $menu-width) {
900 :host-context(.main-col.expanded) {
901 @media screen and (max-width: $small-view) {
907 @mixin on-mobile-main-col () {
908 :host-context(.main-col:not(.expanded)) {
909 @media screen and (max-width: $mobile-view + $menu-width) {
914 :host-context(.main-col.expanded) {
915 @media screen and (max-width: $mobile-view) {
921 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
922 @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
923 @include margin-original($arg1, $arg1, $arg1, $arg1);
924 } @else if $arg3 ==null and $arg4 ==null {
925 @include margin-original($arg1, $arg2, $arg1, $arg2);
926 } @else if $arg4 ==null {
927 @include margin-original($arg1, $arg2, $arg3, $arg2);
929 @include margin-original($arg1, $arg2, $arg3, $arg4);
933 @mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
934 @include margin-left($inline-start);
935 @include margin-right($inline-end);
936 @include margin-top($block-start);
937 @include margin-bottom($block-end);
940 @mixin margin-left ($value) {
941 @supports (margin-inline-start: $value) {
942 @include rfs($value, margin-inline-start);
945 @supports not (margin-inline-start: $value) {
946 @include rfs($value, margin-left);
950 @mixin margin-right ($value) {
951 @supports (margin-inline-end: $value) {
952 @include rfs($value, margin-inline-end);
955 @supports not (margin-inline-end: $value) {
956 @include rfs($value, margin-right);
960 @mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
961 @include padding-left($inline-start);
962 @include padding-right($inline-end);
963 @include padding-top($block-start);
964 @include padding-bottom($block-end);
968 @mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
969 @if $arg2 ==null and $arg3 ==null and $arg4 ==null {
970 @include padding-original($arg1, $arg1, $arg1, $arg1);
971 } @else if $arg3 ==null and $arg4 ==null {
972 @include padding-original($arg1, $arg2, $arg1, $arg2);
973 } @else if $arg4 ==null {
974 @include padding-original($arg1, $arg2, $arg3, $arg2);
976 @include padding-original($arg1, $arg2, $arg3, $arg4);
980 @mixin padding-left ($value) {
981 @supports (padding-inline-start: $value) {
982 @include rfs($value, padding-inline-start);
985 @supports not (padding-inline-start: $value) {
986 @include rfs($value, padding-left);
990 @mixin padding-right ($value) {
991 @supports (padding-inline-end: $value) {
992 @include rfs($value, padding-inline-end);
995 @supports not (padding-inline-end: $value) {
996 @include rfs($value, padding-right);