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;
92 color: pvar(--inputForegroundColor);
93 background-color: pvar(--inputBackgroundColor);
94 border: 1px solid #C6C6C6;
99 color: pvar(--inputPlaceholderColor);
106 @media screen and (max-width: calc(#{$width} + 40px)) {
111 @mixin peertube-input-group($width) {
113 min-height: $button-height;
124 @mixin peertube-textarea ($width, $height) {
125 @include peertube-input-text($width);
127 color: pvar(--textareaForegroundColor) !important;
128 background-color: pvar(--textareaBackgroundColor) !important;
134 @mixin orange-button {
135 @include button-focus(pvar(--mainColorLightest));
141 background-color: pvar(--mainColor);
146 background-color: pvar(--mainHoverColor);
153 background-color: #C6C6C6;
157 @include apply-svg-color(#fff);
161 @mixin orange-button-inverted {
162 @include button-focus(pvar(--mainColorLightest));
164 border: 2px solid pvar(--mainColor);
165 font-weight: $font-semibold;
170 color: pvar(--mainColor);
171 background-color: pvar(--mainBackgroundColor);
175 color: pvar(--mainColor);
176 background-color: pvar(--mainColorLightest);
182 color: pvar(--mainColor);
183 background-color: #C6C6C6;
187 @include apply-svg-color(pvar(--mainColor));
191 @mixin tertiary-button {
192 @include button-focus($grey-button-outline-color);
194 color: pvar(--greyForegroundColor);
195 background-color: transparent;
203 @include apply-svg-color(transparent);
208 @include button-focus($grey-button-outline-color);
210 background-color: pvar(--greyBackgroundColor);
211 color: pvar(--greyForegroundColor);
218 color: pvar(--greyForegroundColor);
219 background-color: pvar(--greySecondaryBackgroundColor);
228 @include apply-svg-color(pvar(--greyForegroundColor));
232 @mixin danger-button {
233 $color: lighten($color: #c54130, $amount: 10);
236 @include button-focus(scale-color($color, $alpha: -95%));
238 background-color: $color;
246 background-color: lighten($color: $color, $amount: 10);
255 @include apply-svg-color($text);
259 @mixin peertube-button {
263 font-weight: $font-semibold;
265 height: $button-height;
266 line-height: $button-height;
268 // Because of primeng that redefines border-radius of all input[type="..."]
269 border-radius: 3px !important;
275 @include margin-right(4px);
279 @mixin peertube-button-link {
280 @include disable-default-a-behaviour;
281 @include peertube-button;
283 display: inline-block;
286 @mixin peertube-button-outline {
287 @include disable-default-a-behaviour;
288 @include peertube-button;
290 display: inline-block;
294 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
295 display: inline-flex;
297 line-height: normal !important;
300 @include margin-right($margin-right);
308 @mixin peertube-file {
311 display: inline-block;
322 filter: alpha(opacity=0);
331 @mixin peertube-button-file ($width) {
332 @include peertube-file;
333 @include peertube-button;
338 @mixin icon ($size) {
339 display: inline-block;
340 background-repeat: no-repeat;
341 background-size: contain;
344 vertical-align: middle;
348 @mixin responsive-width ($width) {
351 @media screen and (max-width: $width) {
356 @mixin peertube-select-container ($width) {
361 color: pvar(--inputForegroundColor);
362 background: pvar(--inputBackgroundColor);
368 background-color: #E5E5E5;
375 background-color: #f9f9f9;
378 @media screen and (max-width: $width) {
384 right: calc(0% + 15px);
389 pointer-events: none;
390 border: 5px solid rgba(0, 0, 0, 0);
391 border-top-color: #000;
397 padding: 0 35px 0 12px;
399 border: 1px solid #C6C6C6;
400 background: transparent none;
403 height: $button-height;
404 text-overflow: ellipsis;
405 color: pvar(--mainForegroundColor);
413 text-shadow: 0 0 0 #000;
420 font-weight: $font-semibold;
425 &.peertube-select-button {
426 @include grey-button;
429 font-weight: $font-semibold;
430 color: pvar(--greyForegroundColor);
436 // Thanks: https://codepen.io/manabox/pen/raQmpL
437 @mixin peertube-radio-container {
438 [type=radio]:checked,
439 [type=radio]:not(:checked) {
444 [type=radio]:checked + label,
445 [type=radio]:not(:checked) + label {
450 display: inline-block;
452 font-weight: $font-regular;
455 [type=radio]:checked + label::before,
456 [type=radio]:not(:checked) + label::before {
463 border: 1px solid #C6C6C6;
468 [type=radio]:checked + label::after,
469 [type=radio]:not(:checked) + label::after {
473 background: pvar(--mainColor);
478 transition: all 0.2s ease;
480 [type=radio]:not(:checked) + label::after {
484 [type=radio]:checked + label::after {
489 .form-group-description {
497 @mixin peertube-checkbox ($border-width) {
502 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
510 border: $border-width solid #C6C6C6;
512 vertical-align: middle;
518 top: calc(2px - #{$border-width});
523 transform: rotate(45deg) scale(0);
524 border-right: 2px solid $bg-color;
525 border-bottom: 2px solid $bg-color;
530 border-color: transparent;
531 background: pvar(--mainColor);
532 animation: jelly 0.6s ease;
536 transform: rotate(45deg) scale(1);
541 @include margin-left(5px);
544 font-weight: $font-regular;
550 &[disabled] + span + span {
556 @mixin peertube-badge {
558 padding: 1/4em 1/2em;
559 text-transform: uppercase;
560 font-weight: $font-bold;
562 letter-spacing: 1/3px;
566 background-color: #ffcdd2;
571 text-decoration: line-through;
575 background-color: #feedaf;
580 background-color: #ffd8b2;
585 background-color: #c8e6c9;
590 background-color: #b3e5fc;
595 background-color: #eccfff;
600 @mixin actor-avatar-size ($size) {
601 display: inline-block;
608 @mixin actor-counters ($separator-margin: 10px) {
609 color: pvar(--greyForegroundColor);
614 > *:not(:last-child)::after {
616 margin: 0 $separator-margin;
617 color: pvar(--mainColor);
621 @mixin chevron ($size, $border-width) {
623 border-width: $border-width $border-width 0 0;
625 display: inline-block;
626 transform: rotate(-45deg);
631 @mixin chevron-right ($size, $border-width) {
632 @include chevron($size, $border-width);
635 transform: rotate(45deg);
638 @mixin chevron-left ($size, $border-width) {
639 @include chevron($size, $border-width);
642 transform: rotate(-135deg);
645 @mixin in-content-small-title {
646 text-transform: uppercase;
647 color: pvar(--mainColor);
648 font-weight: $font-bold;
652 @mixin settings-big-title {
653 text-transform: uppercase;
654 color: pvar(--mainColor);
655 font-weight: $font-bold;
660 @mixin create-button {
661 @include peertube-button-link;
662 @include orange-button;
663 @include button-with-icon(20px, 5px, -1px);
666 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
668 min-height: $min-height;
669 padding-bottom: 20px;
673 border-bottom: 1px solid #C6C6C6;
676 @media screen and (max-width: $small-view) {
677 @if $column-responsive {
678 flex-direction: column;
683 padding-bottom: 10px;
689 @mixin dropdown-with-icon-item {
693 @include margin-right(10px);
702 @mixin progressbar($small: false) {
703 background-color: $grey-background-color;
708 border-radius: 0.25rem;
713 color: $grey-foreground-color;
728 color: pvar(--mainBackgroundColor);
729 background-color: pvar(--mainColor);
731 flex-direction: column;
732 justify-content: center;
735 transition: width 0.6s ease;
738 background-color: pvar(--secondaryColor);
742 background-color: lighten($color: #c54130, $amount: 10);
750 padding: 0.75rem 1rem;
753 background-color: pvar(--submenuBackgroundColor);
754 border-radius: 0.25rem;
760 color: pvar(--mainColor);
764 @include padding-left(0.5rem);
767 @include padding-right(0.5rem);
769 display: inline-block;
787 box-sizing: border-box;
788 flex: 0 0 percentage(math.div(1, 3));
793 @include disable-default-a-behaviour;
795 text-decoration: none;
810 background: pvar(--submenuBackgroundColor);
812 box-sizing: border-box;
821 color: pvar(--mainForegroundColor);
828 color: pvar(--inputPlaceholderColor);
833 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
835 border-top: .05rem solid $color;
845 background: $background;
847 content: attr(data-content);
848 display: inline-block;
851 transform: translateY(-.65rem);
858 --chip-padding: .2rem .4rem;
859 $avatar-height: 1.2rem;
862 border-radius: var(--chip-radius);
863 display: inline-flex;
865 color: pvar(--mainForegroundColor);
866 height: $avatar-height;
871 padding: var(--chip-padding);
872 text-decoration: none;
873 text-overflow: ellipsis;
874 vertical-align: middle;
878 --chip-radius: .2rem;
879 --chip-padding: .2rem .3rem;
883 @include margin-left(-.4rem);
884 @include margin-right(.2rem);
888 $avatar-height: 2rem;
890 height: $avatar-height;
893 display: inline-block;
900 flex-direction: column;
901 height: $avatar-height;
902 justify-content: center;
907 // applies ratio (default to 16:9) to a child element (using $selector) only using
908 // an immediate's parent size. This allows to set a ratio without explicit
909 // dimensions, as width/height cannot be computed from each other.
910 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
911 $padding-percent: percentage($inverted-ratio);
916 padding-top: $padding-percent;
931 border-bottom: 2px solid $grey-background-color;
932 padding-bottom: 15px;
933 margin-bottom: $sub-menu-margin-bottom;
935 > span > my-global-icon,
937 @include margin-right(10px);
944 @include margin-left(7px);
950 @mixin play-icon ($width, $height) {
957 transform: translate(-50%, -50%) scale(0.5);
959 border-top: #{math.div($height, 2)} solid transparent;
960 border-bottom: #{math.div($height, 2)} solid transparent;
962 border-left: $width solid rgba(255, 255, 255, 0.95);
965 @mixin on-small-main-col () {
966 :host-context(.main-col:not(.expanded)) {
967 @media screen and (max-width: $small-view + $menu-width) {
972 :host-context(.main-col.expanded) {
973 @media screen and (max-width: $small-view) {
979 @mixin on-mobile-main-col () {
980 :host-context(.main-col:not(.expanded)) {
981 @media screen and (max-width: $mobile-view + $menu-width) {
986 :host-context(.main-col.expanded) {
987 @media screen and (max-width: $mobile-view) {
993 @mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
994 @include margin-left($inline-start);
995 @include margin-right($inline-end);
997 margin-top: $block-start;
998 margin-bottom: $block-end;
1001 @mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
1002 @include padding-left($inline-start);
1003 @include padding-right($inline-end);
1005 padding-top: $block-start;
1006 padding-bottom: $block-end;
1009 @mixin margin-left ($value) {
1010 @supports (margin-inline-start: $value) {
1011 margin-inline-start: $value;
1014 @supports not (margin-inline-start: $value) {
1015 margin-left: $value;
1019 @mixin margin-right ($value) {
1020 @supports (margin-inline-end: $value) {
1021 margin-inline-end: $value;
1024 @supports not (margin-inline-end: $value) {
1025 margin-right: $value;
1029 @mixin padding-left ($value) {
1030 @supports (padding-inline-start: $value) {
1031 padding-inline-start: $value;
1034 @supports not (padding-inline-start: $value) {
1035 padding-left: $value;
1039 @mixin padding-right ($value) {
1040 @supports (padding-inline-end: $value) {
1041 padding-inline-end: $value;
1044 @supports not (padding-inline-end: $value) {
1045 padding-right: $value;