プレビュー
HTML
<section>
<dialog open>
<h2>Replace file?</h2>
<p>This cannot be undone.</p>
<form method="dialog">
<button type="submit">Confirm</button>
</form>
</dialog>
</section>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
section {
display: grid;
place-items: center;
min-width: min(100%, 20rem);
min-height: 12rem;
padding: 1.2rem;
border-radius: 1rem;
background: rgb(from var(--ink) r g b / 48%);
}
dialog {
position: static;
width: min(100%, 16rem);
margin: 0;
padding: 1.2rem;
border: 0;
border-radius: 1rem;
background: var(--paper);
}
h2, p { margin: 0; }
p { margin-block: 0.4rem 0.9rem; }
button {
padding: 0.5rem 0.9rem;
border: 0;
border-radius: 999px;
background: var(--accent);
color: var(--on-accent);
font: inherit;
font-weight: 700;
}