2 @use '_variables' as *;
4 @mixin disable-default-a-behaviour {
8 text-decoration: none !important;
9 outline: none !important;
13 @mixin disable-outline {
14 &:focus:not(.focus-visible) {
22 text-overflow: ellipsis;
25 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
27 /* Fallback for non-webkit */
28 display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
29 -webkit-line-clamp: $number-of-lines;
30 /* Fallback for non-webkit */
31 font-size: $font-size;
32 line-height: $font-size;
34 text-overflow: ellipsis;
35 max-height: $font-size * $number-of-lines;
38 @mixin fade-text ($fade-after, $background-color) {
50 background: linear-gradient(transparent $fade-after, $background-color);
54 @mixin peertube-word-wrap ($with-hyphen: true) {
55 word-break: break-word;
56 word-wrap: break-word;
57 overflow-wrap: break-word;
64 @mixin apply-svg-color ($color) {
72 @mixin fill-svg-color ($color) {
80 @mixin button-focus($color) {
83 box-shadow: #{$focus-box-shadow-form} $color;
87 @mixin peertube-input-text($width) {
89 display: inline-block;
90 height: $button-height;
93 color: pvar(--inputForegroundColor);
94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid pvar(--inputBorderColor);
97 font-size: $form-input-font-size;
98 line-height: $form-input-line-height;
101 color: pvar(--inputPlaceholderColor);
108 @media screen and (max-width: calc(#{$width} + 40px)) {
113 @mixin peertube-textarea ($width, $height) {
114 @include peertube-input-text($width);
116 color: pvar(--textareaForegroundColor) !important;
117 background-color: pvar(--textareaBackgroundColor) !important;
122 @mixin orange-button {
123 @include button-focus(pvar(--mainColorLightest));
129 background-color: pvar(--mainColor);
134 background-color: pvar(--mainHoverColor);
141 background-color: pvar(--inputBorderColor);
145 @include apply-svg-color(#fff);
149 @mixin orange-button-inverted {
150 @include button-focus(pvar(--mainColorLightest));
152 border: 2px solid pvar(--mainColor);
153 font-weight: $font-semibold;
158 color: pvar(--mainColor);
159 background-color: pvar(--mainBackgroundColor);
163 color: pvar(--mainColor);
164 background-color: pvar(--mainColorLightest);
170 color: pvar(--mainColor);
171 background-color: pvar(--inputBorderColor);
175 @include apply-svg-color(pvar(--mainColor));
179 @mixin tertiary-button {
180 @include button-focus($grey-button-outline-color);
182 color: pvar(--greyForegroundColor);
183 background-color: transparent;
191 @include apply-svg-color(transparent);
196 @include button-focus($grey-button-outline-color);
198 background-color: pvar(--greyBackgroundColor);
199 color: pvar(--greyForegroundColor);
206 color: pvar(--greyForegroundColor);
207 background-color: pvar(--greySecondaryBackgroundColor);
216 @include apply-svg-color(pvar(--greyForegroundColor));
220 @mixin danger-button {
221 $color: lighten($color: #c54130, $amount: 10);
224 @include button-focus(scale-color($color, $alpha: -95%));
226 background-color: $color;
234 background-color: lighten($color: $color, $amount: 10);
243 @include apply-svg-color($text);
247 @mixin peertube-button {
251 font-weight: $font-semibold;
252 height: $button-height;
253 line-height: $button-height;
255 // Because of primeng that redefines border-radius of all input[type="..."]
256 border-radius: 3px !important;
261 font-size: $button-font-size;
264 @include margin-right(4px);
268 @mixin peertube-button-big {
274 font-weight: $font-semibold;
276 // Because of primeng that redefines border-radius of all input[type="..."]
277 border-radius: 3px !important;
280 @mixin peertube-button-link {
281 @include disable-default-a-behaviour;
282 @include peertube-button;
284 display: inline-block;
287 @mixin peertube-button-big-link {
288 @include disable-default-a-behaviour;
289 @include peertube-button-big;
291 display: inline-block;
294 @mixin peertube-button-outline {
295 @include disable-default-a-behaviour;
296 @include peertube-button;
298 display: inline-block;
302 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
304 @include margin-right($margin-right);
312 @mixin peertube-file {
315 display: inline-block;
326 filter: alpha(opacity=0);
335 @mixin peertube-button-file ($width) {
336 @include peertube-file;
337 @include peertube-button;
342 @mixin icon ($size) {
343 display: inline-block;
344 background-repeat: no-repeat;
345 background-size: contain;
348 vertical-align: middle;
352 @mixin responsive-width ($width) {
355 @media screen and (max-width: $width) {
360 @mixin peertube-select-container ($width) {
365 color: pvar(--inputForegroundColor);
366 background: pvar(--inputBackgroundColor);
371 background-color: #E5E5E5;
379 background-color: #f9f9f9;
382 @media screen and (max-width: $width) {
388 right: calc(0% + 15px);
393 pointer-events: none;
394 border: 5px solid rgba(0, 0, 0, 0);
395 border-top-color: #000;
401 padding: 0 35px 0 12px;
403 border: 1px solid pvar(--inputBorderColor);
404 background: transparent none;
406 height: $button-height;
407 text-overflow: ellipsis;
408 color: pvar(--mainForegroundColor);
409 font-size: $form-input-font-size;
410 line-height: $form-input-line-height;
418 text-shadow: 0 0 0 #000;
425 font-weight: $font-semibold;
430 &.peertube-select-button {
431 @include grey-button;
434 font-weight: $font-semibold;
435 color: pvar(--greyForegroundColor);
441 // Thanks: https://codepen.io/manabox/pen/raQmpL
442 @mixin peertube-radio-container {
444 font-size: $form-input-font-size;
447 [type=radio]:checked,
448 [type=radio]:not(:checked) {
453 [type=radio]:checked + label,
454 [type=radio]:not(:checked) + label {
459 display: inline-block;
460 font-weight: $font-regular;
463 [type=radio]:checked + label::before,
464 [type=radio]:not(:checked) + label::before {
471 border: 1px solid pvar(--inputBorderColor);
476 [type=radio]:checked + label::after,
477 [type=radio]:not(:checked) + label::after {
481 background: pvar(--mainColor);
486 transition: all 0.2s ease;
488 [type=radio]:not(:checked) + label::after {
492 [type=radio]:checked + label::after {
497 .form-group-description {
505 @mixin peertube-checkbox ($border-width) {
510 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
518 border: $border-width solid pvar(--inputBorderColor);
520 vertical-align: middle;
526 top: calc(2px - #{$border-width});
531 transform: rotate(45deg) scale(0);
532 border-right: 2px solid $bg-color;
533 border-bottom: 2px solid $bg-color;
538 border-color: transparent;
539 background: pvar(--mainColor);
540 animation: jelly 0.6s ease;
544 transform: rotate(45deg) scale(1);
549 @include margin-left(5px);
551 font-weight: $font-regular;
557 &[disabled] + span + span {
563 @mixin actor-avatar-size ($size) {
564 display: inline-block;
571 @mixin actor-counters ($separator-margin: 10px) {
572 color: pvar(--greyForegroundColor);
576 > *:not(:last-child)::after {
578 margin: 0 $separator-margin;
579 color: pvar(--mainColor);
583 @mixin in-content-small-title {
584 text-transform: uppercase;
585 color: pvar(--mainColor);
586 font-weight: $font-bold;
590 @mixin settings-big-title {
591 text-transform: uppercase;
592 color: pvar(--mainColor);
593 font-weight: $font-bold;
598 @mixin create-button {
599 @include peertube-button-link;
600 @include orange-button;
601 @include button-with-icon(20px, 5px, -1px);
604 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
606 min-height: $min-height;
607 padding-bottom: 20px;
611 border-bottom: 1px solid pvar(--inputBorderColor);
614 @media screen and (max-width: $small-view) {
615 @if $column-responsive {
616 flex-direction: column;
621 padding-bottom: 10px;
627 @mixin dropdown-with-icon-item {
631 @include margin-right(10px);
640 @mixin progressbar($small: false) {
641 background-color: $grey-background-color;
646 border-radius: 0.25rem;
651 color: $grey-foreground-color;
666 color: pvar(--mainBackgroundColor);
667 background-color: pvar(--mainColor);
669 flex-direction: column;
670 justify-content: center;
673 transition: width 0.6s ease;
676 background-color: lighten($color: #c54130, $amount: 10);
687 font-weight: $font-semibold;
693 color: pvar(--mainColor);
697 @include padding-left(0.5rem);
700 @include padding-right(0.5rem);
702 display: inline-block;
720 box-sizing: border-box;
721 flex: 0 0 percentage(math.div(1, 3));
726 @include disable-default-a-behaviour;
728 text-decoration: none;
743 background: pvar(--submenuBackgroundColor);
745 box-sizing: border-box;
754 color: pvar(--mainForegroundColor);
761 color: pvar(--inputPlaceholderColor);
766 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
768 border-top: .05rem solid $color;
778 background: $background;
780 content: attr(data-content);
781 display: inline-block;
784 transform: translateY(-.65rem);
791 --chip-padding: .2rem .4rem;
792 $avatar-height: 1.2rem;
795 border-radius: var(--chip-radius);
796 display: inline-flex;
798 color: pvar(--mainForegroundColor);
799 height: $avatar-height;
804 padding: var(--chip-padding);
805 text-decoration: none;
806 text-overflow: ellipsis;
807 vertical-align: middle;
811 --chip-radius: .2rem;
812 --chip-padding: .2rem .3rem;
816 @include margin-left(-.4rem);
817 @include margin-right(.2rem);
821 $avatar-height: 2rem;
823 height: $avatar-height;
826 display: inline-block;
833 flex-direction: column;
834 height: $avatar-height;
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 ($block-start, $inline-end, $block-end, $inline-start) {
928 @include margin-left($inline-start);
929 @include margin-right($inline-end);
931 margin-top: $block-start;
932 margin-bottom: $block-end;
935 @mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
936 @include padding-left($inline-start);
937 @include padding-right($inline-end);
939 padding-top: $block-start;
940 padding-bottom: $block-end;
943 @mixin margin-left ($value) {
944 @supports (margin-inline-start: $value) {
945 margin-inline-start: $value;
948 @supports not (margin-inline-start: $value) {
953 @mixin margin-right ($value) {
954 @supports (margin-inline-end: $value) {
955 margin-inline-end: $value;
958 @supports not (margin-inline-end: $value) {
959 margin-right: $value;
963 @mixin padding-left ($value) {
964 @supports (padding-inline-start: $value) {
965 padding-inline-start: $value;
968 @supports not (padding-inline-start: $value) {
969 padding-left: $value;
973 @mixin padding-right ($value) {
974 @supports (padding-inline-end: $value) {
975 padding-inline-end: $value;
978 @supports not (padding-inline-end: $value) {
979 padding-right: $value;