@bytechain.cn/colamd 1.5.0 → 1.5.1-beta.2

package/src/renderer/mobile.css

@@ -0,0 +1,429 @@
+@media (max-width: 768px) {
+  :root {
+    --mobile-header-height: 48px;
+  }
+
+  html, body {
+    height: 100%;
+    overflow: hidden;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  #titlebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--mobile-header-height);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    background: var(--bg-color, #fff);
+    border-bottom: 1px solid var(--border-color, #e0e0e0);
+  }
+
+  #menu-btn {
+    -webkit-app-region: no-drag;
+    display: flex;
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 8px;
+    transition: background 0.15s;
+  }
+  #menu-btn:active {
+    background: var(--accent-soft, rgba(241,117,45,0.12));
+  }
+
+  #agent-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #ccc;
+  }
+  #agent-dot.active { background: #f97316; animation: pulse-mobile 1s infinite; }
+  #agent-dot.cooldown { background: #22c55e; animation: pulse-mobile 0.3s ease 2; }
+
+  @keyframes pulse-mobile {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.6; transform: scale(1.2); }
+  }
+
+  #slides-btn {
+    display: none;
+  }
+
+  #mobile-menu {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+    pointer-events: none;
+  }
+
+  #mobile-menu.open {
+    pointer-events: auto;
+  }
+
+  #menu-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  #mobile-menu.open #menu-overlay {
+    opacity: 1;
+  }
+
+  #menu-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(300px, 80vw);
+    background: var(--bg-color, #fff);
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  #mobile-menu.open #menu-panel {
+    transform: translateX(0);
+  }
+
+  #menu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color, #e0e0e0);
+    flex-shrink: 0;
+  }
+
+  #menu-title {
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  #menu-close-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 6px;
+    transition: background 0.15s;
+  }
+  #menu-close-btn:active {
+    background: var(--accent-soft, rgba(241,117,45,0.12));
+  }
+
+  #menu-body {
+    padding: 8px 0;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .menu-section {
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
+  }
+  .menu-section:last-child {
+    border-bottom: none;
+  }
+
+  .menu-section-title {
+    padding: 8px 20px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+  }
+
+  .menu-item {
+    display: block;
+    width: 100%;
+    padding: 12px 20px;
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    font-size: 15px;
+    text-align: left;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background 0.12s;
+  }
+  .menu-item:active {
+    background: var(--accent-soft, rgba(241,117,45,0.08));
+  }
+
+  .menu-theme-item,
+  .menu-plugin-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 20px;
+    font-size: 15px;
+    color: var(--text-color);
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background 0.12s;
+  }
+  .menu-theme-item:active,
+  .menu-plugin-item:active {
+    background: var(--accent-soft, rgba(241,117,45,0.08));
+  }
+
+  .menu-theme-item.active {
+    color: #F1752D;
+    font-weight: 600;
+  }
+
+  .menu-plugin-toggle {
+    width: 44px;
+    height: 26px;
+    border-radius: 13px;
+    background: var(--border-color, #d0d7de);
+    position: relative;
+    transition: background 0.2s;
+    flex-shrink: 0;
+  }
+  .menu-plugin-toggle::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    transition: transform 0.2s;
+  }
+  .menu-plugin-toggle.on {
+    background: #F1752D;
+  }
+  .menu-plugin-toggle.on::after {
+    transform: translateX(18px);
+  }
+
+  #editor {
+    position: fixed;
+    top: var(--mobile-header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding: 16px !important;
+    padding-bottom: 80px !important;
+  }
+
+  .ProseMirror {
+    min-height: calc(100vh - var(--mobile-header-height) - 32px) !important;
+    font-size: 16px !important;
+    line-height: 1.7 !important;
+    padding: 4px 0 !important;
+    -webkit-user-select: text;
+    user-select: text;
+    touch-action: manipulation;
+    /* Explicitly set read-write for rich text IME (CJK composition).
+       Some Android WebView versions default to plaintext-only which
+       downgrades contenteditable and breaks IME composition. */
+    -webkit-user-modify: read-write;
+  }
+
+  /* REMOVED: .ProseMirror-focused { -webkit-user-modify: read-write-plaintext-only } */
+
+  .ProseMirror h1 { font-size: 1.5em !important; margin-top: 0.8em !important; }
+  .ProseMirror h2 { font-size: 1.25em !important; margin-top: 0.7em !important; }
+  .ProseMirror h3 { font-size: 1.1em !important; }
+  .ProseMirror p { margin: 0.4em 0 !important; }
+  .ProseMirror pre {
+    font-size: 13px !important;
+    padding: 12px !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+  .ProseMirror code { font-size: 14px !important; word-break: break-word; }
+  .ProseMirror table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  .ProseMirror th,
+  .ProseMirror td {
+    padding: 6px 8px !important;
+    font-size: 14px !important;
+  }
+
+  .math-block {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 12px !important;
+  }
+
+  .mermaid-block {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 12px !important;
+  }
+
+  .mermaid-preview svg {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+
+  #source-editor {
+    position: fixed;
+    top: var(--mobile-header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100% !important;
+    height: auto !important;
+    border: none !important;
+    resize: none !important;
+    font-size: 15px !important;
+    line-height: 1.6 !important;
+    padding: 16px !important;
+    font-family: 'SF Mono', 'Fira Code', Menlo, monospace !important;
+  }
+
+  .math-inline-raw {
+    font-size: 14px !important;
+    max-width: 90vw !important;
+  }
+
+  .math-block-raw {
+    font-size: 14px !important;
+    max-width: 90vw !important;
+  }
+
+  textarea.mermaid-source {
+    font-size: 13px !important;
+    max-width: 90vw !important;
+  }
+
+  #cola-context-menu {
+    position: fixed !important;
+    z-index: 9999;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    padding: 6px 0;
+    min-width: 160px;
+    max-width: 80vw;
+  }
+
+  .cola-menu-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    font-size: 15px;
+    color: #333;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .cola-menu-item:active {
+    background: #f0f0f0;
+  }
+
+  .hidden { display: none !important; }
+  .visible { display: block !important; }
+}
+
+@media (min-width: 769px) {
+  #menu-btn {
+    display: none;
+  }
+
+  #mobile-menu {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .ProseMirror { font-size: 15px !important; }
+  .ProseMirror pre { font-size: 12px !important; padding: 10px !important; }
+  #editor { padding: 12px !important; }
+  #source-editor { padding: 12px !important; font-size: 14px !important; }
+}
+
+.safe-area-inset {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+@media print {
+  #titlebar,
+  #menu-btn,
+  #agent-dot,
+  #slides-btn,
+  #mobile-menu,
+  #cola-context-menu,
+  .mermaid-error,
+  .mermaid-loading,
+  .mermaid-source,
+  textarea.mermaid-source,
+  .math-block-raw,
+  .math-inline-raw,
+  .hidden {
+    display: none !important;
+  }
+
+  #editor {
+    position: static !important;
+    overflow: visible !important;
+    padding: 0 !important;
+  }
+
+  .ProseMirror {
+    min-height: auto !important;
+    font-size: 14px !important;
+  }
+
+  .mermaid-preview svg {
+    max-height: none !important;
+  }
+
+  @page {
+    margin: 15mm;
+    size: A4;
+  }
+}

package/themes/README.md

@@ -8,6 +8,9 @@ Download any `.css` file and place it in `~/.colamd/themes/`, or use **Theme > I
 |-------|-------------|
 | [elegant.css](elegant.css) | Warm serif theme with terracotta accents and dark code blocks |
 | [guizang.css](guizang.css) | 古雅沉稳的归藏风格，赭石强调色、松烟墨代码块、宣纸底色 |
+| [forest-ink.css](forest-ink.css) | 森林墨主题，宣纸暖白底、松烟墨绿文字、森林绿强调色（灵感来自 wanhua-ppt Forest Ink 设计规范） |
+| [academic-paper.css](academic-paper.css) | 📄 **学术论文主题（增强版）** — 符合 GB/T 7713 中文学术论文排版规范，黑体（SimHei）标题 + 宋体（SimSun）正文及首行缩进，三线表格式（顶线 + 表头底线 + 底线），10.5pt 字号，打印优化的 Mermaid 图表（直角容器、灰度配色），脚注与参考文献样式，Typora 兼容选择器。完整示例见 [`docs/academic-demo.md`](../docs/academic-demo.md) |
+| [pixso-design.css](pixso-design.css) | 🎨 Pixso 设计主题，现代设计系统风格 |
 
 ## Creating Your Own Theme