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