File size: 1,371 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | .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__content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: inherit;
position: relative;
z-index: 1;
}
.glass-surface--svg {
background: 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 rgb(255 255 255 / 18%) inset,
0 0 10px 4px rgb(255 255 255 / 8%) inset,
0 16px 56px rgb(0 0 0 / 18%),
0 16px 56px rgb(255 255 255 / 4%) inset;
}
.glass-surface--fallback {
background: rgb(255 255 255 / 7%);
backdrop-filter: blur(12px) saturate(1.35) brightness(1.08);
-webkit-backdrop-filter: blur(12px) saturate(1.35) brightness(1.08);
border: 1px solid rgb(255 255 255 / 16%);
box-shadow:
inset 0 1px 0 0 rgb(255 255 255 / 18%),
inset 0 -1px 0 0 rgb(255 255 255 / 8%);
}
.glass-surface:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.docdoe-nav-glass .glass-surface__content {
padding: 0;
}
|