@rpgjs/ui-css 5.0.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +294 -0
- package/package.json +33 -0
- package/src/animations.css +114 -0
- package/src/index.css +21 -0
- package/src/primitives/bar.css +79 -0
- package/src/primitives/button.css +80 -0
- package/src/primitives/character-card.css +66 -0
- package/src/primitives/dialog.css +190 -0
- package/src/primitives/gameover.css +115 -0
- package/src/primitives/hotbar.css +42 -0
- package/src/primitives/input.css +59 -0
- package/src/primitives/inventory.css +86 -0
- package/src/primitives/main-menu.css +347 -0
- package/src/primitives/menu.css +107 -0
- package/src/primitives/panel.css +47 -0
- package/src/primitives/save-load.css +100 -0
- package/src/primitives/stats.css +70 -0
- package/src/primitives/title-screen.css +85 -0
- package/src/primitives/toast.css +120 -0
- package/src/primitives/tooltip.css +32 -0
- package/src/reset.css +35 -0
- package/src/tokens.css +49 -0
- package/theme-default/theme.css +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
# @rpgjs/ui-css
|
|
2
|
+
|
|
3
|
+
A framework-agnostic CSS library for RPG UI components. Fully customizable via CSS custom properties.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @rpgjs/ui-css
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @rpgjs/ui-css
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Basic Setup
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<!DOCTYPE html>
|
|
19
|
+
<html>
|
|
20
|
+
<head>
|
|
21
|
+
<link rel="stylesheet" href="@rpgjs/ui-css/reset.css">
|
|
22
|
+
<link rel="stylesheet" href="@rpgjs/ui-css/index.css">
|
|
23
|
+
<link rel="stylesheet" href="@rpgjs/ui-css/theme-default.css">
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<!-- Your RPG UI here -->
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### With Build Tools
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
// In your CSS/SCSS
|
|
35
|
+
@import '@rpgjs/ui-css/reset.css';
|
|
36
|
+
@import '@rpgjs/ui-css/index.css';
|
|
37
|
+
@import '@rpgjs/ui-css/theme-default.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
### Primitives
|
|
43
|
+
|
|
44
|
+
#### Core Components
|
|
45
|
+
- `.rpg-ui-panel` - Panel container with bevel effects and shadows
|
|
46
|
+
- `.rpg-ui-btn` - Interactive button with hover and active states
|
|
47
|
+
- `.rpg-ui-dialog` - Dialog box with speaker labels and portrait support
|
|
48
|
+
- `.rpg-ui-bar` - Progress/health bar with gradient fills and animations
|
|
49
|
+
- `.rpg-ui-bar-fill` - Fill element for bars
|
|
50
|
+
- `.rpg-ui-bar-label` - Text overlay for bars
|
|
51
|
+
- `.rpg-ui-menu` - Menu container with selection indicators
|
|
52
|
+
- `.rpg-ui-menu-item` - Individual menu items with hover effects
|
|
53
|
+
- `.rpg-ui-menu-header` - Menu header section
|
|
54
|
+
|
|
55
|
+
#### RPG-Specific Components
|
|
56
|
+
- `.rpg-ui-inventory` - Inventory grid container
|
|
57
|
+
- `.rpg-ui-inventory-slot` - Individual inventory slot with rarity indicators
|
|
58
|
+
- `.rpg-ui-inventory-slot-icon` - Icon container for inventory items
|
|
59
|
+
- `.rpg-ui-inventory-slot-quantity` - Item quantity display
|
|
60
|
+
- `.rpg-ui-inventory-slot-rarity` - Rarity color indicator (common, uncommon, rare, epic, legendary)
|
|
61
|
+
- `.rpg-ui-stats` - Stats container
|
|
62
|
+
- `.rpg-ui-stat` - Individual stat display
|
|
63
|
+
- `.rpg-ui-stat-label` - Stat label text
|
|
64
|
+
- `.rpg-ui-stat-value` - Stat value with change indicators
|
|
65
|
+
- `.rpg-ui-stat-change` - Positive/negative stat change indicator
|
|
66
|
+
- `.rpg-ui-stat-group` - Group of related stats
|
|
67
|
+
- `.rpg-ui-stat-group-title` - Group title
|
|
68
|
+
- `.rpg-ui-stat-grid` - Grid layout for stats
|
|
69
|
+
- `.rpg-ui-stat-bar-container` - Container for stat with bar
|
|
70
|
+
- `.rpg-ui-character-card` - Character profile card
|
|
71
|
+
- `.rpg-ui-character-card-header` - Card header section
|
|
72
|
+
- `.rpg-ui-character-card-avatar` - Character avatar/portrait
|
|
73
|
+
- `.rpg-ui-character-card-info` - Character info section
|
|
74
|
+
- `.rpg-ui-character-card-name` - Character name
|
|
75
|
+
- `.rpg-ui-character-card-class` - Character class/race
|
|
76
|
+
- `.rpg-ui-character-card-level` - Character level badge
|
|
77
|
+
- `.rpg-ui-character-card-stats` - Stats section in card
|
|
78
|
+
- `.rpg-ui-character-card-section` - Card section divider
|
|
79
|
+
- `.rpg-ui-character-card-section-title` - Section title
|
|
80
|
+
|
|
81
|
+
### Variants & States
|
|
82
|
+
|
|
83
|
+
#### Button Variants
|
|
84
|
+
```html
|
|
85
|
+
<button class="rpg-ui-btn" data-variant="primary">Primary</button>
|
|
86
|
+
<button class="rpg-ui-btn" data-variant="success">Success</button>
|
|
87
|
+
<button class="rpg-ui-btn" data-variant="warning">Warning</button>
|
|
88
|
+
<button class="rpg-ui-btn" data-variant="danger">Danger</button>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
#### Bar Types
|
|
92
|
+
```html
|
|
93
|
+
<div class="rpg-ui-bar" data-type="health">Health Bar</div>
|
|
94
|
+
<div class="rpg-ui-bar" data-type="mana">Mana Bar</div>
|
|
95
|
+
<div class="rpg-ui-bar" data-type="stamina">Stamina Bar</div>
|
|
96
|
+
<div class="rpg-ui-bar" data-type="experience">Experience Bar</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### Menu Selection
|
|
100
|
+
```html
|
|
101
|
+
<div class="rpg-ui-menu-item" data-selected="true">Selected Item</div>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### Inventory Slot States
|
|
105
|
+
```html
|
|
106
|
+
<div class="rpg-ui-inventory-slot" data-selected="true">Selected Slot</div>
|
|
107
|
+
<div class="rpg-ui-inventory-slot" data-locked="true">Locked Slot</div>
|
|
108
|
+
<div class="rpg-ui-inventory-slot-rarity" data-rarity="legendary"></div>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## CSS Custom Properties (Tokens)
|
|
112
|
+
|
|
113
|
+
All styling is controlled via CSS custom properties:
|
|
114
|
+
|
|
115
|
+
```css
|
|
116
|
+
:root {
|
|
117
|
+
/* Colors */
|
|
118
|
+
--rpg-ui-bg: #1c1917;
|
|
119
|
+
--rpg-ui-surface: #292524;
|
|
120
|
+
--rpg-ui-border: #d6b36a;
|
|
121
|
+
--rpg-ui-border-light: #fde047;
|
|
122
|
+
--rpg-ui-border-dark: #78350f;
|
|
123
|
+
--rpg-ui-text: #fef3c7;
|
|
124
|
+
--rpg-ui-text-muted: #a8a29e;
|
|
125
|
+
--rpg-ui-accent: #f59e0b;
|
|
126
|
+
--rpg-ui-success: #22c55e;
|
|
127
|
+
--rpg-ui-warning: #eab308;
|
|
128
|
+
--rpg-ui-danger: #dc2626;
|
|
129
|
+
--rpg-ui-info: #3b82f6;
|
|
130
|
+
|
|
131
|
+
/* Gradients */
|
|
132
|
+
--rpg-ui-gradient-surface: linear-gradient(180deg, var(--rpg-ui-surface), var(--rpg-ui-bg));
|
|
133
|
+
--rpg-ui-gradient-accent: linear-gradient(180deg, var(--rpg-ui-accent), color-mix(in srgb, var(--rpg-ui-accent), black 20%));
|
|
134
|
+
--rpg-ui-gradient-bar: linear-gradient(90deg, var(--rpg-ui-accent), color-mix(in srgb, var(--rpg-ui-accent), black 30%));
|
|
135
|
+
|
|
136
|
+
/* Shadows */
|
|
137
|
+
--rpg-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
138
|
+
--rpg-ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
|
|
139
|
+
--rpg-ui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.8);
|
|
140
|
+
--rpg-ui-shadow-glow: 0 0 20px var(--rpg-ui-accent);
|
|
141
|
+
--rpg-ui-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
142
|
+
|
|
143
|
+
/* Typography */
|
|
144
|
+
--rpg-ui-font: "Cinzel", serif;
|
|
145
|
+
--rpg-ui-font-size: 1rem;
|
|
146
|
+
--rpg-ui-font-size-sm: 0.875rem;
|
|
147
|
+
--rpg-ui-font-size-lg: 1.125rem;
|
|
148
|
+
--rpg-ui-font-weight: 600;
|
|
149
|
+
--rpg-ui-font-weight-bold: 800;
|
|
150
|
+
--rpg-ui-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
151
|
+
|
|
152
|
+
/* Layout */
|
|
153
|
+
--rpg-ui-radius-sm: 4px;
|
|
154
|
+
--rpg-ui-radius-md: 6px;
|
|
155
|
+
--rpg-ui-radius-lg: 10px;
|
|
156
|
+
--rpg-ui-border-width: 3px;
|
|
157
|
+
--rpg-ui-spacing: 0.75rem;
|
|
158
|
+
--rpg-ui-spacing-lg: 1.25rem;
|
|
159
|
+
|
|
160
|
+
/* Effects */
|
|
161
|
+
--rpg-ui-bevel-light: var(--rpg-ui-border-light);
|
|
162
|
+
--rpg-ui-bevel-dark: var(--rpg-ui-border-dark);
|
|
163
|
+
--rpg-ui-border-double: 4px;
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Creating Custom Themes
|
|
168
|
+
|
|
169
|
+
### Override Globally
|
|
170
|
+
|
|
171
|
+
```css
|
|
172
|
+
:root {
|
|
173
|
+
--rpg-ui-accent: hotpink;
|
|
174
|
+
--rpg-ui-font: "Arial", sans-serif;
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### Override Locally
|
|
179
|
+
|
|
180
|
+
```css
|
|
181
|
+
.my-custom-ui {
|
|
182
|
+
--rpg-ui-accent: hotpink;
|
|
183
|
+
--rpg-ui-radius-lg: 0;
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Custom Theme File
|
|
188
|
+
|
|
189
|
+
```css
|
|
190
|
+
/* my-theme.css */
|
|
191
|
+
:root {
|
|
192
|
+
--rpg-ui-bg: #2d1b69;
|
|
193
|
+
--rpg-ui-surface: #4c2a85;
|
|
194
|
+
--rpg-ui-border: #ff6b6b;
|
|
195
|
+
--rpg-ui-text: #ffffff;
|
|
196
|
+
--rpg-ui-accent: #ffd93d;
|
|
197
|
+
--rpg-ui-font: "MedievalSharp", cursive;
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Example
|
|
202
|
+
|
|
203
|
+
### Character Card with Stats
|
|
204
|
+
|
|
205
|
+
```html
|
|
206
|
+
<div class="rpg-ui-character-card">
|
|
207
|
+
<div class="rpg-ui-character-card-header">
|
|
208
|
+
<div class="rpg-ui-character-card-avatar">🧙</div>
|
|
209
|
+
<div class="rpg-ui-character-card-info">
|
|
210
|
+
<div class="rpg-ui-character-card-name">Aelindor</div>
|
|
211
|
+
<div class="rpg-ui-character-card-class">Archmage <span class="rpg-ui-character-card-level">Lv. 47</span></div>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="rpg-ui-character-card-stats">
|
|
215
|
+
<div class="rpg-ui-stat-bar-container">
|
|
216
|
+
<span class="rpg-ui-stat-label">HP</span>
|
|
217
|
+
<div class="rpg-ui-bar" data-type="health">
|
|
218
|
+
<div class="rpg-ui-bar-fill" style="width: 75%;"></div>
|
|
219
|
+
<span class="rpg-ui-bar-label">2450/3267</span>
|
|
220
|
+
</div>
|
|
221
|
+
<span class="rpg-ui-stat-value">75%</span>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Inventory System
|
|
228
|
+
|
|
229
|
+
```html
|
|
230
|
+
<div class="rpg-ui-inventory" style="display: grid; grid-template-columns: repeat(4, 64px);">
|
|
231
|
+
<div class="rpg-ui-inventory-slot" data-selected="true">
|
|
232
|
+
<div class="rpg-ui-inventory-slot-icon">⚔️</div>
|
|
233
|
+
<span class="rpg-ui-inventory-slot-quantity">1</span>
|
|
234
|
+
<div class="rpg-ui-inventory-slot-rarity" data-rarity="legendary"></div>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="rpg-ui-inventory-slot">
|
|
237
|
+
<div class="rpg-ui-inventory-slot-icon">🧪</div>
|
|
238
|
+
<span class="rpg-ui-inventory-slot-quantity">15</span>
|
|
239
|
+
<div class="rpg-ui-inventory-slot-rarity" data-rarity="uncommon"></div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### Dialog Box
|
|
245
|
+
|
|
246
|
+
```html
|
|
247
|
+
<div class="rpg-ui-dialog">
|
|
248
|
+
<div class="rpg-ui-dialog-speaker">Ancient Sage</div>
|
|
249
|
+
<div class="rpg-ui-dialog-content">
|
|
250
|
+
The ancient prophecy speaks of a hero who will wield the Crystal of Eternity.
|
|
251
|
+
</div>
|
|
252
|
+
<div class="rpg-ui-dialog-indicator"></div>
|
|
253
|
+
</div>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
### Stats Display
|
|
257
|
+
|
|
258
|
+
```html
|
|
259
|
+
<div class="rpg-ui-stats">
|
|
260
|
+
<div class="rpg-ui-stat">
|
|
261
|
+
<span class="rpg-ui-stat-label">Strength</span>
|
|
262
|
+
<span class="rpg-ui-stat-value">85 <span class="rpg-ui-stat-change" data-type="positive">+5</span></span>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="rpg-ui-stat">
|
|
265
|
+
<span class="rpg-ui-stat-label">Intelligence</span>
|
|
266
|
+
<span class="rpg-ui-stat-value">142 <span class="rpg-ui-stat-change" data-type="positive">+12</span></span>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
## Architecture
|
|
272
|
+
|
|
273
|
+
- **CSS-only**: No JavaScript dependencies
|
|
274
|
+
- **Framework-agnostic**: Works with any framework or plain HTML
|
|
275
|
+
- **Token-based**: All styling via CSS custom properties
|
|
276
|
+
- **Gaming-focused**: Designed for 2D RPG games with authentic UI elements
|
|
277
|
+
- **RPG components**: Character cards, inventory, stats, dialog boxes, menus
|
|
278
|
+
- **Visual effects**: Bevel edges, gradients, shadows, glow effects, animations
|
|
279
|
+
- **Minimal defaults**: Default theme is optional
|
|
280
|
+
- **Fully customizable**: Override tokens for complete theming
|
|
281
|
+
|
|
282
|
+
## Features
|
|
283
|
+
|
|
284
|
+
- 🎮 **Authentic RPG styling**: Medieval-themed default theme
|
|
285
|
+
- ⚔️ **Character cards**: Complete character profile with stats and vitals
|
|
286
|
+
- 📦 **Inventory system**: Slots with rarity indicators and selection states
|
|
287
|
+
- 💪 **Stats display**: Individual stats with positive/negative change indicators
|
|
288
|
+
- 💬 **Dialog boxes**: Speaker labels, portrait support, and navigation indicators
|
|
289
|
+
- 📊 **Progress bars**: Health, mana, stamina, experience with gradient fills and animations
|
|
290
|
+
- 🎨 **Button variants**: Primary, success, warning, danger with hover/active states
|
|
291
|
+
- 📋 **Menu system**: Selection indicators, hover effects, and animations
|
|
292
|
+
- 🎯 **Bevel effects**: 3D-style borders with light/dark edge highlighting
|
|
293
|
+
- ✨ **Glow effects**: Subtle glows on hover and selection
|
|
294
|
+
- 🔧 **Full customization**: Every aspect is configurable via CSS tokens
|
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rpgjs/ui-css",
|
|
3
|
+
"version": "5.0.0-alpha.30",
|
|
4
|
+
"description": "CSS library for RPG UI components - framework-agnostic and fully customizable",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Samuel Ronce",
|
|
7
|
+
"exports": {
|
|
8
|
+
"./reset.css": "./src/reset.css",
|
|
9
|
+
"./tokens.css": "./src/tokens.css",
|
|
10
|
+
"./index.css": "./src/index.css",
|
|
11
|
+
"./theme-default.css": "./theme-default/theme.css"
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"src/",
|
|
15
|
+
"theme-default/"
|
|
16
|
+
],
|
|
17
|
+
"publishConfig": {
|
|
18
|
+
"access": "public"
|
|
19
|
+
},
|
|
20
|
+
"keywords": [
|
|
21
|
+
"rpg",
|
|
22
|
+
"ui",
|
|
23
|
+
"css",
|
|
24
|
+
"components",
|
|
25
|
+
"framework-agnostic"
|
|
26
|
+
],
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"vite": "^7.3.0"
|
|
29
|
+
},
|
|
30
|
+
"scripts": {
|
|
31
|
+
"build": "echo 'CSS package - no build needed'"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* RPG UI Animations */
|
|
2
|
+
|
|
3
|
+
@keyframes rpg-fade-in {
|
|
4
|
+
from {
|
|
5
|
+
opacity: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
to {
|
|
9
|
+
opacity: 1;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@keyframes rpg-slide-up {
|
|
14
|
+
from {
|
|
15
|
+
transform: translateY(10px);
|
|
16
|
+
opacity: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
to {
|
|
20
|
+
transform: translateY(0);
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@keyframes rpg-bounce {
|
|
26
|
+
|
|
27
|
+
0%,
|
|
28
|
+
100% {
|
|
29
|
+
transform: translateY(0);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
50% {
|
|
33
|
+
transform: translateY(-4px);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes rpg-pulse {
|
|
38
|
+
0% {
|
|
39
|
+
transform: scale(1);
|
|
40
|
+
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
70% {
|
|
44
|
+
transform: scale(1.02);
|
|
45
|
+
box-shadow: 0 0 0 6px rgba(255, 204, 0, 0);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
100% {
|
|
49
|
+
transform: scale(1);
|
|
50
|
+
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@keyframes rpg-shake {
|
|
55
|
+
|
|
56
|
+
0%,
|
|
57
|
+
100% {
|
|
58
|
+
transform: translateX(0);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
25% {
|
|
62
|
+
transform: translateX(-4px);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
75% {
|
|
66
|
+
transform: translateX(4px);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes rpg-shimmer {
|
|
71
|
+
0% {
|
|
72
|
+
background-position: 200% 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
100% {
|
|
76
|
+
background-position: -200% 0;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@keyframes rpg-float {
|
|
81
|
+
|
|
82
|
+
0%,
|
|
83
|
+
100% {
|
|
84
|
+
transform: translateY(0);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
50% {
|
|
88
|
+
transform: translateY(-6px);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.rpg-anim-fade-in {
|
|
93
|
+
animation: rpg-fade-in 0.3s ease-out forwards;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.rpg-anim-slide-up {
|
|
97
|
+
animation: rpg-slide-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.rpg-anim-bounce {
|
|
101
|
+
animation: rpg-bounce 2s infinite;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.rpg-anim-pulse {
|
|
105
|
+
animation: rpg-pulse 2s infinite;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.rpg-anim-shake {
|
|
109
|
+
animation: rpg-shake 0.3s ease-in-out;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.rpg-anim-float {
|
|
113
|
+
animation: rpg-float 3s ease-in-out infinite;
|
|
114
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* RPG UI CSS Library */
|
|
2
|
+
@import './reset.css';
|
|
3
|
+
@import './animations.css';
|
|
4
|
+
|
|
5
|
+
/* Primitives */
|
|
6
|
+
@import './primitives/panel.css';
|
|
7
|
+
@import './primitives/button.css';
|
|
8
|
+
@import './primitives/input.css';
|
|
9
|
+
@import './primitives/menu.css';
|
|
10
|
+
@import './primitives/main-menu.css';
|
|
11
|
+
@import './primitives/bar.css';
|
|
12
|
+
@import './primitives/inventory.css';
|
|
13
|
+
@import './primitives/dialog.css';
|
|
14
|
+
@import './primitives/save-load.css';
|
|
15
|
+
@import './primitives/character-card.css';
|
|
16
|
+
@import './primitives/stats.css';
|
|
17
|
+
@import './primitives/hotbar.css';
|
|
18
|
+
@import './primitives/tooltip.css';
|
|
19
|
+
@import './primitives/toast.css';
|
|
20
|
+
@import './primitives/title-screen.css';
|
|
21
|
+
@import './primitives/gameover.css';
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
.rpg-ui-bar {
|
|
2
|
+
position: relative;
|
|
3
|
+
height: 24px;
|
|
4
|
+
background: rgba(0, 0, 0, 0.5);
|
|
5
|
+
border: 2px solid var(--rpg-ui-border-dark);
|
|
6
|
+
border-radius: var(--rpg-ui-radius-lg);
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
|
|
9
|
+
margin-bottom: 8px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.rpg-ui-bar-fill {
|
|
13
|
+
height: 100%;
|
|
14
|
+
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
15
|
+
position: relative;
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Gloss effect */
|
|
22
|
+
.rpg-ui-bar-fill::after {
|
|
23
|
+
content: "";
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 0;
|
|
26
|
+
left: 0;
|
|
27
|
+
right: 0;
|
|
28
|
+
height: 50%;
|
|
29
|
+
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Shimmer animation for active bars */
|
|
34
|
+
.rpg-ui-bar-fill::before {
|
|
35
|
+
content: "";
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
bottom: 0;
|
|
40
|
+
width: 100%;
|
|
41
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
42
|
+
transform: skewX(-20deg);
|
|
43
|
+
animation: rpg-shimmer 2s infinite linear;
|
|
44
|
+
background-size: 200% 100%;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.rpg-ui-bar-label {
|
|
48
|
+
position: absolute;
|
|
49
|
+
top: 50%;
|
|
50
|
+
left: 50%;
|
|
51
|
+
transform: translate(-50%, -50%);
|
|
52
|
+
color: white;
|
|
53
|
+
font-size: var(--rpg-ui-font-size-sm);
|
|
54
|
+
font-weight: bold;
|
|
55
|
+
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
|
|
56
|
+
z-index: 1;
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Types */
|
|
61
|
+
.rpg-ui-bar[data-type="health"] .rpg-ui-bar-fill {
|
|
62
|
+
background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
|
|
63
|
+
box-shadow: 0 0 10px #ef4444;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.rpg-ui-bar[data-type="mana"] .rpg-ui-bar-fill {
|
|
67
|
+
background: linear-gradient(180deg, #3b82f6 0%, #1e3a8a 100%);
|
|
68
|
+
box-shadow: 0 0 10px #3b82f6;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.rpg-ui-bar[data-type="experience"] .rpg-ui-bar-fill {
|
|
72
|
+
background: linear-gradient(180deg, #a855f7 0%, #6b21a8 100%);
|
|
73
|
+
box-shadow: 0 0 10px #a855f7;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.rpg-ui-bar[data-type="stamina"] .rpg-ui-bar-fill {
|
|
77
|
+
background: linear-gradient(180deg, #22c55e 0%, #14532d 100%);
|
|
78
|
+
box-shadow: 0 0 10px #22c55e;
|
|
79
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
.rpg-ui-btn {
|
|
2
|
+
appearance: none;
|
|
3
|
+
border: none;
|
|
4
|
+
background: var(--rpg-ui-surface-light);
|
|
5
|
+
color: var(--rpg-ui-text);
|
|
6
|
+
font-family: var(--rpg-ui-font);
|
|
7
|
+
font-size: var(--rpg-ui-font-size);
|
|
8
|
+
padding: 8px 16px;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
position: relative;
|
|
11
|
+
|
|
12
|
+
/* Pixel Border */
|
|
13
|
+
box-shadow:
|
|
14
|
+
inset 2px 2px 0px rgba(255, 255, 255, 0.1),
|
|
15
|
+
inset -2px -2px 0px rgba(0, 0, 0, 0.3),
|
|
16
|
+
0 0 0 2px var(--rpg-ui-border-dark),
|
|
17
|
+
0 4px 0 2px var(--rpg-ui-border-dark),
|
|
18
|
+
/* 3D depth */
|
|
19
|
+
0 6px 4px rgba(0, 0, 0, 0.4);
|
|
20
|
+
/* Drop shadow */
|
|
21
|
+
|
|
22
|
+
margin-bottom: 6px;
|
|
23
|
+
/* Space for the 3D part */
|
|
24
|
+
transition: transform 0.1s, box-shadow 0.1s;
|
|
25
|
+
text-transform: uppercase;
|
|
26
|
+
font-weight: bold;
|
|
27
|
+
letter-spacing: 1px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.rpg-ui-btn:hover {
|
|
31
|
+
background: var(--rpg-ui-accent);
|
|
32
|
+
color: var(--rpg-ui-bg);
|
|
33
|
+
box-shadow:
|
|
34
|
+
inset 2px 2px 0px rgba(255, 255, 255, 0.3),
|
|
35
|
+
inset -2px -2px 0px rgba(0, 0, 0, 0.1),
|
|
36
|
+
0 0 0 2px var(--rpg-ui-border-dark),
|
|
37
|
+
0 4px 0 2px var(--rpg-ui-border-dark),
|
|
38
|
+
0 6px 4px rgba(0, 0, 0, 0.4);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.rpg-ui-btn:active {
|
|
42
|
+
transform: translateY(4px);
|
|
43
|
+
box-shadow:
|
|
44
|
+
inset 2px 2px 0px rgba(0, 0, 0, 0.2),
|
|
45
|
+
0 0 0 2px var(--rpg-ui-border-dark),
|
|
46
|
+
0 0 0 2px var(--rpg-ui-border-dark),
|
|
47
|
+
/* Collapsed depth */
|
|
48
|
+
0 0 0 rgba(0, 0, 0, 0);
|
|
49
|
+
margin-bottom: 6px;
|
|
50
|
+
/* Keep layout stable */
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Variants */
|
|
54
|
+
.rpg-ui-btn[data-variant="primary"] {
|
|
55
|
+
background: var(--rpg-ui-accent);
|
|
56
|
+
color: var(--rpg-ui-bg);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.rpg-ui-btn[data-variant="primary"]:hover {
|
|
60
|
+
background: var(--rpg-ui-accent-hover);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.rpg-ui-btn[data-variant="danger"] {
|
|
64
|
+
background: var(--rpg-ui-danger);
|
|
65
|
+
color: white;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.rpg-ui-btn[data-variant="danger"]:hover {
|
|
69
|
+
background: #ef4444;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.rpg-ui-btn[data-variant="success"] {
|
|
73
|
+
background: var(--rpg-ui-success);
|
|
74
|
+
color: white;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.rpg-ui-btn[data-variant="warning"] {
|
|
78
|
+
background: var(--rpg-ui-warning);
|
|
79
|
+
color: black;
|
|
80
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
.rpg-ui-character-card {
|
|
2
|
+
background: var(--rpg-ui-surface);
|
|
3
|
+
border: 4px solid var(--rpg-ui-border);
|
|
4
|
+
padding: 16px;
|
|
5
|
+
border-radius: var(--rpg-ui-radius-lg);
|
|
6
|
+
box-shadow: var(--rpg-ui-shadow-lg);
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
gap: 16px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.rpg-ui-character-card-header {
|
|
13
|
+
display: flex;
|
|
14
|
+
gap: 16px;
|
|
15
|
+
align-items: center;
|
|
16
|
+
border-bottom: 2px solid var(--rpg-ui-border-dark);
|
|
17
|
+
padding-bottom: 16px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.rpg-ui-character-card-avatar {
|
|
21
|
+
width: 64px;
|
|
22
|
+
height: 64px;
|
|
23
|
+
background: var(--rpg-ui-bg);
|
|
24
|
+
border: 2px solid var(--rpg-ui-border-light);
|
|
25
|
+
border-radius: var(--rpg-ui-radius-md);
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
font-size: 32px;
|
|
30
|
+
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.rpg-ui-character-card-info {
|
|
34
|
+
flex: 1;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.rpg-ui-character-card-name {
|
|
38
|
+
font-size: var(--rpg-ui-font-size-xl);
|
|
39
|
+
font-weight: bold;
|
|
40
|
+
color: var(--rpg-ui-accent);
|
|
41
|
+
text-shadow: 1px 1px 0 #000;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.rpg-ui-character-card-class {
|
|
45
|
+
color: var(--rpg-ui-text-muted);
|
|
46
|
+
font-size: var(--rpg-ui-font-size-sm);
|
|
47
|
+
text-transform: uppercase;
|
|
48
|
+
letter-spacing: 1px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.rpg-ui-character-card-level {
|
|
52
|
+
color: var(--rpg-ui-text);
|
|
53
|
+
background: var(--rpg-ui-border-dark);
|
|
54
|
+
padding: 2px 6px;
|
|
55
|
+
border-radius: 4px;
|
|
56
|
+
font-size: 12px;
|
|
57
|
+
margin-left: 8px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.rpg-ui-character-card-section-title {
|
|
61
|
+
font-size: var(--rpg-ui-font-size-sm);
|
|
62
|
+
color: var(--rpg-ui-border-light);
|
|
63
|
+
text-transform: uppercase;
|
|
64
|
+
margin-bottom: 8px;
|
|
65
|
+
font-weight: bold;
|
|
66
|
+
}
|