Files
flowsint/flowsint-app/src/styles.css
T
2025-11-06 15:34:53 +01:00

844 lines
19 KiB
CSS

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
/* Container Queries */
@container (min-width: 640px) {
.cq-sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (min-width: 768px) {
.cq-md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container (min-width: 1024px) {
.cq-lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@container (min-width: 1280px) {
.cq-xl\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* Electron title bar draggable region */
.-webkit-app-region-drag {
-webkit-app-region: drag;
user-select: none;
}
.-webkit-app-region-no-drag {
-webkit-app-region: no-drag;
}
/* Appliquer sur toute la page */
body {
scrollbar-width: thin; /* Firefox */
scrollbar-color: #888 transparent; /* Firefox */
}
body::-webkit-scrollbar {
width: 8px;
height: 8px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: rgba(125, 125, 125, 0.204);
border-radius: 8px;
border: 2px solid transparent;
background-clip: content-box;
}
body::-webkit-scrollbar-thumb:hover {
background-color: rgba(100, 100, 100, 0.573);
}
body {
@apply m-0;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: var(--tracking-normal);
}
/* Smooth scrolling optimizations */
html {
scroll-behavior: smooth;
}
.scroll-smooth {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* For iOS smooth scrolling */
}
/* Optimizations for virtualized lists */
.virtualized-container {
contain: strict;
will-change: scroll-position;
}
.virtualized-item {
contain: layout style paint;
transform: translateZ(0);
/* Force hardware acceleration */
will-change: transform;
}
@layer base {
:root {
--sidebar-background: 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%);
}
.dark {
--sidebar-background: hsl(0, 0, 11);
--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%);
}
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
.react-flow__node-group {
padding: 0px !important;
border-radius: 6px !important;
}
.style_module_watermark__6b4371ae {
display: none !important;
opacity: 0 !important;
}
.minimal-tiptap-editor .ProseMirror code.inline {
@apply rounded border border-border bg-[var(--muted)] px-1 py-0.5 text-sm;
}
.minimal-tiptap-editor .ProseMirror pre {
@apply relative overflow-auto rounded font-mono text-sm;
@apply border-[var(--mt-pre-border)] bg-[var(--mt-pre-background)] text-[var(--mt-pre-color)];
@apply hyphens-none whitespace-pre text-left;
}
.minimal-tiptap-editor .ProseMirror code {
@apply break-words leading-[1.7em];
}
.minimal-tiptap-editor .ProseMirror pre code {
@apply block overflow-x-auto p-3.5;
}
.minimal-tiptap-editor .ProseMirror pre {
.hljs-keyword,
.hljs-operator,
.hljs-function,
.hljs-built_in,
.hljs-builtin-name {
color: var(--hljs-keyword);
}
.hljs-attr,
.hljs-symbol,
.hljs-property,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-params {
color: var(--hljs-attr);
}
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-type,
.hljs-addition {
color: var(--hljs-name);
}
.hljs-string,
.hljs-bullet {
color: var(--hljs-string);
}
.hljs-title,
.hljs-subst,
.hljs-section {
color: var(--hljs-title);
}
.hljs-literal,
.hljs-type,
.hljs-deletion {
color: var(--hljs-literal);
}
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class {
color: var(--hljs-selector-tag);
}
.hljs-number {
color: var(--hljs-number);
}
.hljs-comment,
.hljs-meta,
.hljs-quote {
color: var(--hljs-comment);
}
.hljs-emphasis {
@apply italic;
}
.hljs-strong {
@apply font-bold;
}
}
.minimal-tiptap-editor .ProseMirror ol {
@apply list-decimal;
}
.minimal-tiptap-editor .ProseMirror ol ol {
list-style: lower-alpha;
}
.minimal-tiptap-editor .ProseMirror ol ol ol {
list-style: lower-roman;
}
.minimal-tiptap-editor .ProseMirror ul {
list-style: disc;
}
.minimal-tiptap-editor .ProseMirror ul ul {
list-style: circle;
}
.minimal-tiptap-editor .ProseMirror ul ul ul {
list-style: square;
}
.minimal-tiptap-editor .ProseMirror>p.is-editor-empty::before {
content: attr(data-placeholder);
@apply pointer-events-none float-left h-0 text-[var(--mt-secondary)];
}
.minimal-tiptap-editor .ProseMirror .heading-node {
@apply relative font-semibold;
}
.minimal-tiptap-editor .ProseMirror .heading-node:first-child {
@apply mt-0;
}
.minimal-tiptap-editor .ProseMirror h1 {
@apply mb-4 mt-[46px] mb-[23px] text-[1.975rem] leading-12 tracking-[-0.004375rem];
}
.minimal-tiptap-editor .ProseMirror h2 {
@apply mb-3.5 mt-8 text-[1.3375rem] leading-7 tracking-[0.003125rem];
}
.minimal-tiptap-editor .ProseMirror h3 {
@apply mb-3 mt-6 text-[1.0625rem] leading-6 tracking-[0.00625rem];
}
.minimal-tiptap-editor .ProseMirror h4 {
@apply mb-2 mt-4 text-[0.9375rem] leading-6;
}
.minimal-tiptap-editor .ProseMirror h5 {
@apply mb-2 mt-4 text-sm;
}
.minimal-tiptap-editor .ProseMirror a.link {
@apply cursor-pointer text-primary;
}
.minimal-tiptap-editor .ProseMirror a.link:hover {
@apply underline;
}
[data-rmiz-ghost] {
position: absolute;
pointer-events: none;
}
[data-rmiz-btn-zoom],
[data-rmiz-btn-unzoom] {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
border: none;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
color: #fff;
height: 40px;
margin: 0;
outline-offset: 2px;
padding: 9px;
touch-action: manipulation;
width: 40px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
[data-rmiz-btn-zoom]:not(:focus):not(:active) {
position: absolute;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
pointer-events: none;
white-space: nowrap;
width: 1px;
}
[data-rmiz-btn-zoom] {
position: absolute;
inset: 10px 10px auto auto;
cursor: zoom-in;
}
[data-rmiz-btn-unzoom] {
position: absolute;
inset: 20px 20px auto auto;
cursor: zoom-out;
z-index: 1;
}
[data-rmiz-content="found"] img,
[data-rmiz-content="found"] svg,
[data-rmiz-content="found"] [role="img"],
[data-rmiz-content="found"] [data-zoom] {
cursor: inherit;
}
[data-rmiz-modal]::backdrop {
display: none;
}
[data-rmiz-modal][open] {
position: fixed;
width: 100vw;
width: 100dvw;
height: 100vh;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
}
[data-rmiz-modal-overlay] {
position: absolute;
inset: 0;
transition: background-color 0.3s;
}
[data-rmiz-modal-overlay="hidden"] {
background-color: rgba(255, 255, 255, 0);
}
[data-rmiz-modal-overlay="visible"] {
background-color: rgba(255, 255, 255, 1);
}
[data-rmiz-modal-content] {
position: relative;
width: 100%;
height: 100%;
}
[data-rmiz-modal-img] {
position: absolute;
cursor: zoom-out;
image-rendering: high-quality;
transform-origin: top left;
transition: transform 0.3s;
}
@media (prefers-reduced-motion: reduce) {
[data-rmiz-modal-overlay],
[data-rmiz-modal-img] {
transition-duration: 0.01ms !important;
}
}
:root {
--background: oklch(.99 0 0);
--foreground: oklch(0.27 0 0);
--card: oklch(1.40 0 0);
--card-foreground: oklch(0.27 0 0);
--popover: oklch(21.00 0 0);
--popover-foreground: oklch(0.27 0 0);
--primary: oklch(0.6397 0.1720 36.4421);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.97 0.00 264.54);
--secondary-foreground: oklch(0.45 0.03 256.80);
--muted: oklch(0.98 0.00 247.84);
--muted-foreground: oklch(0.55 0.02 264.36);
--accent: oklch(0.99 0.02 95.28);
--accent-foreground: oklch(0.47 0.12 46.20);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.93 0.01 264.53);
--input: oklch(0.93 0.01 264.53);
--ring: oklch(0.77 0.16 70.08);
--chart-1: oklch(0.77 0.16 70.08);
--chart-2: oklch(0.67 0.16 58.32);
--chart-3: oklch(0.56 0.15 49.00);
--chart-4: oklch(0.47 0.12 46.20);
--chart-5: oklch(0.41 0.11 45.90);
--sidebar: oklch(0.98 0.00 247.84);
--sidebar-foreground: oklch(0.27 0 0);
--sidebar-primary: oklch(0.77 0.16 70.08);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.99 0.02 95.28);
--sidebar-accent-foreground: oklch(0.47 0.12 46.20);
--sidebar-border: oklch(0.93 0.01 264.53);
--sidebar-ring: oklch(0.77 0.16 70.08);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.580rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
.dark {
--background: oklch(0.22 0 0);
--foreground: oklch(0.92 0 0);
--card: oklch(0.23 0 0);
--card-foreground: oklch(0.92 0 0);
--popover: oklch(0.27 0 0);
--popover-foreground: oklch(0.92 0 0);
--primary: oklch(0.6397 0.1720 36.4421);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.27 0 0);
--secondary-foreground: oklch(0.92 0 0);
--muted: oklch(0.27 0 0);
--muted-foreground: oklch(0.72 0 0);
--accent: oklch(0.47 0.12 46.20);
--accent-foreground: oklch(0.92 0.12 95.75);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.29 0 0);
--input: oklch(0.37 0 0);
--ring: oklch(0.77 0.16 70.08);
--chart-1: oklch(0.84 0.16 84.43);
--chart-2: oklch(0.67 0.16 58.32);
--chart-3: oklch(0.47 0.12 46.20);
--chart-4: oklch(0.56 0.15 49.00);
--chart-5: oklch(0.47 0.12 46.20);
--sidebar: oklch(0.17 0 0);
--sidebar-foreground: oklch(0.92 0 0);
--sidebar-primary: oklch(0.77 0.16 70.08);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.47 0.12 46.20);
--sidebar-accent-foreground: oklch(0.92 0.12 95.75);
--sidebar-border: oklch(0.37 0 0);
--sidebar-ring: oklch(0.77 0.16 70.08);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.580rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
--xy-edge-label-background-color: var(--background) !important;
}
.minimal-tiptap-editor .ProseMirror {
@apply flex max-w-full cursor-text flex-col;
@apply z-0 outline-0;
}
.minimal-tiptap-editor .ProseMirror>div.editor {
@apply block flex-1 whitespace-pre-wrap;
}
.minimal-tiptap-editor .ProseMirror .block-node:not(:last-child),
.minimal-tiptap-editor .ProseMirror .list-node:not(:last-child),
.minimal-tiptap-editor .ProseMirror .text-node:not(:last-child) {
@apply mb-2.5;
}
.minimal-tiptap-editor .ProseMirror ol,
.minimal-tiptap-editor .ProseMirror ul {
@apply pl-6;
}
.minimal-tiptap-editor .ProseMirror blockquote,
.minimal-tiptap-editor .ProseMirror dl,
.minimal-tiptap-editor .ProseMirror ol,
.minimal-tiptap-editor .ProseMirror p,
.minimal-tiptap-editor .ProseMirror pre,
.minimal-tiptap-editor .ProseMirror ul {
@apply m-0;
}
.minimal-tiptap-editor .ProseMirror li {
@apply leading-7;
}
.minimal-tiptap-editor .ProseMirror p {
@apply break-words;
}
.minimal-tiptap-editor .ProseMirror li .text-node:has(+ .list-node),
.minimal-tiptap-editor .ProseMirror li>.list-node,
.minimal-tiptap-editor .ProseMirror li>.text-node,
.minimal-tiptap-editor .ProseMirror li p {
@apply mb-0;
}
.minimal-tiptap-editor .ProseMirror blockquote {
@apply relative pl-3.5;
}
.minimal-tiptap-editor .ProseMirror blockquote::before,
.minimal-tiptap-editor .ProseMirror blockquote.is-empty::before {
@apply absolute bottom-0 left-0 top-0 h-full w-1 rounded-sm bg-accent-foreground/15 content-[''];
}
.minimal-tiptap-editor .ProseMirror hr {
@apply my-3 h-0.5 w-full border-none bg-[var(--mt-hr)];
}
.minimal-tiptap-editor .ProseMirror-focused hr.ProseMirror-selectednode {
@apply rounded-full outline outline-2 outline-offset-1 outline-muted-foreground;
}
.minimal-tiptap-editor .ProseMirror .ProseMirror-gapcursor {
@apply pointer-events-none absolute hidden;
}
.minimal-tiptap-editor .ProseMirror .ProseMirror-hideselection {
@apply caret-transparent;
}
.minimal-tiptap-editor .ProseMirror.resize-cursor {
@apply cursor-col-resize;
}
.minimal-tiptap-editor .ProseMirror .selection {
@apply inline-block;
}
.minimal-tiptap-editor .ProseMirror s span {
@apply line-through;
}
.minimal-tiptap-editor .ProseMirror .selection,
.minimal-tiptap-editor .ProseMirror *::selection {
@apply bg-primary/25;
}
/* Override native selection when custom selection is present */
.minimal-tiptap-editor .ProseMirror .selection::selection {
background: transparent;
}
/* Basic editor styles */
.tiptap> :first-child {
margin-top: 0;
}
.tiptap pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
}
.tiptap pre code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
/* Code styling */
.tiptap pre .hljs-comment,
.tiptap pre .hljs-quote {
color: #616161;
}
.tiptap pre .hljs-variable,
.tiptap pre .hljs-template-variable,
.tiptap pre .hljs-attribute,
.tiptap pre .hljs-tag,
.tiptap pre .hljs-regexp,
.tiptap pre .hljs-link,
.tiptap pre .hljs-name,
.tiptap pre .hljs-selector-id,
.tiptap pre .hljs-selector-class {
color: #f98181;
}
.tiptap pre .hljs-number,
.tiptap pre .hljs-meta,
.tiptap pre .hljs-built_in,
.tiptap pre .hljs-builtin-name,
.tiptap pre .hljs-literal,
.tiptap pre .hljs-type,
.tiptap pre .hljs-params {
color: #fbbc88;
}
.tiptap pre .hljs-string,
.tiptap pre .hljs-symbol,
.tiptap pre .hljs-bullet {
color: #b9f18d;
}
.tiptap pre .hljs-title,
.tiptap pre .hljs-section {
color: #faf594;
}
.tiptap pre .hljs-keyword,
.tiptap pre .hljs-selector-tag {
color: #70cff8;
}
.tiptap pre .hljs-emphasis {
font-style: italic;
}
.tiptap pre .hljs-strong {
font-weight: 700;
}
.tr {
display: flex;
}
th,
.th {
position: relative;
}
.resizer {
position: absolute;
top: 0;
height: 100%;
right: 0;
width: 5px;
background: rgba(0, 0, 0, 0.5);
cursor: col-resize;
user-select: none;
touch-action: none;
}
.resizer.isResizing {
background: var(--primary);
opacity: 1;
}
@media (hover: hover) {
.resizer {
opacity: 0;
}
*:hover>.resizer {
opacity: 1;
}
}
.simple-floatingedges {
flex-direction: column;
display: flex;
flex-grow: 1;
height: 100%;
}
.simple-floatingedges .react-flow__handle {
width: 8px;
height: 8px;
}
.simple-floatingedges .react-flow__handle-top {
top: -15px;
}
.simple-floatingedges .react-flow__handle-bottom {
bottom: -15px;
}
.simple-floatingedges .react-flow__handle-left {
left: -15px;
}
.simple-floatingedges .react-flow__handle-right {
right: -15px;
}
.hide-scrollbar {
/* Webkit browsers (Chrome, Safari, Edge) */
-webkit-scrollbar {
display: none;
}
/* Firefox */
scrollbar-width: none;
/* IE and Edge */
-ms-overflow-style: none;
}
/* Floating Chat Animation */
@keyframes slideInFromBottomRight {
0% {
opacity: 0;
/* transform: translate(100%, 100%) scale(0.1); */
}
100% {
opacity: 1;
/* transform: translate(0, 0) scale(1); */
}
}
.floating-chat-animation {
animation: slideInFromBottomRight 0.1s ease-out forwards;
transform-origin: bottom right;
}
body {
letter-spacing: var(--tracking-normal);
}
code,
pre {
@apply p-0;
}
.react-flow__minimap {
@apply rounded-2xl overflow-hidden bg-background border border-border;
}
body {
letter-spacing: var(--tracking-normal);
}
.tool-overlay {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
z-index: 4;
height: 100%;
width: 100%;
transform-origin: top left;
touch-action: none;
}