scout-baslac.ch/resources/css/tiptap.css

@tailwind base;
@tailwind components;
@tailwind utilities;


.html-code {
  display: block;
  background-color: #f5f5f5;
  color: #333;
  padding: 15px;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
  white-space: pre;
  overflow-x: auto;
}

/* Base editor container */
.tiptap-editor {
    padding: 16px;
    min-height: 200px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }
  
  /* Focus state for the editor */
  .tiptap-editor:focus {
    outline: none;
  }
  
  /* Typography elements */
  .tiptap-editor h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
  }
  
  .tiptap-editor h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.35;
  }
  
  .tiptap-editor h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }

  .tiptap-editor h4 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
    line-height: 0.6;
  }
  
  .tiptap-editor > p {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  /* Lists */
  .tiptap-editor ul,
  .tiptap-editor ol {
    padding-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .tiptap-editor ol {
    list-style: decimal;
  }

  .tiptap-editor ul {
    list-style: disc;
  }

  .tiptap-editor ul ul {
    list-style: circle;
  }
  
  .tiptap-editor li {
    margin-bottom: 0.25rem;
  }
  
  .tiptap-editor li > p {
    margin: 0;
  }
  
  .tiptap-editor pre {
    @apply bg-green-300/75 border-green-600/90 text-gray-800 p-4 rounded border-l-8 whitespace-pre-wrap;
  }

  .tiptap-editor code {
    padding: 0 0 0 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  } 
  /* Code blocks
  .tiptap-editor pre {
    background-color: rgba(45, 148, 32, 0.788);
    border-radius: 4px;
    font-size: 0.875rem;
    color: rgba(156, 250, 144, 0.788);
    overflow-x: auto;
  }
  
  .tiptap-editor code {
    border-radius: 3px;
    padding: 0 0 0 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 0.875em;
  } */
  
  /* Blockquotes */
  .tiptap-editor blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #555;
  }

  .tiptap-editor .image-align-left { float: left; margin-right: 1em; }
  .tiptap-editor .image-align-center { display: block; margin: 0 auto; }
  .tiptap-editor .image-align-right { float: right; margin-left: 1em; }
  .tiptap-editor .image-align-justify { width: 100%; }

  .tiptap-editor .mention {
    background-color: var(--purple-light);
    border-radius: 0.4rem;
    box-decoration-break: clone;
    color: var(--purple);
    padding: 0.1rem 0.3rem;
  }
  
  /* Links */
  .tiptap-editor a {
    color: #4dabf7;
    text-decoration: underline;
    transition: color 0.2s;
  }
  
  .tiptap-editor a:hover {
    color: #1b91ff;
  }
  
  /* Tables */
  .tiptap-editor table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
    overflow: hidden;
    font-size: 0.9em;
  }
  
  .tiptap-editor table th {
    background-color: #f5f7f9;
    font-weight: 600;
    text-align: left;
  }
  
  .tiptap-editor table th,
  .tiptap-editor table td {
    border: 1px solid #e0e0e0;
    padding: 0.5rem 0.75rem;
  }
  
  .tiptap-editor table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  /* Images */
  .tiptap-editor img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 4px;
  }
  
  /* Horizontal rule */
  .tiptap-editor hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 1.5rem 0;
  }
  
  /* Text alignment */
  .tiptap-editor .text-left {
    text-align: left;
  }
  
  .tiptap-editor .text-center {
    text-align: center;
  }
  
  .tiptap-editor .text-right {
    text-align: right;
  }
  
  .tiptap-editor .text-justify {
    text-align: justify;
  }
  
  /* Text formatting */
  .tiptap-editor strong,
  .tiptap-editor b {
    font-weight: 700;
  }
  
  .tiptap-editor em,
  .tiptap-editor i {
    font-style: italic;
  }
  
  .tiptap-editor u {
    text-decoration: underline;
  }
  
  .tiptap-editor s,
  .tiptap-editor strike,
  .tiptap-editor del {
    text-decoration: line-through;
  }
  
  /* Placeholders for empty editor */
  .tiptap-editor p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #adb5bd;
    pointer-events: none;
    height: 0;
  }
  
  /* Task lists */
  .tiptap-editor ul[data-type="taskList"] {
    list-style: none;
    padding: 0;
  }
  
  .tiptap-editor ul[data-type="taskList"] li {
    display: flex;
    align-items: start;
    margin-bottom: 0.5rem;
  }

  .tiptap-editor ul[data-type="taskList"] li p {
    margin: 0;
  }
  
  .tiptap-editor ul[data-type="taskList"] li > label {
    margin-right: 0.5rem;
    user-select: none;
  }
  
  .tiptap-editor ul[data-type="taskList"] li > div {
    flex: 1;
  }
  
  /* Code highlighting */
  .tiptap-editor .hljs-comment,
  .tiptap-editor .hljs-quote {
    color: #998;
    font-style: italic;
  }
  
  .tiptap-editor .hljs-keyword,
  .tiptap-editor .hljs-selector-tag,
  .tiptap-editor .hljs-subst {
    color: #333;
    font-weight: bold;
  }
  
  .tiptap-editor .hljs-string,
  .tiptap-editor .hljs-doctag {
    color: #d14;
  }
  
  .tiptap-editor .hljs-title,
  .tiptap-editor .hljs-section,
  .tiptap-editor .hljs-selector-id {
    color: #900;
    font-weight: bold;
  }
  
  .tiptap-editor .hljs-number {
    color: #099;
  }
  
  /* Placeholder text */
  .tiptap-editor .is-empty::before {
    content: attr(data-placeholder);
    float: left;
    color: #adb5bd;
    pointer-events: none;
    height: 0;
  }
  
  /* When editor is disabled */
  .tiptap-editor.ProseMirror-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }