Add multilanguage catalog translations UI for products and categories.
Include AI translate-all with locale picker, count badges, MultiLanguage Data module gating, and shared modal action layout polish. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
8c187b18be
commit
2a32c46b2e
@@ -58,13 +58,14 @@
|
||||
}
|
||||
|
||||
.aiBtn:hover:not(:disabled),
|
||||
.aiFabStrip:hover {
|
||||
.aiFabStrip:hover:not(:disabled) {
|
||||
box-shadow:
|
||||
0 6px 20px rgba(67, 56, 202, 0.34),
|
||||
0 0 32px rgba(236, 72, 153, 0.22);
|
||||
}
|
||||
|
||||
.aiBtn:disabled {
|
||||
.aiBtn:disabled,
|
||||
.aiFabStrip:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
animation-play-state: paused;
|
||||
@@ -85,11 +86,16 @@
|
||||
0 0 32px rgba(236, 72, 153, 0.18);
|
||||
}
|
||||
|
||||
.aiPromptField textarea:focus,
|
||||
textarea.aiPromptTextarea:focus {
|
||||
.aiPromptField textarea.aiPromptTextarea,
|
||||
.aiPromptField textarea,
|
||||
textarea.aiPromptTextarea {
|
||||
border: 2px solid transparent;
|
||||
background-color: var(--surface, var(--elevated-surface));
|
||||
background-image:
|
||||
linear-gradient(var(--elevated-surface), var(--elevated-surface)),
|
||||
linear-gradient(
|
||||
var(--surface, var(--elevated-surface)),
|
||||
var(--surface, var(--elevated-surface))
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#ff375f 0%,
|
||||
@@ -110,6 +116,153 @@ textarea.aiPromptTextarea:focus {
|
||||
0 0 16px rgba(255, 55, 95, 0.32),
|
||||
0 0 28px rgba(10, 132, 255, 0.24),
|
||||
0 0 42px rgba(191, 90, 242, 0.18);
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.aiPromptField textarea.aiPromptTextarea:focus,
|
||||
.aiPromptField textarea:focus,
|
||||
textarea.aiPromptTextarea:focus {
|
||||
border: 2px solid transparent;
|
||||
border-color: transparent;
|
||||
outline: none;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
var(--surface, var(--elevated-surface)),
|
||||
var(--surface, var(--elevated-surface))
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#ff375f 0%,
|
||||
#ff8a00 14%,
|
||||
#ffd60a 28%,
|
||||
#30d158 42%,
|
||||
#64d2ff 56%,
|
||||
#0a84ff 70%,
|
||||
#bf5af2 84%,
|
||||
#ff375f 100%
|
||||
);
|
||||
background-size: auto, 200% 100%;
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
animation: aiRainbowShift 4s linear infinite;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(191, 90, 242, 0.18),
|
||||
0 0 18px rgba(255, 55, 95, 0.38),
|
||||
0 0 32px rgba(10, 132, 255, 0.28),
|
||||
0 0 48px rgba(191, 90, 242, 0.22);
|
||||
}
|
||||
|
||||
.aiPromptField textarea.aiPromptTextarea:disabled,
|
||||
.aiPromptField textarea:disabled,
|
||||
textarea.aiPromptTextarea:disabled {
|
||||
opacity: 0.7;
|
||||
animation-play-state: paused;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aiFabGroup {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aiFabMenu {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
inset-inline-end: 0;
|
||||
z-index: 120;
|
||||
isolation: isolate;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: max(100%, 240px);
|
||||
padding: 6px;
|
||||
border-radius: 14px;
|
||||
border: 2px solid transparent;
|
||||
background-color: var(--toast-bg, rgba(255, 255, 255, 0.94));
|
||||
background-image:
|
||||
linear-gradient(
|
||||
var(--toast-bg, rgba(255, 255, 255, 0.94)),
|
||||
var(--toast-bg, rgba(255, 255, 255, 0.94))
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#ff375f 0%,
|
||||
#ff8a00 14%,
|
||||
#ffd60a 28%,
|
||||
#30d158 42%,
|
||||
#64d2ff 56%,
|
||||
#0a84ff 70%,
|
||||
#bf5af2 84%,
|
||||
#ff375f 100%
|
||||
);
|
||||
background-size: auto, 200% 100%;
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
animation: aiRainbowShift 4s linear infinite;
|
||||
box-shadow:
|
||||
0 18px 48px rgba(15, 23, 42, 0.22),
|
||||
0 0 16px rgba(255, 55, 95, 0.28),
|
||||
0 0 28px rgba(10, 132, 255, 0.22),
|
||||
0 0 42px rgba(191, 90, 242, 0.18);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.16s ease, visibility 0.16s ease;
|
||||
}
|
||||
|
||||
/* Invisible hit bridge so the cursor can reach options without closing the menu */
|
||||
.aiFabMenu::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.aiFabMenu::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(var(--blur-glass)) saturate(1.85);
|
||||
-webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.85);
|
||||
}
|
||||
|
||||
.aiFabGroup:hover .aiFabMenu,
|
||||
.aiFabGroup[data-open='true'] .aiFabMenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.aiFabMenuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-ui);
|
||||
color: var(--text-primary);
|
||||
text-align: start;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.aiFabMenuItem:hover:not(:disabled) {
|
||||
background: rgba(var(--primary-rgb) / 0.08);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.aiFabMenuItem:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -122,4 +275,12 @@ textarea.aiPromptTextarea:focus {
|
||||
.aiFabStrip span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aiFabMenu {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.aiFabMenuItem {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user