3 @mixin disable-default-a-behaviour {
7 text-decoration: none !important;
8 outline: none !important;
12 @mixin disable-outline {
13 &:focus:not(.focus-visible) {
21 text-overflow: ellipsis;
24 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
26 /* Fallback for non-webkit */
27 display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
28 -webkit-line-clamp: $number-of-lines;
29 /* Fallback for non-webkit */
30 font-size: $font-size;
31 line-height: $font-size;
33 text-overflow: ellipsis;
34 max-height: $font-size * $number-of-lines;
37 @mixin fade-text ($fade-after, $background-color) {
49 background: linear-gradient(transparent $fade-after, $background-color);
53 @mixin peertube-word-wrap ($with-hyphen: true) {
54 word-break: break-word;
55 word-wrap: break-word;
56 overflow-wrap: break-word;
63 @mixin apply-svg-color ($color) {
71 @mixin fill-svg-color ($color) {
79 @mixin button-focus($color) {
82 box-shadow: #{$focus-box-shadow-form} $color;
86 @mixin peertube-input-text($width) {
87 display: inline-block;
88 height: $button-height;
90 color: pvar(--inputForegroundColor);
91 background-color: pvar(--inputBackgroundColor);
92 border: 1px solid #C6C6C6;
99 color: pvar(--inputPlaceholderColor);
106 @media screen and (max-width: $width) {
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);
128 background-color: pvar(--textareaBackgroundColor);
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: $grey-background-color;
211 color: pvar(--greyForegroundColor);
218 color: pvar(--greyForegroundColor);
219 background-color: $grey-background-hover-color;
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 {
261 font-weight: $font-semibold;
263 height: $button-height;
264 line-height: $button-height;
265 // FIXME: because of primeng that redefines border-radius of all input[type="..."]
266 border-radius: 3px !important;
268 padding: 0 17px 0 13px;
272 @mixin peertube-button-link {
273 @include disable-default-a-behaviour;
274 @include peertube-button;
276 display: inline-block;
279 @mixin peertube-button-outline {
280 @include disable-default-a-behaviour;
281 @include peertube-button;
283 display: inline-block;
287 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
288 display: inline-flex;
290 line-height: normal !important;
295 margin-right: $margin-right;
300 @mixin peertube-file {
303 display: inline-block;
314 filter: alpha(opacity=0);
323 @mixin peertube-button-file ($width) {
324 @include peertube-file;
325 @include peertube-button;
330 @mixin icon ($size) {
331 display: inline-block;
332 background-repeat: no-repeat;
333 background-size: contain;
336 vertical-align: middle;
340 @mixin responsive-width ($width) {
343 @media screen and (max-width: $width) {
348 @mixin peertube-select-container ($width) {
353 color: pvar(--inputForegroundColor);
354 background: pvar(--inputBackgroundColor);
359 background-color: #E5E5E5;
366 @media screen and (max-width: $width) {
372 right: calc(0% + 15px);
377 pointer-events: none;
378 border: 5px solid rgba(0, 0, 0, 0);
379 border-top-color: #000;
385 padding: 0 35px 0 12px;
387 border: 1px solid #C6C6C6;
388 background: transparent none;
391 height: $button-height;
392 text-overflow: ellipsis;
393 color: pvar(--mainForegroundColor);
401 text-shadow: 0 0 0 #000;
409 &.peertube-select-button {
410 @include grey-button;
414 font-weight: $font-semibold;
415 color: pvar(--greyForegroundColor);
421 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
422 @mixin peertube-radio-container {
427 font-weight: $font-regular;
436 border: 1px solid #000;
437 display: inline-block;
440 vertical-align: middle;
447 &:checked + label::before {
448 background-color: #000;
449 box-shadow: inset 0 0 0 4px #fff;
452 &:focus + label::before {
459 @mixin peertube-checkbox ($border-width) {
464 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
472 border: $border-width solid #C6C6C6;
474 vertical-align: middle;
480 top: calc(2px - #{$border-width});
485 transform: rotate(45deg) scale(0);
486 border-right: 2px solid $bg-color;
487 border-bottom: 2px solid $bg-color;
492 border-color: transparent;
493 background: pvar(--mainColor);
494 animation: jelly 0.6s ease;
498 transform: rotate(45deg) scale(1);
504 font-weight: $font-regular;
511 &[disabled] + span + span {
519 padding: 1/4em 1/2em;
520 text-transform: uppercase;
521 font-weight: $font-bold;
523 letter-spacing: 1/3px;
527 background-color: #ffcdd2;
532 text-decoration: line-through;
536 background-color: #feedaf;
541 background-color: #ffd8b2;
546 background-color: #c8e6c9;
551 background-color: #b3e5fc;
556 background-color: #eccfff;
561 @mixin actor-avatar-size ($size) {
562 display: inline-block;
569 @mixin chevron ($size, $border-width) {
571 border-width: $border-width $border-width 0 0;
573 display: inline-block;
574 transform: rotate(-45deg);
579 @mixin chevron-right ($size, $border-width) {
580 @include chevron($size, $border-width);
583 transform: rotate(45deg);
586 @mixin chevron-left ($size, $border-width) {
587 @include chevron($size, $border-width);
590 transform: rotate(-135deg);
593 @mixin in-content-small-title {
594 text-transform: uppercase;
595 color: pvar(--mainColor);
596 font-weight: $font-bold;
600 @mixin settings-big-title {
601 text-transform: uppercase;
602 color: pvar(--mainColor);
603 font-weight: $font-bold;
608 @mixin create-button {
609 @include peertube-button-link;
610 @include orange-button;
611 @include button-with-icon(20px, 5px, -1px);
614 @mixin row-blocks ($column-responsive: true) {
617 padding-bottom: 20px;
619 border-bottom: 1px solid #C6C6C6;
621 @media screen and (max-width: $small-view) {
622 @if $column-responsive {
623 flex-direction: column;
628 padding-bottom: 10px;
634 @mixin dropdown-with-icon-item {
647 @mixin progressbar($small: false) {
648 background-color: $grey-background-color;
653 border-radius: 0.25rem;
658 color: $grey-foreground-color;
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: pvar(--secondaryColor);
686 background-color: lighten($color: #c54130, $amount: 10);
694 padding: 0.75rem 1rem;
697 background-color: pvar(--submenuBackgroundColor);
698 border-radius: 0.25rem;
704 color: pvar(--mainColor);
708 padding-left: 0.5rem;
710 display: inline-block;
711 padding-right: 0.5rem;
729 box-sizing: border-box;
730 flex: 0 0 percentage(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);
800 --chip-padding: .2rem .4rem;
801 $avatar-height: 1.2rem;
804 border-radius: var(--chip-radius);
805 display: inline-flex;
807 color: pvar(--mainForegroundColor);
808 height: $avatar-height;
813 padding: var(--chip-padding);
814 text-decoration: none;
815 text-overflow: ellipsis;
816 vertical-align: middle;
820 --chip-radius: .2rem;
821 --chip-padding: .2rem .3rem;
830 $avatar-height: 2rem;
832 height: $avatar-height;
835 @include actor-avatar-size($avatar-height);
840 flex-direction: column;
841 height: $avatar-height;
844 justify-content: center;
849 // applies ratio (default to 16:9) to a child element (using $selector) only using
850 // an immediate's parent size. This allows to set a ratio without explicit
851 // dimensions, as width/height cannot be computed from each other.
852 @mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
853 $padding-percent: percentage($inverted-ratio);
858 padding-top: $padding-percent;
872 border-bottom: 2px solid $grey-background-color;
873 padding-bottom: 15px;
874 margin-bottom: $sub-menu-margin-bottom;
876 > span > my-global-icon,
891 @mixin play-icon ($width, $height) {
898 transform: translate(-50%, -50%) scale(0.5);
900 border-top: ($height / 2) solid transparent;
901 border-bottom: ($height / 2) solid transparent;
903 border-left: $width solid rgba(255, 255, 255, 0.95);
906 @mixin on-small-main-col () {
907 :host-context(.main-col:not(.expanded)) {
908 @media screen and (max-width: $small-view + $menu-width) {
913 :host-context(.main-col.expanded) {
914 @media screen and (max-width: $small-view) {
920 @mixin on-mobile-main-col () {
921 :host-context(.main-col:not(.expanded)) {
922 @media screen and (max-width: $mobile-view + $menu-width) {
927 :host-context(.main-col.expanded) {
928 @media screen and (max-width: $mobile-view) {