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