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 {
54 word-break: break-word;
55 word-wrap: break-word;
56 overflow-wrap: break-word;
60 @mixin apply-svg-color ($color) {
67 @mixin fill-svg-color ($color) {
75 @mixin button-focus($color) {
78 box-shadow: #{$focus-box-shadow-form} $color;
82 @mixin peertube-input-text($width) {
83 display: inline-block;
84 height: $button-height;
86 color: pvar(--inputForegroundColor);
87 background-color: pvar(--inputBackgroundColor);
88 border: 1px solid #C6C6C6;
95 color: pvar(--inputPlaceholderColor);
102 @media screen and (max-width: $width) {
107 @mixin peertube-input-group($width) {
109 min-height: $button-height;
120 @mixin peertube-textarea ($width, $height) {
121 @include peertube-input-text($width);
123 color: pvar(--textareaForegroundColor);
124 background-color: pvar(--textareaBackgroundColor);
130 @mixin orange-button {
131 @include button-focus(pvar(--mainColorLightest));
137 background-color: pvar(--mainColor);
142 background-color: pvar(--mainHoverColor);
149 background-color: #C6C6C6;
153 @include apply-svg-color(#fff);
157 @mixin orange-button-inverted {
158 @include button-focus(pvar(--mainColorLightest));
160 border: 2px solid pvar(--mainColor);
161 font-weight: $font-semibold;
166 color: pvar(--mainColor);
167 background-color: pvar(--mainBackgroundColor);
171 color: pvar(--mainColor);
172 background-color: pvar(--mainColorLightest);
178 color: pvar(--mainColor);
179 background-color: #C6C6C6;
183 @include apply-svg-color(pvar(--mainColor));
187 @mixin tertiary-button {
188 @include button-focus($grey-button-outline-color);
190 color: pvar(--greyForegroundColor);
191 background-color: transparent;
199 @include apply-svg-color(transparent);
204 @include button-focus($grey-button-outline-color);
206 background-color: $grey-background-color;
207 color: pvar(--greyForegroundColor);
214 color: pvar(--greyForegroundColor);
215 background-color: $grey-background-hover-color;
224 @include apply-svg-color(pvar(--greyForegroundColor));
228 @mixin danger-button {
229 $color: lighten($color: #c54130, $amount: 10);
232 @include button-focus(scale-color($color, $alpha: -95%));
234 background-color: $color;
242 background-color: lighten($color: $color, $amount: 10);
251 @include apply-svg-color($text);
255 @mixin peertube-button {
257 font-weight: $font-semibold;
259 height: $button-height;
260 line-height: $button-height;
261 // FIXME: because of primeng that redefines border-radius of all input[type="..."]
262 border-radius: 3px !important;
264 padding: 0 17px 0 13px;
268 @mixin peertube-button-link {
269 @include disable-default-a-behaviour;
270 @include peertube-button;
272 display: inline-block;
275 @mixin peertube-button-outline {
276 @include disable-default-a-behaviour;
277 @include peertube-button;
279 display: inline-block;
283 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
284 display: inline-flex;
286 line-height: normal !important;
291 margin-right: $margin-right;
296 @mixin peertube-file {
299 display: inline-block;
310 filter: alpha(opacity=0);
319 @mixin peertube-button-file ($width) {
320 @include peertube-file;
321 @include peertube-button;
326 @mixin icon ($size) {
327 display: inline-block;
328 background-repeat: no-repeat;
329 background-size: contain;
332 vertical-align: middle;
336 @mixin select-arrow-down {
338 right: calc(0% + 15px);
343 pointer-events: none;
344 border: 5px solid rgba(0, 0, 0, 0);
345 border-top-color: #000;
350 @mixin responsive-width ($width) {
353 @media screen and (max-width: $width) {
358 @mixin peertube-select-container ($width) {
363 color: pvar(--inputForegroundColor);
364 background: pvar(--inputBackgroundColor);
369 background-color: #E5E5E5;
376 @media screen and (max-width: $width) {
381 @include select-arrow-down;
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 @mixin admin-sub-header-responsive {
850 flex-direction: column;
853 margin-right: 0 !important;
872 // applies ratio (default to 16:9) to a child element (using $selector) only using
873 // an immediate's parent size. This allows to set a ratio without explicit
874 // dimensions, as width/height cannot be computed from each other.
875 @mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
876 $padding-percent: percentage($inverted-ratio);
881 padding-top: $padding-percent;
895 border-bottom: 2px solid $grey-background-color;
896 padding-bottom: 15px;
897 margin-bottom: $sub-menu-margin-bottom;
899 > span > my-global-icon,
914 @mixin play-icon ($width, $height) {
921 transform: translate(-50%, -50%) scale(0.5);
923 border-top: ($height / 2) solid transparent;
924 border-bottom: ($height / 2) solid transparent;
926 border-left: $width solid rgba(255, 255, 255, 0.95);
929 @mixin on-small-main-col () {
930 :host-context(.main-col:not(.expanded)) {
931 @media screen and (max-width: $small-view + $menu-width) {
936 :host-context(.main-col.expanded) {
937 @media screen and (max-width: $small-view) {
943 @mixin on-mobile-main-col () {
944 :host-context(.main-col:not(.expanded)) {
945 @media screen and (max-width: $mobile-view + $menu-width) {
950 :host-context(.main-col.expanded) {
951 @media screen and (max-width: $mobile-view) {