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