diff --git a/index.html b/index.html index 5fb7b3a..7116662 100644 --- a/index.html +++ b/index.html @@ -256,6 +256,79 @@ visibility: visible; } + dialog { + border: none; + border-radius: 12px; + padding: 24px; + background: var(--elevated); + color: var(--text); + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.15); + max-width: 300px; + width: calc(100% - 32px); + } + + dialog::backdrop { + background: rgba(0, 0, 0, 0.5); + } + + dialog form { + display: flex; + flex-direction: column; + gap: 14px; + } + + dialog p { + font: 600 16px / 1.5 system-ui; + margin: 0; + } + + dialog .error { + color: #e53e3e; + font: 14px / 1.5 system-ui; + font-weight: normal; + min-height: 0; + } + + dialog input[type="password"] { + font: 16px / 1.5 system-ui; + padding: 8px 12px; + border: 1px solid rgba(128, 128, 128, 0.3); + border-radius: 8px; + background: transparent; + color: var(--text); + outline: none; + width: 100%; + } + + dialog input[type="password"]:focus { + border-color: var(--outline); + box-shadow: 0 0 0 1px var(--outline); + } + + dialog .buttons { + display: flex; + gap: 8px; + justify-content: flex-end; + } + + dialog button { + font: 600 14px / 1.5 system-ui; + padding: 6px 16px; + border-radius: 8px; + border: none; + cursor: pointer; + } + + dialog button[type="submit"] { + background: #0569fa; + color: #fff; + } + + dialog button[type="button"] { + background: transparent; + color: var(--text); + } + @media print { .noprint { visibility: hidden !important; @@ -303,6 +376,12 @@ Save as TEXT + + + Lock document +
+ +
+

Enter password

+ + +

+
+ + +
+
+