diff --git a/public/index.css b/public/index.css index 412b81432..a09dc9a07 100644 --- a/public/index.css +++ b/public/index.css @@ -188,41 +188,6 @@ input.wide { width: 44ch; } -.modal { - padding: 2rem 3rem; - border: 1px solid var(--color-secondary); - background: var(--color-background); - box-shadow: 8px 8px 64px var(--box-shadow-color); - min-width: 480px; - max-width: 760px; - text-align: center; -} -.modal.modal-subtle { - border: none; - box-shadow: none; - background: radial-gradient( - var(--color-glow) 0%, - transparent 70% - ); -} -.modal-title { - font-size: 1.75rem; - line-height: 1.75rem; - margin-bottom: 2rem; - color: var(--color-secondary); - text-align: center; - text-overflow: ellipsis; - overflow: hidden; -} -.modal-body { - overflow-x: hidden; - text-overflow: ellipsis; - margin: 3rem 0; -} -.modal-actions { - margin-top: 2rem; - text-align: center; -} .modal-actions button { margin-right: 1rem; } diff --git a/src/Modal.svelte b/src/Modal.svelte index 1b4c2d2bd..37dbbb83c 100644 --- a/src/Modal.svelte +++ b/src/Modal.svelte @@ -23,6 +23,41 @@ z-index: 200; background-color: rgba(0, 0, 0, .75); } + .modal { + padding: 2rem 3rem; + border: 1px solid var(--color-secondary); + background: var(--color-background); + box-shadow: 8px 8px 64px var(--box-shadow-color); + min-width: 480px; + max-width: 760px; + text-align: center; + } + .modal.modal-subtle { + border: none; + box-shadow: none; + background: radial-gradient( + var(--color-glow) 0%, + transparent 70% + ); + } + .modal-title { + font-size: 1.75rem; + line-height: 1.75rem; + margin-bottom: 2rem; + color: var(--color-secondary); + text-align: center; + text-overflow: ellipsis; + overflow: hidden; + } + .modal-body { + overflow-x: hidden; + text-overflow: ellipsis; + margin: 3rem 0; + } + .modal-actions { + margin-top: 2rem; + text-align: center; + } {#if floating}