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) {
20 text-overflow: ellipsis;
23 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
25 /* Fallback for non-webkit */
27 max-height: $font-size * $number-of-lines;
28 /* Fallback for non-webkit */
29 font-size: $font-size;
30 line-height: $font-size;
32 text-overflow: ellipsis;
35 @mixin prefix($property, $parameters...) {
36 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
37 #{$prefix}#{$property}: $parameters;
41 @mixin peertube-word-wrap {
42 word-break: break-word;
43 word-wrap: break-word;
44 overflow-wrap: break-word;
45 -webkit-hyphens: auto;
51 @mixin apply-svg-color ($color) {
56 circle[fill="#000000"],
57 polygon[fill="#000000"] {
61 path[stroke="#000000"],
63 rect[stroke="#000000"],
64 circle[stroke="#000000"],
65 polygon[stroke="#000000"] {
69 stop[stop-color="#000000"] {
75 @mixin fill-svg-color ($color) {
83 @mixin button-focus($color) {
86 box-shadow: 0 0 0 .2rem $color;
90 @mixin peertube-input-text($width) {
91 display: inline-block;
92 height: $button-height;
94 background: var(--inputBackgroundColor);
95 border: 1px solid #C6C6C6;
102 color: var(--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);
130 @mixin orange-button {
131 @include button-focus(var(--mainColorLightest));
133 &, &:active, &:focus {
135 background-color: var(--mainColor);
140 background-color: var(--mainHoverColor);
143 &[disabled], &.disabled {
146 background-color: #C6C6C6;
150 @include apply-svg-color(#fff)
154 @mixin tertiary-button {
155 @include button-focus($grey-button-outline-color);
157 color: $grey-foreground-color;
158 background-color: transparent;
160 &[disabled], &.disabled {
165 @include apply-svg-color(transparent)
170 @include button-focus($grey-button-outline-color);
172 &, &:active, &:focus {
173 background-color: $grey-background-color;
174 color: $grey-foreground-color;
177 &:hover, &:active, &:focus, &[disabled], &.disabled {
178 color: $grey-foreground-color;
179 background-color: $grey-background-hover-color;
182 &[disabled], &.disabled {
187 @include apply-svg-color($grey-foreground-color)
191 @mixin peertube-button {
193 font-weight: $font-semibold;
195 height: $button-height;
196 line-height: $button-height;
199 padding: 0 17px 0 13px;
203 @mixin peertube-button-link {
204 display: inline-block;
206 @include disable-default-a-behaviour;
207 @include peertube-button;
210 @mixin peertube-button-outline {
211 display: inline-block;
213 @include disable-default-a-behaviour;
214 @include peertube-button;
219 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
223 margin-right: $margin-right;
228 @mixin peertube-button-file ($width) {
231 display: inline-block;
235 @include peertube-button;
236 @include orange-button;
246 filter: alpha(opacity=0);
255 @mixin icon ($size) {
256 display: inline-block;
257 background-repeat: no-repeat;
258 background-size: contain;
261 vertical-align: middle;
265 @mixin select-arrow-down {
267 right: calc(0% + 15px);
272 pointer-events: none;
273 border: 5px solid rgba(0, 0, 0, 0);
274 border-top-color: #000;
279 @mixin peertube-select-container ($width) {
284 background: var(--inputBackgroundColor);
289 background-color: #E5E5E5;
296 @media screen and (max-width: $width) {
301 @include select-arrow-down;
305 padding: 0 35px 0 12px;
306 width: calc(100% + 2px);
309 border: 1px solid #C6C6C6;
310 background: transparent none;
313 height: $button-height;
314 text-overflow: ellipsis;
315 color: var(--mainForegroundColor);
323 text-shadow: 0 0 0 #000;
332 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
333 @mixin peertube-radio-container {
334 input[type="radio"] {
338 font-weight: $font-regular;
347 border: 1px solid #000;
348 display: inline-block;
351 vertical-align: middle;
358 &:checked + label:before {
359 background-color: #000;
360 box-shadow: inset 0 0 0 4px #fff;
363 &:focus + label:before {
370 @mixin peertube-checkbox ($border-width) {
375 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
383 border: $border-width solid $fg-color;
385 vertical-align: middle;
391 top: calc(2px - #{$border-width});
396 transform: rotate(45deg) scale(0);
397 border-right: 2px solid $bg-color;
398 border-bottom: 2px solid $bg-color;
403 border-color: transparent;
404 background: var(--mainColor);
405 animation: jelly 0.6s ease;
409 transform: rotate(45deg) scale(1);
415 font-weight: $font-regular;
422 &[disabled] + span + span{
429 @mixin avatar ($size) {
438 @mixin chevron ($size, $border-width) {
440 border-width: $border-width $border-width 0 0;
442 display: inline-block;
443 transform: rotate(-45deg);
448 @mixin chevron-right ($size, $border-width) {
449 @include chevron($size, $border-width);
452 transform: rotate(45deg);
455 @mixin chevron-left ($size, $border-width) {
456 @include chevron($size, $border-width);
459 transform: rotate(-135deg);
462 @mixin in-content-small-title {
463 text-transform: uppercase;
464 color: var(--mainColor);
465 font-weight: $font-bold;
469 @mixin settings-big-title {
470 text-transform: uppercase;
471 color: var(--mainColor);
472 font-weight: $font-bold;
478 @include disable-default-a-behaviour;
482 color: var(--mainForegroundColor);
489 @include avatar(18px);
497 @mixin sub-menu-with-actor {
500 flex-direction: column;
501 align-items: flex-start;
509 @include avatar(80px);
516 flex-direction: column;
517 justify-content: center;
524 .actor-display-name {
526 font-weight: $font-bold;
534 color: $grey-actor-name;
547 @include actor-owner;
559 text-transform: uppercase;
563 @media screen and (max-width: $mobile-view) {
570 @mixin create-button {
571 @include peertube-button-link;
572 @include orange-button;
573 @include button-with-icon(20px, 5px, -1px);
579 padding-bottom: 20px;
581 border-bottom: 1px solid #C6C6C6;
583 @media screen and (max-width: 800px) {
584 flex-direction: column;
590 @mixin dropdown-with-icon-item {
604 background-color: $grey-background-color;
609 border-radius: 0.25rem;
612 color: var(--mainBackgroundColor);
613 background-color: var(--mainColor);
615 flex-direction: column;
616 justify-content: center;
619 transition: width 0.6s ease;
622 background-color: var(--secondaryColor);
630 padding: 0.75rem 1rem;
633 background-color: var(--submenuColor);
634 border-radius: 0.25rem;
640 color: var(--mainColor);
643 & + .breadcrumb-item {
644 padding-left: 0.5rem;
646 display: inline-block;
647 padding-right: 0.5rem;
665 box-sizing: border-box;
666 flex: 0 0 percentage(1/3);
671 text-decoration: none;
686 background: var(--submenuColor);
688 box-sizing: border-box;
693 .dashboard-num, .dashboard-text {
697 color: var(--mainForegroundColor);
704 color: var(--inputPlaceholderColor);
712 border: none !important;
715 .ng2-tags-container {
718 border: 1px solid #C6C6C6;
720 padding: 5px !important;
724 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
730 height: 30px !important;
731 font-size: 12px !important;
733 background-color: var(--mainBackgroundColor) !important;
734 color: var(--mainForegroundColor) !important;
739 background-color: $grey-background-color !important;
740 color: #000 !important;
741 border-radius: 3px !important;
742 font-size: 12px !important;
743 height: 30px !important;
744 line-height: 30px !important;
745 margin: 0 5px 0 0 !important;
746 cursor: default !important;
747 padding: 0 8px 0 10px !important;
750 height: 100% !important;
755 cursor: pointer !important;
756 height: auto !important;
757 vertical-align: middle !important;
758 padding-left: 6px !important;
763 height: auto !important;
764 vertical-align: middle !important;
767 fill: $grey-foreground-color !important;
772 transform: none !important;