casino-ui 0.1.4 → 0.1.6

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 (7) hide show
  1. package/dist/styles/toast.css +26 -0
  2. package/package.json +2 -2
  3. package/src/styles/toast.css +19 -7
  4. package/dist/assets/assets/card-back.svg +0 -43
  5. package/dist/assets/assets/card-shoe-overlay.svg +0 -14
  6. package/dist/styles/styles/casino-ui-base.css +0 -310
  7. package/dist/styles/styles/toast.css +0 -66
package/dist/styles/toast.css CHANGED
@@ -27,6 +27,32 @@
27
27
  width: auto;
28
28
  }
29
29
 
30
+ .casino-toast .Toastify__toast-container--top-left,
31
+ .casino-toast .Toastify__toast-container--bottom-left {
32
+ right: auto;
33
+ left: var(--toastify-toast-left);
34
+ }
35
+
36
+ .casino-toast .Toastify__toast-container--top-right,
37
+ .casino-toast .Toastify__toast-container--bottom-right {
38
+ left: auto;
39
+ right: var(--toastify-toast-right);
40
+ }
41
+
42
+ .casino-toast .Toastify__toast-container--top-center {
43
+ bottom: auto;
44
+ top: var(--toastify-toast-top);
45
+ left: 50%;
46
+ transform: translateX(-50%);
47
+ }
48
+
49
+ .casino-toast .Toastify__toast-container--bottom-center {
50
+ top: auto;
51
+ bottom: var(--toastify-toast-bottom);
52
+ left: 50%;
53
+ transform: translateX(-50%);
54
+ }
55
+
30
56
  .casino-toast .Toastify__toast {
31
57
  background: transparent;
32
58
  box-shadow: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "casino-ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -50,7 +50,7 @@
50
50
  "typescript": "~5.9.3"
51
51
  },
52
52
  "scripts": {
53
- "build": "tsc -p tsconfig.build.json && cp -r src/assets dist/assets && cp -r src/styles dist/styles",
53
+ "build": "tsc -p tsconfig.build.json && rm -rf dist/assets dist/styles && cp -r src/assets dist/assets && cp -r src/styles dist/styles",
54
54
  "dev": "tsc -p tsconfig.build.json --watch",
55
55
  "storybook": "storybook dev -p 6006",
56
56
  "build-storybook": "storybook build"
package/src/styles/toast.css CHANGED
@@ -27,16 +27,28 @@
27
27
  width: auto;
28
28
  }
29
29
 
30
- .casino-toast .Toastify__toast-container--bottom-left,
31
- .casino-toast .Toastify__toast-container--top-left {
32
- left: env(safe-area-inset-left);
30
+ .casino-toast .Toastify__toast-container--top-left,
31
+ .casino-toast .Toastify__toast-container--bottom-left {
32
+ right: auto;
33
+ left: var(--toastify-toast-left);
33
34
  }
34
- .casino-toast .Toastify__toast-container--bottom-right,
35
- .casino-toast .Toastify__toast-container--top-right {
36
- right: env(safe-area-inset-right);
35
+
36
+ .casino-toast .Toastify__toast-container--top-right,
37
+ .casino-toast .Toastify__toast-container--bottom-right {
38
+ left: auto;
39
+ right: var(--toastify-toast-right);
37
40
  }
38
- .casino-toast .Toastify__toast-container--bottom-center,
41
+
39
42
  .casino-toast .Toastify__toast-container--top-center {
43
+ bottom: auto;
44
+ top: var(--toastify-toast-top);
45
+ left: 50%;
46
+ transform: translateX(-50%);
47
+ }
48
+
49
+ .casino-toast .Toastify__toast-container--bottom-center {
50
+ top: auto;
51
+ bottom: var(--toastify-toast-bottom);
40
52
  left: 50%;
41
53
  transform: translateX(-50%);
42
54
  }
package/dist/assets/assets/card-back.svg DELETED
@@ -1,43 +0,0 @@
1
- <svg width="40" height="55" viewBox="0 0 40 55" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M20.4902 20.2168C20.4455 23.7657 22.4958 26.5392 25.9019 27.537C21.8838 28.5347 18.1323 31.3082 16.0003 34.8571C16.045 31.3082 13.9947 28.5347 10.5886 27.537C14.6067 26.5392 18.3582 23.7657 20.4902 20.2168Z" fill="#C7FE51"/>
3
- <g filter="url(#filter0_dddddd_5859_22826)">
4
- <path d="M28.6359 27.4112C24.9901 28.5573 21.6315 31.0406 19.4665 34.1899C19.3018 31.091 17.4995 28.6526 14.5849 27.5868C18.2308 26.4403 21.5894 23.9577 23.7542 20.808C23.9185 23.9075 25.7209 26.3451 28.6359 27.4112Z" stroke="#C7FE51" stroke-width="0.478885"/>
5
- </g>
6
- <path d="M20.4902 20.2168C20.4455 23.7657 22.4958 26.5392 25.9019 27.537C21.8838 28.5347 18.1323 31.3082 16.0003 34.8571C16.045 31.3082 13.9947 28.5347 10.5886 27.537C14.6067 26.5392 18.3582 23.7657 20.4902 20.2168Z" fill="#C7FE51"/>
7
- <defs>
8
- <filter id="filter0_dddddd_5859_22826" x="-6.2612" y="0.000518799" width="55.7411" height="54.999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
9
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
10
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
11
- <feOffset/>
12
- <feGaussianBlur stdDeviation="0.238717"/>
13
- <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
14
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5859_22826"/>
15
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
16
- <feOffset/>
17
- <feGaussianBlur stdDeviation="0.477434"/>
18
- <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
19
- <feBlend mode="normal" in2="effect1_dropShadow_5859_22826" result="effect2_dropShadow_5859_22826"/>
20
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
21
- <feOffset/>
22
- <feGaussianBlur stdDeviation="1.67102"/>
23
- <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
24
- <feBlend mode="normal" in2="effect2_dropShadow_5859_22826" result="effect3_dropShadow_5859_22826"/>
25
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
26
- <feOffset/>
27
- <feGaussianBlur stdDeviation="3.34204"/>
28
- <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
29
- <feBlend mode="normal" in2="effect3_dropShadow_5859_22826" result="effect4_dropShadow_5859_22826"/>
30
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
31
- <feOffset/>
32
- <feGaussianBlur stdDeviation="5.7292"/>
33
- <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
34
- <feBlend mode="normal" in2="effect4_dropShadow_5859_22826" result="effect5_dropShadow_5859_22826"/>
35
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
36
- <feOffset/>
37
- <feGaussianBlur stdDeviation="10.0261"/>
38
- <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 1 0"/>
39
- <feBlend mode="normal" in2="effect5_dropShadow_5859_22826" result="effect6_dropShadow_5859_22826"/>
40
- <feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_5859_22826" result="shape"/>
41
- </filter>
42
- </defs>
43
- </svg>
package/dist/assets/assets/card-shoe-overlay.svg DELETED
@@ -1,14 +0,0 @@
1
- <svg width="49.776" height="88" viewBox="1.195 0 49.776 88" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path filter="url(#blur)" d="M50.9707 77.7227C50.9707 82.3454 47.2233 86.0937 42.6006 86.0938H41.1709C40.5576 78.0671 33.8181 71.7442 25.5947 71.7441C17.3713 71.7441 10.6319 78.067 10.0186 86.0938H9.56543C4.94266 86.0938 1.19531 82.3454 1.19531 77.7227L1.19531 1.19531L50.9707 1.19531V77.7227Z" fill="url(#paint0_linear_6370_56915)" fill-opacity="0.8"/>
3
- <path d="M42.6006 86.0938V87.2895H42.6006L42.6006 86.0938ZM41.1709 86.0938L39.9786 86.1849L40.063 87.2895H41.1709V86.0938ZM25.5947 71.7441L25.5947 70.5484H25.5947V71.7441ZM10.0186 86.0938V87.2895H11.1264L11.2108 86.1849L10.0186 86.0938ZM1.19531 1.19531V-0.000441313L-0.000441313 -0.000441313V1.19531L1.19531 1.19531ZM50.9707 1.19531H52.1665V-0.000441313H50.9707V1.19531ZM50.9707 77.7227H49.7749C49.7749 81.6852 46.5627 84.8979 42.6006 84.898L42.6006 86.0938L42.6006 87.2895C47.8838 87.2894 52.1665 83.0056 52.1665 77.7227H50.9707ZM42.6006 86.0938V84.898H41.1709V86.0938V87.2895H42.6006V86.0938ZM41.1709 86.0938L42.3632 86.0026C41.7022 77.3526 34.443 70.5484 25.5947 70.5484L25.5947 71.7441L25.5947 72.9399C33.1932 72.9399 39.4129 78.7816 39.9786 86.1849L41.1709 86.0938ZM25.5947 71.7441V70.5484C16.7464 70.5484 9.48723 77.3525 8.82628 86.0026L10.0186 86.0938L11.2108 86.1849C11.7765 78.7815 17.9962 72.9399 25.5947 72.9399V71.7441ZM10.0186 86.0938V84.898H9.56543V86.0938V87.2895H10.0186V86.0938ZM9.56543 86.0938V84.898C5.60323 84.898 2.39107 81.6852 2.39107 77.7227H1.19531H-0.000441313C-0.000441313 83.0057 4.28208 87.2895 9.56543 87.2895V86.0938ZM1.19531 77.7227H2.39107L2.39107 1.19531L1.19531 1.19531L-0.000441313 1.19531L-0.000441313 77.7227H1.19531ZM1.19531 1.19531V2.39107L50.9707 2.39107V1.19531V-0.000441313L1.19531 -0.000441313V1.19531ZM50.9707 1.19531L49.7749 1.19531V77.7227H50.9707H52.1665V1.19531H50.9707Z" fill="url(#paint1_linear_6370_56915)"/>
4
- <defs>
5
- <linearGradient id="paint0_linear_6370_56915" x1="26.083" y1="1.19531" x2="26.083" y2="86.0938" gradientUnits="userSpaceOnUse">
6
- <stop stop-color="#141414"/>
7
- <stop offset="1" stop-color="#2A2A2A"/>
8
- </linearGradient>
9
- <linearGradient id="paint1_linear_6370_56915" x1="26.083" y1="1.19531" x2="26.083" y2="86.0938" gradientUnits="userSpaceOnUse">
10
- <stop stop-color="#1A1A1A"/>
11
- <stop offset="1" stop-color="#4E4E4E"/>
12
- </linearGradient>
13
- </defs>
14
- </svg>
package/dist/styles/styles/casino-ui-base.css DELETED
@@ -1,310 +0,0 @@
1
- @import "tailwindcss";
2
- @import "tw-animate-css";
3
-
4
- @custom-variant dark (&:is(.dark *));
5
-
6
- @theme inline {
7
- --color-background: var(--background);
8
- --color-foreground: var(--foreground);
9
- --color-win: #c7fe51;
10
- --color-brand: #c7fe51;
11
- --color-brand-light: #caff33;
12
- --color-brand-dark: #546b22;
13
- --color-dialog-content: #1a1a1a;
14
- --color-accent-error: #af1b45;
15
- --color-accent-success: #00a95d;
16
- --color-accent-waring: #f1c40f;
17
- --color-surface-600: #141414;
18
- --color-surface-500: #1a1a1a;
19
- --color-surface-450: #1f1f1f;
20
- --color-surface-400: #252525;
21
- --color-surface-300: #333333;
22
- --color-surface-250: #404040;
23
- --color-surface-200: #4d4d4d;
24
- --color-surface-650: #0f0f0f;
25
- --color-text-secondary: #bfbfbf;
26
- --color-text-tertiary: #8c8c8c;
27
- --color-card-suit-red: #f24545;
28
- --color-card-suit-black: #1a1a1a;
29
- --color-card-border: #bfbfbf;
30
- --color-card-back-bg: #f24545;
31
- --color-card-shoe-bg: #2a2a2a;
32
- --color-card-shoe-border: #4e4e4e;
33
- --color-button-grey: #3a3a3a;
34
- --color-accent-pink: #fd135a;
35
- --color-accent-fun-red: #db375e;
36
- --color-accent-yellow: #fee061;
37
- /* Action panel */
38
- --color-panel-bg: #252525;
39
- --color-action-hover: #444444;
40
- --color-action-active: #2a2a2a;
41
- --color-surrender-to: #2e2e2e;
42
- --color-timer-end: #00d474;
43
- /* Primary button — Green */
44
- --color-btn-green: #b5e74a;
45
- --color-btn-green-light: #c7fe51;
46
- /* Primary button — Blue */
47
- --color-btn-blue: #3fc1ff;
48
- --color-btn-blue-light: #63d0ff;
49
- }
50
-
51
- /* ── Casino Chip ────────────────────────────────────── */
52
-
53
- @layer components {
54
- .chip-body {
55
- position: relative;
56
- }
57
- .chip-body::before {
58
- content: "";
59
- position: absolute;
60
- inset: 0;
61
- border-radius: inherit;
62
- background: repeating-conic-gradient(
63
- from 348.75deg,
64
- #fff 0deg 22.5deg,
65
- transparent 22.5deg 45deg
66
- );
67
- }
68
-
69
- /* Chip data-slot sizing tokens */
70
- [data-slot="chip"] {
71
- width: var(--chip-outer);
72
- height: calc(var(--chip-outer) + var(--chip-shadow-depth));
73
- }
74
-
75
- [data-slot="chip-body"] {
76
- width: var(--chip-outer);
77
- height: var(--chip-outer);
78
- background-color: var(--chip-color);
79
- box-shadow: 0px var(--chip-shadow-depth) 0px 0px var(--chip-shadow-color);
80
- }
81
-
82
- [data-slot="chip-ring"] {
83
- width: var(--chip-inner);
84
- height: var(--chip-inner);
85
- top: var(--chip-inset);
86
- left: var(--chip-inset);
87
- }
88
-
89
- [data-slot="chip-center"] {
90
- width: var(--chip-center);
91
- height: var(--chip-center);
92
- background-color: var(--chip-color);
93
- padding: var(--chip-padding);
94
- }
95
-
96
- [data-slot="chip-text"] {
97
- font-size: var(--chip-text);
98
- font-family:
99
- "SF Pro Display",
100
- -apple-system,
101
- BlinkMacSystemFont,
102
- sans-serif;
103
- font-weight: 700;
104
- }
105
-
106
- [data-slot="chip-selected-ring"] {
107
- width: calc(var(--chip-outer) + 4px);
108
- height: calc(var(--chip-outer) + 2px);
109
- top: -1px;
110
- }
111
-
112
- [data-slot="chip"][data-size="sm"] {
113
- --chip-outer: 36px;
114
- --chip-inner: 33px;
115
- --chip-border: 3.74px;
116
- --chip-center: 28.7px;
117
- --chip-text: 10.5px;
118
- --chip-shadow-depth: 2px;
119
- --chip-inset: 1.6px;
120
- --chip-padding: 6.2px;
121
- }
122
- [data-slot="chip"][data-size="md"] {
123
- --chip-outer: 44px;
124
- --chip-inner: 40px;
125
- --chip-border: 4.566px;
126
- --chip-center: 35px;
127
- --chip-text: 12.865px;
128
- --chip-shadow-depth: 3px;
129
- --chip-inset: 2px;
130
- --chip-padding: 7.6px;
131
- }
132
- [data-slot="chip"][data-size="lg"] {
133
- --chip-outer: 52px;
134
- --chip-inner: 47px;
135
- --chip-border: 5.4px;
136
- --chip-center: 41.4px;
137
- --chip-text: 15.2px;
138
- --chip-shadow-depth: 4px;
139
- --chip-inset: 2.4px;
140
- --chip-padding: 9px;
141
- }
142
-
143
- /* Denomination color tokens */
144
- [data-slot="chip"][data-denomination="1"] {
145
- --chip-color: #999999;
146
- --chip-shadow-color: #474747;
147
- }
148
- [data-slot="chip"][data-denomination="5"] {
149
- --chip-color: #db375e;
150
- --chip-shadow-color: #63171d;
151
- }
152
- [data-slot="chip"][data-denomination="10"] {
153
- --chip-color: #037a4c;
154
- --chip-shadow-color: #06503f;
155
- }
156
- [data-slot="chip"][data-denomination="25"] {
157
- --chip-color: #f57fe0;
158
- --chip-shadow-color: #951f9d;
159
- }
160
- [data-slot="chip"][data-denomination="50"] {
161
- --chip-color: #7454f0;
162
- --chip-shadow-color: #2d268b;
163
- }
164
- [data-slot="chip"][data-denomination="100"] {
165
- --chip-color: #e3b800;
166
- --chip-shadow-color: #816b0c;
167
- }
168
- [data-slot="chip"][data-denomination="500"] {
169
- --chip-color: #9727b0;
170
- --chip-shadow-color: #5b187d;
171
- }
172
-
173
- /* Hover glow */
174
- button[data-slot="chip"]::before {
175
- content: "";
176
- position: absolute;
177
- left: 50%;
178
- top: 0;
179
- transform: translateX(-50%);
180
- width: calc(var(--chip-outer) + 10px);
181
- height: calc(var(--chip-outer) + 6px);
182
- border-radius: 50%;
183
- background: radial-gradient(
184
- ellipse at center,
185
- rgba(255, 255, 255, 0.35) 0%,
186
- rgba(255, 255, 255, 0.15) 40%,
187
- rgba(255, 255, 255, 0) 70%
188
- );
189
- pointer-events: none;
190
- opacity: 0;
191
- transition: opacity 150ms;
192
- }
193
-
194
- button[data-slot="chip"]:hover::before {
195
- opacity: 1;
196
- }
197
-
198
- button[data-slot="chip"]:hover > [data-slot="chip-body"] {
199
- box-shadow: 0px var(--chip-shadow-depth) 0px 0px var(--chip-shadow-color);
200
- }
201
-
202
- /* ── Action Buttons ───────────────────────────────── */
203
-
204
- .blue-action-button {
205
- border-color: var(--color-btn-blue);
206
- background-image: radial-gradient(
207
- 97.07% 95.3% at 48.09% 47.12%,
208
- var(--color-btn-blue) 0%,
209
- var(--color-btn-blue-light) 100%
210
- );
211
- box-shadow: 0 4px 1px 0 rgba(255, 255, 255, 0.4) inset;
212
- }
213
-
214
- .blue-action-button:hover {
215
- background-image: radial-gradient(
216
- 97.07% 95.3% at 48.09% 47.12%,
217
- #5cf 0%,
218
- #8ae2ff 100%
219
- );
220
- box-shadow:
221
- 0 0 12px 0 rgba(199, 243, 81, 0.2),
222
- 0 3px 1px 0 rgba(255, 255, 255, 0.25) inset;
223
- }
224
-
225
- .blue-action-button:active {
226
- border-color: #2ca1dc;
227
- background-image: radial-gradient(
228
- 97.07% 95.3% at 48.09% 47.12%,
229
- #32aeea 0%,
230
- #4fc0f2 100%
231
- );
232
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) inset;
233
- }
234
-
235
- .green-action-button {
236
- border-color: var(--color-btn-green);
237
- background-image: radial-gradient(
238
- 97.07% 95.3% at 48.09% 47.12%,
239
- var(--color-btn-green) 0%,
240
- var(--color-btn-green-light) 100%
241
- );
242
- box-shadow: 0 4px 1px 0 rgba(255, 255, 255, 0.4) inset;
243
- }
244
-
245
- .green-action-button:hover {
246
- background-image: radial-gradient(
247
- 97.07% 95.3% at 48.09% 47.12%,
248
- #c4fb63 0%,
249
- #d5ff7a 100%
250
- );
251
- box-shadow:
252
- 0 0 12px 0 rgba(199, 243, 81, 0.2),
253
- 0 3px 1px 0 rgba(255, 255, 255, 0.25) inset;
254
- }
255
-
256
- .green-action-button:active {
257
- border-color: #a9d53f;
258
- background-image: radial-gradient(
259
- 97.07% 95.3% at 48.09% 47.12%,
260
- #a9d53f 0%,
261
- #bee84f 100%
262
- );
263
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25) inset;
264
- }
265
-
266
- .grey-action-button {
267
- position: relative;
268
- border-color: var(--color-button-grey);
269
- background-image: radial-gradient(
270
- 97.07% 95.3% at 48.09% 47.12%,
271
- #3a3a3a 0%,
272
- #2e2e2e 100%
273
- );
274
- box-shadow: 0 4px 2px 0 rgba(255, 255, 255, 0.05) inset;
275
- }
276
-
277
- .grey-action-button:hover {
278
- border-color: #464646;
279
- background-image: radial-gradient(
280
- 97.07% 95.3% at 48.09% 47.12%,
281
- #464646 0%,
282
- #383838 100%
283
- );
284
- box-shadow:
285
- 0 0 8px 0 rgba(255, 255, 255, 0.03),
286
- 0 3px 2px 0 rgba(255, 255, 255, 0.03) inset;
287
- }
288
-
289
- .grey-action-button:active {
290
- border-color: #2e2e2e;
291
- background-image: radial-gradient(
292
- 97.07% 95.3% at 48.09% 47.12%,
293
- #2e2e2e 0%,
294
- #262626 100%
295
- );
296
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25) inset;
297
- }
298
- }
299
-
300
- /* ── Utilities ──────────────────────────────────────── */
301
-
302
- @layer utilities {
303
- .hide-scrollbar::-webkit-scrollbar {
304
- display: none;
305
- }
306
- .hide-scrollbar {
307
- -ms-overflow-style: none;
308
- scrollbar-width: none;
309
- }
310
- }
package/dist/styles/styles/toast.css DELETED
@@ -1,66 +0,0 @@
1
- /*
2
- * Casino Toast — CSS variable contract + react-toastify overrides
3
- *
4
- * All variables have hardcoded fallbacks so toasts render correctly
5
- * without a host theme. Consumers override variables on .casino-toast
6
- * or any ancestor to re-theme.
7
- */
8
-
9
- .casino-toast {
10
- --toast-bg: #1f1f1f;
11
- --toast-border: rgba(255, 255, 255, 0.04);
12
- --toast-radius: 12px;
13
- --toast-shadow: 0px 6px 15px -3px rgba(0, 0, 0, 0.15);
14
- --toast-text-primary: #ffffff;
15
- --toast-text-secondary: #bfbfbf;
16
- --toast-icon-info: #3fc1ff;
17
- --toast-icon-success: #00a95d;
18
- --toast-icon-warning: #af1b45;
19
- --toast-icon-error: #af1b45;
20
- --toast-action-highlight: #9fcc41;
21
- }
22
-
23
- /* ── Strip react-toastify default chrome ─────────────── */
24
-
25
- .casino-toast .Toastify__toast-container {
26
- padding: 0;
27
- width: auto;
28
- }
29
-
30
- .casino-toast .Toastify__toast-container--bottom-left,
31
- .casino-toast .Toastify__toast-container--top-left {
32
- left: env(safe-area-inset-left);
33
- }
34
- .casino-toast .Toastify__toast-container--bottom-right,
35
- .casino-toast .Toastify__toast-container--top-right {
36
- right: env(safe-area-inset-right);
37
- }
38
- .casino-toast .Toastify__toast-container--bottom-center,
39
- .casino-toast .Toastify__toast-container--top-center {
40
- left: 50%;
41
- transform: translateX(-50%);
42
- }
43
-
44
- .casino-toast .Toastify__toast {
45
- background: transparent;
46
- box-shadow: none;
47
- padding: 0;
48
- margin-bottom: 8px;
49
- min-height: unset;
50
- border-radius: 0;
51
- font-family: inherit;
52
- cursor: default;
53
- }
54
-
55
- .casino-toast .Toastify__toast-body {
56
- padding: 0;
57
- margin: 0;
58
- }
59
-
60
- .casino-toast .Toastify__close-button {
61
- display: none;
62
- }
63
-
64
- .casino-toast .Toastify__toast-icon {
65
- display: none;
66
- }