]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/sass/include/_mixins.scss
Use -1 for max live duration unlimited
[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss
... / ...
CommitLineData
1@import '_variables';
2
3@mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active {
5 text-decoration: none !important;
6 outline: none !important;
7 }
8}
9
10@mixin disable-outline {
11 &:focus:not(.focus-visible) {
12 outline: none;
13 }
14}
15
16@mixin ellipsis {
17 white-space: nowrap;
18 overflow: hidden;
19 text-overflow: ellipsis;
20}
21
22@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
23 display: block;
24 /* Fallback for non-webkit */
25 display: -webkit-box;
26 max-height: $font-size * $number-of-lines;
27 /* Fallback for non-webkit */
28 font-size: $font-size;
29 line-height: $font-size;
30 overflow: hidden;
31 text-overflow: ellipsis;
32}
33
34@mixin prefix($property, $parameters...) {
35 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
36 #{$prefix}#{$property}: $parameters;
37 }
38}
39
40@mixin peertube-word-wrap {
41 word-break: break-word;
42 word-wrap: break-word;
43 overflow-wrap: break-word;
44 -webkit-hyphens: auto;
45 -ms-hyphens: auto;
46 -moz-hyphens: auto;
47 hyphens: auto;
48}
49
50@mixin apply-svg-color ($color) {
51 ::ng-deep .feather,
52 ::ng-deep .material {
53 color: $color;
54 }
55
56 ::ng-deep svg {
57 path[fill="#000"],
58 g[fill="#000"],
59 rect[fill="#000"],
60 circle[fill="#000"],
61 polygon[fill="#000"] {
62 fill: $color;
63 }
64
65 path[stroke="#000"],
66 g[stroke="#000"],
67 rect[stroke="#000"],
68 circle[stroke="#000"],
69 polygon[stroke="#000"] {
70 stroke: $color;
71 }
72
73 stop[stop-color="#000"] {
74 stop-color: $color;
75 }
76 }
77}
78
79@mixin fill-svg-color ($color) {
80 ::ng-deep svg {
81 path {
82 fill: $color;
83 }
84 }
85}
86
87@mixin button-focus($color) {
88 &:focus,
89 &.focus-visible {
90 box-shadow: #{$focus-box-shadow-form} $color;
91 }
92}
93
94@mixin peertube-input-text($width) {
95 display: inline-block;
96 height: $button-height;
97 width: $width;
98 color: pvar(--inputForegroundColor);
99 background-color: pvar(--inputBackgroundColor);
100 border: 1px solid #C6C6C6;
101 border-radius: 3px;
102 padding-left: 15px;
103 padding-right: 15px;
104 font-size: 15px;
105
106 &::placeholder {
107 color: pvar(--inputPlaceholderColor);
108 }
109
110 &[readonly] {
111 opacity: 0.7;
112 }
113
114 @media screen and (max-width: $width) {
115 width: 100%;
116 }
117}
118
119@mixin peertube-input-group($width) {
120 width: $width;
121 min-height: $button-height;
122 padding-top: 0;
123 padding-bottom: 0;
124 flex-wrap: nowrap;
125
126 .input-group-text{
127 font-size: 14px;
128 color: gray;
129 }
130}
131
132@mixin peertube-textarea ($width, $height) {
133 @include peertube-input-text($width);
134
135 color: pvar(--textareaForegroundColor);
136 background-color: pvar(--textareaBackgroundColor);
137 height: $height;
138 padding: 5px 15px;
139 font-size: 15px;
140}
141
142@mixin orange-button {
143 @include button-focus(pvar(--mainColorLightest));
144
145 &, &:active, &:focus {
146 color: #fff;
147 background-color: pvar(--mainColor);
148 }
149
150 &:hover {
151 color: #fff;
152 background-color: pvar(--mainHoverColor);
153 }
154
155 &[disabled], &.disabled {
156 cursor: default;
157 color: #fff;
158 background-color: #C6C6C6;
159 }
160
161 my-global-icon {
162 @include apply-svg-color(#fff)
163 }
164}
165
166@mixin tertiary-button {
167 @include button-focus($grey-button-outline-color);
168
169 color: pvar(--greyForegroundColor);
170 background-color: transparent;
171
172 &[disabled], &.disabled {
173 cursor: default;
174 }
175
176 my-global-icon {
177 @include apply-svg-color(transparent)
178 }
179}
180
181@mixin grey-button {
182 @include button-focus($grey-button-outline-color);
183 background-color: $grey-background-color;
184 color: pvar(--greyForegroundColor);
185
186 &:hover, &:active, &:focus, &[disabled], &.disabled {
187 color: pvar(--greyForegroundColor);
188 background-color: $grey-background-hover-color;
189 }
190
191 &[disabled], &.disabled {
192 cursor: default;
193 }
194
195 my-global-icon {
196 @include apply-svg-color(pvar(--greyForegroundColor))
197 }
198}
199
200@mixin danger-button {
201 $color: lighten($color: #c54130, $amount: 10);
202 $text: #fff6f5;
203
204 @include button-focus(scale-color($color, $alpha: -95%));
205 background-color: $color;
206 color: $text;
207
208 &:hover, &:active, &:focus, &[disabled], &.disabled {
209 background-color: lighten($color: $color, $amount: 10);
210 }
211
212 &[disabled], &.disabled {
213 cursor: default;
214 }
215
216 my-global-icon {
217 @include apply-svg-color($text)
218 }
219}
220
221@mixin peertube-button {
222 border: none;
223 font-weight: $font-semibold;
224 font-size: 15px;
225 height: $button-height;
226 line-height: $button-height;
227 border-radius: 3px;
228 text-align: center;
229 padding: 0 17px 0 13px;
230 cursor: pointer;
231}
232
233@mixin peertube-button-link {
234 display: inline-block;
235
236 @include disable-default-a-behaviour;
237 @include peertube-button;
238}
239
240@mixin peertube-button-outline {
241 display: inline-block;
242
243 @include disable-default-a-behaviour;
244 @include peertube-button;
245
246 border: 1px solid;
247}
248
249@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
250 my-global-icon {
251 position: relative;
252 width: $width;
253 margin-right: $margin-right;
254 top: $top;
255 }
256}
257
258@mixin peertube-button-file ($width) {
259 position: relative;
260 overflow: hidden;
261 display: inline-block;
262 width: $width;
263 min-height: 30px;
264
265 @include peertube-button;
266
267 input[type=file] {
268 position: absolute;
269 top: 0;
270 right: 0;
271 width: 100%;
272 height: 100%;
273 font-size: 100px;
274 text-align: right;
275 filter: alpha(opacity=0);
276 opacity: 0;
277 outline: none;
278 background: white;
279 cursor: inherit;
280 display: block;
281 }
282}
283
284@mixin icon ($size) {
285 display: inline-block;
286 background-repeat: no-repeat;
287 background-size: contain;
288 width: $size;
289 height: $size;
290 vertical-align: middle;
291 cursor: pointer;
292}
293
294@mixin select-arrow-down {
295 top: 50%;
296 right: calc(0% + 15px);
297 content: " ";
298 height: 0;
299 width: 0;
300 position: absolute;
301 pointer-events: none;
302 border: 5px solid rgba(0, 0, 0, 0);
303 border-top-color: #000;
304 margin-top: -2px;
305 z-index: 100;
306}
307
308
309@mixin ng-select ($width) {
310 ::ng-deep &.ng-select,
311 ::ng-deep .ng-select {
312 width: $width;
313
314 @media screen and (max-width: $width) {
315 width: 100%;
316 }
317 }
318}
319
320@mixin peertube-select-container ($width) {
321 padding: 0;
322 margin: 0;
323 width: $width;
324 border-radius: 3px;
325 color: pvar(--inputForegroundColor);
326 background: pvar(--inputBackgroundColor);
327 position: relative;
328 font-size: 15px;
329
330 &.disabled {
331 background-color: #E5E5E5;
332
333 select {
334 cursor: default;
335 }
336 }
337
338 @media screen and (max-width: $width) {
339 width: 100%;
340 }
341
342 &:after {
343 @include select-arrow-down;
344 }
345
346 select {
347 padding: 0 35px 0 12px;
348 position: relative;
349 border: 1px solid #C6C6C6;
350 background: transparent none;
351 appearance: none;
352 cursor: pointer;
353 height: $button-height;
354 text-overflow: ellipsis;
355 color: pvar(--mainForegroundColor);
356
357 &:focus {
358 outline: none;
359 }
360
361 &:-moz-focusring {
362 color: transparent;
363 text-shadow: 0 0 0 #000;
364 }
365
366 option {
367 color: #000;
368 }
369 }
370
371 &.peertube-select-button {
372 @include grey-button;
373
374 select,
375 option {
376 font-weight: $font-semibold;
377 color: pvar(--greyForegroundColor);
378 border: none;
379 }
380 }
381}
382
383// Thanks: https://codepen.io/triss90/pen/XNEdRe/
384@mixin peertube-radio-container {
385 input[type="radio"] {
386 display: none;
387
388 & + label {
389 font-weight: $font-regular;
390 cursor: pointer;
391
392 &:before {
393 position: relative;
394 top: -2px;
395 content: '';
396 background: #fff;
397 border-radius: 100%;
398 border: 1px solid #000;
399 display: inline-block;
400 width: 15px;
401 height: 15px;
402 vertical-align: middle;
403 cursor: pointer;
404 text-align: center;
405 margin-right: 10px;
406 }
407 }
408
409 &:checked + label:before {
410 background-color: #000;
411 box-shadow: inset 0 0 0 4px #fff;
412 }
413
414 &:focus + label:before {
415 outline: none;
416 border-color: #000;
417 }
418 }
419}
420
421@mixin peertube-checkbox ($border-width) {
422 opacity: 0;
423 position: absolute;
424
425 &:focus + span {
426 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
427 }
428
429 & + span {
430 position: relative;
431 width: 18px;
432 min-width: 18px;
433 height: 18px;
434 border: $border-width solid #C6C6C6;
435 border-radius: 3px;
436 vertical-align: middle;
437 cursor: pointer;
438
439 &:after {
440 content: '';
441 position: absolute;
442 top: calc(2px - #{$border-width});
443 left: 5px;
444 width: 5px;
445 height: 12px;
446 opacity: 0;
447 transform: rotate(45deg) scale(0);
448 border-right: 2px solid $bg-color;
449 border-bottom: 2px solid $bg-color;
450 }
451 }
452
453 &:checked + span {
454 border-color: transparent;
455 background: pvar(--mainColor);
456 animation: jelly 0.6s ease;
457
458 &:after {
459 opacity: 1;
460 transform: rotate(45deg) scale(1);
461 }
462 }
463
464 & + span + span {
465 font-size: 15px;
466 font-weight: $font-regular;
467 margin-left: 5px;
468 cursor: pointer;
469 display: inline;
470 }
471
472 &[disabled] + span,
473 &[disabled] + span + span{
474 opacity: 0.5;
475 cursor: default;
476 }
477}
478
479@mixin table-badge {
480 border-radius: 2px;
481 padding: 1/4em 1/2em;
482 text-transform: uppercase;
483 font-weight: $font-bold;
484 font-size: 12px;
485 letter-spacing: 1/3px;
486
487 &.badge-banned,
488 &.badge-red {
489 background-color: #ffcdd2;
490 color: #c63737;
491 }
492
493 &.badge-banned {
494 text-decoration: line-through;
495 }
496
497 &.badge-yellow {
498 background-color: #feedaf;
499 color: #8a5340;
500 }
501
502 &.badge-brown {
503 background-color: #ffd8b2;
504 color: #805b36;
505 }
506
507 &.badge-green {
508 background-color: #c8e6c9;
509 color: #256029;
510 }
511
512 &.badge-blue {
513 background-color: #b3e5fc;
514 color: #23547b;
515 }
516
517 &.badge-purple {
518 background-color: #eccfff;
519 color: #694382;
520 }
521}
522
523@mixin avatar ($size) {
524 object-fit: cover;
525 border-radius: 50%;
526 width: $size;
527 height: $size;
528 min-width: $size;
529 min-height: $size;
530}
531
532@mixin chevron ($size, $border-width) {
533 border-style: solid;
534 border-width: $border-width $border-width 0 0;
535 content: '';
536 display: inline-block;
537 transform: rotate(-45deg);
538 height: $size;
539 width: $size;
540}
541
542@mixin chevron-right ($size, $border-width) {
543 @include chevron($size, $border-width);
544
545 left: 0;
546 transform: rotate(45deg);
547}
548
549@mixin chevron-left ($size, $border-width) {
550 @include chevron($size, $border-width);
551
552 left: 0.25em;
553 transform: rotate(-135deg);
554}
555
556@mixin in-content-small-title {
557 text-transform: uppercase;
558 color: pvar(--mainColor);
559 font-weight: $font-bold;
560 font-size: 13px;
561}
562
563@mixin settings-big-title {
564 text-transform: uppercase;
565 color: pvar(--mainColor);
566 font-weight: $font-bold;
567 font-size: 110%;
568 margin-bottom: 10px;
569}
570
571@mixin actor-owner {
572 @include disable-default-a-behaviour;
573
574 font-size: 13px;
575 margin-top: 4px;
576 color: pvar(--mainForegroundColor);
577
578 span:hover {
579 opacity: 0.8;
580 }
581
582 img {
583 @include avatar(18px);
584
585 margin-left: 7px;
586 position: relative;
587 top: -2px;
588 }
589}
590
591@mixin sub-menu-with-actor {
592 position: initial;
593 z-index: unset;
594 height: max-content;
595 display: flex;
596 flex-direction: column;
597 align-items: flex-start;
598
599 .actor {
600 display: flex;
601 margin-top: 20px;
602 margin-bottom: 20px;
603
604 img {
605 @include avatar(80px);
606
607 margin-right: 20px;
608 }
609
610 .actor-info {
611 display: flex;
612 flex-direction: column;
613 justify-content: center;
614
615 .actor-names {
616 display: flex;
617 align-items: center;
618 flex-wrap: wrap;
619
620 .actor-display-name {
621 font-size: 23px;
622 font-weight: $font-bold;
623 margin-right: 7px;
624 }
625
626 .actor-name {
627 position: relative;
628 top: 3px;
629 font-size: 14px;
630 color: $grey-actor-name;
631 }
632 }
633
634 .actor-lower {
635 grid-area: lower;
636 }
637
638 .actor-followers {
639 font-size: 15px;
640 }
641
642 .actor-owner {
643 @include actor-owner;
644 }
645 }
646 }
647
648 .links {
649 margin-top: 0;
650 margin-bottom: 15px;
651
652 a {
653 margin-top: 0;
654 margin-bottom: 0;
655 text-transform: uppercase;
656 font-weight: 600;
657 font-size: 110%;
658
659 @media screen and (max-width: $mobile-view) {
660 font-size: 130%;
661 }
662 }
663 }
664}
665
666@mixin create-button {
667 @include peertube-button-link;
668 @include orange-button;
669 @include button-with-icon(20px, 5px, -1px);
670}
671
672@mixin row-blocks {
673 display: flex;
674 min-height: 130px;
675 padding-bottom: 20px;
676 margin-bottom: 20px;
677 border-bottom: 1px solid #C6C6C6;
678
679 @media screen and (max-width: 800px) {
680 flex-direction: column;
681 height: auto;
682 align-items: center;
683 }
684}
685
686@mixin dropdown-with-icon-item {
687 padding: 6px 15px;
688
689 my-global-icon {
690 width: 22px;
691 opacity: .7;
692
693 margin-right: 10px;
694 position: relative;
695 top: -2px;
696 }
697}
698
699@mixin progressbar($small: false) {
700 background-color: $grey-background-color;
701 display: flex;
702 height: 1rem;
703 overflow: hidden;
704 font-size: 0.75rem;
705 border-radius: 0.25rem;
706 position: relative;
707
708 span {
709 position: absolute;
710 color: $grey-foreground-color;
711 @if $small {
712 top: -1px;
713 }
714
715 &:nth-of-type(1) {
716 left: .2rem;
717 }
718 &:nth-of-type(2) {
719 right: .2rem;
720 }
721 }
722
723 .progress-bar {
724 color: pvar(--mainBackgroundColor);
725 background-color: pvar(--mainColor);
726 display: flex;
727 flex-direction: column;
728 justify-content: center;
729 text-align: center;
730 white-space: nowrap;
731 transition: width 0.6s ease;
732
733 &.secondary {
734 background-color: pvar(--secondaryColor);
735 }
736
737 &.red {
738 background-color: lighten($color: #c54130, $amount: 10);
739 }
740 }
741}
742
743@mixin breadcrumb {
744 display: flex;
745 flex-wrap: wrap;
746 padding: 0.75rem 1rem;
747 margin-bottom: 1rem;
748 list-style: none;
749 background-color: pvar(--submenuColor);
750 border-radius: 0.25rem;
751
752 .breadcrumb-item {
753 display: flex;
754
755 a {
756 color: pvar(--mainColor);
757 }
758
759 & + .breadcrumb-item {
760 padding-left: 0.5rem;
761 &::before {
762 display: inline-block;
763 padding-right: 0.5rem;
764 color: #6c757d;
765 content: "/";
766 }
767 }
768
769 &.active {
770 color: #6c757d;
771 }
772 }
773}
774
775@mixin dashboard {
776 display: flex;
777 flex-wrap: wrap;
778 margin: 0 -5px;
779
780 & > div {
781 box-sizing: border-box;
782 flex: 0 0 percentage(1/3);
783 padding: 0 5px;
784 margin-bottom: 10px;
785
786 & > a {
787 @include disable-default-a-behaviour;
788
789 text-decoration: none;
790 color: inherit;
791 display: block;
792 font-size: 18px;
793
794 &:active,
795 &:focus,
796 &:hover {
797 opacity: .8;
798 }
799 }
800
801 & > a,
802 & > div {
803 padding: 20px;
804 background: pvar(--submenuColor);
805 border-radius: 4px;
806 box-sizing: border-box;
807 height: 100%;
808 }
809 }
810
811 .dashboard-num, .dashboard-text {
812 text-align: center;
813 font-size: 130%;
814 line-height: 21px;
815 color: pvar(--mainForegroundColor);
816 line-height: 30px;
817 margin-bottom: 20px;
818 }
819
820 .dashboard-label {
821 font-size: 90%;
822 color: pvar(--inputPlaceholderColor);
823 text-align: center;
824 }
825}
826
827@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
828 width: 95%;
829 border-top: .05rem solid $color;
830 height: .05rem;
831 text-align: center;
832 display: block;
833 position: relative;
834
835 &[data-content] {
836 margin: .8rem 0;
837
838 &::after {
839 background: $background;
840 color: $color;
841 content: attr(data-content);
842 display: inline-block;
843 font-size: .7rem;
844 padding: 0 .4rem;
845 transform: translateY(-.65rem);
846 }
847 }
848}
849
850@mixin chip {
851 --chip-radius: 5rem;
852 --chip-padding: .2rem .4rem;
853 $avatar-height: 1.2rem;
854
855 align-items: center;
856 border-radius: var(--chip-radius);
857 display: inline-flex;
858 font-size: 90%;
859 color: pvar(--mainForegroundColor);
860 height: $avatar-height;
861 line-height: 1rem;
862 margin: .1rem;
863 max-width: 320px;
864 overflow: hidden;
865 padding: var(--chip-padding);
866 text-decoration: none;
867 text-overflow: ellipsis;
868 vertical-align: middle;
869 white-space: nowrap;
870
871 &.rectangular {
872 --chip-radius: .2rem;
873 --chip-padding: .2rem .3rem;
874 }
875
876 .avatar {
877 margin-left: -.4rem;
878 margin-right: .2rem;
879 height: $avatar-height;
880 width: $avatar-height;
881
882 border-radius: 50%;
883 display: inline-block;
884 line-height: 1.25;
885 position: relative;
886 vertical-align: middle;
887 }
888
889 &.two-lines {
890 $avatar-height: 2rem;
891
892 height: $avatar-height;
893
894 .avatar {
895 height: $avatar-height;
896 width: $avatar-height;
897 }
898
899 div {
900 display: flex;
901 flex-direction: column;
902 height: $avatar-height;
903 margin-left: .1rem;
904 margin-right: .1rem;
905 justify-content: center;
906 }
907 }
908}
909
910@mixin admin-sub-header-responsive ($horizontal-margins) {
911 flex-direction: column;
912
913 .form-sub-title {
914 margin-right: 0px !important;
915 margin-bottom: 10px;
916 text-align: center;
917 }
918
919 .admin-sub-nav {
920 display: block;
921 overflow-x: auto;
922 white-space: nowrap;
923 height: 50px;
924 padding: 10px 0;
925 width: calc(100vw - #{$horizontal-margins*2});
926
927 a {
928 margin-left: 5px;
929 }
930 }
931}
932
933// applies 16:9 ratio to a child element (using $selector) only using
934// an immediate's parent size. This allows 16:9 ratio without explicit
935// dimensions, as width/height cannot be computed from each other.
936@mixin large-screen-ratio ($selector: 'div') {
937 position: relative;
938 height: 0;
939 width: 100%;
940 padding-top: 56%;
941
942 #{$selector} {
943 position: absolute;
944 width: 100%;
945 height: 100%;
946 top: 0;
947 @content;
948 }
949}
950
951@mixin sub-menu-h1 {
952 ::ng-deep h1 {
953 font-size: 1.3rem;
954 border-bottom: 2px solid $grey-background-color;
955 padding-bottom: 15px;
956 margin-bottom: $sub-menu-margin-bottom;
957
958 my-global-icon {
959 margin-right: 10px;
960 vertical-align: bottom;
961 width: 24px;
962 height: 24px;
963 }
964
965 .badge {
966 margin-left: 7px;
967 }
968 }
969}
970
971@mixin play-icon ($width, $height) {
972 width: 0;
973 height: 0;
974
975 position: absolute;
976 left: 50%;
977 top: 50%;
978 transform: translate(-50%, -50%) scale(0.5);
979
980 border-top: ($height / 2) solid transparent;
981 border-bottom: ($height / 2) solid transparent;
982
983 border-left: $width solid rgba(255, 255, 255, 0.95);
984}