46 lines
1.6 KiB
CSS
46 lines
1.6 KiB
CSS
|
div.layout-glass-container {
|
||
|
|
backdrop-filter: blur(var(--effect-glass-blur));
|
||
|
|
margin: var(--effect-glass-corner-margin);
|
||
|
|
background: var(--effect-glass-tint);
|
||
|
|
height: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.layout-glass-corner {
|
||
|
|
position: absolute;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.layout-glass-corner:nth-child(1) {
|
||
|
|
/* Top-left */
|
||
|
|
top: var(--effect-glass-corner-offset);
|
||
|
|
left: var(--effect-glass-corner-offset);
|
||
|
|
border-top: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
border-left: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
div.layout-glass-corner:nth-child(2) {
|
||
|
|
/* Top-right */
|
||
|
|
top: var(--effect-glass-corner-offset);
|
||
|
|
right: var(--effect-glass-corner-offset);
|
||
|
|
border-top: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
border-right: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
div.layout-glass-corner:nth-child(3) {
|
||
|
|
/* Bottom-left */
|
||
|
|
bottom: var(--effect-glass-corner-offset);
|
||
|
|
left: var(--effect-glass-corner-offset);
|
||
|
|
border-bottom: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
border-left: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
div.layout-glass-corner:nth-child(4) {
|
||
|
|
right: var(--effect-glass-corner-offset);
|
||
|
|
/* Bottom-right */
|
||
|
|
bottom: var(--effect-glass-corner-offset);
|
||
|
|
border-right: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
border-bottom: var(--effect-glass-corner-thickness) solid var(--effect-glass-corner-color);
|
||
|
|
}
|