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