為 "www.ptt.cc"（批踢踢實業坊網頁版）套用 "Nord" 配色主題、調整版面設計，並加入額外視覺特效。
※ 已整合 "PTT Web Enhanced" 樣式。
Ptt.cc - Nord Theme by bearhydrapuppisa
Details
Authorbearhydrapuppisa
LicenseNo License
Categorywww.ptt.cc
Created
Updated
Code size61 kB
Code checksum47d81d4a
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
建議搭配以下使用者腳本及瀏覽器擴充套件：
- eight04/ptt-imgur-fix
修正 Imgur 在 PTT 上的問題
- GitHub 連結 | Greasy Fork 連結
- 建議設定：
Maximum width of image:100%Maximum height of image:75vh
- PTT Web Enhanced
幫 PTT web 版增加各種方便的功能，例如推文顯示樓層、高亮度點選的 ID 的所有推文、標示文章作者的推文等等
- Firefox 版本：Firefox 附加元件 (Mozilla Add-ons)
- Chrome 版本：Chrome 線上應用程式商店
所有色彩樣式版本：
Ptt.cc - Dracula Theme
Ptt.cc - Nord Theme
Ptt.cc - Solarized Light Theme
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Ptt.cc - Nord Theme
@namespace https://userstyles.world/user/bearhydrapuppisa
@author 114514
@description 為 "www.ptt.cc"（批踢踢實業坊網頁版）套用 "Nord" 配色主題、調整版面設計，並加入額外視覺特效。
@version 2025.05.01.7
@license CC0-1.0
@homepageURL https://userstyles.world/style/22154/ptt-cc-nord-theme
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("www.ptt.cc") {
/* ==========================================================================
1. 基本設定 & 變數 (Nord Theme)
========================================================================== */
:root {
/* --- 1.1 Nord 基本配色 --- */
/* Polar Night */
--nord0: #2E3440; /* 最暗背景 */
--nord1: #3B4252; /* 區塊背景 */
--nord2: #434C5E; /* 較亮區塊背景 */
--nord3: #4C566A; /* 最亮暗色/邊框 */
/* Snow Storm */
--nord4: #D8DEE9; /* 次要文字/淺灰 / 改良後的通用已訪問連結 */
--nord5: #E5E9F0; /* 較淺灰 */
--nord6: #ECEFF4; /* 主要文字/白色 */
/* Frost */
--nord7: #8FBCBB; /* 青色 */
--nord8: #88C0D0; /* 淺藍 / 標題光暈色1 / 文章列表已訪問連結 */
--nord9: #81A1C1; /* 藍色 */
--nord10: #5E81AC;/* 深藍 */
/* Aurora */
--nord11: #BF616A;/* 紅色 */
--nord12: #D08770;/* 橘色 */
--nord13: #EBCB8B;/* 黃色 */
--nord14: #A3BE8C;/* 綠色 / 標題光暈色2 */
--nord15: #B48EAD;/* 紫色 */
/* --- 1.2 介面元件顏色 --- */
--nord-visited-link: var(--nord4); /* 通用已訪問連結 (改為 nord4 提高對比) */
--nord-richcontent-bg: var(--nord2); /* 內嵌內容背景 */
--nord-polling-hover-bg: var(--nord3); /* 投票區懸停背景 (也用於選單選項) */
--nord-polling-active-bg: var(--nord10);/* 投票區點擊背景 */
--nord-shadow-color: rgba(46, 52, 64, 0.35); /* 通用陰影 (基於 nord0) */
--nord-text-shadow-color: rgba(46, 52, 64, 0.5); /* 文字陰影 (基於 nord0) */
/* --- 1.3 搜尋列顏色 --- */
--nord-search-border-color: rgba(94, 129, 172, 0.3); /* nord10 alpha */
--nord-search-hover-border-color: var(--nord10);
--nord-search-input-focus-border-color: var(--nord8);
--nord-search-glow-color: rgba(94, 129, 172, 0.2); /* nord10 alpha */
--nord-search-hover-glow-color: rgba(94, 129, 172, 0.7); /* nord10 alpha */
--nord-search-focus-glow-color: rgba(136, 192, 208, 0.7); /* nord8 alpha */
/* --- 1.4 按鈕顏色 --- */
--nord-btn-disabled-bg: var(--nord2); /* 禁用按鈕背景 */
--nord-btn-disabled-fg: rgba(236, 239, 244, 0.5); /* 禁用按鈕文字 (nord6 alpha) */
--nord-btn-big-shadow: rgba(46, 52, 64, 0.45); /* 大按鈕陰影 (nord0 alpha) */
--nord-btn-big-agree-bg-start: var(--nord14);
--nord-btn-big-agree-bg-end: #95b37e; /* Slightly darker green */
--nord-btn-big-agree-hover-bg-start: #b1d09c; /* Lighter green */
--nord-btn-big-agree-hover-bg-end: var(--nord14);
--nord-btn-big-disagree-bg: var(--nord1);
--nord-btn-big-disagree-border: var(--nord4);
--nord-btn-big-disagree-hover-bg: var(--nord3);
--nord-btn-big-disagree-hover-border: var(--nord11);
/* --- 1.5 PWE 擴充功能相關顏色 --- */
--nord-floor-hover-bg: var(--nord10); /* 推文樓層懸停背景 (窄螢幕) */
--nord-menu-bg: var(--nord1); /* PWE 選單背景 */
--nord-menu-border: var(--nord4); /* PWE 選單邊框 */
--nord-menu-anchor-separator: rgba(46, 52, 64, 0.5); /* PWE 選單選項分隔線 (nord0 alpha) */
--nord-menu-dropdown-shadow: rgba(46, 52, 64, 0.6); /* PWE 下拉選單陰影 (nord0 alpha) */
--nord-notify-shadow: rgba(94, 129, 172, 0.4); /* PWE 通知視窗陰影 (nord10 alpha) */
--nord-pwe-board-hover-shadow: rgba(136, 192, 208, 0.7); /* PWE 看板連結懸停陰影 (nord8 alpha) */
--nord-statistics-hover-shadow: rgba(94, 129, 172, 0.5); /* PWE 統計區懸停陰影 (nord10 alpha) */
/* --- 1.6 其他視覺效果顏色 --- */
--nord-img-hover-shadow-color: rgba(94, 129, 172, 0.6); /* 圖片懸停陰影 (nord10 alpha) */
--nord-polling-glow-color: rgba(94, 129, 172, 0.5); /* 投票區懸停光暈 (nord10 alpha) */
/* --- 1.7 版面、字型與間距 --- */
--default-border-radius: 6px; /* 預設圓角 */
--main-font-size: 1.3125rem; /* 主要內文字體大小 (21px) */
--meta-font-size: 1.125rem; /* Meta 資訊字體大小 (18px) */
--title-font-size: 2rem; /* 文章標題字體大小 (32px) */
--push-ip-font-size: 0.85em; /* 推文 IP/時間字體大小 */
--menu-font-size: 1.1rem; /* PWE 選單觸發器字體大小 */
--menu-item-font-size: 1.05rem; /* PWE 選單選項字體大小 */
--main-line-height: 1.7; /* 主要內文行高 */
--push-line-height: 1.5; /* 推文行高 */
--content-width: 52.5rem; /* 主要內容區塊寬度 (840px) */
--main-content-width: 67.5rem; /* 整體容器最大寬度 (1080px) */
--letter-spacing-main: 0.5px; /* 主要內文字間距 */
--letter-spacing-push: 0.5px; /* 推文字間距 */
/* --- 1.8 間距 --- */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 0.75rem; /* 12px */
--spacing-lg: 1rem; /* 16px */
--spacing-xl: 1.5rem; /* 24px */
--spacing-xxl: 2rem; /* 32px */
/* --- 1.9 焦點樣式 --- */
--focus-outline-width: 2px;
--focus-outline-offset: 2px;
--nord-focus-ring-color: rgba(94, 129, 172, 0.4); /* 焦點外框光暈 (nord10 alpha) */
/* --- 1.10 推文對齊 (Flexbox) --- */
--push-userid-width: 6.5em;
--push-tag-margin-right: var(--spacing-xs);
--push-userid-margin-right: var(--spacing-sm);
--push-min-height: calc(var(--push-line-height) * 1em + var(--spacing-sm) * 2);
/* --- 1.11 捲軸 (Firefox) --- */
scrollbar-color: var(--nord3) var(--nord0); /* thumb track */
}
/* ==========================================================================
1.5. 動畫關鍵影格
========================================================================== */
/* Meta 值懸停 - 色彩變換 + 光暈 */
@keyframes meta-value-color-shift-glow {
0%, 100% {
color: var(--nord8); /* Light Blue */
text-shadow: 0 0 4px var(--nord8), 0 0 8px var(--nord8), 1px 1px 3px var(--nord-text-shadow-color);
}
33% {
color: var(--nord14); /* Green */
text-shadow: 0 0 4px var(--nord14), 0 0 8px var(--nord14), 1px 1px 3px var(--nord-text-shadow-color);
}
66% {
color: var(--nord13); /* Yellow */
text-shadow: 0 0 4px var(--nord13), 0 0 8px var(--nord13), 1px 1px 3px var(--nord-text-shadow-color);
}
}
/* 作者懸停特效 */
@keyframes author-hover-effect {
0%, 100% {
color: var(--nord12); /* Orange */
text-shadow: 0 0 4px var(--nord12), 0 0 8px var(--nord12), 1px 1px 4px var(--nord-text-shadow-color);
transform: scale(1) rotate(0deg);
}
50% {
color: var(--nord13); /* Yellow */
text-shadow: 0 0 6px var(--nord12), 0 0 12px var(--nord13), 1px 1px 4px var(--nord-text-shadow-color);
transform: scale(1.03) rotate(-1deg);
}
}
/* 時間懸停特效 */
@keyframes time-hover-effect {
0%, 100% {
color: var(--nord6); /* White */
text-shadow: 0 0 4px var(--nord6), 1px 1px 4px var(--nord-text-shadow-color);
}
50% {
color: var(--nord6); /* White */
text-shadow: 0 0 6px var(--nord6), 0 0 9px var(--nord4), 1px 1px 4px var(--nord-text-shadow-color); /* Glow with nord4 */
}
}
/* 標題懸停光暈 (變色) - 修改光暈顏色 */
@keyframes title-glow-pulse {
0%, 100% {
color: var(--nord10); /* Dark Blue */
/* 光暈改為淺藍/青色 */
text-shadow: 0 0 4px var(--nord8), 0 0 8px var(--nord8), 2px 2px 6px var(--nord-text-shadow-color);
transform: scale(1);
}
50% {
color: var(--nord15); /* Purple */
/* 光暈改為綠色 */
text-shadow: 0 0 6px var(--nord14), 0 0 12px var(--nord14), 2px 2px 6px var(--nord-text-shadow-color);
transform: scale(1.01);
}
}
/* 爆文標籤特效 (加強縮放) */
@keyframes hot-post-effect {
0%, 100% {
color: var(--nord11); /* Red */
transform: scale(1.15);
}
50% {
color: var(--nord11); /* Red */
transform: scale(1.3);
}
}
/* 噓文標籤晃動特效 */
@keyframes shake-effect {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
/* 彩蛋：貓捉老鼠 */
@keyframes mouse-cat-chase {
0% { transform: translateX(5vw) scaleX(1); opacity: 0; }
5% { transform: translateX(0vw) scaleX(1); opacity: 0.9; }
10% { transform: translateX(-5vw) translateY(-5px) scaleX(1); opacity: 0.9; }
30% { transform: translateX(-25vw) translateY(5px) scaleX(1); }
50% { transform: translateX(-45vw) translateY(-5px) scaleX(1); }
70% { transform: translateX(-65vw) translateY(0px) scaleX(1); }
95% { transform: translateX(-80vw) translateY(-5px) scaleX(1); opacity: 0.9; }
100% { transform: translateX(-85vw) scaleX(1); opacity: 0; }
}
/* 彩蛋：小鳥飛行 */
@keyframes bird-fly-across {
0% { transform: translateX(0) translateY(0) scaleX(1); opacity: 0.9; }
25% { transform: translateX(25vw) translateY(-20px) scaleX(-1); }
50% { transform: translateX(50vw) translateY(10px) scaleX(1); }
75% { transform: translateX(75vw) translateY(-15px) scaleX(-1); }
95% { transform: translateX(100vw) translateY(5px) scaleX(-1); opacity: 0.9; }
100% { transform: translateX(105vw) translateY(0) scaleX(-1); opacity: 0; }
}
/* 文章投票區塊懸停 */
@keyframes poll...