mirror of
https://github.com/langgenius/dify.git
synced 2026-07-22 03:08:33 +08:00
60 lines
2.2 KiB
CSS
60 lines
2.2 KiB
CSS
@utility dify-blue-glass-surface {
|
|
@apply overflow-hidden system-md-semibold text-saas-dify-blue-inverted backdrop-blur-[5px];
|
|
|
|
background-image: linear-gradient(
|
|
91.46deg,
|
|
var(--color-components-main-nav-glass-surface-first, rgb(0 51 255 / 0.08)) 0%,
|
|
var(--color-components-main-nav-glass-surface-middle-1, rgb(0 51 255 / 0.12)) 17.98%,
|
|
var(--color-components-main-nav-glass-surface-middle-2, rgb(0 51 255 / 0.1)) 58.75%,
|
|
var(--color-components-main-nav-glass-surface-end, rgb(0 51 255 / 0.08)) 101.09%
|
|
);
|
|
box-shadow:
|
|
0 4px 8px 0 var(--color-components-main-nav-glass-shadow-reflection-glow),
|
|
0 10px 12px -4px var(--color-shadow-shadow-4),
|
|
0 3px 5px -2px var(--color-shadow-shadow-1),
|
|
0 8px 16px -4px var(--color-components-main-nav-glass-shadow-reflection);
|
|
|
|
&::before {
|
|
content: '';
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
border: 1px solid transparent;
|
|
background: linear-gradient(
|
|
0deg,
|
|
var(--color-components-main-nav-glass-edge-reflection-first, rgb(0 51 255 / 0)) 0%,
|
|
var(--color-components-main-nav-glass-edge-reflection-middle, rgb(0 51 255 / 0.6)) 50%,
|
|
var(--color-components-main-nav-glass-edge-reflection-end, rgb(0 51 255 / 0)) 100%
|
|
)
|
|
border-box;
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) padding-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: destination-out;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
border: 1px solid transparent;
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--color-components-main-nav-glass-edge-highlight-first, rgb(255 255 255 / 0.98)) 0%,
|
|
var(--color-components-main-nav-glass-edge-highlight-middle, rgb(255 255 255 / 0)) 18%,
|
|
var(--color-components-main-nav-glass-edge-highlight-end, rgb(255 255 255 / 0.42)) 100%
|
|
)
|
|
border-box;
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) padding-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: destination-out;
|
|
mask-composite: exclude;
|
|
box-shadow: inset 0 0 8px 0 var(--color-components-main-nav-glass-inner-glow);
|
|
}
|
|
}
|