]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/sass/include/_mixins.scss
Rich reporter field and video embed in moderation abuse list
[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _mixins.scss
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 svg {
52 path[fill="#000000"],
53 g[fill="#000000"],
54 rect[fill="#000000"],
55 circle[fill="#000000"],
56 polygon[fill="#000000"] {
57 fill: $color;
58 }
59
60 path[stroke="#000000"],
61 g[stroke="#000000"],
62 rect[stroke="#000000"],
63 circle[stroke="#000000"],
64 polygon[stroke="#000000"] {
65 stroke: $color;
66 }
67
68 stop[stop-color="#000000"] {
69 stop-color: $color;
70 }
71 }
72 }
73
74 @mixin fill-svg-color ($color) {
75 ::ng-deep svg {
76 path {
77 fill: $color;
78 }
79 }
80 }
81
82 @mixin button-focus($color) {
83 &:focus,
84 &.focus-visible {
85 box-shadow: #{$focus-box-shadow-form} $color;
86 }
87 }
88
89 @mixin peertube-input-text($width) {
90 display: inline-block;
91 height: $button-height;
92 width: $width;
93 background: var(--inputBackgroundColor);
94 border: 1px solid #C6C6C6;
95 border-radius: 3px;
96 padding-left: 15px;
97 padding-right: 15px;
98 font-size: 15px;
99
100 &::placeholder {
101 color: var(--inputPlaceholderColor);
102 }
103
104 @media screen and (max-width: $width) {
105 width: 100%;
106 }
107 }
108
109 @mixin peertube-input-group($width) {
110 width: $width;
111 min-height: $button-height;
112 padding-top: 0;
113 padding-bottom: 0;
114
115 .input-group-text{
116 font-size: 14px;
117 color: gray;
118 }
119 }
120
121 @mixin peertube-textarea ($width, $height) {
122 @include peertube-input-text($width);
123
124 height: $height;
125 padding: 5px 15px;
126 font-size: 15px;
127 }
128
129 @mixin orange-button {
130 @include button-focus(var(--mainColorLightest));
131
132 &, &:active, &:focus {
133 color: #fff;
134 background-color: var(--mainColor);
135 }
136
137 &:hover {
138 color: #fff;
139 background-color: var(--mainHoverColor);
140 }
141
142 &[disabled], &.disabled {
143 cursor: default;
144 color: #fff;
145 background-color: #C6C6C6;
146 }
147
148 my-global-icon {
149 @include apply-svg-color(#fff)
150 }
151 }
152
153 @mixin tertiary-button {
154 @include button-focus($grey-button-outline-color);
155
156 color: $grey-foreground-color;
157 background-color: transparent;
158
159 &[disabled], &.disabled {
160 cursor: default;
161 }
162
163 my-global-icon {
164 @include apply-svg-color(transparent)
165 }
166 }
167
168 @mixin grey-button {
169 @include button-focus($grey-button-outline-color);
170
171 &, &:active, &:focus {
172 background-color: $grey-background-color;
173 color: $grey-foreground-color;
174 }
175
176 &:hover, &:active, &:focus, &[disabled], &.disabled {
177 color: $grey-foreground-color;
178 background-color: $grey-background-hover-color;
179 }
180
181 &[disabled], &.disabled {
182 cursor: default;
183 }
184
185 my-global-icon {
186 @include apply-svg-color($grey-foreground-color)
187 }
188 }
189
190 @mixin peertube-button {
191 border: none;
192 font-weight: $font-semibold;
193 font-size: 15px;
194 height: $button-height;
195 line-height: $button-height;
196 border-radius: 3px;
197 text-align: center;
198 padding: 0 17px 0 13px;
199 cursor: pointer;
200 }
201
202 @mixin peertube-button-link {
203 display: inline-block;
204
205 @include disable-default-a-behaviour;
206 @include peertube-button;
207 }
208
209 @mixin peertube-button-outline {
210 display: inline-block;
211
212 @include disable-default-a-behaviour;
213 @include peertube-button;
214
215 border: 1px solid;
216 }
217
218 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
219 my-global-icon {
220 position: relative;
221 width: $width;
222 margin-right: $margin-right;
223 top: $top;
224 }
225 }
226
227 @mixin peertube-button-file ($width) {
228 position: relative;
229 overflow: hidden;
230 display: inline-block;
231 width: $width;
232 min-height: 30px;
233
234 @include peertube-button;
235 @include orange-button;
236
237 input[type=file] {
238 position: absolute;
239 top: 0;
240 right: 0;
241 width: 100%;
242 height: 100%;
243 font-size: 100px;
244 text-align: right;
245 filter: alpha(opacity=0);
246 opacity: 0;
247 outline: none;
248 background: white;
249 cursor: inherit;
250 display: block;
251 }
252 }
253
254 @mixin icon ($size) {
255 display: inline-block;
256 background-repeat: no-repeat;
257 background-size: contain;
258 width: $size;
259 height: $size;
260 vertical-align: middle;
261 cursor: pointer;
262 }
263
264 @mixin select-arrow-down {
265 top: 50%;
266 right: calc(0% + 15px);
267 content: " ";
268 height: 0;
269 width: 0;
270 position: absolute;
271 pointer-events: none;
272 border: 5px solid rgba(0, 0, 0, 0);
273 border-top-color: #000;
274 margin-top: -2px;
275 z-index: 100;
276 }
277
278 @mixin peertube-select-container ($width) {
279 padding: 0;
280 margin: 0;
281 width: $width;
282 border-radius: 3px;
283 background: var(--inputBackgroundColor);
284 position: relative;
285 font-size: 15px;
286
287 &.disabled {
288 background-color: #E5E5E5;
289
290 select {
291 cursor: default;
292 }
293 }
294
295 @media screen and (max-width: $width) {
296 width: 100%;
297 }
298
299 &:after {
300 @include select-arrow-down;
301 }
302
303 select {
304 padding: 0 35px 0 12px;
305 width: calc(100% + 2px);
306 position: relative;
307 left: 1px;
308 border: 1px solid #C6C6C6;
309 background: transparent none;
310 appearance: none;
311 cursor: pointer;
312 height: $button-height;
313 text-overflow: ellipsis;
314 color: var(--mainForegroundColor);
315
316 &:focus {
317 outline: none;
318 }
319
320 &:-moz-focusring {
321 color: transparent;
322 text-shadow: 0 0 0 #000;
323 }
324
325 option {
326 color: #000;
327 }
328 }
329 }
330
331 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
332 @mixin peertube-radio-container {
333 input[type="radio"] {
334 display: none;
335
336 & + label {
337 font-weight: $font-regular;
338 cursor: pointer;
339
340 &:before {
341 position: relative;
342 top: -2px;
343 content: '';
344 background: #fff;
345 border-radius: 100%;
346 border: 1px solid #000;
347 display: inline-block;
348 width: 15px;
349 height: 15px;
350 vertical-align: middle;
351 cursor: pointer;
352 text-align: center;
353 margin-right: 10px;
354 }
355 }
356
357 &:checked + label:before {
358 background-color: #000;
359 box-shadow: inset 0 0 0 4px #fff;
360 }
361
362 &:focus + label:before {
363 outline: none;
364 border-color: #000;
365 }
366 }
367 }
368
369 @mixin peertube-checkbox ($border-width) {
370 opacity: 0;
371 position: absolute;
372
373 &:focus + span {
374 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
375 }
376
377 & + span {
378 position: relative;
379 width: 18px;
380 min-width: 18px;
381 height: 18px;
382 border: $border-width solid #C6C6C6;
383 border-radius: 3px;
384 vertical-align: middle;
385 cursor: pointer;
386
387 &:after {
388 content: '';
389 position: absolute;
390 top: calc(2px - #{$border-width});
391 left: 5px;
392 width: 5px;
393 height: 12px;
394 opacity: 0;
395 transform: rotate(45deg) scale(0);
396 border-right: 2px solid $bg-color;
397 border-bottom: 2px solid $bg-color;
398 }
399 }
400
401 &:checked + span {
402 border-color: transparent;
403 background: var(--mainColor);
404 animation: jelly 0.6s ease;
405
406 &:after {
407 opacity: 1;
408 transform: rotate(45deg) scale(1);
409 }
410 }
411
412 & + span + span {
413 font-size: 15px;
414 font-weight: $font-regular;
415 margin-left: 5px;
416 cursor: pointer;
417 display: inline;
418 }
419
420 &[disabled] + span,
421 &[disabled] + span + span{
422 opacity: 0.5;
423 cursor: default;
424 }
425 }
426
427
428 @mixin avatar ($size) {
429 object-fit: cover;
430 border-radius: 50%;
431 width: $size;
432 height: $size;
433 min-width: $size;
434 min-height: $size;
435 }
436
437 @mixin chevron ($size, $border-width) {
438 border-style: solid;
439 border-width: $border-width $border-width 0 0;
440 content: '';
441 display: inline-block;
442 transform: rotate(-45deg);
443 height: $size;
444 width: $size;
445 }
446
447 @mixin chevron-right ($size, $border-width) {
448 @include chevron($size, $border-width);
449
450 left: 0;
451 transform: rotate(45deg);
452 }
453
454 @mixin chevron-left ($size, $border-width) {
455 @include chevron($size, $border-width);
456
457 left: 0.25em;
458 transform: rotate(-135deg);
459 }
460
461 @mixin in-content-small-title {
462 text-transform: uppercase;
463 color: var(--mainColor);
464 font-weight: $font-bold;
465 font-size: 13px;
466 }
467
468 @mixin settings-big-title {
469 text-transform: uppercase;
470 color: var(--mainColor);
471 font-weight: $font-bold;
472 font-size: 110%;
473 margin-bottom: 10px;
474 }
475
476 @mixin actor-owner {
477 @include disable-default-a-behaviour;
478
479 font-size: 13px;
480 margin-top: 4px;
481 color: var(--mainForegroundColor);
482
483 span:hover {
484 opacity: 0.8;
485 }
486
487 img {
488 @include avatar(18px);
489
490 margin-left: 7px;
491 position: relative;
492 top: -2px;
493 }
494 }
495
496 @mixin sub-menu-with-actor {
497 height: max-content;
498 display: flex;
499 flex-direction: column;
500 align-items: flex-start;
501
502 .actor {
503 display: flex;
504 margin-top: 20px;
505 margin-bottom: 20px;
506
507 img {
508 @include avatar(80px);
509
510 margin-right: 20px;
511 }
512
513 .actor-info {
514 display: flex;
515 flex-direction: column;
516 justify-content: center;
517
518 .actor-names {
519 display: flex;
520 align-items: center;
521 flex-wrap: wrap;
522
523 .actor-display-name {
524 font-size: 23px;
525 font-weight: $font-bold;
526 margin-right: 7px;
527 }
528
529 .actor-name {
530 position: relative;
531 top: 3px;
532 font-size: 14px;
533 color: $grey-actor-name;
534 }
535 }
536
537 .actor-lower {
538 grid-area: lower;
539 }
540
541 .actor-followers {
542 font-size: 15px;
543 }
544
545 .actor-owner {
546 @include actor-owner;
547 }
548 }
549 }
550
551 .links {
552 margin-top: 0;
553 margin-bottom: 15px;
554
555 a {
556 margin-top: 0;
557 margin-bottom: 0;
558 text-transform: uppercase;
559 font-weight: 600;
560 font-size: 110%;
561
562 @media screen and (max-width: $mobile-view) {
563 font-size: 130%;
564 }
565 }
566 }
567 }
568
569 @mixin create-button {
570 @include peertube-button-link;
571 @include orange-button;
572 @include button-with-icon(20px, 5px, -1px);
573 }
574
575 @mixin row-blocks {
576 display: flex;
577 min-height: 130px;
578 padding-bottom: 20px;
579 margin-bottom: 20px;
580 border-bottom: 1px solid #C6C6C6;
581
582 @media screen and (max-width: 800px) {
583 flex-direction: column;
584 height: auto;
585 align-items: center;
586 }
587 }
588
589 @mixin dropdown-with-icon-item {
590 padding: 6px 15px;
591
592 my-global-icon {
593 width: 22px;
594 opacity: .7;
595
596 margin-right: 10px;
597 position: relative;
598 top: -2px;
599 }
600 }
601
602 @mixin progressbar {
603 background-color: $grey-background-color;
604 display: flex;
605 height: 1rem;
606 overflow: hidden;
607 font-size: 0.75rem;
608 border-radius: 0.25rem;
609
610 .progress-bar {
611 color: var(--mainBackgroundColor);
612 background-color: var(--mainColor);
613 display: flex;
614 flex-direction: column;
615 justify-content: center;
616 text-align: center;
617 white-space: nowrap;
618 transition: width 0.6s ease;
619
620 &.secondary {
621 background-color: var(--secondaryColor);
622 }
623 }
624 }
625
626 @mixin breadcrumb {
627 display: flex;
628 flex-wrap: wrap;
629 padding: 0.75rem 1rem;
630 margin-bottom: 1rem;
631 list-style: none;
632 background-color: var(--submenuColor);
633 border-radius: 0.25rem;
634
635 .breadcrumb-item {
636 display: flex;
637
638 a {
639 color: var(--mainColor);
640 }
641
642 & + .breadcrumb-item {
643 padding-left: 0.5rem;
644 &::before {
645 display: inline-block;
646 padding-right: 0.5rem;
647 color: #6c757d;
648 content: "/";
649 }
650 }
651
652 &.active {
653 color: #6c757d;
654 }
655 }
656 }
657
658 @mixin dashboard {
659 display: flex;
660 flex-wrap: wrap;
661 margin: 0 -5px;
662
663 & > div {
664 box-sizing: border-box;
665 flex: 0 0 percentage(1/3);
666 padding: 0 5px;
667 margin-bottom: 10px;
668
669 & > a {
670 text-decoration: none;
671 color: inherit;
672 display: block;
673 font-size: 18px;
674
675 &:active,
676 &:focus,
677 &:hover {
678 opacity: .8;
679 }
680 }
681
682 & > a,
683 & > div {
684 padding: 20px;
685 background: var(--submenuColor);
686 border-radius: 4px;
687 box-sizing: border-box;
688 height: 100%;
689 }
690 }
691
692 .dashboard-num, .dashboard-text {
693 text-align: center;
694 font-size: 130%;
695 line-height: 21px;
696 color: var(--mainForegroundColor);
697 line-height: 30px;
698 margin-bottom: 20px;
699 }
700
701 .dashboard-label {
702 font-size: 90%;
703 color: var(--inputPlaceholderColor);
704 text-align: center;
705 }
706 }
707
708 @mixin ng2-tags {
709 ::ng-deep {
710 .ng2-tag-input {
711 border: none !important;
712 }
713
714 .ng2-tags-container {
715 display: flex;
716 align-items: center;
717 border: 1px solid #C6C6C6;
718 border-radius: 3px;
719 padding: 5px !important;
720 height: max-content;
721
722 &:focus-within {
723 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
724 }
725 }
726
727 tag-input-form {
728 input {
729 height: 30px !important;
730 font-size: 12px !important;
731
732 background-color: var(--mainBackgroundColor) !important;
733 color: var(--mainForegroundColor) !important;
734 }
735 }
736
737 tag {
738 background-color: $grey-background-color !important;
739 color: #000 !important;
740 border-radius: 3px !important;
741 font-size: 12px !important;
742 height: 30px !important;
743 line-height: 30px !important;
744 margin: 0 5px 0 0 !important;
745 cursor: default !important;
746 padding: 0 8px 0 10px !important;
747
748 div {
749 height: 100% !important;
750 }
751 }
752
753 delete-icon {
754 cursor: pointer !important;
755 height: auto !important;
756 vertical-align: middle !important;
757 padding-left: 6px !important;
758
759 svg {
760 position: relative;
761 top: -1px;
762 height: auto !important;
763 vertical-align: middle !important;
764
765 path {
766 fill: $grey-foreground-color !important;
767 }
768 }
769
770 &:hover {
771 transform: none !important;
772 }
773 }
774 }
775 }
776
777 @mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) {
778 width: 95%;
779 border-top: .05rem solid $color;
780 height: .05rem;
781 text-align: center;
782 display: block;
783 position: relative;
784
785 &[data-content] {
786 margin: .8rem 0;
787
788 &::after {
789 background: $background;
790 color: $color;
791 content: attr(data-content);
792 display: inline-block;
793 font-size: .7rem;
794 padding: 0 .4rem;
795 transform: translateY(-.65rem);
796 }
797 }
798 }
799
800 @mixin chip {
801 $avatar-height: 1.2rem;
802
803 align-items: center;
804 border-radius: 5rem;
805 display: inline-flex;
806 font-size: 90%;
807 color: var(--mainForegroundColor);
808 height: $avatar-height;
809 line-height: .8rem;
810 margin: .1rem;
811 max-width: 320px;
812 overflow: hidden;
813 padding: .2rem .4rem;
814 text-decoration: none;
815 text-overflow: ellipsis;
816 vertical-align: middle;
817 white-space: nowrap;
818
819 .avatar {
820 margin-left: -.4rem;
821 margin-right: .2rem;
822 height: $avatar-height;
823 width: $avatar-height;
824
825 border-radius: 50%;
826 display: inline-block;
827 line-height: 1.25;
828 position: relative;
829 vertical-align: middle;
830 }
831
832 &.two-lines {
833 $avatar-height: 1.8rem;
834
835 height: $avatar-height;
836
837 .avatar {
838 height: $avatar-height;
839 width: $avatar-height;
840 }
841
842 div {
843 display: flex;
844 flex-direction: column;
845 font-size: 80%;
846 height: $avatar-height;
847 margin-left: .1rem;
848 margin-right: .1rem;
849 justify-content: center;
850 }
851 }
852 }