clay-server 2.5.0

package/lib/public/css/overlays.css

@@ -0,0 +1,697 @@
+/* ==========================================================================
+   Main App Area
+   ========================================================================== */
+
+#app {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+}
+
+/* --- Onboarding banner --- */
+#onboarding-banner {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--accent-8);
+  border-bottom: 1px solid var(--accent-15);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+#onboarding-banner.hidden { display: none; }
+
+.onboarding-banner-text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.onboarding-banner-text .lucide { width: 13px; height: 13px; color: var(--accent); }
+
+.onboarding-banner-text a,
+.onboarding-banner-text button.onboarding-cta {
+  color: var(--accent);
+  font-weight: 500;
+  text-decoration: none;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+
+.onboarding-banner-text a:hover,
+.onboarding-banner-text button.onboarding-cta:hover { text-decoration: underline; }
+.onboarding-step { color: var(--accent); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
+
+#onboarding-banner-close {
+  background: none;
+  border: none;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+#onboarding-banner-close .lucide { width: 14px; height: 14px; }
+#onboarding-banner-close:hover { color: var(--text-secondary); }
+
+/* --- Update banner --- */
+#update-banner {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--success-8);
+  border-bottom: 1px solid var(--success-15);
+  font-size: 12px;
+  color: var(--text-secondary);
+  position: relative;
+}
+
+#update-banner.hidden { display: none; }
+
+.update-banner-text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.update-banner-text .lucide { width: 13px; height: 13px; color: var(--success); }
+.update-banner-text strong { color: var(--text); font-weight: 600; }
+
+#update-now {
+  background: var(--success-15);
+  border: 1px solid var(--success-25);
+  border-radius: 6px;
+  color: var(--success);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 10px;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+#update-now:hover { background: var(--success-25); }
+#update-now:disabled { opacity: 0.6; cursor: default; }
+
+#update-how {
+  background: transparent;
+  border: 1px solid var(--text-dimmer);
+  border-radius: 6px;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 7px;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+#update-how:hover { background: rgba(var(--overlay-rgb), 0.05); color: var(--text-secondary); }
+
+#update-popover {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 16px;
+  z-index: 200;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+  white-space: nowrap;
+}
+
+#update-popover.visible { display: block; }
+
+#update-popover .popover-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+#update-popover .popover-cmd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#update-popover .popover-cmd code {
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.06);
+  padding: 6px 12px;
+  border-radius: 6px;
+  user-select: all;
+  -webkit-user-select: all;
+}
+
+#update-popover .popover-copy {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 5px 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+#update-popover .popover-copy .lucide { width: 14px; height: 14px; }
+#update-popover .popover-copy:hover { color: var(--text); border-color: var(--text-dimmer); }
+#update-popover .popover-copy.copied { color: var(--success); border-color: var(--success); }
+
+#update-banner-close {
+  background: none;
+  border: none;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+#update-banner-close .lucide { width: 14px; height: 14px; }
+#update-banner-close:hover { color: var(--text-secondary); }
+
+/* --- Skip permissions banner --- */
+#skip-perms-banner {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 7px 16px;
+  background: var(--error-12);
+  border-bottom: 1px solid var(--error-25);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--error);
+}
+
+#skip-perms-banner.hidden { display: none; }
+#skip-perms-banner .lucide { width: 14px; height: 14px; flex-shrink: 0; }
+
+/* --- Confirm modal --- */
+#confirm-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#confirm-modal.hidden { display: none; }
+
+.confirm-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(var(--shadow-rgb), 0.5);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.confirm-dialog {
+  position: relative;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 20px 24px;
+  max-width: 320px;
+  width: 90%;
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.5);
+}
+
+.confirm-text {
+  font-size: 14px;
+  color: var(--text);
+  line-height: 1.5;
+  margin-bottom: 18px;
+}
+
+.confirm-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.confirm-btn {
+  padding: 7px 16px;
+  border-radius: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.confirm-cancel {
+  background: var(--input-bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.confirm-cancel:hover { background: var(--sidebar-hover); }
+
+.confirm-delete {
+  background: var(--error);
+  color: #fff;
+}
+
+.confirm-delete:hover { opacity: 0.85; }
+
+.confirm-ok {
+  background: var(--accent);
+  color: #fff;
+}
+
+.confirm-ok:hover { opacity: 0.85; }
+
+/* --- Resume modal --- */
+/* --- Rewind modal --- */
+#rewind-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#rewind-modal.hidden { display: none; }
+
+#rewind-modal .confirm-dialog {
+  max-width: 620px;
+  width: 94%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.rewind-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 12px;
+  flex-shrink: 0;
+}
+
+.rewind-modal-body {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 16px;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.rewind-modal-body p { margin: 0 0 10px; }
+
+#rewind-mode-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+#rewind-mode-options label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 4px 0;
+}
+
+#rewind-mode-options input[type="radio"] {
+  accent-color: var(--accent);
+  margin: 0;
+}
+
+.rewind-file-section {
+  margin-top: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.rewind-file-section + .rewind-file-section { margin-top: 8px; }
+
+.rewind-file-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(var(--overlay-rgb), 0.03);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.rewind-file-header:hover { background: rgba(var(--overlay-rgb), 0.06); }
+
+.rewind-file-chevron {
+  display: inline-flex;
+  color: var(--text-dimmer);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.rewind-file-chevron .lucide { width: 13px; height: 13px; }
+
+.rewind-file-section.expanded .rewind-file-chevron { transform: rotate(90deg); }
+
+.rewind-file-path {
+  flex: 1;
+  font-family: "Roboto Mono", monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+}
+
+.rewind-file-stats {
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.rewind-file-stats .stat-add { color: var(--success); }
+.rewind-file-stats .stat-del { color: var(--error); }
+
+.rewind-file-diff {
+  display: none;
+  background: var(--code-bg);
+  border-top: 1px solid var(--border-subtle);
+  max-height: 280px;
+  overflow: auto;
+}
+
+.rewind-file-section.expanded .rewind-file-diff { display: block; }
+
+.rewind-file-diff pre {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: "Roboto Mono", monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.rewind-no-diff {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--text-dimmer);
+  font-style: italic;
+}
+
+/* --- Resume / Session Picker modal --- */
+#resume-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#resume-modal.hidden { display: none; }
+
+.resume-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 12px;
+}
+
+.resume-picker-dialog { min-width: 380px; max-width: 480px; }
+.resume-picker-body { margin-bottom: 12px; }
+
+.resume-picker-loading {
+  display: flex; align-items: center; gap: 10px;
+  padding: 24px 0; justify-content: center;
+  font-size: 13px; color: var(--text-muted);
+}
+.resume-picker-loading.hidden { display: none; }
+.resume-picker-empty.hidden { display: none; }
+.resume-picker-list.hidden { display: none; }
+
+.resume-picker-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--text-secondary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.resume-picker-empty {
+  padding: 24px 0; text-align: center;
+  font-size: 13px; color: var(--text-muted);
+}
+
+.resume-picker-list {
+  max-height: 400px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 2px;
+}
+
+.cli-session-item {
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 10px 12px; border-radius: 8px;
+  cursor: pointer; transition: background 0.15s;
+  border: 1px solid transparent;
+}
+
+.cli-session-item:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+  border-color: var(--border-subtle);
+}
+
+.cli-session-title {
+  font-size: 13px; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.cli-session-meta {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 11px; color: var(--text-muted);
+  flex-wrap: wrap;
+}
+
+.cli-session-meta .badge {
+  background: rgba(var(--overlay-rgb), 0.07);
+  padding: 1px 6px; border-radius: 4px;
+  font-family: "Roboto Mono", monospace;
+  font-size: 10px;
+}
+
+/* --- Notification help modal --- */
+#notif-help-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#notif-help-modal.hidden { display: none; }
+
+.notif-help-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 12px;
+}
+
+.notif-help-body {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+.notif-help-body p { margin: 0 0 10px; }
+
+.notif-help-body ol {
+  margin: 0 0 14px;
+  padding-left: 20px;
+}
+
+.notif-help-body ol li { margin-bottom: 4px; }
+
+.notif-help-url {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(var(--overlay-rgb), 0.04);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+
+.notif-help-url code {
+  font-family: "Roboto Mono", monospace;
+  font-size: 12px;
+  color: var(--text);
+  flex: 1;
+  user-select: all;
+  -webkit-user-select: all;
+}
+
+.notif-help-url .popover-copy {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.notif-help-url .popover-copy .lucide { width: 13px; height: 13px; }
+.notif-help-url .popover-copy:hover { color: var(--text); border-color: var(--text-dimmer); }
+.notif-help-url .popover-copy.copied { color: var(--success); border-color: var(--success); }
+
+/* --- Add project modal --- */
+#add-project-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
+#add-project-modal.hidden { display: none; }
+
+.add-project-dialog { max-width: 420px; }
+
+.add-project-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 14px;
+}
+
+.add-project-body { margin-bottom: 16px; }
+
+.add-project-input-wrap { position: relative; }
+
+#add-project-input {
+  width: 100%;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  font-family: "Roboto Mono", monospace;
+  padding: 10px 12px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+#add-project-input:focus { border-color: var(--text-dimmer); }
+#add-project-input::placeholder { color: var(--text-muted); font-family: "Pretendard", system-ui, sans-serif; }
+
+#add-project-suggestions {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
+}
+
+#add-project-suggestions.hidden { display: none; }
+
+.add-project-suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.add-project-suggestion-item:first-child { border-radius: 8px 8px 0 0; }
+.add-project-suggestion-item:last-child { border-radius: 0 0 8px 8px; }
+.add-project-suggestion-item:only-child { border-radius: 8px; }
+.add-project-suggestion-item:hover,
+.add-project-suggestion-item.active { background: var(--sidebar-hover); }
+
+.add-project-suggestion-item .lucide { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
+
+.add-project-suggestion-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.add-project-suggestion-path {
+  font-size: 11px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 50%;
+}
+
+#add-project-error {
+  font-size: 12px;
+  color: var(--error);
+  margin-top: 8px;
+}
+
+#add-project-error.hidden { display: none; }
+
+/* --- Connect overlay --- */
+#connect-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  z-index: 50;
+  transition: opacity 0.6s ease;
+}
+
+#connect-overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.connect-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  animation: connect-breathe 3s ease-in-out infinite;
+}
+
+.connect-wordmark {
+  margin-top: 12px;
+  font-family: "Nunito", sans-serif;
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--text-dimmer);
+  letter-spacing: 0.5px;
+  animation: connect-breathe 3s ease-in-out infinite;
+  animation-delay: 0.3s;
+}
+
+@keyframes connect-breathe {
+  0%, 100% { opacity: 0.35; }
+  50% { opacity: 0.7; }
+}
+