81 lines
2.1 KiB
CSS
81 lines
2.1 KiB
CSS
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: system-ui, sans-serif;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
align-items: stretch; /* right column stretches to match left column's natural height */
|
|
height: 100%;
|
|
}
|
|
|
|
/* LEFT COLUMN: a flex column whose width shrinks to fit its widest
|
|
child. Since align-items defaults to "stretch", the other two
|
|
divs will stretch to match whatever width the svg establishes. */
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: fit-content; /* shrink-to-fit content, i.e. the svg's width */
|
|
}
|
|
|
|
.left > div {
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.top {
|
|
padding: 0.75rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* No padding here: the textarea itself becomes the full-width/height
|
|
box, so its dimensions can match the svg's rendered size exactly. */
|
|
.bottom {
|
|
padding: 0;
|
|
}
|
|
|
|
.bottom textarea {
|
|
display: block;
|
|
width: 100%; /* matches .bottom's width, which the flex-stretch
|
|
already ties to the svg's width */
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-radius: inherit;
|
|
padding: 0.75rem 1rem;
|
|
font: inherit;
|
|
resize: none; /* prevent the user from breaking the matched size */
|
|
}
|
|
|
|
.svg-wrap {
|
|
padding: 0; /* let the svg define the box exactly */
|
|
line-height: 0; /* avoid extra inline-svg whitespace gap */
|
|
}
|
|
|
|
.svg-wrap svg {
|
|
display: block;
|
|
/* intrinsic size set via width/height attributes below */
|
|
}
|
|
|
|
/* RIGHT COLUMN: takes remaining horizontal space AND stretches to
|
|
match the left column's full height (via .page's align-items: stretch) */
|
|
.right {
|
|
flex: 1;
|
|
display: flex; /* so the iframe can fill 100% of it */
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
padding: 0;
|
|
overflow: hidden; /* keep the iframe's corners inside the rounded border */
|
|
}
|
|
|
|
.right iframe {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|