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