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 $input-border-color;
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: $input-border-color;
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: $input-border-color;
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-outline {
288 @include disable-default-a-behaviour;
289 @include peertube-button;
291 display: inline-block;
295 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
297 @include margin-right($margin-right);
305 @mixin peertube-file {
308 display: inline-block;
319 filter: alpha(opacity=0);
328 @mixin peertube-button-file ($width) {
329 @include peertube-file;
330 @include peertube-button;
335 @mixin icon ($size) {
336 display: inline-block;
337 background-repeat: no-repeat;
338 background-size: contain;
341 vertical-align: middle;
345 @mixin responsive-width ($width) {
348 @media screen and (max-width: $width) {
353 @mixin peertube-select-container ($width) {
358 color: pvar(--inputForegroundColor);
359 background: pvar(--inputBackgroundColor);
364 background-color: #E5E5E5;
372 background-color: #f9f9f9;
375 @media screen and (max-width: $width) {
381 right: calc(0% + 15px);
386 pointer-events: none;
387 border: 5px solid rgba(0, 0, 0, 0);
388 border-top-color: #000;
394 padding: 0 35px 0 12px;
396 border: 1px solid $input-border-color;
397 background: transparent none;
399 height: $button-height;
400 text-overflow: ellipsis;
401 color: pvar(--mainForegroundColor);
402 font-size: $form-input-font-size;
403 line-height: $form-input-line-height;
411 text-shadow: 0 0 0 #000;
418 font-weight: $font-semibold;
423 &.peertube-select-button {
424 @include grey-button;
427 font-weight: $font-semibold;
428 color: pvar(--greyForegroundColor);
434 // Thanks: https://codepen.io/manabox/pen/raQmpL
435 @mixin peertube-radio-container {
437 font-size: $form-input-font-size;
440 [type=radio]:checked,
441 [type=radio]:not(:checked) {
446 [type=radio]:checked + label,
447 [type=radio]:not(:checked) + label {
452 display: inline-block;
453 font-weight: $font-regular;
456 [type=radio]:checked + label::before,
457 [type=radio]:not(:checked) + label::before {
464 border: 1px solid $input-border-color;
469 [type=radio]:checked + label::after,
470 [type=radio]:not(:checked) + label::after {
474 background: pvar(--mainColor);
479 transition: all 0.2s ease;
481 [type=radio]:not(:checked) + label::after {
485 [type=radio]:checked + label::after {
490 .form-group-description {
498 @mixin peertube-checkbox ($border-width) {
503 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
511 border: $border-width solid $input-border-color;
513 vertical-align: middle;
519 top: calc(2px - #{$border-width});
524 transform: rotate(45deg) scale(0);
525 border-right: 2px solid $bg-color;
526 border-bottom: 2px solid $bg-color;
531 border-color: transparent;
532 background: pvar(--mainColor);
533 animation: jelly 0.6s ease;
537 transform: rotate(45deg) scale(1);
542 @include margin-left(5px);
544 font-weight: $font-regular;
550 &[disabled] + span + span {
556 @mixin actor-avatar-size ($size) {
557 display: inline-block;
564 @mixin actor-counters ($separator-margin: 10px) {
565 color: pvar(--greyForegroundColor);
569 > *:not(:last-child)::after {
571 margin: 0 $separator-margin;
572 color: pvar(--mainColor);
576 @mixin in-content-small-title {
577 text-transform: uppercase;
578 color: pvar(--mainColor);
579 font-weight: $font-bold;
583 @mixin settings-big-title {
584 text-transform: uppercase;
585 color: pvar(--mainColor);
586 font-weight: $font-bold;
591 @mixin create-button {
592 @include peertube-button-link;
593 @include orange-button;
594 @include button-with-icon(20px, 5px, -1px);
597 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
599 min-height: $min-height;
600 padding-bottom: 20px;
604 border-bottom: 1px solid $input-border-color;
607 @media screen and (max-width: $small-view) {
608 @if $column-responsive {
609 flex-direction: column;
614 padding-bottom: 10px;
620 @mixin dropdown-with-icon-item {
624 @include margin-right(10px);
633 @mixin progressbar($small: false) {
634 background-color: $grey-background-color;
639 border-radius: 0.25rem;
644 color: $grey-foreground-color;
659 color: pvar(--mainBackgroundColor);
660 background-color: pvar(--mainColor);
662 flex-direction: column;
663 justify-content: center;
666 transition: width 0.6s ease;
669 background-color: lighten($color: #c54130, $amount: 10);
680 font-weight: $font-semibold;
686 color: pvar(--mainColor);
690 @include padding-left(0.5rem);
693 @include padding-right(0.5rem);
695 display: inline-block;
713 box-sizing: border-box;
714 flex: 0 0 percentage(math.div(1, 3));
719 @include disable-default-a-behaviour;
721 text-decoration: none;
736 background: pvar(--submenuBackgroundColor);
738 box-sizing: border-box;
747 color: pvar(--mainForegroundColor);
754 color: pvar(--inputPlaceholderColor);
759 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
761 border-top: .05rem solid $color;
771 background: $background;
773 content: attr(data-content);
774 display: inline-block;
777 transform: translateY(-.65rem);
784 --chip-padding: .2rem .4rem;
785 $avatar-height: 1.2rem;
788 border-radius: var(--chip-radius);
789 display: inline-flex;
791 color: pvar(--mainForegroundColor);
792 height: $avatar-height;
797 padding: var(--chip-padding);
798 text-decoration: none;
799 text-overflow: ellipsis;
800 vertical-align: middle;
804 --chip-radius: .2rem;
805 --chip-padding: .2rem .3rem;
809 @include margin-left(-.4rem);
810 @include margin-right(.2rem);
814 $avatar-height: 2rem;
816 height: $avatar-height;
819 display: inline-block;
826 flex-direction: column;
827 height: $avatar-height;
828 justify-content: center;
833 // applies ratio (default to 16:9) to a child element (using $selector) only using
834 // an immediate's parent size. This allows to set a ratio without explicit
835 // dimensions, as width/height cannot be computed from each other.
836 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
837 $padding-percent: percentage($inverted-ratio);
842 padding-top: $padding-percent;
857 border-bottom: 2px solid $grey-background-color;
858 padding-bottom: 15px;
859 margin-bottom: $sub-menu-margin-bottom;
861 > span > my-global-icon,
863 @include margin-right(10px);
870 @include margin-left(7px);
877 @mixin play-icon ($width, $height) {
884 transform: translate(-50%, -50%) scale(0.5);
886 border-top: #{math.div($height, 2)} solid transparent;
887 border-bottom: #{math.div($height, 2)} solid transparent;
889 border-left: $width solid rgba(255, 255, 255, 0.95);
892 @mixin on-small-main-col () {
893 :host-context(.main-col:not(.expanded)) {
894 @media screen and (max-width: $small-view + $menu-width) {
899 :host-context(.main-col.expanded) {
900 @media screen and (max-width: $small-view) {
906 @mixin on-mobile-main-col () {
907 :host-context(.main-col:not(.expanded)) {
908 @media screen and (max-width: $mobile-view + $menu-width) {
913 :host-context(.main-col.expanded) {
914 @media screen and (max-width: $mobile-view) {
920 @mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
921 @include margin-left($inline-start);
922 @include margin-right($inline-end);
924 margin-top: $block-start;
925 margin-bottom: $block-end;
928 @mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
929 @include padding-left($inline-start);
930 @include padding-right($inline-end);
932 padding-top: $block-start;
933 padding-bottom: $block-end;
936 @mixin margin-left ($value) {
937 @supports (margin-inline-start: $value) {
938 margin-inline-start: $value;
941 @supports not (margin-inline-start: $value) {
946 @mixin margin-right ($value) {
947 @supports (margin-inline-end: $value) {
948 margin-inline-end: $value;
951 @supports not (margin-inline-end: $value) {
952 margin-right: $value;
956 @mixin padding-left ($value) {
957 @supports (padding-inline-start: $value) {
958 padding-inline-start: $value;
961 @supports not (padding-inline-start: $value) {
962 padding-left: $value;
966 @mixin padding-right ($value) {
967 @supports (padding-inline-end: $value) {
968 padding-inline-end: $value;
971 @supports not (padding-inline-end: $value) {
972 padding-right: $value;