bereact-ui/dist/style.css

Bibliothèque de composants React open-source

.socialButton{display:flex;justify-content:center;align-items:center}.socialButton p{margin-left:5px;color:#00f}.socialButtonSmall{display:flex;justify-content:center;align-items:center}.socialButtonSmall p{color:#00f}.cursorPointer:hover{cursor:pointer}.pulse:hover{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #000000b3}70%{transform:scale(1);box-shadow:0 0 0 10px #0000}to{transform:scale(.95);box-shadow:0 0 #0000}}.grow:hover{transform:scale(1.25)}.growT{transition:.75s ease-in-out}.growT:hover{transform:scale(1.25)}.neon{--x: 0deg;--c: #0000;--color: #0ff;--toogleColor:#545153;--borderColor:#545153;--size:3em;font-size:3rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;aspect-ratio:2;border-radius:100em;background:linear-gradient(to bottom right,#0001,#0000),#444143;width:var(--size);box-shadow:inset 0 0 .25em -.25em #0008,inset .05em .05em .2em #000811,inset -.05em -.05em .15em .05em #ccc1,0 0 0 .11em var(--borderColor);transition:--x .5s,--c .5s,box-shadow .5s;filter:drop-shadow(0 0 .2em var(--c))}.neon:before{content:"";position:absolute;height:80%;aspect-ratio:1;top:50%;left:25%;transform:translate(-50%,-50%);background:radial-gradient(rgba(0,0,0,0) 15%,#343133 16%,var(--toogleColor) 20%),repeating-linear-gradient(#0000 0,#0000 10%,#0002 0,#0002 20%) 50% 50%/25% 25% no-repeat,repeating-linear-gradient(90deg,#0000 0,#0000 10%,#0002 0,#0002 20%) 50% 50%/25% 25% no-repeat,radial-gradient(var(--c) 17%,rgba(0,0,0,0) 0),#545153;box-shadow:inset -.05em -.05em .1em #0008,inset .05em .05em .1em #fff2,inset .05em 0 .1em -.065em var(--c),.1em .1em .15em #000c;border-radius:50%;transition:left .5s,box-shadow .1s}.neon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + .25em);height:calc(100% + .25em);border:.1em solid var(--color);border-radius:100em;-webkit-mask:conic-gradient(from calc(270deg - var(--x)),#000 calc(2 * var(--x)),rgba(0,0,0,.0666666667) 0);box-shadow:0 0 0 2em #0000}.neon:hover{--c: rgb(from var(--color) r g b / 25%);box-shadow:inset 0 0 .25em -.25em #0008,inset .05em .05em .2em #000811,inset -.05em -.05em .15em .05em #ccc1,0 0 .05em .075em var(--borderColor)}.neon:checked{--x: 180deg;--c: var(--color);box-shadow:inset 0 0 .25em -.25em #0008,inset .05em .05em .2em #000811,inset -.05em -.05em .15em .05em #ccc1,0 0 .1em .05em #545153}.neon:checked:before{left:75%;box-shadow:inset -.05em -.05em .1em #0008,inset .05em .05em .1em #fff2,inset -.05em 0 .1em -.035em var(--c),.1em .1em .15em #000c}.neon[disabled]{opacity:.25}@media print{.neon{background:none}.neon,.neon:before,.neon:after{-webkit-print-color-adjust:exact;print-color-adjust:exact}}@media (prefers-reduced-motion){.neon,.neon:before,.neon:after{transition:none!important;animation:none!important}}.bereact_ui_wavy{font-family:Consolas}.bereact_ui_wavy span{--delay:.1s;--jumpHeight: -10px;--animationTime: 1s;position:relative;display:inline-block;color:#fff;font-size:1em;text-transform:uppercase;animation:animate calc(var(--animationTime)) ease-in-out infinite;animation-delay:calc(var(--delay) * var(--i))}@keyframes animate{0%{transform:translateY(0)}20%{transform:translateY(var(--jumpHeight))}40%,to{transform:translateY(0)}}.bereact_ui_holoCard{box-sizing:border-box;position:relative;display:inline-block;height:fit-content;--step: 5%;--pattern: var(--patternPath) center / 75%;--rainbow: repeating-linear-gradient( 0deg, rgb(255, 119, 115) calc(var(--step) * 1), rgba(255, 237, 95, 1) calc(var(--step) * 2), rgba(168, 255, 95, 1) calc(var(--step) * 3), rgba(131, 255, 247, 1) calc(var(--step) * 4), rgba(120, 148, 255, 1) calc(var(--step) * 5), rgb(216, 117, 255) calc(var(--step) * 6), rgb(255, 119, 115) calc(var(--step) * 7) ) 0% var(--bg-y) / 200% 700%;--diagonal: repeating-linear-gradient( 128deg, #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 10%, 60%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12% ) var(--bg-x) var(--bg-y) / 300%;--shade: radial-gradient( farthest-corner circle at var(--x) var(--y), rgba(255, 255, 255, .1) 12%, rgba(255, 255, 255, .15) 20%, rgba(255, 255, 255, .25) 120% ) var(--bg-x) var(--bg-y) / 300%}.bereact_ui_holoCard .card__wrapper{perspective:600px;position:relative;width:100%;height:auto;top:0;right:0;bottom:0;left:0}.bereact_ui_holoCard .card__wrapper .card__3d{transform:rotateY(var(--r-x)) rotateX(var(--r-y));position:relative;top:0;right:0;bottom:0;left:0;clip-path:inset(0 0 0 0 round 48px);width:inherit;height:auto}.bereact_ui_holoCard .card__wrapper .card__3d .card__content{height:auto;width:100%;display:flex;justify-content:center;align-items:center}.bereact_ui_holoCard .card__wrapper .card__3d .card__content img{height:auto;width:100%;object-fit:contain;object-position:center}.bereact_ui_holoCard .card__wrapper .card__3d .card__layer2{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;mix-blend-mode:color-dodge;will-change:background;transition-property:opacity;clip-path:inset(0 0 1px 0 round 48px);background-blend-mode:hue,hue,soft-light,overlay;background:var(--pattern),var(--rainbow),var(--diagonal)}.bereact_ui_holoCard .card__wrapper .card__3d .card__layer2:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--pattern),var(--rainbow),var(--diagonal),var(--shade);mix-blend-mode:exclusion;background-size:75%,200% 400%,800%,200%;background-position:center,0 var(--bg-y),calc(var(--bg-x) * -1) calc(var(--bg-y) * -1),var(--bg-x) var(--bg-y);background-blend-mode:soft-light,hue,hard-light}