guest password protect

static/css/styles.css

@@ -2509,6 +2509,66 @@ dialog::backdrop {
   gap: 10px;
 }
 
+.workspace-password-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px 14px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-card);
+}
+
+.workspace-password-card[hidden] {
+  display: none;
+}
+
+.workspace-password-card__copy {
+  display: grid;
+  gap: 2px;
+}
+
+.workspace-password-card__copy strong {
+  font-size: .82rem;
+}
+
+.workspace-password-card__copy small {
+  color: var(--muted);
+  font-size: .72rem;
+}
+
+.workspace-password-card__controls {
+  display: grid;
+  grid-template-columns: 106px auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.workspace-password-card__controls input {
+  width: 7vh;
+  height: 5vh;
+  min-width: 11vh;
+  padding: 0 1vh;
+}
+
+.workspace-password-card__controls button {
+  min-width: 7vh;
+  min-height: 4vh;
+  padding: 0 1vh;
+}
+
+.workspace-password-card>.form-message {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: .72rem;
+}
+
+.workspace-password-card>.form-message:empty {
+  display: none;
+}
+
 .notes-view-switch {
   display: inline-flex;
   padding: 3px;
@@ -2639,6 +2699,14 @@ dialog::backdrop {
     flex-direction: column-reverse;
   }
 
+  .workspace-password-card {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-password-card__controls {
+    justify-content: start;
+  }
+
   .notes-view-switch button {
     flex: 1;
   }
@@ -6577,6 +6645,7 @@ dialog::backdrop {
     font-size: .68rem;
   }
 }
+
 /* Search, pagination and theme-aware scrollbars. */
 * {
   scrollbar-width: thin;
@@ -6810,7 +6879,7 @@ dialog::backdrop {
   grid-template-columns: 12px minmax(0, 1fr);
 }
 
-.revision > div,
+.revision>div,
 .revision__meta,
 .revision__meta strong,
 .revision time,
@@ -6842,7 +6911,7 @@ dialog::backdrop {
   white-space: pre-wrap;
 }
 
-.history-header > div,
+.history-header>div,
 .history-header h2,
 .history-header p,
 .history-help,
@@ -6853,3 +6922,104 @@ dialog::backdrop {
   overflow-wrap: anywhere;
   word-break: break-word;
 }
+
+.page-password-inline {
+  display: grid;
+  gap: 7px;
+  width: 100%;
+  max-width: 100%;
+  margin: 5px 0 0;
+  padding: 8px;
+  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--surface-card) 76%, var(--surface-inset));
+}
+
+.page-password-inline[hidden] {
+  display: none;
+}
+
+.page-password-requirement {
+  margin: 6px 0 0;
+
+  color: var(--muted);
+  font-size: .69rem;
+  line-height: 1.35;
+}
+
+.page-password-requirement[hidden] {
+  display: none;
+}
+
+.page-password-inline__heading {
+  display: grid;
+  gap: 1px;
+}
+
+.page-password-inline__heading label {
+  color: var(--text-tertiary);
+  font-size: .76rem;
+  font-weight: 650;
+}
+
+.page-password-inline__heading small {
+  color: var(--muted);
+  font-size: .68rem;
+  line-height: 1.35;
+}
+
+.page-password-inline__controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.page-password-inline__controls input {
+  width: 100%;
+  min-width: 0;
+  height: 50%;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: .74rem;
+}
+
+.page-password-inline__controls input::placeholder {
+  color: var(--muted-2);
+}
+
+.page-password-inline__controls input:focus {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  outline: 2px solid color-mix(in srgb, var(--accent) 12%, transparent);
+  outline-offset: 0;
+}
+
+.page-password-inline__save {
+  min-width: 1vh;
+  height: 3vh;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-card);
+  color: var(--text-tertiary);
+  font-size: .72rem;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.page-password-inline__save:hover {
+  background: var(--surface-hover);
+  color: var(--text);
+}
+
+.page-password-inline .error:empty {
+  display: none;
+}
+
+.page-password-inline .error {
+  margin: 0;
+  font-size: .68rem;
+}