mirror of
https://github.com/langgenius/dify.git
synced 2026-09-05 16:55:14 +08:00
cb6c04637b
Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: fatelei <fatelei@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: CodingOnStar <hanxujiang@dify.com> Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: 姜涵煦 <hanxujiang@jianghanxudeMacBook-Pro-2.local> Co-authored-by: L1nSn0w <l1nsn0w@qq.com> Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
75 lines
2.1 KiB
CSS
75 lines
2.1 KiB
CSS
.decorations {
|
||
pointer-events: none;
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
/* 4 grid rows (0–163) so the 40px icons at y=123 sit fully inside the hero
|
||
without overflowing into a scrollbar. */
|
||
.frame {
|
||
height: 163px;
|
||
}
|
||
|
||
/* 40px cells + 1px divider-subtle lines, matching Figma header/Variant2.
|
||
Figma's vertical lines are inset 141px on a 1512px canvas (~9%) and sit
|
||
under a white wash, so the grid fades out toward both edges instead of
|
||
meeting the viewport at full strength.
|
||
|
||
The 41px tile is odd-sized, so `background-position: center` places the
|
||
1px stroke on a half-pixel and leaves a 0.5px gap beside every icon.
|
||
+0.5px matches Figma (`left: calc(50% + 0.5px)`) so line starts sit on
|
||
the same pixels as `left: calc(50% + n * 41px)`. */
|
||
.grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(
|
||
to right,
|
||
transparent 20px,
|
||
var(--color-divider-subtle) 20px,
|
||
var(--color-divider-subtle) 21px,
|
||
transparent 21px
|
||
),
|
||
linear-gradient(to bottom, var(--color-divider-subtle) 1px, transparent 1px);
|
||
background-size:
|
||
var(--hero-grid-pitch, 41px) 100%,
|
||
100% var(--hero-grid-pitch, 41px);
|
||
background-position:
|
||
calc(50% + 0.5px) top,
|
||
left 40px;
|
||
-webkit-mask-image: linear-gradient(
|
||
to right,
|
||
transparent 0%,
|
||
#000 12%,
|
||
#000 88%,
|
||
transparent 100%
|
||
);
|
||
mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
|
||
}
|
||
|
||
/* Figma Ellipse 5 (1159:70851): 555×245 white oval at (478, 63) on the
|
||
1512×257 header, layer-blur 60. Hero y is shifted −44px so the top icon
|
||
row sits at 0. The blur washes grid lines out under the title and search
|
||
while fading toward the decorative icons. */
|
||
.glow {
|
||
position: absolute;
|
||
top: 19px;
|
||
left: 50%;
|
||
width: 555px;
|
||
height: 245px;
|
||
transform: translateX(-50%);
|
||
border-radius: 50%;
|
||
background: var(--color-background-default);
|
||
filter: blur(30px);
|
||
}
|
||
|
||
@media (max-width: 879px) {
|
||
.decorations {
|
||
display: none;
|
||
}
|
||
|
||
:global([data-marketplace-standalone]) .copyBlock {
|
||
max-width: 360px;
|
||
}
|
||
}
|