hamid zarghami
cee1f98972
Build and Deploy Docker Images / build_and_deploy (push) Has been cancelled
105 lines
2.8 KiB
CSS
105 lines
2.8 KiB
CSS
/* Glass surface — Figma: white 60%, border, shadow, backdrop blur */
|
|
|
|
.glass-surface {
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
-webkit-backdrop-filter: blur(3px);
|
|
backdrop-filter: blur(3px);
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
html[data-pattern-bg="true"] .glass-surface,
|
|
html[data-image-bg="true"] .glass-surface {
|
|
-webkit-backdrop-filter: blur(1px);
|
|
backdrop-filter: blur(1px);
|
|
}
|
|
|
|
html[data-theme="dark"] .glass-surface {
|
|
background-color: color-mix(in oklch, var(--container) 60%, transparent);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.glass-surface--flat {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.glass-surface--selected {
|
|
background-color: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .glass-surface--selected {
|
|
background-color: color-mix(in oklch, var(--container) 85%, transparent) !important;
|
|
}
|
|
|
|
/* Figma disabled category: white 40%, 2px inner gradient border, blur 12 */
|
|
.glass-surface--disabled {
|
|
position: relative;
|
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
|
border: none;
|
|
box-shadow: none;
|
|
-webkit-backdrop-filter: blur(12px);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.glass-surface--disabled::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 2px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 1) 0%,
|
|
rgba(255, 253, 253, 0) 50%,
|
|
rgba(255, 255, 255, 1) 100%
|
|
);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
html[data-pattern-bg="true"] .glass-surface--disabled,
|
|
html[data-image-bg="true"] .glass-surface--disabled {
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
html[data-theme="dark"] .glass-surface--disabled {
|
|
background-color: color-mix(in oklch, var(--container) 40%, transparent) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .glass-surface--disabled::before {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.35) 0%,
|
|
rgba(255, 255, 255, 0) 50%,
|
|
rgba(255, 255, 255, 0.35) 100%
|
|
);
|
|
}
|
|
|
|
.glass-surface-nav {
|
|
background-color: rgba(255, 255, 255, 0.32);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0px -2px 14px 0px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
html[data-pattern-bg="true"] .glass-surface-nav,
|
|
html[data-image-bg="true"] .glass-surface-nav {
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
html[data-theme="dark"] .glass-surface-nav {
|
|
background-color: color-mix(in oklch, var(--container) 32%, transparent);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|