mtfyun/dify
1
0 Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-11-10 21:35:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): align card tag masks with design tokens (#42074)

Browse Source
This commit is contained in:
yyh authored and GitHub committed 2026-09-09 09:58:31 +00:00
1 parent 8c208ad206
commit 40955e72a9
6 files changed
+12 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/app/components/apps/app-card/index.tsx
+2 -2
View File
@@ -187,9 +187,9 @@ export const AppCard = memo(
return (
<li
className={cn(
"group relative isolate col-span-1 h-41.5 min-w-0 overflow-hidden rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-shadow duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-xl after:content-[''] focus-within:bg-components-card-bg-alt has-[>a:focus-visible]:after:inset-ring-2 has-[>a:focus-visible]:after:inset-ring-state-accent-solid has-[>button:focus-visible]:after:inset-ring-2 has-[>button:focus-visible]:after:inset-ring-state-accent-solid motion-reduce:transition-none",
"group relative isolate col-span-1 h-41.5 min-w-0 overflow-hidden rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-shadow duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-xl after:content-[''] focus-within:bg-components-card-bg-alt focus-within:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)] has-[>a:focus-visible]:after:inset-ring-2 has-[>a:focus-visible]:after:inset-ring-state-accent-solid has-[>button:focus-visible]:after:inset-ring-2 has-[>button:focus-visible]:after:inset-ring-state-accent-solid motion-reduce:transition-none",
!isPreviewOnly &&
'hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 has-data-popup-open:bg-components-card-bg-alt has-data-popup-open:shadow-md has-data-popup-open:shadow-shadow-shadow-5 [@media(hover:none)]:bg-components-card-bg-alt',
'hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 hover:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)] has-data-popup-open:bg-components-card-bg-alt has-data-popup-open:shadow-md has-data-popup-open:shadow-shadow-shadow-5 has-data-popup-open:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)] [@media(hover:none)]:bg-components-card-bg-alt [@media(hover:none)]:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)]',
)}
>
{isPreviewOnly ? (
web/app/components/datasets/list/dataset-card/index.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ const DatasetCard = ({
'group relative col-span-1 flex h-41.5 flex-col overflow-hidden rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-[background-color,box-shadow] duration-200 ease-in-out',
isPreviewOnly
? 'cursor-not-allowed opacity-60 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden'
: 'cursor-pointer hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5',
: 'cursor-pointer hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 hover:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)]',
)
return (
web/features/skills/page.tsx
+1 -1
View File
@@ -466,7 +466,7 @@ function SkillCard({
return (
<li
aria-labelledby={nameId}
className="group relative isolate col-span-1 h-42 min-w-0 overflow-hidden rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-shadow duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-xl after:content-[''] focus-within:bg-components-card-bg-alt hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 has-data-popup-open:bg-components-card-bg-alt has-data-popup-open:shadow-md has-data-popup-open:shadow-shadow-shadow-5 has-[>a:focus-visible]:after:inset-ring-2 has-[>a:focus-visible]:after:inset-ring-state-accent-solid motion-reduce:transition-none [@media(hover:none)]:bg-components-card-bg-alt"
className="group relative isolate col-span-1 h-42 min-w-0 overflow-hidden rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-shadow duration-200 ease-in-out after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-xl after:content-[''] focus-within:bg-components-card-bg-alt focus-within:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)] hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 hover:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)] has-data-popup-open:bg-components-card-bg-alt has-data-popup-open:shadow-md has-data-popup-open:shadow-shadow-shadow-5 has-data-popup-open:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)] has-[>a:focus-visible]:after:inset-ring-2 has-[>a:focus-visible]:after:inset-ring-state-accent-solid motion-reduce:transition-none [@media(hover:none)]:bg-components-card-bg-alt [@media(hover:none)]:[--color-tag-selector-mask-bg:var(--color-tag-selector-mask-hover-bg)]"
>
<Link
href={`/skills/${skill.id}`}
web/features/tag-management/components/skill-card-tags.tsx
-1
View File
@@ -42,7 +42,6 @@ export const SkillCardTags = ({
onOpenTagManagement={onOpenTagManagement}
onTagsChange={onTagsChange}
/>
<div className="pointer-events-none absolute top-0 right-0 h-full w-20 bg-tag-selector-mask-bg group-focus-within/tag-area:hidden group-hover/tag-area:hidden" />
</div>
)
}
web/themes/manual-dark.css
+4 -4
View File
@@ -144,13 +144,13 @@ html[data-theme='dark'] {
);
--color-tag-selector-mask-bg: linear-gradient(
90deg,
rgba(34, 34, 37, 0) 0%,
rgba(34, 34, 37, 1) 100%
var(--color-components-card-bg-transparent) 0%,
var(--color-components-card-bg) 77.027%
);
--color-tag-selector-mask-hover-bg: linear-gradient(
90deg,
rgba(39, 39, 43, 0) 0%,
rgba(39, 39, 43, 1) 100%
var(--color-components-card-bg-alt-transparent) 0%,
var(--color-components-card-bg-alt) 77.027%
);
--color-pipeline-template-card-hover-bg: linear-gradient(
0deg,
web/themes/manual-light.css
+4 -4
View File
@@ -147,13 +147,13 @@ html[data-theme='light'] {
);
--color-tag-selector-mask-bg: linear-gradient(
90deg,
rgba(252, 252, 253, 0) 0%,
rgba(252, 252, 253, 1) 100%
var(--color-components-card-bg-transparent) 0%,
var(--color-components-card-bg) 77.027%
);
--color-tag-selector-mask-hover-bg: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
var(--color-components-card-bg-alt-transparent) 0%,
var(--color-components-card-bg-alt) 77.027%
);
--color-pipeline-template-card-hover-bg: linear-gradient(
0deg,