nilfam-editor/src/index.css

A powerful, customizable rich-text editor built with TipTap, React, and Tailwind CSS. Supports RTL/LTR text, resizable media (images/videos), tables, code blocks, font styling, and more for an enhanced content creation experience.

@import "tailwindcss" prefix(tw);
@source "./**/*.{html,js,jsx,ts,tsx}";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

.class-button {
  @apply tw:rounded tw:text-gray-800 tw:dark:text-gray-300 tw:size-8 tw:flex tw:justify-center tw:items-center tw:hover:bg-gray-200 tw:dark:hover:bg-gray-800 tw:cursor-pointer;
}

.class-button_bubble {
  @apply tw:rounded  tw:text-gray-800 tw:size-6 tw:flex tw:justify-center tw:items-center tw:hover:bg-gray-200 tw:cursor-pointer;
}

 .ProseMirror pre.code-block {
  @apply tw:bg-gray-800 tw:!text-left tw:text-gray-200 tw:p-4 tw:rounded-lg tw:overflow-x-auto tw:font-mono tw:whitespace-pre-wrap;
}

.hljs {
  @apply tw:text-gray-200;
}

.hljs-keyword {
  @apply tw:text-blue-400 tw:font-medium;
}
.hljs-built_in {
  @apply tw:text-cyan-300;
}
.hljs-type {
  @apply tw:text-teal-300;
}
.hljs-class {
  @apply tw:text-teal-200;
}
.hljs-title {
  @apply tw:text-yellow-300;
}
.hljs-title.function_ {
  @apply tw:text-yellow-300;
}
.hljs-title.class_ {
  @apply tw:text-teal-200;
}


.hljs-string {
  @apply tw:text-orange-300;
}
.hljs-number {
  @apply tw:text-green-300;
}
.hljs-literal {
  @apply tw:text-green-200;
}
.hljs-regexp {
  @apply tw:text-red-300;
}

 .hljs-variable {
  @apply tw:text-gray-300;
}
.hljs-variable.language_ {
  @apply tw:text-red-400;
}
.hljs-params {
  @apply tw:text-gray-400;
}

/* عملگرها و نمادها */
.hljs-operator {
  @apply tw:text-gray-400;
}
.hljs-punctuation {
  @apply tw:text-gray-500;
}

/* کامنت‌ها */
.hljs-comment {
  @apply tw:text-gray-600 tw:italic;
}


.hljs-tag {
  @apply tw:text-blue-300;
}
.hljs-name {
  @apply tw:text-blue-300;
}
.hljs-attr {
  @apply tw:text-orange-200;
}
.hljs-attribute {
  @apply tw:text-orange-200;
}

/* متفرقه */
.hljs-meta {
  @apply tw:text-gray-500;
}
.hljs-symbol {
  @apply tw:text-pink-300;
}
.hljs-section {
  @apply tw:text-indigo-300;
}

.code-block {
  @apply tw:bg-gray-800 tw:text-gray-200 tw:p-4 tw:rounded-lg tw:overflow-x-auto tw:font-mono tw:whitespace-pre-wrap tw:relative;
}

.copy-button {
  @apply tw:absolute tw:top-2 tw:right-2 tw:bg-gray-700 tw:text-white tw:text-sm tw:px-2 tw:py-1 tw:rounded tw:hover:bg-gray-600;
}
/*///////////////////*/


@font-face {
  font-family: IRANSansXFaNum;
  font-style: normal;
  font-weight: normal;
  src: url('assets/fonts/iranSans/Woff/IRANSansXFaNum-Regular.woff') format('woff'),
  url('assets/fonts/iranSans/Woff2/IRANSansXFaNum-Regular.woff2') format('woff2');
}


.add-font{
  font-family: IRANSansXFaNum, sans-serif;
}

.ProseMirror:focus {
  outline: none !important;
}

.ProseMirror-selectednode {
  outline: none !important;
}

.ProseMirror ul li::before {
  content: "•";
  /*position: absolute;*/
  right: 0.8rem;
  left: auto;
  line-height: inherit;
  color: currentColor;
}

/* RTL support */
.rtl .ProseMirror ul li::before {
  right: auto;
  left: 1rem;
}

.ProseMirror ol {
  counter-reset: item;
}

.ProseMirror ol li {
  counter-increment: item;
}

.ProseMirror ol li::before {
  content: counter(item) "-";
  /*position: absolute;*/
  right: 0.5rem;
  left: auto ;
  line-height: inherit;
  color: currentColor;
}

.ProseMirror ul li > p,
.ProseMirror ol li > p {
  display: inline;
  margin: 0;
}

.tiptap br + br.ProseMirror-trailingBreak {
  display: none;
}