@blocknote/shadcn/src/style.css

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

@import "./tailwindStyles.css";
@import url("@blocknote/react/style.css");

@tailwind components;
@tailwind utilities;

.bn-shadcn {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;

  --radius: 0.5rem;
}

.bn-shadcn.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;

  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;

  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;

  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;

  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

.bn-shadcn * {
  @apply bn-border-border;
}

.bn-shadcn .bn-editor {
  @apply bn-bg-background bn-text-foreground;
}

.bn-shadcn .bn-editor a {
  color: revert;
  text-decoration: revert;
}

.bn-shadcn .bn-editor:focus-visible {
  outline: none;
}

.bn-shadcn .bn-side-menu {
  align-items: center;
  display: flex;
  justify-content: center;
}

.bn-shadcn .bn-side-menu .bn-button {
  padding: 0;
  height: 24px;
}

.bn-shadcn .bn-select {
  max-height: var(--radix-select-content-available-height);
}

.bn-shadcn .bn-menu-dropdown {
  max-height: var(--radix-dropdown-menu-content-available-height);
}

.bn-shadcn .bn-color-picker-dropdown {
  overflow: auto;
}

.bn-shadcn .bn-suggestion-menu {
  height: fit-content;
  max-height: inherit;
}

.bn-shadcn .bn-suggestion-menu-item[aria-selected="true"],
.bn-shadcn .bn-suggestion-menu-item:hover {
  background-color: hsl(var(--accent));
}

.bn-shadcn .bn-grid-suggestion-menu {
  background: var(--bn-colors-menu-background);
  border-radius: var(--bn-border-radius-large);
  box-shadow: var(--bn-shadow-medium);
  display: grid;
  gap: 7px;
  height: fit-content;
  justify-items: center;
  max-height: inherit;
  overflow-y: auto;
  padding: 20px;
}

.bn-shadcn .bn-grid-suggestion-menu-item {
  align-items: center;
  border-radius: var(--bn-border-radius-large);
  cursor: pointer;
  display: flex;
  font-size: 24px;
  height: 32px;
  justify-content: center;
  margin: 2px;
  padding: 4px;
  width: 32px;
}

.bn-shadcn .bn-grid-suggestion-menu-item[aria-selected="true"],
.bn-shadcn .bn-grid-suggestion-menu-item:hover {
  background-color: var(--bn-colors-hovered-background);
}

.bn-shadcn .bn-grid-suggestion-menu-empty-item,
.bn-shadcn .bn-grid-suggestion-menu-loader {
  align-items: center;
  color: var(--bn-colors-menu-text);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  height: 32px;
  justify-content: center;
}

.bn-shadcn .bn-grid-suggestion-menu-loader span {
  background-color: hsl(var(--accent));
}

.bn-shadcn .bn-extend-button-add-remove-columns {
  cursor: col-resize;
}

.bn-shadcn .bn-extend-button-add-remove-rows {
  cursor: row-resize;
}

.bn-shadcn .bn-toolbar {
  overflow-x: auto;
  max-width: 100vw;
}

.bn-shadcn .bn-comment-actions-wrapper {
  display: flex;
  justify-content: flex-end;
}

.bn-shadcn .bn-table-cell-handle {
  padding: 0 4px;
  height: 12px;
}

.bn-shadcn .bn-thread .bn-resolved-text {
  font-size: 14px;
  font-style: italic;
}

.bn-shadcn .bn-combobox-error {
  color: var(--bn-colors-highlights-red-background);
  font-weight: bold;
}