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;
}

/*.ProseMirror blockquote {*/
/*  border-right: 3px solid #ccc;*/
/*  padding-right: 1em;*/
/*  margin-left: 0;*/
/*  font-style: italic;*/
/*  color: #555;*/
/*  margin-right: 20px;*/
/*}*/

.ProseMirror blockquote {
  border-right: 3px solid #8b5cf6;
  margin-left: 0;
  color: #555;
  margin-right: 20px;
  background-color: #ede9fe;
  /*display: inline-flex;*/
  border-radius: 6px;
  padding: 4px 10px;
}
/*.ProseMirror blockquote::after {*/
/*  content: '”';*/
/*}*/


/* Highlight برای سلول‌های selected */
.ProseMirror td.selectedCell,
.ProseMirror th.selectedCell {
  background-color: rgba(173, 216, 230, 0.4) !important; /* آبی روشن شفاف، یا هر رنگی که می‌خوای */
  outline: 1px solid #007bff; /* optional: border برای وضوح بیشتر */
}

/* optional: hover برای سلول‌ها */
.ProseMirror td:hover,
.ProseMirror th:hover {
  background-color: rgba(200, 200, 200, 0.1);
}