2 @use '_variables' as *;
4 @import '_bootstrap-mixins';
6 @mixin disable-default-a-behaviour {
10 text-decoration: none !important;
13 &:focus:not(.focus-visible) {
14 outline: none !important;
18 @mixin disable-outline {
19 &:focus:not(.focus-visible) {
20 outline: none !important;
27 text-overflow: ellipsis;
31 color: pvar(--greyForegroundColor) !important;
34 @mixin fade-text ($fade-after, $background-color) {
46 background: linear-gradient(transparent $fade-after, $background-color);
50 @mixin peertube-word-wrap ($with-hyphen: true) {
51 word-break: break-word;
52 word-wrap: break-word;
53 overflow-wrap: break-word;
60 @mixin apply-svg-color ($color) {
68 @mixin fill-svg-color ($color) {
76 @mixin button-focus($color) {
79 box-shadow: #{$focus-box-shadow-form} $color;
83 @mixin rounded-line-height-1-5 ($font-size) {
84 line-height: $font-size + math.round(math.div($font-size, 2));
87 @mixin peertube-input-text($width, $font-size: $form-input-font-size) {
88 @include rounded-line-height-1-5($font-size);
90 font-size: $font-size;
93 display: inline-block;
96 color: pvar(--inputForegroundColor);
97 background-color: pvar(--inputBackgroundColor);
98 border: 1px solid pvar(--inputBorderColor);
102 color: pvar(--inputPlaceholderColor);
109 @media screen and (max-width: calc(#{$width} + 40px)) {
114 @mixin peertube-textarea ($width, $height) {
115 @include peertube-input-text($width);
117 color: pvar(--textareaForegroundColor) !important;
118 background-color: pvar(--textareaBackgroundColor) !important;
123 @mixin orange-button {
124 @include button-focus(pvar(--mainColorLightest));
130 background-color: pvar(--mainColor);
135 background-color: pvar(--mainHoverColor);
142 background-color: pvar(--inputBorderColor);
146 @include apply-svg-color(#fff);
150 @mixin orange-button-inverted {
151 @include button-focus(pvar(--mainColorLightest));
154 border: 2px solid pvar(--mainColor);
155 font-weight: $font-semibold;
160 color: pvar(--mainColor);
161 background-color: pvar(--mainBackgroundColor);
165 color: pvar(--mainColor);
166 background-color: pvar(--mainColorLightest);
172 color: pvar(--mainColor);
173 background-color: pvar(--inputBorderColor);
177 @include apply-svg-color(pvar(--mainColor));
181 @mixin tertiary-button {
182 @include button-focus($grey-button-outline-color);
184 color: pvar(--greyForegroundColor);
185 background-color: transparent;
193 @include apply-svg-color(transparent);
198 @include button-focus($grey-button-outline-color);
200 background-color: pvar(--greyBackgroundColor);
201 color: pvar(--greyForegroundColor);
208 color: pvar(--greyForegroundColor);
209 background-color: pvar(--greySecondaryBackgroundColor);
218 @include apply-svg-color(pvar(--greyForegroundColor));
222 @mixin danger-button {
223 $color: lighten($color: #c54130, $amount: 10);
226 @include button-focus(scale-color($color, $alpha: -95%));
228 background-color: $color;
236 background-color: lighten($color: $color, $amount: 10);
245 @include apply-svg-color($text);
249 @mixin peertube-button {
250 @include rounded-line-height-1-5($button-font-size);
255 font-weight: $font-semibold;
257 // Because of primeng that redefines border-radius of all input[type="..."]
258 border-radius: 3px !important;
263 font-size: $button-font-size;
266 @include margin-right(4px);
267 @include margin-left(4px);
271 @mixin peertube-button-big {
277 font-weight: $font-semibold;
279 // Because of primeng that redefines border-radius of all input[type="..."]
280 border-radius: 3px !important;
283 @mixin peertube-button-link {
284 @include disable-default-a-behaviour;
285 @include peertube-button;
287 display: inline-block;
290 @mixin peertube-button-big-link {
291 @include disable-default-a-behaviour;
292 @include peertube-button-big;
294 display: inline-block;
297 @mixin peertube-button-outline {
298 @include disable-default-a-behaviour;
299 @include peertube-button;
301 display: inline-block;
305 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
307 @include margin-right($margin-right);
315 @mixin peertube-file {
318 display: inline-block;
328 filter: alpha(opacity=0);
331 background: pvar(--mainBackgroundColor);
337 @mixin peertube-button-file ($width) {
338 @include peertube-file;
339 @include peertube-button;
344 @mixin icon ($size) {
345 display: inline-block;
346 background-repeat: no-repeat;
347 background-size: contain;
350 vertical-align: middle;
354 @mixin responsive-width ($width) {
357 @media screen and (max-width: $width) {
362 @mixin peertube-select-container ($width) {
367 color: pvar(--inputForegroundColor);
368 background: pvar(--inputBackgroundColor);
373 background-color: #E5E5E5;
381 background-color: #f9f9f9;
384 @media screen and (max-width: $width) {
390 right: calc(0% + 15px);
395 pointer-events: none;
396 border: 5px solid rgba(0, 0, 0, 0);
397 border-top-color: pvar(--mainForegroundColor);
403 @include rounded-line-height-1-5($form-input-font-size);
405 font-size: $form-input-font-size;
407 padding: 3px 35px 3px 12px;
409 border: 1px solid pvar(--inputBorderColor);
410 background: transparent none;
412 text-overflow: ellipsis;
413 color: pvar(--mainForegroundColor);
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);
441 // No border, add +1 to vertical padding
442 padding: 4px 35px 4px 12px;
447 // Thanks: https://codepen.io/manabox/pen/raQmpL
448 @mixin peertube-radio-container {
450 font-size: $form-input-font-size;
453 [type=radio]:checked,
454 [type=radio]:not(:checked) {
462 [type=radio]:checked + label,
463 [type=radio]:not(:checked) + label {
468 display: inline-block;
469 font-weight: $font-regular;
472 [type=radio]:checked + label::before,
473 [type=radio]:not(:checked) + label::before {
480 border: 1px solid pvar(--inputBorderColor);
485 [type=radio]:checked + label::after,
486 [type=radio]:not(:checked) + label::after {
490 background: pvar(--mainColor);
495 transition: all 0.2s ease;
497 [type=radio]:not(:checked) + label::after {
501 [type=radio]:checked + label::after {
506 .form-group-description {
514 @mixin peertube-checkbox ($border-width) {
519 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
527 border: $border-width solid pvar(--inputBorderColor);
529 vertical-align: middle;
535 top: calc(2px - #{$border-width});
540 transform: rotate(45deg) scale(0);
541 border-right: 2px solid pvar(--mainBackgroundColor);
542 border-bottom: 2px solid pvar(--mainBackgroundColor);
547 border-color: transparent;
548 background: pvar(--mainColor);
549 animation: jelly 0.6s ease;
553 transform: rotate(45deg) scale(1);
558 @include margin-left(5px);
560 font-weight: $font-regular;
566 &[disabled] + span + span {
572 @mixin actor-avatar-size ($size) {
573 display: inline-block;
580 @mixin actor-counters ($separator-margin: 10px) {
581 color: pvar(--greyForegroundColor);
585 > *:not(:last-child)::after {
587 margin: 0 $separator-margin;
588 color: pvar(--mainColor);
592 @mixin in-content-small-title {
593 text-transform: uppercase;
594 color: pvar(--mainColor);
595 font-weight: $font-bold;
599 @mixin settings-big-title {
600 text-transform: uppercase;
601 color: pvar(--mainColor);
602 font-weight: $font-bold;
607 @mixin create-button {
608 @include peertube-button-link;
609 @include orange-button;
610 @include button-with-icon(20px, 5px, -1px);
613 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
615 min-height: $min-height;
616 padding-bottom: 20px;
620 border-bottom: 1px solid pvar(--inputBorderColor);
623 @media screen and (max-width: $small-view) {
624 @if $column-responsive {
625 flex-direction: column;
630 padding-bottom: 10px;
636 @mixin dropdown-with-icon-item {
640 @include margin-right(10px);
649 @mixin progressbar($small: false) {
650 background-color: pvar(--greyBackgroundColor);
655 border-radius: 0.25rem;
660 color: pvar(--greyForegroundColor);
675 color: pvar(--mainBackgroundColor);
676 background-color: pvar(--mainColor);
678 flex-direction: column;
679 justify-content: center;
682 transition: width 0.6s ease;
685 background-color: lighten($color: #c54130, $amount: 10);
696 font-weight: $font-semibold;
702 color: pvar(--mainColor);
706 @include padding-left(0.5rem);
709 @include padding-right(0.5rem);
711 display: inline-block;
729 box-sizing: border-box;
730 flex: 0 0 percentage(math.div(1, 3));
735 @include disable-default-a-behaviour;
737 text-decoration: none;
752 background: pvar(--submenuBackgroundColor);
754 box-sizing: border-box;
763 color: pvar(--mainForegroundColor);
770 color: pvar(--inputPlaceholderColor);
775 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
777 border-top: .05rem solid $color;
787 background: $background;
789 content: attr(data-content);
790 display: inline-block;
793 transform: translateY(-.65rem);
799 --avatar-size: 1.2rem;
801 display: inline-flex;
802 color: pvar(--mainForegroundColor);
803 height: var(--avatar-size);
806 text-decoration: none;
807 text-overflow: ellipsis;
808 vertical-align: middle;
812 @include margin-right(.2rem);
815 width: var(--avatar-size);
816 height: var(--avatar-size);
826 display: inline-block;
831 flex-direction: column;
832 justify-content: center;
837 // applies ratio (default to 16:9) to a child element (using $selector) only using
838 // an immediate's parent size. This allows to set a ratio without explicit
839 // dimensions, as width/height cannot be computed from each other.
840 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
841 $padding-percent: percentage($inverted-ratio);
846 padding-top: $padding-percent;
861 border-bottom: 2px solid $grey-background-color;
862 padding-bottom: 15px;
863 margin-bottom: $sub-menu-margin-bottom;
865 > span > my-global-icon,
867 @include margin-right(10px);
874 @include margin-left(7px);
881 @mixin play-icon ($width, $height) {
888 transform: translate(-50%, -50%) scale(0.5);
890 border-top: #{math.div($height, 2)} solid transparent;
891 border-bottom: #{math.div($height, 2)} solid transparent;
893 border-left: $width solid rgba(255, 255, 255, 0.95);
896 @mixin on-small-main-col () {
897 :host-context(.main-col:not(.expanded)) {
898 @media screen and (max-width: $small-view + $menu-width) {
903 :host-context(.main-col.expanded) {
904 @media screen and (max-width: $small-view) {
910 @mixin on-mobile-main-col () {
911 :host-context(.main-col:not(.expanded)) {
912 @media screen and (max-width: $mobile-view + $menu-width) {
917 :host-context(.main-col.expanded) {
918 @media screen and (max-width: $mobile-view) {
924 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
925 @if $arg2 == null and $arg3 == null and $arg4 == null {
926 @include margin-original($arg1, $arg1, $arg1, $arg1);
927 } @else if $arg3 == null and $arg4 == null {
928 @include margin-original($arg1, $arg2, $arg1, $arg2);
929 } @else if $arg4 == null {
930 @include margin-original($arg1, $arg2, $arg3, $arg2);
932 @include margin-original($arg1, $arg2, $arg3, $arg4);
936 @mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
937 @include margin-left($inline-start);
938 @include margin-right($inline-end);
939 @include margin-top($block-start);
940 @include margin-bottom($block-end);
943 @mixin margin-left ($value) {
944 @supports (margin-inline-start: $value) {
945 @include rfs($value, margin-inline-start);
948 @supports not (margin-inline-start: $value) {
949 @include rfs($value, margin-left);
953 @mixin margin-right ($value) {
954 @supports (margin-inline-end: $value) {
955 @include rfs($value, margin-inline-end);
958 @supports not (margin-inline-end: $value) {
959 @include rfs($value, margin-right);
963 @mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
964 @include padding-left($inline-start);
965 @include padding-right($inline-end);
966 @include padding-top($block-start);
967 @include padding-bottom($block-end);
971 @mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
972 @if $arg2 == null and $arg3 == null and $arg4 == null {
973 @include padding-original($arg1, $arg1, $arg1, $arg1);
974 } @else if $arg3 == null and $arg4 == null {
975 @include padding-original($arg1, $arg2, $arg1, $arg2);
976 } @else if $arg4 == null {
977 @include padding-original($arg1, $arg2, $arg3, $arg2);
979 @include padding-original($arg1, $arg2, $arg3, $arg4);
983 @mixin padding-left ($value) {
984 @supports (padding-inline-start: $value) {
985 @include rfs($value, padding-inline-start);
988 @supports not (padding-inline-start: $value) {
989 @include rfs($value, padding-left);
993 @mixin padding-right ($value) {
994 @supports (padding-inline-end: $value) {
995 @include rfs($value, padding-inline-end);
998 @supports not (padding-inline-end: $value) {
999 @include rfs($value, padding-right);