Custom CSS

ID Naming Convention

All component IDs follow the route-component naming convention (lowercase), for example:

• Desktop AI Chat: record-chat
• Mobile Writing Editor: mobile-writing

Desktop Components

Writing Page (Article)

• Main Editor Container: #article-editor

  • Contains the Markdown editor and toolbar
  • Path: /core/article

• File Sidebar: #article-sidebar

  • Contains file manager and workspace selector
  • Path: /core/article

AI Chat Page (Record)

• Chat Container: #record-chat

  • Contains chat content, input field, and toolbar
  • Path: /core/record

• Notes Sidebar: #record-sidebar

  • Contains tag management and notes list
  • Path: /core/record

Search Page

• Search Page Container: #search-page
  • Contains search input and results list
  • Path: /core/search

Image Management Page

• Image Page Container: #image-page
  • Contains image list and upload area
  • Path: /core/image

Settings Page

• Settings Page Container: #setting-page
  • Contains settings tabs and content area
  • Path: /core/setting/*

Mobile Components

AI Chat

• Mobile Chat Container: #mobile-chat
  • Mobile AI chat interface
  • Path: /mobile/chat

Writing Editor

• Mobile Editor Container: #mobile-writing
  • Mobile Markdown editor
  • Path: /mobile/writing

Notes List

• Mobile Notes List: #mobile-record
  • Mobile notes management interface
  • Path: /mobile/record

Settings

• Mobile Settings Page: #mobile-setting
  • Mobile settings interface
  • Path: /mobile/setting

Usage Examples

Change AI Chat Background Color

/* Desktop */
#record-chat {
  background-color: #f5f5f5;
}

/* Mobile */
#mobile-chat {
  background-color: #f5f5f5;
}

Change Editor Font

/* Desktop Editor */
#article-editor {
  font-family: 'Monaco', 'Consolas', monospace;
}

/* Mobile Editor */
#mobile-writing {
  font-family: 'Monaco', 'Consolas', monospace;
}

Modify Sidebar Width

/* File Sidebar */
#article-sidebar {
  min-width: 400px !important;
  max-width: 500px !important;
}

/* Notes Sidebar */
#record-sidebar {
  min-width: 350px !important;
  max-width: 450px !important;
}

Customize Search Page

#search-page {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

#search-page input {
  border-radius: 20px;
  border: 2px solid #4a90e2;
}

Adjust Settings Page Layout

#setting-page {
  max-width: 1400px;
  margin: 0 auto;
}

Important Notes

1. Use !important: Due to Tailwind CSS's high specificity, you may need to use !important to override some styles.

2. Responsive Design: Use media queries for different screen sizes:

   @media (max-width: 768px) {
     #article-editor {
       font-size: 14px;
     }
   }

3. Theme Support: Use CSS variables or dark mode selectors:

   /* Light theme */
   #record-chat {
     background-color: #ffffff;
   }
   
   /* Dark theme */
   .dark #record-chat {
     background-color: #1a1a1a;
   }

4. Child Elements: Target specific elements using child selectors:

   #article-editor .vditor-reset {
     line-height: 1.8;
   }
   
   #record-chat .chat-message {
     padding: 16px;
   }