🎨 主題概念:粉藍夢境系|漸層風格
無論是設計、時尚,還是生活美學,粉藍漸層都能為作品增添一抹夢幻氣息。它不只是色彩組合,更是一種情緒的傳遞——讓人彷彿置身於晨曦微光或黃昏雲霞之中,感受寧靜與浪漫交織的美好。不妨試試這個「自帶濾鏡」的配色,讓視覺也成為一場溫柔的夢境吧!

📷 細節預覽
① 【首頁】:

首頁上方選單:滑動效果預覽

② 【首頁側邊各區塊】:
熱門文章:滑動效果預覽

誰來我家:滑動效果預覽

文章分類:滑動效果預覽

③ 【文章內頁、留言區】:
文章標題:滑動效果預覽

文章標籤、繼續閱讀:滑動效果預覽

文章內頁底部區塊(留言區):

④ 【文章列表】:
文章列表:

📑 主要設計
① 【字體】
- 大小:16px
- 字體:Noto Sans TC (思源黑體)
②【主要使用顏色】
③【RWD 響應式規格】
欄位一覽表
對照 後台 > 側欄管理 ,沒調整樣式的欄位維持預設。

| 後台欄位名稱 | id | 調整樣式 | 註解/說明 | |
|---|---|---|---|---|
| 內容欄 | 公告版位 | spotlight | ✅ | 可放置重要通知或最新消息 |
| 頁尾描述 | footer | ✅ | 可顯示個人簡介或聯絡資訊 | |
| 常用欄位 | 個人資訊 | user-info | ✅ | - |
| 熱門文章 | hot-article | ✅ | - | |
| 最新文章 | recent-article | ✅ | - | |
| 誰來我家 | visitor | ✅ | - | |
| 我去誰家 | crumb | ✅ | - | |
| 最新留言 | latest-comment | ✅ | - | |
| 文章分類 | category | ✅ | 資料夾、分類 | |
| 文章搜尋 | search | ✅ | 搜尋框 | |
| 參觀人氣 | counter | ✅ | - | |
| 文章精選 | archive | ✅ | 可下拉選擇月份來查看該月的文章 | |
| 月曆 | calendar | ✅ | - | |
| 動態訂閱 | newsfeed | ✅ | 顯示痞客邦有關注的部落格最新文章 | |
| 我的連結 | mylink | ✅ | 可手動設定的常用連結區 | |
| 其他欄位 | POWERED BY | powered | ❌ | - |
| 站方公告 | announce | ✅ | - | |
| RSS訂閱 | subscription | ❌ | - | |
| 新聞交換(RSS) | feed | ❌ | - | |
| QR Code | qrcode | ❌ | - | |
| 我的好友 | friendbox | ✅ | - | |
| 活動快報 | events | ❌ | - | |
| 外掛欄位 | 相簿幻燈片 | albumshow | ❌ | - |
| 留言板 | side_gb | ✅ | 顯示留言板功能,提供訪客留言互動 |
💡 使用說明 & 注意事項
- ✅ 樣式可自由使用、修改、調整顏色與字體,但請保留出處!
- ❌ 禁止二次販售或轉賣這份樣式
💻 樣式程式碼 (右鍵複製整段貼至後台 > 樣式管理 > 部落格 CSS 原始碼)
/*v1.3.0*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}pre{white-space:pre-wrap;word-wrap:break-word;-moz-tab-size:4;tab-size:4}#banner,.article-content-inner,.box-text,.main-list table{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}#banner #blog-category,#banner .skiplink{display:none}.box-more{text-align:right}.back-to-top,#blog-main .back-to-top,#category-main .back-to-top{display:none}#footer #bottom::before{display:block;content:"版權所有 © hsinyu / Copyright © hsinyu. All rights reserved.";width:100%;text-align:center;margin-top:1em;font-size:0.9rem}#trialsquad-post{display:none !important}.article-content-inner p{margin:1em 0;font-size:1rem}.article-content-inner ol{list-style-type:decimal;padding:1em .5em 1em 2.5em}.article-content-inner ul{list-style-type:disc;padding:1em 0 1em 2.5em}.article-content-inner img{margin:10px 0;max-width:100%;height:auto}.article-content-inner h1{font-size:1.4rem;font-weight:700;margin:.5em 0}.article-content-inner h2{font-size:1.3rem;font-weight:700;margin:.5em 0}.article-content-inner h3{font-size:1.2rem;font-weight:700;margin:.5em 0}.article-content-inner h4,.article-content-inner h5,.article-content-inner h6{margin:.5em 0;font-weight:700;font-size:1.1rem}.article-content-inner b,.article-content-inner strong{font-weight:700}.article-content-inner em{font-style:italic}.article-content-inner blockquote{padding-left:20px;padding-right:8px;border-left-width:5px;font-style:italic;font-family:Georgia,Times,"Times New Roman",serif;border-style:solid}.article-content-inner{padding:0 0.1rem}.article-keyword a{border-bottom:none}:root{--primary-color:#0080ff;--primary-light-color:#8ccfff;--secondary-color:#ff4793;--secondary-light-color:#ffdbea;--main-text-color:#555;--side-text-color:#888;--light-gray-color:#f9f9f9}html{font-size:16px;font-family:'Noto Sans TC','微軟正黑體',sans-serif !important;line-height:165%;color:var(--main-text-color)}a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}.pixnavbar{background-color:var(--primary-color)!important}#main{margin:2rem auto;display:flex;flex-direction:row;gap:2rem}#content{flex:70%}#links{flex:30%}#header{margin:0;display:flex;flex-direction:column}#banner{min-height:40dvh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,var(--secondary-light-color) 0%,var(--primary-light-color)100%)}#banner h1{font-size:3rem;font-weight:600;line-height:4rem;padding:2rem 1rem}@media (max-width:767px){#banner h1{font-size:1.8rem;line-height:2rem;padding:1rem}}#banner h1 a{background:linear-gradient(to right,var(--secondary-color) 0%,var(--primary-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 0.3s ease-in-out}#banner h1 a:hover{font-size:3.1rem}#banner h2{margin:0 auto;padding:0 1rem;color:var(--main-text-color);max-width:60vw;font-size:1rem;letter-spacing:0.1rem}@media (max-width:767px){#banner h2{line-height:1.2rem}}#banner h2:before{display:block;width:100%;padding:40px;height:100px;border-top:1px solid var(--main-text-color);position:absolute;top:50%;z-index:-10;left:-40px}#navigation{width:fit-content;display:flex;flex-direction:row;justify-content:center;align-items:center;margin:0 auto;background-color:white;border-radius:4px;margin-top:-1.5rem;overflow:hidden;border:1px solid var(--light-gray-color);box-shadow:0 0 1px 1px rgba(0,0,0,0.05)}#navigation li{transition:all 0.3s ease-in-out}#navigation a{color:var(--main-text-color);line-height:2.6rem;padding:1rem 4rem;transition:all 0.1s ease-in-out}#navigation a:hover{color:white;text-decoration:none;background-color:var(--primary-color);background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color))}@media (max-width:767px){#navigation{margin-top:0rem;flex-wrap:wrap}#navigation a{padding:1rem 1.6rem;line-height:2rem}}@media (min-width:768px) and (max-width:1024px){#navigation a{padding:1rem 4rem;line-height:2.6rem}}#spotlight{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 2rem;margin:1rem auto;width:92%;height:fit-content;background:#fff;text-align:left;box-shadow:0px 1px 3px 2px var(--primary-light-color);border-radius:4px;opacity:1;transform:scale(1);overflow:hidden}@media (max-width:767px){#spotlight{width:80dvw;max-width:78%}}#spotlight:before{content:"";position:absolute;width:0.2rem;height:calc(100% - 2rem);top:1rem;left:1rem;z-index:0;border-radius:0.6rem;background:var(--primary-light-color);opacity:0.9}#spotlight h5{line-height:30px;margin:0;font-weight:600;color:var(--primary-color)}#spotlight-text{color:var(--main-text-light-color);animation:fade-in .65s ease-in forwards}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.article{margin-bottom:30px;display:flex;flex-direction:column;padding-bottom:20px;border-bottom:2px solid var(--primary-light-color)}.article-footer{order:1;visibility:hidden;display:none}.article-head{order:2}.article-body{order:3}.article-content{padding-top:12px;line-height:165%;letter-spacing:1px;color:var(--main-text-color)}.article-content a{text-decoration:underline}.article-content a:hover{text-decoration:none;opacity:0.75}#article-area{background:white;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05);padding:1rem}.article-head{display:flex;justify-content:start;align-items:center;gap:1rem;margin-bottom:1rem}.title{padding:12px 0;position:relative;display:inline-flex;flex-grow:1;color:#fff;text-decoration:none;font-weight:600;font-size:1rem;transition:color 0.3s ease;h2{display:flex;justify-content:center;align-items:center}}.title a{font-size:1.4rem;font-weight:700;line-height:1.6rem;color:var(--main-text-color);display:inline-block;padding:8px 10px;text-decoration:none}.title a:hover{color:var(--primary-color)}.title a::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(to right,var(--secondary-color),var(--primary-color));transition:width 0.4s ease;opacity:0}.title a:hover::after{width:100%;opacity:1}.publish{flex-shrink:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0.1rem;text-align:center;padding:0.2rem 0.6rem;background-color:var(--light-gray-color);font-size:0.95em;font-family:"Space Mono",monospace,"微軟正黑體";color:var(--side-text-color);box-shadow:0 1px 3px rgba(0,0,0,0.1)}.publish .month,.publish .date{font-weight:500;color:var(--primary-color)}.publish .date:before{content:"/";padding:0 4px 0 0;color:var(--primary-color)}.publish .year{grid-column:1 / span 2;font-weight:500;font-size:1.6rem;color:var(--main-text-color)}.publish .day,.publish .time{display:none}.author,.author a{margin:1rem 0;line-height:1rem;color:var(--side-text-color)}.author{float:right;font-size:.8rem}.author a img,.forward{display:none}.author a:nth-child(4):after{content:"\7de8\8f2f";color:var(--side-text-color);padding-left:4px}.author a:nth-child(5):after{content:"\522a\9664";color:var(--side-text-color);padding-left:4px}.article-footer{float:left}#article-main .article-footer{margin-top:14px;font-size:.9rem}.more{height:48px;text-align:right;position:relative}.more a{position:relative;display:inline-block;text-align:center;font-size:1rem;font-weight:bold;padding:0.8rem;width:1em;overflow:hidden;white-space:nowrap;background:var(--primary-light-color);color:transparent;transition:all .5s ease;text-decoration:none}.more a::before{content:'\2192';color:#fff;position:absolute;left:0;top:0;width:1em;padding:0.8rem;text-align:center;transition:opacity .3s ease}.more a:hover{width:auto;color:var(--main-text-color);transform:translateY(-2px);background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));box-shadow:0 1px 3px rgba(0,0,0,0.1);text-decoration:none}.more a:hover::before{opacity:0}.article-keyword{padding:0.6rem 1rem;margin:1rem 0 !important;border-radius:8px}.article-keyword:has(.tag__header){background-color:var(--light-gray-color)}.tag__header{font-size:0.9rem;font-weight:700}.tag__main{display:flex;flex-wrap:wrap;gap:0.5em;margin:0.1rem 0}.tag__main a{text-decoration:none}.tag__link{display:inline-block;padding:0rem 0.4rem;background:var(--primary-light-color);color:white;text-decoration:none;border-radius:0.2rem;font-size:0.9rem;transition:background 0.3s ease,transform 0.2s ease}.tag__link:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));transform:translateY(-2px);box-shadow:0 1px 3px rgba(0,0,0,0.1)}.page{margin:10px auto;font-size:1rem;text-align:center}.page span{background:var(--primary-light-color);padding:0.2rem 0.6rem;color:white;border-radius:4px}.page a{padding:0.2rem 0.6rem;margin:0 0.2rem;border-radius:4px;transition:all 0.1s ease-in-out}.page a:hover{color:white;text-decoration:none;background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color))}#search ul{margin:16px 0 0;border:1px solid #ccc;border-radius:24px;display:table;padding:0 1rem}#search li{display:table-cell;background:0;padding:0;border:none;margin:0;height:2rem}#search li:first-child{width:100%;max-width:fit-content}#search li:last-child{margin-right:8px}#search-target{margin-left:2px;width:100%;max-width:280px;box-sizing:border-box;height:32px;border:none;padding-left:30px;display:inline-block;background:url("data:image/svg+xml,%0A%3Csvg width='25' height='25' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18.5' cy='18.5' r='17.5' stroke='%239B9B9B' stroke-width='2'/%3E%3Cpath d='M30.5 30.5L33.5 33.5' stroke='%239B9B9B' stroke-width='2'/%3E%3Crect x='35.6569' y='31.4142' width='17' height='6' rx='2' transform='rotate(45 35.6569 31.4142)' stroke='%239B9B9B' stroke-width='2'/%3E%3C/svg%3E%0A") left center no-repeat}#search input#search-submit{border-radius:20px;letter-spacing:2px;background:var(--main-text-color);color:#fff;border:none;display:inline-block;margin-top:5px;text-align:center;padding:0.2rem 1rem;transition:all 0.1s ease-in-out}#search input#search-submit:hover{background:var(--primary-color);cursor:pointer}#comment_text:focus,#search-target:focus{outline:0}.box{margin:0 0 1rem;background:white;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.05);padding:1rem}.box-title{font-size:1.5em;font-weight:bold;color:var(--main-text-color);border-left:4px solid var(--primary-light-color);padding-left:0.5rem;margin-bottom:0.8rem;display:flex;align-items:center;justify-content:space-between}#announce li a,#last-article-box li a,#latest-comment .box-text ul li,#hot-article li{margin-bottom:0.8rem;padding:0.75rem 1rem;background-color:var(--light-gray-color);border-radius:8px;transition:background-color 0.3s ease,transform 0.3s ease}#announce li a:hover,#last-article-box li a:hover,#latest-comment .box-text ul li:hover,#hot-article li:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));transform:translateY(-2px);box-shadow:0 1px 3px rgba(0,0,0,0.1)}#announce li a,#last-article-box li a{text-decoration:none;color:var(--main-text-color);font-size:0.9rem;display:flex;align-items:center;justify-content:start;gap:0.6rem}#user-info .box-text.entry-content{display:flex;align-items:center;padding:1.5em;position:relative}.user-img{flex-shrink:0;margin-right:2rem;transition:transform 0.3s ease}.user-img:hover{transform:translateY(-2px)}.user-img img{width:100px;height:100px;border-radius:50%;border:1px solid var(--primary-color);object-fit:cover}#user-info .box-text dl{margin:0;padding:0;flex-grow:1}#user-info .box-text dt{font-weight:700;color:var(--main-text-color)}#user-info .box-text dd{margin:0 0 0.5rem 0;color:var(--side-text-color)}#user-info .user-action{position:absolute;top:-46px;right:0}#user-info-open-friends-iframe{color:var(--side-text-color);text-decoration:none;margin-left:0.5rem;font-size:0.9rem}#user-info-open-friends-iframe:hover{color:var(--primary-color)}#latest-comment .box-text ul li,#latest-comment .box-text ul li span{font-weight:500;font-size:0.9rem}#latest-comment .box-text ul li span{color:var(--primary-color);font-weight:900}#latest-comment .box-text ul li a{text-decoration:none;color:var(--main-text-color);font-size:0.9rem}#latest-comment .box-text ul li a:hover{text-decoration:underline}#hot-article li{padding-left:1.8rem}#hot-article li a>:not(span){word-break:break-word}#hot-article li a{text-decoration:none;color:var(--main-text-color);font-size:0.9rem;display:flex;align-items:start;justify-content:start;gap:0.2rem;line-height:1rem;position:relative}#hot-article span{display:none}#hot-article li a::before{content:"🔥";color:red;font-size:0.9rem;position:absolute;top:0;left:-1.1rem}#archive select{width:100%;padding:0.6rem 0.6rem;font-size:0.9rem;border:1px solid var(--side-text-color);border-radius:8px;background-color:white}#archive .box-more{margin:0.6rem;font-size:.9rem;text-decoration:none;color:var(--main-text-color)}#archive .box-more a{text-decoration:none;color:var(--main-text-color)}#archive .box-more a:hover{color:var(--primary-color)}#category .inner-box,#mylink .inner-box{font-size:1rem;font-weight:normal;margin-bottom:0.5em;display:flex;flex-direction:column;justify-content:start;align-items:start;gap:0.5em;color:var(--main-text-color);padding:0.75rem 1rem;background-color:var(--light-gray-color);border-radius:8px;transition:background-color 0.3s ease,transform 0.3s ease}#category .inner-box:hover,#mylink .inner-box:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));transform:translateY(-2px);color:white;box-shadow:0 1px 3px rgba(0,0,0,0.1)}#category .inner-box ul,#mylink .inner-box ul{padding:0 1rem}#category .inner-box li,#mylink .inner-box li{padding:0;margin:0}#category ul li,#mylink ul li{font-size:0.9rem;margin:1rem 0}#category ul li a,#mylink ul li a{text-decoration:none;color:var(--main-text-color);transition:color 0.3s ease}#category ul li a::before,#mylink ul li a::before{content:"•";color:var(--primary-color);margin-right:0.2rem;font-size:1rem}#category ul li a:hover,#mylink ul li a:hover{color:var(--primary-color)}#calendar table{width:100%;margin:0 auto}#calendar .current-month,#calendar .cal-backward,#calendar .cal-forward{font-weight:700;font-size:1.2rem}#calendar th,#calendar td{color:var(--main-text-color);font:1rem Century Gothic;text-align:center;line-height:2rem;width:2rem}#calendar td{padding:0.2rem}#calendar td a{display:block;padding:0px 1px;background-color:var(--primary-color);color:#fff;border-radius:0.2rem;-moz-border-radius:0.2rem;-webkit-border-radius:0.2rem;transition:background-color 0.3s ease,transform 0.3s ease;text-decoration:none}#calendar td a:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));box-shadow:0 1px 3px rgba(0,0,0,0.1)}#friendbox ul,#crumb ul,#visitor ul{overflow:hidden;height:auto !important}#friendbox li,#crumb li,#visitor li{float:left;margin:0.2rem;display:inline;line-height:0;padding:0}#friendbox li img,#crumb li img,#visitor li img{width:50px;height:50px;border-radius:50%;box-shadow:0 1px 3px 1px rgba(0,0,0,0.1);transition:transform 0.2s ease}#friendbox li img:hover,#crumb li img:hover,#visitor li img:hover{transform:translateY(-2px)}#friendbox ul.friendlist li{margin:0.2rem 2px}body #newsfeed ul li{text-align:left;padding:5px 0;margin-right:5px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis;font-family:'Noto Sans TC','微軟正黑體',sans-serif !important;border-bottom:1px dotted gray;margin-bottom:1rem;padding:0.75rem 1rem;background-color:var(--light-gray-color);border-radius:8px;transition:background-color 0.3s ease,transform 0.3s ease}body #newsfeed ul li:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));transform:translateY(-2px);box-shadow:0 1px 3px rgba(0,0,0,0.1)}body #newsfeed .newsfeed-photo img{border:1px solid var(--primary-color);border-radius:0.2rem;height:30px;width:30px;padding:1px;background:white}body #newsfeed ul span.update-link a{color:var(--main-text-color)}body #newsfeed a.show-all-newsfeed{font-size:1rem;text-decoration:none;color:var(--main-text-color);display:inline-flex}body #newsfeed{text-align:center}body #newsfeed a.show-all-newsfeed:hover{color:var(--primary-color)}#footer{clear:both;text-align:center;min-height:20dvh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,var(--secondary-light-color) 0%,var(--primary-light-color)100%)}#footer p{margin:0 0 1rem 0;font-size:1rem;font-weight:500}#bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.1rem;font-size:0.9rem;font-weight:300}#bottom a{color:var(--main-text-color);text-decoration:none;transition:color 0.3s ease}#bottom a:hover{color:var(--primary-color)}@media (max-width:767px){#main{flex-direction:column;width:90vw;padding:0 1rem;max-width:80%}#content{width:100%;padding-right:0}#links{width:100%}}@media (min-width:768px) and (max-width:1024px){#main{flex-direction:column;max-width:90vw;padding:0 1rem}#content{width:100%}#links{width:100%}}@media (min-width:1025px){#main{padding:0 1rem;max-width:1300px}#content{width:100%;max-width:70%}#links{width:100%}}.author-profile .author-profile__main{max-width:100% !important}.article-footer:has(.history){padding:1.5em;border-radius:8px;font-size:14px;line-height:1.6}.history h6{border-top:1px solid #ccc;margin:1rem 0 0.5rem;padding-top:1rem;font-size:0.9rem;font-weight:500}.history li{margin:0.5rem 0;align-self:baseline}.history li img{display:none}.history li a{color:var(--main-text-color);text-decoration:none}.history li a:hover{color:var(--primary-color)}#comment-title{background-color:var(--light-gray-color);border-radius:8px;min-height:3rem;display:flex;justify-content:center;align-items:center;font-weight:700}.post-comment{margin:1rem auto 0 auto;width:fit-content}.post-comment a{padding:0.2rem 2rem;text-decoration:none;transition:0.5s;color:white;text-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0 0 20px #eee;border-radius:8px;background-color:var(--primary-color)}.post-comment a:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));transform:translateY(-2px)}#comment-text:has(.single-post){padding:15px;margin:1rem 0}#comment-text .single-post{list-style:none;padding:1rem;border-bottom:1px solid var(--side-text-color);content:"";display:table;clear:both;width:95%}#comment-text .single-post li{margin-bottom:10px}#comment-text .post-info{position:relative;font-size:1rem;color:var(--side-text-color);display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:0.6rem}#comment-text .post-info .floor{position:absolute;right:0;top:0;font-size:1.2rem;color:var(--primary-light-color);@media (max-width:767px){position:relative}}#comment-text .post-info .user-name img{display:none !important}#comment-text .post-info .user-name,#comment-text .post-info .user-name a{color:var(--primary-color)}#comment-text .post-info .user-name a{text-decoration:none}#comment-text .post-photo{float:left;width:fit-content;@media (max-width:767px){float:none}}#comment-text .post-photo img{border-radius:50%;width:80px;height:80px;border:1px solid var(--light-gray-color);box-shadow:0 2px 1px 1px rgba(0,0,0,0.05)}#comment-text .post-text{align-content:center;height:fit-content;min-height:80px;padding:0 1rem}#comment-text .reply-text{text-align:right}#comment-text .reply-text:has(p){text-align:left;margin-left:96px;padding:0.5rem 1rem;border-radius:8px;color:white;background-color:var(--primary-light-color)}#comment-text .reply-text p{padding:10px;border-radius:4px;margin:0;text-align:right}#comment-text .reply-text p a{color:white;text-decoration:none}#comment-text .reply-text p a:hover{color:var(--primary-color)}@media (max-width:767px){#comment-text .reply-text:has(p){margin-left:0px;padding:0.6rem 1rem;text-align:left}#comment-area{max-width:90%;overflow-x:scroll}}#article-box .main-list{margin:2rem auto;max-width:100%;padding:0;overflow:hidden;background-color:white;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.05);border:1px solid #ddd}.main-list table{width:100%;border-collapse:collapse;table-layout:fixed}.main-list th,.main-list td{padding:0.4rem 1rem;text-align:left;border-bottom:1px solid var(--light-gray-color);vertical-align:middle}.main-list th{background-color:var(--light-gray-color);color:var(--main-text-color);font-weight:700;font-size:1rem}.main-list tr:hover{background-color:var(--light-gray-color)}.list-date{width:5rem;font-size:0.9rem;color:var(--main-text-color);border-right:1px solid var(--light-gray-color)}.list-title a{font-size:0.9rem;text-decoration:none;color:var(--main-text-color);margin-right:8px;word-break:break-word}.list-title a:hover{color:var(--primary-color)}.list-visit,.list-comment{width:40px;margin:0 auto;font-size:0.8rem;text-align:right;color:var(--main-text-color)}@media (max-width:767px){#article-box .main-list{overflow:visible;border:none;box-shadow:none}.main-list table,.main-list thead,.main-list tbody,.main-list th,.main-list td,.main-list tr{display:block;width:100%}.main-list tbody{display:flex;flex-direction:column;gap:1rem;width:95%}.main-list tr{border:1px solid #ddd;border-radius:8px;padding:12px;background-color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.05)}.main-list th,.main-list tr:first-child{display:none}.main-list td{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border:none;font-size:0.9rem}.main-list td::before{content:attr(class);text-transform:capitalize;font-weight:bold;color:#888;flex:1}.list-title a{word-break:break-word;display:inline-block;max-width:70%}#content{border-bottom:1px solid var(--main-text-color)}}#side_gb{width:auto;box-shadow:0 4px 12px rgba(0,0,0,0.05);-webkit-box-shadow:0 4px 12px rgba(0,0,0,0.05)}#side_gb_content,#side_gb_article{width:90%}#side_gb_article .gb_text,#side_gb_article .gb_title{width:100%}#side_gb .button-arrow{display:none}#side_gb_btn{position:relative;left:30%}#side_gb_btn a{text-decoration:none}#side_gb_btn .button{text-shadow:none;height:auto;transition:background-color 0.3s ease,transform 0.3s ease;text-decoration:none}#side_gb_btn .button:hover{background:linear-gradient(to left,var(--secondary-light-color),var(--primary-light-color));transform:translateY(-2px)}#side_gb_content{margin-left:-50%;padding:0.5rem 1rem}.gb_photo img{width:50px;height:50px;border-radius:50%;border:1px solid var(--primary-color);box-shadow:0 1px 1px 1px rgba(0,0,0,0.05)}.gb_account,.gb_date{margin-left:1rem}summary{cursor:pointer}summary:hover{color:var(--primary-color)}.blackTable{background:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.1);margin-top:20px;overflow:hidden;width:100%;thead{background:#2f2f2f;color:white}th,td{padding:4px 12px;text-align:left;border:1px solid #ddd}tbody{tr{&:hover{background:#fafafa}}}}
【相關文章】
🛠️ 版號資訊
- v1.3.0 - 2025.05.16 隱藏熱門文章計數
- v1.2.0 - 2025.05.16 上方 pixnavbar 套主題色
- v1.1.0 - 2025.05.14 新增"我的好友"、"站方公告"欄位、文章內表格 blackTable class、移除文章內頁標籤底色
- v1.0.2 - 2025.05.13 新增 summary tag 樣式
- v1.0.1 - 2025.05.12 文章標籤文字調整白色、隱藏文章頁尾資訊
- v1.0.0 - 2025.05.11 初版發布
請先 登入 以發表留言。