atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

Removed style block

Browse Source
This commit is contained in:
msavulescu
2025-07-21 18:43:27 +03:00
parent 730d9a7b35
commit 566a56a1d8
1 changed files with 0 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/content/Components/GlassSurface/GlassSurface.vue
View File

@@ -375,99 +375,3 @@ onMounted(() => {
});
});
</script>
<style scoped>
.glass-surface {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.26s ease-out;
}
.glass-surface__filter {
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
inset: 0;
opacity: 0;
z-index: -1;
}
.glass-surface--svg {
background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
box-shadow:
0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%))
inset,
0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%))
inset,
0px 4px 16px rgba(17, 17, 26, 0.05),
0px 8px 24px rgba(17, 17, 26, 0.05),
0px 16px 56px rgba(17, 17, 26, 0.05),
0px 4px 16px rgba(17, 17, 26, 0.05) inset,
0px 8px 24px rgba(17, 17, 26, 0.05) inset,
0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}
.glass-surface--fallback {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px 0 rgba(31, 38, 135, 0.2),
0 2px 16px 0 rgba(31, 38, 135, 0.1),
inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
.glass-surface--fallback {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
}
}
@supports not (backdrop-filter: blur(10px)) {
.glass-surface--fallback {
background: rgba(255, 255, 255, 0.4);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
}
.glass-surface--fallback::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
border-radius: inherit;
z-index: -1;
}
}
@supports not (backdrop-filter: blur(10px)) {
@media (prefers-color-scheme: dark) {
.glass-surface--fallback {
background: rgba(0, 0, 0, 0.4);
}
.glass-surface--fallback::before {
background: rgba(255, 255, 255, 0.05);
}
}
}
.glass-surface:focus-visible {
outline: 2px solid light-dark(#007aff, #0a84ff);
outline-offset: 2px;
}
</style>