1288 lines
31 KiB
CSS
1288 lines
31 KiB
CSS
@import "highlight.js/styles/github.css";
|
|
@import "./editor-themes/index.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 80 11% 96%;
|
|
--foreground: 224 71% 4%;
|
|
--brand-green: #00a82d;
|
|
--brand-green-hover: #008f26;
|
|
--brand-green-muted: #e6f6ea;
|
|
--brand-green-soft: #f0fbf3;
|
|
--brand-green-border: #99dcab;
|
|
--brand-green-text: #00751f;
|
|
--brand-green-rgb: 0 168 45;
|
|
--brand-green-hover-rgb: 0 143 38;
|
|
--brand-green-50-rgb: 230 246 234;
|
|
--brand-green-100-rgb: 204 237 213;
|
|
--brand-green-200-rgb: 153 220 171;
|
|
--brand-green-300-rgb: 102 202 128;
|
|
--brand-green-400-rgb: 51 185 86;
|
|
--brand-green-500-rgb: 0 168 45;
|
|
--brand-green-600-rgb: 0 143 38;
|
|
--brand-green-700-rgb: 0 117 31;
|
|
--brand-green-800-rgb: 0 92 25;
|
|
--brand-green-900-rgb: 0 67 18;
|
|
--brand-green-950-rgb: 0 43 11;
|
|
--slate-50-rgb: 248 250 252;
|
|
--slate-100-rgb: 241 245 249;
|
|
--slate-200-rgb: 226 232 240;
|
|
--slate-300-rgb: 203 213 225;
|
|
--slate-400-rgb: 148 163 184;
|
|
--slate-500-rgb: 100 116 139;
|
|
--slate-600-rgb: 71 85 105;
|
|
--slate-700-rgb: 51 65 85;
|
|
--slate-800-rgb: 30 41 59;
|
|
--slate-900-rgb: 15 23 42;
|
|
--dark-surface-rgb: 255 255 255;
|
|
--editor-body-font-size: 0.9375rem;
|
|
--editor-body-line-height: 1.6;
|
|
--editor-paragraph-spacing: 0.45rem;
|
|
--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: 224 71% 4%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 224 71% 4%;
|
|
|
|
--primary: 136 100% 33%;
|
|
--primary-foreground: 80 11% 96%;
|
|
|
|
--secondary: 136 55% 94%;
|
|
--secondary-foreground: 136 100% 25%;
|
|
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
--accent: 136 55% 94%;
|
|
--accent-foreground: 136 100% 25%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--border: 220 13% 91%;
|
|
--input: 220 13% 91%;
|
|
--ring: 136 100% 33%;
|
|
|
|
--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: 222 47% 11%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 217 33% 17%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 217 33% 17%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 142 71% 45%;
|
|
--primary-foreground: 222 47% 11%;
|
|
--secondary: 217 33% 24%;
|
|
--secondary-foreground: 142 71% 75%;
|
|
--muted: 217 33% 24%;
|
|
--muted-foreground: 215 20% 65%;
|
|
--accent: 217 33% 24%;
|
|
--accent-foreground: 142 71% 75%;
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 215 28% 28%;
|
|
--input: 215 28% 28%;
|
|
--ring: 142 71% 45%;
|
|
--slate-50-rgb: 15 23 42;
|
|
--slate-100-rgb: 30 41 59;
|
|
--slate-200-rgb: 51 65 85;
|
|
--slate-300-rgb: 71 85 105;
|
|
--slate-400-rgb: 100 116 139;
|
|
--slate-500-rgb: 148 163 184;
|
|
--slate-600-rgb: 203 213 225;
|
|
--slate-700-rgb: 226 232 240;
|
|
--slate-800-rgb: 241 245 249;
|
|
--slate-900-rgb: 248 250 252;
|
|
--dark-surface-rgb: 30 41 59;
|
|
--brand-green: #4ade80;
|
|
--brand-green-hover: #22c55e;
|
|
--brand-green-muted: #14532d;
|
|
--brand-green-soft: #052e16;
|
|
--brand-green-border: #166534;
|
|
--brand-green-text: #86efac;
|
|
--brand-green-rgb: 74 222 128;
|
|
--brand-green-hover-rgb: 34 197 94;
|
|
--brand-green-50-rgb: 20 83 45;
|
|
--brand-green-100-rgb: 22 101 52;
|
|
--brand-green-200-rgb: 34 133 67;
|
|
--brand-green-300-rgb: 74 222 128;
|
|
--brand-green-400-rgb: 134 239 172;
|
|
--brand-green-500-rgb: 74 222 128;
|
|
--brand-green-600-rgb: 34 197 94;
|
|
--brand-green-700-rgb: 134 239 172;
|
|
--brand-green-800-rgb: 187 247 208;
|
|
--brand-green-900-rgb: 220 252 231;
|
|
--brand-green-950-rgb: 240 253 244;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
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:
|
|
linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98)),
|
|
#f8fafc;
|
|
color: #0f172a;
|
|
overscroll-behavior-x: none;
|
|
overscroll-behavior-y: auto;
|
|
}
|
|
|
|
::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);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
:root.dark body {
|
|
background: #0f172a;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
:root.dark .ProseMirror {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.ProseMirror {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
color: #000;
|
|
font-size: var(--editor-body-font-size);
|
|
line-height: var(--editor-body-line-height);
|
|
min-height: 100%;
|
|
outline: none;
|
|
padding: 8px 12px 56px;
|
|
}
|
|
|
|
.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: #0f172a;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.edgeever-public-share .ProseMirror {
|
|
padding-inline: 36px;
|
|
}
|
|
}
|
|
|
|
.ProseMirror .edgeever-search-match {
|
|
border-radius: 0.2rem;
|
|
background-color: rgb(254 240 138 / 0.8);
|
|
box-shadow: 0 0 0 1px rgb(234 179 8 / 0.25);
|
|
}
|
|
|
|
.ProseMirror .edgeever-search-match-active {
|
|
background-color: rgb(251 191 36 / 0.9);
|
|
box-shadow: 0 0 0 2px rgb(217 119 6 / 0.45);
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.ProseMirror {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 18px 16px max(4rem, env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
.ProseMirror h1 {
|
|
font-size: 2rem;
|
|
font-weight: 760;
|
|
line-height: 1.15;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.ProseMirror h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 720;
|
|
line-height: 1.2;
|
|
margin: 1.4rem 0 0.7rem;
|
|
}
|
|
|
|
.ProseMirror h3 {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
margin: 1.2rem 0 0.6rem;
|
|
}
|
|
|
|
.ProseMirror p {
|
|
line-height: var(--editor-body-line-height);
|
|
margin: 0 0 var(--editor-paragraph-spacing);
|
|
}
|
|
|
|
.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 rgb(110 231 183 / 0.9);
|
|
border-radius: 0.35rem;
|
|
background: linear-gradient(135deg, rgb(236 253 245), rgb(209 250 229));
|
|
color: rgb(4 120 87);
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
text-decoration-color: rgb(52 211 153 / 0.7);
|
|
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: rgb(6 95 70);
|
|
border-color: rgb(16 185 129);
|
|
background: rgb(167 243 208);
|
|
text-decoration-color: rgb(4 120 87);
|
|
box-shadow: 0 2px 8px rgb(16 185 129 / 0.2);
|
|
}
|
|
|
|
:root.dark .ProseMirror a.edgeever-note-link,
|
|
:root.dark .ProseMirror a[href^="#memo="] {
|
|
border-color: rgb(52 211 153 / 0.7);
|
|
background: linear-gradient(135deg, rgb(6 78 59), rgb(6 95 70));
|
|
color: rgb(110 231 183);
|
|
}
|
|
|
|
:root.dark .ProseMirror a.edgeever-note-link:hover,
|
|
:root.dark .ProseMirror a[href^="#memo="]:hover {
|
|
border-color: rgb(110 231 183);
|
|
background: rgb(6 95 70);
|
|
color: rgb(167 243 208);
|
|
}
|
|
|
|
.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(203 213 225 / 0.9);
|
|
border-radius: 0.45rem;
|
|
background: linear-gradient(135deg, rgb(248 250 252), rgb(241 245 249));
|
|
color: rgb(30 41 59);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
text-decoration: none;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
|
|
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
|
|
}
|
|
|
|
.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(16 185 129 / 0.55);
|
|
background: linear-gradient(135deg, rgb(236 253 245), rgb(240 253 250));
|
|
box-shadow: 0 3px 10px rgb(15 118 110 / 0.12);
|
|
}
|
|
|
|
:root.dark .ProseMirror a.edgeever-attachment-link,
|
|
:root.dark .ProseMirror a[href*="/api/v1/resources/"] {
|
|
border-color: rgb(71 85 105 / 0.8);
|
|
background: linear-gradient(135deg, rgb(30 41 59), rgb(15 23 42));
|
|
color: rgb(226 232 240);
|
|
}
|
|
|
|
.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 blockquote {
|
|
margin: 0 0 1rem;
|
|
border-left: 3px solid var(--brand-green);
|
|
padding: 0.1rem 0 0.1rem 1rem;
|
|
color: #1e293b;
|
|
background: var(--brand-green-soft);
|
|
}
|
|
|
|
.ProseMirror code {
|
|
border: 1px solid #d9eadf;
|
|
border-radius: 5px;
|
|
background: #f6fbf7;
|
|
padding: 0.08rem 0.28rem;
|
|
font-size: 0.9em;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.ProseMirror pre {
|
|
margin: 0 0 1rem;
|
|
overflow-x: auto;
|
|
border: 1px solid #d9eadf;
|
|
border-radius: 8px;
|
|
background: #f7fbf8;
|
|
padding: 0.9rem 1rem;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.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 #cbded1;
|
|
border-radius: 5px;
|
|
padding: 0.2rem 0.45rem;
|
|
background: rgb(247 251 248 / 0.92);
|
|
color: #475569;
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ProseMirror .edgeever-code-copy-button:hover,
|
|
.ProseMirror .edgeever-code-copy-button:focus-visible {
|
|
border-color: #0f766e;
|
|
color: #0f766e;
|
|
outline: none;
|
|
}
|
|
|
|
.ProseMirror .edgeever-code-source {
|
|
overflow-x: auto;
|
|
border: 1px solid #d9eadf;
|
|
border-radius: 8px;
|
|
background: #f7fbf8;
|
|
padding: 0.9rem 1rem;
|
|
color: #1e293b;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.875em;
|
|
white-space: pre;
|
|
padding-right: 5.5rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-mermaid-code-block {
|
|
overflow: visible;
|
|
background: transparent;
|
|
}
|
|
|
|
.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 #ffffff, 0 0 0 4px #0f766e;
|
|
}
|
|
|
|
.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: rgb(100 116 139 / 0.35) 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;
|
|
}
|
|
|
|
.ProseMirror hr {
|
|
margin: var(--memo-content-divider-spacing) 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--memo-content-divider-color);
|
|
}
|
|
|
|
.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-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;
|
|
bottom: 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-presets {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preset {
|
|
display: inline-flex;
|
|
min-width: 3rem;
|
|
min-height: 2.5rem;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.15rem;
|
|
border-radius: 6px;
|
|
color: #475569;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preset-percent {
|
|
color: #94a3b8;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preset:hover,
|
|
.ProseMirror .edgeever-image-preset.is-active {
|
|
background: var(--brand-green-muted);
|
|
color: var(--brand-green-text);
|
|
}
|
|
|
|
.ProseMirror .edgeever-image-preset.is-active .edgeever-image-preset-percent {
|
|
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 p.is-editor-empty:first-child::before {
|
|
color: #94a3b8;
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom premium scrollbar style */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(100, 116, 139, 0.18);
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(100, 116, 139, 0.34);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(100, 116, 139, 0.18) 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: monospace;
|
|
background-color: #f6fbf7;
|
|
color: #1e293b;
|
|
border: 1px solid #d9eadf;
|
|
padding: 0.125rem 0.35rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
.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 {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
margin-top: 1.25rem;
|
|
margin-right: auto;
|
|
margin-bottom: 1.25rem;
|
|
margin-left: 0;
|
|
border: 1px solid #d8d8d8;
|
|
border-radius: 2px;
|
|
background: #fff;
|
|
overscroll-behavior-inline: contain;
|
|
scrollbar-color: rgb(100 116 139 / 0.28) transparent;
|
|
}
|
|
|
|
.ProseMirror table,
|
|
.markdown-content table {
|
|
width: max-content;
|
|
min-width: 42rem !important;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.ProseMirror table col,
|
|
.markdown-content table col {
|
|
width: 14rem !important;
|
|
}
|
|
|
|
.ProseMirror th,
|
|
.ProseMirror td,
|
|
.markdown-content th,
|
|
.markdown-content td {
|
|
position: relative;
|
|
width: 14rem;
|
|
min-width: 14rem;
|
|
border: 0;
|
|
border-right: 1px solid #dedede;
|
|
border-bottom: 1px solid #dedede;
|
|
padding: 0.42rem 0.75rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.4;
|
|
transition: background-color 120ms ease;
|
|
}
|
|
|
|
.ProseMirror th,
|
|
.markdown-content th {
|
|
background: #f0f0f0;
|
|
color: #111827;
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.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: #f8f8f8;
|
|
}
|
|
|
|
.ProseMirror tbody tr:hover td,
|
|
.markdown-content tbody tr:hover td {
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.ProseMirror .tableWrapper,
|
|
.markdown-content .tableWrapper {
|
|
--mobile-table-column-width: clamp(5.5rem, calc((100vw - 3rem) / 3), 14rem);
|
|
width: 100%;
|
|
}
|
|
|
|
.ProseMirror table,
|
|
.markdown-content table {
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
.ProseMirror table col,
|
|
.markdown-content table col {
|
|
width: var(--mobile-table-column-width) !important;
|
|
}
|
|
|
|
.ProseMirror th,
|
|
.ProseMirror td,
|
|
.markdown-content th,
|
|
.markdown-content td {
|
|
width: var(--mobile-table-column-width);
|
|
min-width: var(--mobile-table-column-width);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.ProseMirror .tableWrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.ProseMirror table {
|
|
width: 100%;
|
|
min-width: 100% !important;
|
|
table-layout: auto;
|
|
}
|
|
|
|
.ProseMirror table col {
|
|
width: auto !important;
|
|
}
|
|
|
|
.ProseMirror th,
|
|
.ProseMirror td {
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.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: #27303f;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
:root.dark .ProseMirror .tableWrapper,
|
|
:root.dark .markdown-content .tableWrapper {
|
|
border-color: #334155;
|
|
background: #0f172a;
|
|
}
|
|
|
|
:root.dark .ProseMirror th,
|
|
:root.dark .ProseMirror td,
|
|
:root.dark .markdown-content th,
|
|
:root.dark .markdown-content td {
|
|
border-color: #334155;
|
|
}
|
|
|
|
:root.dark .ProseMirror tbody tr:nth-child(even) td,
|
|
:root.dark .markdown-content tbody tr:nth-child(even) td {
|
|
background: #182235;
|
|
}
|
|
|
|
:root.dark .ProseMirror tbody tr:hover td,
|
|
:root.dark .markdown-content tbody tr:hover td {
|
|
background: #202b3d;
|
|
}
|
|
|
|
/* Theme-aware surfaces for legacy white utilities and fixed semantic colors. */
|
|
:root.dark [class~="bg-white"] {
|
|
background-color: rgb(var(--dark-surface-rgb)) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-white/70"] {
|
|
background-color: rgb(var(--dark-surface-rgb) / 0.7) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-white/75"] {
|
|
background-color: rgb(var(--dark-surface-rgb) / 0.75) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-white/80"] {
|
|
background-color: rgb(var(--dark-surface-rgb) / 0.8) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-white/85"] {
|
|
background-color: rgb(var(--dark-surface-rgb) / 0.85) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-white/90"] {
|
|
background-color: rgb(var(--dark-surface-rgb) / 0.9) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-white/95"] {
|
|
background-color: rgb(var(--dark-surface-rgb) / 0.95) !important;
|
|
}
|
|
|
|
:root.dark [class~="border-white"] {
|
|
border-color: rgb(var(--slate-200-rgb)) !important;
|
|
}
|
|
|
|
:root.dark [class~="text-slate-950"] {
|
|
color: hsl(var(--foreground)) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-slate-50"],
|
|
:root.dark [class*="bg-slate-50/"] { background-color: rgb(var(--slate-50-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-100"],
|
|
:root.dark [class*="bg-slate-100/"] { background-color: rgb(var(--slate-100-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-200"],
|
|
:root.dark [class*="bg-slate-200/"] { background-color: rgb(var(--slate-200-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-300"],
|
|
:root.dark [class*="bg-slate-300/"] { background-color: rgb(var(--slate-300-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-400"],
|
|
:root.dark [class*="bg-slate-400/"] { background-color: rgb(var(--slate-400-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-500"],
|
|
:root.dark [class*="bg-slate-500/"] { background-color: rgb(var(--slate-500-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-600"],
|
|
:root.dark [class*="bg-slate-600/"] { background-color: rgb(var(--slate-600-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-700"],
|
|
:root.dark [class*="bg-slate-700/"] { background-color: rgb(var(--slate-700-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-800"],
|
|
:root.dark [class*="bg-slate-800/"] { background-color: rgb(var(--slate-800-rgb)) !important; }
|
|
:root.dark [class~="bg-slate-900"],
|
|
:root.dark [class*="bg-slate-900/"] { background-color: rgb(var(--slate-900-rgb)) !important; }
|
|
|
|
:root.dark [class~="text-slate-50"] { color: rgb(var(--slate-50-rgb)) !important; }
|
|
:root.dark [class~="text-slate-100"] { color: rgb(var(--slate-100-rgb)) !important; }
|
|
:root.dark [class~="text-slate-200"] { color: rgb(var(--slate-200-rgb)) !important; }
|
|
:root.dark [class~="text-slate-300"] { color: rgb(var(--slate-300-rgb)) !important; }
|
|
:root.dark [class~="text-slate-400"] { color: rgb(var(--slate-400-rgb)) !important; }
|
|
:root.dark [class~="text-slate-500"] { color: rgb(var(--slate-500-rgb)) !important; }
|
|
:root.dark [class~="text-slate-600"] { color: rgb(var(--slate-600-rgb)) !important; }
|
|
:root.dark [class~="text-slate-700"] { color: rgb(var(--slate-700-rgb)) !important; }
|
|
:root.dark [class~="text-slate-800"] { color: rgb(var(--slate-800-rgb)) !important; }
|
|
:root.dark [class~="text-slate-900"] { color: rgb(var(--slate-900-rgb)) !important; }
|
|
|
|
:root.dark [class~="border-slate-50"],
|
|
:root.dark [class*="border-slate-50/"] { border-color: rgb(var(--slate-50-rgb)) !important; }
|
|
:root.dark [class~="border-slate-100"],
|
|
:root.dark [class*="border-slate-100/"] { border-color: rgb(var(--slate-100-rgb)) !important; }
|
|
:root.dark [class~="border-slate-200"],
|
|
:root.dark [class*="border-slate-200/"] { border-color: rgb(var(--slate-200-rgb)) !important; }
|
|
:root.dark [class~="border-slate-300"],
|
|
:root.dark [class*="border-slate-300/"] { border-color: rgb(var(--slate-300-rgb)) !important; }
|
|
:root.dark [class~="border-slate-400"],
|
|
:root.dark [class*="border-slate-400/"] { border-color: rgb(var(--slate-400-rgb)) !important; }
|
|
|
|
:root.dark [class*="hover:bg-slate-50"]:hover,
|
|
:root.dark [class*="hover:bg-slate-100"]:hover { background-color: rgb(var(--slate-100-rgb)) !important; }
|
|
|
|
:root.dark [class*="hover:text-slate-900"]:hover,
|
|
:root.dark [class*="focus:text-slate-900"]:focus { color: rgb(var(--slate-900-rgb)) !important; }
|
|
|
|
:root.dark [class~="bg-amber-50/60"] {
|
|
background-color: rgb(69 26 3 / 72%) !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-amber-50"],
|
|
:root.dark [class~="bg-amber-50/95"] {
|
|
background-color: #451a03 !important;
|
|
}
|
|
|
|
:root.dark [class~="text-amber-600/80"] {
|
|
color: rgb(252 211 77 / 80%) !important;
|
|
}
|
|
|
|
:root.dark [class~="text-amber-700"],
|
|
:root.dark [class~="text-amber-800"] {
|
|
color: #fcd34d !important;
|
|
}
|
|
|
|
:root.dark [class~="bg-rose-50"],
|
|
:root.dark [class~="bg-rose-50/30"] {
|
|
background-color: #4c0519 !important;
|
|
}
|
|
|
|
:root.dark [class~="text-rose-600"],
|
|
:root.dark [class~="text-rose-700"] {
|
|
color: #fda4af !important;
|
|
}
|
|
|
|
:root.dark [class~="border-rose-100"],
|
|
:root.dark [class~="border-rose-200"] {
|
|
border-color: #881337 !important;
|
|
}
|
|
|
|
:root.dark .ProseMirror blockquote {
|
|
color: #cbd5e1;
|
|
background: var(--brand-green-soft);
|
|
}
|
|
|
|
:root.dark .ProseMirror code,
|
|
:root.dark .ProseMirror pre {
|
|
border-color: #166534;
|
|
background: #13261a;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-code-block {
|
|
background: transparent;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-toolbar {
|
|
border-color: #334155;
|
|
background: rgb(15 23 42 / 0.94);
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 0.28);
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
: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: #1e3a2a;
|
|
color: #5eead4;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-tool-button:focus-visible {
|
|
box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #5eead4;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-code-source {
|
|
border-color: #166534;
|
|
background: #13261a;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
:root.dark .ProseMirror .edgeever-mermaid-preview {
|
|
border-color: #334155;
|
|
background: #0f172a;
|
|
}
|
|
|
|
:root.dark .markdown-content {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
:root.dark .markdown-content h1,
|
|
:root.dark .markdown-content h2,
|
|
:root.dark .markdown-content h3 {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
:root.dark .markdown-content h1,
|
|
:root.dark .markdown-content hr {
|
|
border-color: #334155;
|
|
}
|
|
|
|
:root.dark .markdown-content pre {
|
|
background-color: #13261a;
|
|
border-color: #166534;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.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(15 23 42 / 0.88);
|
|
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: #13261a;
|
|
border-color: #166534;
|
|
color: #cbd5e1;
|
|
}
|