update styles
This commit is contained in:
parent
18c96302e2
commit
81491482e4
4 changed files with 106 additions and 14 deletions
|
@ -1,6 +1,6 @@
|
|||
.container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
display: block grid;
|
||||
grid: auto 1fr / 5em 1fr;
|
||||
grid-template-areas:
|
||||
"top top"
|
||||
|
@ -11,29 +11,39 @@
|
|||
overflow: clip;
|
||||
container-type: inline-size;
|
||||
background-color: var(--surface-1);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
grid-area: content;
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-block-start: 0;
|
||||
inline-size: var(--radius-4);
|
||||
block-size: var(--radius-4);
|
||||
background: radial-gradient(circle at bottom right, transparent var(--radius-4), var(--surface-1) var(--radius-4));
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
transparent 90vh,
|
||||
var(--surface-500) 90vh,
|
||||
var(--surface-500)
|
||||
);
|
||||
background: linear-gradient(180deg,
|
||||
transparent,
|
||||
transparent 90vh,
|
||||
var(--surface-500) 90vh,
|
||||
var(--surface-500));
|
||||
overflow: clip auto;
|
||||
padding-inline-start: 5em;
|
||||
transition: filter var(--duration-moderate-1) var(--ease-3);
|
||||
|
||||
& > div {
|
||||
border-top-left-radius: var(--radius-4);
|
||||
background-color: var(--surface-2);
|
||||
isolation: isolate;
|
||||
inline-size: 100%;
|
||||
block-size: fit-content;
|
||||
min-block-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue