@flux-ui/components 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component/FluxBreadcrumb.vue.d.ts +15 -0
- package/dist/component/FluxBreadcrumbItem.vue.d.ts +23 -0
- package/dist/component/{FluxCheckbox.vue.d.ts → FluxFormCheckbox.vue.d.ts} +3 -0
- package/dist/component/FluxFormCheckboxGroup.vue.d.ts +26 -0
- package/dist/component/FluxFormField.vue.d.ts +1 -0
- package/dist/component/FluxFormNumberInput.vue.d.ts +26 -0
- package/dist/component/FluxFormRadio.vue.d.ts +18 -0
- package/dist/component/FluxFormRadioGroup.vue.d.ts +27 -0
- package/dist/component/FluxSkeleton.vue.d.ts +9 -0
- package/dist/component/index.d.ts +8 -1
- package/dist/composable/index.d.ts +2 -0
- package/dist/composable/useFormCheckboxGroupInjection.d.ts +2 -0
- package/dist/composable/useFormFieldInjection.d.ts +3 -2
- package/dist/composable/useFormRadioGroupInjection.d.ts +2 -0
- package/dist/data/di.d.ts +23 -0
- package/dist/index.css +1373 -1012
- package/dist/index.js +849 -355
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/component/FluxBreadcrumb.vue +24 -0
- package/src/component/FluxBreadcrumbItem.vue +72 -0
- package/src/component/FluxDataTable.vue +3 -3
- package/src/component/FluxFormCheckbox.vue +123 -0
- package/src/component/FluxFormCheckboxGroup.vue +57 -0
- package/src/component/FluxFormField.vue +23 -7
- package/src/component/FluxFormNumberInput.vue +180 -0
- package/src/component/FluxFormPinInput.vue +2 -2
- package/src/component/FluxFormRadio.vue +76 -0
- package/src/component/FluxFormRadioGroup.vue +53 -0
- package/src/component/FluxQuantitySelector.vue +4 -4
- package/src/component/FluxSkeleton.vue +46 -0
- package/src/component/FluxToggle.vue +4 -4
- package/src/component/index.ts +8 -1
- package/src/composable/index.ts +2 -0
- package/src/composable/useFormCheckboxGroupInjection.ts +6 -0
- package/src/composable/useFormFieldInjection.ts +7 -3
- package/src/composable/useFormRadioGroupInjection.ts +13 -0
- package/src/css/component/BorderBeam.module.scss +51 -22
- package/src/css/component/Breadcrumb.module.scss +86 -0
- package/src/css/component/Form.module.scss +251 -45
- package/src/css/component/SegmentedControl.module.scss +18 -18
- package/src/css/component/Skeleton.module.scss +67 -0
- package/src/data/di.ts +30 -0
- package/src/component/FluxCheckbox.vue +0 -87
package/dist/index.css
CHANGED
|
@@ -2200,18 +2200,26 @@
|
|
|
2200
2200
|
--beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent);
|
|
2201
2201
|
--beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(50, 200, 80), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(30, 185, 170), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 120, 40), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(100, 70, 255), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(240, 50, 180), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(180, 40, 240), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(40, 140, 255), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 50, 100), transparent);
|
|
2202
2202
|
--beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(50, 200, 80, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(30, 185, 170, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 120, 40, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(100, 70, 255, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(240, 50, 180, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(180, 40, 240, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(40, 140, 255, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 50, 100, 0.3), transparent);
|
|
2203
|
-
--beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(30, 185, 170), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(255, 120, 40), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(240, 50, 180), transparent);
|
|
2204
|
-
--beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 50, 100, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(50, 200, 80, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(30, 185, 170, 0.52), transparent);
|
|
2205
|
-
--beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 30, 60), rgba(200, 30, 60, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(20, 150, 140), rgba(20, 150, 140, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(80, 50, 200), rgba(80, 50, 200, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(210, 130, 0, 0.7), rgba(210, 130, 0, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 160, 70), rgba(30, 160, 70, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(160, 30, 190), rgba(160, 30, 190, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(30, 100, 200), rgba(30, 100, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2206
2203
|
--beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 50, 100, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(40, 140, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(50, 200, 80, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(30, 185, 170, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(100, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(40, 140, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 120, 40, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(240, 50, 180, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(180, 40, 240, var(--beam-bop-tr)), transparent);
|
|
2207
2204
|
--beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 50, 100, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(40, 140, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(50, 200, 80, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(30, 185, 170, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(100, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(40, 140, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 120, 40, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(240, 50, 180, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(180, 40, 240, var(--beam-bop-tr)), transparent);
|
|
2208
2205
|
--beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(255, 50, 100, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(40, 140, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(50, 200, 80, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(100, 70, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(40, 140, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(255, 120, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(180, 40, 240, var(--beam-pulse-frozen)), transparent);
|
|
2209
2206
|
--beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 50, 100, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(255, 120, 40, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(240, 50, 180, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(180, 40, 240, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(100, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(40, 140, 255, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(50, 200, 80, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(30, 185, 170, var(--beam-bop-tl)), transparent);
|
|
2210
2207
|
--beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(255, 50, 100, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(255, 120, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(240, 50, 180, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(180, 40, 240, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(100, 70, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(40, 140, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(50, 200, 80, var(--beam-pulse-frozen)), transparent);
|
|
2211
2208
|
}
|
|
2212
|
-
|
|
2213
|
-
--beam-
|
|
2214
|
-
|
|
2209
|
+
.colorful.line::after {
|
|
2210
|
+
background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(30, 185, 170), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(255, 120, 40), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(240, 50, 180), transparent);
|
|
2211
|
+
}
|
|
2212
|
+
.colorful.line::before {
|
|
2213
|
+
background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 50, 100, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(50, 200, 80, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(100, 70, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(240, 50, 180, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(30, 185, 170, 0.52), transparent);
|
|
2214
|
+
}
|
|
2215
|
+
.colorful.line > .bloom {
|
|
2216
|
+
background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 30, 60), rgba(200, 30, 60, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(20, 150, 140), rgba(20, 150, 140, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(80, 50, 200), rgba(80, 50, 200, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(210, 130, 0, 0.7), rgba(210, 130, 0, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 160, 70), rgba(30, 160, 70, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(160, 30, 190), rgba(160, 30, 190, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(30, 100, 200), rgba(30, 100, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2217
|
+
}
|
|
2218
|
+
[dark] .colorful.line::after {
|
|
2219
|
+
background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 50, 100), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(40, 180, 220), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(50, 200, 80), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(180, 40, 240), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 160, 30), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(100, 70, 255), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(40, 140, 255), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(240, 50, 180), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(30, 185, 170), transparent);
|
|
2220
|
+
}
|
|
2221
|
+
[dark] .colorful.line > .bloom {
|
|
2222
|
+
background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 60, 80), rgb(255, 60, 80) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(40, 190, 180, 0.98), rgba(40, 190, 180, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 70, 255), rgb(100, 70, 255) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 170, 40, 0.59), rgba(255, 170, 40, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(50, 200, 100), rgb(50, 200, 100) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(200, 50, 240, 0.91), rgba(200, 50, 240, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(40, 140, 255), rgb(40, 140, 255) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
|
|
2215
2223
|
}
|
|
2216
2224
|
|
|
2217
2225
|
.mono {
|
|
@@ -2219,18 +2227,26 @@
|
|
|
2219
2227
|
--beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(180, 180, 180, 0.225), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(140, 140, 140, 0.225), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(160, 160, 160, 0.225), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(130, 130, 130, 0.225), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(170, 170, 170, 0.225), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(150, 150, 150, 0.225), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(190, 190, 190, 0.225), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(145, 145, 145, 0.225), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(165, 165, 165, 0.225), transparent);
|
|
2220
2228
|
--beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(160, 160, 160), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(140, 140, 140), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(180, 180, 180), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(150, 150, 150), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(170, 170, 170), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(155, 155, 155), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(145, 145, 145), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(165, 165, 165), transparent);
|
|
2221
2229
|
--beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(160, 160, 160, 0.25), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(140, 140, 140, 0.22), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(180, 180, 180, 0.17), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(150, 150, 150, 0.17), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(170, 170, 170, 0.15), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(155, 155, 155, 0.2), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(145, 145, 145, 0.15), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(165, 165, 165, 0.15), transparent);
|
|
2222
|
-
--beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 100, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(80, 80, 80), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(90, 90, 90), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(70, 70, 70), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(85, 85, 85), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(95, 95, 95), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(75, 75, 75), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(105, 105, 105), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(65, 65, 65), transparent);
|
|
2223
|
-
--beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(200, 200, 200, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(170, 170, 170, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(155, 155, 155, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(185, 185, 185, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(165, 165, 165, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(180, 180, 180, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(160, 160, 160, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(175, 175, 175, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(190, 190, 190, 0.52), transparent);
|
|
2224
|
-
--beam-line-bloom: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.11) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(120, 120, 120, 0.12), rgba(120, 120, 120, 0.09) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.08) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(100, 100, 100, 0.1), rgba(100, 100, 100, 0.05) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(70, 70, 70, 0.14), rgba(70, 70, 70, 0.08) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 90, 90, 0.14), rgba(90, 90, 90, 0.07) 48%, transparent 94%), radial-gradient(ellipse calc(10px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(85, 85, 85, 0.14), rgba(85, 85, 85, 0.08) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2225
2230
|
--beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(180, 180, 180, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(140, 140, 140, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(160, 160, 160, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(130, 130, 130, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(170, 170, 170, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(150, 150, 150, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(190, 190, 190, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(145, 145, 145, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(165, 165, 165, var(--beam-bop-tr)), transparent);
|
|
2226
2231
|
--beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(180, 180, 180, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(140, 140, 140, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(160, 160, 160, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(130, 130, 130, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(170, 170, 170, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(150, 150, 150, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(190, 190, 190, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(145, 145, 145, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(165, 165, 165, var(--beam-bop-tr)), transparent);
|
|
2227
2232
|
--beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(180, 180, 180, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(140, 140, 140, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(160, 160, 160, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(170, 170, 170, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(150, 150, 150, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(190, 190, 190, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(165, 165, 165, var(--beam-pulse-frozen)), transparent);
|
|
2228
2233
|
--beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(180, 180, 180, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(190, 190, 190, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(145, 145, 145, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(165, 165, 165, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(170, 170, 170, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(140, 140, 140, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(160, 160, 160, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(130, 130, 130, var(--beam-bop-tl)), transparent);
|
|
2229
2234
|
--beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(180, 180, 180, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(190, 190, 190, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(145, 145, 145, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(165, 165, 165, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(170, 170, 170, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(140, 140, 140, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(160, 160, 160, var(--beam-pulse-frozen)), transparent);
|
|
2230
2235
|
}
|
|
2231
|
-
|
|
2232
|
-
--beam-
|
|
2233
|
-
|
|
2236
|
+
.mono.line::after {
|
|
2237
|
+
background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 100, 100), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(80, 80, 80), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(90, 90, 90), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(70, 70, 70), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(85, 85, 85), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(95, 95, 95), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(75, 75, 75), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(105, 105, 105), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(65, 65, 65), transparent);
|
|
2238
|
+
}
|
|
2239
|
+
.mono.line::before {
|
|
2240
|
+
background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(200, 200, 200, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(170, 170, 170, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(155, 155, 155, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(185, 185, 185, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(165, 165, 165, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(180, 180, 180, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(160, 160, 160, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(175, 175, 175, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(190, 190, 190, 0.52), transparent);
|
|
2241
|
+
}
|
|
2242
|
+
.mono.line > .bloom {
|
|
2243
|
+
background: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.11) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(120, 120, 120, 0.12), rgba(120, 120, 120, 0.09) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(80, 80, 80, 0.14), rgba(80, 80, 80, 0.08) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(100, 100, 100, 0.1), rgba(100, 100, 100, 0.05) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(70, 70, 70, 0.14), rgba(70, 70, 70, 0.08) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 90, 90, 0.14), rgba(90, 90, 90, 0.07) 48%, transparent 94%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(85, 85, 85, 0.14), rgba(85, 85, 85, 0.08) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2244
|
+
}
|
|
2245
|
+
[dark] .mono.line::after {
|
|
2246
|
+
background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(200, 200, 200), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(170, 170, 170), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(155, 155, 155), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(185, 185, 185), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(165, 165, 165), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(180, 180, 180), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(160, 160, 160), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(175, 175, 175), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(190, 190, 190), transparent);
|
|
2247
|
+
}
|
|
2248
|
+
[dark] .mono.line > .bloom {
|
|
2249
|
+
background: radial-gradient(ellipse calc(12px * var(--beam-spike)) calc(42px * var(--beam-h)) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.14), rgba(200, 200, 200, 0.09) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.12), rgba(170, 170, 170, 0.06) 50%, transparent 95%), radial-gradient(ellipse calc(14px * (2 - var(--beam-spike))) calc(38px * var(--beam-h)) at 36% calc(100% - 3px), rgba(200, 200, 200, 0.14), rgba(200, 200, 200, 0.1) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.08), rgba(180, 180, 180, 0.03) 55%, transparent 96%), radial-gradient(ellipse calc(12px * (2 - var(--beam-spike2))) calc(40px * var(--beam-h)) at 64% calc(100% - 4px), rgba(190, 190, 190, 0.14), rgba(190, 190, 190, 0.1) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(170, 170, 170, 0.13), rgba(170, 170, 170, 0.04) 48%, transparent 94%), radial-gradient(ellipse calc(10px * (2 - var(--beam-spike))) calc(32px * var(--beam-h)) at 92% calc(100% - 3px), rgba(185, 185, 185, 0.14), rgba(185, 185, 185, 0.1) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.45) 20%, rgba(255, 255, 255, 0.25) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.015) 55%, transparent 80%);
|
|
2234
2250
|
}
|
|
2235
2251
|
|
|
2236
2252
|
.ocean {
|
|
@@ -2238,18 +2254,26 @@
|
|
|
2238
2254
|
--beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(100, 80, 220, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(60, 120, 255, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(80, 100, 200, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(50, 140, 220, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(70, 130, 255, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(140, 100, 240, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(90, 110, 230, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(130, 70, 255, 0.45), transparent);
|
|
2239
2255
|
--beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(60, 140, 200), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(50, 120, 180), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(100, 80, 220), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(80, 100, 255), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(120, 70, 240), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(90, 80, 220), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(70, 110, 255), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(110, 90, 230), transparent);
|
|
2240
2256
|
--beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(60, 140, 200, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(50, 120, 180, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(100, 80, 220, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(80, 100, 255, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(120, 70, 240, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(90, 80, 220, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(70, 110, 255, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(110, 90, 230, 0.3), transparent);
|
|
2241
|
-
--beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(80, 60, 200), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(50, 100, 220), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(70, 90, 190), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(110, 60, 220), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(60, 110, 230), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 240), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(80, 100, 210), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(90, 80, 225), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(120, 90, 245), transparent);
|
|
2242
|
-
--beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(100, 80, 220, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(60, 120, 255, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(80, 100, 200, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(130, 70, 255, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(70, 130, 255, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(90, 110, 230, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(110, 90, 240, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(140, 100, 255, 0.52), transparent);
|
|
2243
|
-
--beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(60, 60, 180), rgba(60, 60, 180, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(80, 100, 200), rgba(80, 100, 200, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(50, 40, 180), rgba(50, 40, 180, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(40, 80, 200, 0.7), rgba(40, 80, 200, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 50, 190), rgba(30, 50, 190, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(60, 90, 180), rgba(60, 90, 180, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(70, 60, 200), rgba(70, 60, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2244
2257
|
--beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(100, 80, 220, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(60, 120, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(80, 100, 200, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(50, 140, 220, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(120, 80, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(70, 130, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(140, 100, 240, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(90, 110, 230, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(130, 70, 255, var(--beam-bop-tr)), transparent);
|
|
2245
2258
|
--beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(100, 80, 220, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(60, 120, 255, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(80, 100, 200, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(50, 140, 220, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(120, 80, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(70, 130, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(140, 100, 240, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(90, 110, 230, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(130, 70, 255, var(--beam-bop-tr)), transparent);
|
|
2246
2259
|
--beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(100, 80, 220, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(60, 120, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(80, 100, 200, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(120, 80, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(70, 130, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(140, 100, 240, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(130, 70, 255, var(--beam-pulse-frozen)), transparent);
|
|
2247
2260
|
--beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(100, 80, 220, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(140, 100, 240, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(90, 110, 230, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(130, 70, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(120, 80, 255, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(60, 120, 255, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(80, 100, 200, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(50, 140, 220, var(--beam-bop-tl)), transparent);
|
|
2248
2261
|
--beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(100, 80, 220, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(140, 100, 240, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(90, 110, 230, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(130, 70, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(120, 80, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(60, 120, 255, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(80, 100, 200, var(--beam-pulse-frozen)), transparent);
|
|
2249
2262
|
}
|
|
2250
|
-
|
|
2251
|
-
--beam-
|
|
2252
|
-
|
|
2263
|
+
.ocean.line::after {
|
|
2264
|
+
background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(80, 60, 200), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(50, 100, 220), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(70, 90, 190), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(110, 60, 220), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(60, 110, 230), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(100, 70, 240), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(80, 100, 210), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(90, 80, 225), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(120, 90, 245), transparent);
|
|
2265
|
+
}
|
|
2266
|
+
.ocean.line::before {
|
|
2267
|
+
background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(100, 80, 220, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(60, 120, 255, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(80, 100, 200, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(130, 70, 255, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(70, 130, 255, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(120, 80, 255, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(90, 110, 230, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(110, 90, 240, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(140, 100, 255, 0.52), transparent);
|
|
2268
|
+
}
|
|
2269
|
+
.ocean.line > .bloom {
|
|
2270
|
+
background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(60, 60, 180), rgba(60, 60, 180, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(80, 100, 200), rgba(80, 100, 200, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(50, 40, 180), rgba(50, 40, 180, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(40, 80, 200, 0.7), rgba(40, 80, 200, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(30, 50, 190), rgba(30, 50, 190, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(60, 90, 180), rgba(60, 90, 180, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(70, 60, 200), rgba(70, 60, 200, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2271
|
+
}
|
|
2272
|
+
[dark] .ocean.line::after {
|
|
2273
|
+
background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(100, 80, 220), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(60, 120, 255), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(80, 100, 200), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(130, 70, 255), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(70, 130, 255), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(120, 80, 255), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(90, 110, 230), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(110, 90, 240), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(140, 100, 255), transparent);
|
|
2274
|
+
}
|
|
2275
|
+
[dark] .ocean.line > .bloom {
|
|
2276
|
+
background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(100, 120, 255), rgb(100, 120, 255) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(130, 100, 220, 0.98), rgba(130, 100, 220, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 80, 255), rgb(100, 80, 255) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(80, 130, 220, 0.59), rgba(80, 130, 220, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(60, 100, 255), rgb(60, 100, 255) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(90, 120, 200, 0.91), rgba(90, 120, 200, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(120, 90, 255), rgb(120, 90, 255) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
|
|
2253
2277
|
}
|
|
2254
2278
|
|
|
2255
2279
|
.sunset {
|
|
@@ -2257,18 +2281,26 @@
|
|
|
2257
2281
|
--beam-rotate-inner: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 80, 50, 0.45), transparent), radial-gradient(ellipse 54px 32px at 12% -5%, rgba(255, 160, 40, 0.45), transparent), radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(255, 120, 60, 0.45), transparent), radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(255, 200, 50, 0.45), transparent), radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(255, 100, 80, 0.45), transparent), radial-gradient(ellipse 77px 23px at 55% 100%, rgba(255, 180, 60, 0.45), transparent), radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 60, 60, 0.45), transparent), radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(255, 140, 50, 0.45), transparent), radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(255, 90, 70, 0.45), transparent);
|
|
2258
2282
|
--beam-sm-blobs: radial-gradient(ellipse 9px 18px at 2% 68%, rgb(255, 180, 50), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgb(255, 150, 40), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 80, 60), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgb(255, 100, 80), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgb(255, 60, 80), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgb(255, 120, 60), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgb(255, 200, 50), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 90, 70), transparent);
|
|
2259
2283
|
--beam-sm-inner: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(255, 180, 50, 0.5), transparent), radial-gradient(ellipse 4px 8px at 2% 68%, rgba(255, 150, 40, 0.45), transparent), radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 80, 60, 0.35), transparent), radial-gradient(ellipse 42px 7px at 74% 100%, rgba(255, 100, 80, 0.35), transparent), radial-gradient(ellipse 10px 17px at 100% 27%, rgba(255, 60, 80, 0.3), transparent), radial-gradient(ellipse 10px 18px at 100% 27%, rgba(255, 120, 60, 0.4), transparent), radial-gradient(ellipse 5px 10px at 100% 27%, rgba(255, 200, 50, 0.3), transparent), radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 90, 70, 0.3), transparent);
|
|
2260
|
-
--beam-line-blobs: radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(220, 80, 40), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(230, 150, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(210, 110, 50), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(200, 60, 60), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(220, 170, 40), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(210, 100, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(230, 130, 60), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(190, 70, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(180, 50, 50), transparent);
|
|
2261
|
-
--beam-line-inner: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 100, 60, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(255, 180, 50, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(255, 140, 70, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(255, 80, 80, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 200, 60, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(255, 120, 50, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(255, 160, 80, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(255, 90, 60, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(255, 70, 70, 0.52), transparent);
|
|
2262
|
-
--beam-line-bloom: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 80, 40), rgba(200, 80, 40, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(220, 120, 30), rgba(220, 120, 30, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(200, 60, 30), rgba(200, 60, 30, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(220, 100, 20, 0.7), rgba(220, 100, 20, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(180, 40, 20), rgba(180, 40, 20, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(210, 80, 10), rgba(210, 80, 10, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(190, 70, 30), rgba(190, 70, 30, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2263
2284
|
--beam-pulse-ring: radial-gradient(ellipse calc(70px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 80, 50, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(255, 160, 40, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(40px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(70px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(255, 120, 60, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(20px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(255, 200, 50, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(180px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(255, 100, 80, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(85px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(26px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(255, 180, 60, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 60, 60, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(26px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(42px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(255, 140, 50, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(52px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(48px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(255, 90, 70, var(--beam-bop-tr)), transparent);
|
|
2264
2285
|
--beam-pulse-inner-ring: radial-gradient(ellipse calc(65px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(35px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(33% + var(--beam-bx1)) calc(-7.4% + var(--beam-by1)), rgba(255, 80, 50, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(55px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(12% + var(--beam-bx2)) calc(-5% + var(--beam-by2)), rgba(255, 160, 40, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(35px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(65px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx3)) calc(68.3% + var(--beam-by3)), rgba(255, 120, 60, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(30px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(2.1% + var(--beam-bx1)) calc(68.3% + var(--beam-by1)), rgba(255, 200, 50, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(173px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(74.4% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(255, 100, 80, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(80px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(22px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(55% + var(--beam-bx3)) calc(100% + var(--beam-by3)), rgba(255, 180, 60, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(69px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(28px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(93.9% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 60, 60, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(22px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx2)) calc(27.1% + var(--beam-by2)), rgba(255, 140, 50, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(47px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(27.1% + var(--beam-by3)), rgba(255, 90, 70, var(--beam-bop-tr)), transparent);
|
|
2265
2286
|
--beam-pulse-inner-bloom: radial-gradient(ellipse calc(84px * var(--beam-glow-sx, 1)) calc(48px * var(--beam-glow-sy, 1)) at 33% -7.4%, rgba(255, 80, 50, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(72px * var(--beam-glow-sx, 1)) calc(42px * var(--beam-glow-sy, 1)) at 12% -5%, rgba(255, 160, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(48px * var(--beam-glow-sx, 1)) calc(84px * var(--beam-glow-sy, 1)) at 2.1% 68.3%, rgba(255, 120, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(216px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 74.4% 100%, rgba(255, 100, 80, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(102px * var(--beam-glow-sx, 1)) calc(31px * var(--beam-glow-sy, 1)) at 55% 100%, rgba(255, 180, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(89px * var(--beam-glow-sx, 1)) calc(38px * var(--beam-glow-sy, 1)) at 93.9% 0%, rgba(255, 60, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(62px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 100% 27.1%, rgba(255, 90, 70, var(--beam-pulse-frozen)), transparent);
|
|
2266
2287
|
--beam-pulse-outer-core: radial-gradient(ellipse calc(80px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(19px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(27% + var(--beam-bx1)) calc(0% + var(--beam-by1)), rgba(255, 80, 50, var(--beam-bop-tl)), transparent), radial-gradient(ellipse calc(74px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(11px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(73% + var(--beam-bx2)) calc(-1% + var(--beam-by2)), rgba(255, 60, 60, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(15px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(44px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(100% + var(--beam-bx3)) calc(33% + var(--beam-by3)), rgba(255, 140, 50, var(--beam-bop-tr)), transparent), radial-gradient(ellipse calc(19px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(38px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(101% + var(--beam-bx1)) calc(72% + var(--beam-by1)), rgba(255, 90, 70, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(84px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(13px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(67% + var(--beam-bx2)) calc(100% + var(--beam-by2)), rgba(255, 100, 80, var(--beam-bop-br)), transparent), radial-gradient(ellipse calc(60px * var(--beam-bw3) * var(--beam-glow-sx, 1)) calc(21px * var(--beam-bh3) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(24% + var(--beam-bx3)) calc(101% + var(--beam-by3)), rgba(255, 160, 40, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(17px * var(--beam-bw1) * var(--beam-glow-sx, 1)) calc(40px * var(--beam-bh1) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(0% + var(--beam-bx1)) calc(60% + var(--beam-by1)), rgba(255, 120, 60, var(--beam-bop-bl)), transparent), radial-gradient(ellipse calc(13px * var(--beam-bw2) * var(--beam-glow-sx, 1)) calc(32px * var(--beam-bh2) * var(--beam-bgh) * var(--beam-glow-sy, 1)) at calc(-1% + var(--beam-bx2)) calc(28% + var(--beam-by2)), rgba(255, 200, 50, var(--beam-bop-tl)), transparent);
|
|
2267
2288
|
--beam-pulse-outer-bloom: radial-gradient(ellipse calc(110px * var(--beam-glow-sx, 1)) calc(30px * var(--beam-glow-sy, 1)) at 27% 3%, rgba(255, 80, 50, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(100px * var(--beam-glow-sx, 1)) calc(20px * var(--beam-glow-sy, 1)) at 73% 1%, rgba(255, 60, 60, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(26px * var(--beam-glow-sx, 1)) calc(62px * var(--beam-glow-sy, 1)) at 100% 33%, rgba(255, 140, 50, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(30px * var(--beam-glow-sx, 1)) calc(56px * var(--beam-glow-sy, 1)) at 101% 72%, rgba(255, 90, 70, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(120px * var(--beam-glow-sx, 1)) calc(22px * var(--beam-glow-sy, 1)) at 67% 99%, rgba(255, 100, 80, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(88px * var(--beam-glow-sx, 1)) calc(32px * var(--beam-glow-sy, 1)) at 24% 99%, rgba(255, 160, 40, var(--beam-pulse-frozen)), transparent), radial-gradient(ellipse calc(28px * var(--beam-glow-sx, 1)) calc(58px * var(--beam-glow-sy, 1)) at 0% 60%, rgba(255, 120, 60, var(--beam-pulse-frozen)), transparent);
|
|
2268
2289
|
}
|
|
2269
|
-
|
|
2270
|
-
--beam-
|
|
2271
|
-
|
|
2290
|
+
.sunset.line::after {
|
|
2291
|
+
background: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%), radial-gradient(ellipse calc(45px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(220, 80, 40), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 65px) calc(100% + 0px), rgb(230, 150, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 60px) calc(100% + 2px), rgb(210, 110, 50), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 90px) calc(100% + 0px), rgb(200, 60, 60), transparent), radial-gradient(ellipse calc(38px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 85px) calc(100% - 1px), rgb(220, 170, 40), transparent), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 35px) calc(100% + 1px), rgb(210, 100, 30), transparent), radial-gradient(ellipse calc(40px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 35px) calc(100% + 0px), rgb(230, 130, 60), transparent), radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 110px) calc(100% + 1px), rgb(190, 70, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 110px) calc(100% - 1px), rgb(180, 50, 50), transparent);
|
|
2292
|
+
}
|
|
2293
|
+
.sunset.line::before {
|
|
2294
|
+
background: radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 0px), rgba(255, 100, 60, 0.48), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(255, 180, 50, 0.42), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 0px), rgba(255, 140, 70, 0.48), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(255, 80, 80, 0.42), transparent), radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 200, 60, 0.5), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 0px), rgba(255, 120, 50, 0.45), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(255, 160, 80, 0.4), transparent), radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 0px), rgba(255, 90, 60, 0.45), transparent), radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(255, 70, 70, 0.52), transparent);
|
|
2295
|
+
}
|
|
2296
|
+
.sunset.line > .bloom {
|
|
2297
|
+
background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(200, 80, 40), rgba(200, 80, 40, 0.85) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgb(220, 120, 30), rgba(220, 120, 30, 0.7) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(200, 60, 30), rgba(200, 60, 30, 0.8) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(220, 100, 20, 0.7), rgba(220, 100, 20, 0.46) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(180, 40, 20), rgba(180, 40, 20, 0.82) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgb(210, 80, 10), rgba(210, 80, 10, 0.7) 48%, transparent 94%), radial-gradient(ellipse calc(1px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(190, 70, 30), rgba(190, 70, 30, 0.78) 42%, transparent 91%), radial-gradient(ellipse calc(50px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%);
|
|
2298
|
+
}
|
|
2299
|
+
[dark] .sunset.line::after {
|
|
2300
|
+
background: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100% + 0px) calc(100% + 2px), rgb(255, 100, 60), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% + 0px), rgb(255, 180, 50), transparent), radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(255, 140, 70), transparent), radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% + 0px), rgb(255, 80, 80), transparent), radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 200, 60), transparent), radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(255, 120, 50), transparent), radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% + 0px), rgb(255, 160, 80), transparent), radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(255, 90, 60), transparent), radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(255, 70, 70), transparent);
|
|
2301
|
+
}
|
|
2302
|
+
[dark] .sunset.line > .bloom {
|
|
2303
|
+
background: radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 140, 80), rgb(255, 140, 80) 30%, transparent 88%), radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(255, 100, 60, 0.98), rgba(255, 100, 60, 0.49) 50%, transparent 95%), radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(255, 100, 80), rgb(255, 100, 80) 40%, transparent 90%), radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 150, 80, 0.59), rgba(255, 150, 80, 0.29) 55%, transparent 96%), radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(255, 80, 60), rgb(255, 80, 60) 35%, transparent 89%), radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(255, 120, 50, 0.91), rgba(255, 120, 50, 0.45) 48%, transparent 94%), radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(255, 140, 70), rgb(255, 140, 70) 42%, transparent 91%), radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
|
|
2272
2304
|
}
|
|
2273
2305
|
|
|
2274
2306
|
/*
|
|
@@ -2278,13 +2310,6 @@
|
|
|
2278
2310
|
.md,
|
|
2279
2311
|
.sm {
|
|
2280
2312
|
overflow: hidden;
|
|
2281
|
-
--beam-rotate-highlight: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%);
|
|
2282
|
-
--beam-rotate-bloom: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%);
|
|
2283
|
-
}
|
|
2284
|
-
[dark] .md,
|
|
2285
|
-
[dark] .sm {
|
|
2286
|
-
--beam-rotate-highlight: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%);
|
|
2287
|
-
--beam-rotate-bloom: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%);
|
|
2288
2313
|
}
|
|
2289
2314
|
.md.is-active,
|
|
2290
2315
|
.sm.is-active {
|
|
@@ -2328,7 +2353,7 @@
|
|
|
2328
2353
|
z-index: 3;
|
|
2329
2354
|
inset: 0;
|
|
2330
2355
|
padding: 1px;
|
|
2331
|
-
background: var(--beam-
|
|
2356
|
+
background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%);
|
|
2332
2357
|
border-radius: calc(var(--beam-radius) - 1px);
|
|
2333
2358
|
opacity: 0;
|
|
2334
2359
|
filter: blur(8px) brightness(var(--beam-brightness)) saturate(var(--beam-saturation));
|
|
@@ -2336,6 +2361,10 @@
|
|
|
2336
2361
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
2337
2362
|
mask-composite: exclude;
|
|
2338
2363
|
}
|
|
2364
|
+
[dark] .md > .bloom,
|
|
2365
|
+
[dark] .sm > .bloom {
|
|
2366
|
+
background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%);
|
|
2367
|
+
}
|
|
2339
2368
|
.md.is-active > .bloom, .md.is-fading > .bloom,
|
|
2340
2369
|
.sm.is-active > .bloom,
|
|
2341
2370
|
.sm.is-fading > .bloom {
|
|
@@ -2359,10 +2388,13 @@
|
|
|
2359
2388
|
--beam-stroke-opacity: .26;
|
|
2360
2389
|
}
|
|
2361
2390
|
.md.is-active::after, .md.is-fading::after {
|
|
2362
|
-
background: var(--beam-
|
|
2391
|
+
background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%), var(--beam-rotate-blobs);
|
|
2363
2392
|
mask: conic-gradient(from var(--beam-angle), transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%, white 52%, white 80%, rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%, transparent 95%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
2364
2393
|
mask-composite: intersect, exclude;
|
|
2365
2394
|
}
|
|
2395
|
+
[dark] .md.is-active::after, [dark] .md.is-fading::after {
|
|
2396
|
+
background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%), var(--beam-rotate-blobs);
|
|
2397
|
+
}
|
|
2366
2398
|
.md.is-active::before, .md.is-fading::before {
|
|
2367
2399
|
background: var(--beam-rotate-inner);
|
|
2368
2400
|
border-radius: var(--beam-radius);
|
|
@@ -2387,10 +2419,13 @@
|
|
|
2387
2419
|
--beam-stroke-opacity: .46;
|
|
2388
2420
|
}
|
|
2389
2421
|
.sm.is-active::after, .sm.is-fading::after {
|
|
2390
|
-
background: var(--beam-
|
|
2422
|
+
background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%), var(--beam-sm-blobs);
|
|
2391
2423
|
mask: conic-gradient(from var(--beam-angle), transparent 0%, transparent 22%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%, white 46%, white 82%, rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%, transparent 97%, transparent 100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
2392
2424
|
mask-composite: intersect, exclude;
|
|
2393
2425
|
}
|
|
2426
|
+
[dark] .sm.is-active::after, [dark] .sm.is-fading::after {
|
|
2427
|
+
background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%), var(--beam-sm-blobs);
|
|
2428
|
+
}
|
|
2394
2429
|
.sm.is-active::before, .sm.is-fading::before {
|
|
2395
2430
|
background: var(--beam-sm-inner);
|
|
2396
2431
|
border-radius: var(--beam-radius);
|
|
@@ -2409,7 +2444,6 @@
|
|
|
2409
2444
|
--beam-brightness: 1.3;
|
|
2410
2445
|
--beam-inner-opacity: .32;
|
|
2411
2446
|
--beam-inner-shadow: rgba(0, 0, 0, .14);
|
|
2412
|
-
--beam-line-highlight: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%);
|
|
2413
2447
|
--beam-saturation: 1.95;
|
|
2414
2448
|
--beam-stroke-opacity: .16;
|
|
2415
2449
|
}
|
|
@@ -2417,7 +2451,6 @@
|
|
|
2417
2451
|
--beam-bloom-opacity: .8;
|
|
2418
2452
|
--beam-inner-opacity: .7;
|
|
2419
2453
|
--beam-inner-shadow: rgba(255, 255, 255, .1);
|
|
2420
|
-
--beam-line-highlight: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%);
|
|
2421
2454
|
--beam-saturation: 1.2;
|
|
2422
2455
|
--beam-stroke-opacity: 1.14;
|
|
2423
2456
|
}
|
|
@@ -2433,7 +2466,6 @@
|
|
|
2433
2466
|
inset: 0;
|
|
2434
2467
|
padding: 1px;
|
|
2435
2468
|
content: "";
|
|
2436
|
-
background: var(--beam-line-highlight), var(--beam-line-blobs);
|
|
2437
2469
|
border-radius: calc(var(--beam-radius) - 1px);
|
|
2438
2470
|
opacity: calc(var(--beam-opacity) * var(--beam-edge) * var(--beam-stroke-opacity) * var(--beam-strength));
|
|
2439
2471
|
animation: border-beam-hue-shift 12s ease-in-out infinite;
|
|
@@ -2446,7 +2478,6 @@
|
|
|
2446
2478
|
z-index: 1;
|
|
2447
2479
|
inset: 0;
|
|
2448
2480
|
content: "";
|
|
2449
|
-
background: var(--beam-line-inner);
|
|
2450
2481
|
border-radius: var(--beam-radius);
|
|
2451
2482
|
box-shadow: inset 0 0 9px 1px var(--beam-inner-shadow);
|
|
2452
2483
|
opacity: calc(var(--beam-opacity) * var(--beam-edge) * var(--beam-inner-opacity) * var(--beam-strength));
|
|
@@ -2461,7 +2492,6 @@
|
|
|
2461
2492
|
.line > .bloom {
|
|
2462
2493
|
z-index: 3;
|
|
2463
2494
|
inset: 0;
|
|
2464
|
-
background: var(--beam-line-bloom);
|
|
2465
2495
|
border-radius: calc(var(--beam-radius) - 1px);
|
|
2466
2496
|
opacity: 0;
|
|
2467
2497
|
clip-path: inset(0 round var(--beam-radius));
|
|
@@ -2782,6 +2812,89 @@
|
|
|
2782
2812
|
75% {
|
|
2783
2813
|
--beam-spike2: .8;
|
|
2784
2814
|
}
|
|
2815
|
+
}.breadcrumb {
|
|
2816
|
+
display: block;
|
|
2817
|
+
max-width: 100%;
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2820
|
+
.breadcrumb-list {
|
|
2821
|
+
display: flex;
|
|
2822
|
+
flex-wrap: wrap;
|
|
2823
|
+
margin: 0;
|
|
2824
|
+
padding: 0;
|
|
2825
|
+
align-items: center;
|
|
2826
|
+
gap: 3px;
|
|
2827
|
+
list-style: none;
|
|
2828
|
+
}
|
|
2829
|
+
.breadcrumb-list .breadcrumb-item {
|
|
2830
|
+
margin: 0;
|
|
2831
|
+
}
|
|
2832
|
+
|
|
2833
|
+
.breadcrumb-item {
|
|
2834
|
+
display: inline-flex;
|
|
2835
|
+
min-width: 0;
|
|
2836
|
+
align-items: center;
|
|
2837
|
+
gap: 3px;
|
|
2838
|
+
}
|
|
2839
|
+
.breadcrumb-item:last-child .breadcrumb-separator {
|
|
2840
|
+
display: none;
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
.breadcrumb-link {
|
|
2844
|
+
display: inline-flex;
|
|
2845
|
+
height: 30px;
|
|
2846
|
+
max-width: 100%;
|
|
2847
|
+
padding: 0 9px;
|
|
2848
|
+
align-items: center;
|
|
2849
|
+
gap: 9px;
|
|
2850
|
+
background: transparent;
|
|
2851
|
+
border: 0;
|
|
2852
|
+
border-radius: var(--radius);
|
|
2853
|
+
color: var(--foreground-secondary);
|
|
2854
|
+
font-size: 14px;
|
|
2855
|
+
line-height: 1;
|
|
2856
|
+
text-decoration: none;
|
|
2857
|
+
white-space: nowrap;
|
|
2858
|
+
cursor: pointer;
|
|
2859
|
+
transition: var(--transition-default);
|
|
2860
|
+
transition-property: background, color, outline-color, outline-offset;
|
|
2861
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
2862
|
+
outline-offset: 0;
|
|
2863
|
+
}
|
|
2864
|
+
.breadcrumb-link:focus-visible, .breadcrumb-link:focus-within {
|
|
2865
|
+
outline-color: var(--primary-600);
|
|
2866
|
+
outline-offset: 2px;
|
|
2867
|
+
}
|
|
2868
|
+
@media (hover: hover) {
|
|
2869
|
+
.breadcrumb-link:not(.is-current):hover {
|
|
2870
|
+
background: var(--surface-hover);
|
|
2871
|
+
color: var(--foreground);
|
|
2872
|
+
}
|
|
2873
|
+
}
|
|
2874
|
+
.breadcrumb-link.is-current {
|
|
2875
|
+
color: var(--foreground-prominent);
|
|
2876
|
+
font-weight: 600;
|
|
2877
|
+
cursor: default;
|
|
2878
|
+
pointer-events: none;
|
|
2879
|
+
}
|
|
2880
|
+
|
|
2881
|
+
.breadcrumb-icon {
|
|
2882
|
+
margin-top: -1px;
|
|
2883
|
+
margin-bottom: -1px;
|
|
2884
|
+
flex-shrink: 0;
|
|
2885
|
+
}
|
|
2886
|
+
|
|
2887
|
+
.breadcrumb-label {
|
|
2888
|
+
overflow: hidden;
|
|
2889
|
+
text-overflow: ellipsis;
|
|
2890
|
+
white-space: nowrap;
|
|
2891
|
+
}
|
|
2892
|
+
|
|
2893
|
+
.breadcrumb-separator {
|
|
2894
|
+
flex-shrink: 0;
|
|
2895
|
+
color: var(--foreground-secondary);
|
|
2896
|
+
opacity: 0.5;
|
|
2897
|
+
pointer-events: none;
|
|
2785
2898
|
}.calendar {
|
|
2786
2899
|
flex-grow: 1;
|
|
2787
2900
|
}
|
|
@@ -3392,1277 +3505,1464 @@
|
|
|
3392
3505
|
gap: 9px;
|
|
3393
3506
|
padding: 12px 18px;
|
|
3394
3507
|
color: var(--foreground-prominent);
|
|
3395
|
-
}.
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
border
|
|
3404
|
-
border-
|
|
3508
|
+
}.chip {
|
|
3509
|
+
display: flex;
|
|
3510
|
+
height: 36px;
|
|
3511
|
+
padding: 0 12px;
|
|
3512
|
+
align-items: center;
|
|
3513
|
+
flex-grow: 0;
|
|
3514
|
+
gap: 9px;
|
|
3515
|
+
background: var(--gray-50);
|
|
3516
|
+
border: 1px solid var(--gray-200);
|
|
3517
|
+
border-radius: var(--radius-full);
|
|
3518
|
+
color: var(--foreground);
|
|
3519
|
+
transition: var(--transition-default);
|
|
3520
|
+
transition-property: background, border, color, outline-color, outline-offset;
|
|
3405
3521
|
}
|
|
3406
|
-
.
|
|
3407
|
-
|
|
3408
|
-
|
|
3522
|
+
.chip.is-selectable {
|
|
3523
|
+
cursor: pointer;
|
|
3524
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
3525
|
+
outline-offset: 0;
|
|
3409
3526
|
}
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
flex-flow: column;
|
|
3527
|
+
.chip.is-selectable:focus-visible {
|
|
3528
|
+
outline-color: var(--primary-600);
|
|
3529
|
+
outline-offset: 2px;
|
|
3414
3530
|
}
|
|
3415
|
-
|
|
3416
|
-
.
|
|
3417
|
-
|
|
3531
|
+
@media (hover: hover) {
|
|
3532
|
+
.chip.is-selectable:hover {
|
|
3533
|
+
background: var(--gray-100);
|
|
3534
|
+
}
|
|
3418
3535
|
}
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3536
|
+
.chip.is-selected {
|
|
3537
|
+
background: var(--primary-50);
|
|
3538
|
+
border-color: var(--primary-200);
|
|
3539
|
+
color: var(--primary-600);
|
|
3423
3540
|
}
|
|
3424
|
-
|
|
3425
|
-
.
|
|
3426
|
-
|
|
3427
|
-
|
|
3541
|
+
@media (hover: hover) {
|
|
3542
|
+
.chip.is-selected:hover {
|
|
3543
|
+
background: var(--primary-100);
|
|
3544
|
+
}
|
|
3428
3545
|
}
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3546
|
+
.chip :is(span) {
|
|
3547
|
+
font-size: 14px;
|
|
3548
|
+
font-weight: 500;
|
|
3549
|
+
white-space: nowrap;
|
|
3550
|
+
}.command-palette-backdrop {
|
|
3551
|
+
position: fixed;
|
|
3552
|
+
inset: 0;
|
|
3553
|
+
background: var(--overlay);
|
|
3554
|
+
backdrop-filter: blur(3px) saturate(180%);
|
|
3555
|
+
animation: command-palette-backdrop-in 300ms var(--swift-out) both;
|
|
3556
|
+
z-index: 99000;
|
|
3434
3557
|
}
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
--columns: 2;
|
|
3438
|
-
display: grid;
|
|
3439
|
-
gap: 18px;
|
|
3440
|
-
grid-template-columns: repeat(var(--columns), 1fr);
|
|
3558
|
+
.command-palette-backdrop.is-closing {
|
|
3559
|
+
animation: command-palette-backdrop-out 210ms var(--swift-out) both;
|
|
3441
3560
|
}
|
|
3442
3561
|
|
|
3443
|
-
.
|
|
3562
|
+
.command-palette-dialog {
|
|
3563
|
+
position: fixed;
|
|
3564
|
+
inset: 0;
|
|
3444
3565
|
display: flex;
|
|
3445
|
-
|
|
3446
|
-
|
|
3566
|
+
padding-top: clamp(60px, 15vh, 160px);
|
|
3567
|
+
align-items: flex-start;
|
|
3568
|
+
justify-content: center;
|
|
3569
|
+
animation: command-palette-in 300ms var(--swift-out) both;
|
|
3570
|
+
z-index: 99001;
|
|
3447
3571
|
}
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
font-size: 18px;
|
|
3452
|
-
font-weight: 800;
|
|
3572
|
+
.command-palette-dialog.is-closing {
|
|
3573
|
+
animation: command-palette-out 210ms var(--swift-out) both;
|
|
3574
|
+
pointer-events: none;
|
|
3453
3575
|
}
|
|
3454
3576
|
|
|
3455
|
-
|
|
3456
|
-
.form-grid {
|
|
3457
|
-
grid-template-columns: 1fr;
|
|
3458
|
-
}
|
|
3459
|
-
.form-row {
|
|
3460
|
-
flex-flow: column;
|
|
3461
|
-
gap: 18px;
|
|
3462
|
-
}
|
|
3463
|
-
}
|
|
3464
|
-
.form-field {
|
|
3577
|
+
.command-palette {
|
|
3465
3578
|
display: flex;
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3579
|
+
overflow: hidden;
|
|
3580
|
+
width: min(600px, 100dvw - 48px);
|
|
3581
|
+
max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
|
|
3582
|
+
flex-flow: column nowrap;
|
|
3583
|
+
background: var(--surface);
|
|
3584
|
+
background-clip: padding-box;
|
|
3585
|
+
border: 1px solid var(--surface-stroke-out);
|
|
3586
|
+
border-radius: var(--radius);
|
|
3587
|
+
box-shadow: var(--shadow-lg);
|
|
3588
|
+
transition: height 120ms var(--deceleration-curve);
|
|
3469
3589
|
}
|
|
3470
3590
|
|
|
3471
|
-
.
|
|
3591
|
+
.command-palette-search {
|
|
3472
3592
|
display: flex;
|
|
3473
|
-
|
|
3474
|
-
|
|
3593
|
+
height: 54px;
|
|
3594
|
+
padding: 0 18px;
|
|
3475
3595
|
align-items: center;
|
|
3476
|
-
|
|
3477
|
-
gap:
|
|
3478
|
-
|
|
3479
|
-
}
|
|
3480
|
-
|
|
3481
|
-
.form-field-label {
|
|
3482
|
-
min-height: 1.6em;
|
|
3483
|
-
color: var(--foreground-prominent);
|
|
3484
|
-
font-weight: 600;
|
|
3596
|
+
flex-shrink: 0;
|
|
3597
|
+
gap: 12px;
|
|
3598
|
+
border-bottom: 1px solid var(--gray-100);
|
|
3485
3599
|
}
|
|
3486
3600
|
|
|
3487
|
-
.
|
|
3601
|
+
.command-palette-search-icon {
|
|
3602
|
+
flex-shrink: 0;
|
|
3488
3603
|
color: var(--foreground-secondary);
|
|
3489
|
-
font-size:
|
|
3604
|
+
font-size: 16px;
|
|
3490
3605
|
}
|
|
3491
3606
|
|
|
3492
|
-
.
|
|
3493
|
-
|
|
3607
|
+
.command-palette-search-input {
|
|
3608
|
+
height: 100%;
|
|
3609
|
+
flex-grow: 1;
|
|
3610
|
+
background: transparent;
|
|
3611
|
+
border: 0;
|
|
3612
|
+
color: var(--foreground);
|
|
3613
|
+
font: inherit;
|
|
3614
|
+
font-size: 16px;
|
|
3615
|
+
outline: 0;
|
|
3616
|
+
}
|
|
3617
|
+
.command-palette-search-input::placeholder {
|
|
3494
3618
|
color: var(--foreground-secondary);
|
|
3495
|
-
font-size: 0.85em;
|
|
3496
3619
|
}
|
|
3497
3620
|
|
|
3498
|
-
.
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3621
|
+
.command-palette-breadcrumb {
|
|
3622
|
+
padding: 0;
|
|
3623
|
+
flex-shrink: 0;
|
|
3624
|
+
background: transparent;
|
|
3625
|
+
border: 0;
|
|
3626
|
+
cursor: pointer;
|
|
3627
|
+
color: var(--foreground-secondary);
|
|
3628
|
+
font: inherit;
|
|
3629
|
+
font-size: 15px;
|
|
3630
|
+
font-weight: 500;
|
|
3502
3631
|
white-space: nowrap;
|
|
3632
|
+
transition: color 150ms;
|
|
3633
|
+
}
|
|
3634
|
+
@media (hover: hover) {
|
|
3635
|
+
.command-palette-breadcrumb:hover {
|
|
3636
|
+
color: var(--foreground);
|
|
3637
|
+
}
|
|
3503
3638
|
}
|
|
3504
3639
|
|
|
3505
|
-
.
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
gap: 9px;
|
|
3640
|
+
.command-palette-breadcrumb-separator {
|
|
3641
|
+
flex-shrink: 0;
|
|
3642
|
+
opacity: 0.5;
|
|
3643
|
+
color: var(--foreground-secondary);
|
|
3510
3644
|
font-size: 14px;
|
|
3511
|
-
line-height: 24px;
|
|
3512
3645
|
}
|
|
3513
3646
|
|
|
3514
|
-
.
|
|
3515
|
-
|
|
3647
|
+
.command-palette-tabs {
|
|
3648
|
+
display: flex;
|
|
3649
|
+
overflow-x: auto;
|
|
3650
|
+
scrollbar-width: none;
|
|
3651
|
+
padding: 6px 15px;
|
|
3652
|
+
flex-shrink: 0;
|
|
3653
|
+
gap: 3px;
|
|
3654
|
+
border-bottom: 1px solid var(--gray-100);
|
|
3516
3655
|
}
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
color: var(--danger-600);
|
|
3656
|
+
.command-palette-tabs::-webkit-scrollbar {
|
|
3657
|
+
display: none;
|
|
3520
3658
|
}
|
|
3521
3659
|
|
|
3522
|
-
.
|
|
3660
|
+
.command-palette-tab {
|
|
3661
|
+
display: flex;
|
|
3662
|
+
height: 30px;
|
|
3663
|
+
padding: 0 10px;
|
|
3664
|
+
align-items: center;
|
|
3665
|
+
gap: 6px;
|
|
3666
|
+
background: transparent;
|
|
3667
|
+
border: 0;
|
|
3668
|
+
border-radius: var(--radius-half);
|
|
3669
|
+
cursor: pointer;
|
|
3523
3670
|
color: var(--foreground-secondary);
|
|
3671
|
+
font: inherit;
|
|
3672
|
+
font-size: 13px;
|
|
3673
|
+
font-weight: 500;
|
|
3674
|
+
white-space: nowrap;
|
|
3675
|
+
transition: background 150ms, color 150ms;
|
|
3524
3676
|
}
|
|
3525
|
-
|
|
3526
|
-
.
|
|
3527
|
-
|
|
3677
|
+
@media (hover: hover) {
|
|
3678
|
+
.command-palette-tab:hover {
|
|
3679
|
+
background: var(--gray-100);
|
|
3680
|
+
color: var(--foreground);
|
|
3681
|
+
}
|
|
3528
3682
|
}
|
|
3529
3683
|
|
|
3530
|
-
.
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
height: 42px;
|
|
3534
|
-
width: 100%;
|
|
3535
|
-
padding: 0 12px;
|
|
3536
|
-
background: var(--surface);
|
|
3537
|
-
background-clip: padding-box;
|
|
3538
|
-
border: 1px solid var(--surface-stroke);
|
|
3539
|
-
border-radius: var(--radius);
|
|
3540
|
-
box-shadow: var(--shadow-px);
|
|
3541
|
-
color: var(--foreground);
|
|
3542
|
-
outline: 0 solid transparent;
|
|
3543
|
-
transition: var(--transition-default);
|
|
3544
|
-
transition-property: background, border-color, outline-color, outline-offset;
|
|
3545
|
-
}
|
|
3546
|
-
.form-input::placeholder {
|
|
3547
|
-
color: var(--foreground-secondary);
|
|
3548
|
-
}
|
|
3549
|
-
.form-input.is-secondary {
|
|
3550
|
-
background: var(--gray-100);
|
|
3551
|
-
border-color: transparent;
|
|
3552
|
-
box-shadow: none;
|
|
3553
|
-
}
|
|
3554
|
-
.form-input.is-condensed {
|
|
3555
|
-
height: 34px;
|
|
3684
|
+
.command-palette-tab-active {
|
|
3685
|
+
background: var(--primary-100);
|
|
3686
|
+
color: var(--primary-700);
|
|
3556
3687
|
}
|
|
3557
|
-
|
|
3558
|
-
|
|
3688
|
+
@media (hover: hover) {
|
|
3689
|
+
.command-palette-tab-active:hover {
|
|
3690
|
+
background: var(--primary-100);
|
|
3691
|
+
color: var(--primary-700);
|
|
3692
|
+
}
|
|
3559
3693
|
}
|
|
3560
3694
|
|
|
3561
|
-
.
|
|
3562
|
-
|
|
3695
|
+
.command-palette-tab-icon {
|
|
3696
|
+
font-size: 13px;
|
|
3563
3697
|
}
|
|
3564
3698
|
|
|
3565
|
-
.
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3699
|
+
.command-palette-results {
|
|
3700
|
+
overflow-y: auto;
|
|
3701
|
+
overscroll-behavior: contain;
|
|
3702
|
+
scroll-padding-block: 42px 6px;
|
|
3703
|
+
scrollbar-width: thin;
|
|
3704
|
+
padding: 6px;
|
|
3705
|
+
flex-grow: 1;
|
|
3572
3706
|
}
|
|
3573
3707
|
|
|
3574
|
-
.
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
outline-color: var(--primary-600);
|
|
3580
|
-
outline-offset: -1px;
|
|
3581
|
-
}
|
|
3582
|
-
@media (hover: hover) {
|
|
3583
|
-
.form-input-enabled:hover {
|
|
3584
|
-
border-color: var(--surface-stroke-hover);
|
|
3585
|
-
}
|
|
3708
|
+
.command-palette-loading {
|
|
3709
|
+
display: flex;
|
|
3710
|
+
padding: 24px;
|
|
3711
|
+
align-items: center;
|
|
3712
|
+
justify-content: center;
|
|
3586
3713
|
}
|
|
3587
3714
|
|
|
3588
|
-
.
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3715
|
+
.command-palette-empty {
|
|
3716
|
+
display: flex;
|
|
3717
|
+
padding: 24px;
|
|
3718
|
+
align-items: center;
|
|
3719
|
+
justify-content: center;
|
|
3592
3720
|
color: var(--foreground-secondary);
|
|
3593
|
-
|
|
3594
|
-
}
|
|
3595
|
-
|
|
3596
|
-
.form-input-icon-trailing {
|
|
3597
|
-
right: 12px;
|
|
3721
|
+
font-size: 14px;
|
|
3598
3722
|
}
|
|
3599
3723
|
|
|
3600
|
-
.
|
|
3601
|
-
|
|
3724
|
+
.command-palette-group {
|
|
3725
|
+
display: flex;
|
|
3726
|
+
padding: 9px 10px 3px;
|
|
3727
|
+
align-items: center;
|
|
3728
|
+
gap: 6px;
|
|
3729
|
+
color: var(--foreground-secondary);
|
|
3730
|
+
font-size: 12px;
|
|
3731
|
+
font-weight: 600;
|
|
3732
|
+
text-transform: uppercase;
|
|
3733
|
+
letter-spacing: 0.05em;
|
|
3734
|
+
pointer-events: none;
|
|
3602
3735
|
}
|
|
3603
3736
|
|
|
3604
|
-
.
|
|
3605
|
-
|
|
3606
|
-
cursor: pointer;
|
|
3607
|
-
}
|
|
3608
|
-
@media (hover: hover) {
|
|
3609
|
-
.form-input-icon-password-toggle:hover {
|
|
3610
|
-
color: var(--foreground);
|
|
3611
|
-
}
|
|
3737
|
+
.command-palette-group-icon {
|
|
3738
|
+
font-size: 12px;
|
|
3612
3739
|
}
|
|
3613
3740
|
|
|
3614
|
-
.
|
|
3615
|
-
|
|
3616
|
-
inset: 0;
|
|
3617
|
-
height: 100%;
|
|
3741
|
+
.command-palette-item {
|
|
3742
|
+
display: flex;
|
|
3618
3743
|
width: 100%;
|
|
3619
|
-
padding:
|
|
3620
|
-
|
|
3744
|
+
padding: 8px 10px;
|
|
3745
|
+
align-items: center;
|
|
3746
|
+
gap: 10px;
|
|
3747
|
+
background: transparent;
|
|
3621
3748
|
border: 0;
|
|
3622
|
-
border-radius:
|
|
3623
|
-
|
|
3749
|
+
border-radius: var(--radius-half);
|
|
3750
|
+
cursor: pointer;
|
|
3751
|
+
color: var(--foreground);
|
|
3624
3752
|
font: inherit;
|
|
3625
|
-
|
|
3753
|
+
font-size: 14px;
|
|
3626
3754
|
text-align: left;
|
|
3755
|
+
transition: background 100ms;
|
|
3627
3756
|
}
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
-webkit-appearance: none;
|
|
3633
|
-
}
|
|
3634
|
-
.form-input-native::-webkit-color-swatch {
|
|
3635
|
-
border: 0;
|
|
3636
|
-
border-radius: var(--radius-half);
|
|
3757
|
+
@media (hover: hover) {
|
|
3758
|
+
.command-palette-item:hover {
|
|
3759
|
+
background: var(--gray-100);
|
|
3760
|
+
}
|
|
3637
3761
|
}
|
|
3638
|
-
.
|
|
3639
|
-
|
|
3640
|
-
margin: 0 -12px;
|
|
3641
|
-
padding: 3px;
|
|
3762
|
+
.command-palette-item:active {
|
|
3763
|
+
background: var(--gray-200);
|
|
3642
3764
|
}
|
|
3643
3765
|
|
|
3644
|
-
.
|
|
3645
|
-
|
|
3766
|
+
.command-palette-item-highlighted {
|
|
3767
|
+
background: var(--gray-100);
|
|
3646
3768
|
}
|
|
3647
|
-
|
|
3648
|
-
.
|
|
3649
|
-
|
|
3769
|
+
@media (hover: hover) {
|
|
3770
|
+
.command-palette-item-highlighted:hover {
|
|
3771
|
+
background: var(--gray-100);
|
|
3772
|
+
}
|
|
3650
3773
|
}
|
|
3651
3774
|
|
|
3652
|
-
.
|
|
3775
|
+
.command-palette-item-icon {
|
|
3653
3776
|
display: flex;
|
|
3654
|
-
width:
|
|
3777
|
+
width: 30px;
|
|
3778
|
+
height: 30px;
|
|
3655
3779
|
align-items: center;
|
|
3656
|
-
|
|
3780
|
+
align-self: flex-start;
|
|
3781
|
+
flex-shrink: 0;
|
|
3657
3782
|
justify-content: center;
|
|
3658
|
-
background: var(--
|
|
3659
|
-
|
|
3660
|
-
|
|
3783
|
+
background: var(--gray-100);
|
|
3784
|
+
border-radius: var(--radius-half);
|
|
3785
|
+
color: var(--foreground);
|
|
3786
|
+
transition: background 100ms, color 100ms;
|
|
3661
3787
|
}
|
|
3662
|
-
.
|
|
3663
|
-
|
|
3788
|
+
.command-palette-item-icon .icon {
|
|
3789
|
+
font-size: 16px;
|
|
3664
3790
|
}
|
|
3665
|
-
|
|
3666
|
-
|
|
3791
|
+
|
|
3792
|
+
.command-palette-item-highlighted .command-palette-item-icon {
|
|
3793
|
+
background: var(--gray-200);
|
|
3667
3794
|
}
|
|
3668
|
-
|
|
3669
|
-
|
|
3795
|
+
|
|
3796
|
+
.command-palette-item-content {
|
|
3797
|
+
overflow: hidden;
|
|
3798
|
+
flex-grow: 1;
|
|
3670
3799
|
}
|
|
3671
3800
|
|
|
3672
|
-
.
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
outline-offset: 0;
|
|
3801
|
+
.command-palette-item-label {
|
|
3802
|
+
overflow: hidden;
|
|
3803
|
+
white-space: nowrap;
|
|
3804
|
+
text-overflow: ellipsis;
|
|
3677
3805
|
}
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3806
|
+
|
|
3807
|
+
.command-palette-item-sub-label {
|
|
3808
|
+
overflow: hidden;
|
|
3809
|
+
margin-top: 1px;
|
|
3810
|
+
color: var(--foreground-secondary);
|
|
3811
|
+
font-size: 12px;
|
|
3812
|
+
white-space: nowrap;
|
|
3813
|
+
text-overflow: ellipsis;
|
|
3814
|
+
transition: color 100ms;
|
|
3681
3815
|
}
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3816
|
+
|
|
3817
|
+
.command-palette-item-highlighted .command-palette-item-sub-label {
|
|
3818
|
+
color: var(--primary-500);
|
|
3685
3819
|
}
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3820
|
+
|
|
3821
|
+
.command-palette-item-sub-action-indicator {
|
|
3822
|
+
flex-shrink: 0;
|
|
3823
|
+
color: var(--foreground-secondary);
|
|
3824
|
+
font-size: 12px;
|
|
3825
|
+
transition: color 100ms;
|
|
3689
3826
|
}
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3827
|
+
|
|
3828
|
+
.command-palette-item-highlighted .command-palette-item-sub-action-indicator {
|
|
3829
|
+
color: var(--primary-500);
|
|
3693
3830
|
}
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3831
|
+
|
|
3832
|
+
@keyframes command-palette-in {
|
|
3833
|
+
from {
|
|
3834
|
+
opacity: 0;
|
|
3835
|
+
scale: 1.05;
|
|
3836
|
+
}
|
|
3837
|
+
to {
|
|
3838
|
+
opacity: 1;
|
|
3839
|
+
scale: 1;
|
|
3840
|
+
}
|
|
3698
3841
|
}
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3842
|
+
@keyframes command-palette-out {
|
|
3843
|
+
from {
|
|
3844
|
+
opacity: 1;
|
|
3845
|
+
}
|
|
3846
|
+
to {
|
|
3847
|
+
opacity: 0;
|
|
3848
|
+
}
|
|
3703
3849
|
}
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3850
|
+
@keyframes command-palette-backdrop-in {
|
|
3851
|
+
from {
|
|
3852
|
+
opacity: 0;
|
|
3853
|
+
}
|
|
3854
|
+
to {
|
|
3855
|
+
opacity: 1;
|
|
3856
|
+
}
|
|
3708
3857
|
}
|
|
3709
|
-
@
|
|
3710
|
-
|
|
3711
|
-
|
|
3858
|
+
@keyframes command-palette-backdrop-out {
|
|
3859
|
+
from {
|
|
3860
|
+
opacity: 1;
|
|
3712
3861
|
}
|
|
3862
|
+
to {
|
|
3863
|
+
opacity: 0;
|
|
3864
|
+
}
|
|
3865
|
+
}.comment {
|
|
3866
|
+
display: grid;
|
|
3867
|
+
max-width: 100%;
|
|
3868
|
+
gap: 3px 15px;
|
|
3869
|
+
grid-template-columns: 1fr auto;
|
|
3870
|
+
grid-template-rows: repeat(2, auto);
|
|
3713
3871
|
}
|
|
3714
|
-
.
|
|
3715
|
-
|
|
3872
|
+
.comment .avatar {
|
|
3873
|
+
align-self: end;
|
|
3874
|
+
grid-column: 2;
|
|
3875
|
+
grid-row: 1;
|
|
3716
3876
|
}
|
|
3717
|
-
.
|
|
3718
|
-
|
|
3877
|
+
.comment .comment-content {
|
|
3878
|
+
grid-column: 1;
|
|
3879
|
+
grid-row: 1;
|
|
3719
3880
|
}
|
|
3720
|
-
.
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
opacity: 1;
|
|
3881
|
+
.comment .comment-footer {
|
|
3882
|
+
grid-column: 1;
|
|
3883
|
+
grid-row: 2;
|
|
3724
3884
|
}
|
|
3725
|
-
.
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
.
|
|
3885
|
+
.comment.is-received {
|
|
3886
|
+
grid-template-columns: auto 1fr;
|
|
3887
|
+
}
|
|
3888
|
+
.comment.is-received .avatar {
|
|
3889
|
+
grid-column: 1;
|
|
3890
|
+
}
|
|
3891
|
+
.comment.is-received .comment-content {
|
|
3892
|
+
grid-column: 2;
|
|
3893
|
+
}
|
|
3894
|
+
.comment.is-received .comment-footer {
|
|
3895
|
+
grid-column: 2;
|
|
3896
|
+
}
|
|
3897
|
+
|
|
3898
|
+
.comment-content {
|
|
3899
|
+
min-width: 0;
|
|
3900
|
+
padding: 12px 18px;
|
|
3901
|
+
background: var(--primary-50);
|
|
3902
|
+
border: 1px solid var(--primary-200);
|
|
3903
|
+
border-radius: calc(var(--radius) * 2);
|
|
3904
|
+
box-shadow: var(--shadow-xs);
|
|
3905
|
+
}
|
|
3906
|
+
|
|
3907
|
+
.comment:not(.is-received) .comment-content {
|
|
3908
|
+
border-bottom-right-radius: var(--radius);
|
|
3909
|
+
}
|
|
3910
|
+
|
|
3911
|
+
.comment.is-received .comment-content {
|
|
3912
|
+
background: var(--gray-50);
|
|
3913
|
+
border-color: var(--gray-200);
|
|
3914
|
+
border-bottom-left-radius: var(--radius);
|
|
3915
|
+
}
|
|
3916
|
+
|
|
3917
|
+
.comment.is-typing .comment-content {
|
|
3918
|
+
width: min-content;
|
|
3919
|
+
}
|
|
3920
|
+
|
|
3921
|
+
.comment-typing {
|
|
3922
|
+
display: block;
|
|
3923
|
+
margin: 6px;
|
|
3924
|
+
height: 6px;
|
|
3925
|
+
width: 6px;
|
|
3926
|
+
border-radius: 6px;
|
|
3927
|
+
animation: comment-typing 1s linear infinite both;
|
|
3928
|
+
}
|
|
3929
|
+
|
|
3930
|
+
.comment-footer {
|
|
3931
|
+
display: flex;
|
|
3932
|
+
align-items: center;
|
|
3933
|
+
gap: 12px;
|
|
3934
|
+
justify-content: flex-end;
|
|
3935
|
+
font-size: 12px;
|
|
3936
|
+
font-weight: 500;
|
|
3937
|
+
}
|
|
3938
|
+
.comment-footer span {
|
|
3939
|
+
margin-right: auto;
|
|
3940
|
+
}
|
|
3941
|
+
.comment-footer time {
|
|
3729
3942
|
color: var(--foreground-secondary);
|
|
3730
3943
|
}
|
|
3731
3944
|
|
|
3732
|
-
|
|
3733
|
-
|
|
3945
|
+
@keyframes comment-typing {
|
|
3946
|
+
0%, 80%, 100% {
|
|
3947
|
+
background: var(--gray-200);
|
|
3948
|
+
box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
|
|
3949
|
+
translate: 0 0;
|
|
3950
|
+
}
|
|
3951
|
+
20% {
|
|
3952
|
+
background: var(--gray-200);
|
|
3953
|
+
box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
|
|
3954
|
+
translate: 0 0;
|
|
3955
|
+
}
|
|
3956
|
+
40% {
|
|
3957
|
+
background: var(--gray-300);
|
|
3958
|
+
box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
|
|
3959
|
+
translate: 0 -4px;
|
|
3960
|
+
}
|
|
3961
|
+
60% {
|
|
3962
|
+
background: var(--gray-200);
|
|
3963
|
+
box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
|
|
3964
|
+
translate: 0 0;
|
|
3965
|
+
}
|
|
3966
|
+
}.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
|
|
3967
|
+
height: 100%;
|
|
3968
|
+
min-height: unset;
|
|
3969
|
+
border: 0;
|
|
3970
|
+
border-radius: 0;
|
|
3971
|
+
outline: 0 !important;
|
|
3734
3972
|
}
|
|
3735
|
-
.form-
|
|
3736
|
-
|
|
3973
|
+
.form-input-group > .button-group > .button:first-child, .form-input-group > :first-child:is(.form-input, .form-select, .button) {
|
|
3974
|
+
border-top-left-radius: calc(var(--radius) - 1px);
|
|
3975
|
+
border-bottom-left-radius: calc(var(--radius) - 1px);
|
|
3737
3976
|
}
|
|
3738
|
-
.form-
|
|
3739
|
-
|
|
3977
|
+
.form-input-group > .button-group > .button:last-child, .form-input-group > :last-child:is(.form-input, .form-select, .button) {
|
|
3978
|
+
border-top-right-radius: calc(var(--radius) - 1px);
|
|
3979
|
+
border-bottom-right-radius: calc(var(--radius) - 1px);
|
|
3740
3980
|
}
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3981
|
+
|
|
3982
|
+
.form-structure-element {
|
|
3983
|
+
display: flex;
|
|
3984
|
+
flex-flow: column;
|
|
3985
|
+
}
|
|
3986
|
+
|
|
3987
|
+
.form {
|
|
3988
|
+
gap: 42px;
|
|
3989
|
+
}
|
|
3990
|
+
|
|
3991
|
+
.pane > .form {
|
|
3992
|
+
display: contents;
|
|
3993
|
+
gap: 0;
|
|
3994
|
+
}
|
|
3995
|
+
|
|
3996
|
+
.form-column,
|
|
3997
|
+
.form-section {
|
|
3998
|
+
gap: 18px;
|
|
3999
|
+
}
|
|
4000
|
+
|
|
4001
|
+
.form > .button,
|
|
4002
|
+
.form-column > .button,
|
|
4003
|
+
.form-section > .button {
|
|
4004
|
+
align-self: flex-start;
|
|
4005
|
+
}
|
|
4006
|
+
|
|
4007
|
+
.form-grid {
|
|
4008
|
+
--columns: 2;
|
|
4009
|
+
display: grid;
|
|
4010
|
+
gap: 18px;
|
|
4011
|
+
grid-template-columns: repeat(var(--columns), 1fr);
|
|
4012
|
+
}
|
|
4013
|
+
|
|
4014
|
+
.form-row {
|
|
4015
|
+
display: flex;
|
|
4016
|
+
flex-grow: 1;
|
|
4017
|
+
gap: 18px;
|
|
4018
|
+
}
|
|
4019
|
+
|
|
4020
|
+
.form-section-title {
|
|
4021
|
+
color: var(--foreground-prominent);
|
|
4022
|
+
font-size: 18px;
|
|
4023
|
+
font-weight: 800;
|
|
4024
|
+
}
|
|
4025
|
+
|
|
4026
|
+
@media (max-width: 767.98px) {
|
|
4027
|
+
.form-grid {
|
|
4028
|
+
grid-template-columns: 1fr;
|
|
4029
|
+
}
|
|
4030
|
+
.form-row {
|
|
4031
|
+
flex-flow: column;
|
|
4032
|
+
gap: 18px;
|
|
4033
|
+
}
|
|
4034
|
+
}
|
|
4035
|
+
.form-field {
|
|
4036
|
+
display: flex;
|
|
4037
|
+
flex: 1 1 0;
|
|
4038
|
+
flex-flow: column;
|
|
4039
|
+
gap: 6px;
|
|
4040
|
+
}
|
|
4041
|
+
|
|
4042
|
+
.form-field-header {
|
|
4043
|
+
display: flex;
|
|
4044
|
+
width: 100%;
|
|
4045
|
+
margin-bottom: 0;
|
|
4046
|
+
align-items: center;
|
|
4047
|
+
align-self: flex-start;
|
|
4048
|
+
gap: 6px;
|
|
4049
|
+
font-size: unset;
|
|
4050
|
+
}
|
|
4051
|
+
|
|
4052
|
+
.form-field-label {
|
|
4053
|
+
min-height: 1.6em;
|
|
4054
|
+
color: var(--foreground-prominent);
|
|
4055
|
+
font-weight: 600;
|
|
4056
|
+
}
|
|
4057
|
+
|
|
4058
|
+
.form-field-optional {
|
|
4059
|
+
color: var(--foreground-secondary);
|
|
4060
|
+
font-size: 0.85em;
|
|
4061
|
+
}
|
|
4062
|
+
|
|
4063
|
+
.form-field-value {
|
|
4064
|
+
margin-left: auto;
|
|
4065
|
+
color: var(--foreground-secondary);
|
|
4066
|
+
font-size: 0.85em;
|
|
4067
|
+
}
|
|
4068
|
+
|
|
4069
|
+
.form-field-counter {
|
|
4070
|
+
margin-left: auto;
|
|
4071
|
+
color: var(--foreground-secondary);
|
|
4072
|
+
font-size: 0.85em;
|
|
4073
|
+
white-space: nowrap;
|
|
3744
4074
|
}
|
|
3745
4075
|
|
|
3746
|
-
.form-
|
|
4076
|
+
.form-field-addition {
|
|
3747
4077
|
display: flex;
|
|
3748
|
-
|
|
3749
|
-
|
|
4078
|
+
margin-top: 3px;
|
|
4079
|
+
margin-bottom: 3px;
|
|
4080
|
+
gap: 9px;
|
|
4081
|
+
font-size: 14px;
|
|
4082
|
+
line-height: 24px;
|
|
3750
4083
|
}
|
|
3751
4084
|
|
|
3752
|
-
.form-
|
|
3753
|
-
|
|
3754
|
-
}
|
|
3755
|
-
.form-date-time-input .input-group {
|
|
3756
|
-
flex-grow: 1;
|
|
4085
|
+
.form-field-addition-icon {
|
|
4086
|
+
margin-top: 4px;
|
|
3757
4087
|
}
|
|
3758
4088
|
|
|
3759
|
-
.form-
|
|
4089
|
+
.form-field-addition-error {
|
|
4090
|
+
color: var(--danger-600);
|
|
3760
4091
|
}
|
|
3761
4092
|
|
|
3762
|
-
.form-
|
|
3763
|
-
|
|
3764
|
-
display: flex;
|
|
3765
|
-
height: unset;
|
|
3766
|
-
min-height: 42px;
|
|
3767
|
-
padding: 0 39px 0 6px;
|
|
3768
|
-
align-items: center;
|
|
3769
|
-
flex-wrap: wrap;
|
|
3770
|
-
gap: 0 6px;
|
|
3771
|
-
cursor: pointer;
|
|
3772
|
-
}
|
|
3773
|
-
.form-select:not(.is-disabled) {
|
|
3774
|
-
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
3775
|
-
outline-offset: 0;
|
|
4093
|
+
.form-field-addition-hint {
|
|
4094
|
+
color: var(--foreground-secondary);
|
|
3776
4095
|
}
|
|
3777
|
-
|
|
3778
|
-
|
|
3779
|
-
|
|
4096
|
+
|
|
4097
|
+
.form-field-addition + .form-field-addition {
|
|
4098
|
+
margin-top: 0;
|
|
3780
4099
|
}
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
4100
|
+
|
|
4101
|
+
.form-input {
|
|
4102
|
+
position: relative;
|
|
4103
|
+
display: block;
|
|
4104
|
+
height: 42px;
|
|
4105
|
+
width: 100%;
|
|
4106
|
+
padding: 0 12px;
|
|
4107
|
+
background: var(--surface);
|
|
4108
|
+
background-clip: padding-box;
|
|
4109
|
+
border: 1px solid var(--surface-stroke);
|
|
4110
|
+
border-radius: var(--radius);
|
|
4111
|
+
box-shadow: var(--shadow-px);
|
|
4112
|
+
color: var(--foreground);
|
|
4113
|
+
outline: 0 solid transparent;
|
|
4114
|
+
transition: var(--transition-default);
|
|
4115
|
+
transition-property: background, border-color, outline-color, outline-offset;
|
|
3785
4116
|
}
|
|
3786
|
-
.form-
|
|
3787
|
-
|
|
4117
|
+
.form-input::placeholder {
|
|
4118
|
+
color: var(--foreground-secondary);
|
|
3788
4119
|
}
|
|
3789
|
-
.form-
|
|
3790
|
-
|
|
3791
|
-
|
|
4120
|
+
.form-input.is-secondary {
|
|
4121
|
+
background: var(--gray-100);
|
|
4122
|
+
border-color: transparent;
|
|
4123
|
+
box-shadow: none;
|
|
3792
4124
|
}
|
|
3793
|
-
.form-
|
|
3794
|
-
|
|
3795
|
-
margin-bottom: 6px;
|
|
3796
|
-
max-width: 100%;
|
|
3797
|
-
flex: 0 0 auto;
|
|
4125
|
+
.form-input.is-condensed {
|
|
4126
|
+
height: 34px;
|
|
3798
4127
|
}
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
position: absolute;
|
|
3802
|
-
top: 50%;
|
|
3803
|
-
right: 12px;
|
|
3804
|
-
translate: 0 -50%;
|
|
4128
|
+
.form-input.is-invalid {
|
|
4129
|
+
border-color: var(--danger-500);
|
|
3805
4130
|
}
|
|
3806
4131
|
|
|
3807
|
-
.form-
|
|
3808
|
-
|
|
3809
|
-
top: 0;
|
|
3810
|
-
height: 48px;
|
|
3811
|
-
margin-bottom: 9px;
|
|
3812
|
-
background: var(--surface);
|
|
3813
|
-
border-top: 0;
|
|
3814
|
-
border-left: 0;
|
|
3815
|
-
border-right: 0;
|
|
3816
|
-
border-radius: 0;
|
|
3817
|
-
outline: 0;
|
|
3818
|
-
z-index: 2;
|
|
3819
|
-
outline: 0 !important;
|
|
3820
|
-
}
|
|
3821
|
-
.form-select-input .form-input-icon {
|
|
3822
|
-
right: 0;
|
|
3823
|
-
margin: 15px;
|
|
3824
|
-
font-size: 18px;
|
|
3825
|
-
}
|
|
3826
|
-
.form-select-input .form-input-native {
|
|
3827
|
-
padding-left: 18px;
|
|
3828
|
-
padding-right: 18px;
|
|
4132
|
+
.form .form-input {
|
|
4133
|
+
align-self: start;
|
|
3829
4134
|
}
|
|
3830
4135
|
|
|
3831
|
-
.form-
|
|
3832
|
-
|
|
3833
|
-
margin-right: 6px;
|
|
4136
|
+
.form-input-disabled {
|
|
4137
|
+
background: var(--surface-disabled);
|
|
3834
4138
|
color: var(--foreground-secondary);
|
|
3835
|
-
|
|
4139
|
+
cursor: not-allowed;
|
|
3836
4140
|
}
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
position: fixed;
|
|
3840
|
-
display: block;
|
|
3841
|
-
top: 0;
|
|
3842
|
-
left: 0;
|
|
3843
|
-
width: var(--width, auto);
|
|
3844
|
-
max-height: max(330px, 50dvh);
|
|
3845
|
-
min-width: 120px;
|
|
3846
|
-
box-shadow: var(--shadow-md);
|
|
3847
|
-
overflow: auto;
|
|
3848
|
-
translate: var(--x) var(--y);
|
|
3849
|
-
z-index: 10000;
|
|
4141
|
+
.form-input-disabled input {
|
|
4142
|
+
cursor: inherit;
|
|
3850
4143
|
}
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
4144
|
+
|
|
4145
|
+
.form-input-enabled {
|
|
4146
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4147
|
+
outline-offset: 0;
|
|
3854
4148
|
}
|
|
3855
|
-
.form-
|
|
3856
|
-
|
|
4149
|
+
.form-input-enabled:focus-visible, .form-input-enabled:focus-within {
|
|
4150
|
+
outline-color: var(--primary-600);
|
|
4151
|
+
outline-offset: -1px;
|
|
3857
4152
|
}
|
|
3858
|
-
|
|
3859
|
-
|
|
4153
|
+
@media (hover: hover) {
|
|
4154
|
+
.form-input-enabled:hover {
|
|
4155
|
+
border-color: var(--surface-stroke-hover);
|
|
4156
|
+
}
|
|
3860
4157
|
}
|
|
3861
4158
|
|
|
3862
|
-
.form-
|
|
4159
|
+
.form-input-icon {
|
|
3863
4160
|
position: absolute;
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
inset: -1px;
|
|
4161
|
+
margin-top: 11px;
|
|
4162
|
+
margin-bottom: 11px;
|
|
4163
|
+
color: var(--foreground-secondary);
|
|
3868
4164
|
pointer-events: none;
|
|
3869
4165
|
}
|
|
3870
|
-
.form-select-selected .button-label {
|
|
3871
|
-
overflow: hidden;
|
|
3872
|
-
text-overflow: ellipsis;
|
|
3873
|
-
white-space: nowrap;
|
|
3874
|
-
}
|
|
3875
|
-
|
|
3876
|
-
.is-disabled .form-select-icon {
|
|
3877
|
-
opacity: 0.5;
|
|
3878
|
-
}
|
|
3879
4166
|
|
|
3880
|
-
.
|
|
3881
|
-
|
|
3882
|
-
border: 1px solid var(--surface-stroke);
|
|
3883
|
-
color: var(--foreground-secondary);
|
|
3884
|
-
opacity: 1;
|
|
4167
|
+
.form-input-icon-trailing {
|
|
4168
|
+
right: 12px;
|
|
3885
4169
|
}
|
|
3886
4170
|
|
|
3887
|
-
.form-
|
|
3888
|
-
|
|
3889
|
-
min-height: calc(20px + var(--rows, 1) * 1lh);
|
|
3890
|
-
padding-top: 9px;
|
|
3891
|
-
padding-bottom: 9px;
|
|
3892
|
-
flex-shrink: 0;
|
|
3893
|
-
field-sizing: content;
|
|
3894
|
-
resize: vertical;
|
|
4171
|
+
.form-input-icon-leading {
|
|
4172
|
+
left: 12px;
|
|
3895
4173
|
}
|
|
3896
4174
|
|
|
3897
|
-
.form-
|
|
4175
|
+
.form-input-icon-password-toggle {
|
|
4176
|
+
pointer-events: unset;
|
|
4177
|
+
cursor: pointer;
|
|
3898
4178
|
}
|
|
3899
|
-
|
|
3900
|
-
.form-
|
|
4179
|
+
@media (hover: hover) {
|
|
4180
|
+
.form-input-icon-password-toggle:hover {
|
|
4181
|
+
color: var(--foreground);
|
|
4182
|
+
}
|
|
3901
4183
|
}
|
|
3902
4184
|
|
|
3903
|
-
.
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
4185
|
+
.form-input-native {
|
|
4186
|
+
position: absolute;
|
|
4187
|
+
inset: 0;
|
|
4188
|
+
height: 100%;
|
|
4189
|
+
width: 100%;
|
|
4190
|
+
padding: 0 12px;
|
|
4191
|
+
background: unset;
|
|
4192
|
+
border: 0;
|
|
4193
|
+
border-radius: inherit;
|
|
4194
|
+
color: inherit;
|
|
4195
|
+
font: inherit;
|
|
3908
4196
|
outline: 0;
|
|
4197
|
+
text-align: left;
|
|
3909
4198
|
}
|
|
3910
|
-
.
|
|
3911
|
-
cursor: not-allowed;
|
|
3912
|
-
}
|
|
3913
|
-
.checkbox.is-disabled .checkbox-element {
|
|
3914
|
-
background: var(--surface-disabled);
|
|
3915
|
-
border-color: var(--surface-stroke);
|
|
3916
|
-
color: var(--foreground-secondary);
|
|
3917
|
-
}
|
|
3918
|
-
.checkbox.is-disabled .checkbox-label {
|
|
4199
|
+
.form-input-native::placeholder {
|
|
3919
4200
|
color: var(--foreground-secondary);
|
|
3920
4201
|
}
|
|
3921
|
-
.
|
|
3922
|
-
|
|
3923
|
-
}
|
|
3924
|
-
.checkbox.is-readonly .checkbox-native {
|
|
3925
|
-
pointer-events: none;
|
|
3926
|
-
}
|
|
3927
|
-
.checkbox.is-invalid .checkbox-element {
|
|
3928
|
-
border-color: var(--danger-500);
|
|
3929
|
-
}
|
|
3930
|
-
|
|
3931
|
-
.checkbox-element,
|
|
3932
|
-
.checkbox-native {
|
|
3933
|
-
margin: 1px 0 0;
|
|
3934
|
-
height: 20px;
|
|
3935
|
-
width: 20px;
|
|
4202
|
+
.form-input-native::-webkit-search-decoration, .form-input-native::-webkit-search-cancel-button, .form-input-native::-webkit-search-results-button, .form-input-native::-webkit-search-results-decoration {
|
|
4203
|
+
-webkit-appearance: none;
|
|
3936
4204
|
}
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
position: relative;
|
|
3940
|
-
display: inline-flex;
|
|
3941
|
-
height: 20px;
|
|
3942
|
-
width: 20px;
|
|
3943
|
-
padding: 0;
|
|
3944
|
-
align-items: center;
|
|
3945
|
-
justify-content: center;
|
|
3946
|
-
background: var(--gray-50);
|
|
3947
|
-
border: 1px solid var(--gray-200);
|
|
4205
|
+
.form-input-native::-webkit-color-swatch {
|
|
4206
|
+
border: 0;
|
|
3948
4207
|
border-radius: var(--radius-half);
|
|
3949
|
-
color: var(--primary-25);
|
|
3950
|
-
cursor: pointer;
|
|
3951
|
-
pointer-events: none;
|
|
3952
|
-
transition: 210ms var(--swift-out);
|
|
3953
|
-
transition-property: background, border-color, color, outline-color, outline-offset;
|
|
3954
|
-
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
3955
|
-
outline-offset: 0;
|
|
3956
4208
|
}
|
|
3957
|
-
.
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
4209
|
+
.form-input-native::-webkit-color-swatch-wrapper {
|
|
4210
|
+
width: calc(100% + 24px);
|
|
4211
|
+
margin: 0 -12px;
|
|
4212
|
+
padding: 3px;
|
|
4213
|
+
}
|
|
4214
|
+
|
|
4215
|
+
.form-input-native-has-icon-leading {
|
|
4216
|
+
padding-left: 42px;
|
|
3962
4217
|
}
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
4218
|
+
|
|
4219
|
+
.form-input-native-has-icon-trailing {
|
|
4220
|
+
padding-right: 42px;
|
|
3966
4221
|
}
|
|
3967
4222
|
|
|
3968
|
-
.
|
|
3969
|
-
|
|
4223
|
+
.form-number-input-native {
|
|
4224
|
+
padding-right: 38px;
|
|
4225
|
+
appearance: textfield;
|
|
4226
|
+
-moz-appearance: textfield;
|
|
4227
|
+
font-variant-numeric: tabular-nums;
|
|
4228
|
+
}
|
|
4229
|
+
.form-number-input-native::-webkit-outer-spin-button, .form-number-input-native::-webkit-inner-spin-button {
|
|
4230
|
+
margin: 0;
|
|
4231
|
+
-webkit-appearance: none;
|
|
3970
4232
|
}
|
|
3971
4233
|
|
|
3972
|
-
.
|
|
4234
|
+
.form-number-input-buttons {
|
|
3973
4235
|
position: absolute;
|
|
4236
|
+
top: 0;
|
|
4237
|
+
right: 0;
|
|
4238
|
+
bottom: 0;
|
|
4239
|
+
display: flex;
|
|
4240
|
+
flex-direction: column;
|
|
4241
|
+
width: 33px;
|
|
4242
|
+
border-left: 1px solid var(--surface-stroke);
|
|
4243
|
+
border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
|
|
4244
|
+
overflow: hidden;
|
|
4245
|
+
}
|
|
4246
|
+
|
|
4247
|
+
.form-number-input-button {
|
|
4248
|
+
display: flex;
|
|
4249
|
+
flex: 1 1 0;
|
|
4250
|
+
margin: 0;
|
|
4251
|
+
padding: 0;
|
|
4252
|
+
align-items: center;
|
|
4253
|
+
justify-content: center;
|
|
4254
|
+
background: var(--surface);
|
|
4255
|
+
border: 0;
|
|
4256
|
+
color: var(--foreground-secondary);
|
|
3974
4257
|
cursor: pointer;
|
|
3975
|
-
|
|
4258
|
+
transition: var(--transition-default);
|
|
4259
|
+
transition-property: background, color;
|
|
4260
|
+
}
|
|
4261
|
+
.form-number-input-button + .form-number-input-button {
|
|
4262
|
+
border-top: 1px solid var(--surface-stroke);
|
|
3976
4263
|
}
|
|
3977
4264
|
@media (hover: hover) {
|
|
3978
|
-
.
|
|
3979
|
-
background: var(--
|
|
4265
|
+
.form-number-input-button:hover {
|
|
4266
|
+
background: var(--surface-hover);
|
|
4267
|
+
color: var(--foreground);
|
|
3980
4268
|
}
|
|
3981
4269
|
}
|
|
3982
|
-
.
|
|
3983
|
-
|
|
3984
|
-
|
|
4270
|
+
.form-number-input-button:disabled {
|
|
4271
|
+
color: var(--surface-stroke);
|
|
4272
|
+
cursor: not-allowed;
|
|
3985
4273
|
}
|
|
3986
|
-
|
|
3987
|
-
|
|
4274
|
+
|
|
4275
|
+
.form-input-addition {
|
|
4276
|
+
display: flex;
|
|
4277
|
+
width: unset;
|
|
4278
|
+
align-items: center;
|
|
4279
|
+
flex-grow: 0;
|
|
4280
|
+
justify-content: center;
|
|
4281
|
+
background: var(--surface-disabled);
|
|
4282
|
+
color: var(--foreground-secondary);
|
|
4283
|
+
pointer-events: none;
|
|
3988
4284
|
}
|
|
3989
|
-
.
|
|
3990
|
-
|
|
3991
|
-
outline-offset: 2px;
|
|
4285
|
+
.form-input-addition:has(+ .form-input .form-input-native) {
|
|
4286
|
+
border-right: 1px solid var(--surface-stroke);
|
|
3992
4287
|
}
|
|
3993
|
-
.
|
|
3994
|
-
|
|
4288
|
+
.form-input-addition + .form-input-addition {
|
|
4289
|
+
border-left: 1px solid var(--surface-stroke);
|
|
3995
4290
|
}
|
|
3996
|
-
.
|
|
3997
|
-
|
|
3998
|
-
border-color: var(--gray-200);
|
|
3999
|
-
color: var(--foreground-secondary);
|
|
4291
|
+
.form-input:has(.form-input-native) + .form-input-addition {
|
|
4292
|
+
border-left: 1px solid var(--surface-stroke);
|
|
4000
4293
|
}
|
|
4001
4294
|
|
|
4002
|
-
.
|
|
4003
|
-
|
|
4004
|
-
|
|
4005
|
-
justify-self: center;
|
|
4006
|
-
border: 1px solid var(--surface-stroke);
|
|
4007
|
-
border-radius: var(--radius);
|
|
4008
|
-
box-shadow: var(--shadow-px);
|
|
4009
|
-
overflow: hidden;
|
|
4010
|
-
transition: var(--transition-default);
|
|
4011
|
-
transition-property: border-color, outline-color, outline-offset;
|
|
4295
|
+
.form-input-group {
|
|
4296
|
+
display: flex;
|
|
4297
|
+
padding: 0;
|
|
4012
4298
|
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4013
4299
|
outline-offset: 0;
|
|
4014
4300
|
}
|
|
4015
|
-
.
|
|
4301
|
+
.form-input-group:focus-visible, .form-input-group:focus-within {
|
|
4016
4302
|
outline-color: var(--primary-600);
|
|
4017
|
-
outline-offset:
|
|
4303
|
+
outline-offset: -1px;
|
|
4304
|
+
}
|
|
4305
|
+
.form-input-group > :is(.form-input, .form-select, .button) + :is(.button, .button-group) {
|
|
4306
|
+
margin: 0;
|
|
4307
|
+
border-left: 1px solid var(--surface-stroke);
|
|
4308
|
+
}
|
|
4309
|
+
.form-input-group > .button-group > .button + .button {
|
|
4310
|
+
margin: 0;
|
|
4311
|
+
border-left: 1px solid var(--surface-stroke);
|
|
4312
|
+
}
|
|
4313
|
+
.form-input-group > .button-group:not(:first-child) > .button:first-child {
|
|
4314
|
+
border-top-left-radius: 0;
|
|
4315
|
+
border-bottom-left-radius: 0;
|
|
4316
|
+
}
|
|
4317
|
+
.form-input-group.is-condensed .form-input-addition:not(:last-child), .form-input-group.is-secondary .form-input-addition:not(:last-child) {
|
|
4318
|
+
padding-right: 0;
|
|
4319
|
+
background: unset;
|
|
4320
|
+
border-color: transparent;
|
|
4321
|
+
}
|
|
4322
|
+
.form-input-group.is-secondary .form-input {
|
|
4323
|
+
background: transparent;
|
|
4324
|
+
border-color: transparent;
|
|
4325
|
+
box-shadow: none;
|
|
4326
|
+
}
|
|
4327
|
+
.form-input-group.is-secondary .secondary-button {
|
|
4328
|
+
background: transparent;
|
|
4329
|
+
border-color: var(--surface-stroke);
|
|
4330
|
+
box-shadow: none;
|
|
4018
4331
|
}
|
|
4019
4332
|
@media (hover: hover) {
|
|
4020
|
-
.
|
|
4021
|
-
|
|
4333
|
+
.form-input-group.is-secondary .secondary-button:hover {
|
|
4334
|
+
background: var(--surface-stroke-hover);
|
|
4022
4335
|
}
|
|
4023
4336
|
}
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
margin: -1px;
|
|
4027
|
-
border: 0;
|
|
4337
|
+
.form-input-group:has(*:disabled) {
|
|
4338
|
+
cursor: not-allowed;
|
|
4028
4339
|
}
|
|
4029
|
-
.
|
|
4030
|
-
|
|
4340
|
+
.form-input-group:has(*:disabled) > * {
|
|
4341
|
+
pointer-events: none;
|
|
4031
4342
|
}
|
|
4032
|
-
.
|
|
4033
|
-
|
|
4343
|
+
.form-input-group :is(.button[disabled]),
|
|
4344
|
+
.form-input-group :is(.button[aria-disabled=true]) {
|
|
4345
|
+
background: var(--surface-disabled);
|
|
4346
|
+
opacity: 1;
|
|
4034
4347
|
}
|
|
4035
|
-
.
|
|
4036
|
-
|
|
4348
|
+
.form-input-group :is(.button[disabled]),
|
|
4349
|
+
.form-input-group :is(.button[disabled]) .button-icon,
|
|
4350
|
+
.form-input-group :is(.button[aria-disabled=true]),
|
|
4351
|
+
.form-input-group :is(.button[aria-disabled=true]) .button-icon {
|
|
4352
|
+
color: var(--foreground-secondary);
|
|
4037
4353
|
}
|
|
4038
4354
|
|
|
4039
|
-
.
|
|
4040
|
-
|
|
4041
|
-
padding-left: 0;
|
|
4042
|
-
padding-right: 0;
|
|
4043
|
-
border-radius: 0;
|
|
4044
|
-
font-variant-numeric: tabular-nums;
|
|
4045
|
-
font-weight: 700;
|
|
4046
|
-
text-align: center;
|
|
4047
|
-
}
|
|
4048
|
-
.quantity-selector-input:hover {
|
|
4049
|
-
border-color: var(--surface-stroke-hover);
|
|
4355
|
+
.form-date-input {
|
|
4356
|
+
cursor: default;
|
|
4050
4357
|
}
|
|
4051
|
-
.
|
|
4052
|
-
|
|
4358
|
+
.form-date-input :is(input) {
|
|
4359
|
+
text-align: left;
|
|
4053
4360
|
}
|
|
4054
|
-
.
|
|
4055
|
-
|
|
4361
|
+
.form-date-input :is(input)::-webkit-input-placeholder {
|
|
4362
|
+
visibility: hidden;
|
|
4056
4363
|
}
|
|
4057
|
-
.
|
|
4364
|
+
.form-date-input :is(input)::-webkit-calendar-picker-indicator {
|
|
4365
|
+
display: none;
|
|
4058
4366
|
-webkit-appearance: none;
|
|
4059
|
-
margin: 0;
|
|
4060
4367
|
}
|
|
4061
4368
|
|
|
4062
|
-
.
|
|
4063
|
-
display:
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
grid-template-columns: repeat(var(--max-length, 0), 1fr);
|
|
4067
|
-
margin: 0;
|
|
4068
|
-
padding: 0;
|
|
4069
|
-
border: 0;
|
|
4070
|
-
font-size: 24px;
|
|
4071
|
-
font-weight: 700;
|
|
4369
|
+
.form-date-range-input {
|
|
4370
|
+
display: flex;
|
|
4371
|
+
align-items: center;
|
|
4372
|
+
cursor: default;
|
|
4072
4373
|
}
|
|
4073
4374
|
|
|
4074
|
-
.
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
|
|
4078
|
-
|
|
4079
|
-
box-shadow: var(--shadow-px);
|
|
4080
|
-
font: inherit;
|
|
4081
|
-
line-height: 3.3ch;
|
|
4082
|
-
outline: 0;
|
|
4083
|
-
text-align: center;
|
|
4084
|
-
transition: var(--transition-default);
|
|
4085
|
-
transition-property: border-color, outline-color, outline-offset;
|
|
4375
|
+
.form-date-time-input .form-input:last-child {
|
|
4376
|
+
max-width: 99px;
|
|
4377
|
+
}
|
|
4378
|
+
.form-date-time-input .input-group {
|
|
4379
|
+
flex-grow: 1;
|
|
4086
4380
|
}
|
|
4087
4381
|
|
|
4088
|
-
.
|
|
4382
|
+
.form-time-input {
|
|
4089
4383
|
}
|
|
4090
|
-
|
|
4091
|
-
|
|
4092
|
-
|
|
4384
|
+
|
|
4385
|
+
.form-select {
|
|
4386
|
+
position: relative;
|
|
4387
|
+
display: flex;
|
|
4388
|
+
height: unset;
|
|
4389
|
+
min-height: 42px;
|
|
4390
|
+
padding: 0 39px 0 6px;
|
|
4391
|
+
align-items: center;
|
|
4392
|
+
flex-wrap: wrap;
|
|
4393
|
+
gap: 0 6px;
|
|
4394
|
+
cursor: pointer;
|
|
4395
|
+
}
|
|
4396
|
+
.form-select:not(.is-disabled) {
|
|
4093
4397
|
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4094
4398
|
outline-offset: 0;
|
|
4095
4399
|
}
|
|
4096
|
-
.
|
|
4400
|
+
.form-select:not(.is-disabled):focus-visible, .form-select:not(.is-disabled):focus-within {
|
|
4097
4401
|
outline-color: var(--primary-600);
|
|
4098
4402
|
outline-offset: -1px;
|
|
4099
4403
|
}
|
|
4100
|
-
|
|
4101
|
-
.
|
|
4404
|
+
@media (hover: hover) {
|
|
4405
|
+
.form-select:not(.is-disabled):hover {
|
|
4406
|
+
border-color: var(--surface-stroke-hover);
|
|
4407
|
+
}
|
|
4102
4408
|
}
|
|
4103
|
-
.
|
|
4104
|
-
background-color: var(--surface-disabled);
|
|
4105
|
-
color: var(--foreground-secondary);
|
|
4409
|
+
.form-select.is-disabled {
|
|
4106
4410
|
cursor: not-allowed;
|
|
4107
4411
|
}
|
|
4108
|
-
|
|
4109
|
-
.toggle {
|
|
4110
|
-
position: relative;
|
|
4111
|
-
display: block;
|
|
4112
|
-
width: 54px;
|
|
4113
|
-
height: 30px;
|
|
4114
|
-
flex: 0 0 auto;
|
|
4115
|
-
background: var(--gray-50);
|
|
4116
|
-
border: 1px solid var(--gray-200);
|
|
4117
|
-
border-radius: var(--radius-full);
|
|
4118
|
-
contain: paint;
|
|
4119
|
-
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4120
|
-
outline-offset: 0;
|
|
4121
|
-
}
|
|
4122
|
-
.toggle:has(.toggle-input:focus-visible) {
|
|
4412
|
+
.form-select.is-focused {
|
|
4123
4413
|
outline-color: var(--primary-600);
|
|
4124
|
-
outline-offset:
|
|
4414
|
+
outline-offset: -1px;
|
|
4125
4415
|
}
|
|
4126
|
-
.
|
|
4127
|
-
|
|
4416
|
+
.form-select .badge {
|
|
4417
|
+
margin-top: 6px;
|
|
4418
|
+
margin-bottom: 6px;
|
|
4419
|
+
max-width: 100%;
|
|
4420
|
+
flex: 0 0 auto;
|
|
4128
4421
|
}
|
|
4129
|
-
|
|
4130
|
-
|
|
4422
|
+
|
|
4423
|
+
.form-select-icon {
|
|
4424
|
+
position: absolute;
|
|
4425
|
+
top: 50%;
|
|
4426
|
+
right: 12px;
|
|
4427
|
+
translate: 0 -50%;
|
|
4131
4428
|
}
|
|
4132
|
-
|
|
4133
|
-
|
|
4429
|
+
|
|
4430
|
+
.form-select-input {
|
|
4431
|
+
position: sticky;
|
|
4432
|
+
top: 0;
|
|
4433
|
+
height: 48px;
|
|
4434
|
+
margin-bottom: 9px;
|
|
4435
|
+
background: var(--surface);
|
|
4436
|
+
border-top: 0;
|
|
4437
|
+
border-left: 0;
|
|
4438
|
+
border-right: 0;
|
|
4439
|
+
border-radius: 0;
|
|
4440
|
+
outline: 0;
|
|
4441
|
+
z-index: 2;
|
|
4442
|
+
outline: 0 !important;
|
|
4134
4443
|
}
|
|
4135
|
-
.
|
|
4136
|
-
|
|
4444
|
+
.form-select-input .form-input-icon {
|
|
4445
|
+
right: 0;
|
|
4446
|
+
margin: 15px;
|
|
4447
|
+
font-size: 18px;
|
|
4137
4448
|
}
|
|
4138
|
-
.
|
|
4139
|
-
|
|
4449
|
+
.form-select-input .form-input-native {
|
|
4450
|
+
padding-left: 18px;
|
|
4451
|
+
padding-right: 18px;
|
|
4140
4452
|
}
|
|
4141
|
-
|
|
4142
|
-
|
|
4453
|
+
|
|
4454
|
+
.form-select-placeholder {
|
|
4455
|
+
margin-left: 6px;
|
|
4456
|
+
margin-right: 6px;
|
|
4457
|
+
color: var(--foreground-secondary);
|
|
4458
|
+
user-select: none;
|
|
4143
4459
|
}
|
|
4144
|
-
|
|
4145
|
-
|
|
4460
|
+
|
|
4461
|
+
.form-select-popup {
|
|
4462
|
+
position: fixed;
|
|
4463
|
+
display: block;
|
|
4464
|
+
top: 0;
|
|
4465
|
+
left: 0;
|
|
4466
|
+
width: var(--width, auto);
|
|
4467
|
+
max-height: max(330px, 50dvh);
|
|
4468
|
+
min-width: 120px;
|
|
4469
|
+
box-shadow: var(--shadow-md);
|
|
4470
|
+
overflow: auto;
|
|
4471
|
+
translate: var(--x) var(--y);
|
|
4472
|
+
z-index: 10000;
|
|
4146
4473
|
}
|
|
4147
|
-
.
|
|
4148
|
-
|
|
4149
|
-
|
|
4474
|
+
.form-select-popup .menu-item {
|
|
4475
|
+
contain-intrinsic-size: auto 42px;
|
|
4476
|
+
content-visibility: auto;
|
|
4150
4477
|
}
|
|
4151
|
-
.
|
|
4152
|
-
|
|
4478
|
+
.form-select-popup.is-keyboard-action .menu-item {
|
|
4479
|
+
transition: 0s;
|
|
4153
4480
|
}
|
|
4154
|
-
.
|
|
4155
|
-
|
|
4481
|
+
.form-select-popup.is-searchable .menu-sub-header {
|
|
4482
|
+
top: 48px;
|
|
4156
4483
|
}
|
|
4157
4484
|
|
|
4158
|
-
.
|
|
4485
|
+
.form-select-selected {
|
|
4159
4486
|
position: absolute;
|
|
4160
|
-
|
|
4161
|
-
|
|
4487
|
+
height: 100%;
|
|
4488
|
+
padding-left: 12px;
|
|
4489
|
+
padding-right: 42px;
|
|
4490
|
+
inset: -1px;
|
|
4162
4491
|
pointer-events: none;
|
|
4163
|
-
translate: -50% -50%;
|
|
4164
4492
|
}
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4493
|
+
.form-select-selected .button-label {
|
|
4494
|
+
overflow: hidden;
|
|
4495
|
+
text-overflow: ellipsis;
|
|
4496
|
+
white-space: nowrap;
|
|
4168
4497
|
}
|
|
4169
4498
|
|
|
4170
|
-
.
|
|
4171
|
-
|
|
4499
|
+
.is-disabled .form-select-icon {
|
|
4500
|
+
opacity: 0.5;
|
|
4172
4501
|
}
|
|
4173
4502
|
|
|
4174
|
-
.
|
|
4175
|
-
|
|
4176
|
-
appearance: none;
|
|
4177
|
-
position: relative;
|
|
4178
|
-
display: block;
|
|
4179
|
-
margin: 0;
|
|
4180
|
-
height: inherit;
|
|
4181
|
-
width: inherit;
|
|
4182
|
-
background: unset;
|
|
4183
|
-
border: 0;
|
|
4184
|
-
border-radius: inherit;
|
|
4185
|
-
cursor: pointer;
|
|
4186
|
-
outline: 0;
|
|
4187
|
-
}
|
|
4188
|
-
.toggle-input::after {
|
|
4189
|
-
position: absolute;
|
|
4190
|
-
display: block;
|
|
4191
|
-
top: 2px;
|
|
4192
|
-
left: 2px;
|
|
4193
|
-
height: 24px;
|
|
4194
|
-
width: 24px;
|
|
4195
|
-
content: "";
|
|
4196
|
-
background: var(--surface);
|
|
4503
|
+
.is-disabled .form-select-selected {
|
|
4504
|
+
background: var(--surface-disabled);
|
|
4197
4505
|
border: 1px solid var(--surface-stroke);
|
|
4198
|
-
|
|
4199
|
-
|
|
4506
|
+
color: var(--foreground-secondary);
|
|
4507
|
+
opacity: 1;
|
|
4200
4508
|
}
|
|
4201
4509
|
|
|
4202
|
-
.
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
|
|
4210
|
-
height: 36px;
|
|
4211
|
-
padding: 0 12px;
|
|
4212
|
-
align-items: center;
|
|
4213
|
-
flex-grow: 0;
|
|
4214
|
-
gap: 9px;
|
|
4215
|
-
background: var(--gray-50);
|
|
4216
|
-
border: 1px solid var(--gray-200);
|
|
4217
|
-
border-radius: var(--radius-full);
|
|
4218
|
-
color: var(--foreground);
|
|
4219
|
-
transition: var(--transition-default);
|
|
4220
|
-
transition-property: background, border, color, outline-color, outline-offset;
|
|
4221
|
-
}
|
|
4222
|
-
.chip.is-selectable {
|
|
4223
|
-
cursor: pointer;
|
|
4224
|
-
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4225
|
-
outline-offset: 0;
|
|
4226
|
-
}
|
|
4227
|
-
.chip.is-selectable:focus-visible {
|
|
4228
|
-
outline-color: var(--primary-600);
|
|
4229
|
-
outline-offset: 2px;
|
|
4230
|
-
}
|
|
4231
|
-
@media (hover: hover) {
|
|
4232
|
-
.chip.is-selectable:hover {
|
|
4233
|
-
background: var(--gray-100);
|
|
4234
|
-
}
|
|
4235
|
-
}
|
|
4236
|
-
.chip.is-selected {
|
|
4237
|
-
background: var(--primary-50);
|
|
4238
|
-
border-color: var(--primary-200);
|
|
4239
|
-
color: var(--primary-600);
|
|
4240
|
-
}
|
|
4241
|
-
@media (hover: hover) {
|
|
4242
|
-
.chip.is-selected:hover {
|
|
4243
|
-
background: var(--primary-100);
|
|
4244
|
-
}
|
|
4510
|
+
.form-text-area {
|
|
4511
|
+
height: unset;
|
|
4512
|
+
min-height: calc(20px + var(--rows, 1) * 1lh);
|
|
4513
|
+
padding-top: 9px;
|
|
4514
|
+
padding-bottom: 9px;
|
|
4515
|
+
flex-shrink: 0;
|
|
4516
|
+
field-sizing: content;
|
|
4517
|
+
resize: vertical;
|
|
4245
4518
|
}
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
font-weight: 500;
|
|
4249
|
-
white-space: nowrap;
|
|
4250
|
-
}.command-palette-backdrop {
|
|
4251
|
-
position: fixed;
|
|
4252
|
-
inset: 0;
|
|
4253
|
-
background: var(--overlay);
|
|
4254
|
-
backdrop-filter: blur(3px) saturate(180%);
|
|
4255
|
-
animation: command-palette-backdrop-in 300ms var(--swift-out) both;
|
|
4256
|
-
z-index: 99000;
|
|
4519
|
+
|
|
4520
|
+
.form-text-area-disabled {
|
|
4257
4521
|
}
|
|
4258
|
-
|
|
4259
|
-
|
|
4522
|
+
|
|
4523
|
+
.form-text-area-enabled {
|
|
4260
4524
|
}
|
|
4261
4525
|
|
|
4262
|
-
.
|
|
4263
|
-
position: fixed;
|
|
4264
|
-
inset: 0;
|
|
4526
|
+
.form-checkbox-group {
|
|
4265
4527
|
display: flex;
|
|
4266
|
-
|
|
4528
|
+
flex-direction: column;
|
|
4267
4529
|
align-items: flex-start;
|
|
4268
|
-
|
|
4269
|
-
animation: command-palette-in 300ms var(--swift-out) both;
|
|
4270
|
-
z-index: 99001;
|
|
4271
|
-
}
|
|
4272
|
-
.command-palette-dialog.is-closing {
|
|
4273
|
-
animation: command-palette-out 210ms var(--swift-out) both;
|
|
4274
|
-
pointer-events: none;
|
|
4530
|
+
gap: 12px;
|
|
4275
4531
|
}
|
|
4276
|
-
|
|
4277
|
-
|
|
4278
|
-
|
|
4279
|
-
|
|
4280
|
-
width: min(600px, 100dvw - 48px);
|
|
4281
|
-
max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
|
|
4282
|
-
flex-flow: column nowrap;
|
|
4283
|
-
background: var(--surface);
|
|
4284
|
-
background-clip: padding-box;
|
|
4285
|
-
border: 1px solid var(--surface-stroke-out);
|
|
4286
|
-
border-radius: var(--radius);
|
|
4287
|
-
box-shadow: var(--shadow-lg);
|
|
4288
|
-
transition: height 120ms var(--deceleration-curve);
|
|
4532
|
+
.form-checkbox-group.is-inline {
|
|
4533
|
+
flex-direction: row;
|
|
4534
|
+
flex-wrap: wrap;
|
|
4535
|
+
gap: 8px 20px;
|
|
4289
4536
|
}
|
|
4290
4537
|
|
|
4291
|
-
.
|
|
4292
|
-
display: flex;
|
|
4293
|
-
height: 54px;
|
|
4294
|
-
padding: 0 18px;
|
|
4295
|
-
align-items: center;
|
|
4538
|
+
.form-checkbox {
|
|
4539
|
+
display: inline-flex;
|
|
4296
4540
|
flex-shrink: 0;
|
|
4541
|
+
align-items: flex-start;
|
|
4297
4542
|
gap: 12px;
|
|
4298
|
-
|
|
4543
|
+
line-height: 21px;
|
|
4544
|
+
outline: 0;
|
|
4299
4545
|
}
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
flex-shrink: 0;
|
|
4303
|
-
color: var(--foreground-secondary);
|
|
4304
|
-
font-size: 16px;
|
|
4546
|
+
.form-checkbox.is-disabled {
|
|
4547
|
+
cursor: not-allowed;
|
|
4305
4548
|
}
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
background: transparent;
|
|
4311
|
-
border: 0;
|
|
4312
|
-
color: var(--foreground);
|
|
4313
|
-
font: inherit;
|
|
4314
|
-
font-size: 16px;
|
|
4315
|
-
outline: 0;
|
|
4549
|
+
.form-checkbox.is-disabled .form-checkbox-element {
|
|
4550
|
+
background: var(--surface-disabled);
|
|
4551
|
+
border-color: var(--surface-stroke);
|
|
4552
|
+
color: var(--foreground-secondary);
|
|
4316
4553
|
}
|
|
4317
|
-
.
|
|
4554
|
+
.form-checkbox.is-disabled .form-checkbox-label {
|
|
4318
4555
|
color: var(--foreground-secondary);
|
|
4319
4556
|
}
|
|
4557
|
+
.form-checkbox.is-readonly {
|
|
4558
|
+
cursor: default;
|
|
4559
|
+
}
|
|
4560
|
+
.form-checkbox.is-readonly .form-checkbox-native {
|
|
4561
|
+
pointer-events: none;
|
|
4562
|
+
}
|
|
4563
|
+
.form-checkbox.is-invalid .form-checkbox-element {
|
|
4564
|
+
border-color: var(--danger-500);
|
|
4565
|
+
}
|
|
4320
4566
|
|
|
4321
|
-
.
|
|
4567
|
+
.form-checkbox-element,
|
|
4568
|
+
.form-checkbox-native {
|
|
4569
|
+
margin: 1px 0 0;
|
|
4570
|
+
height: 20px;
|
|
4571
|
+
width: 20px;
|
|
4572
|
+
}
|
|
4573
|
+
|
|
4574
|
+
.form-checkbox-element {
|
|
4575
|
+
position: relative;
|
|
4576
|
+
display: inline-flex;
|
|
4577
|
+
height: 20px;
|
|
4578
|
+
width: 20px;
|
|
4322
4579
|
padding: 0;
|
|
4580
|
+
align-items: center;
|
|
4323
4581
|
flex-shrink: 0;
|
|
4324
|
-
|
|
4325
|
-
|
|
4582
|
+
justify-content: center;
|
|
4583
|
+
background: var(--gray-50);
|
|
4584
|
+
border: 1px solid var(--gray-200);
|
|
4585
|
+
border-radius: var(--radius-half);
|
|
4586
|
+
color: var(--primary-25);
|
|
4326
4587
|
cursor: pointer;
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
transition: color 150ms;
|
|
4588
|
+
pointer-events: none;
|
|
4589
|
+
transition: 210ms var(--swift-out);
|
|
4590
|
+
transition-property: background, border-color, color, outline-color, outline-offset;
|
|
4591
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4592
|
+
outline-offset: 0;
|
|
4333
4593
|
}
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
|
|
4337
|
-
|
|
4594
|
+
.form-checkbox-element .icon {
|
|
4595
|
+
opacity: 0;
|
|
4596
|
+
scale: 0.85;
|
|
4597
|
+
transition: inherit;
|
|
4598
|
+
transition-property: opacity;
|
|
4338
4599
|
}
|
|
4339
|
-
|
|
4340
|
-
|
|
4341
|
-
|
|
4342
|
-
opacity: 0.5;
|
|
4343
|
-
color: var(--foreground-secondary);
|
|
4344
|
-
font-size: 14px;
|
|
4600
|
+
.form-checkbox-element .icon :is(path) {
|
|
4601
|
+
stroke: currentColor;
|
|
4602
|
+
stroke-width: 54px;
|
|
4345
4603
|
}
|
|
4346
4604
|
|
|
4347
|
-
.
|
|
4605
|
+
.form-checkbox-text {
|
|
4348
4606
|
display: flex;
|
|
4349
|
-
|
|
4350
|
-
|
|
4351
|
-
padding: 6px 15px;
|
|
4352
|
-
flex-shrink: 0;
|
|
4607
|
+
min-width: 0;
|
|
4608
|
+
flex-direction: column;
|
|
4353
4609
|
gap: 3px;
|
|
4354
|
-
border-bottom: 1px solid var(--gray-100);
|
|
4355
4610
|
}
|
|
4356
|
-
|
|
4357
|
-
|
|
4611
|
+
|
|
4612
|
+
.form-checkbox-label {
|
|
4613
|
+
line-height: 21px;
|
|
4358
4614
|
}
|
|
4359
4615
|
|
|
4360
|
-
.
|
|
4361
|
-
display: flex;
|
|
4362
|
-
height: 30px;
|
|
4363
|
-
padding: 0 10px;
|
|
4364
|
-
align-items: center;
|
|
4365
|
-
gap: 6px;
|
|
4366
|
-
background: transparent;
|
|
4367
|
-
border: 0;
|
|
4368
|
-
border-radius: var(--radius-half);
|
|
4369
|
-
cursor: pointer;
|
|
4616
|
+
.form-checkbox-sub-label {
|
|
4370
4617
|
color: var(--foreground-secondary);
|
|
4371
|
-
font:
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4618
|
+
font-size: 14px;
|
|
4619
|
+
}
|
|
4620
|
+
|
|
4621
|
+
.form-checkbox-native {
|
|
4622
|
+
position: absolute;
|
|
4623
|
+
cursor: pointer;
|
|
4624
|
+
opacity: 0;
|
|
4376
4625
|
}
|
|
4377
4626
|
@media (hover: hover) {
|
|
4378
|
-
.
|
|
4627
|
+
.form-checkbox-native:hover + .form-checkbox-element {
|
|
4379
4628
|
background: var(--gray-100);
|
|
4380
|
-
color: var(--foreground);
|
|
4381
4629
|
}
|
|
4382
4630
|
}
|
|
4383
|
-
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
color: var(--primary-700);
|
|
4631
|
+
.form-checkbox-native:is(:checked, :indeterminate) + .form-checkbox-element {
|
|
4632
|
+
background: var(--primary-600);
|
|
4633
|
+
border-color: var(--primary-600);
|
|
4387
4634
|
}
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
background: var(--primary-100);
|
|
4391
|
-
color: var(--primary-700);
|
|
4392
|
-
}
|
|
4635
|
+
.form-checkbox-native:is(:checked, :indeterminate) + .form-checkbox-element .icon {
|
|
4636
|
+
opacity: 1;
|
|
4393
4637
|
}
|
|
4394
|
-
|
|
4395
|
-
|
|
4396
|
-
|
|
4638
|
+
.form-checkbox-native:focus-visible + .form-checkbox-element {
|
|
4639
|
+
outline-color: var(--primary-600);
|
|
4640
|
+
outline-offset: 2px;
|
|
4397
4641
|
}
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4402
|
-
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
flex-grow: 1;
|
|
4642
|
+
.form-checkbox-native:disabled {
|
|
4643
|
+
cursor: not-allowed;
|
|
4644
|
+
}
|
|
4645
|
+
.form-checkbox-native:disabled + .form-checkbox-element {
|
|
4646
|
+
background: var(--gray-100);
|
|
4647
|
+
border-color: var(--gray-200);
|
|
4648
|
+
color: var(--foreground-secondary);
|
|
4406
4649
|
}
|
|
4407
4650
|
|
|
4408
|
-
.
|
|
4651
|
+
.form-radio-group {
|
|
4409
4652
|
display: flex;
|
|
4410
|
-
|
|
4411
|
-
align-items:
|
|
4412
|
-
|
|
4653
|
+
flex-direction: column;
|
|
4654
|
+
align-items: flex-start;
|
|
4655
|
+
gap: 12px;
|
|
4656
|
+
}
|
|
4657
|
+
.form-radio-group.is-inline {
|
|
4658
|
+
flex-direction: row;
|
|
4659
|
+
flex-wrap: wrap;
|
|
4660
|
+
gap: 9px 21px;
|
|
4413
4661
|
}
|
|
4414
4662
|
|
|
4415
|
-
.
|
|
4416
|
-
display: flex;
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4663
|
+
.form-radio {
|
|
4664
|
+
display: inline-flex;
|
|
4665
|
+
flex-shrink: 0;
|
|
4666
|
+
gap: 12px;
|
|
4667
|
+
line-height: 21px;
|
|
4668
|
+
outline: 0;
|
|
4669
|
+
cursor: pointer;
|
|
4670
|
+
}
|
|
4671
|
+
.form-radio.is-disabled {
|
|
4672
|
+
cursor: not-allowed;
|
|
4673
|
+
}
|
|
4674
|
+
.form-radio.is-disabled .form-radio-element {
|
|
4675
|
+
background: var(--surface-disabled);
|
|
4676
|
+
border-color: var(--surface-stroke);
|
|
4677
|
+
}
|
|
4678
|
+
.form-radio.is-disabled .form-radio-label {
|
|
4420
4679
|
color: var(--foreground-secondary);
|
|
4421
|
-
|
|
4680
|
+
}
|
|
4681
|
+
.form-radio.is-readonly {
|
|
4682
|
+
cursor: default;
|
|
4683
|
+
}
|
|
4684
|
+
.form-radio.is-readonly .form-radio-native {
|
|
4685
|
+
pointer-events: none;
|
|
4686
|
+
}
|
|
4687
|
+
.form-radio.is-invalid .form-radio-element {
|
|
4688
|
+
border-color: var(--danger-500);
|
|
4422
4689
|
}
|
|
4423
4690
|
|
|
4424
|
-
.
|
|
4425
|
-
|
|
4426
|
-
|
|
4691
|
+
.form-radio-element,
|
|
4692
|
+
.form-radio-native {
|
|
4693
|
+
margin: 1px 0 0;
|
|
4694
|
+
height: 20px;
|
|
4695
|
+
width: 20px;
|
|
4696
|
+
}
|
|
4697
|
+
|
|
4698
|
+
.form-radio-element {
|
|
4699
|
+
position: relative;
|
|
4700
|
+
display: inline-flex;
|
|
4701
|
+
flex-shrink: 0;
|
|
4702
|
+
height: 20px;
|
|
4703
|
+
width: 20px;
|
|
4427
4704
|
align-items: center;
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
letter-spacing: 0.05em;
|
|
4705
|
+
justify-content: center;
|
|
4706
|
+
background: var(--gray-50);
|
|
4707
|
+
border: 1px solid var(--gray-200);
|
|
4708
|
+
border-radius: 50%;
|
|
4709
|
+
cursor: pointer;
|
|
4434
4710
|
pointer-events: none;
|
|
4711
|
+
transition: 210ms var(--swift-out);
|
|
4712
|
+
transition-property: background, border-color, outline-color, outline-offset;
|
|
4713
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4714
|
+
outline-offset: 0;
|
|
4715
|
+
}
|
|
4716
|
+
.form-radio-element::after {
|
|
4717
|
+
content: "";
|
|
4718
|
+
height: 8px;
|
|
4719
|
+
width: 8px;
|
|
4720
|
+
background: var(--primary-25);
|
|
4721
|
+
border-radius: 50%;
|
|
4722
|
+
scale: 0;
|
|
4723
|
+
transition: inherit;
|
|
4724
|
+
transition-property: scale;
|
|
4435
4725
|
}
|
|
4436
4726
|
|
|
4437
|
-
.
|
|
4438
|
-
|
|
4727
|
+
.form-radio-label {
|
|
4728
|
+
align-self: center;
|
|
4439
4729
|
}
|
|
4440
4730
|
|
|
4441
|
-
.
|
|
4442
|
-
|
|
4443
|
-
width: 100%;
|
|
4444
|
-
padding: 8px 10px;
|
|
4445
|
-
align-items: center;
|
|
4446
|
-
gap: 10px;
|
|
4447
|
-
background: transparent;
|
|
4448
|
-
border: 0;
|
|
4449
|
-
border-radius: var(--radius-half);
|
|
4731
|
+
.form-radio-native {
|
|
4732
|
+
position: absolute;
|
|
4450
4733
|
cursor: pointer;
|
|
4451
|
-
|
|
4452
|
-
font: inherit;
|
|
4453
|
-
font-size: 14px;
|
|
4454
|
-
text-align: left;
|
|
4455
|
-
transition: background 100ms;
|
|
4734
|
+
opacity: 0;
|
|
4456
4735
|
}
|
|
4457
4736
|
@media (hover: hover) {
|
|
4458
|
-
.
|
|
4737
|
+
.form-radio-native:hover + .form-radio-element {
|
|
4459
4738
|
background: var(--gray-100);
|
|
4460
4739
|
}
|
|
4461
4740
|
}
|
|
4462
|
-
.
|
|
4463
|
-
background: var(--
|
|
4741
|
+
.form-radio-native:checked + .form-radio-element {
|
|
4742
|
+
background: var(--primary-600);
|
|
4743
|
+
border-color: var(--primary-600);
|
|
4464
4744
|
}
|
|
4465
|
-
|
|
4466
|
-
|
|
4745
|
+
.form-radio-native:checked + .form-radio-element::after {
|
|
4746
|
+
scale: 1;
|
|
4747
|
+
}
|
|
4748
|
+
.form-radio-native:focus-visible + .form-radio-element {
|
|
4749
|
+
outline-color: var(--primary-600);
|
|
4750
|
+
outline-offset: 2px;
|
|
4751
|
+
}
|
|
4752
|
+
.form-radio-native:disabled {
|
|
4753
|
+
cursor: not-allowed;
|
|
4754
|
+
}
|
|
4755
|
+
.form-radio-native:disabled + .form-radio-element {
|
|
4467
4756
|
background: var(--gray-100);
|
|
4757
|
+
border-color: var(--gray-200);
|
|
4758
|
+
}
|
|
4759
|
+
|
|
4760
|
+
.form-quantity-selector {
|
|
4761
|
+
min-width: max-content;
|
|
4762
|
+
align-self: center;
|
|
4763
|
+
justify-self: center;
|
|
4764
|
+
border: 1px solid var(--surface-stroke);
|
|
4765
|
+
border-radius: var(--radius);
|
|
4766
|
+
box-shadow: var(--shadow-px);
|
|
4767
|
+
overflow: hidden;
|
|
4768
|
+
transition: var(--transition-default);
|
|
4769
|
+
transition-property: border-color, outline-color, outline-offset;
|
|
4770
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4771
|
+
outline-offset: 0;
|
|
4772
|
+
}
|
|
4773
|
+
.form-quantity-selector:focus-visible, .form-quantity-selector:focus-within {
|
|
4774
|
+
outline-color: var(--primary-600);
|
|
4775
|
+
outline-offset: 2px;
|
|
4468
4776
|
}
|
|
4469
4777
|
@media (hover: hover) {
|
|
4470
|
-
.
|
|
4471
|
-
|
|
4778
|
+
.form-quantity-selector:hover {
|
|
4779
|
+
border-color: var(--surface-stroke-hover);
|
|
4472
4780
|
}
|
|
4473
4781
|
}
|
|
4474
4782
|
|
|
4475
|
-
.
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
height: 30px;
|
|
4479
|
-
align-items: center;
|
|
4480
|
-
align-self: flex-start;
|
|
4481
|
-
flex-shrink: 0;
|
|
4482
|
-
justify-content: center;
|
|
4483
|
-
background: var(--gray-100);
|
|
4484
|
-
border-radius: var(--radius-half);
|
|
4485
|
-
color: var(--foreground);
|
|
4486
|
-
transition: background 100ms, color 100ms;
|
|
4783
|
+
.form-quantity-selector-button {
|
|
4784
|
+
margin: -1px;
|
|
4785
|
+
border: 0;
|
|
4487
4786
|
}
|
|
4488
|
-
.
|
|
4489
|
-
|
|
4787
|
+
.form-quantity-selector-button:first-child {
|
|
4788
|
+
margin-right: 0;
|
|
4490
4789
|
}
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4790
|
+
.form-quantity-selector-button:last-child {
|
|
4791
|
+
margin-left: 0;
|
|
4792
|
+
}
|
|
4793
|
+
.form-quantity-selector-button, .form-quantity-selector-button:focus-visible, .form-quantity-selector-button:focus-within {
|
|
4794
|
+
outline: 0;
|
|
4494
4795
|
}
|
|
4495
4796
|
|
|
4496
|
-
.
|
|
4497
|
-
|
|
4498
|
-
|
|
4797
|
+
.form-quantity-selector-input {
|
|
4798
|
+
margin: -1px 0;
|
|
4799
|
+
padding-left: 0;
|
|
4800
|
+
padding-right: 0;
|
|
4801
|
+
border-radius: 0;
|
|
4802
|
+
font-variant-numeric: tabular-nums;
|
|
4803
|
+
font-weight: 700;
|
|
4804
|
+
text-align: center;
|
|
4805
|
+
}
|
|
4806
|
+
.form-quantity-selector-input:hover {
|
|
4807
|
+
border-color: var(--surface-stroke-hover);
|
|
4808
|
+
}
|
|
4809
|
+
.form-quantity-selector-input, .form-quantity-selector-input:focus-visible, .form-quantity-selector-input:focus-within {
|
|
4810
|
+
outline: 0 !important;
|
|
4811
|
+
}
|
|
4812
|
+
.form-quantity-selector-input {
|
|
4813
|
+
-moz-appearance: textfield;
|
|
4814
|
+
}
|
|
4815
|
+
.form-quantity-selector-input::-webkit-outer-spin-button, .form-quantity-selector-input::-webkit-inner-spin-button {
|
|
4816
|
+
-webkit-appearance: none;
|
|
4817
|
+
margin: 0;
|
|
4499
4818
|
}
|
|
4500
4819
|
|
|
4501
|
-
.
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4820
|
+
.form-pin-input {
|
|
4821
|
+
display: grid;
|
|
4822
|
+
width: min-content;
|
|
4823
|
+
gap: 0.4ch;
|
|
4824
|
+
grid-template-columns: repeat(var(--max-length, 0), 1fr);
|
|
4825
|
+
margin: 0;
|
|
4826
|
+
padding: 0;
|
|
4827
|
+
border: 0;
|
|
4828
|
+
font-size: 24px;
|
|
4829
|
+
font-weight: 700;
|
|
4505
4830
|
}
|
|
4506
4831
|
|
|
4507
|
-
.
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
|
|
4832
|
+
.form-pin-input-field {
|
|
4833
|
+
padding: 0;
|
|
4834
|
+
width: 2.7ch;
|
|
4835
|
+
border: 1px solid var(--surface-stroke);
|
|
4836
|
+
border-radius: var(--radius);
|
|
4837
|
+
box-shadow: var(--shadow-px);
|
|
4838
|
+
font: inherit;
|
|
4839
|
+
line-height: 3.3ch;
|
|
4840
|
+
outline: 0;
|
|
4841
|
+
text-align: center;
|
|
4842
|
+
transition: var(--transition-default);
|
|
4843
|
+
transition-property: border-color, outline-color, outline-offset;
|
|
4515
4844
|
}
|
|
4516
4845
|
|
|
4517
|
-
.
|
|
4518
|
-
color: var(--primary-500);
|
|
4846
|
+
.form-pin-input-enabled {
|
|
4519
4847
|
}
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4848
|
+
.form-pin-input-enabled .form-pin-input-field {
|
|
4849
|
+
background-color: var(--surface);
|
|
4850
|
+
color: var(--foreground-prominent);
|
|
4851
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4852
|
+
outline-offset: 0;
|
|
4853
|
+
}
|
|
4854
|
+
.form-pin-input-enabled .form-pin-input-field:focus-visible, .form-pin-input-enabled .form-pin-input-field:focus-within {
|
|
4855
|
+
outline-color: var(--primary-600);
|
|
4856
|
+
outline-offset: -1px;
|
|
4526
4857
|
}
|
|
4527
4858
|
|
|
4528
|
-
.
|
|
4529
|
-
|
|
4859
|
+
.form-pin-input-disabled {
|
|
4860
|
+
}
|
|
4861
|
+
.form-pin-input-disabled .form-pin-input-field {
|
|
4862
|
+
background-color: var(--surface-disabled);
|
|
4863
|
+
color: var(--foreground-secondary);
|
|
4864
|
+
cursor: not-allowed;
|
|
4530
4865
|
}
|
|
4531
4866
|
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4867
|
+
.form-toggle {
|
|
4868
|
+
position: relative;
|
|
4869
|
+
display: block;
|
|
4870
|
+
width: 54px;
|
|
4871
|
+
height: 30px;
|
|
4872
|
+
flex: 0 0 auto;
|
|
4873
|
+
background: var(--gray-50);
|
|
4874
|
+
border: 1px solid var(--gray-200);
|
|
4875
|
+
border-radius: var(--radius-full);
|
|
4876
|
+
contain: paint;
|
|
4877
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
4878
|
+
outline-offset: 0;
|
|
4541
4879
|
}
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
}
|
|
4546
|
-
to {
|
|
4547
|
-
opacity: 0;
|
|
4548
|
-
}
|
|
4880
|
+
.form-toggle:has(.form-toggle-input:focus-visible) {
|
|
4881
|
+
outline-color: var(--primary-600);
|
|
4882
|
+
outline-offset: 2px;
|
|
4549
4883
|
}
|
|
4550
|
-
|
|
4551
|
-
|
|
4552
|
-
opacity: 0;
|
|
4553
|
-
}
|
|
4554
|
-
to {
|
|
4555
|
-
opacity: 1;
|
|
4556
|
-
}
|
|
4884
|
+
.form-toggle.is-checked {
|
|
4885
|
+
border-color: transparent;
|
|
4557
4886
|
}
|
|
4558
|
-
|
|
4559
|
-
|
|
4560
|
-
opacity: 1;
|
|
4561
|
-
}
|
|
4562
|
-
to {
|
|
4563
|
-
opacity: 0;
|
|
4564
|
-
}
|
|
4565
|
-
}.comment {
|
|
4566
|
-
display: grid;
|
|
4567
|
-
max-width: 100%;
|
|
4568
|
-
gap: 3px 15px;
|
|
4569
|
-
grid-template-columns: 1fr auto;
|
|
4570
|
-
grid-template-rows: repeat(2, auto);
|
|
4887
|
+
.form-toggle.is-checked .form-toggle-input::after {
|
|
4888
|
+
translate: 24px 0;
|
|
4571
4889
|
}
|
|
4572
|
-
.
|
|
4573
|
-
|
|
4574
|
-
grid-column: 2;
|
|
4575
|
-
grid-row: 1;
|
|
4890
|
+
.form-toggle.is-checked:not(.is-switch) {
|
|
4891
|
+
background: var(--primary-600);
|
|
4576
4892
|
}
|
|
4577
|
-
.
|
|
4578
|
-
|
|
4579
|
-
grid-row: 1;
|
|
4893
|
+
.form-toggle.is-checked:not(.is-switch) .form-toggle-icon {
|
|
4894
|
+
color: var(--primary-25);
|
|
4580
4895
|
}
|
|
4581
|
-
.
|
|
4582
|
-
|
|
4583
|
-
grid-row: 2;
|
|
4896
|
+
.form-toggle.is-checked:not(.is-switch) .form-toggle-input::after {
|
|
4897
|
+
border-color: transparent;
|
|
4584
4898
|
}
|
|
4585
|
-
.
|
|
4586
|
-
|
|
4899
|
+
.form-toggle.is-checked .form-toggle-icon-on {
|
|
4900
|
+
translate: calc(-50% + 24px) -50%;
|
|
4587
4901
|
}
|
|
4588
|
-
.
|
|
4589
|
-
|
|
4902
|
+
.form-toggle:not(.is-checked) .form-toggle-icon-off {
|
|
4903
|
+
translate: calc(-50% - 24px) -50%;
|
|
4590
4904
|
}
|
|
4591
|
-
.
|
|
4592
|
-
|
|
4905
|
+
.form-toggle.is-disabled {
|
|
4906
|
+
cursor: not-allowed;
|
|
4907
|
+
opacity: 0.6;
|
|
4593
4908
|
}
|
|
4594
|
-
.
|
|
4595
|
-
|
|
4909
|
+
.form-toggle.is-readonly .form-toggle-input {
|
|
4910
|
+
pointer-events: none;
|
|
4596
4911
|
}
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
min-width: 0;
|
|
4600
|
-
padding: 12px 18px;
|
|
4601
|
-
background: var(--primary-50);
|
|
4602
|
-
border: 1px solid var(--primary-200);
|
|
4603
|
-
border-radius: calc(var(--radius) * 2);
|
|
4604
|
-
box-shadow: var(--shadow-xs);
|
|
4912
|
+
.form-toggle.is-invalid {
|
|
4913
|
+
border-color: var(--danger-500);
|
|
4605
4914
|
}
|
|
4606
4915
|
|
|
4607
|
-
.
|
|
4608
|
-
|
|
4916
|
+
.form-toggle-icon {
|
|
4917
|
+
position: absolute;
|
|
4918
|
+
top: 50%;
|
|
4919
|
+
color: var(--foreground-secondary);
|
|
4920
|
+
pointer-events: none;
|
|
4921
|
+
translate: -50% -50%;
|
|
4609
4922
|
}
|
|
4610
4923
|
|
|
4611
|
-
.
|
|
4612
|
-
|
|
4613
|
-
border-color: var(--gray-200);
|
|
4614
|
-
border-bottom-left-radius: var(--radius);
|
|
4924
|
+
.form-toggle-icon-off {
|
|
4925
|
+
left: 15px;
|
|
4615
4926
|
}
|
|
4616
4927
|
|
|
4617
|
-
.
|
|
4618
|
-
|
|
4928
|
+
.form-toggle-icon-on {
|
|
4929
|
+
left: 39px;
|
|
4619
4930
|
}
|
|
4620
4931
|
|
|
4621
|
-
.
|
|
4932
|
+
.form-toggle-input {
|
|
4933
|
+
-webkit-appearance: none;
|
|
4934
|
+
appearance: none;
|
|
4935
|
+
position: relative;
|
|
4622
4936
|
display: block;
|
|
4623
|
-
margin:
|
|
4624
|
-
height:
|
|
4625
|
-
width:
|
|
4626
|
-
|
|
4627
|
-
|
|
4628
|
-
|
|
4629
|
-
|
|
4630
|
-
|
|
4631
|
-
display: flex;
|
|
4632
|
-
align-items: center;
|
|
4633
|
-
gap: 12px;
|
|
4634
|
-
justify-content: flex-end;
|
|
4635
|
-
font-size: 12px;
|
|
4636
|
-
font-weight: 500;
|
|
4637
|
-
}
|
|
4638
|
-
.comment-footer span {
|
|
4639
|
-
margin-right: auto;
|
|
4937
|
+
margin: 0;
|
|
4938
|
+
height: inherit;
|
|
4939
|
+
width: inherit;
|
|
4940
|
+
background: unset;
|
|
4941
|
+
border: 0;
|
|
4942
|
+
border-radius: inherit;
|
|
4943
|
+
cursor: pointer;
|
|
4944
|
+
outline: 0;
|
|
4640
4945
|
}
|
|
4641
|
-
.
|
|
4642
|
-
|
|
4946
|
+
.form-toggle-input::after {
|
|
4947
|
+
position: absolute;
|
|
4948
|
+
display: block;
|
|
4949
|
+
top: 2px;
|
|
4950
|
+
left: 2px;
|
|
4951
|
+
height: 24px;
|
|
4952
|
+
width: 24px;
|
|
4953
|
+
content: "";
|
|
4954
|
+
background: var(--surface);
|
|
4955
|
+
border: 1px solid var(--surface-stroke);
|
|
4956
|
+
border-radius: var(--radius-full);
|
|
4957
|
+
box-shadow: var(--shadow-sm);
|
|
4643
4958
|
}
|
|
4644
4959
|
|
|
4645
|
-
|
|
4646
|
-
|
|
4647
|
-
|
|
4648
|
-
|
|
4649
|
-
|
|
4650
|
-
|
|
4651
|
-
20% {
|
|
4652
|
-
background: var(--gray-200);
|
|
4653
|
-
box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
|
|
4654
|
-
translate: 0 0;
|
|
4655
|
-
}
|
|
4656
|
-
40% {
|
|
4657
|
-
background: var(--gray-300);
|
|
4658
|
-
box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
|
|
4659
|
-
translate: 0 -4px;
|
|
4660
|
-
}
|
|
4661
|
-
60% {
|
|
4662
|
-
background: var(--gray-200);
|
|
4663
|
-
box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
|
|
4664
|
-
translate: 0 0;
|
|
4665
|
-
}
|
|
4960
|
+
.form-toggle,
|
|
4961
|
+
.form-toggle-icon,
|
|
4962
|
+
.form-toggle-input,
|
|
4963
|
+
.form-toggle-input::after {
|
|
4964
|
+
transition: 210ms var(--swift-out);
|
|
4965
|
+
transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
|
|
4666
4966
|
}.filter {
|
|
4667
4967
|
max-height: 50dvh;
|
|
4668
4968
|
max-width: 100%;
|
|
@@ -7342,21 +7642,6 @@ tfoot .table-cell {
|
|
|
7342
7642
|
border: 1px solid var(--surface-stroke);
|
|
7343
7643
|
border-radius: var(--radius);
|
|
7344
7644
|
}
|
|
7345
|
-
.segmented-control.is-small {
|
|
7346
|
-
height: 30px;
|
|
7347
|
-
padding: 0 12px;
|
|
7348
|
-
gap: 9px;
|
|
7349
|
-
}
|
|
7350
|
-
.segmented-control.is-medium {
|
|
7351
|
-
height: 36px;
|
|
7352
|
-
padding: 0 15px;
|
|
7353
|
-
gap: 9px;
|
|
7354
|
-
}
|
|
7355
|
-
.segmented-control.is-large {
|
|
7356
|
-
height: 48px;
|
|
7357
|
-
padding: 0 21px;
|
|
7358
|
-
gap: 12px;
|
|
7359
|
-
}
|
|
7360
7645
|
|
|
7361
7646
|
.segmented-control-fill {
|
|
7362
7647
|
display: flex;
|
|
@@ -7413,6 +7698,21 @@ tfoot .table-cell {
|
|
|
7413
7698
|
color: var(--foreground-prominent);
|
|
7414
7699
|
cursor: default;
|
|
7415
7700
|
}
|
|
7701
|
+
.segmented-control-item.is-small {
|
|
7702
|
+
height: 30px;
|
|
7703
|
+
padding: 0 12px;
|
|
7704
|
+
gap: 9px;
|
|
7705
|
+
}
|
|
7706
|
+
.segmented-control-item.is-medium {
|
|
7707
|
+
height: 36px;
|
|
7708
|
+
padding: 0 15px;
|
|
7709
|
+
gap: 9px;
|
|
7710
|
+
}
|
|
7711
|
+
.segmented-control-item.is-large {
|
|
7712
|
+
height: 48px;
|
|
7713
|
+
padding: 0 21px;
|
|
7714
|
+
gap: 12px;
|
|
7715
|
+
}
|
|
7416
7716
|
.segmented-control-item:disabled {
|
|
7417
7717
|
opacity: 0.5;
|
|
7418
7718
|
pointer-events: none;
|
|
@@ -7435,6 +7735,67 @@ tfoot .table-cell {
|
|
|
7435
7735
|
}
|
|
7436
7736
|
.segmented-control-item.is-active::before, .segmented-control-item.is-active + .segmented-control-item::before {
|
|
7437
7737
|
opacity: 0;
|
|
7738
|
+
}.skeleton {
|
|
7739
|
+
position: relative;
|
|
7740
|
+
display: block;
|
|
7741
|
+
height: 1em;
|
|
7742
|
+
width: 100%;
|
|
7743
|
+
background: var(--gray-100);
|
|
7744
|
+
border-radius: var(--radius);
|
|
7745
|
+
overflow: hidden;
|
|
7746
|
+
}
|
|
7747
|
+
.skeleton::after {
|
|
7748
|
+
content: "";
|
|
7749
|
+
position: absolute;
|
|
7750
|
+
inset: 0;
|
|
7751
|
+
background: linear-gradient(90deg, transparent 0%, var(--surface) 50%, transparent 100%);
|
|
7752
|
+
translate: -100% 0;
|
|
7753
|
+
animation: skeleton-shimmer 1.6s ease-in-out infinite;
|
|
7754
|
+
}
|
|
7755
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7756
|
+
.skeleton {
|
|
7757
|
+
animation: skeleton-pulse 1.6s ease-in-out infinite;
|
|
7758
|
+
}
|
|
7759
|
+
.skeleton::after {
|
|
7760
|
+
display: none;
|
|
7761
|
+
}
|
|
7762
|
+
}
|
|
7763
|
+
|
|
7764
|
+
.is-text {
|
|
7765
|
+
height: 1em;
|
|
7766
|
+
border-radius: var(--radius-half);
|
|
7767
|
+
vertical-align: middle;
|
|
7768
|
+
}
|
|
7769
|
+
|
|
7770
|
+
.is-circle {
|
|
7771
|
+
height: 40px;
|
|
7772
|
+
width: 40px;
|
|
7773
|
+
flex-shrink: 0;
|
|
7774
|
+
border-radius: 50%;
|
|
7775
|
+
}
|
|
7776
|
+
|
|
7777
|
+
.is-rectangle {
|
|
7778
|
+
height: 120px;
|
|
7779
|
+
border-radius: 0;
|
|
7780
|
+
}
|
|
7781
|
+
|
|
7782
|
+
.is-rounded {
|
|
7783
|
+
height: 120px;
|
|
7784
|
+
border-radius: calc(var(--radius) * 2);
|
|
7785
|
+
}
|
|
7786
|
+
|
|
7787
|
+
@keyframes skeleton-shimmer {
|
|
7788
|
+
from {
|
|
7789
|
+
translate: -100% 0;
|
|
7790
|
+
}
|
|
7791
|
+
to {
|
|
7792
|
+
translate: 100% 0;
|
|
7793
|
+
}
|
|
7794
|
+
}
|
|
7795
|
+
@keyframes skeleton-pulse {
|
|
7796
|
+
50% {
|
|
7797
|
+
opacity: 0.5;
|
|
7798
|
+
}
|
|
7438
7799
|
}.split-view {
|
|
7439
7800
|
display: grid;
|
|
7440
7801
|
width: 100%;
|