@bit.rhplus/ui2.ai-button 0.0.2 → 0.0.3
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 +96 -0
- package/dist/README.md +96 -0
- package/dist/style.css +202 -202
- package/package.json +2 -2
- package/style.css +202 -202
- /package/dist/{preview-1770045122180.js → preview-1770614312455.js} +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# AI Rainbow Button - Optimalizované výkonnostní módy
|
|
2
|
+
|
|
3
|
+
## 🚀 Použití
|
|
4
|
+
|
|
5
|
+
```jsx
|
|
6
|
+
import AIButton from '@bit.rhplus/ui2.ai-button/_src';
|
|
7
|
+
|
|
8
|
+
// Default mód - optimalizovaný, plynulý
|
|
9
|
+
<AIButton label="AI" onClick={handleClick} />
|
|
10
|
+
|
|
11
|
+
// Stepped mód - ~50-60% rychlejší
|
|
12
|
+
<AIButton
|
|
13
|
+
label="AI"
|
|
14
|
+
performanceMode="stepped"
|
|
15
|
+
onClick={handleClick}
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
// Minimal mód - ~70-80% rychlejší
|
|
19
|
+
<AIButton
|
|
20
|
+
label="AI"
|
|
21
|
+
performanceMode="minimal"
|
|
22
|
+
onClick={handleClick}
|
|
23
|
+
/>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 📊 Výkonnostní módy
|
|
27
|
+
|
|
28
|
+
### `performanceMode="default"`
|
|
29
|
+
- Plynulé animace (60fps)
|
|
30
|
+
- Box-shadow glow efekt
|
|
31
|
+
- Plný rainbow gradient
|
|
32
|
+
- **CPU zátěž:** ~3-6% (při zobrazení)
|
|
33
|
+
- **Doporučeno:** Jednotlivá tlačítka, hero sekce
|
|
34
|
+
|
|
35
|
+
### `performanceMode="stepped"`
|
|
36
|
+
- Skokové animace (24 kroků, ~15° rotace)
|
|
37
|
+
- Plný glow efekt
|
|
38
|
+
- Plný rainbow gradient
|
|
39
|
+
- **CPU zátěž:** ~1-2% (při zobrazení)
|
|
40
|
+
- **Doporučeno:** 2-5 tlačítek na stránce
|
|
41
|
+
|
|
42
|
+
### `performanceMode="minimal"`
|
|
43
|
+
- Velmi skokové animace (12 kroků, ~30° rotace)
|
|
44
|
+
- BEZ glow efektu
|
|
45
|
+
- Zjednodušený gradient (4 barvy)
|
|
46
|
+
- **CPU zátěž:** ~0.5-1% (při zobrazení)
|
|
47
|
+
- **Doporučeno:** 5+ tlačítek, mobilní zařízení
|
|
48
|
+
|
|
49
|
+
## ⚡ Automatické optimalizace
|
|
50
|
+
|
|
51
|
+
Všechny módy automaticky:
|
|
52
|
+
- ✅ Pausují animace mimo viewport (0% CPU)
|
|
53
|
+
- ✅ GPU akcelerace (will-change, translateZ)
|
|
54
|
+
- ✅ CSS containment
|
|
55
|
+
- ✅ React.memo (prevence re-renderů)
|
|
56
|
+
- ✅ Respektují `prefers-reduced-motion`
|
|
57
|
+
|
|
58
|
+
## 🎨 Props
|
|
59
|
+
|
|
60
|
+
| Prop | Typ | Default | Popis |
|
|
61
|
+
|------|-----|---------|-------|
|
|
62
|
+
| `label` | string | 'AI' | Text na tlačítku |
|
|
63
|
+
| `onClick` | function | - | Click handler |
|
|
64
|
+
| `size` | string/number | '110px' | Velikost |
|
|
65
|
+
| `ring` | string/number | '10px' | Tloušťka prstence |
|
|
66
|
+
| `performanceMode` | 'default' \| 'stepped' \| 'minimal' | 'default' | Výkonnostní mód |
|
|
67
|
+
| `disableVisibilityOptimization` | boolean | false | Vypne auto-pause |
|
|
68
|
+
| `disabled` | boolean | false | Zakázat tlačítko |
|
|
69
|
+
|
|
70
|
+
## 📈 Benchmark výsledky
|
|
71
|
+
|
|
72
|
+
Test: 10 tlačítek na stránce, Chrome DevTools Performance
|
|
73
|
+
|
|
74
|
+
| Mód | Idle CPU | Active CPU | Paint Time | Frame Drops |
|
|
75
|
+
|-----|----------|------------|------------|-------------|
|
|
76
|
+
| Default | 0% | ~30% | 3-4ms | Vzácné |
|
|
77
|
+
| Stepped | 0% | ~12% | 1-2ms | Velmi vzácné |
|
|
78
|
+
| Minimal | 0% | ~5% | <1ms | Žádné |
|
|
79
|
+
|
|
80
|
+
## 💡 Doporučení
|
|
81
|
+
|
|
82
|
+
**Použij `default`** když:
|
|
83
|
+
- Máš 1-2 tlačítka na stránce
|
|
84
|
+
- Chceš nejlepší vizuální zážitek
|
|
85
|
+
- Výkon není kritický
|
|
86
|
+
|
|
87
|
+
**Použij `stepped`** když:
|
|
88
|
+
- Máš 3-5 tlačítek
|
|
89
|
+
- Vyvažuješ vzhled a výkon
|
|
90
|
+
- Mobilní zařízení (střední výkon)
|
|
91
|
+
|
|
92
|
+
**Použij `minimal`** když:
|
|
93
|
+
- Máš 5+ tlačítek
|
|
94
|
+
- Výkon je priorita
|
|
95
|
+
- Starší/slabší zařízení
|
|
96
|
+
- Baterie je kritická (mobilní)
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# AI Rainbow Button - Optimalizované výkonnostní módy
|
|
2
|
+
|
|
3
|
+
## 🚀 Použití
|
|
4
|
+
|
|
5
|
+
```jsx
|
|
6
|
+
import AIButton from '@bit.rhplus/ui2.ai-button/_src';
|
|
7
|
+
|
|
8
|
+
// Default mód - optimalizovaný, plynulý
|
|
9
|
+
<AIButton label="AI" onClick={handleClick} />
|
|
10
|
+
|
|
11
|
+
// Stepped mód - ~50-60% rychlejší
|
|
12
|
+
<AIButton
|
|
13
|
+
label="AI"
|
|
14
|
+
performanceMode="stepped"
|
|
15
|
+
onClick={handleClick}
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
// Minimal mód - ~70-80% rychlejší
|
|
19
|
+
<AIButton
|
|
20
|
+
label="AI"
|
|
21
|
+
performanceMode="minimal"
|
|
22
|
+
onClick={handleClick}
|
|
23
|
+
/>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 📊 Výkonnostní módy
|
|
27
|
+
|
|
28
|
+
### `performanceMode="default"`
|
|
29
|
+
- Plynulé animace (60fps)
|
|
30
|
+
- Box-shadow glow efekt
|
|
31
|
+
- Plný rainbow gradient
|
|
32
|
+
- **CPU zátěž:** ~3-6% (při zobrazení)
|
|
33
|
+
- **Doporučeno:** Jednotlivá tlačítka, hero sekce
|
|
34
|
+
|
|
35
|
+
### `performanceMode="stepped"`
|
|
36
|
+
- Skokové animace (24 kroků, ~15° rotace)
|
|
37
|
+
- Plný glow efekt
|
|
38
|
+
- Plný rainbow gradient
|
|
39
|
+
- **CPU zátěž:** ~1-2% (při zobrazení)
|
|
40
|
+
- **Doporučeno:** 2-5 tlačítek na stránce
|
|
41
|
+
|
|
42
|
+
### `performanceMode="minimal"`
|
|
43
|
+
- Velmi skokové animace (12 kroků, ~30° rotace)
|
|
44
|
+
- BEZ glow efektu
|
|
45
|
+
- Zjednodušený gradient (4 barvy)
|
|
46
|
+
- **CPU zátěž:** ~0.5-1% (při zobrazení)
|
|
47
|
+
- **Doporučeno:** 5+ tlačítek, mobilní zařízení
|
|
48
|
+
|
|
49
|
+
## ⚡ Automatické optimalizace
|
|
50
|
+
|
|
51
|
+
Všechny módy automaticky:
|
|
52
|
+
- ✅ Pausují animace mimo viewport (0% CPU)
|
|
53
|
+
- ✅ GPU akcelerace (will-change, translateZ)
|
|
54
|
+
- ✅ CSS containment
|
|
55
|
+
- ✅ React.memo (prevence re-renderů)
|
|
56
|
+
- ✅ Respektují `prefers-reduced-motion`
|
|
57
|
+
|
|
58
|
+
## 🎨 Props
|
|
59
|
+
|
|
60
|
+
| Prop | Typ | Default | Popis |
|
|
61
|
+
|------|-----|---------|-------|
|
|
62
|
+
| `label` | string | 'AI' | Text na tlačítku |
|
|
63
|
+
| `onClick` | function | - | Click handler |
|
|
64
|
+
| `size` | string/number | '110px' | Velikost |
|
|
65
|
+
| `ring` | string/number | '10px' | Tloušťka prstence |
|
|
66
|
+
| `performanceMode` | 'default' \| 'stepped' \| 'minimal' | 'default' | Výkonnostní mód |
|
|
67
|
+
| `disableVisibilityOptimization` | boolean | false | Vypne auto-pause |
|
|
68
|
+
| `disabled` | boolean | false | Zakázat tlačítko |
|
|
69
|
+
|
|
70
|
+
## 📈 Benchmark výsledky
|
|
71
|
+
|
|
72
|
+
Test: 10 tlačítek na stránce, Chrome DevTools Performance
|
|
73
|
+
|
|
74
|
+
| Mód | Idle CPU | Active CPU | Paint Time | Frame Drops |
|
|
75
|
+
|-----|----------|------------|------------|-------------|
|
|
76
|
+
| Default | 0% | ~30% | 3-4ms | Vzácné |
|
|
77
|
+
| Stepped | 0% | ~12% | 1-2ms | Velmi vzácné |
|
|
78
|
+
| Minimal | 0% | ~5% | <1ms | Žádné |
|
|
79
|
+
|
|
80
|
+
## 💡 Doporučení
|
|
81
|
+
|
|
82
|
+
**Použij `default`** když:
|
|
83
|
+
- Máš 1-2 tlačítka na stránce
|
|
84
|
+
- Chceš nejlepší vizuální zážitek
|
|
85
|
+
- Výkon není kritický
|
|
86
|
+
|
|
87
|
+
**Použij `stepped`** když:
|
|
88
|
+
- Máš 3-5 tlačítek
|
|
89
|
+
- Vyvažuješ vzhled a výkon
|
|
90
|
+
- Mobilní zařízení (střední výkon)
|
|
91
|
+
|
|
92
|
+
**Použij `minimal`** když:
|
|
93
|
+
- Máš 5+ tlačítek
|
|
94
|
+
- Výkon je priorita
|
|
95
|
+
- Starší/slabší zařízení
|
|
96
|
+
- Baterie je kritická (mobilní)
|
package/dist/style.css
CHANGED
|
@@ -1,202 +1,202 @@
|
|
|
1
|
-
/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
|
|
2
|
-
/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
|
|
3
|
-
|
|
4
|
-
.ai-btn {
|
|
5
|
-
/* CSS proměnné - lze přepsat pomocí inline style */
|
|
6
|
-
--size: 110px;
|
|
7
|
-
--ring: 10px;
|
|
8
|
-
--bg: #ffffff;
|
|
9
|
-
--text: rgba(20, 20, 20, 0.92);
|
|
10
|
-
|
|
11
|
-
/* Sdílený gradient - použije se vícekrát */
|
|
12
|
-
--rainbow-gradient: conic-gradient(
|
|
13
|
-
from 0deg,
|
|
14
|
-
#ff004c,
|
|
15
|
-
#ff8a00,
|
|
16
|
-
#ffe600,
|
|
17
|
-
#35ff7a,
|
|
18
|
-
#00d4ff,
|
|
19
|
-
#6a5cff,
|
|
20
|
-
#ff4fd8,
|
|
21
|
-
#ff004c
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
position: relative;
|
|
25
|
-
width: var(--size);
|
|
26
|
-
height: var(--size);
|
|
27
|
-
border: 0;
|
|
28
|
-
border-radius: 999px;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
background: transparent;
|
|
31
|
-
padding: 0;
|
|
32
|
-
outline: none;
|
|
33
|
-
-webkit-tap-highlight-color: transparent;
|
|
34
|
-
|
|
35
|
-
/* GPU akcelerace + containment pro izolaci */
|
|
36
|
-
transform: translateZ(0);
|
|
37
|
-
will-change: transform;
|
|
38
|
-
contain: layout style paint;
|
|
39
|
-
transition: transform 0.15s ease;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.ai-btn:disabled {
|
|
43
|
-
cursor: not-allowed;
|
|
44
|
-
opacity: 0.5;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* Duhový rotující prstenec */
|
|
48
|
-
.ai-btn::before {
|
|
49
|
-
content: '';
|
|
50
|
-
position: absolute;
|
|
51
|
-
inset: 0;
|
|
52
|
-
border-radius: inherit;
|
|
53
|
-
|
|
54
|
-
/* Použití sdíleného gradientu */
|
|
55
|
-
background: var(--rainbow-gradient);
|
|
56
|
-
|
|
57
|
-
/* Vyříznutí vnitřku => prstenec */
|
|
58
|
-
-webkit-mask: radial-gradient(
|
|
59
|
-
closest-side,
|
|
60
|
-
transparent calc(100% - var(--ring)),
|
|
61
|
-
#000 calc(100% - var(--ring) + 1px)
|
|
62
|
-
);
|
|
63
|
-
mask: radial-gradient(
|
|
64
|
-
closest-side,
|
|
65
|
-
transparent calc(100% - var(--ring)),
|
|
66
|
-
#000 calc(100% - var(--ring) + 1px)
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
/* GPU akcelerace pro rotaci */
|
|
70
|
-
transform: translateZ(0);
|
|
71
|
-
will-change: transform;
|
|
72
|
-
|
|
73
|
-
/* Animace "točení" barev */
|
|
74
|
-
animation: ai-btn-spin 3.2s linear infinite;
|
|
75
|
-
filter: saturate(1.15) brightness(1.05);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.ai-btn:disabled::before {
|
|
79
|
-
animation: none;
|
|
80
|
-
filter: saturate(0.5) brightness(0.8);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
|
|
84
|
-
.ai-btn::after {
|
|
85
|
-
content: '';
|
|
86
|
-
position: absolute;
|
|
87
|
-
inset: 0;
|
|
88
|
-
border-radius: inherit;
|
|
89
|
-
|
|
90
|
-
/* Použití sdíleného gradientu */
|
|
91
|
-
background: var(--rainbow-gradient);
|
|
92
|
-
|
|
93
|
-
/* GPU akcelerace */
|
|
94
|
-
transform: translateZ(0);
|
|
95
|
-
will-change: transform, opacity;
|
|
96
|
-
|
|
97
|
-
/* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
|
|
98
|
-
box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
|
|
99
|
-
0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
|
|
100
|
-
0 0 90px 35px rgba(106, 92, 255, 0.2);
|
|
101
|
-
|
|
102
|
-
/* Sloučená animace pro lepší výkon */
|
|
103
|
-
animation: ai-btn-glow 3.2s linear infinite;
|
|
104
|
-
opacity: 0.35;
|
|
105
|
-
pointer-events: none;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.ai-btn:disabled::after {
|
|
109
|
-
animation: none;
|
|
110
|
-
opacity: 0.15;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
|
|
114
|
-
.ai-btn.ai-btn-paused::before,
|
|
115
|
-
.ai-btn.ai-btn-paused::after {
|
|
116
|
-
animation-play-state: paused;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* Vnitřek tlačítka */
|
|
120
|
-
.ai-inner {
|
|
121
|
-
position: absolute;
|
|
122
|
-
inset: var(--ring);
|
|
123
|
-
border-radius: inherit;
|
|
124
|
-
background: radial-gradient(
|
|
125
|
-
120% 120% at 30% 20%,
|
|
126
|
-
rgba(255, 255, 255, 1) 0%,
|
|
127
|
-
rgba(250, 250, 250, 1) 40%,
|
|
128
|
-
rgba(240, 242, 245, 1) 80%,
|
|
129
|
-
rgba(235, 237, 240, 1) 100%
|
|
130
|
-
);
|
|
131
|
-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
|
|
132
|
-
inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
133
|
-
display: grid;
|
|
134
|
-
place-items: center;
|
|
135
|
-
user-select: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.ai-label {
|
|
139
|
-
font-weight: 700;
|
|
140
|
-
letter-spacing: 0.08em;
|
|
141
|
-
font-size: 14px;
|
|
142
|
-
text-transform: uppercase;
|
|
143
|
-
color: var(--text);
|
|
144
|
-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/* Hover efekt */
|
|
148
|
-
.ai-btn:hover:not(:disabled) {
|
|
149
|
-
transform: translateZ(0) scale(1.03);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* Active (stisknuté) */
|
|
153
|
-
.ai-btn:active:not(:disabled) {
|
|
154
|
-
transform: translateZ(0) scale(0.98);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
/* Focus - accessibility */
|
|
158
|
-
.ai-btn:focus-visible .ai-inner {
|
|
159
|
-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
160
|
-
inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
|
|
161
|
-
0 0 0 3px rgba(255, 255, 255, 0.16);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
/* Animace - rotace */
|
|
165
|
-
@keyframes ai-btn-spin {
|
|
166
|
-
to {
|
|
167
|
-
transform: translateZ(0) rotate(360deg);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
|
|
172
|
-
@keyframes ai-btn-glow {
|
|
173
|
-
0% {
|
|
174
|
-
transform: translateZ(0) rotate(0deg);
|
|
175
|
-
opacity: 0.28;
|
|
176
|
-
}
|
|
177
|
-
25% {
|
|
178
|
-
opacity: 0.38;
|
|
179
|
-
}
|
|
180
|
-
50% {
|
|
181
|
-
transform: translateZ(0) rotate(180deg);
|
|
182
|
-
opacity: 0.46;
|
|
183
|
-
}
|
|
184
|
-
75% {
|
|
185
|
-
opacity: 0.38;
|
|
186
|
-
}
|
|
187
|
-
100% {
|
|
188
|
-
transform: translateZ(0) rotate(360deg);
|
|
189
|
-
opacity: 0.28;
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
/* Respektovat uživatelské preference pro redukci pohybu */
|
|
194
|
-
@media (prefers-reduced-motion: reduce) {
|
|
195
|
-
.ai-btn::before,
|
|
196
|
-
.ai-btn::after {
|
|
197
|
-
animation: none;
|
|
198
|
-
}
|
|
199
|
-
.ai-btn {
|
|
200
|
-
transition: none;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
1
|
+
/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
|
|
2
|
+
/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
|
|
3
|
+
|
|
4
|
+
.ai-btn {
|
|
5
|
+
/* CSS proměnné - lze přepsat pomocí inline style */
|
|
6
|
+
--size: 110px;
|
|
7
|
+
--ring: 10px;
|
|
8
|
+
--bg: #ffffff;
|
|
9
|
+
--text: rgba(20, 20, 20, 0.92);
|
|
10
|
+
|
|
11
|
+
/* Sdílený gradient - použije se vícekrát */
|
|
12
|
+
--rainbow-gradient: conic-gradient(
|
|
13
|
+
from 0deg,
|
|
14
|
+
#ff004c,
|
|
15
|
+
#ff8a00,
|
|
16
|
+
#ffe600,
|
|
17
|
+
#35ff7a,
|
|
18
|
+
#00d4ff,
|
|
19
|
+
#6a5cff,
|
|
20
|
+
#ff4fd8,
|
|
21
|
+
#ff004c
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
position: relative;
|
|
25
|
+
width: var(--size);
|
|
26
|
+
height: var(--size);
|
|
27
|
+
border: 0;
|
|
28
|
+
border-radius: 999px;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
background: transparent;
|
|
31
|
+
padding: 0;
|
|
32
|
+
outline: none;
|
|
33
|
+
-webkit-tap-highlight-color: transparent;
|
|
34
|
+
|
|
35
|
+
/* GPU akcelerace + containment pro izolaci */
|
|
36
|
+
transform: translateZ(0);
|
|
37
|
+
will-change: transform;
|
|
38
|
+
contain: layout style paint;
|
|
39
|
+
transition: transform 0.15s ease;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ai-btn:disabled {
|
|
43
|
+
cursor: not-allowed;
|
|
44
|
+
opacity: 0.5;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Duhový rotující prstenec */
|
|
48
|
+
.ai-btn::before {
|
|
49
|
+
content: '';
|
|
50
|
+
position: absolute;
|
|
51
|
+
inset: 0;
|
|
52
|
+
border-radius: inherit;
|
|
53
|
+
|
|
54
|
+
/* Použití sdíleného gradientu */
|
|
55
|
+
background: var(--rainbow-gradient);
|
|
56
|
+
|
|
57
|
+
/* Vyříznutí vnitřku => prstenec */
|
|
58
|
+
-webkit-mask: radial-gradient(
|
|
59
|
+
closest-side,
|
|
60
|
+
transparent calc(100% - var(--ring)),
|
|
61
|
+
#000 calc(100% - var(--ring) + 1px)
|
|
62
|
+
);
|
|
63
|
+
mask: radial-gradient(
|
|
64
|
+
closest-side,
|
|
65
|
+
transparent calc(100% - var(--ring)),
|
|
66
|
+
#000 calc(100% - var(--ring) + 1px)
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
/* GPU akcelerace pro rotaci */
|
|
70
|
+
transform: translateZ(0);
|
|
71
|
+
will-change: transform;
|
|
72
|
+
|
|
73
|
+
/* Animace "točení" barev */
|
|
74
|
+
animation: ai-btn-spin 3.2s linear infinite;
|
|
75
|
+
filter: saturate(1.15) brightness(1.05);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ai-btn:disabled::before {
|
|
79
|
+
animation: none;
|
|
80
|
+
filter: saturate(0.5) brightness(0.8);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
|
|
84
|
+
.ai-btn::after {
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
inset: 0;
|
|
88
|
+
border-radius: inherit;
|
|
89
|
+
|
|
90
|
+
/* Použití sdíleného gradientu */
|
|
91
|
+
background: var(--rainbow-gradient);
|
|
92
|
+
|
|
93
|
+
/* GPU akcelerace */
|
|
94
|
+
transform: translateZ(0);
|
|
95
|
+
will-change: transform, opacity;
|
|
96
|
+
|
|
97
|
+
/* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
|
|
98
|
+
box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
|
|
99
|
+
0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
|
|
100
|
+
0 0 90px 35px rgba(106, 92, 255, 0.2);
|
|
101
|
+
|
|
102
|
+
/* Sloučená animace pro lepší výkon */
|
|
103
|
+
animation: ai-btn-glow 3.2s linear infinite;
|
|
104
|
+
opacity: 0.35;
|
|
105
|
+
pointer-events: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.ai-btn:disabled::after {
|
|
109
|
+
animation: none;
|
|
110
|
+
opacity: 0.15;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
|
|
114
|
+
.ai-btn.ai-btn-paused::before,
|
|
115
|
+
.ai-btn.ai-btn-paused::after {
|
|
116
|
+
animation-play-state: paused;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Vnitřek tlačítka */
|
|
120
|
+
.ai-inner {
|
|
121
|
+
position: absolute;
|
|
122
|
+
inset: var(--ring);
|
|
123
|
+
border-radius: inherit;
|
|
124
|
+
background: radial-gradient(
|
|
125
|
+
120% 120% at 30% 20%,
|
|
126
|
+
rgba(255, 255, 255, 1) 0%,
|
|
127
|
+
rgba(250, 250, 250, 1) 40%,
|
|
128
|
+
rgba(240, 242, 245, 1) 80%,
|
|
129
|
+
rgba(235, 237, 240, 1) 100%
|
|
130
|
+
);
|
|
131
|
+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
|
|
132
|
+
inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
133
|
+
display: grid;
|
|
134
|
+
place-items: center;
|
|
135
|
+
user-select: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.ai-label {
|
|
139
|
+
font-weight: 700;
|
|
140
|
+
letter-spacing: 0.08em;
|
|
141
|
+
font-size: 14px;
|
|
142
|
+
text-transform: uppercase;
|
|
143
|
+
color: var(--text);
|
|
144
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Hover efekt */
|
|
148
|
+
.ai-btn:hover:not(:disabled) {
|
|
149
|
+
transform: translateZ(0) scale(1.03);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Active (stisknuté) */
|
|
153
|
+
.ai-btn:active:not(:disabled) {
|
|
154
|
+
transform: translateZ(0) scale(0.98);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Focus - accessibility */
|
|
158
|
+
.ai-btn:focus-visible .ai-inner {
|
|
159
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
160
|
+
inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
|
|
161
|
+
0 0 0 3px rgba(255, 255, 255, 0.16);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Animace - rotace */
|
|
165
|
+
@keyframes ai-btn-spin {
|
|
166
|
+
to {
|
|
167
|
+
transform: translateZ(0) rotate(360deg);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
|
|
172
|
+
@keyframes ai-btn-glow {
|
|
173
|
+
0% {
|
|
174
|
+
transform: translateZ(0) rotate(0deg);
|
|
175
|
+
opacity: 0.28;
|
|
176
|
+
}
|
|
177
|
+
25% {
|
|
178
|
+
opacity: 0.38;
|
|
179
|
+
}
|
|
180
|
+
50% {
|
|
181
|
+
transform: translateZ(0) rotate(180deg);
|
|
182
|
+
opacity: 0.46;
|
|
183
|
+
}
|
|
184
|
+
75% {
|
|
185
|
+
opacity: 0.38;
|
|
186
|
+
}
|
|
187
|
+
100% {
|
|
188
|
+
transform: translateZ(0) rotate(360deg);
|
|
189
|
+
opacity: 0.28;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Respektovat uživatelské preference pro redukci pohybu */
|
|
194
|
+
@media (prefers-reduced-motion: reduce) {
|
|
195
|
+
.ai-btn::before,
|
|
196
|
+
.ai-btn::after {
|
|
197
|
+
animation: none;
|
|
198
|
+
}
|
|
199
|
+
.ai-btn {
|
|
200
|
+
transition: none;
|
|
201
|
+
}
|
|
202
|
+
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/ui2.ai-button",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/ui2/ai-button",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "ui2/ai-button",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.3"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"classnames": "^2.5.1"
|
package/style.css
CHANGED
|
@@ -1,202 +1,202 @@
|
|
|
1
|
-
/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
|
|
2
|
-
/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
|
|
3
|
-
|
|
4
|
-
.ai-btn {
|
|
5
|
-
/* CSS proměnné - lze přepsat pomocí inline style */
|
|
6
|
-
--size: 110px;
|
|
7
|
-
--ring: 10px;
|
|
8
|
-
--bg: #ffffff;
|
|
9
|
-
--text: rgba(20, 20, 20, 0.92);
|
|
10
|
-
|
|
11
|
-
/* Sdílený gradient - použije se vícekrát */
|
|
12
|
-
--rainbow-gradient: conic-gradient(
|
|
13
|
-
from 0deg,
|
|
14
|
-
#ff004c,
|
|
15
|
-
#ff8a00,
|
|
16
|
-
#ffe600,
|
|
17
|
-
#35ff7a,
|
|
18
|
-
#00d4ff,
|
|
19
|
-
#6a5cff,
|
|
20
|
-
#ff4fd8,
|
|
21
|
-
#ff004c
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
position: relative;
|
|
25
|
-
width: var(--size);
|
|
26
|
-
height: var(--size);
|
|
27
|
-
border: 0;
|
|
28
|
-
border-radius: 999px;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
background: transparent;
|
|
31
|
-
padding: 0;
|
|
32
|
-
outline: none;
|
|
33
|
-
-webkit-tap-highlight-color: transparent;
|
|
34
|
-
|
|
35
|
-
/* GPU akcelerace + containment pro izolaci */
|
|
36
|
-
transform: translateZ(0);
|
|
37
|
-
will-change: transform;
|
|
38
|
-
contain: layout style paint;
|
|
39
|
-
transition: transform 0.15s ease;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.ai-btn:disabled {
|
|
43
|
-
cursor: not-allowed;
|
|
44
|
-
opacity: 0.5;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* Duhový rotující prstenec */
|
|
48
|
-
.ai-btn::before {
|
|
49
|
-
content: '';
|
|
50
|
-
position: absolute;
|
|
51
|
-
inset: 0;
|
|
52
|
-
border-radius: inherit;
|
|
53
|
-
|
|
54
|
-
/* Použití sdíleného gradientu */
|
|
55
|
-
background: var(--rainbow-gradient);
|
|
56
|
-
|
|
57
|
-
/* Vyříznutí vnitřku => prstenec */
|
|
58
|
-
-webkit-mask: radial-gradient(
|
|
59
|
-
closest-side,
|
|
60
|
-
transparent calc(100% - var(--ring)),
|
|
61
|
-
#000 calc(100% - var(--ring) + 1px)
|
|
62
|
-
);
|
|
63
|
-
mask: radial-gradient(
|
|
64
|
-
closest-side,
|
|
65
|
-
transparent calc(100% - var(--ring)),
|
|
66
|
-
#000 calc(100% - var(--ring) + 1px)
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
/* GPU akcelerace pro rotaci */
|
|
70
|
-
transform: translateZ(0);
|
|
71
|
-
will-change: transform;
|
|
72
|
-
|
|
73
|
-
/* Animace "točení" barev */
|
|
74
|
-
animation: ai-btn-spin 3.2s linear infinite;
|
|
75
|
-
filter: saturate(1.15) brightness(1.05);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.ai-btn:disabled::before {
|
|
79
|
-
animation: none;
|
|
80
|
-
filter: saturate(0.5) brightness(0.8);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
|
|
84
|
-
.ai-btn::after {
|
|
85
|
-
content: '';
|
|
86
|
-
position: absolute;
|
|
87
|
-
inset: 0;
|
|
88
|
-
border-radius: inherit;
|
|
89
|
-
|
|
90
|
-
/* Použití sdíleného gradientu */
|
|
91
|
-
background: var(--rainbow-gradient);
|
|
92
|
-
|
|
93
|
-
/* GPU akcelerace */
|
|
94
|
-
transform: translateZ(0);
|
|
95
|
-
will-change: transform, opacity;
|
|
96
|
-
|
|
97
|
-
/* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
|
|
98
|
-
box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
|
|
99
|
-
0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
|
|
100
|
-
0 0 90px 35px rgba(106, 92, 255, 0.2);
|
|
101
|
-
|
|
102
|
-
/* Sloučená animace pro lepší výkon */
|
|
103
|
-
animation: ai-btn-glow 3.2s linear infinite;
|
|
104
|
-
opacity: 0.35;
|
|
105
|
-
pointer-events: none;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.ai-btn:disabled::after {
|
|
109
|
-
animation: none;
|
|
110
|
-
opacity: 0.15;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
|
|
114
|
-
.ai-btn.ai-btn-paused::before,
|
|
115
|
-
.ai-btn.ai-btn-paused::after {
|
|
116
|
-
animation-play-state: paused;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* Vnitřek tlačítka */
|
|
120
|
-
.ai-inner {
|
|
121
|
-
position: absolute;
|
|
122
|
-
inset: var(--ring);
|
|
123
|
-
border-radius: inherit;
|
|
124
|
-
background: radial-gradient(
|
|
125
|
-
120% 120% at 30% 20%,
|
|
126
|
-
rgba(255, 255, 255, 1) 0%,
|
|
127
|
-
rgba(250, 250, 250, 1) 40%,
|
|
128
|
-
rgba(240, 242, 245, 1) 80%,
|
|
129
|
-
rgba(235, 237, 240, 1) 100%
|
|
130
|
-
);
|
|
131
|
-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
|
|
132
|
-
inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
133
|
-
display: grid;
|
|
134
|
-
place-items: center;
|
|
135
|
-
user-select: none;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.ai-label {
|
|
139
|
-
font-weight: 700;
|
|
140
|
-
letter-spacing: 0.08em;
|
|
141
|
-
font-size: 14px;
|
|
142
|
-
text-transform: uppercase;
|
|
143
|
-
color: var(--text);
|
|
144
|
-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/* Hover efekt */
|
|
148
|
-
.ai-btn:hover:not(:disabled) {
|
|
149
|
-
transform: translateZ(0) scale(1.03);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* Active (stisknuté) */
|
|
153
|
-
.ai-btn:active:not(:disabled) {
|
|
154
|
-
transform: translateZ(0) scale(0.98);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
/* Focus - accessibility */
|
|
158
|
-
.ai-btn:focus-visible .ai-inner {
|
|
159
|
-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
160
|
-
inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
|
|
161
|
-
0 0 0 3px rgba(255, 255, 255, 0.16);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
/* Animace - rotace */
|
|
165
|
-
@keyframes ai-btn-spin {
|
|
166
|
-
to {
|
|
167
|
-
transform: translateZ(0) rotate(360deg);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
|
|
172
|
-
@keyframes ai-btn-glow {
|
|
173
|
-
0% {
|
|
174
|
-
transform: translateZ(0) rotate(0deg);
|
|
175
|
-
opacity: 0.28;
|
|
176
|
-
}
|
|
177
|
-
25% {
|
|
178
|
-
opacity: 0.38;
|
|
179
|
-
}
|
|
180
|
-
50% {
|
|
181
|
-
transform: translateZ(0) rotate(180deg);
|
|
182
|
-
opacity: 0.46;
|
|
183
|
-
}
|
|
184
|
-
75% {
|
|
185
|
-
opacity: 0.38;
|
|
186
|
-
}
|
|
187
|
-
100% {
|
|
188
|
-
transform: translateZ(0) rotate(360deg);
|
|
189
|
-
opacity: 0.28;
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
/* Respektovat uživatelské preference pro redukci pohybu */
|
|
194
|
-
@media (prefers-reduced-motion: reduce) {
|
|
195
|
-
.ai-btn::before,
|
|
196
|
-
.ai-btn::after {
|
|
197
|
-
animation: none;
|
|
198
|
-
}
|
|
199
|
-
.ai-btn {
|
|
200
|
-
transition: none;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
1
|
+
/* AI Rainbow Button - Duhové tlačítko s rotujícím prstencem */
|
|
2
|
+
/* OPTIMALIZOVÁNO PRO MAXIMÁLNÍ VÝKON */
|
|
3
|
+
|
|
4
|
+
.ai-btn {
|
|
5
|
+
/* CSS proměnné - lze přepsat pomocí inline style */
|
|
6
|
+
--size: 110px;
|
|
7
|
+
--ring: 10px;
|
|
8
|
+
--bg: #ffffff;
|
|
9
|
+
--text: rgba(20, 20, 20, 0.92);
|
|
10
|
+
|
|
11
|
+
/* Sdílený gradient - použije se vícekrát */
|
|
12
|
+
--rainbow-gradient: conic-gradient(
|
|
13
|
+
from 0deg,
|
|
14
|
+
#ff004c,
|
|
15
|
+
#ff8a00,
|
|
16
|
+
#ffe600,
|
|
17
|
+
#35ff7a,
|
|
18
|
+
#00d4ff,
|
|
19
|
+
#6a5cff,
|
|
20
|
+
#ff4fd8,
|
|
21
|
+
#ff004c
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
position: relative;
|
|
25
|
+
width: var(--size);
|
|
26
|
+
height: var(--size);
|
|
27
|
+
border: 0;
|
|
28
|
+
border-radius: 999px;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
background: transparent;
|
|
31
|
+
padding: 0;
|
|
32
|
+
outline: none;
|
|
33
|
+
-webkit-tap-highlight-color: transparent;
|
|
34
|
+
|
|
35
|
+
/* GPU akcelerace + containment pro izolaci */
|
|
36
|
+
transform: translateZ(0);
|
|
37
|
+
will-change: transform;
|
|
38
|
+
contain: layout style paint;
|
|
39
|
+
transition: transform 0.15s ease;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ai-btn:disabled {
|
|
43
|
+
cursor: not-allowed;
|
|
44
|
+
opacity: 0.5;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Duhový rotující prstenec */
|
|
48
|
+
.ai-btn::before {
|
|
49
|
+
content: '';
|
|
50
|
+
position: absolute;
|
|
51
|
+
inset: 0;
|
|
52
|
+
border-radius: inherit;
|
|
53
|
+
|
|
54
|
+
/* Použití sdíleného gradientu */
|
|
55
|
+
background: var(--rainbow-gradient);
|
|
56
|
+
|
|
57
|
+
/* Vyříznutí vnitřku => prstenec */
|
|
58
|
+
-webkit-mask: radial-gradient(
|
|
59
|
+
closest-side,
|
|
60
|
+
transparent calc(100% - var(--ring)),
|
|
61
|
+
#000 calc(100% - var(--ring) + 1px)
|
|
62
|
+
);
|
|
63
|
+
mask: radial-gradient(
|
|
64
|
+
closest-side,
|
|
65
|
+
transparent calc(100% - var(--ring)),
|
|
66
|
+
#000 calc(100% - var(--ring) + 1px)
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
/* GPU akcelerace pro rotaci */
|
|
70
|
+
transform: translateZ(0);
|
|
71
|
+
will-change: transform;
|
|
72
|
+
|
|
73
|
+
/* Animace "točení" barev */
|
|
74
|
+
animation: ai-btn-spin 3.2s linear infinite;
|
|
75
|
+
filter: saturate(1.15) brightness(1.05);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ai-btn:disabled::before {
|
|
79
|
+
animation: none;
|
|
80
|
+
filter: saturate(0.5) brightness(0.8);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Glow aura kolem tlačítka - OPTIMALIZOVÁNO: box-shadow místo blur */
|
|
84
|
+
.ai-btn::after {
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
inset: 0;
|
|
88
|
+
border-radius: inherit;
|
|
89
|
+
|
|
90
|
+
/* Použití sdíleného gradientu */
|
|
91
|
+
background: var(--rainbow-gradient);
|
|
92
|
+
|
|
93
|
+
/* GPU akcelerace */
|
|
94
|
+
transform: translateZ(0);
|
|
95
|
+
will-change: transform, opacity;
|
|
96
|
+
|
|
97
|
+
/* Box-shadow glow místo blur filter (MNOHEM rychlejší) */
|
|
98
|
+
box-shadow: 0 0 30px 12px rgba(255, 0, 76, 0.4),
|
|
99
|
+
0 0 50px 20px rgba(255, 138, 0, 0.3), 0 0 70px 28px rgba(0, 212, 255, 0.25),
|
|
100
|
+
0 0 90px 35px rgba(106, 92, 255, 0.2);
|
|
101
|
+
|
|
102
|
+
/* Sloučená animace pro lepší výkon */
|
|
103
|
+
animation: ai-btn-glow 3.2s linear infinite;
|
|
104
|
+
opacity: 0.35;
|
|
105
|
+
pointer-events: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.ai-btn:disabled::after {
|
|
109
|
+
animation: none;
|
|
110
|
+
opacity: 0.15;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Pausnutí animací když není viditelné - řízeno IntersectionObserver */
|
|
114
|
+
.ai-btn.ai-btn-paused::before,
|
|
115
|
+
.ai-btn.ai-btn-paused::after {
|
|
116
|
+
animation-play-state: paused;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Vnitřek tlačítka */
|
|
120
|
+
.ai-inner {
|
|
121
|
+
position: absolute;
|
|
122
|
+
inset: var(--ring);
|
|
123
|
+
border-radius: inherit;
|
|
124
|
+
background: radial-gradient(
|
|
125
|
+
120% 120% at 30% 20%,
|
|
126
|
+
rgba(255, 255, 255, 1) 0%,
|
|
127
|
+
rgba(250, 250, 250, 1) 40%,
|
|
128
|
+
rgba(240, 242, 245, 1) 80%,
|
|
129
|
+
rgba(235, 237, 240, 1) 100%
|
|
130
|
+
);
|
|
131
|
+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08),
|
|
132
|
+
inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
133
|
+
display: grid;
|
|
134
|
+
place-items: center;
|
|
135
|
+
user-select: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.ai-label {
|
|
139
|
+
font-weight: 700;
|
|
140
|
+
letter-spacing: 0.08em;
|
|
141
|
+
font-size: 14px;
|
|
142
|
+
text-transform: uppercase;
|
|
143
|
+
color: var(--text);
|
|
144
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Hover efekt */
|
|
148
|
+
.ai-btn:hover:not(:disabled) {
|
|
149
|
+
transform: translateZ(0) scale(1.03);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Active (stisknuté) */
|
|
153
|
+
.ai-btn:active:not(:disabled) {
|
|
154
|
+
transform: translateZ(0) scale(0.98);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Focus - accessibility */
|
|
158
|
+
.ai-btn:focus-visible .ai-inner {
|
|
159
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
|
160
|
+
inset 0 -10px 30px rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.35),
|
|
161
|
+
0 0 0 3px rgba(255, 255, 255, 0.16);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* Animace - rotace */
|
|
165
|
+
@keyframes ai-btn-spin {
|
|
166
|
+
to {
|
|
167
|
+
transform: translateZ(0) rotate(360deg);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Animace - sloučená glow (spin + breathe) pro lepší výkon */
|
|
172
|
+
@keyframes ai-btn-glow {
|
|
173
|
+
0% {
|
|
174
|
+
transform: translateZ(0) rotate(0deg);
|
|
175
|
+
opacity: 0.28;
|
|
176
|
+
}
|
|
177
|
+
25% {
|
|
178
|
+
opacity: 0.38;
|
|
179
|
+
}
|
|
180
|
+
50% {
|
|
181
|
+
transform: translateZ(0) rotate(180deg);
|
|
182
|
+
opacity: 0.46;
|
|
183
|
+
}
|
|
184
|
+
75% {
|
|
185
|
+
opacity: 0.38;
|
|
186
|
+
}
|
|
187
|
+
100% {
|
|
188
|
+
transform: translateZ(0) rotate(360deg);
|
|
189
|
+
opacity: 0.28;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Respektovat uživatelské preference pro redukci pohybu */
|
|
194
|
+
@media (prefers-reduced-motion: reduce) {
|
|
195
|
+
.ai-btn::before,
|
|
196
|
+
.ai-btn::after {
|
|
197
|
+
animation: none;
|
|
198
|
+
}
|
|
199
|
+
.ai-btn {
|
|
200
|
+
transition: none;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
File without changes
|