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