為 "www.ptt.cc"（批踢踢實業坊網頁版）套用 "Solarized Light" 配色主題、調整版面設計，並加入額外視覺特效。
※ 已整合 "PTT Web Enhanced" 樣式。
Ptt.cc - Solarized Light Theme by bearhydrapuppisa
Details
Authorbearhydrapuppisa
LicenseNo License
Categorywww.ptt.cc
Created
Updated
Code size62 kB
Code checksuma1d94fdd
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 - Solarized Light Theme
@namespace https://userstyles.world/user/bearhydrapuppisa
@author 114514
@description 為 "www.ptt.cc"（批踢踢實業坊網頁版）套用 "Solarized Light" 配色主題、調整版面設計，並加入額外視覺特效。
@version 2025.05.01.1
@license CC0-1.0
@homepageURL https://userstyles.world/style/22153/ptt-cc-solarized-light-theme
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("www.ptt.cc") {
/* ==========================================================================
1. 基本設定 & 變數 (Solarized Light Theme)
========================================================================== */
:root {
/* --- 1.1 Solarized Light 基本配色 --- */
--sl-base03: #002b36; /* Darkest */
--sl-base02: #073642; /* Dark */
--sl-base01: #586e75; /* Content Emphasis / Improved Contrast */
--sl-base00: #657b83; /* Content Secondary */
--sl-base0: #839496; /* Content Main / Improved Contrast Secondary */
--sl-base1: #93a1a1; /* Content Tertiary / Light Gray */
--sl-base2: #eee8d5; /* Light Background */
--sl-base3: #fdf6e3; /* Lightest Background */
/* Accents */
--sl-yellow: #b58900;
--sl-orange: #cb4b16;
--sl-red: #dc322f;
--sl-magenta: #d33682; /* Improved Visited Link */
--sl-violet: #6c71c4;
--sl-blue: #268bd2;
--sl-cyan: #2aa198;
--sl-green: #859900;
/* --- 1.2 介面元件顏色 --- */
--sl-visited-link: var(--sl-magenta); /* 已訪問連結 (改為 Magenta 提高對比) */
--sl-richcontent-bg: var(--sl-base2); /* 內嵌內容背景 */
--sl-polling-hover-bg: var(--sl-base1); /* 投票區懸停背景 (也用於選單選項) */
--sl-polling-active-bg: var(--sl-blue); /* 投票區點擊背景 */
--sl-shadow-color: rgba(88, 110, 117, 0.25); /* 通用陰影 (基於 sl-base01) */
--sl-text-shadow-color: rgba(147, 161, 161, 0.5); /* 文字陰影 (基於 sl-base1) */
/* --- 1.3 搜尋列顏色 --- */
--sl-search-border-color: rgba(38, 139, 210, 0.3); /* sl-blue alpha */
--sl-search-hover-border-color: var(--sl-blue);
--sl-search-input-focus-border-color: var(--sl-cyan);
--sl-search-glow-color: rgba(38, 139, 210, 0.15); /* sl-blue alpha */
--sl-search-hover-glow-color: rgba(38, 139, 210, 0.5); /* sl-blue alpha */
--sl-search-focus-glow-color: rgba(42, 161, 152, 0.5); /* sl-cyan alpha */
/* --- 1.4 按鈕顏色 --- */
--sl-btn-disabled-bg: var(--sl-base1); /* 禁用按鈕背景 */
--sl-btn-disabled-fg: rgba(131, 148, 150, 0.7); /* 禁用按鈕文字 (sl-base0 alpha) */
--sl-btn-big-shadow: rgba(88, 110, 117, 0.35); /* 大按鈕陰影 (sl-base01 alpha) */
--sl-btn-big-agree-bg-start: var(--sl-green);
--sl-btn-big-agree-bg-end: #7a8c00; /* Slightly darker green */
--sl-btn-big-agree-hover-bg-start: #98aa22; /* Lighter green */
--sl-btn-big-agree-hover-bg-end: var(--sl-green);
--sl-btn-big-disagree-bg: var(--sl-base2);
--sl-btn-big-disagree-border: var(--sl-base1);
--sl-btn-big-disagree-hover-bg: var(--sl-base1);
--sl-btn-big-disagree-hover-border: var(--sl-red);
--sl-btn-big-disagree-hover-fg: var(--sl-red); /* 不同意按鈕懸停文字顏色 (改善) */
/* --- 1.5 PWE 擴充功能相關顏色 --- */
--sl-floor-hover-bg: var(--sl-blue); /* 推文樓層懸停背景 (窄螢幕) */
--sl-menu-bg: var(--sl-base2); /* PWE 選單背景 */
--sl-menu-border: var(--sl-base1); /* PWE 選單邊框 */
--sl-menu-anchor-separator: rgba(147, 161, 161, 0.5); /* PWE 選單選項分隔線 (sl-base1 alpha) */
--sl-menu-dropdown-shadow: rgba(88, 110, 117, 0.4); /* PWE 下拉選單陰影 (sl-base01 alpha) */
--sl-notify-shadow: rgba(38, 139, 210, 0.3); /* PWE 通知視窗陰影 (sl-blue alpha) */
--sl-pwe-board-hover-shadow: rgba(42, 161, 152, 0.5); /* PWE 看板連結懸停陰影 (sl-cyan alpha) */
--sl-statistics-hover-shadow: rgba(38, 139, 210, 0.4); /* PWE 統計區懸停陰影 (sl-blue alpha) */
/* --- 1.6 其他視覺效果顏色 --- */
--sl-img-hover-shadow-color: rgba(38, 139, 210, 0.4); /* 圖片懸停陰影 (sl-blue alpha) */
--sl-polling-glow-color: rgba(38, 139, 210, 0.4); /* 投票區懸停光暈 (sl-blue 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;
--sl-focus-ring-color: rgba(38, 139, 210, 0.4); /* 焦點外框光暈 (sl-blue 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(--sl-base1) var(--sl-base3); /* thumb track */
}
/* ==========================================================================
1.5. 動畫關鍵影格
========================================================================== */
/* Meta 值懸停 - 色彩變換 + 光暈 */
@keyframes meta-value-color-shift-glow {
0%, 100% {
color: var(--sl-cyan);
text-shadow: 0 0 4px var(--sl-cyan), 0 0 8px var(--sl-cyan), 1px 1px 3px var(--sl-text-shadow-color);
}
33% {
color: var(--sl-green);
text-shadow: 0 0 4px var(--sl-green), 0 0 8px var(--sl-green), 1px 1px 3px var(--sl-text-shadow-color);
}
66% {
color: var(--sl-yellow);
text-shadow: 0 0 4px var(--sl-yellow), 0 0 8px var(--sl-yellow), 1px 1px 3px var(--sl-text-shadow-color);
}
}
/* 作者懸停特效 */
@keyframes author-hover-effect {
0%, 100% {
color: var(--sl-orange);
text-shadow: 0 0 4px var(--sl-orange), 0 0 8px var(--sl-orange), 1px 1px 4px var(--sl-text-shadow-color);
transform: scale(1) rotate(0deg);
}
50% {
color: var(--sl-yellow);
text-shadow: 0 0 6px var(--sl-orange), 0 0 12px var(--sl-yellow), 1px 1px 4px var(--sl-text-shadow-color);
transform: scale(1.03) rotate(-1deg);
}
}
/* 時間懸停特效 */
@keyframes time-hover-effect {
0%, 100% {
color: var(--sl-base00); /* Main Content */
text-shadow: 0 0 4px var(--sl-base0), 1px 1px 4px var(--sl-text-shadow-color);
}
50% {
color: var(--sl-base00); /* Main Content */
text-shadow: 0 0 6px var(--sl-base0), 0 0 9px var(--sl-base1), 1px 1px 4px var(--sl-text-shadow-color); /* Glow with base1 */
}
}
/* 標題懸停光暈 (變色) */
@keyframes title-glow-pulse {
0%, 100% {
color: var(--sl-blue);
text-shadow: 0 0 4px var(--sl-base1), 2px 2px 6px var(--sl-text-shadow-color);
transform: scale(1);
}
50% {
color: var(--sl-violet);
text-shadow: 0 0 8px var(--sl-base1), 2px 2px 6px var(--sl-text-shadow-color);
transform: scale(1.01);
}
}
/* 爆文標籤特效 (加強縮放) */
@keyframes hot-post-effect {
0%, 100% {
color: var(--sl-red);
transform: scale(1.15);
}
50% {
color: var(--sl-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; }
}
...