用自訂 CSS 隨心所欲自訂你的翻譯樣式

隨心自訂你的翻譯樣式 🎨

有沒有想過讓翻譯的樣式完全符合你的閱讀心情?也許你想要柔和的粉紅彩色調來進行睡前閱讀,或者想要醒目的高亮來輔助學習?

**現在你可以完全掌控。 ** 陪讀蛙的自訂 CSS 功能讓你精確設計翻譯在任何網站上的顯示方式。

為什麼自訂樣式很重要 💡

預設的翻譯樣式確實能用……但並不總是最合適。不同的內容需要不同的視覺處理:

閱讀場景	你需要什麼	預設樣式的問題
📚 深夜學習	柔和、護眼的顏色	明亮的預設樣式讓眼睛疲勞
🎯 重要研究	醒目、不會錯過的高亮	微妙的樣式容易被忽略
📰 休閒瀏覽	簡潔、融入頁面的設計	厚重的樣式感覺很突兀
🎨 個人偏好	匹配網站的深色主題	一刀切的方案不適合你

真相是: 你的閱讀場景一直在改變。翻譯樣式也應該隨之適應。

認識你的新 CSS 編輯器 ⚡

我們不是簡單地加個文字框就了事。陪讀蛙的 CSS 編輯真的很強大:

Demo

為所有人打造

對初學者友善:

🎨 顏色選擇器 - 點擊任何顏色值即可開啟視覺化選擇器
✅ 即時驗證 - 即時獲得語法錯誤回饋
💡 智慧提示 - 輸入時自動補全
📝 範例範本 - 從可用的範例開始

對進階使用者強大:

⚡ 完整 CSS 支援 - 使用漸層、陰影、動畫、變量
🔧 語法高亮 - CodeMirror 驅動的編輯器
📏 行號和折疊 - 輕鬆導航大型樣式表
🎯 錯誤提示欄 - 一眼看到錯誤

專業提示: 編輯器使用 CodeMirror - 這是開發者工具背後同樣強大的引擎。你在瀏覽器插件中獲得了專業級的功能!

顏色選擇器的魔力 🌈

這裡開始變得有趣了。以前寫 CSS 顏色需要:

❌ 谷歌搜尋"顏色選擇器" ❌ 複製十六進位代碼 ❌ 在標籤頁之間切換 ❌ 希望看起來正確

現在? 只需點擊 CSS 中的任何顏色:

輸入或貼上任何顏色格式:#FF5733、rgb(255, 87, 51)、hsl(9, 100%, 60%)
點擊它 - 顏色選擇器立即出現
視覺化調整 - 拖曳、滑動或輸入新值
完成 - 顏色即時更新

選擇器理解所有 CSS 顏色格式:

十六進位:#FF5733
RGB/RGBA:RF0
HSL/HSLA:RF0
命名顏色:tomato、skyblue、gold
CSS 變數:var(--my-color)

即時驗證拯救你的理智 ✨

有沒有保存 CSS 後才發現搞砸了一切?再也不會了。

安全網: 編輯器會在你儲存之前驗證 CSS。再也不會出現樣式崩潰,再也不需要"撤銷恐慌"。

驗證內容:

檢查項	作用	範例
文法錯誤	捕捉拼字錯誤、缺少括號	`color: #FF573` ❌ → 缺少一位數字
屬性名稱	標記無效的 CSS 屬性	`colour: red` ❌ → 使用 `color`
長度限制	防止樣式表過大	最大 8KB(夠複雜的樣式使用)
選擇器有效性	確保選擇器有效	`.my class` ❌ → `.my-class` ✅

即時的視覺回饋:

🟢 綠色"有效" - 你的 CSS 完美,可以保存
⚪ 灰色"驗證中..." - 正在檢查你的更改(500ms 防手震)
🔴 紅色"語法錯誤" - 有問題,會顯示有用的錯誤訊息

如何創建你的第一個自訂樣式 🎯

只需不到 2 分鐘:

開啟陪讀蛙設定 → 翻譯 → 翻譯顯示樣式
將"使用自訂樣式"切換為開啟
你會看到 CSS 編輯器顯示一個有用的範本:

/* 示例:带颜色和背景的自定义样式 */
[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

自訂它! 點擊顏色值開啟選擇器,調整內邊距,新增邊框
當驗證顯示綠色時點擊"儲存"
造訪任何網站並翻譯 - 你的樣式立即應用!

風格創意推薦 💫

在實際範例中看看這些樣式的效果!每個範例都展示了 CSS 如何影響真實的翻譯文字。

1. 柔和粉彩高亮

最適合: 長時間閱讀、小說、博客

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#F2E3BC, #C19875);
  padding: 2px 4px;
  border-radius: 4px;
}

2. 醒目學習模式

最適合: 教科書、研究論文、記憶學習

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

3. 響應滑鼠的動畫

最適合: 響應式的設計，讓翻譯更靈動

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

4. 酷炫的動畫效果

最適合: 給你的朋友展示酷動畫效果

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

高級技巧 🚀

使用 CSS 變數

定義一次顏色,到處重用:

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

響應淺色/深色模式

使用 light-dark() 函數(現代瀏覽器):

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

技術細節 🔧

對於想了解底層技術的人:

功能	科技	為什麼重要
編輯器	CodeMirror 6	業界標準,被 VS Code 線上版使用
顏色選擇器	`@uiw/codemirror-extensions-color`	原生整合,支援所有 CSS 格式
驗證	`css-tree` 解析器	快速、準確的 CSS 語法驗證
大小限制	8KB (8,192 字元)	足夠複雜的樣式使用,防止效能問題

最佳實務技巧 💡

黃金法則:

從簡單開始 - 逐步增加複雜性
在多個網站上測試 - 樣式與頁面 CSS 的互動方式不同
使用低透明度背景 - 保持文字可讀性
避免 !important - 選擇器已經足夠特定
儲存前預覽 - 驗證可以捕獲錯誤,但也要視覺測試

要避免的常見陷阱:

❌ 不要: color: #FF(不完整的十六進位代碼) ✅ 要: color: #FF5733(完整的 6 位元十六進位)

❌ 不要: padding: 10(缺單位) ✅ 要: padding: 10px(包含單位)

❌ 不要: 寫 200 行 CSS ✅ 要: 專注於基本屬性(顏色、背景、內邊距、邊框)

接下來? 🔮

我們已經在計劃令人興奮的新增功能:

🎨 樣式庫 - 瀏覽並匯入社群建立的樣式
📤 匯出/匯入 - 與朋友分享你最喜歡的樣式
🎯 每個網站的樣式 - 為不同網站設定不同樣式
📊 樣式預覽面板 - 儲存前查看更改

有功能想法? 加入我們的 Discord,告訴我們什麼能讓你的翻譯樣式更好!