src/app/globals.css - master - effective_wiki/web-client

src/app/globals.css
376 строк10 KB
Max-Sam231
Merge branch 'feature/migrate_tiptap' of ssh://gitverse.ru:2222/effectiveventures/konstructor_client into feature/database
20 дек 2025, 05:35
20 дек 2025, 05:35b7a4e86
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-brand-yandex: var(--brand-yandex);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.625rem;
  --sidebar-panel-background: #f8f8f8;
  --sidebar-panel-border: #e0e0e0;
  --sidebar-text-primary: #333333;
  --sidebar-text-secondary: #5b5b5b;
  --sidebar-text-muted: #666666;
  --sidebar-item-surface: #f0f0f0;
  --brand-yandex: #fc3f1d;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(96.416% 0.00011 271.152);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(90.081% 0.00282 84.328);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
  --icon-active: oklch(60.407% 0.16157 252.351);
  --icon-gray: rgba(81, 73, 60, 0.32);
}

.dark {
  --sidebar-panel-background: hsl(240 5.9% 12%);
  --sidebar-panel-border: hsl(240 3.7% 25%);
  --sidebar-text-primary: hsl(0 0% 98%);
  --sidebar-text-secondary: hsl(240 4.8% 85%);
  --sidebar-text-muted: hsl(240 4.8% 70%);
  --sidebar-item-surface: hsl(240 3.7% 20%);
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
}

.shadow-dialog {
  box-shadow:
    0px 14px 28px rgba(0, 0, 0, 0.1),
    0px 2px 4px rgba(0, 0, 0, 0.06),
    0px 0px 0px rgba(84, 72, 49, 0.08);
}

.font-inter {
  font-family: var(--font-inter);
}

.columns-wrapper {
  @apply my-4 w-full;
}

.columns-container {
  @apply w-full;
}

.columns-container > div {
  @apply w-full;
}

.columns-container table {
  @apply w-full;
}

.columns-container tbody,
.columns-container tr {
  @apply flex gap-4 w-full;
}

.column-cell {
  @apply flex-1 min-w-[50px] p-4 rounded-lg border border-gray-200;
  @apply transition-colors relative;
}

.column-cell:hover {
  @apply border-gray-300;
}

.column-cell[data-resizing="true"] {
  @apply select-none;
  @apply border-blue-400;
}

.column-cell-content {
  @apply w-full;
}

/* Resize handle */
.column-resize-handle {
  @apply absolute top-0 right-0 h-full w-1;
  @apply cursor-col-resize;
  @apply opacity-0 hover:opacity-100;
  @apply bg-gray-400;
  @apply transition-opacity;
  @apply -mr-2;
  user-select: none;
}

.column-cell:hover .column-resize-handle {
  @apply opacity-40;
}

.column-cell:hover .column-resize-handle:hover {
  @apply opacity-80;
}

.column-cell[data-resizing="true"] .column-resize-handle {
  @apply opacity-100;
}

.column-cell .ProseMirror {
  @apply outline-none min-h-[120px];
}

/* Block Selection Styles - Notion-like multi-select */
.block-selection-wrapper {
  position: relative;
}

/* Text selection color to match block selection */
::selection {
  background: rgba(35, 131, 226, 0.2);
}

/* Selecto selection box */
.selecto-selection {
  background: rgba(35, 131, 226, 0.2) !important;
  border: none !important;
  border-radius: 3px;
}

/* Selected block highlight */
[data-block-id].block-selected {
  position: relative;
  background-color: rgba(35, 131, 226, 0.2) !important;
  border-radius: 3px !important;
  border: none !important;
}

/* NodeViewWrapper selected state */
.prose-editor [data-block-id].block-selected:not(ul):not(ol) {
  background-color: rgba(35, 131, 226, 0.2) !important;
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
  border: none !important;
}

/* Selected state for lists - without negative margins */
.prose-editor ul[data-block-id].block-selected,
.prose-editor ol[data-block-id].block-selected {
  background-color: rgba(35, 131, 226, 0.2) !important;
  padding-left: 8px;
  padding-right: 8px;
  border: none !important;
}

/* Prevent text selection during drag */
.block-selection-wrapper.is-selecting,
.block-selection-wrapper.is-selecting * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Hover state for selectable blocks */
.prose-editor [data-block-id]:hover:not(.block-selected):not(ul):not(ol) {
  background-color: rgba(55, 53, 47, 0.03);
  border-radius: 3px;
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Hover state for lists - without negative margins */
.prose-editor ul[data-block-id]:hover:not(.block-selected),
.prose-editor ol[data-block-id]:hover:not(.block-selected) {
  background-color: rgba(55, 53, 47, 0.03);
  border-radius: 3px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Временная группа блоков для множественного DnD */
.block-group-container {
  border: none;
  border-radius: 8px;
  background: rgba(35, 131, 226, 0.05);
}

.block-group-container.is-dragging {
  opacity: 0.5;
  background: rgba(35, 131, 226, 0.1);
}

.remote-cursor-selection {
  position: relative;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--cursor-color) 20%, transparent);
}

.remote-cursor-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
  background-color: var(--cursor-color, #3b82f6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.remote-cursor-caret {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.remote-cursor-caret__label {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: #ffffff;
  background-color: var(--cursor-color, #3b82f6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.remote-cursor-caret__bar {
  width: 2px;
  height: 18px;
  background-color: var(--cursor-color, #3b82f6);
  border-radius: 999px;
}

/* Collaboration Caret - Tiptap extension styles */
.collaboration-caret {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 1px solid;
  border-right: 1px solid;
  word-break: normal;
  pointer-events: none;
}

.collaboration-caret__label {
  position: absolute;
  top: -1.4em;
  left: -1px;
  padding: 0.1rem 0.3rem;
  border-radius: 3px 3px 3px 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
  user-select: none;
}

html,
body {
  height: 100%;
}