diff --git a/public/css/style.scss b/public/css/style.scss index 34f6a2df1..31a79f693 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -326,6 +326,79 @@ a:hover { } } +#customTextPopupWrapper { + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.75); + position: fixed; + left: 0; + top: 0; + z-index: 1000; + display: grid; + justify-content: center; + align-items: center; + padding: 5rem 0; + + #customTextPopup { + background: var(--bg-color); + border-radius: var(--roundness); + padding: 2rem; + display: grid; + gap: 1rem; + width: 60vw; + + textarea { + background: var(--bg-color); + padding: 1rem; + color: var(--main-color); + border: none; + outline: none; + font-size: 1rem; + font-family: "Roboto Mono"; + width: 100%; + border-radius: var(--roundness); + resize: vertical; + height: 200px; + color: var(--text-color); + } + + .inputs { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + align-items: center; + justify-items: center; + } + + .check { + input { + margin: 0 !important; + cursor: pointer; + width: 0; + height: 0; + display: none; + + &~.customTextRandomCheckbox { + width: 12px; + height: 12px; + background: rgba(0, 0, 0, .1); + border-radius: 2px; + box-shadow: 0 0 0 4px rgba(0, 0, 0, .1); + display: inline-block; + margin: 0 .5rem 0 .25rem; + transition: .25s; + } + + &:checked~.customTextRandomCheckbox { + background: var(--main-color); + } + } + } + + } +} + + #customThemeShareWrapper { width: 100%; height: 100%; diff --git a/public/index.html b/public/index.html index 0f7fd647e..5b76ba8b9 100644 --- a/public/index.html +++ b/public/index.html @@ -43,6 +43,20 @@
ok
+