73 lines
No EOL
1.5 KiB
CSS
73 lines
No EOL
1.5 KiB
CSS
.root {
|
|
position: relative;
|
|
margin: 1em;
|
|
padding: .5em;
|
|
gap: 1em;
|
|
display: grid;
|
|
|
|
grid: 100% / repeat(2, minmax(0, 1fr));
|
|
|
|
inline-size: calc(100% - 2em);
|
|
block-size: calc(100% - 2em);
|
|
|
|
place-content: start;
|
|
background-color: var(--surface-500);
|
|
border-radius: var(--radii-xl);
|
|
|
|
& > :is(textarea, .textarea) {
|
|
overflow: auto;
|
|
padding: .5em;
|
|
background-color: transparent;
|
|
}
|
|
|
|
& ::highlight(debug) {
|
|
text-decoration: double underline;
|
|
text-decoration-color: cornflowerblue;
|
|
}
|
|
|
|
& ::highlight(search-results) {
|
|
background-color: var(--secondary-900);
|
|
}
|
|
|
|
& ::highlight(spelling-error) {
|
|
text-decoration-line: spelling-error;
|
|
}
|
|
|
|
& ::highlight(grammar-error) {
|
|
text-decoration-line: grammar-error;
|
|
}
|
|
|
|
.editor {
|
|
display: block grid;
|
|
grid: auto 1fr / 100%;
|
|
|
|
.toolbar {
|
|
display: block grid;
|
|
grid-auto-flow: column;
|
|
place-content: start;
|
|
}
|
|
|
|
.search {
|
|
position: absolute;
|
|
inset-inline-end: 0;
|
|
inset-block-start: 0;
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
padding: .5em;
|
|
gap: .5em;
|
|
|
|
background-color: var(--surface-700);
|
|
border-radius: var(--radii-m);
|
|
box-shadow: var(--shadow-2);
|
|
|
|
&:popover-open {
|
|
display: block grid;
|
|
}
|
|
|
|
& > label {
|
|
display: contents;
|
|
}
|
|
}
|
|
}
|
|
} |