@aslaluroba/help-center 4.0.2 → 4.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 +51 -0
- package/package.json +1 -1
- package/styles/styles.css +214 -0
- package/styles/styles.scss +307 -0
package/README.md
CHANGED
|
@@ -9,6 +9,55 @@ yarn add @aslaluroba/help-center
|
|
|
9
9
|
npm install @aslaluroba/help-center
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
+
## Styles Setup
|
|
13
|
+
|
|
14
|
+
**Important:** You must import the library's styles in your application for the widget to display correctly.
|
|
15
|
+
|
|
16
|
+
The library provides both CSS and SCSS versions of the stylesheet. Choose the option that works best for your project:
|
|
17
|
+
|
|
18
|
+
### Option 1: Import CSS file (Recommended - Simpler)
|
|
19
|
+
|
|
20
|
+
Add this import to your application's main `styles.css` or `styles.scss` file:
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
@import '@aslaluroba/help-center/styles/styles.css';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Or add it to your `angular.json`:
|
|
27
|
+
|
|
28
|
+
```json
|
|
29
|
+
{
|
|
30
|
+
"projects": {
|
|
31
|
+
"your-app": {
|
|
32
|
+
"architect": {
|
|
33
|
+
"build": {
|
|
34
|
+
"options": {
|
|
35
|
+
"styles": [
|
|
36
|
+
"src/styles.scss",
|
|
37
|
+
"node_modules/@aslaluroba/help-center/styles/styles.css"
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Option 2: Import SCSS file (For advanced customization)
|
|
48
|
+
|
|
49
|
+
If you need to customize the styles or use SCSS features, import the SCSS version:
|
|
50
|
+
|
|
51
|
+
```scss
|
|
52
|
+
@import '@aslaluroba/help-center/styles/styles.scss';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Note:** The SCSS version includes Tailwind CSS v4 directives and requires PostCSS support in your build process. The CSS version is pre-compiled and ready to use.
|
|
56
|
+
|
|
57
|
+
📚 **Helpful Resources:**
|
|
58
|
+
- [Integration Example](./INTEGRATION_EXAMPLE.md) - Complete step-by-step integration guide
|
|
59
|
+
- [Stylesheet Export Guide](./STYLESHEET_EXPORT_GUIDE.md) - Detailed information about CSS vs SCSS options
|
|
60
|
+
|
|
12
61
|
## Setup and Configuration
|
|
13
62
|
|
|
14
63
|
1. Provide `ApiService` once (e.g., in `main.ts`) and use the standalone component in your app:
|
|
@@ -182,6 +231,8 @@ export class AppComponent {
|
|
|
182
231
|
|
|
183
232
|
## Theming and Customization
|
|
184
233
|
|
|
234
|
+
**Prerequisites:** Make sure you have imported the library styles as described in the [Styles Setup](#styles-setup) section above. The theming system relies on CSS variables defined in the stylesheet.
|
|
235
|
+
|
|
185
236
|
The help center widget supports dynamic theming through two main properties:
|
|
186
237
|
|
|
187
238
|
### Primary Color
|
package/package.json
CHANGED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2
|
+
:root {
|
|
3
|
+
--black-white-50: #ffffff;
|
|
4
|
+
--black-white-100: #f3f3f3;
|
|
5
|
+
--black-white-200: #e2e2e2;
|
|
6
|
+
--black-white-300: #919191;
|
|
7
|
+
--black-white-400: #606060;
|
|
8
|
+
--black-white-500: #333333;
|
|
9
|
+
--black-white-600: #1f1f1f;
|
|
10
|
+
--black-white-700: #171717;
|
|
11
|
+
--black-white-800: #0a0a0a;
|
|
12
|
+
--black-white-900: #050505;
|
|
13
|
+
--black-white-950: #000000;
|
|
14
|
+
--black-white-default: #333333;
|
|
15
|
+
--storm-dust: #3d3d3d;
|
|
16
|
+
--storm-dust-950: #262626;
|
|
17
|
+
--primary-color: #ad49e1;
|
|
18
|
+
--primary-color-100: #f6ecfc;
|
|
19
|
+
--primary-color-200: #deb6f3;
|
|
20
|
+
--primary-color-300: #d49cee;
|
|
21
|
+
--primary-color-400: #c57fea;
|
|
22
|
+
--primary-color-500: #ad49e1;
|
|
23
|
+
--primary-color-600: #672b87;
|
|
24
|
+
--primary-color-700: #451d5a;
|
|
25
|
+
--primary-color-800: #220e2d;
|
|
26
|
+
--primary-color-900: #110716;
|
|
27
|
+
--primary-color-950: #0a0310;
|
|
28
|
+
--background: #ffffff;
|
|
29
|
+
--foreground: #333333;
|
|
30
|
+
--card: #ffffff;
|
|
31
|
+
--card-foreground: #333333;
|
|
32
|
+
--popover: #ffffff;
|
|
33
|
+
--popover-foreground: #333333;
|
|
34
|
+
--secondary: #f3f3f3;
|
|
35
|
+
--secondary-foreground: #333333;
|
|
36
|
+
--muted: #f3f3f3;
|
|
37
|
+
--muted-foreground: #606060;
|
|
38
|
+
--accent: #f3f3f3;
|
|
39
|
+
--accent-foreground: #333333;
|
|
40
|
+
--destructive: #ef4444;
|
|
41
|
+
--destructive-foreground: #ffffff;
|
|
42
|
+
--border: #e2e2e2;
|
|
43
|
+
--input: #e2e2e2;
|
|
44
|
+
--ring: var(--primary-color);
|
|
45
|
+
--radius: 0.5rem;
|
|
46
|
+
}
|
|
47
|
+
:root, :host {
|
|
48
|
+
--font-sans: "Cairo", sans-serif;
|
|
49
|
+
}
|
|
50
|
+
button:focus-visible {
|
|
51
|
+
outline: 2px solid var(--ring);
|
|
52
|
+
outline-offset: 2px;
|
|
53
|
+
box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
|
|
54
|
+
}
|
|
55
|
+
a:focus-visible {
|
|
56
|
+
outline: 2px solid var(--ring);
|
|
57
|
+
outline-offset: 2px;
|
|
58
|
+
text-decoration: underline;
|
|
59
|
+
}
|
|
60
|
+
@media (prefers-contrast: high) {
|
|
61
|
+
:root {
|
|
62
|
+
--background: #ffffff;
|
|
63
|
+
--foreground: #000000;
|
|
64
|
+
--card: #ffffff;
|
|
65
|
+
--card-foreground: #000000;
|
|
66
|
+
--border: #000000;
|
|
67
|
+
--muted-foreground: #000000;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
@media (prefers-color-scheme: dark) {
|
|
71
|
+
:root {
|
|
72
|
+
--black-white-50: #000000;
|
|
73
|
+
--black-white-100: #050505;
|
|
74
|
+
--black-white-200: #0a0a0a;
|
|
75
|
+
--black-white-300: #171717;
|
|
76
|
+
--black-white-400: #1f1f1f;
|
|
77
|
+
--black-white-500: #333333;
|
|
78
|
+
--black-white-600: #606060;
|
|
79
|
+
--black-white-700: #919191;
|
|
80
|
+
--black-white-800: #e2e2e2;
|
|
81
|
+
--black-white-900: #f3f3f3;
|
|
82
|
+
--black-white-950: #ffffff;
|
|
83
|
+
--black-white-default: #e2e2e2;
|
|
84
|
+
--storm-dust: #262626;
|
|
85
|
+
--storm-dust-950: #3d3d3d;
|
|
86
|
+
--background: #121212;
|
|
87
|
+
--foreground: #ffffff;
|
|
88
|
+
--card: #262626;
|
|
89
|
+
--card-foreground: #ffffff;
|
|
90
|
+
--popover: #1e1e1e;
|
|
91
|
+
--popover-foreground: #ffffff;
|
|
92
|
+
--secondary: #3d3d3d;
|
|
93
|
+
--secondary-foreground: #ffffff;
|
|
94
|
+
--muted: #2a2a2a;
|
|
95
|
+
--muted-foreground: #b3b3b3;
|
|
96
|
+
--accent: #2a2a2a;
|
|
97
|
+
--accent-foreground: #ffffff;
|
|
98
|
+
--destructive: #ff6b6b;
|
|
99
|
+
--destructive-foreground: #ffffff;
|
|
100
|
+
--border: #404040;
|
|
101
|
+
--input: var(--card);
|
|
102
|
+
--ring: var(--primary-color);
|
|
103
|
+
}
|
|
104
|
+
body {
|
|
105
|
+
background-color: var(--background);
|
|
106
|
+
color: var(--foreground);
|
|
107
|
+
}
|
|
108
|
+
.card--default,
|
|
109
|
+
.card--shadowed {
|
|
110
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
|
111
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
112
|
+
}
|
|
113
|
+
.help-popup {
|
|
114
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
|
|
115
|
+
0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
|
116
|
+
}
|
|
117
|
+
button:focus-visible {
|
|
118
|
+
outline: 2px solid var(--ring);
|
|
119
|
+
outline-offset: 2px;
|
|
120
|
+
box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
|
|
121
|
+
}
|
|
122
|
+
a:focus-visible {
|
|
123
|
+
outline: 2px solid var(--ring);
|
|
124
|
+
outline-offset: 2px;
|
|
125
|
+
text-decoration: underline;
|
|
126
|
+
}
|
|
127
|
+
@media (prefers-contrast: high) {
|
|
128
|
+
:root {
|
|
129
|
+
--background: #000000;
|
|
130
|
+
--foreground: #ffffff;
|
|
131
|
+
--card: #000000;
|
|
132
|
+
--card-foreground: #ffffff;
|
|
133
|
+
--border: #ffffff;
|
|
134
|
+
--muted-foreground: #ffffff;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
@media (prefers-reduced-motion: reduce) {
|
|
138
|
+
*,
|
|
139
|
+
*::before,
|
|
140
|
+
*::after {
|
|
141
|
+
animation-duration: 0.01ms !important;
|
|
142
|
+
animation-iteration-count: 1 !important;
|
|
143
|
+
transition-duration: 0.01ms !important;
|
|
144
|
+
scroll-behavior: auto !important;
|
|
145
|
+
}
|
|
146
|
+
.button:hover {
|
|
147
|
+
transform: none !important;
|
|
148
|
+
}
|
|
149
|
+
.chat__send-button:hover:not(:disabled) {
|
|
150
|
+
transform: translateY(-50%) !important;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
html,
|
|
155
|
+
body {
|
|
156
|
+
font-family: var(--font-sans);
|
|
157
|
+
}
|
|
158
|
+
@keyframes float {
|
|
159
|
+
0%,
|
|
160
|
+
100% {
|
|
161
|
+
transform: translateY(0);
|
|
162
|
+
}
|
|
163
|
+
50% {
|
|
164
|
+
transform: translateY(-10px);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
@keyframes wave {
|
|
168
|
+
0%,
|
|
169
|
+
60%,
|
|
170
|
+
100% {
|
|
171
|
+
transform: initial;
|
|
172
|
+
}
|
|
173
|
+
30% {
|
|
174
|
+
transform: translateY(-10px);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
@keyframes circular-progress {
|
|
178
|
+
0% {
|
|
179
|
+
stroke-dashoffset: 100.48;
|
|
180
|
+
}
|
|
181
|
+
50% {
|
|
182
|
+
stroke-dashoffset: 25.12;
|
|
183
|
+
}
|
|
184
|
+
100% {
|
|
185
|
+
stroke-dashoffset: 100.48;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
.animate-float {
|
|
189
|
+
animation: float 3s infinite ease-in-out;
|
|
190
|
+
}
|
|
191
|
+
@media (prefers-reduced-motion: reduce) {
|
|
192
|
+
*,
|
|
193
|
+
*::before,
|
|
194
|
+
*::after {
|
|
195
|
+
animation-duration: 0.01ms !important;
|
|
196
|
+
animation-iteration-count: 1 !important;
|
|
197
|
+
transition-duration: 0.01ms !important;
|
|
198
|
+
scroll-behavior: auto !important;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
.bg-header {
|
|
202
|
+
background: linear-gradient(
|
|
203
|
+
171deg,
|
|
204
|
+
var(--primary-color) -131.06%,
|
|
205
|
+
var(--black-white-50) 89.82%
|
|
206
|
+
);
|
|
207
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
208
|
+
background: linear-gradient(
|
|
209
|
+
171deg,
|
|
210
|
+
color-mix(in srgb, var(--primary-color) 25%, transparent) -131.06%,
|
|
211
|
+
color-mix(in srgb, var(--black-white-50) 25%, transparent) 89.82%
|
|
212
|
+
);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
@use "tailwindcss";
|
|
2
|
+
|
|
3
|
+
/* CSS Custom Properties - Light Theme (Default) */
|
|
4
|
+
:root {
|
|
5
|
+
/* Light theme colors */
|
|
6
|
+
--black-white-50: #ffffff;
|
|
7
|
+
--black-white-100: #f3f3f3;
|
|
8
|
+
--black-white-200: #e2e2e2;
|
|
9
|
+
--black-white-300: #919191;
|
|
10
|
+
--black-white-400: #606060;
|
|
11
|
+
--black-white-500: #333333;
|
|
12
|
+
--black-white-600: #1f1f1f;
|
|
13
|
+
--black-white-700: #171717;
|
|
14
|
+
--black-white-800: #0a0a0a;
|
|
15
|
+
--black-white-900: #050505;
|
|
16
|
+
--black-white-950: #000000;
|
|
17
|
+
--black-white-default: #333333;
|
|
18
|
+
--storm-dust: #3d3d3d;
|
|
19
|
+
--storm-dust-950: #262626;
|
|
20
|
+
--primary-color: #ad49e1;
|
|
21
|
+
--primary-color-100: #f6ecfc;
|
|
22
|
+
--primary-color-200: #deb6f3;
|
|
23
|
+
--primary-color-300: #d49cee;
|
|
24
|
+
--primary-color-400: #c57fea;
|
|
25
|
+
--primary-color-500: #ad49e1;
|
|
26
|
+
--primary-color-600: #672b87;
|
|
27
|
+
--primary-color-700: #451d5a;
|
|
28
|
+
--primary-color-800: #220e2d;
|
|
29
|
+
--primary-color-900: #110716;
|
|
30
|
+
--primary-color-950: #0a0310;
|
|
31
|
+
|
|
32
|
+
/* Theme-aware colors - Light mode defaults */
|
|
33
|
+
--background: #ffffff;
|
|
34
|
+
--foreground: #333333;
|
|
35
|
+
--card: #ffffff;
|
|
36
|
+
--card-foreground: #333333;
|
|
37
|
+
--popover: #ffffff;
|
|
38
|
+
--popover-foreground: #333333;
|
|
39
|
+
--secondary: #f3f3f3;
|
|
40
|
+
--secondary-foreground: #333333;
|
|
41
|
+
--muted: #f3f3f3;
|
|
42
|
+
--muted-foreground: #606060;
|
|
43
|
+
--accent: #f3f3f3;
|
|
44
|
+
--accent-foreground: #333333;
|
|
45
|
+
--destructive: #ef4444;
|
|
46
|
+
--destructive-foreground: #ffffff;
|
|
47
|
+
--border: #e2e2e2;
|
|
48
|
+
--input: #e2e2e2;
|
|
49
|
+
--ring: var(--primary-color);
|
|
50
|
+
--radius: 0.5rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Tailwind v4 Theme Configuration - must come after @import */
|
|
54
|
+
/* Using actual color values for build-time, CSS variables will override at runtime */
|
|
55
|
+
/* postcss-disable-next-line */
|
|
56
|
+
@theme {
|
|
57
|
+
/* Font Family */
|
|
58
|
+
--font-sans: "Cairo", sans-serif;
|
|
59
|
+
|
|
60
|
+
/* Primary Colors - default light theme values */
|
|
61
|
+
--color-primary: var(--primary-color);
|
|
62
|
+
--color-primary-100: var(--primary-color-100 );
|
|
63
|
+
--color-primary-200: var(--primary-color-200);
|
|
64
|
+
--color-primary-300: var(--primary-color-300);
|
|
65
|
+
--color-primary-400: var(--primary-color-400);
|
|
66
|
+
--color-primary-500: var(--primary-color-500);
|
|
67
|
+
--color-primary-600: var(--primary-color-600);
|
|
68
|
+
--color-primary-700: var(--primary-color-700);
|
|
69
|
+
--color-primary-800: var(--primary-color-800);
|
|
70
|
+
--color-primary-900: var(--primary-color-900);
|
|
71
|
+
--color-primary-950: var(--primary-color-950);
|
|
72
|
+
|
|
73
|
+
/* Theme Colors - default light theme values */
|
|
74
|
+
--color-background: var(--background);
|
|
75
|
+
--color-foreground: var(--foreground);
|
|
76
|
+
--color-card: var(--card);
|
|
77
|
+
--color-card-foreground: var(--card-foreground);
|
|
78
|
+
--color-popover: var(--popover);
|
|
79
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
80
|
+
--color-secondary: var(--secondary);
|
|
81
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
82
|
+
--color-muted: var(--muted);
|
|
83
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
84
|
+
--color-accent: var(--accent);
|
|
85
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
86
|
+
--color-destructive: var(--destructive);
|
|
87
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
88
|
+
--color-border: var(--border);
|
|
89
|
+
--color-input: var(--input);
|
|
90
|
+
--color-ring: var(--ring);
|
|
91
|
+
|
|
92
|
+
/* Black-White Scale */
|
|
93
|
+
--color-black-white-50: var(--black-white-50);
|
|
94
|
+
--color-black-white-100: var(--black-white-100);
|
|
95
|
+
--color-black-white-200: var(--black-white-200);
|
|
96
|
+
--color-black-white-300: var(--black-white-300);
|
|
97
|
+
--color-black-white-400: var(--black-white-400);
|
|
98
|
+
--color-black-white-500: var(--black-white-500);
|
|
99
|
+
--color-black-white-600: var(--black-white-600);
|
|
100
|
+
--color-black-white-700: var(--black-white-700);
|
|
101
|
+
--color-black-white-800: var(--black-white-800);
|
|
102
|
+
--color-black-white-900: var(--black-white-900);
|
|
103
|
+
--color-black-white-950: var(--black-white-950);
|
|
104
|
+
|
|
105
|
+
/* Storm Dust Colors */
|
|
106
|
+
--color-storm-dust: var(--storm-dust);
|
|
107
|
+
--color-storm-dust-950: var(--storm-dust-950);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Button focus states */
|
|
111
|
+
button:focus-visible {
|
|
112
|
+
outline: 2px solid var(--ring);
|
|
113
|
+
outline-offset: 2px;
|
|
114
|
+
box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Link focus states */
|
|
118
|
+
a:focus-visible {
|
|
119
|
+
outline: 2px solid var(--ring);
|
|
120
|
+
outline-offset: 2px;
|
|
121
|
+
text-decoration: underline;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* High contrast mode support for light mode */
|
|
125
|
+
@media (prefers-contrast: high) {
|
|
126
|
+
:root {
|
|
127
|
+
--background: #ffffff;
|
|
128
|
+
--foreground: #000000;
|
|
129
|
+
--card: #ffffff;
|
|
130
|
+
--card-foreground: #000000;
|
|
131
|
+
--border: #000000;
|
|
132
|
+
--muted-foreground: #000000;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Dark theme colors */
|
|
137
|
+
@media (prefers-color-scheme: dark) {
|
|
138
|
+
:root {
|
|
139
|
+
--black-white-50: #000000;
|
|
140
|
+
--black-white-100: #050505;
|
|
141
|
+
--black-white-200: #0a0a0a;
|
|
142
|
+
--black-white-300: #171717;
|
|
143
|
+
--black-white-400: #1f1f1f;
|
|
144
|
+
--black-white-500: #333333;
|
|
145
|
+
--black-white-600: #606060;
|
|
146
|
+
--black-white-700: #919191;
|
|
147
|
+
--black-white-800: #e2e2e2;
|
|
148
|
+
--black-white-900: #f3f3f3;
|
|
149
|
+
--black-white-950: #ffffff;
|
|
150
|
+
--black-white-default: #e2e2e2;
|
|
151
|
+
--storm-dust: #262626;
|
|
152
|
+
--storm-dust-950: #3d3d3d;
|
|
153
|
+
|
|
154
|
+
/* Theme-aware colors - Dark mode (WCAG 2.1 AA compliant) */
|
|
155
|
+
--background: #121212; /* Better than pure black, reduces eye strain */
|
|
156
|
+
--foreground: #ffffff; /* High contrast white text */
|
|
157
|
+
--card: #262626; /* Slightly lighter than background for depth */
|
|
158
|
+
--card-foreground: #ffffff; /* High contrast white text */
|
|
159
|
+
--popover: #1e1e1e; /* Consistent with card background */
|
|
160
|
+
--popover-foreground: #ffffff; /* High contrast white text */
|
|
161
|
+
--secondary: #3d3d3d; /* Accessible secondary background */
|
|
162
|
+
--secondary-foreground: #ffffff; /* High contrast white text */
|
|
163
|
+
--muted: #2a2a2a; /* Accessible muted background */
|
|
164
|
+
--muted-foreground: #b3b3b3; /* WCAG AA compliant contrast (4.5:1) */
|
|
165
|
+
--accent: #2a2a2a; /* Accessible accent background */
|
|
166
|
+
--accent-foreground: #ffffff; /* High contrast white text */
|
|
167
|
+
--destructive: #ff6b6b; /* More accessible red with better contrast */
|
|
168
|
+
--destructive-foreground: #ffffff; /* High contrast white text */
|
|
169
|
+
--border: #404040; /* Better contrast for borders */
|
|
170
|
+
--input: var(--card); /* Accessible input background */
|
|
171
|
+
--ring: var(--primary-color); /* Keep primary color for focus rings */
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Dark mode specific styles */
|
|
175
|
+
body {
|
|
176
|
+
background-color: var(--background);
|
|
177
|
+
color: var(--foreground);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Improve shadows for dark mode */
|
|
181
|
+
.card--default,
|
|
182
|
+
.card--shadowed {
|
|
183
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
|
184
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Adjust minimal shadow for dark mode */
|
|
188
|
+
.help-popup {
|
|
189
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
|
|
190
|
+
0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Button focus states */
|
|
194
|
+
button:focus-visible {
|
|
195
|
+
outline: 2px solid var(--ring);
|
|
196
|
+
outline-offset: 2px;
|
|
197
|
+
box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Link focus states */
|
|
201
|
+
a:focus-visible {
|
|
202
|
+
outline: 2px solid var(--ring);
|
|
203
|
+
outline-offset: 2px;
|
|
204
|
+
text-decoration: underline;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* High contrast mode support */
|
|
208
|
+
@media (prefers-contrast: high) {
|
|
209
|
+
:root {
|
|
210
|
+
--background: #000000;
|
|
211
|
+
--foreground: #ffffff;
|
|
212
|
+
--card: #000000;
|
|
213
|
+
--card-foreground: #ffffff;
|
|
214
|
+
--border: #ffffff;
|
|
215
|
+
--muted-foreground: #ffffff;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Reduced motion support */
|
|
220
|
+
@media (prefers-reduced-motion: reduce) {
|
|
221
|
+
*,
|
|
222
|
+
*::before,
|
|
223
|
+
*::after {
|
|
224
|
+
animation-duration: 0.01ms !important;
|
|
225
|
+
animation-iteration-count: 1 !important;
|
|
226
|
+
transition-duration: 0.01ms !important;
|
|
227
|
+
scroll-behavior: auto !important;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* Disable hover animations for reduced motion */
|
|
231
|
+
.button:hover {
|
|
232
|
+
transform: none !important;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.chat__send-button:hover:not(:disabled) {
|
|
236
|
+
transform: translateY(-50%) !important;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Base styles */
|
|
242
|
+
html,
|
|
243
|
+
body {
|
|
244
|
+
font-family: var(--font-sans);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Custom animations */
|
|
248
|
+
|
|
249
|
+
@keyframes float {
|
|
250
|
+
0%,
|
|
251
|
+
100% {
|
|
252
|
+
transform: translateY(0);
|
|
253
|
+
}
|
|
254
|
+
50% {
|
|
255
|
+
transform: translateY(-10px);
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
@keyframes wave {
|
|
260
|
+
0%,
|
|
261
|
+
60%,
|
|
262
|
+
100% {
|
|
263
|
+
transform: initial;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
30% {
|
|
267
|
+
transform: translateY(-10px);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
@keyframes circular-progress {
|
|
272
|
+
0% {
|
|
273
|
+
stroke-dashoffset: 100.48;
|
|
274
|
+
}
|
|
275
|
+
50% {
|
|
276
|
+
stroke-dashoffset: 25.12;
|
|
277
|
+
}
|
|
278
|
+
100% {
|
|
279
|
+
stroke-dashoffset: 100.48;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* Animation Classes */
|
|
284
|
+
|
|
285
|
+
.animate-float {
|
|
286
|
+
animation: float 3s infinite ease-in-out;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* Reduced motion support - global */
|
|
290
|
+
@media (prefers-reduced-motion: reduce) {
|
|
291
|
+
*,
|
|
292
|
+
*::before,
|
|
293
|
+
*::after {
|
|
294
|
+
animation-duration: 0.01ms !important;
|
|
295
|
+
animation-iteration-count: 1 !important;
|
|
296
|
+
transition-duration: 0.01ms !important;
|
|
297
|
+
scroll-behavior: auto !important;
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.bg-header {
|
|
302
|
+
background: linear-gradient(
|
|
303
|
+
171deg,
|
|
304
|
+
color-mix(in srgb, var(--primary-color) 25%, transparent) -131.06%,
|
|
305
|
+
color-mix(in srgb, var(--black-white-50) 25%, transparent) 89.82%
|
|
306
|
+
);
|
|
307
|
+
}
|