`public/editor.css`

54 lines
/* @dw/inline-editor — styles. Scoped to elements we own + .dw-edit-* classes. */
#dw-inline-ui { position: fixed; z-index: 2147483647; bottom: 16px; right: 16px; font: 13px/1.4 -apple-system, system-ui, sans-serif; }
#dw-inline-toggle {
  appearance: none; border: 0; cursor: pointer;
  background: #1a1a1a; color: #fff;
  padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  font: inherit; font-weight: 500;
}
#dw-inline-toggle.on { background: #e74c3c; }
#dw-inline-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%);
  background: #1a1a1a; color: #fff; padding: 8px 14px; border-radius: 6px;
  font: inherit; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 2147483647;
}
#dw-inline-toast.show { opacity: .95; transform: translate(-50%, -8px); }
#dw-inline-toast[data-kind=err] { background: #b03a2e; }

#dw-inline-modal { position: fixed; inset: 0; z-index: 2147483646; }
#dw-inline-modal .m-back { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#dw-inline-modal .m-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; min-width: 520px; max-width: 90vw; max-height: 80vh; overflow: auto;
  padding: 20px 24px; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.4);
  font: 13px/1.4 -apple-system, system-ui, sans-serif;
}
#dw-inline-modal h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
#dw-inline-modal textarea {
  width: 100%; min-height: 140px; padding: 8px 10px; font: 13px/1.4 -apple-system, system-ui, monospace;
  border: 1px solid #d0d0d0; border-radius: 2px; resize: vertical;
}
#dw-inline-modal input[type=file] { margin-top: 8px; font: inherit; }
#dw-inline-modal .m-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#dw-inline-modal button {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 500;
  padding: 8px 16px; border-radius: 2px;
}
#dw-inline-modal-save { background: #1a1a1a; color: #fff; }
#dw-inline-modal-cancel { background: #eee; color: #1a1a1a; }

html.dw-edit-on .dw-edit-hover {
  outline: 2px solid #ff6b35 !important;
  outline-offset: 2px !important;
  cursor: pointer !important;
}
html.dw-edit-on a.dw-edit-hover { cursor: context-menu !important; }
html.dw-edit-on [contenteditable=true] {
  outline: 2px dashed #ff6b35 !important;
  outline-offset: 2px !important;
  background: rgba(255,107,53,.04);
}