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-semibold;
 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   border-radius: 5px;
 555 }
 556
 557 @mixin chevron ($size, $border-width) {
 558   border-style: solid;
 559   border-width: $border-width $border-width 0 0;
 560   content: '';
 561   display: inline-block;
 562   transform: rotate(-45deg);
 563   height: $size;
 564   width: $size;
 565 }
 566
 567 @mixin chevron-right ($size, $border-width) {
 568   @include chevron($size, $border-width);
 569
 570   left: 0;
 571   transform: rotate(45deg);
 572 }
 573
 574 @mixin chevron-left ($size, $border-width) {
 575   @include chevron($size, $border-width);
 576
 577   left: 0.25em;
 578   transform: rotate(-135deg);
 579 }
 580
 581 @mixin in-content-small-title {
 582   text-transform: uppercase;
 583   color: pvar(--mainColor);
 584   font-weight: $font-bold;
 585   font-size: 13px;
 586 }
 587
 588 @mixin settings-big-title {
 589   text-transform: uppercase;
 590   color: pvar(--mainColor);
 591   font-weight: $font-bold;
 592   font-size: 110%;
 593   margin-bottom: 10px;
 594 }
 595
 596 @mixin actor-owner {
 597   @include disable-default-a-behaviour;
 598
 599   font-size: 13px;
 600   margin-top: 4px;
 601   color: pvar(--mainForegroundColor);
 602
 603   span:hover {
 604     opacity: 0.8;
 605   }
 606
 607   img {
 608     @include avatar(18px);
 609
 610     margin-left: 7px;
 611     position: relative;
 612     top: -2px;
 613   }
 614 }
 615
 616 @mixin create-button {
 617   @include peertube-button-link;
 618   @include orange-button;
 619   @include button-with-icon(20px, 5px, -1px);
 620 }
 621
 622 @mixin row-blocks {
 623   display: flex;
 624   min-height: 130px;
 625   padding-bottom: 20px;
 626   margin-bottom: 20px;
 627   border-bottom: 1px solid #C6C6C6;
 628
 629   @media screen and (max-width: 800px) {
 630     flex-direction: column;
 631     height: auto;
 632     align-items: center;
 633   }
 634 }
 635
 636 @mixin dropdown-with-icon-item {
 637   padding: 6px 15px;
 638
 639   my-global-icon {
 640     width: 22px;
 641     opacity: .7;
 642
 643     margin-right: 10px;
 644     position: relative;
 645     top: -2px;
 646   }
 647 }
 648
 649 @mixin progressbar($small: false) {
 650   background-color: $grey-background-color;
 651   display: flex;
 652   height: 1rem;
 653   overflow: hidden;
 654   font-size: 0.75rem;
 655   border-radius: 0.25rem;
 656   position: relative;
 657
 658   span {
 659     position: absolute;
 660     color: $grey-foreground-color;
 661     @if $small {
 662       top: -1px;
 663     }
 664
 665     &:nth-of-type(1) {
 666       left: .2rem;
 667     }
 668     &:nth-of-type(2) {
 669       right: .2rem;
 670     }
 671   }
 672
 673   .progress-bar {
 674     color: pvar(--mainBackgroundColor);
 675     background-color: pvar(--mainColor);
 676     display: flex;
 677     flex-direction: column;
 678     justify-content: center;
 679     text-align: center;
 680     white-space: nowrap;
 681     transition: width 0.6s ease;
 682
 683     &.secondary {
 684       background-color: pvar(--secondaryColor);
 685     }
 686
 687     &.red {
 688       background-color: lighten($color: #c54130, $amount: 10);
 689     }
 690   }
 691 }
 692
 693 @mixin breadcrumb {
 694   display: flex;
 695   flex-wrap: wrap;
 696   padding: 0.75rem 1rem;
 697   margin-bottom: 1rem;
 698   list-style: none;
 699   background-color: pvar(--submenuColor);
 700   border-radius: 0.25rem;
 701
 702   .breadcrumb-item {
 703     display: flex;
 704
 705     a {
 706       color: pvar(--mainColor);
 707     }
 708
 709     & + .breadcrumb-item {
 710       padding-left: 0.5rem;
 711       &::before {
 712         display: inline-block;
 713         padding-right: 0.5rem;
 714         color: #6c757d;
 715         content: "/";
 716       }
 717     }
 718
 719     &.active {
 720       color: #6c757d;
 721     }
 722   }
 723 }
 724
 725 @mixin dashboard {
 726   display: flex;
 727   flex-wrap: wrap;
 728   margin: 0 -5px;
 729
 730   & > div {
 731     box-sizing: border-box;
 732     flex: 0 0 percentage(1/3);
 733     padding: 0 5px;
 734     margin-bottom: 10px;
 735
 736     & > a {
 737       @include disable-default-a-behaviour;
 738
 739       text-decoration: none;
 740       color: inherit;
 741       display: block;
 742       font-size: 18px;
 743
 744       &:active,
 745       &:focus,
 746       &:hover {
 747         opacity: .8;
 748       }
 749     }
 750
 751     & > a,
 752     & > div {
 753       padding: 20px;
 754       background: pvar(--submenuColor);
 755       border-radius: 4px;
 756       box-sizing: border-box;
 757       height: 100%;
 758     }
 759   }
 760
 761   .dashboard-num, .dashboard-text {
 762     text-align: center;
 763     font-size: 130%;
 764     color: pvar(--mainForegroundColor);
 765     line-height: 30px;
 766     margin-bottom: 20px;
 767   }
 768
 769   .dashboard-label {
 770     font-size: 90%;
 771     color: pvar(--inputPlaceholderColor);
 772     text-align: center;
 773   }
 774 }
 775
 776 @mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
 777   width: 95%;
 778   border-top: .05rem solid $color;
 779   height: .05rem;
 780   text-align: center;
 781   display: block;
 782   position: relative;
 783
 784   &[data-content] {
 785     margin: .8rem 0;
 786
 787     &::after {
 788       background: $background;
 789       color: $color;
 790       content: attr(data-content);
 791       display: inline-block;
 792       font-size: .7rem;
 793       padding: 0 .4rem;
 794       transform: translateY(-.65rem);
 795     }
 796   }
 797 }
 798
 799 @mixin chip {
 800   --chip-radius: 5rem;
 801   --chip-padding: .2rem .4rem;
 802   $avatar-height: 1.2rem;
 803
 804   align-items: center;
 805   border-radius: var(--chip-radius);
 806   display: inline-flex;
 807   font-size: 90%;
 808   color: pvar(--mainForegroundColor);
 809   height: $avatar-height;
 810   line-height: 1rem;
 811   margin: .1rem;
 812   max-width: 320px;
 813   overflow: hidden;
 814   padding: var(--chip-padding);
 815   text-decoration: none;
 816   text-overflow: ellipsis;
 817   vertical-align: middle;
 818   white-space: nowrap;
 819
 820   &.rectangular {
 821     --chip-radius: .2rem;
 822     --chip-padding: .2rem .3rem;
 823   }
 824
 825   .avatar {
 826     margin-left: -.4rem;
 827     margin-right: .2rem;
 828     height: $avatar-height;
 829     width: $avatar-height;
 830
 831     border-radius: 50%;
 832     display: inline-block;
 833     line-height: 1.25;
 834     position: relative;
 835     vertical-align: middle;
 836   }
 837
 838   &.two-lines {
 839     $avatar-height: 2rem;
 840
 841     height: $avatar-height;
 842
 843     .avatar {
 844       height: $avatar-height;
 845       width: $avatar-height;
 846     }
 847
 848     div {
 849       display: flex;
 850       flex-direction: column;
 851       height: $avatar-height;
 852       margin-left: .1rem;
 853       margin-right: .1rem;
 854       justify-content: center;
 855     }
 856   }
 857 }
 858
 859 @mixin admin-sub-header-responsive ($horizontal-margins) {
 860   flex-direction: column;
 861
 862   .form-sub-title {
 863     margin-right: 0px !important;
 864     margin-bottom: 10px;
 865     text-align: center;
 866   }
 867
 868   .admin-sub-nav {
 869     display: block;
 870     overflow-x: auto;
 871     white-space: nowrap;
 872     height: 50px;
 873     padding: 10px 0;
 874     width: calc(100vw - #{$horizontal-margins*2});
 875
 876     a {
 877       margin-left: 5px;
 878     }
 879   }
 880 }
 881
 882 // applies 16:9 ratio to a child element (using $selector) only using
 883 // an immediate's parent size. This allows 16:9 ratio without explicit
 884 // dimensions, as width/height cannot be computed from each other.
 885 @mixin large-screen-ratio ($selector: 'div') {
 886   position: relative;
 887   height: 0;
 888   width: 100%;
 889   padding-top: 56%;
 890
 891   #{$selector} {
 892     position: absolute;
 893     width: 100%;
 894     height: 100%;
 895     top: 0;
 896     @content;
 897   }
 898 }
 899
 900 @mixin sub-menu-h1 {
 901   ::ng-deep h1 {
 902     font-size: 1.3rem;
 903     border-bottom: 2px solid $grey-background-color;
 904     padding-bottom: 15px;
 905     margin-bottom: $sub-menu-margin-bottom;
 906
 907     my-global-icon {
 908       margin-right: 10px;
 909       vertical-align: bottom;
 910       width: 24px;
 911       height: 24px;
 912     }
 913
 914     .badge {
 915       margin-left: 7px;
 916     }
 917   }
 918 }
 919
 920 @mixin play-icon ($width, $height) {
 921   width: 0;
 922   height: 0;
 923
 924   position: absolute;
 925   left: 50%;
 926   top: 50%;
 927   transform: translate(-50%, -50%) scale(0.5);
 928
 929   border-top: ($height / 2) solid transparent;
 930   border-bottom: ($height / 2) solid transparent;
 931
 932   border-left: $width solid rgba(255, 255, 255, 0.95);
 933 }