raw-fun-ui 2.0.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 (9) hide show
  1. package/CHANGELOG.md +147 -0
  2. package/LICENSE +21 -0
  3. package/README.md +245 -0
  4. package/dist/index.cjs.js +1 -0
  5. package/dist/index.d.ts +216 -0
  6. package/dist/index.esm.js +1 -0
  7. package/dist/index.umd.js +1 -0
  8. package/dist/raw-fun-ui.css +1 -0
  9. package/package.json +69 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,147 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [1.0.5] - 2025-12-27
9
+
10
+ ### Added
11
+ - **RfuiDropdown Component**: New theme-aware dropdown component with:
12
+ - 4 color variants (default, primary, secondary, danger)
13
+ - Theme support for blocky, fall-guys, and animal-crossing themes
14
+ - Custom CSS dropdown arrow for consistent cross-browser appearance
15
+ - Optional label support
16
+ - Disabled state handling
17
+ - TypeScript type definitions
18
+
19
+ ### Changed
20
+ - **Demo Refactoring**: Separated demo.html into modular files for better organization:
21
+ - Extracted CSS to `demo.css` (275 lines)
22
+ - Extracted JavaScript to `demo.js` (456 lines)
23
+ - Clean HTML structure in `demo.html` (216 lines)
24
+ - **Demo Enhancements**: Added professional presentation elements:
25
+ - Animated gradient header with glow effects
26
+ - Key Features section with 6 feature cards
27
+ - Quick Installation section with styled code blocks
28
+ - Professional footer with navigation links
29
+ - Grid pattern background overlay
30
+ - **GitHub Pages**: Consolidated `docs/index.html` to redirect to `demo.html` for single source of truth
31
+
32
+ ### Documentation
33
+ - Improved demo page organization and maintainability
34
+ - Added comprehensive section comments in demo.js
35
+ - Enhanced visual presentation with animated elements
36
+
37
+ ## [1.0.4] - 2025-12-17
38
+
39
+ ### Added
40
+ - **Theme Support**: New theming system with `RawFunUI.setTheme()` API for switching themes at runtime
41
+ - **Fall Guys Theme**: New playful theme inspired by Fall Guys aesthetic featuring:
42
+ - Bright cyan backgrounds with solid black shadows
43
+ - Purple gradient headers
44
+ - Rounded corners for a softer, cartoon-like appearance
45
+ - Playful color palette optimized for casual gaming UIs
46
+ - **RfuiTheme Type**: New TypeScript type for theme selection ('blocky' | 'fall-guys')
47
+ - **Themes Directory**: New `src/styles/themes/` directory for theme CSS files
48
+
49
+ ### Documentation
50
+ - Updated README.md with theme usage examples
51
+ - Added theme features list and available themes documentation
52
+ - Updated file structure documentation to include themes directory
53
+
54
+ ## [1.0.3] - 2025-01-18
55
+
56
+ ### Changed
57
+ - Fixed repository URL format in package.json
58
+
59
+ ## [1.0.2] - 2025-01-18
60
+
61
+ ### Added
62
+ - **Component Variants**: Added `variant` property support to RfuiTag and RfuiCard components
63
+ - **ComponentVariant Type**: New shared type for component color variants (default, primary, secondary, danger)
64
+ - **Tag Variants**: RfuiTag now supports 4 color gradients matching button variants
65
+ - **Card Variants**: RfuiCard now supports 4 color gradients matching button variants
66
+
67
+ ### Changed
68
+ - **Type System**: Renamed `ButtonVariant` to `ComponentVariant` for better accuracy
69
+ - **RfuiTag**: Removed `flipped` property in favor of simpler positioning
70
+
71
+ ### Removed
72
+ - **RfuiTag**: Removed `flipped` property and related CSS styles
73
+
74
+ ### Documentation
75
+ - Updated demo.html with tag and card variants showcase
76
+ - Updated docs/index.html (GitHub Pages) with proper tag spacing and variants
77
+ - Fixed tags section to use correct `content` property and container positioning
78
+
79
+ ## [1.0.1] - 2025-01-18
80
+
81
+ ### Changed
82
+ - **Package name**: Changed from `@Raw-Fun-Gaming/raw-fun-ui` to `raw-fun-ui` for better branding
83
+ - Updated all documentation to reference `raw-fun-ui`
84
+ - Updated CDN links in demo page and wiki
85
+ - Fixed `loadFallback()` function definition order in demo page
86
+
87
+ ### Documentation
88
+ - Updated README.md with new package name and badges
89
+ - Updated all wiki pages with new package references
90
+ - Updated demo page (docs/index.html) with correct CDN links
91
+
92
+ ## [1.0.0] - 2025-01-18
93
+
94
+ ### Added
95
+
96
+ #### Core Components
97
+ - RfuiButton component with 4 color variants (default, primary, secondary, danger)
98
+ - RfuiModal component with backdrop blur and instance methods
99
+ - RfuiCard component with 3D hover effects
100
+ - RfuiInfo component with 5 color themes (yellow, green, blue, purple, red)
101
+ - RfuiTag component with gradient styling
102
+ - RfuiPage component with animated gradient borders (7 color sets)
103
+
104
+ #### Styling & Design
105
+ - Pure CSS implementation with multi-layer box shadows for 3D depth
106
+ - Gradient backgrounds with radial overlays
107
+ - Smooth hover animations with Y-axis transforms
108
+ - Backdrop blur effects (glassmorphism)
109
+ - Responsive design with 4 breakpoints (mobile-first)
110
+ - CSS custom properties for easy theming
111
+
112
+ #### Developer Experience
113
+ - Full TypeScript support with comprehensive interfaces
114
+ - Zero runtime dependencies
115
+ - ES Module, CommonJS, and UMD builds
116
+ - TypeScript declarations (.d.ts)
117
+ - Modal instance pattern for better control
118
+
119
+ #### Documentation
120
+ - Comprehensive README with 12 professional badges
121
+ - 6 detailed wiki pages (~18,000 words):
122
+ - Home page with navigation
123
+ - Installation & Setup guide for npm, CDN, and frameworks
124
+ - Component Reference with full API documentation
125
+ - Complete Examples (game menu, casino UI, settings, shop)
126
+ - Architecture Overview with system design
127
+ - Troubleshooting guide with common issues
128
+ - Interactive GitHub Pages demo site
129
+ - Wiki setup script and guide
130
+
131
+ #### DevOps
132
+ - GitHub Actions CI workflow (Node 18.x, 20.x)
133
+ - GitHub Actions Pages deployment workflow
134
+ - Automated build and type checking
135
+
136
+ #### Build System
137
+ - Rollup-based build pipeline
138
+ - PostCSS for CSS processing
139
+ - Multiple output formats (ESM, CJS, UMD)
140
+ - Source maps for debugging
141
+ - Minification with Terser
142
+
143
+ ### Technical Details
144
+ - **Bundle Size**: ~30KB (JS + CSS combined)
145
+ - **Browser Support**: Modern browsers (Chrome, Firefox, Safari, Edge)
146
+ - **Node Version**: >=14.0.0
147
+ - **TypeScript**: ^5.0.0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 fuR Gaming
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,245 @@
1
+ # [Raw Fun UI](https://raw-fun-gaming.github.io/raw-fun-ui/) · [![npm](https://img.shields.io/npm/v/raw-fun-ui)](https://www.npmjs.com/package/raw-fun-ui) [![Build Status](https://img.shields.io/github/actions/workflow/status/raw-fun-gaming/raw-fun-ui/ci.yml)](https://github.com/raw-fun-gaming/raw-fun-ui/actions) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/raw-fun-ui)](https://bundlephobia.com/package/raw-fun-ui) [![License](https://img.shields.io/github/license/raw-fun-gaming/raw-fun-ui)](LICENSE)
2
+
3
+ A game-themed UI component library with switchable themes, built with TypeScript and pure CSS.
4
+
5
+ [Live Demo](https://raw-fun-gaming.github.io/raw-fun-ui/) · [Documentation](https://raw-fun-gaming.github.io/raw-fun-ui/docs/)
6
+
7
+ ![Raw Fun UI Demo](screenshots/demo-page.png)
8
+
9
+ ## 🚀 Motivation
10
+
11
+ Inspired by the multiplier tags in Stack Rush, I wanted to create a lightweight UI library that brings that distinctive 3D blocky aesthetic to any web project. Unlike heavy framework-dependent UI libraries, Raw Fun UI is:
12
+
13
+ - **Zero Framework Dependencies** - Works with vanilla JavaScript/TypeScript
14
+ - **Pure CSS Effects** - Multi-layer box shadows for authentic 3D depth
15
+ - **Game-Ready** - Optimized for interactive applications and games
16
+ - **Self-Contained** - Single CSS file + TypeScript class, minimal build process
17
+
18
+ ## ✨ Features
19
+
20
+ - **🎮 3D Rfui Aesthetic**: Multi-layer box shadows creating realistic 3D depth
21
+ - **🎨 Pure CSS Styling**: No SVG generation, hardware-accelerated rendering
22
+ - **🎭 Theme Support**: 3 built-in themes (blocky, fall-guys, animal-crossing)
23
+ - **📦 Zero Dependencies**: Pure TypeScript/JavaScript with no external dependencies
24
+ - **💪 Full TypeScript Support**: Complete type safety with comprehensive interfaces
25
+ - **📱 Responsive Design**: Mobile-first approach with adaptive breakpoints
26
+ - **⚡ Lightweight & Fast**: Minimal bundle size, optimized for 60fps animations
27
+ - **🔧 Framework-Agnostic**: Works with React, Vue, Svelte, or vanilla JS
28
+
29
+ ## Installation
30
+
31
+ ```bash
32
+ npm install raw-fun-ui
33
+ ```
34
+
35
+ ## Usage
36
+
37
+ ```typescript
38
+ import { RawFunUI } from 'raw-fun-ui';
39
+ import 'raw-fun-ui/styles';
40
+
41
+ // Set a theme (optional - defaults to 'blocky')
42
+ RawFunUI.setTheme('fall-guys'); // or 'blocky' for default theme
43
+
44
+ // Create a button
45
+ const button = RawFunUI.createButton({
46
+ text: 'Click Me',
47
+ variant: 'primary',
48
+ onClick: () => console.log('Clicked!')
49
+ });
50
+
51
+ document.body.appendChild(button);
52
+
53
+ // Create and show a modal
54
+ const modal = RawFunUI.createModal({
55
+ title: 'Welcome',
56
+ content: 'This is a blocky modal!',
57
+ buttons: [
58
+ { text: 'OK', variant: 'primary', onClick: () => {} }
59
+ ]
60
+ });
61
+
62
+ modal.show(); // Show the modal
63
+ // modal.close(); // Close programmatically
64
+
65
+ // Convenience methods for common modal types
66
+ RawFunUI.createNotification('Success!', 'Operation completed.').show();
67
+ RawFunUI.createError('Error!', 'Something went wrong.').show();
68
+
69
+ const confirmModal = RawFunUI.createConfirmation(
70
+ 'Confirm Action',
71
+ 'Are you sure?',
72
+ () => console.log('Confirmed'),
73
+ () => console.log('Cancelled')
74
+ );
75
+ confirmModal.show();
76
+ ```
77
+
78
+ ## 📦 Components
79
+
80
+ ### Interactive Components
81
+ - **[RfuiButton](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuibutton)** - 4 variants with 3D hover effects
82
+ - **[RfuiDropdown](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuidropdown)** - Theme-aware dropdowns with 4 variants and custom arrow
83
+ - **[RfuiModal](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuimodal)** - Full-featured modals with backdrop blur and animations
84
+
85
+ ### Display Components
86
+ - **[RfuiCard](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuicard)** - Content containers with 3D styling
87
+ - **[RfuiInfo](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuiinfo)** - Overlay popups with 5 color themes (yellow, green, blue, purple, red)
88
+ - **[RfuiTag](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuitag)** - Status/location tags with gradient styling
89
+ - **[RfuiPage](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components#rfuipage)** - Full-screen pages with animated gradient borders (7 color sets) and optional auto-hide scrollbar
90
+
91
+ ### Utility Components
92
+ - **Error Dialogs** - Pre-configured error modals
93
+ - **Confirmation Dialogs** - Yes/No confirmation modals
94
+ - **Notifications** - Toast-style notifications
95
+
96
+ ## 🎭 Themes
97
+
98
+ Switch themes at runtime:
99
+
100
+ ```typescript
101
+ RawFunUI.setTheme('fall-guys');
102
+ RawFunUI.setTheme('animal-crossing');
103
+ RawFunUI.setTheme('blocky'); // default
104
+ ```
105
+
106
+ | Theme | Description |
107
+ |-------|-------------|
108
+ | `blocky` | Default dark 3D with multi-layer shadows and gradient overlays |
109
+ | `fall-guys` | Bright cartoon style — solid black offset shadows, thick white borders, 16px radius |
110
+ | `animal-crossing` | Flat cozy NookPhone style — soft diffused shadows, earthy tones, 30px containers, pill buttons |
111
+
112
+ See [Theme Design Specs](https://raw-fun-gaming.github.io/raw-fun-ui/docs/themes/) for full details.
113
+
114
+ ## Styling
115
+
116
+ Raw Fun UI uses pure CSS with 3D box-shadow effects, gradient backgrounds, and smooth transitions. All components feature:
117
+
118
+ - 3D depth with multi-layer box shadows
119
+ - Smooth hover and active state animations
120
+ - Gradient backgrounds with radial overlays
121
+ - Responsive breakpoints for all screen sizes
122
+ - Customizable color variants
123
+ - Theme-based styling via `data-rfui-theme` attribute
124
+
125
+ ## 🎨 Visual Design
126
+
127
+ The components feature:
128
+ - **Multi-layer box shadows** creating authentic 3D depth
129
+ - **Gradient backgrounds** with radial overlays for richness
130
+ - **Smooth hover animations** with Y-axis transforms
131
+ - **Backdrop blur** for modern glassmorphism effects
132
+ - **Responsive scaling** for different screen sizes
133
+ - **Customizable color variants** via CSS custom properties
134
+
135
+ ## 📖 Documentation
136
+
137
+ ### Quick Links
138
+ - 🏠 **[Documentation Home](https://raw-fun-gaming.github.io/raw-fun-ui/docs/)** - Complete documentation
139
+ - 🚀 **[Installation & Setup](https://raw-fun-gaming.github.io/raw-fun-ui/docs/installation)** - Get started quickly
140
+ - 📚 **[Component Reference](https://raw-fun-gaming.github.io/raw-fun-ui/docs/components)** - Full API documentation
141
+ - 💡 **[Complete Examples](https://raw-fun-gaming.github.io/raw-fun-ui/docs/examples)** - Real-world examples
142
+ - 🎨 **[Themes](https://raw-fun-gaming.github.io/raw-fun-ui/docs/themes/)** - Theme design specs
143
+
144
+ ## 🎮 Perfect for Games
145
+
146
+ - **No Framework Lock-in**: Works with any game engine
147
+ - **Performance Optimized**: Pure CSS for 60fps animations
148
+ - **Memory Efficient**: Minimal memory footprint
149
+ - **Event-Driven**: Clean event handling
150
+ - **Responsive**: Adapts to different screen sizes
151
+
152
+ ## 🖼️ Credits
153
+
154
+ **Design Inspiration**: [Stack Rush](https://github.com/raw-fun-gaming) multiplier tags - The distinctive 3D blocky aesthetic with multi-layer box shadows and gradient backgrounds.
155
+
156
+ ## 📁 File Structure
157
+
158
+ ```
159
+ raw-fun-ui/
160
+ ├── README.md # This file
161
+ ├── package.json # Package configuration
162
+ ├── rollup.config.js # Build configuration
163
+ ├── src/ # Source code
164
+ │ ├── index.ts # Main entry point
165
+ │ ├── components/ # Individual component classes
166
+ │ │ ├── RfuiButton.ts
167
+ │ │ ├── RfuiModal.ts
168
+ │ │ ├── RfuiCard.ts
169
+ │ │ ├── RfuiInfo.ts
170
+ │ │ ├── RfuiTag.ts
171
+ │ │ └── RfuiPage.ts
172
+ │ ├── types/ # TypeScript definitions
173
+ │ │ └── index.ts
174
+ │ └── styles/ # CSS modules
175
+ │ ├── base/
176
+ │ │ ├── _variables.css
177
+ │ │ ├── _shared.css
178
+ │ │ └── _animations.css
179
+ │ ├── components/
180
+ │ │ ├── _button.css
181
+ │ │ ├── _modal.css
182
+ │ │ ├── _card.css
183
+ │ │ ├── _info.css
184
+ │ │ ├── _tag.css
185
+ │ │ └── _page.css
186
+ │ ├── themes/
187
+ │ │ ├── _fall-guys.css
188
+ │ │ └── _animal-crossing.css
189
+ │ └── raw-fun-ui.css # Main entry point
190
+ ├── dist/ # Built output (generated)
191
+ │ ├── index.esm.js # ES Module build
192
+ │ ├── index.cjs.js # CommonJS build
193
+ │ ├── index.umd.js # UMD build
194
+ │ ├── index.d.ts # TypeScript declarations
195
+ │ └── raw-fun-ui.css # Processed styles
196
+ ├── public/ # GitHub Pages source
197
+ │ ├── index.html # Live demo page
198
+ │ └── docs/ # Jekyll documentation pages
199
+ └── screenshots/ # Component screenshots
200
+ ```
201
+
202
+ ## 🚀 Development
203
+
204
+ ### Development Commands
205
+
206
+ ```bash
207
+ # Install dependencies
208
+ npm install
209
+
210
+ # Build library
211
+ npm run build
212
+
213
+ # Watch mode for development
214
+ npm run dev
215
+
216
+ # Run demo server
217
+ npm run demo
218
+
219
+ # Clean build artifacts
220
+ npm run clean
221
+ ```
222
+
223
+ ### Contributing
224
+
225
+ Contributions welcome! Please maintain the 3D blocky aesthetic and follow the established patterns for new components.
226
+
227
+ 1. Fork the repository
228
+ 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
229
+ 3. Commit your changes (`git commit -m 'Add amazing feature'`)
230
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
231
+ 5. Open a Pull Request
232
+
233
+ ## 🔄 Version History
234
+
235
+ See [CHANGELOG.md](CHANGELOG.md) for version history and release notes.
236
+
237
+ ## 📄 License
238
+
239
+ MIT © Richard Fu
240
+
241
+ ---
242
+
243
+ **Built for gaming. Designed with 3D depth. 🎮**
244
+
245
+ *Star ⭐ this repo if you find it useful!*
package/dist/index.cjs.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});class e{static create(e){const t=document.createElement("div");t.className="rfui-btn-wrapper";const n=document.createElement("button");return n.className=`rfui-btn rfui-gradient rfui-3d ${e.variant||"default"}`,e.className&&(n.className+=` ${e.className}`),n.textContent=e.text,n.disabled=e.disabled||!1,e.onClick&&n.addEventListener("click",e.onClick),t.appendChild(n),t}}class t{static create(t){const n=document.createElement("div");n.className="rfui-modal-overlay";const a=document.createElement("div");a.className="rfui-modal-wrapper rfui-gradient rfui-3d";const o=document.createElement("div");o.className="rfui-content",t.className&&(o.className+=` ${t.className}`);const r=document.createElement("div");r.className="rfui-header-bordered";const c=document.createElement("h2");c.className="rfui-title-enhanced",c.textContent=t.title,r.appendChild(c);const s={element:n,show(){document.body.appendChild(n)},close(){n.style.animation="modalFadeIn 0.2s ease-out reverse",setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n)},200),t.onClose&&t.onClose()}};if(!1!==t.showCloseButton){const e=document.createElement("button");e.className="rfui-close-btn",e.addEventListener("click",()=>{s.close()}),a.appendChild(e)}const l=document.createElement("div");if(l.className="rfui-modal-body","string"==typeof t.content?l.innerHTML=t.content:t.content instanceof HTMLElement?l.appendChild(t.content):l.innerHTML=String(t.content||"No content provided"),t.buttons&&t.buttons.length>0){const n=document.createElement("div");n.className="rfui-modal-footer",t.buttons.forEach(t=>{const a=e.create({...t,onClick:()=>{var e;t.onClick&&t.onClick(),(null===(e=t.className)||void 0===e?void 0:e.includes("no-auto-close"))||s.close()}});n.appendChild(a)}),o.appendChild(r),o.appendChild(l),o.appendChild(n)}else o.appendChild(r),o.appendChild(l);if(a.addEventListener("click",e=>{e.stopPropagation()}),!1!==t.closeOnOverlayClick&&n.addEventListener("click",()=>{s.close()}),!1!==t.closeOnOverlayClick){const e=t=>{"Escape"===t.key&&(s.close(),document.removeEventListener("keydown",e))};document.addEventListener("keydown",e)}return a.appendChild(o),n.appendChild(a),s}}class n{static create(e){const t=document.createElement("div"),n=e.variant||"default";t.className=`rfui-card-wrapper rfui-gradient rfui-3d ${n}`;const a=document.createElement("div");if(a.className="rfui-card",e.className&&(a.className+=` ${e.className}`),e.title){const t=document.createElement("h3");t.className="rfui-card-title",t.textContent=e.title,a.appendChild(t)}const o=document.createElement("div");return o.className="rfui-card-content","string"==typeof e.content?o.innerHTML=e.content:e.content instanceof HTMLElement?o.appendChild(e.content):o.innerHTML=String(e.content||"No content provided"),a.appendChild(o),t.appendChild(a),t}}class a{static create(e){const t=document.createElement("div");t.className="rfui-info-overlay";const n=document.createElement("div");n.className="rfui-info-wrapper rfui-gradient rfui-3d",e.titleColor&&n.classList.add(`theme-${e.titleColor}`);const a=document.createElement("div");let o;if(a.className="rfui-content",e.className&&(a.className+=` ${e.className}`),e.title){o=document.createElement("div"),o.className="rfui-header-bordered";const t=document.createElement("h2");t.className="rfui-info-title rfui-title-enhanced",t.textContent=e.title,o.appendChild(t)}const r=document.createElement("div");return r.className="rfui-info-body","string"==typeof e.content?r.innerHTML=e.content:e.content instanceof HTMLElement?r.appendChild(e.content):r.innerHTML=String(e.content||"No content provided"),o&&a.appendChild(o),a.appendChild(r),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{e.onClose&&e.onClose(),t.parentNode&&t.parentNode.removeChild(t)}),n.appendChild(a),t.appendChild(n),t}}class o{static create(e){const t=document.createElement("div"),n=e.variant||"default";t.className=`rfui-tag-wrapper rfui-gradient rfui-3d ${n}`;const a=document.createElement("div");if(a.className="rfui-tag-content",e.className&&(a.className+=` ${e.className}`),e.title){const t=document.createElement("div");t.className="rfui-tag-header";const n=document.createElement("h3");n.className="rfui-tag-title",n.textContent=e.title,t.appendChild(n),a.appendChild(t)}const o=document.createElement("div");return o.className="rfui-tag-body","string"==typeof e.content?o.innerHTML=e.content:e.content instanceof HTMLElement?o.appendChild(e.content):o.innerHTML=String(e.content||""),a.appendChild(o),t.appendChild(a),t}}class r{static getRandomGradient(){const e=Math.floor(Math.random()*this.colorGradients.length);return this.colorGradients[e]}static create(e){const t=document.createElement("div");t.className="rfui-page-overlay";const n=document.createElement("div");n.className="rfui-page-content";const[a,o,c]=r.getRandomGradient();n.style.setProperty("--rfui-page-border-color-1",a),n.style.setProperty("--rfui-page-border-color-2",o),n.style.setProperty("--rfui-page-border-color-3",c),e.className&&(n.className+=` ${e.className}`);const s=document.createElement("div");s.className="rfui-page-wrapper",!1!==e.customScrollbar&&s.classList.add("custom-scrollbar"),"string"==typeof e.content?s.innerHTML=e.content:e.content instanceof HTMLElement?s.appendChild(e.content):s.innerHTML=String(e.content||"No content provided");let l=null;if(!1!==e.customScrollbar){let e;s.addEventListener("scroll",()=>{s.classList.add("scrolling"),clearTimeout(e),e=window.setTimeout(()=>{s.classList.remove("scrolling")},1e3)})}const i={element:t,show(){document.body.appendChild(t),l=window.setInterval(()=>{const[e,t,a]=r.getRandomGradient();n.style.setProperty("--rfui-page-border-color-1",e),n.style.setProperty("--rfui-page-border-color-2",t),n.style.setProperty("--rfui-page-border-color-3",a)},3e3)},close(){null!==l&&(clearInterval(l),l=null),t.style.animation="pageFadeOut 0.3s ease-out",n.style.animation="pageSlideOut 0.3s ease-out",setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},300),e.onClose&&e.onClose()}},d=document.createElement("button");d.className="rfui-close-btn",d.addEventListener("click",()=>{i.close()}),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{i.close()});const m=e=>{"Escape"===e.key&&(i.close(),document.removeEventListener("keydown",m))};return document.addEventListener("keydown",m),n.appendChild(d),n.appendChild(s),t.appendChild(n),i}}r.colorGradients=[["rgba(255, 100, 100, 0.8)","rgba(255, 150, 100, 0.8)","rgba(255, 200, 100, 0.8)"],["rgba(100, 150, 255, 0.8)","rgba(100, 200, 255, 0.8)","rgba(100, 255, 220, 0.8)"],["rgba(150, 100, 255, 0.8)","rgba(200, 100, 255, 0.8)","rgba(255, 100, 200, 0.8)"],["rgba(100, 200, 100, 0.8)","rgba(150, 255, 100, 0.8)","rgba(200, 255, 150, 0.8)"],["rgba(255, 100, 100, 0.8)","rgba(100, 255, 100, 0.8)","rgba(100, 150, 255, 0.8)"],["rgba(255, 150, 50, 0.8)","rgba(255, 200, 80, 0.8)","rgba(255, 230, 120, 0.8)"],["rgba(100, 255, 255, 0.8)","rgba(255, 100, 255, 0.8)","rgba(255, 255, 100, 0.8)"]];class c{static create(e){const t=document.createElement("div");if(t.className="rfui-dropdown-wrapper",e.label){const n=document.createElement("label");n.className="rfui-dropdown-label",n.textContent=e.label,t.appendChild(n)}const n=document.createElement("select");return n.className=`rfui-dropdown rfui-gradient rfui-3d ${e.variant||"default"}`,e.className&&(n.className+=` ${e.className}`),e.options.forEach(e=>{const t=document.createElement("option");t.value=e.value,t.textContent=e.label,n.appendChild(t)}),e.value&&(n.value=e.value),e.onChange&&n.addEventListener("change",t=>{const n=t.target;e.onChange(n.value)}),e.disabled&&(n.disabled=!0),t.appendChild(n),t}}class s{static setTheme(e){s.currentTheme=e,"blocky"===e?document.documentElement.removeAttribute("data-rfui-theme"):document.documentElement.setAttribute("data-rfui-theme",e)}static getTheme(){return s.currentTheme}static showConfirmation(e,t,n,a){const o=s.createModal({title:e,content:t,buttons:[{text:"Cancel",variant:"secondary",onClick:a||(()=>{})},{text:"Confirm",variant:"danger",onClick:n}]});return o.show(),o}static showNotification(e,t,n){const a=s.createModal({title:e,content:t,onClose:n,buttons:[{text:"OK",onClick:n||(()=>{})}]});return a.show(),a}static showError(e,t,n){const a=s.createModal({title:e,content:t,buttons:[{text:"OK",variant:"danger",onClick:n||(()=>{})}],onClose:n});return a.show(),a}}s.currentTheme="blocky",s.createButton=e.create,s.createModal=t.create,s.createCard=n.create,s.createInfo=a.create,s.createTag=o.create,s.createPage=r.create,s.createDropdown=c.create,exports.RawFunUI=s,exports.RfuiButton=e,exports.RfuiCard=n,exports.RfuiDropdown=c,exports.RfuiInfo=a,exports.RfuiModal=t,exports.RfuiPage=r,exports.RfuiTag=o,exports.default=s;
package/dist/index.d.ts ADDED
@@ -0,0 +1,216 @@
1
+ type ComponentVariant = 'default' | 'primary' | 'secondary' | 'danger';
2
+ type TitleColorTheme = 'yellow' | 'green' | 'blue' | 'purple' | 'red';
3
+ /**
4
+ * Available RawFunUI themes
5
+ * - 'blocky': Default dark 3D blocky theme
6
+ * - 'fall-guys': Bright, playful cartoon theme with white borders
7
+ * - 'animal-crossing': Flat, cozy theme with earthy tones and pill shapes
8
+ */
9
+ type RfuiTheme = 'blocky' | 'fall-guys' | 'animal-crossing';
10
+ interface RfuiButtonOptions {
11
+ text: string;
12
+ variant?: ComponentVariant;
13
+ onClick?: () => void;
14
+ disabled?: boolean;
15
+ className?: string;
16
+ }
17
+ interface RfuiModalOptions {
18
+ title: string;
19
+ content: string | HTMLElement;
20
+ showCloseButton?: boolean;
21
+ closeOnOverlayClick?: boolean;
22
+ buttons: RfuiButtonOptions[];
23
+ onClose?: () => void;
24
+ className?: string;
25
+ }
26
+ interface RfuiCardOptions {
27
+ title?: string;
28
+ content: string | HTMLElement;
29
+ variant?: ComponentVariant;
30
+ className?: string;
31
+ }
32
+ interface RfuiInfoOptions {
33
+ title?: string;
34
+ titleColor?: 'yellow' | 'green' | 'blue' | 'purple' | 'red';
35
+ content: string | HTMLElement;
36
+ className?: string;
37
+ onClose?: () => void;
38
+ }
39
+ interface RfuiTagOptions {
40
+ title?: string;
41
+ content: string | HTMLElement;
42
+ variant?: ComponentVariant;
43
+ className?: string;
44
+ }
45
+ interface RfuiDropdownOption {
46
+ value: string;
47
+ label: string;
48
+ }
49
+ interface RfuiDropdownOptions {
50
+ options: RfuiDropdownOption[];
51
+ value?: string;
52
+ variant?: ComponentVariant;
53
+ onChange?: (value: string) => void;
54
+ disabled?: boolean;
55
+ placeholder?: string;
56
+ label?: string;
57
+ className?: string;
58
+ }
59
+ interface RfuiPageOptions {
60
+ content: string | HTMLElement;
61
+ onClose?: () => void;
62
+ className?: string;
63
+ customScrollbar?: boolean;
64
+ }
65
+ interface RfuiPageInstance {
66
+ show(): void;
67
+ close(): void;
68
+ element: HTMLDivElement;
69
+ }
70
+ interface ComponentEventHandlers {
71
+ onClick?: () => void;
72
+ onClose?: () => void;
73
+ onConfirm?: () => void;
74
+ onCancel?: () => void;
75
+ }
76
+ interface CSSClassNames {
77
+ BUTTON_WRAPPER: 'rfui-btn-wrapper';
78
+ MODAL_WRAPPER: 'rfui-modal-wrapper';
79
+ CARD_WRAPPER: 'rfui-card-wrapper';
80
+ TAG_WRAPPER: 'rfui-tag-wrapper';
81
+ INFO_WRAPPER: 'rfui-info-wrapper';
82
+ RFUI_CONTENT: 'rfui-content';
83
+ RFUI_HEADER: 'rfui-header';
84
+ RFUI_HEADER_BORDERED: 'rfui-header-bordered';
85
+ RFUI_TITLE: 'rfui-title';
86
+ RFUI_TITLE_ENHANCED: 'rfui-title-enhanced';
87
+ MODAL_OVERLAY: 'rfui-modal-overlay';
88
+ INFO_OVERLAY: 'rfui-info-overlay';
89
+ }
90
+ interface AnimationConfig {
91
+ duration?: number;
92
+ easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
93
+ delay?: number;
94
+ infinite?: boolean;
95
+ }
96
+ interface ResponsiveBreakpoints {
97
+ small: '400px';
98
+ mobile: '480px';
99
+ tablet: '560px';
100
+ medium: '768px';
101
+ large: '840px';
102
+ desktop: '900px';
103
+ }
104
+ interface RawFunUIInterface {
105
+ createButton(options: RfuiButtonOptions): HTMLElement;
106
+ createModal(options: RfuiModalOptions): HTMLElement;
107
+ createCard(options: RfuiCardOptions): HTMLElement;
108
+ createInfo(options: RfuiInfoOptions): HTMLElement;
109
+ createTag(options: RfuiTagOptions): HTMLElement;
110
+ showModal(modal: HTMLElement): void;
111
+ closeModal(modal: HTMLElement): void;
112
+ showError(title: string, message: string, onClose?: () => void): void;
113
+ showConfirmation(title: string, message: string, onConfirm: () => void, onCancel?: () => void): void;
114
+ showNotification(title: string, message: string, onClose?: () => void): void;
115
+ }
116
+
117
+ declare class RfuiButton {
118
+ /**
119
+ * Creates a 3D rfui-themed button with pure CSS styling
120
+ */
121
+ static create(options: RfuiButtonOptions): HTMLButtonElement;
122
+ }
123
+
124
+ interface RfuiModalInstance {
125
+ show(): void;
126
+ close(): void;
127
+ element: HTMLDivElement;
128
+ }
129
+ declare class RfuiModal {
130
+ /**
131
+ * Creates a 3D rfui-themed modal with backdrop blur and pure CSS styling
132
+ * Returns an instance with show() and close() methods
133
+ */
134
+ static create(options: RfuiModalOptions): RfuiModalInstance;
135
+ }
136
+
137
+ declare class RfuiCard {
138
+ /**
139
+ * Creates a 3D rfui-themed card with pure CSS styling
140
+ */
141
+ static create(options: RfuiCardOptions): HTMLDivElement;
142
+ }
143
+
144
+ declare class RfuiInfo {
145
+ /**
146
+ * Create an info overlay with 3D blocky styling and color themes
147
+ */
148
+ static create(options: RfuiInfoOptions): HTMLDivElement;
149
+ }
150
+
151
+ declare class RfuiTag {
152
+ /**
153
+ * Creates a 3D rfui-themed tag (compact display element)
154
+ */
155
+ static create(options: RfuiTagOptions): HTMLDivElement;
156
+ }
157
+
158
+ declare class RfuiPage {
159
+ /**
160
+ * Predefined color gradient sets for page borders
161
+ * Each set contains 3 colors that create a smooth gradient
162
+ */
163
+ private static readonly colorGradients;
164
+ /**
165
+ * Selects a random color gradient from the predefined sets
166
+ */
167
+ private static getRandomGradient;
168
+ /**
169
+ * Creates a full-screen rfui-themed page overlay
170
+ * Returns an instance with show() and close() methods
171
+ */
172
+ static create(options: RfuiPageOptions): RfuiPageInstance;
173
+ }
174
+
175
+ declare class RfuiDropdown {
176
+ /**
177
+ * Creates a 3D rfui-themed dropdown with pure CSS styling
178
+ */
179
+ static create(options: RfuiDropdownOptions): HTMLDivElement;
180
+ }
181
+
182
+ declare class RawFunUI {
183
+ private static currentTheme;
184
+ static createButton: typeof RfuiButton.create;
185
+ static createModal: typeof RfuiModal.create;
186
+ static createCard: typeof RfuiCard.create;
187
+ static createInfo: typeof RfuiInfo.create;
188
+ static createTag: typeof RfuiTag.create;
189
+ static createPage: typeof RfuiPage.create;
190
+ static createDropdown: typeof RfuiDropdown.create;
191
+ /**
192
+ * Sets the current theme for all RawFunUI components
193
+ * @param theme - The theme to apply ('blocky' | 'fall-guys')
194
+ */
195
+ static setTheme(theme: RfuiTheme): void;
196
+ /**
197
+ * Gets the current theme
198
+ * @returns The current theme name
199
+ */
200
+ static getTheme(): RfuiTheme;
201
+ /**
202
+ * Creates and shows a confirmation modal with Cancel/Confirm buttons
203
+ */
204
+ static showConfirmation(title: string, message: string, onConfirm: () => void, onCancel?: () => void): RfuiModalInstance;
205
+ /**
206
+ * Creates and shows a notification modal with OK button
207
+ */
208
+ static showNotification(title: string, message: string, onClose?: () => void): RfuiModalInstance;
209
+ /**
210
+ * Creates and shows an error modal with danger-styled OK button
211
+ */
212
+ static showError(title: string, message: string, onClose?: () => void): RfuiModalInstance;
213
+ }
214
+
215
+ export { RawFunUI, RfuiButton, RfuiCard, RfuiDropdown, RfuiInfo, RfuiModal, RfuiPage, RfuiTag, RawFunUI as default };
216
+ export type { AnimationConfig, CSSClassNames, ComponentEventHandlers, ComponentVariant, RawFunUIInterface, ResponsiveBreakpoints, RfuiButtonOptions, RfuiCardOptions, RfuiDropdownOption, RfuiDropdownOptions, RfuiInfoOptions, RfuiModalInstance, RfuiModalOptions, RfuiPageInstance, RfuiPageOptions, RfuiTagOptions, RfuiTheme, TitleColorTheme };
package/dist/index.esm.js ADDED
@@ -0,0 +1 @@
1
+ class e{static create(e){const t=document.createElement("div");t.className="rfui-btn-wrapper";const n=document.createElement("button");return n.className=`rfui-btn rfui-gradient rfui-3d ${e.variant||"default"}`,e.className&&(n.className+=` ${e.className}`),n.textContent=e.text,n.disabled=e.disabled||!1,e.onClick&&n.addEventListener("click",e.onClick),t.appendChild(n),t}}class t{static create(t){const n=document.createElement("div");n.className="rfui-modal-overlay";const a=document.createElement("div");a.className="rfui-modal-wrapper rfui-gradient rfui-3d";const o=document.createElement("div");o.className="rfui-content",t.className&&(o.className+=` ${t.className}`);const c=document.createElement("div");c.className="rfui-header-bordered";const r=document.createElement("h2");r.className="rfui-title-enhanced",r.textContent=t.title,c.appendChild(r);const s={element:n,show(){document.body.appendChild(n)},close(){n.style.animation="modalFadeIn 0.2s ease-out reverse",setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n)},200),t.onClose&&t.onClose()}};if(!1!==t.showCloseButton){const e=document.createElement("button");e.className="rfui-close-btn",e.addEventListener("click",()=>{s.close()}),a.appendChild(e)}const l=document.createElement("div");if(l.className="rfui-modal-body","string"==typeof t.content?l.innerHTML=t.content:t.content instanceof HTMLElement?l.appendChild(t.content):l.innerHTML=String(t.content||"No content provided"),t.buttons&&t.buttons.length>0){const n=document.createElement("div");n.className="rfui-modal-footer",t.buttons.forEach(t=>{const a=e.create({...t,onClick:()=>{var e;t.onClick&&t.onClick(),(null===(e=t.className)||void 0===e?void 0:e.includes("no-auto-close"))||s.close()}});n.appendChild(a)}),o.appendChild(c),o.appendChild(l),o.appendChild(n)}else o.appendChild(c),o.appendChild(l);if(a.addEventListener("click",e=>{e.stopPropagation()}),!1!==t.closeOnOverlayClick&&n.addEventListener("click",()=>{s.close()}),!1!==t.closeOnOverlayClick){const e=t=>{"Escape"===t.key&&(s.close(),document.removeEventListener("keydown",e))};document.addEventListener("keydown",e)}return a.appendChild(o),n.appendChild(a),s}}class n{static create(e){const t=document.createElement("div"),n=e.variant||"default";t.className=`rfui-card-wrapper rfui-gradient rfui-3d ${n}`;const a=document.createElement("div");if(a.className="rfui-card",e.className&&(a.className+=` ${e.className}`),e.title){const t=document.createElement("h3");t.className="rfui-card-title",t.textContent=e.title,a.appendChild(t)}const o=document.createElement("div");return o.className="rfui-card-content","string"==typeof e.content?o.innerHTML=e.content:e.content instanceof HTMLElement?o.appendChild(e.content):o.innerHTML=String(e.content||"No content provided"),a.appendChild(o),t.appendChild(a),t}}class a{static create(e){const t=document.createElement("div");t.className="rfui-info-overlay";const n=document.createElement("div");n.className="rfui-info-wrapper rfui-gradient rfui-3d",e.titleColor&&n.classList.add(`theme-${e.titleColor}`);const a=document.createElement("div");let o;if(a.className="rfui-content",e.className&&(a.className+=` ${e.className}`),e.title){o=document.createElement("div"),o.className="rfui-header-bordered";const t=document.createElement("h2");t.className="rfui-info-title rfui-title-enhanced",t.textContent=e.title,o.appendChild(t)}const c=document.createElement("div");return c.className="rfui-info-body","string"==typeof e.content?c.innerHTML=e.content:e.content instanceof HTMLElement?c.appendChild(e.content):c.innerHTML=String(e.content||"No content provided"),o&&a.appendChild(o),a.appendChild(c),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{e.onClose&&e.onClose(),t.parentNode&&t.parentNode.removeChild(t)}),n.appendChild(a),t.appendChild(n),t}}class o{static create(e){const t=document.createElement("div"),n=e.variant||"default";t.className=`rfui-tag-wrapper rfui-gradient rfui-3d ${n}`;const a=document.createElement("div");if(a.className="rfui-tag-content",e.className&&(a.className+=` ${e.className}`),e.title){const t=document.createElement("div");t.className="rfui-tag-header";const n=document.createElement("h3");n.className="rfui-tag-title",n.textContent=e.title,t.appendChild(n),a.appendChild(t)}const o=document.createElement("div");return o.className="rfui-tag-body","string"==typeof e.content?o.innerHTML=e.content:e.content instanceof HTMLElement?o.appendChild(e.content):o.innerHTML=String(e.content||""),a.appendChild(o),t.appendChild(a),t}}class c{static getRandomGradient(){const e=Math.floor(Math.random()*this.colorGradients.length);return this.colorGradients[e]}static create(e){const t=document.createElement("div");t.className="rfui-page-overlay";const n=document.createElement("div");n.className="rfui-page-content";const[a,o,r]=c.getRandomGradient();n.style.setProperty("--rfui-page-border-color-1",a),n.style.setProperty("--rfui-page-border-color-2",o),n.style.setProperty("--rfui-page-border-color-3",r),e.className&&(n.className+=` ${e.className}`);const s=document.createElement("div");s.className="rfui-page-wrapper",!1!==e.customScrollbar&&s.classList.add("custom-scrollbar"),"string"==typeof e.content?s.innerHTML=e.content:e.content instanceof HTMLElement?s.appendChild(e.content):s.innerHTML=String(e.content||"No content provided");let l=null;if(!1!==e.customScrollbar){let e;s.addEventListener("scroll",()=>{s.classList.add("scrolling"),clearTimeout(e),e=window.setTimeout(()=>{s.classList.remove("scrolling")},1e3)})}const i={element:t,show(){document.body.appendChild(t),l=window.setInterval(()=>{const[e,t,a]=c.getRandomGradient();n.style.setProperty("--rfui-page-border-color-1",e),n.style.setProperty("--rfui-page-border-color-2",t),n.style.setProperty("--rfui-page-border-color-3",a)},3e3)},close(){null!==l&&(clearInterval(l),l=null),t.style.animation="pageFadeOut 0.3s ease-out",n.style.animation="pageSlideOut 0.3s ease-out",setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},300),e.onClose&&e.onClose()}},d=document.createElement("button");d.className="rfui-close-btn",d.addEventListener("click",()=>{i.close()}),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{i.close()});const m=e=>{"Escape"===e.key&&(i.close(),document.removeEventListener("keydown",m))};return document.addEventListener("keydown",m),n.appendChild(d),n.appendChild(s),t.appendChild(n),i}}c.colorGradients=[["rgba(255, 100, 100, 0.8)","rgba(255, 150, 100, 0.8)","rgba(255, 200, 100, 0.8)"],["rgba(100, 150, 255, 0.8)","rgba(100, 200, 255, 0.8)","rgba(100, 255, 220, 0.8)"],["rgba(150, 100, 255, 0.8)","rgba(200, 100, 255, 0.8)","rgba(255, 100, 200, 0.8)"],["rgba(100, 200, 100, 0.8)","rgba(150, 255, 100, 0.8)","rgba(200, 255, 150, 0.8)"],["rgba(255, 100, 100, 0.8)","rgba(100, 255, 100, 0.8)","rgba(100, 150, 255, 0.8)"],["rgba(255, 150, 50, 0.8)","rgba(255, 200, 80, 0.8)","rgba(255, 230, 120, 0.8)"],["rgba(100, 255, 255, 0.8)","rgba(255, 100, 255, 0.8)","rgba(255, 255, 100, 0.8)"]];class r{static create(e){const t=document.createElement("div");if(t.className="rfui-dropdown-wrapper",e.label){const n=document.createElement("label");n.className="rfui-dropdown-label",n.textContent=e.label,t.appendChild(n)}const n=document.createElement("select");return n.className=`rfui-dropdown rfui-gradient rfui-3d ${e.variant||"default"}`,e.className&&(n.className+=` ${e.className}`),e.options.forEach(e=>{const t=document.createElement("option");t.value=e.value,t.textContent=e.label,n.appendChild(t)}),e.value&&(n.value=e.value),e.onChange&&n.addEventListener("change",t=>{const n=t.target;e.onChange(n.value)}),e.disabled&&(n.disabled=!0),t.appendChild(n),t}}class s{static setTheme(e){s.currentTheme=e,"blocky"===e?document.documentElement.removeAttribute("data-rfui-theme"):document.documentElement.setAttribute("data-rfui-theme",e)}static getTheme(){return s.currentTheme}static showConfirmation(e,t,n,a){const o=s.createModal({title:e,content:t,buttons:[{text:"Cancel",variant:"secondary",onClick:a||(()=>{})},{text:"Confirm",variant:"danger",onClick:n}]});return o.show(),o}static showNotification(e,t,n){const a=s.createModal({title:e,content:t,onClose:n,buttons:[{text:"OK",onClick:n||(()=>{})}]});return a.show(),a}static showError(e,t,n){const a=s.createModal({title:e,content:t,buttons:[{text:"OK",variant:"danger",onClick:n||(()=>{})}],onClose:n});return a.show(),a}}s.currentTheme="blocky",s.createButton=e.create,s.createModal=t.create,s.createCard=n.create,s.createInfo=a.create,s.createTag=o.create,s.createPage=c.create,s.createDropdown=r.create;export{s as RawFunUI,e as RfuiButton,n as RfuiCard,r as RfuiDropdown,a as RfuiInfo,t as RfuiModal,c as RfuiPage,o as RfuiTag,s as default};
package/dist/index.umd.js ADDED
@@ -0,0 +1 @@
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).RawFunUI={})}(this,function(e){"use strict";class t{static create(e){const t=document.createElement("div");t.className="rfui-btn-wrapper";const n=document.createElement("button");return n.className=`rfui-btn rfui-gradient rfui-3d ${e.variant||"default"}`,e.className&&(n.className+=` ${e.className}`),n.textContent=e.text,n.disabled=e.disabled||!1,e.onClick&&n.addEventListener("click",e.onClick),t.appendChild(n),t}}class n{static create(e){const n=document.createElement("div");n.className="rfui-modal-overlay";const a=document.createElement("div");a.className="rfui-modal-wrapper rfui-gradient rfui-3d";const o=document.createElement("div");o.className="rfui-content",e.className&&(o.className+=` ${e.className}`);const c=document.createElement("div");c.className="rfui-header-bordered";const r=document.createElement("h2");r.className="rfui-title-enhanced",r.textContent=e.title,c.appendChild(r);const s={element:n,show(){document.body.appendChild(n)},close(){n.style.animation="modalFadeIn 0.2s ease-out reverse",setTimeout(()=>{n.parentNode&&n.parentNode.removeChild(n)},200),e.onClose&&e.onClose()}};if(!1!==e.showCloseButton){const e=document.createElement("button");e.className="rfui-close-btn",e.addEventListener("click",()=>{s.close()}),a.appendChild(e)}const l=document.createElement("div");if(l.className="rfui-modal-body","string"==typeof e.content?l.innerHTML=e.content:e.content instanceof HTMLElement?l.appendChild(e.content):l.innerHTML=String(e.content||"No content provided"),e.buttons&&e.buttons.length>0){const n=document.createElement("div");n.className="rfui-modal-footer",e.buttons.forEach(e=>{const a=t.create({...e,onClick:()=>{var t;e.onClick&&e.onClick(),(null===(t=e.className)||void 0===t?void 0:t.includes("no-auto-close"))||s.close()}});n.appendChild(a)}),o.appendChild(c),o.appendChild(l),o.appendChild(n)}else o.appendChild(c),o.appendChild(l);if(a.addEventListener("click",e=>{e.stopPropagation()}),!1!==e.closeOnOverlayClick&&n.addEventListener("click",()=>{s.close()}),!1!==e.closeOnOverlayClick){const e=t=>{"Escape"===t.key&&(s.close(),document.removeEventListener("keydown",e))};document.addEventListener("keydown",e)}return a.appendChild(o),n.appendChild(a),s}}class a{static create(e){const t=document.createElement("div"),n=e.variant||"default";t.className=`rfui-card-wrapper rfui-gradient rfui-3d ${n}`;const a=document.createElement("div");if(a.className="rfui-card",e.className&&(a.className+=` ${e.className}`),e.title){const t=document.createElement("h3");t.className="rfui-card-title",t.textContent=e.title,a.appendChild(t)}const o=document.createElement("div");return o.className="rfui-card-content","string"==typeof e.content?o.innerHTML=e.content:e.content instanceof HTMLElement?o.appendChild(e.content):o.innerHTML=String(e.content||"No content provided"),a.appendChild(o),t.appendChild(a),t}}class o{static create(e){const t=document.createElement("div");t.className="rfui-info-overlay";const n=document.createElement("div");n.className="rfui-info-wrapper rfui-gradient rfui-3d",e.titleColor&&n.classList.add(`theme-${e.titleColor}`);const a=document.createElement("div");let o;if(a.className="rfui-content",e.className&&(a.className+=` ${e.className}`),e.title){o=document.createElement("div"),o.className="rfui-header-bordered";const t=document.createElement("h2");t.className="rfui-info-title rfui-title-enhanced",t.textContent=e.title,o.appendChild(t)}const c=document.createElement("div");return c.className="rfui-info-body","string"==typeof e.content?c.innerHTML=e.content:e.content instanceof HTMLElement?c.appendChild(e.content):c.innerHTML=String(e.content||"No content provided"),o&&a.appendChild(o),a.appendChild(c),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{e.onClose&&e.onClose(),t.parentNode&&t.parentNode.removeChild(t)}),n.appendChild(a),t.appendChild(n),t}}class c{static create(e){const t=document.createElement("div"),n=e.variant||"default";t.className=`rfui-tag-wrapper rfui-gradient rfui-3d ${n}`;const a=document.createElement("div");if(a.className="rfui-tag-content",e.className&&(a.className+=` ${e.className}`),e.title){const t=document.createElement("div");t.className="rfui-tag-header";const n=document.createElement("h3");n.className="rfui-tag-title",n.textContent=e.title,t.appendChild(n),a.appendChild(t)}const o=document.createElement("div");return o.className="rfui-tag-body","string"==typeof e.content?o.innerHTML=e.content:e.content instanceof HTMLElement?o.appendChild(e.content):o.innerHTML=String(e.content||""),a.appendChild(o),t.appendChild(a),t}}class r{static getRandomGradient(){const e=Math.floor(Math.random()*this.colorGradients.length);return this.colorGradients[e]}static create(e){const t=document.createElement("div");t.className="rfui-page-overlay";const n=document.createElement("div");n.className="rfui-page-content";const[a,o,c]=r.getRandomGradient();n.style.setProperty("--rfui-page-border-color-1",a),n.style.setProperty("--rfui-page-border-color-2",o),n.style.setProperty("--rfui-page-border-color-3",c),e.className&&(n.className+=` ${e.className}`);const s=document.createElement("div");s.className="rfui-page-wrapper",!1!==e.customScrollbar&&s.classList.add("custom-scrollbar"),"string"==typeof e.content?s.innerHTML=e.content:e.content instanceof HTMLElement?s.appendChild(e.content):s.innerHTML=String(e.content||"No content provided");let l=null;if(!1!==e.customScrollbar){let e;s.addEventListener("scroll",()=>{s.classList.add("scrolling"),clearTimeout(e),e=window.setTimeout(()=>{s.classList.remove("scrolling")},1e3)})}const i={element:t,show(){document.body.appendChild(t),l=window.setInterval(()=>{const[e,t,a]=r.getRandomGradient();n.style.setProperty("--rfui-page-border-color-1",e),n.style.setProperty("--rfui-page-border-color-2",t),n.style.setProperty("--rfui-page-border-color-3",a)},3e3)},close(){null!==l&&(clearInterval(l),l=null),t.style.animation="pageFadeOut 0.3s ease-out",n.style.animation="pageSlideOut 0.3s ease-out",setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},300),e.onClose&&e.onClose()}},d=document.createElement("button");d.className="rfui-close-btn",d.addEventListener("click",()=>{i.close()}),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{i.close()});const m=e=>{"Escape"===e.key&&(i.close(),document.removeEventListener("keydown",m))};return document.addEventListener("keydown",m),n.appendChild(d),n.appendChild(s),t.appendChild(n),i}}r.colorGradients=[["rgba(255, 100, 100, 0.8)","rgba(255, 150, 100, 0.8)","rgba(255, 200, 100, 0.8)"],["rgba(100, 150, 255, 0.8)","rgba(100, 200, 255, 0.8)","rgba(100, 255, 220, 0.8)"],["rgba(150, 100, 255, 0.8)","rgba(200, 100, 255, 0.8)","rgba(255, 100, 200, 0.8)"],["rgba(100, 200, 100, 0.8)","rgba(150, 255, 100, 0.8)","rgba(200, 255, 150, 0.8)"],["rgba(255, 100, 100, 0.8)","rgba(100, 255, 100, 0.8)","rgba(100, 150, 255, 0.8)"],["rgba(255, 150, 50, 0.8)","rgba(255, 200, 80, 0.8)","rgba(255, 230, 120, 0.8)"],["rgba(100, 255, 255, 0.8)","rgba(255, 100, 255, 0.8)","rgba(255, 255, 100, 0.8)"]];class s{static create(e){const t=document.createElement("div");if(t.className="rfui-dropdown-wrapper",e.label){const n=document.createElement("label");n.className="rfui-dropdown-label",n.textContent=e.label,t.appendChild(n)}const n=document.createElement("select");return n.className=`rfui-dropdown rfui-gradient rfui-3d ${e.variant||"default"}`,e.className&&(n.className+=` ${e.className}`),e.options.forEach(e=>{const t=document.createElement("option");t.value=e.value,t.textContent=e.label,n.appendChild(t)}),e.value&&(n.value=e.value),e.onChange&&n.addEventListener("change",t=>{const n=t.target;e.onChange(n.value)}),e.disabled&&(n.disabled=!0),t.appendChild(n),t}}class l{static setTheme(e){l.currentTheme=e,"blocky"===e?document.documentElement.removeAttribute("data-rfui-theme"):document.documentElement.setAttribute("data-rfui-theme",e)}static getTheme(){return l.currentTheme}static showConfirmation(e,t,n,a){const o=l.createModal({title:e,content:t,buttons:[{text:"Cancel",variant:"secondary",onClick:a||(()=>{})},{text:"Confirm",variant:"danger",onClick:n}]});return o.show(),o}static showNotification(e,t,n){const a=l.createModal({title:e,content:t,onClose:n,buttons:[{text:"OK",onClick:n||(()=>{})}]});return a.show(),a}static showError(e,t,n){const a=l.createModal({title:e,content:t,buttons:[{text:"OK",variant:"danger",onClick:n||(()=>{})}],onClose:n});return a.show(),a}}l.currentTheme="blocky",l.createButton=t.create,l.createModal=n.create,l.createCard=a.create,l.createInfo=o.create,l.createTag=c.create,l.createPage=r.create,l.createDropdown=s.create,e.RawFunUI=l,e.RfuiButton=t,e.RfuiCard=a,e.RfuiDropdown=s,e.RfuiInfo=o,e.RfuiModal=n,e.RfuiPage=r,e.RfuiTag=c,e.default=l,Object.defineProperty(e,"__esModule",{value:!0})});
package/dist/raw-fun-ui.css ADDED
@@ -0,0 +1 @@
1
+ :root{--rfui-primary:#55dfff;--rfui-primary-dark:#047bff;--rfui-success:#1ce61c;--rfui-warning:#ffc201;--rfui-danger:#f44;--rfui-button-default:hsla(0,0%,39%,.9);--rfui-button-primary:rgba(4,123,255,.9);--rfui-button-secondary:rgba(85,223,255,.9);--rfui-button-danger:rgba(255,68,68,.9);--rfui-text-primary:#fff;--rfui-text-secondary:hsla(0,0%,100%,.8);--rfui-text-disabled:#666;--rfui-overlay-modal:rgba(0,0,0,.9);--rfui-overlay-info:rgba(0,0,0,.6);--rfui-bg-dark:rgba(0,0,0,.3);--rfui-info-yellow:rgba(255,194,1,.9);--rfui-info-green:rgba(28,230,28,.9);--rfui-info-blue:rgba(4,123,255,.9);--rfui-info-purple:rgba(150,50,255,.9);--rfui-info-red:rgba(255,68,68,.9);--rfui-shadow-base:0 4px 0 rgba(0,0,0,.3);--rfui-shadow-far:0 8px 16px rgba(0,0,0,.4);--rfui-shadow-hover:0 6px 0 rgba(0,0,0,.3),0 12px 24px rgba(0,0,0,.5);--rfui-shadow-active:0 2px 0 rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.4);--rfui-inset-highlight:inset 0 2px 0 hsla(0,0%,100%,.2);--rfui-inset-shadow:inset 0 -2px 0 rgba(0,0,0,.3);--rfui-inset-combined:inset 0 2px 0 hsla(0,0%,100%,.2),inset 0 -2px 0 rgba(0,0,0,.3);--rfui-button-min-width:120px;--rfui-button-min-height:40px;--rfui-card-min-width:300px;--rfui-card-min-height:180px;--rfui-modal-min-height:180px;--rfui-modal-max-width:min(500px,calc(100% - 100px));--rfui-info-min-width:300px;--rfui-tag-min-width:200px;--rfui-padding-xs:4px;--rfui-padding-sm:8px;--rfui-padding-md:12px;--rfui-padding-lg:16px;--rfui-padding-xl:20px;--rfui-margin-sm:8px;--rfui-margin-md:12px;--rfui-margin-lg:16px;--rfui-border-width:3px;--rfui-border-width-thin:2px;--rfui-border-width-thick:4px;--rfui-border-radius:6px;--rfui-border-radius-sm:4px;--rfui-border-radius-lg:8px;--rfui-font-xs:10px;--rfui-font-sm:12px;--rfui-font-md:14px;--rfui-font-lg:16px;--rfui-font-xl:18px;--rfui-font-2xl:20px;--rfui-font-weight-normal:400;--rfui-font-weight-medium:500;--rfui-font-weight-bold:700;--rfui-letter-spacing-tight:-0.02em;--rfui-letter-spacing-normal:0em;--rfui-letter-spacing-wide:0.05em;--rfui-line-height-tight:1.2;--rfui-line-height-normal:1.5;--rfui-line-height-loose:1.8;--rfui-transition-fast:0.15s;--rfui-transition-normal:0.3s;--rfui-transition-slow:0.5s;--rfui-animation-slide:0.3s;--rfui-animation-fade:0.2s;--rfui-animation-bounce:0.4s;--rfui-z-base:0;--rfui-z-content:10;--rfui-z-dropdown:100;--rfui-z-overlay-info:800;--rfui-z-overlay-modal:900;--rfui-blur-sm:blur(4px);--rfui-blur-md:blur(8px);--rfui-blur-lg:blur(12px);--rfui-text-shadow-sm:0 1px 2px rgba(0,0,0,.5);--rfui-text-shadow-md:0 2px 4px rgba(0,0,0,.5);--rfui-text-shadow-lg:0 2px 4px rgba(0,0,0,.5),0 0 12px hsla(0,0%,100%,.3);--rfui-opacity-disabled:0.5;--rfui-opacity-hover:0.9;--rfui-opacity-active:1;--rfui-page-border-color-1:hsla(0,100%,70%,.8);--rfui-page-border-color-2:rgba(255,150,100,.8);--rfui-page-border-color-3:rgba(255,200,100,.8)}.rfui-content{box-sizing:border-box;color:var(--rfui-text-primary);max-height:80vh;min-height:100px;overflow-y:auto;padding:0;position:relative;width:100%;z-index:var(--rfui-z-content)}.rfui-header,.rfui-header-bordered{padding:var(--rfui-padding-md) var(--rfui-padding-lg)}.rfui-header-bordered{border-bottom:var(--rfui-border-width-thin) solid hsla(0,0%,100%,.3);margin:0}.rfui-title,.rfui-title-enhanced{color:var(--rfui-text-primary);font-size:var(--rfui-font-xl);font-weight:var(--rfui-font-weight-bold);letter-spacing:var(--rfui-letter-spacing-wide);margin:0;text-transform:uppercase}.rfui-title-enhanced{text-align:center;text-shadow:var(--rfui-text-shadow-lg)}.rfui-modal-overlay{animation:modalFadeIn var(--rfui-transition-normal) ease-out forwards;background:var(--rfui-overlay-modal);cursor:pointer;height:100%;opacity:0;width:100%;z-index:var(--rfui-z-overlay-modal)}.rfui-info-overlay,.rfui-modal-overlay{align-items:center;backdrop-filter:var(--rfui-blur-md);display:flex;justify-content:center;left:0;position:fixed;top:0}.rfui-info-overlay{-webkit-backdrop-filter:var(--rfui-blur-md);background:var(--rfui-overlay-info);bottom:0;right:0;z-index:var(--rfui-z-overlay-info)}.rfui-3d{backdrop-filter:var(--rfui-blur-md);border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);transition:all var(--rfui-transition-normal) ease}.rfui-3d:hover{box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translateY(-2px)}.rfui-3d:active{box-shadow:var(--rfui-shadow-active),var(--rfui-inset-combined);transform:translateY(1px)}.rfui-gradient{overflow:hidden;position:relative}.rfui-gradient:before{background:radial-gradient(circle at center,hsla(0,0%,100%,.2) 0,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.rfui-close-btn{align-items:center;background:linear-gradient(180deg,rgba(255,68,68,.9),rgba(255,68,68,.7));border:var(--rfui-border-width-thin) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius-sm);box-shadow:var(--rfui-shadow-base),var(--rfui-inset-combined);color:var(--rfui-text-primary);cursor:pointer;display:flex;font-size:var(--rfui-font-lg);font-weight:var(--rfui-font-weight-bold);height:32px;justify-content:center;padding:0;position:absolute;right:var(--rfui-padding-sm);top:var(--rfui-padding-sm);transition:all var(--rfui-transition-fast) ease;width:32px;z-index:var(--rfui-z-dropdown)}.rfui-close-btn:before{content:"×";line-height:1}.rfui-close-btn:hover{box-shadow:0 4px 0 rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.5),var(--rfui-inset-combined);transform:translateY(-2px)}.rfui-close-btn:active{box-shadow:var(--rfui-shadow-active),var(--rfui-inset-combined);transform:translateY(0)}.rfui-btn-wrapper [disabled],.rfui-btn[disabled],.rfui-card [disabled],.rfui-disabled,.rfui-info [disabled],.rfui-modal-wrapper [disabled]{cursor:not-allowed;opacity:var(--rfui-opacity-disabled);pointer-events:none}@media (max-width:840px) and (min-width:769px){.rfui-title,.rfui-title-enhanced{font-size:calc(var(--rfui-font-xl)*.85)}.rfui-btn-wrapper{font-size:calc(var(--rfui-font-md)*.85);padding:calc(var(--rfui-padding-md)*.85)}}@media (max-width:768px){.rfui-modal-max-width{--rfui-modal-max-width:calc(100% - 60px)}.rfui-title,.rfui-title-enhanced{font-size:var(--rfui-font-lg)}.rfui-content{padding:var(--rfui-padding-md) var(--rfui-padding-sm)}.rfui-card-wrapper,.rfui-modal-wrapper{max-width:calc(100vw - 60px);min-width:280px}}@media (max-width:560px){.rfui-title,.rfui-title-enhanced{font-size:var(--rfui-font-md);letter-spacing:var(--rfui-letter-spacing-normal)}.rfui-content{padding:var(--rfui-padding-sm)}.rfui-card-wrapper,.rfui-info-wrapper,.rfui-modal-wrapper{border-width:var(--rfui-border-width-thin);max-width:calc(100vw - 32px);min-width:240px}.rfui-btn-wrapper{font-size:var(--rfui-font-sm);padding:var(--rfui-padding-sm) var(--rfui-padding-md)}.rfui-btn-wrapper,.rfui-close-btn{border-width:var(--rfui-border-width-thin)}.rfui-close-btn{font-size:var(--rfui-font-md);height:28px;width:28px}}@media (max-width:480px){.rfui-title,.rfui-title-enhanced{font-size:var(--rfui-font-sm)}.rfui-card-wrapper,.rfui-info-wrapper,.rfui-modal-wrapper{max-width:calc(100vw - 24px);min-width:220px}.rfui-btn-wrapper{font-size:var(--rfui-font-xs);padding:calc(var(--rfui-padding-sm)*.75) var(--rfui-padding-md)}.rfui-content{padding:calc(var(--rfui-padding-sm)*.75)}}@media screen and (max-width:480px) and (orientation:landscape){.rfui-card-wrapper,.rfui-info-wrapper,.rfui-modal-wrapper{max-width:calc(100vw - 20px);min-width:200px}.rfui-btn-wrapper,.rfui-title,.rfui-title-enhanced{font-size:calc(var(--rfui-font-xs)*.9)}.rfui-btn-wrapper{border-width:1px;padding:calc(var(--rfui-padding-xs)*.75) var(--rfui-padding-sm)}.rfui-content{padding:var(--rfui-padding-xs)}.rfui-close-btn{border-width:1px;font-size:var(--rfui-font-sm);height:24px;width:24px}}@media (max-height:520px){.rfui-info-wrapper,.rfui-modal-wrapper{max-height:90vh;overflow-y:auto}.rfui-title,.rfui-title-enhanced{font-size:var(--rfui-font-md)}}@media (max-height:380px){.rfui-info-wrapper,.rfui-modal-wrapper{max-height:85vh}.rfui-title,.rfui-title-enhanced{font-size:var(--rfui-font-sm)}.rfui-btn-wrapper{font-size:var(--rfui-font-xs);padding:var(--rfui-padding-xs) var(--rfui-padding-sm)}}@media (max-height:280px){.rfui-info-wrapper,.rfui-modal-wrapper{max-height:80vh}.rfui-content{padding:var(--rfui-padding-xs)}.rfui-btn-wrapper{font-size:calc(var(--rfui-font-xs)*.9);padding:calc(var(--rfui-padding-xs)*.5) var(--rfui-padding-sm)}}@media (max-width:600px) and (max-height:400px){.rfui-card-wrapper,.rfui-info-wrapper,.rfui-modal-wrapper{font-size:var(--rfui-font-sm)}.rfui-title,.rfui-title-enhanced{font-size:var(--rfui-font-md)}.rfui-content{padding:var(--rfui-padding-sm)}}@media (orientation:landscape){.rfui-modal-wrapper{max-height:95vh;overflow-y:auto}}@media (orientation:portrait){.rfui-modal-wrapper{max-height:90vh;overflow-y:auto}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.rfui-3d,.rfui-btn-wrapper,.rfui-card-wrapper,.rfui-modal-wrapper{box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined),0 0 1px hsla(0,0%,100%,.1)}}@media (prefers-reduced-motion:reduce){.rfui-btn-wrapper,.rfui-card-wrapper,.rfui-info-wrapper,.rfui-modal-wrapper,.rfui-tag-wrapper{animation:none;transition:none}.rfui-3d:active,.rfui-3d:hover{transform:none}}.rfui-content::-webkit-scrollbar,.rfui-modal-wrapper::-webkit-scrollbar{height:8px;width:8px}.rfui-content::-webkit-scrollbar-track,.rfui-modal-wrapper::-webkit-scrollbar-track{background:var(--rfui-bg-dark);border-radius:var(--rfui-border-radius-sm)}.rfui-content::-webkit-scrollbar-thumb,.rfui-modal-wrapper::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius-sm)}.rfui-content::-webkit-scrollbar-thumb:hover,.rfui-modal-wrapper::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.5)}@media (max-width:560px){.rfui-content::-webkit-scrollbar,.rfui-modal-wrapper::-webkit-scrollbar{height:6px;width:6px}}@keyframes modalSlideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-30px) scale(.95)}}@keyframes infoSlideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes buttonPress{0%{transform:translateY(0)}50%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes buttonPulse{0%,to{box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined)}50%{box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined),0 0 20px hsla(0,0%,100%,.3)}}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes cardSlideIn{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes tagBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes glowPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}@keyframes borderGlow{0%,to{border-color:hsla(0,0%,100%,.3)}50%{border-color:hsla(0,0%,100%,.6)}}@keyframes liftUp{0%{box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far);transform:translateY(0)}to{box-shadow:var(--rfui-shadow-hover);transform:translateY(-3px)}}@keyframes pressDown{0%{box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far);transform:translateY(0)}to{box-shadow:var(--rfui-shadow-active);transform:translateY(2px)}}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes radialPulse{0%,to{opacity:.4}50%{opacity:.6}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.rfui-btn-wrapper:hover{box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translateY(-3px)}.rfui-btn-wrapper:active{box-shadow:var(--rfui-shadow-active),var(--rfui-inset-combined);transform:translateY(1px)}.rfui-btn-wrapper:focus{outline:2px solid hsla(0,0%,100%,.5);outline-offset:2px}.rfui-modal-close:hover{box-shadow:0 4px 0 rgba(0,0,0,.4),0 8px 20px rgba(255,68,68,.5),var(--rfui-inset-combined);transform:scale(1.1)}.rfui-modal-close:active{box-shadow:var(--rfui-shadow-active),var(--rfui-inset-combined);transform:scale(1)}.rfui-hover-lift:hover{animation:liftUp var(--rfui-transition-normal) ease forwards}.rfui-hover-press:active{animation:pressDown var(--rfui-transition-fast) ease forwards}.rfui-hover-glow:hover{animation:glowPulse 1s ease-in-out infinite}.rfui-hover-border:hover{animation:borderGlow 1s ease-in-out infinite}.rfui-gradient:hover:before{animation:radialPulse 1.5s ease-in-out infinite}.rfui-btn-wrapper [disabled]:hover,.rfui-btn[disabled]:hover,.rfui-card[disabled]:hover,.rfui-disabled:hover,.rfui-info[disabled]:hover,.rfui-modal-wrapper [disabled]:hover{box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);cursor:not-allowed;transform:none}.rfui-btn-wrapper:focus-visible,.rfui-card-wrapper:focus-visible,.rfui-modal-close:focus-visible{outline:3px solid hsla(0,0%,100%,.7);outline-offset:3px}@media (hover:none) and (pointer:coarse){.rfui-btn-wrapper:hover,.rfui-card-wrapper:hover,.rfui-info-wrapper:hover,.rfui-tag-wrapper:hover{transform:none}.rfui-btn-wrapper:active{transform:translateY(2px)}.rfui-card-wrapper:active{transform:scale(.98)}}.rfui-btn-wrapper{display:inline-block;margin:var(--rfui-margin-sm);position:relative}.rfui-btn{backdrop-filter:var(--rfui-blur-md);border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);color:var(--rfui-text-primary);cursor:pointer;font-size:var(--rfui-font-md);font-weight:var(--rfui-font-weight-bold);letter-spacing:var(--rfui-letter-spacing-wide);min-height:var(--rfui-button-min-height);min-width:var(--rfui-button-min-width);outline:none;overflow:hidden;padding:var(--rfui-padding-md) var(--rfui-padding-xl);position:relative;text-shadow:var(--rfui-text-shadow-md);text-transform:uppercase;transition:all var(--rfui-transition-normal) ease}.rfui-btn.default{background:linear-gradient(180deg,hsla(0,0%,39%,.95),hsla(0,0%,39%,.7) 50%,hsla(0,0%,39%,.5))}.rfui-btn.default:before{background:radial-gradient(circle at center,hsla(0,0%,39%,.4) 0,transparent 70%)}.rfui-btn.primary{background:linear-gradient(180deg,rgba(4,123,255,.95),rgba(4,123,255,.7) 50%,rgba(4,123,255,.5));border-color:rgba(4,123,255,.5)}.rfui-btn.primary:before{background:radial-gradient(circle at center,rgba(4,123,255,.4) 0,transparent 70%)}.rfui-btn.secondary{background:linear-gradient(180deg,rgba(85,223,255,.95),rgba(85,223,255,.7) 50%,rgba(85,223,255,.5));border-color:rgba(85,223,255,.5)}.rfui-btn.secondary:before{background:radial-gradient(circle at center,rgba(85,223,255,.4) 0,transparent 70%)}.rfui-btn.danger{background:linear-gradient(180deg,rgba(255,68,68,.95),rgba(255,68,68,.7) 50%,rgba(255,68,68,.5));border-color:rgba(255,68,68,.5)}.rfui-btn.danger:before{background:radial-gradient(circle at center,rgba(255,68,68,.4) 0,transparent 70%)}.rfui-btn-wrapper:hover .rfui-btn{border-color:hsla(0,0%,100%,.5);box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translateY(-3px)}.rfui-btn-wrapper:active .rfui-btn{box-shadow:var(--rfui-shadow-active),var(--rfui-inset-combined);transform:translateY(1px)}.rfui-btn-wrapper .rfui-btn:disabled,.rfui-btn:disabled{cursor:not-allowed;opacity:var(--rfui-opacity-disabled);pointer-events:none;transform:none}.rfui-btn-wrapper:has(.rfui-btn:disabled):hover{transform:none}.rfui-btn:focus-visible{outline:3px solid hsla(0,0%,100%,.7);outline-offset:3px}.rfui-modal-wrapper{animation:modalSlideIn var(--rfui-animation-slide) ease-out;backdrop-filter:var(--rfui-blur-lg);background:linear-gradient(180deg,rgba(60,60,80,.95),rgba(40,40,60,.9) 50%,rgba(30,30,50,.85));border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);box-sizing:border-box;cursor:default;max-height:80vh;max-width:var(--rfui-modal-max-width);min-height:var(--rfui-modal-min-height);overflow:hidden;position:relative;width:90%}.rfui-modal-wrapper:before{background:radial-gradient(circle at center,hsla(0,0%,100%,.1) 0,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.rfui-modal-body{color:var(--rfui-text-primary);font-size:var(--rfui-font-md);line-height:var(--rfui-line-height-normal);padding:var(--rfui-padding-lg) var(--rfui-padding-xl);position:relative;z-index:2}.rfui-modal-body p{margin:var(--rfui-margin-sm) 0}.rfui-modal-body h1,.rfui-modal-body h2,.rfui-modal-body h3,.rfui-modal-body h4,.rfui-modal-body h5,.rfui-modal-body h6{color:var(--rfui-text-primary);font-weight:var(--rfui-font-weight-bold);margin:var(--rfui-margin-md) 0 var(--rfui-margin-sm) 0}.rfui-modal-footer{align-items:center;border-top:var(--rfui-border-width-thin) solid hsla(0,0%,100%,.2);display:flex;gap:var(--rfui-margin-md);justify-content:center;margin-top:var(--rfui-margin-md);padding:var(--rfui-padding-md) var(--rfui-padding-lg) var(--rfui-padding-lg);position:relative;z-index:2}.rfui-modal-footer .rfui-btn-wrapper{margin:0;padding:0}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.rfui-card-wrapper{backdrop-filter:var(--rfui-blur-md);background:linear-gradient(180deg,rgba(60,60,80,.9),rgba(40,40,60,.85) 50%,rgba(30,30,50,.8));border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);display:inline-block;min-height:var(--rfui-card-min-height);min-width:var(--rfui-card-min-width);overflow:hidden;padding:var(--rfui-padding-lg);position:relative;transition:all var(--rfui-transition-normal) ease}.rfui-card-wrapper:before{background:radial-gradient(circle at center,hsla(0,0%,100%,.15) 0,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.rfui-card-wrapper.default{background:linear-gradient(180deg,hsla(0,0%,39%,.9),hsla(0,0%,39%,.7) 50%,hsla(0,0%,39%,.6))}.rfui-card-wrapper.primary{background:linear-gradient(180deg,rgba(4,123,255,.9),rgba(4,123,255,.7) 50%,rgba(4,123,255,.6))}.rfui-card-wrapper.secondary{background:linear-gradient(180deg,rgba(85,223,255,.9),rgba(85,223,255,.7) 50%,rgba(85,223,255,.6))}.rfui-card-wrapper.danger{background:linear-gradient(180deg,rgba(255,68,68,.9),rgba(255,68,68,.7) 50%,rgba(255,68,68,.6))}.rfui-card{height:100%;position:relative;width:100%;z-index:2}.rfui-card,.rfui-card-title{color:var(--rfui-text-primary)}.rfui-card-title{border-bottom:var(--rfui-border-width-thin) solid hsla(0,0%,100%,.2);font-size:var(--rfui-font-lg);font-weight:var(--rfui-font-weight-bold);letter-spacing:var(--rfui-letter-spacing-wide);margin:0 0 var(--rfui-margin-md) 0;padding-bottom:var(--rfui-padding-sm);text-shadow:var(--rfui-text-shadow-md);text-transform:uppercase}.rfui-card-content{font-size:var(--rfui-font-md);line-height:var(--rfui-line-height-normal)}.rfui-card-content p{margin:var(--rfui-margin-sm) 0}.rfui-card-content ol,.rfui-card-content ul{margin:var(--rfui-margin-sm) 0;padding-left:var(--rfui-padding-xl)}.rfui-card-wrapper:hover{border-color:hsla(0,0%,100%,.4);box-shadow:0 8px 0 rgba(0,0,0,.3),0 16px 32px rgba(0,0,0,.5),var(--rfui-inset-combined);transform:translateY(-5px)}.rfui-card-wrapper:active{box-shadow:0 5px 0 rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.4),var(--rfui-inset-combined);transform:translateY(-2px)}.rfui-info-wrapper{animation:infoFadeIn var(--rfui-animation-slide) ease-out;backdrop-filter:var(--rfui-blur-lg);background:linear-gradient(180deg,rgba(60,60,80,.95),rgba(40,40,60,.9) 50%,rgba(30,30,50,.85));border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);max-width:min(500px,calc(100% - 80px));min-width:var(--rfui-info-min-width);overflow:hidden;padding:var(--rfui-padding-xl);position:relative}.rfui-info-wrapper:before{background:radial-gradient(circle at center,hsla(0,0%,100%,.15) 0,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.rfui-info-title{font-size:var(--rfui-font-2xl);margin:0 0 var(--rfui-margin-md) 0;position:relative;text-shadow:var(--rfui-text-shadow-lg);z-index:2}.rfui-info-body{color:var(--rfui-text-primary);font-size:var(--rfui-font-md);line-height:var(--rfui-line-height-normal);position:relative;z-index:2}.rfui-info-body p{margin:var(--rfui-margin-sm) 0}.rfui-info-wrapper.theme-yellow{border-color:rgba(255,194,1,.5)}.rfui-info-wrapper.theme-yellow .rfui-info-title{color:#ffc201;text-shadow:0 0 12px rgba(255,194,1,.6),0 2px 4px rgba(0,0,0,.5)}.rfui-info-wrapper.theme-yellow:before{background:radial-gradient(circle at center,rgba(255,194,1,.2) 0,transparent 70%)}.rfui-info-wrapper.theme-green{border-color:rgba(28,230,28,.5)}.rfui-info-wrapper.theme-green .rfui-info-title{color:#1ce61c;text-shadow:0 0 12px rgba(28,230,28,.6),0 2px 4px rgba(0,0,0,.5)}.rfui-info-wrapper.theme-green:before{background:radial-gradient(circle at center,rgba(28,230,28,.2) 0,transparent 70%)}.rfui-info-wrapper.theme-blue{border-color:rgba(4,123,255,.5)}.rfui-info-wrapper.theme-blue .rfui-info-title{color:#047bff;text-shadow:0 0 12px rgba(4,123,255,.6),0 2px 4px rgba(0,0,0,.5)}.rfui-info-wrapper.theme-blue:before{background:radial-gradient(circle at center,rgba(4,123,255,.2) 0,transparent 70%)}.rfui-info-wrapper.theme-purple{border-color:rgba(150,50,255,.5)}.rfui-info-wrapper.theme-purple .rfui-info-title{color:#9632ff;text-shadow:0 0 12px rgba(150,50,255,.6),0 2px 4px rgba(0,0,0,.5)}.rfui-info-wrapper.theme-purple:before{background:radial-gradient(circle at center,rgba(150,50,255,.2) 0,transparent 70%)}.rfui-info-wrapper.theme-red{border-color:rgba(255,68,68,.5)}.rfui-info-wrapper.theme-red .rfui-info-title{color:#f44;text-shadow:0 0 12px rgba(255,68,68,.6),0 2px 4px rgba(0,0,0,.5)}.rfui-info-wrapper.theme-red:before{background:radial-gradient(circle at center,rgba(255,68,68,.2) 0,transparent 70%)}.rfui-info-wrapper:hover{box-shadow:0 6px 0 rgba(0,0,0,.3),0 12px 28px rgba(0,0,0,.5),var(--rfui-inset-combined);transform:scale(1.02)}@keyframes infoFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.rfui-tag-wrapper{backdrop-filter:var(--rfui-blur-md);background:linear-gradient(180deg,rgba(60,60,80,.95),rgba(40,40,60,.85) 50%,rgba(30,30,50,.8));border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);cursor:pointer;left:50%;min-width:var(--rfui-tag-min-width);overflow:hidden;padding:var(--rfui-padding-sm) var(--rfui-padding-lg);position:absolute;top:20px;transform:translateX(-50%);transition:all var(--rfui-transition-normal) ease;z-index:var(--rfui-z-dropdown)}.rfui-tag-wrapper:before{background:radial-gradient(circle at center,hsla(0,0%,100%,.15) 0,transparent 70%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.rfui-tag-wrapper.default{background:linear-gradient(180deg,hsla(0,0%,39%,.95),hsla(0,0%,39%,.7) 50%,hsla(0,0%,39%,.5))}.rfui-tag-wrapper.primary{background:linear-gradient(180deg,rgba(4,123,255,.95),rgba(4,123,255,.7) 50%,rgba(4,123,255,.5))}.rfui-tag-wrapper.secondary{background:linear-gradient(180deg,rgba(85,223,255,.95),rgba(85,223,255,.7) 50%,rgba(85,223,255,.5))}.rfui-tag-wrapper.danger{background:linear-gradient(180deg,rgba(255,68,68,.95),rgba(255,68,68,.7) 50%,rgba(255,68,68,.5))}.rfui-tag-content{color:var(--rfui-text-primary);position:relative;z-index:2}.rfui-tag-header{border-bottom:var(--rfui-border-width-thin) solid hsla(0,0%,100%,.2);margin-bottom:var(--rfui-margin-sm);padding-bottom:var(--rfui-padding-xs)}.rfui-tag-title{font-size:var(--rfui-font-md);font-weight:var(--rfui-font-weight-bold);letter-spacing:var(--rfui-letter-spacing-wide);margin:0;text-shadow:var(--rfui-text-shadow-sm);text-transform:uppercase}.rfui-tag-body{font-size:var(--rfui-font-sm);line-height:var(--rfui-line-height-normal)}.rfui-tag-body p{margin:var(--rfui-margin-sm) 0}.rfui-tag-wrapper:hover{border-color:hsla(0,0%,100%,.4);box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translateX(-50%) translateY(-3px)}.rfui-tag-wrapper.flipped:hover{transform:translateX(-50%) translateY(3px)}.rfui-tag-wrapper:active{box-shadow:var(--rfui-shadow-active),var(--rfui-inset-combined);transform:translateX(-50%) translateY(1px)}.rfui-tag-wrapper.flipped:active{transform:translateX(-50%) translateY(-1px)}@keyframes tagSlideIn{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@property --rfui-page-border-color-1{syntax:"<color>";inherits:true;initial-value:hsla(0,100%,70%,.8)}@property --rfui-page-border-color-2{syntax:"<color>";inherits:true;initial-value:rgba(255,150,100,.8)}@property --rfui-page-border-color-3{syntax:"<color>";inherits:true;initial-value:rgba(255,200,100,.8)}.rfui-page-overlay{animation:pageFadeIn var(--rfui-transition-normal) ease-out forwards;background:var(--rfui-overlay-modal);cursor:pointer;height:100%;left:0;opacity:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--rfui-z-overlay-modal)}.rfui-page-content{animation:pageSlideIn var(--rfui-animation-slide) ease-out,pageBorderRise 10s linear infinite;backdrop-filter:var(--rfui-blur-lg);background:linear-gradient(to top,var(--rfui-page-border-color-1,hsla(0,100%,70%,.8)) 0,var(--rfui-page-border-color-2,rgba(255,150,100,.8)) 50%,var(--rfui-page-border-color-3,rgba(255,200,100,.8)) 100%);background-attachment:fixed;background-position:0 100%;background-size:100% 200%;border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);box-sizing:border-box;cursor:default;height:calc(100% - 40px);margin:20px;overflow:hidden;padding:4px;position:relative;transition:--rfui-page-border-color-1 2s ease-in-out,--rfui-page-border-color-2 2s ease-in-out,--rfui-page-border-color-3 2s ease-in-out;width:calc(100% - 40px)}.rfui-page-content:after{background:linear-gradient(180deg,rgba(60,60,80,.95),rgba(40,40,60,.9) 50%,rgba(30,30,50,.85));z-index:0}.rfui-page-content:after,.rfui-page-content:before{border-radius:calc(var(--rfui-border-radius-lg) - 2px);bottom:4px;content:"";left:4px;pointer-events:none;position:absolute;right:4px;top:4px}.rfui-page-content:before{background:radial-gradient(circle at center,hsla(0,0%,100%,.1) 0,transparent 70%);z-index:1}.rfui-page-wrapper{border-radius:calc(var(--rfui-border-radius-lg) - 2px);bottom:4px;box-sizing:border-box;color:var(--rfui-text-primary);font-size:var(--rfui-font-md);left:4px;line-height:var(--rfui-line-height-normal);overflow-x:hidden;overflow-y:auto;padding:var(--rfui-padding-xl);position:absolute;right:4px;top:4px;z-index:2}.rfui-page-wrapper p{margin:var(--rfui-margin-sm) 0}.rfui-page-wrapper h1,.rfui-page-wrapper h2,.rfui-page-wrapper h3,.rfui-page-wrapper h4,.rfui-page-wrapper h5,.rfui-page-wrapper h6{color:var(--rfui-text-primary);font-weight:var(--rfui-font-weight-bold);margin:var(--rfui-margin-md) 0 var(--rfui-margin-sm) 0}.rfui-page-wrapper.custom-scrollbar::-webkit-scrollbar{width:10px}.rfui-page-wrapper.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:5px;margin-bottom:20px;margin-top:40px;transition:background .3s ease-out}.rfui-page-wrapper.custom-scrollbar::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,0);border-radius:5px;transition:background .3s ease-out}.rfui-page-wrapper.custom-scrollbar.scrolling::-webkit-scrollbar-track,.rfui-page-wrapper.custom-scrollbar:hover::-webkit-scrollbar-track{background:rgba(0,0,0,.2);transition:background .15s ease-in}.rfui-page-wrapper.custom-scrollbar.scrolling::-webkit-scrollbar-thumb,.rfui-page-wrapper.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3);transition:background .15s ease-in}.rfui-page-wrapper.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.5)!important}.rfui-page-content .rfui-close-btn{z-index:10}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pageSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pageFadeOut{0%{opacity:1}to{opacity:0}}@keyframes pageSlideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes pageBorderRise{0%{background-position:0 100%}to{background-position:0 0}}@media (max-width:768px){.rfui-page-content{height:calc(100% - 30px);margin:15px;width:calc(100% - 30px)}.rfui-page-wrapper{padding:var(--rfui-padding-lg)}}@media (max-width:480px){.rfui-page-content{height:calc(100% - 20px);margin:10px;width:calc(100% - 20px)}.rfui-page-wrapper{padding:var(--rfui-padding-md)}}.rfui-dropdown-wrapper{display:inline-flex;flex-direction:column;gap:8px;position:relative}.rfui-dropdown-label{color:var(--rfui-text-primary);font-size:14px;font-weight:700;opacity:.9}.rfui-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none;backdrop-filter:blur(8px);background-position:calc(100% - 15px),calc(100% - 10px),0 0;background-repeat:no-repeat,no-repeat,no-repeat;background-size:5px 5px,5px 5px,100% 100%;border:var(--rfui-border-width) solid hsla(0,0%,100%,.3);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base),var(--rfui-shadow-far),var(--rfui-inset-combined);cursor:pointer;font-size:14px;font-weight:700;outline:none;padding:10px 35px 10px 15px;position:relative;transition:transform .2s ease,box-shadow .2s ease}.rfui-dropdown.default{background-color:var(--rfui-button-default);background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,hsla(0,0%,39%,.95),hsla(0,0%,39%,.7) 50%,hsla(0,0%,39%,.5));color:var(--rfui-text-primary)}.rfui-dropdown.primary{background-color:var(--rfui-button-primary);background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,rgba(4,123,255,.95),rgba(4,123,255,.7) 50%,rgba(4,123,255,.5));color:var(--rfui-text-primary)}.rfui-dropdown.secondary{background-color:var(--rfui-button-secondary);background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,rgba(85,223,255,.95),rgba(85,223,255,.7) 50%,rgba(85,223,255,.5));color:#000}.rfui-dropdown.danger{background-color:var(--rfui-button-danger);background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,rgba(255,68,68,.95),rgba(255,68,68,.7) 50%,rgba(255,68,68,.5));color:var(--rfui-text-primary)}.rfui-dropdown:hover:not(:disabled){box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translateY(-2px)}.rfui-dropdown:focus{outline:2px solid hsla(0,0%,100%,.5);outline-offset:2px}.rfui-dropdown-wrapper .rfui-disabled,.rfui-dropdown:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.rfui-dropdown option{background:rgba(26,26,46,.95);color:#fff;padding:8px}[data-rfui-theme=fall-guys]{--rfui-primary:#00d4ff;--rfui-primary-dark:#09c;--rfui-success:#4cd964;--rfui-warning:#ffd93d;--rfui-danger:#ff6b6b;--rfui-button-default:#64d4ff;--rfui-button-primary:#ff5096;--rfui-button-secondary:#9b59b6;--rfui-button-danger:#ff6b6b;--rfui-text-primary:#1a1a2e;--rfui-text-secondary:rgba(26,26,46,.8);--rfui-text-disabled:#a0a0a0;--rfui-text-light:#fff;--rfui-overlay-modal:rgba(184,232,255,.95);--rfui-overlay-info:rgba(100,212,255,.8);--rfui-bg-light:#64d4ff;--rfui-bg-card:#64d4ff;--rfui-container-bg:#64d4ff;--rfui-container-bg-light:#7ee0ff;--rfui-container-bg-dark:#4ac8f5;--rfui-shadow-base:4px 4px 0 #000;--rfui-shadow-far:6px 6px 0 #000;--rfui-shadow-hover:8px 8px 0 #000;--rfui-shadow-active:2px 2px 0 #000;--rfui-inset-highlight:inset 0 2px 0 hsla(0,0%,100%,.4);--rfui-inset-shadow:inset 0 -2px 0 rgba(0,0,0,.1);--rfui-inset-combined:inset 0 2px 0 hsla(0,0%,100%,.4),inset 0 -2px 0 rgba(0,0,0,.1);--rfui-border-width:4px;--rfui-border-width-thin:3px;--rfui-border-width-thick:5px;--rfui-border-radius:16px;--rfui-border-radius-sm:12px;--rfui-border-radius-lg:20px;--rfui-border-color:#fff;--rfui-border-color-hover:#fff;--rfui-font-weight-normal:500;--rfui-font-weight-medium:600;--rfui-font-weight-bold:800;--rfui-text-shadow-sm:1px 1px 0 rgba(0,0,0,.2);--rfui-text-shadow-md:2px 2px 0 rgba(0,0,0,.2);--rfui-text-shadow-lg:2px 2px 0 rgba(0,0,0,.3);--rfui-text-shadow-light:2px 2px 0 rgba(0,0,0,.3);--rfui-page-border-color-1:rgba(255,100,150,.9);--rfui-page-border-color-2:rgba(130,80,255,.9);--rfui-page-border-color-3:rgba(0,200,255,.9);--rfui-header-bg:linear-gradient(180deg,#b370d4,#9b59b6);--rfui-header-text:#fff;--rfui-header-yellow:linear-gradient(180deg,#ffd93d,#f5a623);--rfui-header-yellow-text:#1a1a2e;--rfui-header-green:linear-gradient(180deg,#5ce65c,#4cd964);--rfui-header-green-text:#1a1a2e;--rfui-header-blue:linear-gradient(180deg,#5cb8ff,#0984e3);--rfui-header-purple:linear-gradient(180deg,#b370d4,#9b59b6);--rfui-header-red:linear-gradient(180deg,#ff8585,#ff6b6b);--game-text-primary:#1a1a2e;--game-text-secondary:rgba(26,26,46,.85);--game-text-muted:rgba(26,26,46,.6);--game-text-highlight:#1a5f2a;--game-bg-card:hsla(0,0%,100%,.1);--game-bg-card-hover:hsla(0,0%,100%,.2);--game-bg-highlight:rgba(0,0,0,.1);--game-border-primary:rgba(0,0,0,.1);--game-border-hover:rgba(99,102,241,.4);--game-btn-primary-bg:linear-gradient(135deg,#ffeb3b,#ffc107);--game-btn-primary-text:#1a1a2e}[data-rfui-theme=fall-guys] .rfui-btn-wrapper,[data-rfui-theme=fall-guys] .rfui-btn-wrapper:active,[data-rfui-theme=fall-guys] .rfui-btn-wrapper:hover{box-shadow:none;transform:none}[data-rfui-theme=fall-guys] .rfui-btn{border:2px solid hsla(0,0%,100%,.5);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base);font-weight:var(--rfui-font-weight-bold)}[data-rfui-theme=fall-guys] .rfui-btn.default{background:linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5);color:var(--rfui-text-primary);text-shadow:none}[data-rfui-theme=fall-guys] .rfui-btn.default:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.5) 0,transparent 60%)}[data-rfui-theme=fall-guys] .rfui-btn.primary{background:linear-gradient(180deg,#ff6eb0,#ff5096 50%,#e6407d);color:#fff;text-shadow:none}[data-rfui-theme=fall-guys] .rfui-btn.primary:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 60%)}[data-rfui-theme=fall-guys] .rfui-btn.secondary{background:linear-gradient(180deg,#b370d4,#9b59b6 50%,#8447a0);color:#fff;text-shadow:none}[data-rfui-theme=fall-guys] .rfui-btn.secondary:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 60%)}[data-rfui-theme=fall-guys] .rfui-btn.danger{background:linear-gradient(180deg,#ff8585,#ff6b6b 50%,#e65555);color:#fff;text-shadow:none}[data-rfui-theme=fall-guys] .rfui-btn.danger:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 60%)}[data-rfui-theme=fall-guys] .rfui-btn-wrapper:hover .rfui-btn{box-shadow:var(--rfui-shadow-hover);transform:translate(-2px,-2px)}[data-rfui-theme=fall-guys] .rfui-btn-wrapper:active .rfui-btn{box-shadow:var(--rfui-shadow-active);transform:translate(2px,2px)}[data-rfui-theme=fall-guys] .rfui-modal-wrapper{background:linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5);border:var(--rfui-border-width) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-far),var(--rfui-inset-combined);overflow:hidden}[data-rfui-theme=fall-guys] .rfui-modal-wrapper:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 50%)}[data-rfui-theme=fall-guys] .rfui-modal-wrapper .rfui-content{padding:0}[data-rfui-theme=fall-guys] .rfui-modal-wrapper .rfui-header-bordered{background:var(--rfui-header-bg);border-bottom:none;border-radius:calc(var(--rfui-border-radius-lg) - var(--rfui-border-width)) calc(var(--rfui-border-radius-lg) - var(--rfui-border-width)) 0 0;margin:0;padding:var(--rfui-padding-md) var(--rfui-padding-lg);padding-bottom:var(--rfui-margin-md)}[data-rfui-theme=fall-guys] .rfui-modal-wrapper .rfui-title-enhanced{color:var(--rfui-text-light);margin:0;text-shadow:none}[data-rfui-theme=fall-guys] .rfui-modal-body{color:var(--rfui-text-primary);padding:var(--rfui-padding-md) var(--rfui-padding-lg)}[data-rfui-theme=fall-guys] .rfui-modal-body p{color:var(--rfui-text-primary)}[data-rfui-theme=fall-guys] .rfui-modal-body h1,[data-rfui-theme=fall-guys] .rfui-modal-body h2,[data-rfui-theme=fall-guys] .rfui-modal-body h3,[data-rfui-theme=fall-guys] .rfui-modal-body h4,[data-rfui-theme=fall-guys] .rfui-modal-body h5,[data-rfui-theme=fall-guys] .rfui-modal-body h6{color:var(--rfui-text-primary);text-shadow:none}[data-rfui-theme=fall-guys] .rfui-modal-footer{border-top-color:hsla(0,0%,100%,.5)}[data-rfui-theme=fall-guys] .rfui-modal-footer .rfui-btn.default{background:linear-gradient(180deg,#ff6eb0,#ff5096 50%,#e6407d);color:#fff}[data-rfui-theme=fall-guys] .rfui-card-wrapper{background:linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5);border:var(--rfui-border-width) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base),var(--rfui-inset-combined)}[data-rfui-theme=fall-guys] .rfui-card-wrapper:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 50%)}[data-rfui-theme=fall-guys] .rfui-card{color:var(--rfui-text-primary)}[data-rfui-theme=fall-guys] .rfui-card-title{background:var(--rfui-header-bg);border-bottom:none;border-radius:calc(var(--rfui-border-radius) - var(--rfui-border-width)) calc(var(--rfui-border-radius) - var(--rfui-border-width)) 0 0;color:var(--rfui-text-light);margin:calc(var(--rfui-padding-lg)*-1);margin-bottom:var(--rfui-padding-md);padding:var(--rfui-padding-md) var(--rfui-padding-lg);text-shadow:none}[data-rfui-theme=fall-guys] .rfui-card-wrapper.primary .rfui-card-title{background:linear-gradient(180deg,#ff6eb0,#ff5096)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.secondary .rfui-card-title{background:linear-gradient(180deg,#b370d4,#9b59b6)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.danger .rfui-card-title{background:linear-gradient(180deg,#ff8585,#ff6b6b)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.header-yellow .rfui-card-title{background:var(--rfui-header-yellow)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.header-green .rfui-card-title{background:var(--rfui-header-green)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.header-blue .rfui-card-title{background:var(--rfui-header-blue)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.header-purple .rfui-card-title{background:var(--rfui-header-purple)}[data-rfui-theme=fall-guys] .rfui-card-wrapper.header-red .rfui-card-title{background:var(--rfui-header-red)}[data-rfui-theme=fall-guys] .rfui-card-wrapper:hover{box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translate(-3px,-3px)}[data-rfui-theme=fall-guys] .rfui-info-wrapper{background:linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5);border:var(--rfui-border-width) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-base),var(--rfui-inset-combined)}[data-rfui-theme=fall-guys] .rfui-info-wrapper:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 50%)}[data-rfui-theme=fall-guys] .rfui-info-wrapper .rfui-header-bordered{margin-bottom:var(--rfui-margin-md);padding-top:0}[data-rfui-theme=fall-guys] .rfui-info-body{color:var(--rfui-text-primary)}[data-rfui-theme=fall-guys] .rfui-info-title{margin:0}[data-rfui-theme=fall-guys] .rfui-info-wrapper.theme-yellow .rfui-info-title{color:#f5a623;text-shadow:var(--rfui-text-shadow-md)}[data-rfui-theme=fall-guys] .rfui-info-wrapper.theme-green .rfui-info-title{color:#4cd964;text-shadow:var(--rfui-text-shadow-md)}[data-rfui-theme=fall-guys] .rfui-info-wrapper.theme-blue .rfui-info-title{color:#0984e3;text-shadow:var(--rfui-text-shadow-md)}[data-rfui-theme=fall-guys] .rfui-info-wrapper.theme-purple .rfui-info-title{color:#9b59b6;text-shadow:var(--rfui-text-shadow-md)}[data-rfui-theme=fall-guys] .rfui-info-wrapper.theme-red .rfui-info-title{color:#ff6b6b;text-shadow:var(--rfui-text-shadow-md)}[data-rfui-theme=fall-guys] .rfui-info-wrapper:hover{box-shadow:var(--rfui-shadow-hover),var(--rfui-inset-combined);transform:translate(-2px,-2px) scale(1.01)}[data-rfui-theme=fall-guys] .rfui-page-overlay{background:var(--rfui-overlay-modal)}[data-rfui-theme=fall-guys] .rfui-page-content{border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-far)}[data-rfui-theme=fall-guys] .rfui-page-content:after{background:linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5)}[data-rfui-theme=fall-guys] .rfui-page-content:before{background:radial-gradient(circle at center top,hsla(0,0%,100%,.4) 0,transparent 40%)}[data-rfui-theme=fall-guys] .rfui-page-wrapper{color:var(--rfui-text-primary)}[data-rfui-theme=fall-guys] .rfui-page-wrapper h1,[data-rfui-theme=fall-guys] .rfui-page-wrapper h2,[data-rfui-theme=fall-guys] .rfui-page-wrapper h3,[data-rfui-theme=fall-guys] .rfui-page-wrapper h4,[data-rfui-theme=fall-guys] .rfui-page-wrapper h5,[data-rfui-theme=fall-guys] .rfui-page-wrapper h6{color:var(--rfui-text-primary);text-shadow:var(--rfui-text-shadow-sm)}[data-rfui-theme=fall-guys] .rfui-tag-wrapper{background:linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5);border:var(--rfui-border-width-thin) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius-sm);box-shadow:var(--rfui-shadow-base),var(--rfui-inset-combined)}[data-rfui-theme=fall-guys] .rfui-tag{color:var(--rfui-text-primary)}[data-rfui-theme=fall-guys] .rfui-close-btn{background:linear-gradient(180deg,#ff8585,#ff6b6b);border:3px solid var(--rfui-border-color);box-shadow:2px 2px 0 rgba(0,0,0,.3);color:var(--rfui-text-light)}[data-rfui-theme=fall-guys] .rfui-close-btn:hover{background:linear-gradient(180deg,#f99,#ff8080);box-shadow:3px 3px 0 rgba(0,0,0,.3);transform:translate(-1px,-1px)}[data-rfui-theme=fall-guys] .rfui-dropdown{border-radius:var(--rfui-border-radius);border-width:var(--rfui-border-width);box-shadow:var(--rfui-shadow-base)}[data-rfui-theme=fall-guys] .rfui-dropdown:hover:not(:disabled){box-shadow:var(--rfui-shadow-far)}[data-rfui-theme=fall-guys] .rfui-dropdown.default{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#7ee0ff,#64d4ff 50%,#4ac8f5);color:var(--rfui-text-primary)}[data-rfui-theme=fall-guys] .rfui-dropdown.primary{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#ff6eb0,#ff5096 50%,#e6407d);color:#fff}[data-rfui-theme=fall-guys] .rfui-dropdown.secondary{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#b370d4,#9b59b6 50%,#8e44ad);color:#fff}[data-rfui-theme=fall-guys] .rfui-dropdown.danger{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#ff8585,#ff6b6b 50%,#e63946);color:#fff}[data-rfui-theme=animal-crossing]{--rfui-primary:#34a09c;--rfui-primary-dark:#2a8480;--rfui-success:#34a09c;--rfui-warning:#d69632;--rfui-danger:#c45c5c;--rfui-button-default:#937c60;--rfui-button-primary:#34a09c;--rfui-button-secondary:#d69632;--rfui-button-danger:#c45c5c;--rfui-text-primary:#1f526e;--rfui-text-secondary:rgba(31,82,110,.7);--rfui-text-disabled:rgba(31,82,110,.35);--rfui-text-light:#fffbed;--rfui-overlay-modal:rgba(31,82,110,.3);--rfui-overlay-info:hsla(40,34%,86%,.9);--rfui-bg-light:#fffbed;--rfui-bg-card:#fffbed;--rfui-container-bg:#fffbed;--rfui-container-bg-light:#fffdf5;--rfui-container-bg-dark:#f5eed8;--rfui-shadow-base:0 2px 8px rgba(31,82,110,.1);--rfui-shadow-far:0 4px 16px rgba(31,82,110,.12);--rfui-shadow-hover:0 6px 20px rgba(31,82,110,.15);--rfui-shadow-active:0 1px 4px rgba(31,82,110,.08);--rfui-inset-highlight:none;--rfui-inset-shadow:none;--rfui-inset-combined:none;--rfui-border-width:2px;--rfui-border-width-thin:1.5px;--rfui-border-width-thick:3px;--rfui-border-radius:30px;--rfui-border-radius-sm:24px;--rfui-border-radius-lg:32px;--rfui-border-color:rgba(31,82,110,.08);--rfui-border-color-hover:rgba(31,82,110,.12);--rfui-font-weight-normal:500;--rfui-font-weight-medium:600;--rfui-font-weight-bold:700;--rfui-text-shadow-sm:none;--rfui-text-shadow-md:none;--rfui-text-shadow-lg:none;--rfui-text-shadow-light:none;--rfui-page-border-color-1:rgba(52,160,156,.7);--rfui-page-border-color-2:rgba(214,150,50,.7);--rfui-page-border-color-3:rgba(147,124,96,.7);--rfui-header-bg:linear-gradient(180deg,#3db0a8,#34a09c);--rfui-header-text:#fffbed;--rfui-header-yellow:linear-gradient(180deg,#e0a840,#d69632);--rfui-header-yellow-text:#1f526e;--rfui-header-green:linear-gradient(180deg,#3db0a8,#34a09c);--rfui-header-green-text:#fffbed;--rfui-header-blue:linear-gradient(180deg,#2a6a8e,#1f526e);--rfui-header-purple:linear-gradient(180deg,#9b8bc5,#8b7bb5);--rfui-header-red:linear-gradient(180deg,#d06868,#c45c5c);--game-text-primary:#1f526e;--game-text-secondary:rgba(31,82,110,.7);--game-text-muted:rgba(31,82,110,.45);--game-text-highlight:#34a09c;--game-bg-card:rgba(255,251,237,.5);--game-bg-card-hover:rgba(255,251,237,.7);--game-bg-highlight:rgba(31,82,110,.06);--game-border-primary:rgba(31,82,110,.08);--game-border-hover:rgba(52,160,156,.3);--game-btn-primary-bg:linear-gradient(135deg,#3db0a8,#34a09c);--game-btn-primary-text:#fffbed}[data-rfui-theme=animal-crossing] .rfui-btn-wrapper,[data-rfui-theme=animal-crossing] .rfui-btn-wrapper:active,[data-rfui-theme=animal-crossing] .rfui-btn-wrapper:hover{box-shadow:none;transform:none}[data-rfui-theme=animal-crossing] .rfui-btn{border:2px solid hsla(0,0%,100%,.25);border-radius:999px;box-shadow:var(--rfui-shadow-base);font-weight:var(--rfui-font-weight-bold)}[data-rfui-theme=animal-crossing] .rfui-btn:before{background:none}[data-rfui-theme=animal-crossing] .rfui-btn.default{background:linear-gradient(180deg,#a08a70,#937c60);color:var(--rfui-text-light);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-btn.primary{background:linear-gradient(180deg,#3db0a8,#34a09c);color:var(--rfui-text-light);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-btn.secondary{background:linear-gradient(180deg,#e0a840,#d69632);color:var(--rfui-text-primary);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-btn.danger{background:linear-gradient(180deg,#d06868,#c45c5c);color:var(--rfui-text-light);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-btn-wrapper:hover .rfui-btn{box-shadow:var(--rfui-shadow-hover);transform:translateY(-2px)}[data-rfui-theme=animal-crossing] .rfui-btn-wrapper:active .rfui-btn{box-shadow:var(--rfui-shadow-active);transform:translateY(0)}[data-rfui-theme=animal-crossing] .rfui-modal-wrapper{background:#fffbed;border:var(--rfui-border-width) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-far);overflow:hidden}[data-rfui-theme=animal-crossing] .rfui-modal-wrapper:before{background:none}[data-rfui-theme=animal-crossing] .rfui-modal-wrapper .rfui-content{padding:0}[data-rfui-theme=animal-crossing] .rfui-modal-wrapper .rfui-header-bordered{background:var(--rfui-header-bg);border-bottom:none;border-radius:calc(var(--rfui-border-radius) - var(--rfui-border-width)) calc(var(--rfui-border-radius) - var(--rfui-border-width)) 0 0;margin:0;padding:var(--rfui-padding-md) var(--rfui-padding-lg);padding-bottom:var(--rfui-margin-md)}[data-rfui-theme=animal-crossing] .rfui-modal-wrapper .rfui-title-enhanced{color:var(--rfui-text-light);margin:0;text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-modal-body{color:var(--rfui-text-primary);padding:var(--rfui-padding-md) var(--rfui-padding-lg)}[data-rfui-theme=animal-crossing] .rfui-modal-body p{color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-modal-body h1,[data-rfui-theme=animal-crossing] .rfui-modal-body h2,[data-rfui-theme=animal-crossing] .rfui-modal-body h3,[data-rfui-theme=animal-crossing] .rfui-modal-body h4,[data-rfui-theme=animal-crossing] .rfui-modal-body h5,[data-rfui-theme=animal-crossing] .rfui-modal-body h6{color:var(--rfui-text-primary);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-modal-footer{border-top-color:rgba(31,82,110,.08)}[data-rfui-theme=animal-crossing] .rfui-modal-footer .rfui-btn.default{background:linear-gradient(180deg,#3db0a8,#34a09c);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper{background:#fffbed;border:var(--rfui-border-width) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius);box-shadow:var(--rfui-shadow-base)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper:before{background:none}[data-rfui-theme=animal-crossing] .rfui-card{color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-card-title{background:var(--rfui-header-bg);border-bottom:none;border-radius:calc(var(--rfui-border-radius) - var(--rfui-border-width)) calc(var(--rfui-border-radius) - var(--rfui-border-width)) 0 0;color:var(--rfui-text-light);margin:calc(var(--rfui-padding-lg)*-1);margin-bottom:var(--rfui-padding-md);padding:var(--rfui-padding-md) var(--rfui-padding-lg);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.primary .rfui-card-title{background:linear-gradient(180deg,#3db0a8,#34a09c);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.secondary .rfui-card-title{background:linear-gradient(180deg,#e0a840,#d69632);color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.danger .rfui-card-title{background:linear-gradient(180deg,#d06868,#c45c5c);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.header-yellow .rfui-card-title{background:var(--rfui-header-yellow);color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.header-green .rfui-card-title{background:var(--rfui-header-green);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.header-blue .rfui-card-title{background:var(--rfui-header-blue);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.header-purple .rfui-card-title{background:var(--rfui-header-purple);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper.header-red .rfui-card-title{background:var(--rfui-header-red);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-card-wrapper:hover{box-shadow:var(--rfui-shadow-hover);transform:translateY(-2px)}[data-rfui-theme=animal-crossing] .rfui-info-wrapper{background:#fffbed;border:var(--rfui-border-width) solid var(--rfui-border-color);border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-base)}[data-rfui-theme=animal-crossing] .rfui-info-wrapper:before{background:none}[data-rfui-theme=animal-crossing] .rfui-info-wrapper .rfui-header-bordered{margin-bottom:var(--rfui-margin-md);padding-top:0}[data-rfui-theme=animal-crossing] .rfui-info-body{color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-info-title{margin:0}[data-rfui-theme=animal-crossing] .rfui-info-wrapper.theme-yellow .rfui-info-title{color:#d69632;text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-info-wrapper.theme-green .rfui-info-title{color:#34a09c;text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-info-wrapper.theme-blue .rfui-info-title{color:#1f526e;text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-info-wrapper.theme-purple .rfui-info-title{color:#8b7bb5;text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-info-wrapper.theme-red .rfui-info-title{color:#c45c5c;text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-info-wrapper:hover{box-shadow:var(--rfui-shadow-hover);transform:translateY(-2px) scale(1.01)}[data-rfui-theme=animal-crossing] .rfui-page-overlay{background:hsla(40,34%,86%,.95)}[data-rfui-theme=animal-crossing] .rfui-page-content{border-radius:var(--rfui-border-radius-lg);box-shadow:var(--rfui-shadow-far)}[data-rfui-theme=animal-crossing] .rfui-page-content:after{background:#fffbed}[data-rfui-theme=animal-crossing] .rfui-page-content:before{background:none}[data-rfui-theme=animal-crossing] .rfui-page-wrapper{color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-page-wrapper h1,[data-rfui-theme=animal-crossing] .rfui-page-wrapper h2,[data-rfui-theme=animal-crossing] .rfui-page-wrapper h3,[data-rfui-theme=animal-crossing] .rfui-page-wrapper h4,[data-rfui-theme=animal-crossing] .rfui-page-wrapper h5,[data-rfui-theme=animal-crossing] .rfui-page-wrapper h6{color:var(--rfui-text-primary);text-shadow:none}[data-rfui-theme=animal-crossing] .rfui-tag-wrapper{border:var(--rfui-border-width-thin) solid hsla(0,0%,100%,.2);border-radius:999px;box-shadow:var(--rfui-shadow-base)}[data-rfui-theme=animal-crossing] .rfui-tag{color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-close-btn{background:linear-gradient(180deg,#d06868,#c45c5c);border:2px solid hsla(0,0%,100%,.3);border-radius:999px;box-shadow:0 1px 4px rgba(31,82,110,.12);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-close-btn:hover{background:linear-gradient(180deg,#d87878,#d06868);box-shadow:0 2px 8px rgba(31,82,110,.15);transform:translateY(-1px)}[data-rfui-theme=animal-crossing] .rfui-dropdown{border-radius:999px;border-width:var(--rfui-border-width);box-shadow:var(--rfui-shadow-base)}[data-rfui-theme=animal-crossing] .rfui-dropdown:hover:not(:disabled){box-shadow:var(--rfui-shadow-hover)}[data-rfui-theme=animal-crossing] .rfui-dropdown.default{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#fffdf5,#fffbed 50%,#f5eed8);color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-dropdown.primary{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#3db0a8,#34a09c 50%,#2a8480);color:var(--rfui-text-light)}[data-rfui-theme=animal-crossing] .rfui-dropdown.secondary{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#e0a840,#d69632 50%,#c08828);color:var(--rfui-text-primary)}[data-rfui-theme=animal-crossing] .rfui-dropdown.danger{background-image:linear-gradient(45deg,transparent 50%,currentColor 0),linear-gradient(135deg,currentColor 50%,transparent 0),linear-gradient(180deg,#d06868,#c45c5c 50%,#b04e4e);color:var(--rfui-text-light)}
package/package.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "name": "raw-fun-ui",
3
+ "version": "2.0.0",
4
+ "description": "A game-themed UI component library with switchable themes, built with TypeScript and pure CSS",
5
+ "type": "module",
6
+ "main": "dist/index.cjs.js",
7
+ "module": "dist/index.esm.js",
8
+ "types": "dist/index.d.ts",
9
+ "files": [
10
+ "dist/",
11
+ "README.md",
12
+ "CHANGELOG.md"
13
+ ],
14
+ "keywords": [
15
+ "ui",
16
+ "components",
17
+ "typescript",
18
+ "css",
19
+ "raw-fun",
20
+ "game-themes",
21
+ "animations",
22
+ "vanilla-js",
23
+ "lightweight",
24
+ "game-ui",
25
+ "zero-dependencies"
26
+ ],
27
+ "author": "Richard Fu",
28
+ "license": "MIT",
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "git+https://github.com/raw-fun-gaming/raw-fun-ui.git"
32
+ },
33
+ "bugs": {
34
+ "url": "https://github.com/raw-fun-gaming/raw-fun-ui/issues"
35
+ },
36
+ "homepage": "https://github.com/raw-fun-gaming/raw-fun-ui#readme",
37
+ "engines": {
38
+ "node": ">=14.0.0"
39
+ },
40
+ "scripts": {
41
+ "build": "rollup -c",
42
+ "build:watch": "rollup -c -w",
43
+ "dev": "npm run build:watch",
44
+ "demo": "npm run build && cp dist/raw-fun-ui.css dist/index.umd.js public/ && python3 -m http.server 8002 --directory public & sleep 3 && open http://localhost:8002/index.html",
45
+ "clean": "rm -rf dist",
46
+ "prepublishOnly": "npm run clean && npm run build"
47
+ },
48
+ "devDependencies": {
49
+ "@rollup/plugin-commonjs": "^25.0.0",
50
+ "@rollup/plugin-node-resolve": "^15.0.0",
51
+ "@rollup/plugin-terser": "^0.4.0",
52
+ "@rollup/plugin-typescript": "^11.0.0",
53
+ "postcss-import": "^16.1.1",
54
+ "rollup": "^3.0.0",
55
+ "rollup-plugin-dts": "^6.0.0",
56
+ "rollup-plugin-postcss": "^4.0.0",
57
+ "tslib": "^2.8.1",
58
+ "typescript": "^5.0.0"
59
+ },
60
+ "exports": {
61
+ ".": {
62
+ "import": "./dist/index.esm.js",
63
+ "require": "./dist/index.cjs.js",
64
+ "types": "./dist/index.d.ts"
65
+ },
66
+ "./styles": "./dist/raw-fun-ui.css",
67
+ "./dist/raw-fun-ui.css": "./dist/raw-fun-ui.css"
68
+ }
69
+ }