@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
2 lines (1 loc) • 11.8 kB
CSS
.Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu{border-radius:var(--brand-borderRadius-medium);background-color:var(--base-color-scale-black-0);flex-direction:column;width:100%;display:flex;overflow:hidden}.Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ{flex:1;height:100%;position:relative}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu{border:var(--brand-borderWidth-thin) solid ButtonBorder}}.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9{--brand-VideoPlayer-controls-min-height:56px;width:100%;max-height:calc(100vh - 56px);max-height:calc(100vh - var(--brand-VideoPlayer-controls-min-height));margin:0 auto;display:block}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--fullscreen___MChxa .Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9{height:100%;position:absolute}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2{z-index:1;background:#0003;border:none;width:100%;height:100%;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2 svg{top:calc(var(--brand-VideoPlayer-controls-min-height) / 2);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay--transparent___0UmfX{background:0 0}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2:focus-visible{outline:var(--brand-borderWidth-thicker) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY{width:25%;height:25%;max-width:var(--brand-VideoPlayer-playButton-width);max-height:var(--brand-VideoPlayer-playButton-height);opacity:.8;color:var(--brand-videoPlayer-playButton-fgColor-rest)}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY{color:highlight;opacity:1}}.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_{transition:var(--brand-VideoPlayer-transition);z-index:2;width:100%;padding:var(--base-size-16);color:var(--brand-videoPlayer-title-fgColor);grid-gap:var(--base-size-12);background:var(--brand-videoPlayer-title-bgColor);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);grid-template-columns:auto auto;justify-content:flex-start;align-items:center;display:grid;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_.Primer_Brand__VideoPlayer-module__VideoPlayer__title--hidden___t7cGG{opacity:0;visibility:hidden}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_{color:canvastext;background:canvas}}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd{min-height:var(--brand-VideoPlayer-controls-min-height);grid-gap:var(--base-size-16);justify-content:space-between;align-items:center;gap:var(--base-size-16);border-bottom-right-radius:var(--brand-borderRadius-medium);border-bottom-left-radius:var(--brand-borderRadius-medium);width:100%;padding:var(--base-size-12) var(--base-size-16);pointer-events:all;opacity:1;grid-template-columns:1fr;grid-auto-flow:column;display:grid}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo,.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds{align-items:center;gap:var(--base-size-16);display:flex}@media (width<=34rem){.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd{gap:var(--base-size-12);grid-template-rows:auto auto;grid-template-columns:1fr;grid-auto-flow:row}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds{justify-self:space-evenly;justify-content:space-evenly;width:100%}}.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO:focus,.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO:focus-within{bottom:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5{cursor:pointer;width:auto;height:var(--base-size-24);box-sizing:content-box;background:0 0;border:none;padding:0;position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-6);opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4):focus-visible{border-radius:var(--brand-borderRadius-small)}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5 svg{color:var(--brand-videoPlayer-controls-fgColor)}.Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI{align-items:center;gap:var(--base-size-16);flex:1;display:flex}.Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX{color:var(--brand-videoPlayer-controls-fgColor)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC{display:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto{height:var(--base-size-6);flex:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4{border-radius:var(--brand-borderRadius-medium);padding:.125rem var(--base-size-4);border:.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);background:var(--brand-videoPlayer-closedCaption-bgColor-enabled);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6{background-color:#0000}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:var(--brand-videoPlayer-closedCaption-fgColor-enabled);line-height:25px}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6 .Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:var(--brand-videoPlayer-closedCaption-fgColor-disabled)}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5 svg{color:buttontext}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:focus-visible{outline-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:focus-visible{outline:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6){background:highlight;border-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6) .Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:highlighttext;background-color:highlight}}.Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en{width:100%;min-width:var(--brand-VideoPlayer-range-minWidth);height:var(--brand-VideoPlayer-range-height);background-color:var(--brand-videoPlayer-range-bgColor-default);border-radius:var(--brand-VideoPlayer-range-borderRadius);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ{appearance:none;z-index:1;width:100%;height:var(--brand-VideoPlayer-range-height);cursor:pointer;opacity:0;background:0 0;margin:0;display:block;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-8);border-radius:var(--brand-borderRadius-small);opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ{opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ::-moz-range-track{background:0 0;border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ::-webkit-slider-runnable-track{background:0 0;border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr{appearance:none;border-radius:var(--brand-VideoPlayer-range-borderRadius);width:100%;height:var(--brand-VideoPlayer-range-height);border:0;position:absolute;top:0;left:0;overflow:hidden}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-bar{background-color:var(--brand-videoPlayer-range-bgColor-default)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-value{background-color:var(--brand-videoPlayer-range-bgColor-progress)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-moz-progress-bar{background:var(--brand-videoPlayer-range-bgColor-progress)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-lower{background-color:var(--brand-videoPlayer-range-bgColor-progress);border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-upper{background-color:var(--brand-videoPlayer-range-bgColor-default);border:none}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-bar{background-color:fieldtext}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-value{background-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-moz-progress-bar{background:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-lower{background-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-upper{background-color:fieldtext}}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV{z-index:2;width:var(--base-size-8);height:var(--base-size-8);margin-bottom:var(--base-size-16);opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%,50%)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV:before{bottom:calc(var(--base-size-4) * -1);width:var(--base-size-12);height:var(--base-size-12);content:"";background:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-small);position:absolute;left:0;transform:rotate(45deg)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO{z-index:-1;box-shadow:0 var(--base-size-4) var(--base-size-4) #1b1f2433;padding:var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);border-radius:var(--brand-borderRadius-medium);background:#fff;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc{color:var(--base-color-scale-gray-9)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip-visible___nqoFm{opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg{color:var(--base-color-scale-white-0)}.Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol{white-space:nowrap}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_ span{font-weight:var(--brand-text-weight-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300);letter-spacing:var(--brand-text-letterSpacing-300)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_ svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO{position:initial;position:static}@media (prefers-reduced-motion:reduce){.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9:before,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9:after,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9 *{scroll-behavior:auto;transition:none;animation:none}}