tianma-if
a10267b0d6
Keep [due:: YYYY-MM-DD] in the Markdown, but decorate the live editor with compact labels. Clicking a chip reveals the raw field to edit.
2150 lines
57 KiB
CSS
2150 lines
57 KiB
CSS
@import "highlight.js/styles/github.css";
|
|
@import "./editor-themes/index.css";
|
|
@import "./code-highlight-dark.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@keyframes edgeever-token-created {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-0.625rem);
|
|
background-color: rgb(209 250 229 / 90%);
|
|
box-shadow: inset 0 0 0 1px rgb(52 211 153 / 55%);
|
|
}
|
|
24% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
background-color: rgb(209 250 229 / 75%);
|
|
box-shadow: inset 0 0 0 1px rgb(52 211 153 / 45%);
|
|
}
|
|
68% {
|
|
background-color: rgb(236 253 245 / 72%);
|
|
box-shadow: inset 0 0 0 1px rgb(110 231 183 / 30%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0 0 1px transparent;
|
|
}
|
|
}
|
|
|
|
.edgeever-token-created {
|
|
animation: edgeever-token-created 2.2s ease-out;
|
|
}
|
|
|
|
html[data-edgeever-environment="local"] body::after,
|
|
html[data-edgeever-environment="demo"] body::after {
|
|
position: fixed;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
z-index: 2147483647;
|
|
border-radius: 9999px;
|
|
padding: 4px 9px;
|
|
font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
letter-spacing: 0.08em;
|
|
pointer-events: none;
|
|
box-shadow: 0 2px 8px rgb(15 23 42 / 10%);
|
|
}
|
|
|
|
html[data-edgeever-environment="local"] body::after {
|
|
content: "LOCAL DEV";
|
|
border: 1px solid rgb(16 185 129 / 45%);
|
|
background: rgb(236 253 245 / 94%);
|
|
color: rgb(4 120 87);
|
|
}
|
|
|
|
html[data-edgeever-environment="demo"] body::after {
|
|
content: "LOCAL DEMO";
|
|
border: 1px solid rgb(245 158 11 / 50%);
|
|
background: rgb(255 251 235 / 96%);
|
|
color: rgb(180 83 9);
|
|
}
|
|
|
|
html.dark[data-edgeever-environment="local"] body::after {
|
|
border-color: rgb(22 160 110 / 42%);
|
|
background: rgb(18 42 36 / 92%);
|
|
color: #9ee0c8;
|
|
box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
|
|
}
|
|
|
|
html.dark[data-edgeever-environment="demo"] body::after {
|
|
border-color: rgb(217 119 6 / 48%);
|
|
background: rgb(69 26 3 / 88%);
|
|
color: #fde68a;
|
|
box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
|
|
}
|
|
|
|
.ProseMirror .tiptap-mathematics-render[data-type="block-math"] {
|
|
max-width: 100%;
|
|
margin: 1rem 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: 0.25rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.ProseMirror .tiptap-mathematics-render--editable {
|
|
cursor: text;
|
|
}
|
|
|
|
.ProseMirror .inline-math-error,
|
|
.ProseMirror .block-math-error {
|
|
color: #be123c;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
:root.dark .ProseMirror .inline-math-error,
|
|
:root.dark .ProseMirror .block-math-error {
|
|
color: #fda4af;
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 96%;
|
|
--foreground: 0 0% 13%;
|
|
--brand-green: #16a06e;
|
|
--brand-green-hover: #12845b;
|
|
--brand-green-muted: #def1e9;
|
|
--brand-green-soft: #f0f8f4;
|
|
--brand-green-border: #b8dfd0;
|
|
--brand-green-text: #11694a;
|
|
--brand-green-rgb: 22 160 110;
|
|
--brand-green-hover-rgb: 18 132 91;
|
|
--brand-green-50-rgb: 240 248 244;
|
|
--brand-green-100-rgb: 222 241 233;
|
|
--brand-green-200-rgb: 184 223 208;
|
|
--brand-green-300-rgb: 125 196 170;
|
|
--brand-green-400-rgb: 62 174 134;
|
|
--brand-green-500-rgb: 22 160 110;
|
|
--brand-green-600-rgb: 18 132 91;
|
|
--brand-green-700-rgb: 17 105 74;
|
|
--brand-green-800-rgb: 17 83 60;
|
|
--brand-green-900-rgb: 15 68 50;
|
|
--brand-green-950-rgb: 7 37 28;
|
|
--workspace-canvas: #f8f9fa;
|
|
--workspace-sidebar: #f8f9fa;
|
|
--workspace-memo-list: #fafafa;
|
|
--workspace-editor: #ffffff;
|
|
--workspace-divider: #e9ebed;
|
|
--workspace-memo-divider: #edf0f2;
|
|
--workspace-selection: #edf0f2;
|
|
--tooltip-bg: #1a1f1c;
|
|
--tooltip-fg: #f4f7f5;
|
|
--scrollbar-thumb: rgb(115 115 115 / 0.28);
|
|
--scrollbar-thumb-hover: rgb(115 115 115 / 0.42);
|
|
--search-match: rgb(254 240 138 / 0.8);
|
|
--search-match-active: rgb(251 191 36 / 0.9);
|
|
--switch-thumb: #ffffff;
|
|
--slate-50-rgb: 250 250 250;
|
|
--slate-100-rgb: 245 245 245;
|
|
--slate-200-rgb: 229 229 229;
|
|
--slate-300-rgb: 212 212 212;
|
|
--slate-400-rgb: 166 166 166;
|
|
--slate-500-rgb: 115 115 115;
|
|
--slate-600-rgb: 82 82 82;
|
|
--slate-700-rgb: 64 64 64;
|
|
--slate-800-rgb: 38 38 38;
|
|
--slate-900-rgb: 24 24 24;
|
|
--slate-950-rgb: 10 10 10;
|
|
--amber-50-rgb: 255 251 235;
|
|
--amber-100-rgb: 254 243 199;
|
|
--amber-200-rgb: 253 230 138;
|
|
--amber-600-rgb: 217 119 6;
|
|
--amber-700-rgb: 180 83 9;
|
|
--amber-800-rgb: 146 64 14;
|
|
--amber-900-rgb: 120 53 15;
|
|
--amber-950-rgb: 69 26 3;
|
|
--rose-50-rgb: 255 241 242;
|
|
--rose-100-rgb: 255 228 230;
|
|
--rose-200-rgb: 254 205 211;
|
|
--rose-500-rgb: 244 63 94;
|
|
--rose-600-rgb: 225 29 72;
|
|
--rose-700-rgb: 190 18 60;
|
|
--rose-800-rgb: 159 18 57;
|
|
--rose-950-rgb: 76 5 25;
|
|
--blue-600-rgb: 37 99 235;
|
|
--dark-surface-rgb: 255 255 255;
|
|
--editor-body-font-size: 0.9375rem;
|
|
--editor-body-line-height: 1.6;
|
|
--editor-paragraph-spacing: 0.35rem;
|
|
--memo-content-divider-color: rgb(var(--brand-green-300-rgb));
|
|
--memo-content-divider-spacing: 1.5rem;
|
|
--editor-outline-width: 300px;
|
|
--editor-content-max-width: 880px;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 13%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 13%;
|
|
|
|
--primary: 158 76% 36%;
|
|
--primary-foreground: 80 11% 96%;
|
|
|
|
--secondary: 158 32% 94%;
|
|
--secondary-foreground: 158 70% 25%;
|
|
|
|
--muted: 0 0% 95%;
|
|
--muted-foreground: 0 0% 40%;
|
|
|
|
--accent: 158 32% 94%;
|
|
--accent-foreground: 158 70% 25%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--border: 0 0% 88%;
|
|
--input: 0 0% 88%;
|
|
--ring: 158 76% 36%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
:root.dark {
|
|
color-scheme: dark;
|
|
--background: 150 8% 8%;
|
|
--foreground: 144 9% 88%;
|
|
--card: 150 10% 13%;
|
|
--card-foreground: 144 9% 88%;
|
|
--popover: 150 10% 14%;
|
|
--popover-foreground: 144 9% 88%;
|
|
--primary: 160 76% 36%;
|
|
--primary-foreground: 150 33% 97%;
|
|
--secondary: 150 10% 18%;
|
|
--secondary-foreground: 160 35% 72%;
|
|
--muted: 150 8% 18%;
|
|
--muted-foreground: 145 8% 62%;
|
|
--accent: 150 10% 20%;
|
|
--accent-foreground: 160 40% 75%;
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 144 12% 96%;
|
|
--border: 150 10% 23%;
|
|
--input: 150 10% 23%;
|
|
--ring: 160 76% 36%;
|
|
--workspace-canvas: #101311;
|
|
--workspace-sidebar: #121612;
|
|
--workspace-memo-list: #151a17;
|
|
--workspace-editor: #191e1b;
|
|
--workspace-divider: #2a312d;
|
|
--workspace-memo-divider: #3b4540;
|
|
--workspace-selection: #1d3028;
|
|
--tooltip-bg: #252c28;
|
|
--tooltip-fg: #e9efeb;
|
|
--scrollbar-thumb: rgb(137 150 142 / 0.38);
|
|
--scrollbar-thumb-hover: rgb(137 150 142 / 0.55);
|
|
--search-match: rgb(22 160 110 / 0.32);
|
|
--search-match-active: rgb(36 185 134 / 0.48);
|
|
--switch-thumb: #eef2ef;
|
|
--slate-50-rgb: 15 20 17;
|
|
--slate-100-rgb: 21 28 24;
|
|
--slate-200-rgb: 38 49 43;
|
|
--slate-300-rgb: 110 124 116;
|
|
--slate-400-rgb: 132 148 138;
|
|
--slate-500-rgb: 154 169 160;
|
|
--slate-600-rgb: 182 195 187;
|
|
--slate-700-rgb: 202 212 206;
|
|
--slate-800-rgb: 221 229 224;
|
|
--slate-900-rgb: 233 239 235;
|
|
--slate-950-rgb: 238 243 240;
|
|
--amber-50-rgb: 69 26 3;
|
|
--amber-100-rgb: 80 30 5;
|
|
--amber-200-rgb: 146 64 14;
|
|
--amber-600-rgb: 253 230 138;
|
|
--amber-700-rgb: 253 230 138;
|
|
--amber-800-rgb: 252 211 77;
|
|
--amber-900-rgb: 254 243 199;
|
|
--amber-950-rgb: 255 251 235;
|
|
--rose-50-rgb: 76 5 25;
|
|
--rose-100-rgb: 88 8 30;
|
|
--rose-200-rgb: 136 19 55;
|
|
--rose-500-rgb: 253 164 175;
|
|
--rose-600-rgb: 253 164 175;
|
|
--rose-700-rgb: 254 205 211;
|
|
--rose-800-rgb: 254 205 211;
|
|
--rose-950-rgb: 255 241 242;
|
|
--blue-600-rgb: 147 197 253;
|
|
--dark-surface-rgb: 25 30 27;
|
|
--brand-green: #16a06e;
|
|
--brand-green-hover: #24b986;
|
|
--brand-green-muted: #183a31;
|
|
--brand-green-soft: #122a24;
|
|
--brand-green-border: #286451;
|
|
--brand-green-text: #68d6b0;
|
|
--brand-green-rgb: 22 160 110;
|
|
--brand-green-hover-rgb: 36 185 134;
|
|
--brand-green-50-rgb: 18 42 36;
|
|
--brand-green-100-rgb: 24 58 49;
|
|
--brand-green-200-rgb: 40 100 81;
|
|
--brand-green-300-rgb: 58 181 139;
|
|
--brand-green-400-rgb: 104 214 176;
|
|
--brand-green-500-rgb: 22 160 110;
|
|
--brand-green-600-rgb: 36 185 134;
|
|
--brand-green-700-rgb: 104 214 176;
|
|
--brand-green-800-rgb: 159 229 204;
|
|
--brand-green-900-rgb: 202 242 225;
|
|
--brand-green-950-rgb: 232 249 241;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Public share pages are standalone and must scroll the document. */
|
|
html:has(.edgeever-public-share),
|
|
html:has(.edgeever-public-share) body,
|
|
html:has(.edgeever-public-share) #root {
|
|
height: auto;
|
|
min-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
html.edgeever-mobile-native-editing,
|
|
html.edgeever-mobile-native-editing body,
|
|
html.edgeever-mobile-native-editing #root {
|
|
min-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--workspace-canvas);
|
|
color: hsl(var(--foreground));
|
|
overscroll-behavior-x: none;
|
|
overscroll-behavior-y: auto;
|
|
}
|
|
|
|
::selection {
|
|
background-color: rgb(var(--brand-green-rgb) / 0.18);
|
|
color: inherit;
|
|
}
|
|
|
|
:root.dark ::selection {
|
|
background-color: rgb(var(--brand-green-rgb) / 0.28);
|
|
color: inherit;
|
|
}
|
|
|
|
/* Installed theme packages only target this documented token layer. Keeping
|
|
* the selectors here lets themes survive component refactors without gaining
|
|
* arbitrary DOM or JavaScript access. */
|
|
html[data-edgeever-extension-theme] {
|
|
--radius: var(--edgeever-theme-radius, 0.5rem);
|
|
font-family: var(--edgeever-theme-font-body, inherit);
|
|
font-size: var(--edgeever-theme-font-size, 100%);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] body {
|
|
background: var(--edgeever-theme-background, #f8fafc);
|
|
color: var(--edgeever-theme-text, #0f172a);
|
|
line-height: var(--edgeever-theme-line-height, normal);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .bg-white,
|
|
html[data-edgeever-extension-theme] .bg-card,
|
|
html[data-edgeever-extension-theme] .bg-slate-50,
|
|
html[data-edgeever-extension-theme] .bg-slate-50\/50 {
|
|
background-color: var(--edgeever-theme-surface, #fff);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .bg-slate-100,
|
|
html[data-edgeever-extension-theme] .bg-slate-100\/80,
|
|
html[data-edgeever-extension-theme] .bg-slate-200\/50 {
|
|
background-color: var(--edgeever-theme-surface-muted, #f1f5f9);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .text-slate-700,
|
|
html[data-edgeever-extension-theme] .text-slate-800,
|
|
html[data-edgeever-extension-theme] .text-slate-900,
|
|
html[data-edgeever-extension-theme] .text-slate-950 {
|
|
color: var(--edgeever-theme-text, #0f172a);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .text-slate-400,
|
|
html[data-edgeever-extension-theme] .text-slate-500,
|
|
html[data-edgeever-extension-theme] .text-slate-600 {
|
|
color: var(--edgeever-theme-text-muted, #64748b);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .border-slate-100,
|
|
html[data-edgeever-extension-theme] .border-slate-200,
|
|
html[data-edgeever-extension-theme] .border-slate-300,
|
|
html[data-edgeever-extension-theme] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
|
|
html[data-edgeever-extension-theme] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
|
|
border-color: var(--edgeever-theme-border, #e2e8f0);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .bg-emerald-500,
|
|
html[data-edgeever-extension-theme] .bg-emerald-600,
|
|
html[data-edgeever-extension-theme] .bg-emerald-700 {
|
|
background-color: var(--edgeever-theme-accent, #16a06e);
|
|
color: var(--edgeever-theme-accent-foreground, #fff);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .text-emerald-600,
|
|
html[data-edgeever-extension-theme] .text-emerald-700,
|
|
html[data-edgeever-extension-theme] .text-emerald-800 {
|
|
color: var(--edgeever-theme-accent, #16a06e);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] code,
|
|
html[data-edgeever-extension-theme] pre,
|
|
html[data-edgeever-extension-theme] kbd {
|
|
font-family: var(--edgeever-theme-font-mono, ui-monospace, monospace);
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* Keep the three-pane desktop workspace usable on compact laptop screens.
|
|
* The notebook and memo columns may shrink, while the editor always keeps
|
|
* the remaining width instead of being clipped by fixed tracks.
|
|
*/
|
|
.edgeever-workspace-grid--focus {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.edgeever-workspace-shell {
|
|
background: var(--workspace-canvas);
|
|
}
|
|
|
|
.edgeever-workspace-sidebar {
|
|
border-color: var(--workspace-divider);
|
|
background: var(--workspace-sidebar);
|
|
}
|
|
|
|
.edgeever-workspace-memo-list {
|
|
border-color: var(--workspace-divider);
|
|
background: var(--workspace-memo-list);
|
|
}
|
|
|
|
.edgeever-workspace-editor {
|
|
background: var(--workspace-editor);
|
|
}
|
|
|
|
.edgeever-workspace-sidebar-footer {
|
|
background: color-mix(in srgb, var(--workspace-sidebar) 92%, transparent);
|
|
}
|
|
|
|
.edgeever-workspace-selection {
|
|
background: var(--workspace-selection);
|
|
}
|
|
|
|
.edgeever-memo-divider {
|
|
border-bottom-color: var(--workspace-memo-divider) !important;
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-memo-list .edgeever-memo-divider {
|
|
border-bottom-color: var(--workspace-memo-divider) !important;
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-shell {
|
|
background: var(--edgeever-theme-background, var(--workspace-canvas));
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-sidebar,
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-memo-list {
|
|
border-color: var(--edgeever-theme-border, var(--workspace-divider));
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-sidebar {
|
|
background: var(--edgeever-theme-surface-muted, var(--workspace-sidebar));
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-memo-list,
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-editor {
|
|
background: var(--edgeever-theme-surface, var(--workspace-editor));
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-selection {
|
|
background: var(--edgeever-theme-surface-muted, var(--workspace-selection));
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-memo-divider {
|
|
border-bottom-color: var(--edgeever-theme-border, var(--workspace-memo-divider)) !important;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.edgeever-workspace-grid--editor {
|
|
grid-template-columns:
|
|
clamp(180px, 17vw, 260px)
|
|
clamp(240px, 23vw, var(--memo-list-width))
|
|
minmax(0, 1fr);
|
|
}
|
|
|
|
.edgeever-workspace-grid--single-right {
|
|
grid-template-columns: clamp(180px, 17vw, 260px) minmax(0, 1fr);
|
|
}
|
|
|
|
.edgeever-workspace-selection-desktop {
|
|
background: var(--workspace-selection);
|
|
}
|
|
|
|
html[data-edgeever-extension-theme] .edgeever-workspace-selection-desktop {
|
|
background: var(--edgeever-theme-surface-muted, var(--workspace-selection));
|
|
}
|
|
}
|
|
|
|
:root.dark body {
|
|
background: var(--workspace-canvas);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-shell {
|
|
background: var(--workspace-canvas);
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-sidebar {
|
|
background: var(--workspace-sidebar);
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-memo-list {
|
|
background: var(--workspace-memo-list);
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-editor {
|
|
background: var(--workspace-editor);
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-sidebar,
|
|
:root.dark .edgeever-workspace-memo-list {
|
|
border-color: var(--workspace-divider);
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-sidebar-footer {
|
|
background: color-mix(in srgb, var(--workspace-sidebar) 90%, transparent);
|
|
}
|
|
|
|
:root.dark .edgeever-workspace-selection,
|
|
:root.dark .edgeever-workspace-selection-desktop {
|
|
background: var(--workspace-selection) !important;
|
|
}
|
|
|
|
/* X6 ships blue/orange interaction chrome. Keep the engine behavior while
|
|
* making selection and keyboard focus belong to EdgeEver's visual system. */
|
|
.edgeever-diagram-canvas:focus-visible {
|
|
box-shadow: inset 0 0 0 2px rgb(var(--brand-green-rgb) / 0.5);
|
|
}
|
|
|
|
/* X6 owns the scroll extent so oversized diagrams remain reachable in both
|
|
* directions while the editor chrome stays fixed around the viewport. */
|
|
.edgeever-diagram-scroller {
|
|
position: absolute !important;
|
|
inset: 0;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.edgeever-diagram-scroller .edgeever-diagram-canvas {
|
|
cursor: default;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-space-pan="active"]:not([data-architecture-placement="active"]) {
|
|
cursor: grab;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-shift-select="active"]:not([data-architecture-placement="active"]) {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.edgeever-diagram-scroller[data-panning="true"] .edgeever-diagram-canvas,
|
|
.edgeever-diagram-canvas[data-space-pan="active"][data-panning="true"] {
|
|
cursor: grabbing !important;
|
|
}
|
|
|
|
.edgeever-diagram-canvas .x6-widget-selection-rubberband {
|
|
border-color: var(--brand-green) !important;
|
|
background-color: var(--brand-green-muted) !important;
|
|
}
|
|
|
|
.edgeever-diagram-canvas .x6-widget-selection-box,
|
|
.edgeever-diagram-canvas .x6-widget-selection-inner {
|
|
border-color: var(--brand-green) !important;
|
|
box-shadow: 0 2px 8px rgb(var(--brand-green-rgb) / 0.18) !important;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-theme="ink"] .x6-widget-selection-box,
|
|
.edgeever-diagram-canvas[data-diagram-theme="ink"] .x6-widget-selection-inner {
|
|
border-color: #68d6b0 !important;
|
|
box-shadow: 0 2px 10px rgb(104 214 176 / 0.22) !important;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .x6-widget-selection-box-node,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .x6-widget-selection-box-node {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.edgeever-diagram-canvas .x6-port-body {
|
|
opacity: 0;
|
|
transition: opacity 120ms ease, filter 120ms ease;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .x6-port-body,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .x6-port-body {
|
|
cursor: crosshair;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .edgeever-flow-port-hit-area,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .edgeever-flow-port-hit-area {
|
|
fill: transparent;
|
|
stroke: transparent;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .edgeever-flow-port-dot,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .edgeever-flow-port-dot {
|
|
pointer-events: none;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
transition: filter 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .x6-node.edgeever-flow-node-active .edgeever-flow-port-dot,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .x6-node.edgeever-flow-node-active .edgeever-flow-port-dot {
|
|
fill: var(--brand-green) !important;
|
|
stroke: var(--workspace-editor) !important;
|
|
stroke-width: 2px !important;
|
|
filter: drop-shadow(0 1px 3px rgb(var(--brand-green-rgb) / 0.3));
|
|
}
|
|
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .x6-port-body:hover .edgeever-flow-port-dot,
|
|
.edgeever-diagram-canvas[data-diagram-kind="flowchart"] .x6-available-magnet + .edgeever-flow-port-dot,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .x6-port-body:hover .edgeever-flow-port-dot,
|
|
.edgeever-diagram-canvas[data-diagram-kind="architecture"] .x6-available-magnet + .edgeever-flow-port-dot {
|
|
filter: drop-shadow(0 1px 3px rgb(var(--brand-green-rgb) / 0.28));
|
|
transform: scale(1.12);
|
|
}
|
|
|
|
/* Curated reading themes should feel like part of the note canvas in dark
|
|
* mode. Custom themes keep their explicit background as an intentional user
|
|
* choice, while bundled themes contribute typography and semantic colors. */
|
|
:root.dark .edgeever-editor[data-editor-theme]:not([data-editor-theme="default"]):not([data-editor-theme="custom"]) {
|
|
--editor-theme-bg: var(--workspace-editor);
|
|
}
|
|
|
|
:root.dark .ProseMirror,
|
|
:root.dark .ProseMirror h1,
|
|
:root.dark .ProseMirror h2,
|
|
:root.dark .ProseMirror h3 {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.ProseMirror {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
color: #27272a;
|
|
font-size: var(--editor-body-font-size);
|
|
line-height: var(--editor-body-line-height);
|
|
min-height: 100%;
|
|
outline: none;
|
|
padding: 8px 0 56px;
|
|
tab-size: 4;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.edgeever-public-share .ProseMirror {
|
|
min-height: 0;
|
|
padding: 8px 20px 40px;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.edgeever-public-share .ProseMirror [data-edgeever-theme-block] {
|
|
margin: 1.25rem 0;
|
|
border: 1px solid #dbeee5;
|
|
border-radius: 6px;
|
|
background: #fbfefc;
|
|
padding: 0.8rem 1rem;
|
|
}
|
|
|
|
.edgeever-public-share .ProseMirror [data-theme-block-kind="chapter"] {
|
|
border-left: 4px solid var(--brand-green);
|
|
background: var(--brand-green-soft);
|
|
}
|
|
|
|
:root.dark .edgeever-public-share .ProseMirror {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .edgeever-public-share .ProseMirror [data-edgeever-theme-block] {
|
|
border-color: var(--workspace-divider);
|
|
background: var(--workspace-sidebar);
|
|
}
|
|
|
|
:root.dark .edgeever-public-share .ProseMirror [data-theme-block-kind="chapter"] {
|
|
border-left-color: var(--brand-green);
|
|
background: var(--brand-green-soft);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.edgeever-public-share .ProseMirror {
|
|
padding-inline: 36px;
|
|
}
|
|
}
|
|
|
|
.ProseMirror .edgeever-search-match {
|
|
border-radius: 0.2rem;
|
|
background-color: var(--search-match);
|
|
box-shadow: 0 0 0 1px rgb(var(--brand-green-rgb) / 0.22);
|
|
}
|
|
|
|
.ProseMirror .edgeever-search-match-active {
|
|
background-color: var(--search-match-active);
|
|
box-shadow: 0 0 0 2px rgb(var(--brand-green-rgb) / 0.4);
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.ProseMirror {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 8px 0 max(4rem, env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
.ProseMirror h1 {
|
|
font-size: 1.875rem;
|
|
font-weight: 700;
|
|
line-height: 1.28;
|
|
letter-spacing: -0.022em;
|
|
margin: 0 0 0.85rem;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.ProseMirror h2 {
|
|
font-size: 1.375rem;
|
|
font-weight: 650;
|
|
line-height: 1.32;
|
|
letter-spacing: -0.015em;
|
|
margin: 1.4rem 0 0.6rem;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.ProseMirror h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
line-height: 1.38;
|
|
letter-spacing: -0.01em;
|
|
margin: 1.15rem 0 0.5rem;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.ProseMirror p {
|
|
line-height: var(--editor-body-line-height);
|
|
margin: 0 0 var(--editor-paragraph-spacing);
|
|
padding: 0;
|
|
}
|
|
|
|
/* The root deliberately disables synthetic font faces for the application UI,
|
|
* but rich-text emphasis must remain visible when a platform fallback font has
|
|
* no matching bold or italic face. Allow both forms here so nested bold-italic
|
|
* marks work regardless of their DOM order. */
|
|
.ProseMirror strong,
|
|
.ProseMirror b {
|
|
font-synthesis: weight style;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.ProseMirror em,
|
|
.ProseMirror i {
|
|
font-synthesis: weight style;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* External hyperlinks (default theme).
|
|
* Tailwind preflight resets <a> to inherit color/decoration, so without this
|
|
* rule links are indistinguishable from body text. Note/attachment chips below
|
|
* use more specific selectors and keep their chip appearance. */
|
|
.ProseMirror a {
|
|
color: var(--brand-green-text);
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
text-decoration-color: color-mix(in srgb, var(--brand-green-text) 45%, transparent);
|
|
text-underline-offset: 2px;
|
|
cursor: pointer;
|
|
transition: color 150ms ease, text-decoration-color 150ms ease;
|
|
}
|
|
|
|
.ProseMirror a:hover {
|
|
color: var(--brand-green);
|
|
text-decoration-color: var(--brand-green);
|
|
}
|
|
|
|
.ProseMirror a:focus-visible {
|
|
outline: 2px solid var(--brand-green);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ProseMirror a.edgeever-note-link,
|
|
.ProseMirror a[href^="#memo="] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
max-width: min(100%, 32rem);
|
|
padding: 0.03rem 0.32rem 0.05rem;
|
|
border: 1px solid var(--brand-green-border);
|
|
border-radius: 0.35rem;
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-text);
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
text-decoration-color: color-mix(in srgb, var(--brand-green) 55%, transparent);
|
|
text-underline-offset: 2px;
|
|
vertical-align: baseline;
|
|
cursor: pointer;
|
|
transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
|
|
}
|
|
|
|
.ProseMirror a.edgeever-note-link::before,
|
|
.ProseMirror a[href^="#memo="]::before {
|
|
content: "↗";
|
|
flex: 0 0 auto;
|
|
font-size: 0.85em;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ProseMirror a.edgeever-note-link:hover,
|
|
.ProseMirror a[href^="#memo="]:hover {
|
|
color: var(--brand-green-text);
|
|
border-color: var(--brand-green);
|
|
background: var(--brand-green-muted);
|
|
text-decoration-color: var(--brand-green-text);
|
|
box-shadow: 0 2px 8px rgb(var(--brand-green-rgb) / 0.1);
|
|
}
|
|
|
|
:root.dark .ProseMirror a.edgeever-note-link,
|
|
:root.dark .ProseMirror a[href^="#memo="] {
|
|
border-color: var(--brand-green-border);
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
:root.dark .ProseMirror a.edgeever-note-link:hover,
|
|
:root.dark .ProseMirror a[href^="#memo="]:hover {
|
|
border-color: var(--brand-green);
|
|
background: var(--brand-green-muted);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.ProseMirror a.edgeever-attachment-link,
|
|
.ProseMirror a[href*="/api/v1/resources/"] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
max-width: min(100%, 30rem);
|
|
padding: 0.3rem 0.55rem;
|
|
border: 1px solid rgb(var(--slate-300-rgb) / 0.9);
|
|
border-radius: 0.45rem;
|
|
background: rgb(var(--slate-50-rgb));
|
|
color: rgb(var(--slate-800-rgb));
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
text-decoration: none;
|
|
box-shadow: 0 1px 2px rgb(var(--slate-900-rgb) / 0.04);
|
|
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
|
|
}
|
|
|
|
.edgeever-pdf-attachment-node,
|
|
.edgeever-file-attachment-node {
|
|
display: block;
|
|
margin: 0.75rem 0 1rem;
|
|
}
|
|
|
|
.pdf-viewer-action {
|
|
display: inline-flex;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.45rem;
|
|
color: rgb(var(--slate-500-rgb));
|
|
transition: color 150ms ease, background 150ms ease;
|
|
}
|
|
|
|
.pdf-viewer-action:hover:not(:disabled),
|
|
.pdf-viewer-action.is-active {
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.pdf-viewer-action:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.pdf-viewer-action svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.ProseMirror li:has(> p > a[href*="/api/v1/resources/"]) {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ProseMirror a.edgeever-attachment-link::before,
|
|
.ProseMirror a[href*="/api/v1/resources/"]::before {
|
|
content: "📎";
|
|
flex: 0 0 auto;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.ProseMirror a.edgeever-attachment-link:hover,
|
|
.ProseMirror a[href*="/api/v1/resources/"]:hover {
|
|
border-color: rgb(var(--brand-green-rgb) / 0.5);
|
|
background: var(--brand-green-soft);
|
|
box-shadow: 0 3px 10px rgb(var(--brand-green-rgb) / 0.08);
|
|
}
|
|
|
|
:root.dark .ProseMirror a.edgeever-attachment-link,
|
|
:root.dark .ProseMirror a[href*="/api/v1/resources/"] {
|
|
border-color: rgb(var(--slate-300-rgb) / 0.8);
|
|
background: rgb(var(--slate-100-rgb));
|
|
color: rgb(var(--slate-800-rgb));
|
|
}
|
|
|
|
.ProseMirror .edgeever-pdf-viewer a.edgeever-attachment-link,
|
|
.ProseMirror .edgeever-pdf-viewer a[href*="/api/v1/resources/"],
|
|
.ProseMirror .edgeever-file-viewer a[href*="/api/v1/resources/"] {
|
|
max-width: none;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.ProseMirror .edgeever-pdf-viewer a.edgeever-attachment-link::before,
|
|
.ProseMirror .edgeever-pdf-viewer a[href*="/api/v1/resources/"]::before,
|
|
.ProseMirror .edgeever-file-viewer a[href*="/api/v1/resources/"]::before {
|
|
content: none;
|
|
}
|
|
|
|
.ProseMirror .edgeever-pdf-viewer a.pdf-viewer-action:hover,
|
|
.ProseMirror .edgeever-file-viewer a.pdf-viewer-action:hover {
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.ProseMirror ul,
|
|
.ProseMirror ol {
|
|
padding-left: 1.5rem;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.ProseMirror ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.ProseMirror ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.ProseMirror li {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* TipTap's task-item NodeView exposes data-checked, but not data-type, in the live editor DOM. */
|
|
.ProseMirror ul[data-type="taskList"] li[data-checked] {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] li[data-checked] > label {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
margin-top: 0.2rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] li[data-checked] > label input {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0;
|
|
border-radius: 3px;
|
|
accent-color: var(--brand-green);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] li[data-checked] > div {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] li[data-checked] > div > p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div > p {
|
|
color: rgb(var(--slate-500-rgb));
|
|
text-decoration: line-through;
|
|
text-decoration-color: rgb(var(--slate-400-rgb));
|
|
transition: color 150ms ease, text-decoration 150ms ease;
|
|
}
|
|
|
|
.ProseMirror ul[data-type="taskList"] ul[data-type="taskList"] {
|
|
margin: 0.25rem 0 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.ProseMirror .ee-inline-field-source {
|
|
font-size: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.ProseMirror .ee-inline-field {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 0 0.15rem;
|
|
padding: 0 0.45rem;
|
|
border: 1px solid rgb(var(--slate-200-rgb, 226 232 240));
|
|
border-radius: 999px;
|
|
background: rgb(var(--slate-100-rgb, 241 245 249));
|
|
color: rgb(var(--slate-500-rgb, 100 116 139));
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.55;
|
|
vertical-align: 0.12em;
|
|
cursor: text;
|
|
}
|
|
|
|
:root.dark .ProseMirror .ee-inline-field {
|
|
border-color: rgb(51 65 85);
|
|
background: rgb(30 41 59);
|
|
color: rgb(148 163 184);
|
|
}
|
|
|
|
.ProseMirror blockquote {
|
|
margin: 0 0 1rem;
|
|
border-left: 3px solid var(--brand-green);
|
|
border-radius: 1px 4px 4px 1px;
|
|
padding: 0.35rem 0.5rem 0.35rem 0.85rem;
|
|
color: #334155;
|
|
background: color-mix(in srgb, var(--brand-green) 4%, transparent);
|
|
}
|
|
|
|
.ProseMirror code {
|
|
border: 1px solid #d4ebdc;
|
|
border-radius: 4px;
|
|
background: #f2f9f5;
|
|
padding: 0.12rem 0.38rem;
|
|
font-size: 0.875em;
|
|
font-weight: 550;
|
|
color: #0d5f3a;
|
|
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
.ProseMirror pre {
|
|
margin: 0 0 1rem;
|
|
overflow-x: auto;
|
|
border: 1px solid rgb(var(--slate-300-rgb) / 0.6);
|
|
border-radius: 8px;
|
|
background: rgb(var(--slate-50-rgb) / 0.75);
|
|
padding: 0.9rem 1rem;
|
|
color: #0f172a;
|
|
box-shadow: 0 1px 2px rgb(var(--slate-900-rgb) / 0.03);
|
|
}
|
|
|
|
.ProseMirror pre code {
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.ProseMirror .edgeever-code-block,
|
|
.ProseMirror .edgeever-mermaid-code-block {
|
|
position: relative;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-code-copy-button {
|
|
position: absolute;
|
|
top: 0.45rem;
|
|
right: 0.45rem;
|
|
z-index: 1;
|
|
border: 1px solid rgb(var(--slate-300-rgb) / 0.7);
|
|
border-radius: 6px;
|
|
padding: 0.22rem 0.5rem;
|
|
background: rgb(255 255 255 / 0.88);
|
|
backdrop-filter: blur(6px);
|
|
color: #475569;
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.ProseMirror .edgeever-code-copy-button:hover,
|
|
.ProseMirror .edgeever-code-copy-button:focus-visible {
|
|
border-color: var(--brand-green);
|
|
color: var(--brand-green-text);
|
|
background: rgb(255 255 255 / 0.96);
|
|
box-shadow: 0 1px 4px rgb(var(--brand-green-rgb) / 0.12);
|
|
outline: none;
|
|
}
|
|
|
|
.ProseMirror .edgeever-code-source {
|
|
overflow-x: auto;
|
|
border: 1px solid rgb(var(--slate-300-rgb) / 0.6);
|
|
border-radius: 8px;
|
|
background: rgb(var(--slate-50-rgb) / 0.75);
|
|
padding: 0.9rem 1rem;
|
|
color: #0f172a;
|
|
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.875em;
|
|
white-space: pre;
|
|
padding-right: 5.5rem;
|
|
box-shadow: 0 1px 2px rgb(var(--slate-900-rgb) / 0.03);
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-code-block {
|
|
overflow: visible;
|
|
background: transparent;
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.ProseMirror .edgeever-mermaid-code-block {
|
|
max-width: min(60vw, 52rem);
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-toolbar {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 2;
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
border: 1px solid #d9e2dc;
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255 / 0.94);
|
|
box-shadow: 0 1px 3px rgb(15 23 42 / 0.08);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-tool-button {
|
|
display: inline-flex;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
flex: 0 0 2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-tool-button svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-tool-button:hover,
|
|
.ProseMirror .edgeever-mermaid-tool-button:focus-visible,
|
|
.ProseMirror .edgeever-mermaid-tool-button[aria-pressed="true"] {
|
|
background: #eaf5ee;
|
|
color: #0f766e;
|
|
outline: none;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-tool-button:focus-visible {
|
|
box-shadow: 0 0 0 2px var(--workspace-editor), 0 0 0 4px var(--brand-green);
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-tool-button[data-state="copied"] {
|
|
color: #15803d;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-tool-button[data-state="error"] {
|
|
color: #be123c;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-preview {
|
|
display: flex;
|
|
max-height: min(70vh, 44rem);
|
|
min-height: 6rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: auto;
|
|
overscroll-behavior-x: contain;
|
|
overscroll-behavior-y: auto;
|
|
padding: 3.25rem 1rem 1rem;
|
|
border: 1px solid #d9e2dc;
|
|
border-radius: 8px;
|
|
background: #fbfdfb;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-message,
|
|
.ProseMirror .edgeever-mermaid-error {
|
|
margin: 0;
|
|
font-size: 0.82rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-error {
|
|
color: #be123c;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-svg {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
align-self: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-svg svg {
|
|
display: block;
|
|
width: auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 30rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-source {
|
|
display: none;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-code-block.is-source-visible .edgeever-mermaid-source {
|
|
display: block;
|
|
}
|
|
|
|
/* lowlight emits Highlight.js token classes inside a div-based Tiptap node view. */
|
|
.ProseMirror .edgeever-code-block {
|
|
color: #24292e;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-code-block {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.ProseMirror hr {
|
|
margin: var(--memo-content-divider-spacing) 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--memo-content-divider-color);
|
|
}
|
|
|
|
/* Semantic merge boundaries — stronger than decorative theme hairlines. */
|
|
.ProseMirror hr.edgeever-merge-divider,
|
|
.ProseMirror hr[data-edgeever-merge-divider] {
|
|
margin: var(--memo-content-divider-spacing) 0;
|
|
height: 0;
|
|
border: 0;
|
|
border-top: 2px solid var(--memo-content-divider-color);
|
|
background: transparent;
|
|
}
|
|
|
|
.ProseMirror img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: min(68vh, 720px);
|
|
height: auto;
|
|
object-fit: contain;
|
|
margin: 1rem 0;
|
|
border: 1px solid var(--brand-green-border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ProseMirror img.ProseMirror-selectednode {
|
|
outline: 2px solid var(--brand-green);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-upload-placeholder {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 48rem;
|
|
height: clamp(12rem, 42vw, 28rem);
|
|
overflow: hidden;
|
|
margin: 1rem 0;
|
|
border: 1px solid var(--brand-green-border);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(110deg, transparent 24%, rgb(255 255 255 / 0.72) 42%, transparent 60%) -18rem 0 / 18rem 100% no-repeat,
|
|
rgb(var(--slate-100-rgb) / 0.82);
|
|
animation: edgeever-image-placeholder-shimmer 1.35s ease-in-out infinite;
|
|
line-height: normal;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-upload-placeholder__preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: none;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
opacity: 0;
|
|
object-fit: contain;
|
|
transition: opacity 160ms ease;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-upload-placeholder.is-preview-ready {
|
|
background: rgb(var(--slate-100-rgb) / 0.82);
|
|
animation: none;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-upload-placeholder.is-preview-ready .edgeever-image-upload-placeholder__preview {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-upload-placeholder__status {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0.75rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
transform: translateX(-50%);
|
|
border: 1px solid rgb(var(--slate-300-rgb) / 0.8);
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255 / 0.92);
|
|
padding: 0.4rem 0.75rem;
|
|
color: #475569;
|
|
box-shadow: 0 4px 16px rgb(15 23 42 / 0.12);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-upload-placeholder__spinner {
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
border: 2px solid rgb(var(--brand-green-rgb) / 0.2);
|
|
border-top-color: var(--brand-green);
|
|
border-radius: 999px;
|
|
animation: edgeever-image-placeholder-spin 700ms linear infinite;
|
|
}
|
|
|
|
@keyframes edgeever-image-placeholder-shimmer {
|
|
to { background-position: calc(100% + 18rem) 0, 0 0; }
|
|
}
|
|
|
|
@keyframes edgeever-image-placeholder-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ProseMirror .edgeever-image-upload-placeholder,
|
|
.ProseMirror .edgeever-image-upload-placeholder__spinner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-node {
|
|
position: relative;
|
|
display: block;
|
|
max-width: 100%;
|
|
min-width: 9rem;
|
|
margin: 1rem 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-node img {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-node.is-selected img {
|
|
outline: 2px solid var(--brand-green);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-controls {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 0.5rem;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
border: 1px solid rgba(var(--brand-green-200-rgb), 0.95);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
padding: 0.3rem;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
|
|
line-height: 1;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preview-control {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 0.5rem;
|
|
z-index: 2;
|
|
border: 1px solid rgba(var(--brand-green-200-rgb), 0.95);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.94);
|
|
padding: 0.3rem;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
|
|
line-height: 1;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 160ms ease;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-node:hover .edgeever-image-preview-control,
|
|
.ProseMirror .edgeever-image-node.is-selected .edgeever-image-preview-control,
|
|
.ProseMirror .edgeever-image-preview-control:focus-within {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery] {
|
|
position: relative;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery]:not(.edgeever-image-gallery),
|
|
.ProseMirror .edgeever-image-gallery__content > div {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
|
|
align-items: stretch;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-count="4"]:not(.edgeever-image-gallery),
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-count="4"] .edgeever-image-gallery__content > div,
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="2"]:not(.edgeever-image-gallery),
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="2"] .edgeever-image-gallery__content > div {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="3"]:not(.edgeever-image-gallery),
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="3"] .edgeever-image-gallery__content > div {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="1"]:not(.edgeever-image-gallery),
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="1"] .edgeever-image-gallery__content > div {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery] > img,
|
|
.ProseMirror .edgeever-image-gallery__content > img,
|
|
.ProseMirror .edgeever-image-gallery__content > .edgeever-image-node,
|
|
.ProseMirror .edgeever-image-gallery__content > div > div {
|
|
width: 100% !important;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 8rem;
|
|
max-height: none;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-gallery__content > div > div > .edgeever-image-node {
|
|
width: 100% !important;
|
|
min-width: 0;
|
|
height: 100%;
|
|
max-height: none;
|
|
margin: 0 !important;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery] > img,
|
|
.ProseMirror .edgeever-image-gallery__content > img,
|
|
.ProseMirror .edgeever-image-gallery__content > .edgeever-image-node > img,
|
|
.ProseMirror .edgeever-image-gallery__content > div > div > .edgeever-image-node > img {
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100%;
|
|
min-height: 8rem;
|
|
max-height: 18rem;
|
|
margin: 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-gallery__toolbar {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
border: 1px solid rgba(var(--brand-green-200-rgb), 0.95);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
padding: 0.3rem;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-gallery__button {
|
|
min-width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 6px;
|
|
padding: 0 0.5rem;
|
|
color: #475569;
|
|
font-size: 0.75rem;
|
|
font-weight: 650;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-gallery__button:hover,
|
|
.ProseMirror .edgeever-image-gallery__button:focus-visible,
|
|
.ProseMirror .edgeever-image-gallery__button.is-active {
|
|
background: var(--brand-green-muted);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-gallery__button:focus-visible {
|
|
outline: 2px solid var(--brand-green);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.ProseMirror [data-edgeever-image-gallery]:not(.edgeever-image-gallery),
|
|
.ProseMirror .edgeever-image-gallery__content > div,
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="3"]:not(.edgeever-image-gallery),
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="3"] .edgeever-image-gallery__content > div {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="1"]:not(.edgeever-image-gallery),
|
|
.ProseMirror [data-edgeever-image-gallery][data-image-gallery-layout="1"] .edgeever-image-gallery__content > div {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preview-button {
|
|
display: inline-flex;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
color: #475569;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preview-button:hover,
|
|
.ProseMirror .edgeever-image-preview-button:focus-visible {
|
|
background: var(--brand-green-muted);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preview-button:focus-visible {
|
|
outline: 2px solid var(--brand-green);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preview-button svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.ProseMirror .edgeever-image-preview-control {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-presets {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preset {
|
|
display: inline-flex;
|
|
min-width: 3rem;
|
|
min-height: 2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
color: #475569;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preset:hover,
|
|
.ProseMirror .edgeever-image-preset.is-active {
|
|
background: var(--brand-green-muted);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-resize-handle {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(135deg, transparent 46%, var(--brand-green) 48%, var(--brand-green) 54%, transparent 56%),
|
|
linear-gradient(135deg, transparent 62%, rgba(var(--brand-green-600-rgb), 0.8) 64%, rgba(var(--brand-green-600-rgb), 0.8) 70%, transparent 72%);
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-resize-handle:hover {
|
|
background-color: var(--brand-green-muted);
|
|
}
|
|
|
|
.ProseMirror.edgeever-note-rich-editor p.is-empty::before {
|
|
color: #94a3b8;
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
font-size: inherit;
|
|
height: 0;
|
|
line-height: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom premium scrollbar style */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
|
|
/* Standard Markdown Content Rendering Styles */
|
|
.markdown-content {
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
color: #1e293b;
|
|
line-height: 1.7;
|
|
}
|
|
.markdown-content h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #020617;
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.markdown-content h2, .markdown-content h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: #020617;
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.markdown-content h2 {
|
|
font-size: 1.2rem;
|
|
border-left: 4px solid var(--brand-green);
|
|
padding-left: 0.75rem;
|
|
}
|
|
.markdown-content p {
|
|
margin: 0.85rem 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
.markdown-content hr {
|
|
margin: 2rem 0;
|
|
border: 0;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid var(--brand-green);
|
|
padding: 0.5rem 0 0.5rem 1rem;
|
|
background-color: var(--brand-green-soft);
|
|
color: var(--brand-green-text);
|
|
font-weight: 500;
|
|
border-radius: 0 4px 4px 0;
|
|
margin: 1.25rem auto;
|
|
}
|
|
.markdown-content ul {
|
|
list-style-type: disc;
|
|
margin: 0.75rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.markdown-content ol {
|
|
list-style-type: decimal;
|
|
margin: 0.75rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.markdown-content li {
|
|
margin: 0.35rem 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
.markdown-content pre {
|
|
background-color: #f7fbf8;
|
|
color: #1e293b;
|
|
border: 1px solid #d9eadf;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
font-family: monospace;
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
margin: 1rem 0;
|
|
}
|
|
.markdown-content code {
|
|
font-family: "JetBrains Mono", "Fira Code", monospace;
|
|
background-color: #f2f9f5;
|
|
color: #0d5f3a;
|
|
border: 1px solid #d4ebdc;
|
|
padding: 0.125rem 0.38rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 550;
|
|
}
|
|
.markdown-content pre code {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: inherit;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-weight: normal;
|
|
font-size: inherit;
|
|
}
|
|
.markdown-content a {
|
|
color: var(--brand-green-text);
|
|
text-decoration: underline;
|
|
font-weight: 500;
|
|
}
|
|
.markdown-content a:hover {
|
|
color: var(--brand-green);
|
|
}
|
|
|
|
.ProseMirror .tableWrapper,
|
|
.markdown-content .tableWrapper {
|
|
--mobile-table-column-width: clamp(4.5rem, 24cqi, 12rem);
|
|
container-type: inline-size;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
margin-top: 1.25rem;
|
|
margin-right: auto;
|
|
margin-bottom: 1.25rem;
|
|
margin-left: 0;
|
|
border: 1px solid rgb(var(--slate-300-rgb) / 0.7);
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
overscroll-behavior-inline: contain;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
box-shadow: 0 1px 3px rgb(var(--slate-900-rgb) / 0.03);
|
|
}
|
|
|
|
.ProseMirror table,
|
|
.markdown-content table {
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
/* Container query responsive column distributions for 1-4 columns */
|
|
.ProseMirror table:has(> colgroup > col:first-child:last-child),
|
|
.markdown-content table:has(> colgroup > col:first-child:last-child) {
|
|
--mobile-table-column-width: 100cqi;
|
|
}
|
|
|
|
.ProseMirror table:has(> colgroup > col:first-child:nth-last-child(2)),
|
|
.markdown-content table:has(> colgroup > col:first-child:nth-last-child(2)) {
|
|
--mobile-table-column-width: 50cqi;
|
|
}
|
|
|
|
.ProseMirror table:has(> colgroup > col:first-child:nth-last-child(3)),
|
|
.markdown-content table:has(> colgroup > col:first-child:nth-last-child(3)) {
|
|
--mobile-table-column-width: calc(100cqi / 3);
|
|
}
|
|
|
|
.ProseMirror table:has(> colgroup > col:first-child:nth-last-child(4)),
|
|
.markdown-content table:has(> colgroup > col:first-child:nth-last-child(4)) {
|
|
--mobile-table-column-width: 25cqi;
|
|
}
|
|
|
|
/* For tables with 5+ columns on narrow viewports, expand width and scroll inside tableWrapper */
|
|
.ProseMirror table:has(> colgroup > col:first-child:nth-last-child(n+5)),
|
|
.markdown-content table:has(> colgroup > col:first-child:nth-last-child(n+5)) {
|
|
width: max-content;
|
|
--mobile-table-column-width: clamp(4.5rem, 24cqi, 12rem);
|
|
}
|
|
|
|
/* For tables without colgroup (plain markdown or pasted html), allow natural distribution */
|
|
.ProseMirror table:not(:has(colgroup)),
|
|
.markdown-content table:not(:has(colgroup)) {
|
|
table-layout: auto;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.ProseMirror table col,
|
|
.markdown-content table col {
|
|
width: var(--mobile-table-column-width) !important;
|
|
min-width: var(--mobile-table-column-width) !important;
|
|
}
|
|
|
|
.ProseMirror th,
|
|
.ProseMirror td,
|
|
.markdown-content th,
|
|
.markdown-content td {
|
|
position: relative;
|
|
width: var(--mobile-table-column-width, auto);
|
|
min-width: var(--mobile-table-column-width, 3.5rem);
|
|
max-width: var(--mobile-table-column-width, none);
|
|
border: 0;
|
|
border-right: 1px solid rgb(var(--slate-200-rgb) / 0.8);
|
|
border-bottom: 1px solid rgb(var(--slate-200-rgb) / 0.8);
|
|
padding: 0.48rem 0.8rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
line-height: 1.45;
|
|
transition: background-color 120ms ease;
|
|
}
|
|
|
|
.ProseMirror th,
|
|
.markdown-content th {
|
|
background: rgb(var(--slate-100-rgb) / 0.75);
|
|
color: #0f172a;
|
|
font-size: 0.84rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.ProseMirror th:last-child,
|
|
.ProseMirror td:last-child,
|
|
.markdown-content th:last-child,
|
|
.markdown-content td:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.ProseMirror tr:last-child td,
|
|
.markdown-content tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.ProseMirror tbody tr:nth-child(even) td,
|
|
.markdown-content tbody tr:nth-child(even) td {
|
|
background: rgb(var(--slate-50-rgb) / 0.5);
|
|
}
|
|
|
|
.ProseMirror tbody tr:hover td,
|
|
.markdown-content tbody tr:hover td {
|
|
background: rgb(var(--slate-100-rgb) / 0.6);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.ProseMirror table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))),
|
|
.markdown-content table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) {
|
|
width: 100%;
|
|
table-layout: auto;
|
|
}
|
|
|
|
.ProseMirror table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) col,
|
|
.markdown-content table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) col {
|
|
width: auto !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.ProseMirror table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) th,
|
|
.ProseMirror table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) td,
|
|
.markdown-content table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) th,
|
|
.markdown-content table:not(:has(> colgroup > col:first-child:nth-last-child(n+5))) td {
|
|
width: auto;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.ProseMirror th p,
|
|
.ProseMirror td p,
|
|
.markdown-content th p,
|
|
.markdown-content td p {
|
|
margin: 0;
|
|
}
|
|
|
|
.ProseMirror .selectedCell::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
pointer-events: none;
|
|
background: rgb(16 185 129 / 0.14);
|
|
}
|
|
|
|
:root.dark .ProseMirror th,
|
|
:root.dark .markdown-content th {
|
|
background: rgb(var(--slate-100-rgb) / 0.9);
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
:root.dark .ProseMirror .tableWrapper,
|
|
:root.dark .markdown-content .tableWrapper {
|
|
border-color: rgb(var(--slate-200-rgb) / 0.9);
|
|
background: var(--workspace-editor);
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
|
|
}
|
|
|
|
:root.dark .ProseMirror th,
|
|
:root.dark .ProseMirror td,
|
|
:root.dark .markdown-content th,
|
|
:root.dark .markdown-content td {
|
|
border-color: rgb(var(--slate-200-rgb) / 0.7);
|
|
}
|
|
|
|
:root.dark .ProseMirror tbody tr:nth-child(even) td,
|
|
:root.dark .markdown-content tbody tr:nth-child(even) td {
|
|
background: rgb(var(--slate-50-rgb) / 0.6);
|
|
}
|
|
|
|
:root.dark .ProseMirror tbody tr:hover td,
|
|
:root.dark .markdown-content tbody tr:hover td {
|
|
background: rgb(var(--slate-100-rgb) / 0.8);
|
|
}
|
|
|
|
:root.dark .edgeever-paper,
|
|
:root.dark .edgeever-pdf-viewer canvas {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
:root.dark * {
|
|
--tw-ring-offset-color: var(--workspace-canvas);
|
|
}
|
|
|
|
:root.dark .ProseMirror blockquote {
|
|
color: hsl(var(--foreground));
|
|
background: color-mix(in srgb, var(--brand-green) 7%, transparent);
|
|
}
|
|
|
|
:root.dark .ProseMirror code,
|
|
:root.dark .markdown-content code {
|
|
border-color: rgb(var(--brand-green-rgb) / 0.28);
|
|
background: rgb(var(--brand-green-rgb) / 0.1);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
:root.dark .ProseMirror pre,
|
|
:root.dark .markdown-content pre {
|
|
border-color: rgb(var(--slate-200-rgb) / 0.8);
|
|
background: rgb(var(--slate-100-rgb) / 0.8);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-code-copy-button {
|
|
border-color: rgb(var(--slate-200-rgb) / 0.9);
|
|
background: rgb(var(--slate-100-rgb) / 0.9);
|
|
color: rgb(var(--slate-500-rgb));
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-code-copy-button:hover,
|
|
:root.dark .ProseMirror .edgeever-code-copy-button:focus-visible {
|
|
border-color: var(--brand-green);
|
|
color: var(--brand-green-text);
|
|
background: rgb(var(--slate-200-rgb));
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-code-block {
|
|
background: transparent;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-toolbar {
|
|
border-color: var(--workspace-divider);
|
|
background: rgb(var(--dark-surface-rgb) / 0.94);
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 0.28);
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button:hover,
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button:focus-visible,
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button[aria-pressed="true"] {
|
|
background: var(--brand-green-soft);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button:focus-visible {
|
|
box-shadow: 0 0 0 2px var(--workspace-editor), 0 0 0 4px var(--brand-green);
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-code-source {
|
|
border-color: rgb(var(--slate-200-rgb) / 0.8);
|
|
background: rgb(var(--slate-100-rgb) / 0.8);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-preview {
|
|
border-color: var(--workspace-divider);
|
|
background: var(--workspace-editor);
|
|
}
|
|
|
|
:root.dark .markdown-content {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .markdown-content h1,
|
|
:root.dark .markdown-content h2,
|
|
:root.dark .markdown-content h3 {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
:root.dark .markdown-content h1,
|
|
:root.dark .markdown-content hr {
|
|
border-color: var(--workspace-divider);
|
|
}
|
|
|
|
:root.dark .markdown-content pre {
|
|
background-color: rgb(var(--slate-100-rgb) / 0.8);
|
|
border-color: rgb(var(--slate-200-rgb) / 0.8);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__toolbar {
|
|
top: max(0.5rem, env(safe-area-inset-top));
|
|
right: max(0.5rem, env(safe-area-inset-right));
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
border: 1px solid rgb(255 255 255 / 0.18);
|
|
border-radius: 8px;
|
|
background: rgb(26 31 28 / 0.92);
|
|
box-shadow: 0 4px 16px rgb(0 0 0 / 0.24);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__button,
|
|
.edgeever-mermaid-viewer-reset {
|
|
display: inline-flex;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
padding: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #f8fafc;
|
|
filter: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__button:hover,
|
|
.edgeever-mermaid-viewer .yarl__button:focus-visible,
|
|
.edgeever-mermaid-viewer-reset:hover,
|
|
.edgeever-mermaid-viewer-reset:focus-visible {
|
|
background: rgb(255 255 255 / 0.14);
|
|
outline: none;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__button:focus-visible,
|
|
.edgeever-mermaid-viewer-reset:focus-visible {
|
|
box-shadow: inset 0 0 0 2px #5eead4;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer-reset:disabled {
|
|
opacity: 0.38;
|
|
cursor: default;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer-reset svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__slide_image {
|
|
user-select: none;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__slide_wrapper_interactive {
|
|
cursor: grab;
|
|
}
|
|
|
|
.edgeever-mermaid-viewer .yarl__slide_wrapper_interactive:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.ProseMirror .edgeever-mermaid-tool-button {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
flex-basis: 2.75rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-preview {
|
|
padding-top: 4rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
:root.dark .markdown-content code {
|
|
background-color: rgb(var(--brand-green-rgb) / 0.1);
|
|
border-color: rgb(var(--brand-green-rgb) / 0.28);
|
|
color: var(--brand-green-text);
|
|
}
|