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) {
61 polygon[fill="#000"] {
68 circle[stroke="#000"],
69 polygon[stroke="#000"] {
73 stop[stop-color="#000"] {
79 @mixin fill-svg-color ($color) {
87 @mixin button-focus($color) {
90 box-shadow: #{$focus-box-shadow-form} $color;
94 @mixin peertube-input-text($width) {
95 display: inline-block;
96 height: $button-height;
98 color: pvar(--inputForegroundColor);
99 background-color: pvar(--inputBackgroundColor);
100 border: 1px solid #C6C6C6;
107 color: pvar(--inputPlaceholderColor);
110 @media screen and (max-width: $width) {
115 @mixin peertube-input-group($width) {
117 min-height: $button-height;
127 @mixin peertube-textarea ($width, $height) {
128 @include peertube-input-text($width);
130 color: pvar(--textareaForegroundColor);
131 background-color: pvar(--textareaBackgroundColor);
137 @mixin orange-button {
138 @include button-focus(pvar(--mainColorLightest));
140 &, &:active, &:focus {
142 background-color: pvar(--mainColor);
147 background-color: pvar(--mainHoverColor);
150 &[disabled], &.disabled {
153 background-color: #C6C6C6;
157 @include apply-svg-color(#fff)
161 @mixin tertiary-button {
162 @include button-focus($grey-button-outline-color);
164 color: pvar(--greyForegroundColor);
165 background-color: transparent;
167 &[disabled], &.disabled {
172 @include apply-svg-color(transparent)
177 @include button-focus($grey-button-outline-color);
178 background-color: $grey-background-color;
179 color: pvar(--greyForegroundColor);
181 &:hover, &:active, &:focus, &[disabled], &.disabled {
182 color: pvar(--greyForegroundColor);
183 background-color: $grey-background-hover-color;
186 &[disabled], &.disabled {
191 @include apply-svg-color(pvar(--greyForegroundColor))
195 @mixin danger-button {
196 $color: lighten($color: #c54130, $amount: 10);
199 @include button-focus(scale-color($color, $alpha: -95%));
200 background-color: $color;
203 &:hover, &:active, &:focus, &[disabled], &.disabled {
204 background-color: lighten($color: $color, $amount: 10);
207 &[disabled], &.disabled {
212 @include apply-svg-color($text)
216 @mixin peertube-button {
218 font-weight: $font-semibold;
220 height: $button-height;
221 line-height: $button-height;
224 padding: 0 17px 0 13px;
228 @mixin peertube-button-link {
229 display: inline-block;
231 @include disable-default-a-behaviour;
232 @include peertube-button;
235 @mixin peertube-button-outline {
236 display: inline-block;
238 @include disable-default-a-behaviour;
239 @include peertube-button;
244 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
248 margin-right: $margin-right;
253 @mixin peertube-button-file ($width) {
256 display: inline-block;
260 @include peertube-button;
261 @include orange-button;
271 filter: alpha(opacity=0);
280 @mixin icon ($size) {
281 display: inline-block;
282 background-repeat: no-repeat;
283 background-size: contain;
286 vertical-align: middle;
290 @mixin select-arrow-down {
292 right: calc(0% + 15px);
297 pointer-events: none;
298 border: 5px solid rgba(0, 0, 0, 0);
299 border-top-color: #000;
304 @mixin peertube-select-container ($width) {
309 color: pvar(--inputForegroundColor);
310 background: pvar(--inputBackgroundColor);
315 background-color: #E5E5E5;
322 @media screen and (max-width: $width) {
327 @include select-arrow-down;
331 padding: 0 35px 0 12px;
332 width: calc(100% + 2px);
335 border: 1px solid #C6C6C6;
336 background: transparent none;
339 height: $button-height;
340 text-overflow: ellipsis;
341 color: pvar(--mainForegroundColor);
349 text-shadow: 0 0 0 #000;
358 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
359 @mixin peertube-radio-container {
360 input[type="radio"] {
364 font-weight: $font-regular;
373 border: 1px solid #000;
374 display: inline-block;
377 vertical-align: middle;
384 &:checked + label:before {
385 background-color: #000;
386 box-shadow: inset 0 0 0 4px #fff;
389 &:focus + label:before {
396 @mixin peertube-checkbox ($border-width) {
401 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
409 border: $border-width solid #C6C6C6;
411 vertical-align: middle;
417 top: calc(2px - #{$border-width});
422 transform: rotate(45deg) scale(0);
423 border-right: 2px solid $bg-color;
424 border-bottom: 2px solid $bg-color;
429 border-color: transparent;
430 background: pvar(--mainColor);
431 animation: jelly 0.6s ease;
435 transform: rotate(45deg) scale(1);
441 font-weight: $font-regular;
448 &[disabled] + span + span{
455 @mixin avatar ($size) {
464 @mixin chevron ($size, $border-width) {
466 border-width: $border-width $border-width 0 0;
468 display: inline-block;
469 transform: rotate(-45deg);
474 @mixin chevron-right ($size, $border-width) {
475 @include chevron($size, $border-width);
478 transform: rotate(45deg);
481 @mixin chevron-left ($size, $border-width) {
482 @include chevron($size, $border-width);
485 transform: rotate(-135deg);
488 @mixin in-content-small-title {
489 text-transform: uppercase;
490 color: pvar(--mainColor);
491 font-weight: $font-bold;
495 @mixin settings-big-title {
496 text-transform: uppercase;
497 color: pvar(--mainColor);
498 font-weight: $font-bold;
504 @include disable-default-a-behaviour;
508 color: pvar(--mainForegroundColor);
515 @include avatar(18px);
523 @mixin sub-menu-with-actor {
526 flex-direction: column;
527 align-items: flex-start;
535 @include avatar(80px);
542 flex-direction: column;
543 justify-content: center;
550 .actor-display-name {
552 font-weight: $font-bold;
560 color: $grey-actor-name;
573 @include actor-owner;
585 text-transform: uppercase;
589 @media screen and (max-width: $mobile-view) {
596 @mixin create-button {
597 @include peertube-button-link;
598 @include orange-button;
599 @include button-with-icon(20px, 5px, -1px);
605 padding-bottom: 20px;
607 border-bottom: 1px solid #C6C6C6;
609 @media screen and (max-width: 800px) {
610 flex-direction: column;
616 @mixin dropdown-with-icon-item {
630 background-color: $grey-background-color;
635 border-radius: 0.25rem;
638 color: pvar(--mainBackgroundColor);
639 background-color: pvar(--mainColor);
641 flex-direction: column;
642 justify-content: center;
645 transition: width 0.6s ease;
648 background-color: pvar(--secondaryColor);
656 padding: 0.75rem 1rem;
659 background-color: pvar(--submenuColor);
660 border-radius: 0.25rem;
666 color: pvar(--mainColor);
669 & + .breadcrumb-item {
670 padding-left: 0.5rem;
672 display: inline-block;
673 padding-right: 0.5rem;
691 box-sizing: border-box;
692 flex: 0 0 percentage(1/3);
697 @include disable-default-a-behaviour;
699 text-decoration: none;
714 background: pvar(--submenuColor);
716 box-sizing: border-box;
721 .dashboard-num, .dashboard-text {
725 color: pvar(--mainForegroundColor);
732 color: pvar(--inputPlaceholderColor);
740 border: none !important;
743 .ng2-tags-container {
746 border: 1px solid #C6C6C6;
748 padding: 5px !important;
752 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
758 height: 30px !important;
759 font-size: 12px !important;
761 background-color: pvar(--mainBackgroundColor) !important;
762 color: pvar(--mainForegroundColor) !important;
767 background-color: $grey-background-color !important;
768 color: #000 !important;
769 border-radius: 3px !important;
770 font-size: 12px !important;
771 height: 30px !important;
772 line-height: 30px !important;
773 margin: 0 5px 0 0 !important;
774 cursor: default !important;
775 padding: 0 8px 0 10px !important;
778 height: 100% !important;
783 cursor: pointer !important;
784 height: auto !important;
785 vertical-align: middle !important;
786 padding-left: 6px !important;
791 height: auto !important;
792 vertical-align: middle !important;
795 fill: pvar(--greyForegroundColor) !important;
800 transform: none !important;
806 @mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
808 border-top: .05rem solid $color;
818 background: $background;
820 content: attr(data-content);
821 display: inline-block;
824 transform: translateY(-.65rem);
831 --chip-padding: .2rem .4rem;
832 $avatar-height: 1.2rem;
835 border-radius: var(--chip-radius);
836 display: inline-flex;
838 color: pvar(--mainForegroundColor);
839 height: $avatar-height;
844 padding: var(--chip-padding);
845 text-decoration: none;
846 text-overflow: ellipsis;
847 vertical-align: middle;
851 --chip-radius: .2rem;
852 --chip-padding: .2rem .3rem;
858 height: $avatar-height;
859 width: $avatar-height;
862 display: inline-block;
865 vertical-align: middle;
869 $avatar-height: 2rem;
871 height: $avatar-height;
874 height: $avatar-height;
875 width: $avatar-height;
880 flex-direction: column;
881 height: $avatar-height;
884 justify-content: center;
889 @mixin admin-sub-header-responsive ($horizontal-margins) {
890 flex-direction: column;
893 margin-right: 0px !important;
904 width: calc(100vw - #{$horizontal-margins*2});
912 // applies 16:9 ratio to a child element (using $selector) only using
913 // an immediate's parent size. This allows 16:9 ratio without explicit
914 // dimensions, as width/height cannot be computed from each other.
915 @mixin large-screen-ratio ($selector: 'div') {