3 @mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active {
5 text-decoration: none !important;
6 outline: none !important;
10 @mixin disable-outline {
11 &:focus:not(.focus-visible) {
19 text-overflow: ellipsis;
22 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
24 /* Fallback for non-webkit */
26 max-height: $font-size * $number-of-lines;
27 /* Fallback for non-webkit */
28 font-size: $font-size;
29 line-height: $font-size;
31 text-overflow: ellipsis;
34 @mixin prefix($property, $parameters...) {
35 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
36 #{$prefix}#{$property}: $parameters;
40 @mixin peertube-word-wrap {
41 word-break: break-word;
42 word-wrap: break-word;
43 overflow-wrap: break-word;
44 -webkit-hyphens: auto;
50 @mixin apply-svg-color ($color) {
56 polygon[fill="#000"] {
63 circle[stroke="#000"],
64 polygon[stroke="#000"] {
68 stop[stop-color="#000"] {
74 @mixin fill-svg-color ($color) {
82 @mixin button-focus($color) {
85 box-shadow: #{$focus-box-shadow-form} $color;
89 @mixin peertube-input-text($width) {
90 display: inline-block;
91 height: $button-height;
93 color: pvar(--inputForegroundColor);
94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid #C6C6C6;
102 color: pvar(--inputPlaceholderColor);
105 @media screen and (max-width: $width) {
110 @mixin peertube-input-group($width) {
112 min-height: $button-height;
122 @mixin peertube-textarea ($width, $height) {
123 @include peertube-input-text($width);
125 color: pvar(--textareaForegroundColor);
126 background-color: pvar(--textareaBackgroundColor);
132 @mixin orange-button {
133 @include button-focus(pvar(--mainColorLightest));
135 &, &:active, &:focus {
137 background-color: pvar(--mainColor);
142 background-color: pvar(--mainHoverColor);
145 &[disabled], &.disabled {
148 background-color: #C6C6C6;
152 @include apply-svg-color(#fff)
156 @mixin tertiary-button {
157 @include button-focus($grey-button-outline-color);
159 color: pvar(--greyForegroundColor);
160 background-color: transparent;
162 &[disabled], &.disabled {
167 @include apply-svg-color(transparent)
172 @include button-focus($grey-button-outline-color);
174 &, &:active, &:focus {
175 background-color: $grey-background-color;
176 color: pvar(--greyForegroundColor);
179 &:hover, &:active, &:focus, &[disabled], &.disabled {
180 color: pvar(--greyForegroundColor);
181 background-color: $grey-background-hover-color;
184 &[disabled], &.disabled {
189 @include apply-svg-color(pvar(--greyForegroundColor))
193 @mixin peertube-button {
195 font-weight: $font-semibold;
197 height: $button-height;
198 line-height: $button-height;
201 padding: 0 17px 0 13px;
205 @mixin peertube-button-link {
206 display: inline-block;
208 @include disable-default-a-behaviour;
209 @include peertube-button;
212 @mixin peertube-button-outline {
213 display: inline-block;
215 @include disable-default-a-behaviour;
216 @include peertube-button;
221 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
225 margin-right: $margin-right;
230 @mixin peertube-button-file ($width) {
233 display: inline-block;
237 @include peertube-button;
238 @include orange-button;
248 filter: alpha(opacity=0);
257 @mixin icon ($size) {
258 display: inline-block;
259 background-repeat: no-repeat;
260 background-size: contain;
263 vertical-align: middle;
267 @mixin select-arrow-down {
269 right: calc(0% + 15px);
274 pointer-events: none;
275 border: 5px solid rgba(0, 0, 0, 0);
276 border-top-color: #000;
281 @mixin peertube-select-container ($width) {
286 color: pvar(--inputForegroundColor);
287 background: pvar(--inputBackgroundColor);
292 background-color: #E5E5E5;
299 @media screen and (max-width: $width) {
304 @include select-arrow-down;
308 padding: 0 35px 0 12px;
309 width: calc(100% + 2px);
312 border: 1px solid #C6C6C6;
313 background: transparent none;
316 height: $button-height;
317 text-overflow: ellipsis;
318 color: pvar(--mainForegroundColor);
326 text-shadow: 0 0 0 #000;
335 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
336 @mixin peertube-radio-container {
337 input[type="radio"] {
341 font-weight: $font-regular;
350 border: 1px solid #000;
351 display: inline-block;
354 vertical-align: middle;
361 &:checked + label:before {
362 background-color: #000;
363 box-shadow: inset 0 0 0 4px #fff;
366 &:focus + label:before {
373 @mixin peertube-checkbox ($border-width) {
378 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
386 border: $border-width solid #C6C6C6;
388 vertical-align: middle;
394 top: calc(2px - #{$border-width});
399 transform: rotate(45deg) scale(0);
400 border-right: 2px solid $bg-color;
401 border-bottom: 2px solid $bg-color;
406 border-color: transparent;
407 background: pvar(--mainColor);
408 animation: jelly 0.6s ease;
412 transform: rotate(45deg) scale(1);
418 font-weight: $font-regular;
425 &[disabled] + span + span{
432 @mixin avatar ($size) {
441 @mixin chevron ($size, $border-width) {
443 border-width: $border-width $border-width 0 0;
445 display: inline-block;
446 transform: rotate(-45deg);
451 @mixin chevron-right ($size, $border-width) {
452 @include chevron($size, $border-width);
455 transform: rotate(45deg);
458 @mixin chevron-left ($size, $border-width) {
459 @include chevron($size, $border-width);
462 transform: rotate(-135deg);
465 @mixin in-content-small-title {
466 text-transform: uppercase;
467 color: pvar(--mainColor);
468 font-weight: $font-bold;
472 @mixin settings-big-title {
473 text-transform: uppercase;
474 color: pvar(--mainColor);
475 font-weight: $font-bold;
481 @include disable-default-a-behaviour;
485 color: pvar(--mainForegroundColor);
492 @include avatar(18px);
500 @mixin sub-menu-with-actor {
503 flex-direction: column;
504 align-items: flex-start;
512 @include avatar(80px);
519 flex-direction: column;
520 justify-content: center;
527 .actor-display-name {
529 font-weight: $font-bold;
537 color: $grey-actor-name;
550 @include actor-owner;
562 text-transform: uppercase;
566 @media screen and (max-width: $mobile-view) {
573 @mixin create-button {
574 @include peertube-button-link;
575 @include orange-button;
576 @include button-with-icon(20px, 5px, -1px);
582 padding-bottom: 20px;
584 border-bottom: 1px solid #C6C6C6;
586 @media screen and (max-width: 800px) {
587 flex-direction: column;
593 @mixin dropdown-with-icon-item {
607 background-color: $grey-background-color;
612 border-radius: 0.25rem;
615 color: pvar(--mainBackgroundColor);
616 background-color: pvar(--mainColor);
618 flex-direction: column;
619 justify-content: center;
622 transition: width 0.6s ease;
625 background-color: pvar(--secondaryColor);
633 padding: 0.75rem 1rem;
636 background-color: pvar(--submenuColor);
637 border-radius: 0.25rem;
643 color: pvar(--mainColor);
646 & + .breadcrumb-item {
647 padding-left: 0.5rem;
649 display: inline-block;
650 padding-right: 0.5rem;
668 box-sizing: border-box;
669 flex: 0 0 percentage(1/3);
674 @include disable-default-a-behaviour;
676 text-decoration: none;
691 background: pvar(--submenuColor);
693 box-sizing: border-box;
698 .dashboard-num, .dashboard-text {
702 color: pvar(--mainForegroundColor);
709 color: pvar(--inputPlaceholderColor);
717 border: none !important;
720 .ng2-tags-container {
723 border: 1px solid #C6C6C6;
725 padding: 5px !important;
729 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
735 height: 30px !important;
736 font-size: 12px !important;
738 background-color: pvar(--mainBackgroundColor) !important;
739 color: pvar(--mainForegroundColor) !important;
744 background-color: $grey-background-color !important;
745 color: #000 !important;
746 border-radius: 3px !important;
747 font-size: 12px !important;
748 height: 30px !important;
749 line-height: 30px !important;
750 margin: 0 5px 0 0 !important;
751 cursor: default !important;
752 padding: 0 8px 0 10px !important;
755 height: 100% !important;
760 cursor: pointer !important;
761 height: auto !important;
762 vertical-align: middle !important;
763 padding-left: 6px !important;
768 height: auto !important;
769 vertical-align: middle !important;
772 fill: pvar(--greyForegroundColor) !important;
777 transform: none !important;
783 @mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
785 border-top: .05rem solid $color;
795 background: $background;
797 content: attr(data-content);
798 display: inline-block;
801 transform: translateY(-.65rem);
807 $avatar-height: 1.2rem;
811 display: inline-flex;
813 color: pvar(--mainForegroundColor);
814 height: $avatar-height;
819 padding: .2rem .4rem;
820 text-decoration: none;
821 text-overflow: ellipsis;
822 vertical-align: middle;
828 height: $avatar-height;
829 width: $avatar-height;
832 display: inline-block;
835 vertical-align: middle;
839 $avatar-height: 2rem;
841 height: $avatar-height;
844 height: $avatar-height;
845 width: $avatar-height;
850 flex-direction: column;
851 height: $avatar-height;
854 justify-content: center;
864 justify-content: center;
868 @mixin admin-sub-header-responsive ($horizontal-margins) {
869 flex-direction: column;
872 margin-right: 0px !important;
883 width: calc(100vw - #{$horizontal-margins*2});
891 // applies 16:9 ratio to a child element (using $selector) only using
892 // an immediate's parent size. This allows 16:9 ratio without explicit
893 // dimensions, as width/height cannot be computed from each other.
894 @mixin large-screen-ratio ($selector: 'div') {