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