@zhang_jifan/fanui 2.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.
Files changed (127) hide show
  1. package/ACCESSIBILITY.md +61 -0
  2. package/CHANGELOG.md +112 -0
  3. package/COMMERCIAL-LICENSE.md +71 -0
  4. package/DESIGN-SYSTEM.md +294 -0
  5. package/LICENSE +661 -0
  6. package/README.md +348 -0
  7. package/USAGE.md +1926 -0
  8. package/_index.scss +20 -0
  9. package/dist/fanui.cjs +15 -0
  10. package/dist/fanui.css +28209 -0
  11. package/dist/fanui.d.ts +353 -0
  12. package/dist/fanui.esm.js +71 -0
  13. package/dist/fanui.js +4782 -0
  14. package/dist/fanui.min.css +1 -0
  15. package/dist/fanui.mjs +71 -0
  16. package/dist/modules/fanui-advanced.css +830 -0
  17. package/dist/modules/fanui-advanced.min.css +129 -0
  18. package/dist/modules/fanui-alert.css +575 -0
  19. package/dist/modules/fanui-alert.min.css +122 -0
  20. package/dist/modules/fanui-badge.css +426 -0
  21. package/dist/modules/fanui-badge.min.css +77 -0
  22. package/dist/modules/fanui-base.css +1394 -0
  23. package/dist/modules/fanui-base.min.css +236 -0
  24. package/dist/modules/fanui-blog.css +762 -0
  25. package/dist/modules/fanui-blog.min.css +108 -0
  26. package/dist/modules/fanui-button.css +526 -0
  27. package/dist/modules/fanui-button.min.css +56 -0
  28. package/dist/modules/fanui-card.css +291 -0
  29. package/dist/modules/fanui-card.min.css +52 -0
  30. package/dist/modules/fanui-choice.css +539 -0
  31. package/dist/modules/fanui-choice.min.css +83 -0
  32. package/dist/modules/fanui-dashboard.css +1057 -0
  33. package/dist/modules/fanui-dashboard.min.css +160 -0
  34. package/dist/modules/fanui-data.css +687 -0
  35. package/dist/modules/fanui-data.min.css +125 -0
  36. package/dist/modules/fanui-feedback.css +432 -0
  37. package/dist/modules/fanui-feedback.min.css +79 -0
  38. package/dist/modules/fanui-form.css +779 -0
  39. package/dist/modules/fanui-form.min.css +123 -0
  40. package/dist/modules/fanui-glass.css +497 -0
  41. package/dist/modules/fanui-glass.min.css +46 -0
  42. package/dist/modules/fanui-input-plus.css +799 -0
  43. package/dist/modules/fanui-input-plus.min.css +124 -0
  44. package/dist/modules/fanui-interactive.css +960 -0
  45. package/dist/modules/fanui-interactive.min.css +138 -0
  46. package/dist/modules/fanui-layout.css +4399 -0
  47. package/dist/modules/fanui-layout.min.css +1172 -0
  48. package/dist/modules/fanui-marketing.css +1125 -0
  49. package/dist/modules/fanui-marketing.min.css +144 -0
  50. package/dist/modules/fanui-nav.css +458 -0
  51. package/dist/modules/fanui-nav.min.css +76 -0
  52. package/dist/modules/fanui-overlay.css +547 -0
  53. package/dist/modules/fanui-overlay.min.css +91 -0
  54. package/dist/modules/fanui-table.css +290 -0
  55. package/dist/modules/fanui-table.min.css +62 -0
  56. package/dist/modules/fanui-tabs.css +333 -0
  57. package/dist/modules/fanui-tabs.min.css +58 -0
  58. package/dist/modules/fanui-themes.css +2728 -0
  59. package/dist/modules/fanui-themes.min.css +40 -0
  60. package/dist/modules/fanui-tokens.css +587 -0
  61. package/dist/modules/fanui-tokens.min.css +3 -0
  62. package/dist/modules/fanui-utilities.css +6557 -0
  63. package/dist/modules/fanui-utilities.min.css +1762 -0
  64. package/dist/modules/sizes.json +103 -0
  65. package/docs/MIGRATION-v2.md +179 -0
  66. package/examples/01-script-tag.html +149 -0
  67. package/examples/02-react/README.md +39 -0
  68. package/examples/02-react/index.html +12 -0
  69. package/examples/02-react/package.json +20 -0
  70. package/examples/02-react/src/App.jsx +108 -0
  71. package/examples/02-react/src/main.jsx +13 -0
  72. package/examples/02-react/src/useFanUI.js +87 -0
  73. package/examples/02-react/vite.config.js +6 -0
  74. package/examples/03-vue3/README.md +67 -0
  75. package/examples/03-vue3/index.html +12 -0
  76. package/examples/03-vue3/package.json +19 -0
  77. package/examples/03-vue3/src/App.vue +93 -0
  78. package/examples/03-vue3/src/main.js +8 -0
  79. package/examples/03-vue3/src/useFanUI.js +85 -0
  80. package/examples/03-vue3/vite.config.js +6 -0
  81. package/examples/04-vue2-cdn.html +93 -0
  82. package/examples/README.md +34 -0
  83. package/package.json +127 -0
  84. package/src/_functions.scss +319 -0
  85. package/src/_mixins.scss +1202 -0
  86. package/src/_tokens.scss +180 -0
  87. package/src/_variables.scss +491 -0
  88. package/src/base/_animations.scss +210 -0
  89. package/src/base/_reset.scss +359 -0
  90. package/src/base/_rtl.scss +133 -0
  91. package/src/base/_typography.scss +353 -0
  92. package/src/components/_advanced.scss +763 -0
  93. package/src/components/_alert.scss +322 -0
  94. package/src/components/_badge.scss +279 -0
  95. package/src/components/_blog.scss +693 -0
  96. package/src/components/_button.scss +351 -0
  97. package/src/components/_capabilities.scss +463 -0
  98. package/src/components/_card.scss +281 -0
  99. package/src/components/_choice.scss +444 -0
  100. package/src/components/_dashboard.scss +950 -0
  101. package/src/components/_data.scss +618 -0
  102. package/src/components/_feedback.scss +403 -0
  103. package/src/components/_form.scss +408 -0
  104. package/src/components/_glass.scss +374 -0
  105. package/src/components/_input-plus.scss +730 -0
  106. package/src/components/_interactive.scss +885 -0
  107. package/src/components/_marketing.scss +982 -0
  108. package/src/components/_nav.scss +480 -0
  109. package/src/components/_overlay.scss +517 -0
  110. package/src/components/_table.scss +276 -0
  111. package/src/components/_tabs.scss +338 -0
  112. package/src/fanui.d.ts +353 -0
  113. package/src/fanui.js +4782 -0
  114. package/src/fanui.scss +79 -0
  115. package/src/glass/_switches.scss +36 -0
  116. package/src/glass/_tokens.scss +259 -0
  117. package/src/layout/_container.scss +111 -0
  118. package/src/layout/_flex.scss +164 -0
  119. package/src/layout/_grid.scss +180 -0
  120. package/src/themes/_accents.scss +201 -0
  121. package/src/themes/_palettes.scss +180 -0
  122. package/src/utilities/_borders.scss +104 -0
  123. package/src/utilities/_display.scss +145 -0
  124. package/src/utilities/_effects.scss +210 -0
  125. package/src/utilities/_sizing.scss +123 -0
  126. package/src/utilities/_spacing.scss +118 -0
  127. package/src/utilities/_texture.scss +323 -0
package/dist/modules/fanui-glass.min.css ADDED
@@ -0,0 +1,46 @@
1
+ .fanui-glass{position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
2
+ .fanui-glass::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-glass{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
3
+ .fanui-glass{color:var(--fanui-color-text);text-shadow:var(--fanui-glass-text-shadow,0 1px 1px rgba(0,0,0,0.04))}
4
+ [data-fanui-theme=dark] .fanui-glass,[data-fanui-theme=dark] .fanui-card--glass,[data-fanui-theme=dark] .fanui-panel--glass,[data-fanui-theme=dark] .fanui-navbar--glass,[data-fanui-theme=dark] .fanui-sidebar--glass,[data-fanui-theme=dark] .fanui-menu--glass,[data-fanui-theme=dark] .fanui-dropdown--glass .fanui-dropdown__menu,[data-fanui-theme=dark] .fanui-popover--glass .fanui-popover__panel,[data-fanui-theme=dark] .fanui-modal--glass .fanui-modal__dialog,[data-fanui-theme=dark] .fanui-drawer--glass .fanui-drawer__panel,[data-fanui-theme=dark] .fanui-toast--glass,[data-fanui-theme=dark] .fanui-toast-region .fanui-toast,[data-fanui-theme=dark] .fanui-alert--glass,[data-fanui-theme=dark] .fanui-btn--glass,[data-fanui-theme=dark] .fanui-table--glass{--fanui-color-text:#f1f5f9;--fanui-color-text-strong:#ffffff;--fanui-color-text-muted:#cbd5e1;--fanui-color-text-subtle:#94a3b8;--fanui-color-border-subtle:rgba(255,255,255,0.08);--fanui-color-hover:rgba(255,255,255,0.08);--fanui-color-active:rgba(255,255,255,0.12)}@media (prefers-color-scheme:dark){[data-fanui-theme=auto] .fanui-glass,[data-fanui-theme=auto] .fanui-card--glass,[data-fanui-theme=auto] .fanui-panel--glass,[data-fanui-theme=auto] .fanui-navbar--glass,[data-fanui-theme=auto] .fanui-sidebar--glass,[data-fanui-theme=auto] .fanui-menu--glass,[data-fanui-theme=auto] .fanui-dropdown--glass .fanui-dropdown__menu,[data-fanui-theme=auto] .fanui-popover--glass .fanui-popover__panel,[data-fanui-theme=auto] .fanui-modal--glass .fanui-modal__dialog,[data-fanui-theme=auto] .fanui-drawer--glass .fanui-drawer__panel,[data-fanui-theme=auto] .fanui-toast--glass,[data-fanui-theme=auto] .fanui-toast-region .fanui-toast,[data-fanui-theme=auto] .fanui-alert--glass,[data-fanui-theme=auto] .fanui-btn--glass,[data-fanui-theme=auto] .fanui-table--glass{--fanui-color-text:#f1f5f9;--fanui-color-text-strong:#ffffff;--fanui-color-text-muted:#cbd5e1;--fanui-color-text-subtle:#94a3b8;--fanui-color-border-subtle:rgba(255,255,255,0.08);--fanui-color-hover:rgba(255,255,255,0.08);--fanui-color-active:rgba(255,255,255,0.12)}}
5
+ .fanui-glass--thin{--fanui-glass-intensity:0.5;--fanui-glass-blur-base:10px;--fanui-glass-edge-width:1px;--fanui-glass-specular-alpha:0.3}
6
+ .fanui-glass--regular{--fanui-glass-intensity:1;--fanui-glass-blur-base:22px;--fanui-glass-edge-width:1px;--fanui-glass-specular-alpha:0.55}
7
+ .fanui-glass--thick{--fanui-glass-intensity:1.45;--fanui-glass-blur-base:30px;--fanui-glass-edge-width:1.5px;--fanui-glass-specular-alpha:0.7}
8
+ .fanui-glass--ultra{--fanui-glass-intensity:1.9;--fanui-glass-blur-base:44px;--fanui-glass-edge-width:2px;--fanui-glass-specular-alpha:0.85}
9
+ .fanui-glass--lens{--fanui-glass-intensity:2;--fanui-glass-blur-base:36px;--fanui-glass-edge-width:2px;--fanui-glass-specular-alpha:1}
10
+ .fanui-glass--card{padding:var(--fanui-glass-padding,var(--fanui-space-6));border-radius:var(--fanui-glass-radius,var(--fanui-radius-xl))}
11
+ .fanui-glass--bar{display:flex;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-2) var(--fanui-space-3);border-radius:var(--fanui-glass-radius,var(--fanui-radius-full))}
12
+ .fanui-glass--panel{padding:var(--fanui-space-5);border-radius:var(--fanui-glass-radius,var(--fanui-radius-2xl))}
13
+ .fanui-glass--square{border-radius:0}
14
+ .fanui-glass--sharp{--fanui-glass-radius:0}
15
+ .fanui-glass--reactive{transition:box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s,transform 200ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
16
+ .fanui-glass--reactive:hover{--fanui-glass-intensity:var(--fanui-glass-hover-intensity,1.25);transform:translateY(-1px)}
17
+ .fanui-glass--reactive:active{transform:translateY(0) scale(0.995)}
18
+ .fanui-glass--flow{background-image:radial-gradient(38% 44% at 24% 30%,var(--fanui-brand-aura-a),transparent 62%),radial-gradient(32% 40% at 76% 70%,var(--fanui-brand-aura-b),transparent 60%),radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-size:170% 170%,170% 170%,100% 100%,100% 100%;background-repeat:no-repeat;animation:fanui-glass-flow 22s ease-in-out infinite alternate}@keyframes fanui-glass-flow{0%{background-position:0% 0%,100% 100%,center,center}
19
+ 100%{background-position:100% 55%,0% 15%,center,center}}@media (prefers-reduced-motion:reduce){.fanui-glass--flow{animation:none}}
20
+ .fanui-glass--static{--fanui-glass-specular-alpha:0;--fanui-glass-edge-angle:150deg}
21
+ [data-fanui-glass-track]{--fanui-glass-mx:30%;--fanui-glass-my:0%}
22
+ [data-fanui-glass-track]:hover{--fanui-glass-specular-alpha:1}
23
+ .fanui-glass-lens{--fanui-glass-tint-base:0.14;--fanui-glass-tint-k:0.34;--fanui-glass-blur-base:30px;border-radius:inherit;box-shadow:0 10px 26px -10px rgba(2,6,23,0.4),inset 0 1px 0 rgba(255,255,255,0.5),inset 0 -12px 20px -14px rgba(255,255,255,0.35)}
24
+ [data-fanui-theme=dark] .fanui-glass-lens{box-shadow:0 10px 26px -10px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -12px 20px -14px rgba(255,255,255,0.1)}@media (prefers-color-scheme:dark){[data-fanui-theme=auto] .fanui-glass-lens{box-shadow:0 10px 26px -10px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -12px 20px -14px rgba(255,255,255,0.1)}}
25
+ .fanui-card--glass,.fanui-panel--glass{position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-card--glass,.fanui-panel--glass{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
26
+ .fanui-table--glass{--fanui-table-striped-bg:rgba( var(--fanui-glass-divider-rgb),calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity)) );--fanui-table-border-color:rgba( var(--fanui-glass-divider-rgb),calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity)) )}
27
+ .fanui-table--glass>thead>tr>th{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-table--glass>thead>tr>th{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
28
+ .fanui-navbar--glass{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-bottom-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:none;transition:background-color 200ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
29
+ .fanui-navbar--glass.is-scrolled{box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}
30
+ .fanui-sidebar--glass,.fanui-menu--glass{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-sidebar--glass,.fanui-menu--glass{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
31
+ .fanui-modal--glass .fanui-modal__dialog,.fanui-drawer--glass .fanui-drawer__panel{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-modal--glass .fanui-modal__dialog,.fanui-drawer--glass .fanui-drawer__panel{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
32
+ .fanui-modal--glass .fanui-modal__dialog,.fanui-drawer--glass .fanui-drawer__panel{background-image:linear-gradient(color-mix(in srgb,var(--fanui-color-overlay) 60%,transparent),color-mix(in srgb,var(--fanui-color-overlay) 75%,transparent))}
33
+ .fanui-dropdown--glass .fanui-dropdown__menu,.fanui-popover--glass .fanui-popover__panel{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-dropdown--glass .fanui-dropdown__menu,.fanui-popover--glass .fanui-popover__panel{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
34
+ .fanui-dropdown--glass .fanui-dropdown__menu,.fanui-popover--glass .fanui-popover__panel{background-image:linear-gradient(color-mix(in srgb,var(--fanui-color-overlay) 55%,transparent),color-mix(in srgb,var(--fanui-color-overlay) 70%,transparent))}
35
+ .fanui-tooltip--glass .fanui-tooltip__bubble{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-tooltip--glass .fanui-tooltip__bubble{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
36
+ .fanui-toast--glass,.fanui-toast-region .fanui-toast{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-toast--glass,.fanui-toast-region .fanui-toast{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
37
+ .fanui-alert--glass{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-alert--glass{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
38
+ .fanui-btn--glass{background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)))}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-btn--glass{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
39
+ .fanui-btn--glass{--fanui-btn-fg:var(--fanui-color-text);--fanui-btn-hover-fg:var(--fanui-color-text-strong);--fanui-btn-active-fg:var(--fanui-color-text-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))))}
40
+ .fanui-btn--glass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,calc((var(--fanui-glass-inner-hi) + 0.2) * min(1,var(--fanui-glass-intensity)))),0 6px 18px -8px rgba(var(--fanui-glass-shadow-rgb),calc(0.28 * var(--fanui-glass-intensity)))}
41
+ .fanui-glass .fanui-form-control,.fanui-glass .fanui-select,.fanui-glass .fanui-textarea{background-color:rgba(var(--fanui-glass-divider-rgb),calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity)));border-color:rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));backdrop-filter:none}
42
+ .fanui-glass .fanui-table>thead>tr>th{background-color:transparent}
43
+ .fanui-glass .fanui-table>tbody>tr>td{border-color:rgba(var(--fanui-glass-divider-rgb),calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity)))}
44
+ :root[data-fanui-glass=off] [class*=fanui-glass],:root[data-fanui-glass=off] [class*="--glass"],[data-fanui-glass=off] [class*=fanui-glass],[data-fanui-glass=off] [class*="--glass"],[data-fanui-glass=off][class*=fanui-glass],[data-fanui-glass=off][class*="--glass"]{backdrop-filter:none;-webkit-backdrop-filter:none}
45
+ :root[data-fanui-glass=off] [class*=fanui-glass]::after,:root[data-fanui-glass=off] [class*="--glass"]::after,[data-fanui-glass=off] [class*=fanui-glass]::after,[data-fanui-glass=off] [class*="--glass"]::after,[data-fanui-glass=off][class*=fanui-glass]::after,[data-fanui-glass=off][class*="--glass"]::after{display:none}@media (prefers-reduced-motion:reduce){.fanui-glass--reactive:hover{transform:none}}
46
+ :root[data-fanui-glass=off],[data-fanui-glass=off]{--fanui-glass-intensity:0;--fanui-glass-blur-base:0px;--fanui-glass-blur-mode-k:1;--fanui-glass-sat-k:0%;--fanui-glass-bri-k:0%;--fanui-glass-tint-rgb:var(--fanui-glass-surface-rgb);--fanui-glass-tint-base:1;--fanui-glass-tint-k:0;--fanui-glass-sheen-a:0;--fanui-glass-specular-a:0;--fanui-glass-specular-alpha:0;--fanui-glass-edge-alpha:0;--fanui-glass-edge-hi-a:0;--fanui-glass-edge-lo-a:0;--fanui-glass-border-rgb:var(--fanui-glass-border-solid-rgb);--fanui-glass-border-a:1;--fanui-glass-border-k:0;--fanui-glass-divider-rgb:var(--fanui-glass-border-solid-rgb);--fanui-glass-divider-a:1;--fanui-glass-shadow-a:0.06;--fanui-glass-shadow-k:0;--fanui-glass-inner-hi:0;--fanui-glass-text-shadow:none}@media (prefers-reduced-transparency:reduce){:root:not([data-fanui-glass=on]),[data-fanui-glass=auto]{--fanui-glass-intensity:0;--fanui-glass-blur-base:0px;--fanui-glass-blur-mode-k:1;--fanui-glass-sat-k:0%;--fanui-glass-bri-k:0%;--fanui-glass-tint-rgb:var(--fanui-glass-surface-rgb);--fanui-glass-tint-base:1;--fanui-glass-tint-k:0;--fanui-glass-sheen-a:0;--fanui-glass-specular-a:0;--fanui-glass-specular-alpha:0;--fanui-glass-edge-alpha:0;--fanui-glass-edge-hi-a:0;--fanui-glass-edge-lo-a:0;--fanui-glass-border-rgb:var(--fanui-glass-border-solid-rgb);--fanui-glass-border-a:1;--fanui-glass-border-k:0;--fanui-glass-divider-rgb:var(--fanui-glass-border-solid-rgb);--fanui-glass-divider-a:1;--fanui-glass-shadow-a:0.06;--fanui-glass-shadow-k:0;--fanui-glass-inner-hi:0;--fanui-glass-text-shadow:none}}