@gongfu/prd-editor/dist/styles.css

A professional PRD (Product Requirements Document) editor SDK with AI-powered features

/* PRD Editor Styles */
.prd-editor {
  @apply h-full flex flex-col bg-white dark:bg-gray-900;
}

/* Toolbar */
.prd-toolbar {
  @apply border-b bg-white dark:bg-gray-800 px-4 py-2;
}

/* Sidebar */
.prd-sidebar {
  @apply w-64 border-r bg-gray-50 dark:bg-gray-900 overflow-y-auto;
}

/* Editor Content */
.prd-editor-content {
  @apply h-full flex flex-col bg-white dark:bg-gray-800;
}

.prd-editor-content .ProseMirror {
  @apply outline-none;
}

.prd-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  @apply text-gray-400 dark:text-gray-600;
  float: left;
  height: 0;
  pointer-events: none;
}

/* Preview */
.prd-preview {
  @apply h-full overflow-y-auto bg-white dark:bg-gray-800;
}

/* Comments */
.prd-comments {
  @apply w-80 border-l bg-white dark:bg-gray-800 flex flex-col;
}

/* Version History */
.prd-version-history {
  @apply w-80 border-l bg-white dark:bg-gray-800 flex flex-col;
}

/* AI Assistant */
.prd-ai-assistant {
  @apply w-80 border-l bg-white dark:bg-gray-800 flex flex-col;
}

/* Prose Overrides */
.prose h1 {
  @apply text-3xl font-bold mb-4;
}

.prose h2 {
  @apply text-2xl font-semibold mb-3 mt-6;
}

.prose h3 {
  @apply text-xl font-medium mb-2 mt-4;
}

.prose h4 {
  @apply text-lg font-medium mb-2 mt-3;
}

.prose ul {
  @apply list-disc pl-6 mb-4;
}

.prose ol {
  @apply list-decimal pl-6 mb-4;
}

.prose li {
  @apply mb-1;
}

.prose table {
  @apply w-full border-collapse mb-4;
}

.prose th {
  @apply border p-2 bg-gray-100 dark:bg-gray-800 font-semibold text-left;
}

.prose td {
  @apply border p-2;
}

/* Task List */
.prose ul[data-type="taskList"] {
  @apply list-none pl-0;
}

.prose li[data-type="taskItem"] {
  @apply flex items-start;
}

.prose li[data-type="taskItem"] > label {
  @apply mr-2;
}

.prose li[data-type="taskItem"] > div {
  @apply flex-1;
}

/* Editor Toolbar Icons */
.editor-toolbar button {
  @apply p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.editor-toolbar button.is-active {
  @apply bg-gray-200 dark:bg-gray-700;
}

/* Scrollbar Styling */
.prd-editor ::-webkit-scrollbar {
  @apply w-2 h-2;
}

.prd-editor ::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

.prd-editor ::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded;
}

.prd-editor ::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

/* Animations */
@keyframes prd-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prd-fade-in {
  animation: prd-fade-in 0.2s ease-out;
}

/* Split View */
.prd-editor.split-view {
  .prd-editor-content,
  .prd-preview {
    @apply w-1/2;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .prd-sidebar {
    @apply w-56;
  }
  
  .prd-comments,
  .prd-version-history,
  .prd-ai-assistant {
    @apply w-72;
  }
}

@media (max-width: 768px) {
  .prd-editor {
    .prd-sidebar,
    .prd-comments,
    .prd-version-history,
    .prd-ai-assistant {
      @apply absolute z-10 shadow-lg;
    }
  }
  
  .prd-editor.split-view {
    .prd-editor-content,
    .prd-preview {
      @apply w-full;
    }
  }
}

/* Print Styles */
@media print {
  .prd-toolbar,
  .prd-sidebar,
  .prd-comments,
  .prd-version-history,
  .prd-ai-assistant,
  .editor-toolbar {
    @apply hidden;
  }
  
  .prd-preview,
  .prd-editor-content {
    @apply w-full;
  }
  
  .prose {
    @apply max-w-none;
  }
}