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