@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
1 lines • 3.07 kB
Source Map (JSON)
{"version":3,"sources":["webpack://./src/components/ui/hole-background.module.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,4DAA4D;EAC5D,WAAW;EACX,YAAY;EACZ,cAAc;EACd,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,qCAAqC;AACvC;;AAEA;EACE,4DAA4D;AAC9D;;AAFA;EAKE,4DAA4D;AAC9D;;AADA;EAIE,WAAW;EACX,uBAAuB;EACvB,UAAU;EACV,+DAA+D;EAC/D,QAAQ;EACR,SAAS;EACT,qCAAqC;AACvC;;AAGA;EAAE,WAAW;EACX,YAAY;EACZ,cAAc;EACd,kBAAkB;AACpB;;AAJA;EAOE,WAAW;EACX,QAAQ;AACV;;AAAA;EAGE,WAAW;AACb;;AACA;EAEE,kBAAkB;EAClB,2BAA2B;EAC3B,YAAY;EACZ,UAAU;EACV,oJAAoJ;EACpJ,kCAAkC;EAClC,iCAAiC;EACjC,UAAU;EACV,YAAY;EACZ,kBAAkB;EAClB,WAAW;EACX,SAAS;EACT,kCAAkC;AACpC;;AAGA;EAAE,4BAA4B;EAC5B,iIAAiI;AACnI;;AAIA;EADE,uBAAuB;EACvB,WAAW;EACX,UAAU;EACV,mEAAmE;EACnE,kBAAkB;EAClB,QAAQ;AACV","sourcesContent":[".root {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.root::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n display: block;\r\n width: 140%;\r\n height: 140%;\r\n transform: translate3d(-50%, -50%, 0);\r\n background: radial-gradient(ellipse at 50% 55%, transparent 10%, white 50%);\r\n}\r\n\r\n:global(.dark) .root::before,\r\n:global([data-theme=\"dark\"]) .root::before {\r\n background: radial-gradient(ellipse at 50% 55%, transparent 10%, black 50%);\r\n}\r\n\r\n.root::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n z-index: 5;\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n transform: translate3d(-50%, -50%, 0);\r\n mix-blend-mode: overlay;\r\n background: radial-gradient(ellipse at 50% 75%, #a900ff 20%, transparent 75%);\r\n}\r\n\r\n.canvas {\r\n position: absolute;\r\n inset: 0;\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.1;\r\n}\r\n\r\n:global(.dark) .canvas,\r\n:global([data-theme=\"dark\"]) .canvas {\r\n opacity: 0.2;\r\n}\r\n\r\n.glow {\r\n position: absolute;\r\n top: -71.5%;\r\n left: 50%;\r\n z-index: 3;\r\n width: 30%;\r\n height: 140%;\r\n transform: translate3d(-50%, 0, 0);\r\n border-bottom-left-radius: 9999px;\r\n border-bottom-right-radius: 9999px;\r\n background: linear-gradient(20deg, #00f8f1, rgb(255 189 30 / 0.25) 16.5%, #fe848f 33%, rgb(254 132 143 / 0.25) 49.5%, #00f8f1 66%, rgb(0 248 241 / 0.5) 85.5%, #ffbd1e 100%);\r\n background-position: 0% 100%;\r\n background-size: 100% 200%;\r\n opacity: 0.75;\r\n mix-blend-mode: plus-darker;\r\n filter: blur(48px);\r\n}\r\n\r\n:global(.dark) .glow,\r\n:global([data-theme=\"dark\"]) .glow {\r\n background: linear-gradient(20deg, #00f8f1, rgb(255 189 30 / 0.125) 16.5%, #fe848f 33%, rgb(254 132 143 / 0.125) 49.5%, #00f8f1 66%, rgb(0 248 241 / 0.375) 85.5%, #ffbd1e 100%);\r\n mix-blend-mode: plus-lighter;\r\n}\r\n\r\n.scanlines {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 7;\r\n opacity: 0.5;\r\n mix-blend-mode: overlay;\r\n background: repeating-linear-gradient(transparent, transparent 1px, white 1px, white 2px);\r\n}\r\n"],"sourceRoot":""}