mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-06 05:49:12 +02:00
87 lines
2.3 KiB
CSS
87 lines
2.3 KiB
CSS
/*
|
|
* Editor shell and floating chrome.
|
|
*
|
|
* This file owns ProseMirror root behavior, placeholder text, NodeView layout,
|
|
* and editor-only floating controls. Rich prose typography lives in prose.css.
|
|
*/
|
|
|
|
.rich-text-editor.ProseMirror {
|
|
color: var(--foreground);
|
|
caret-color: var(--foreground);
|
|
}
|
|
|
|
.rich-text-editor.ProseMirror:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Placeholder */
|
|
.rich-text-editor .is-editor-empty:first-child::before {
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
color: var(--muted-foreground);
|
|
pointer-events: none;
|
|
height: 0;
|
|
}
|
|
|
|
/* Readonly mode overrides */
|
|
.rich-text-editor.readonly.ProseMirror {
|
|
caret-color: transparent;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Mention NodeView inline layout fix */
|
|
.rich-text-editor [data-node-view-wrapper] {
|
|
display: inline;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Block-level NodeViews (fileCard) need to override the inline default above */
|
|
.rich-text-editor .file-card-node {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Bubble menu — floating toolbar pill */
|
|
.bubble-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1px;
|
|
padding: 0.25rem;
|
|
background: var(--popover);
|
|
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
border-radius: var(--radius);
|
|
box-shadow:
|
|
0 4px 12px color-mix(in srgb, black 12%, transparent),
|
|
0 0 0 1px color-mix(in srgb, black 4%, transparent);
|
|
}
|
|
|
|
/* Link edit mode — inline URL input */
|
|
.bubble-menu-link-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
background: var(--popover);
|
|
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
border-radius: var(--radius);
|
|
box-shadow:
|
|
0 4px 12px color-mix(in srgb, black 12%, transparent),
|
|
0 0 0 1px color-mix(in srgb, black 4%, transparent);
|
|
min-width: 300px;
|
|
}
|
|
|
|
/* Link hover card — shows URL + actions on link hover */
|
|
.link-hover-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.25rem 0.25rem 0.5rem;
|
|
background: var(--popover);
|
|
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
border-radius: var(--radius);
|
|
box-shadow:
|
|
0 4px 12px color-mix(in srgb, black 12%, transparent),
|
|
0 0 0 1px color-mix(in srgb, black 4%, transparent);
|
|
max-width: min(360px, calc(100vw - 2rem));
|
|
white-space: nowrap;
|
|
}
|