Skip to content

maid-cat/PixelPlurk.css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 

Repository files navigation

pixel_plurk_logo

PixelPlurk.css

像素風格噗浪佈景!

preview

  • 製作:欸個
  • 排版建議、字型技術支援:千秋

安裝

複製本體CSS,貼到 自訂佈景 -> 自訂佈景風格 欄位

關於更新

更新版本時,可以繼續使用自己的 /* 參數設定 */ 區塊,但請留意區塊內是否有增加新的變數,並複製到自己的參數設定中。

  • 2024-04-17: 新增了 /* 頂端列參數(僅 Chrome 有效)*/ 區塊,如有修改--pixel-size變數,需一併修改這個區塊的數值。 不再需要,已移除
  • 2023-04-16: 新增了 --timeline-avatar-size 變數
  • 2023-11-25: 因應Firefox新版的改動更新了區塊語法。 如果想延用之前的設定,需將開頭的
/* 參數設定 */
:is(url({)), html, :is(url(})) {

更改為

/* 參數設定 */
'{:is('{'), html /*}'*/ {

特色

細節

對河道、噗文、頂端列、浮動視窗、主控面板、發噗介面等,都盡可能做了完整的處理

自訂色彩

可以依喜歡的風格,自由選擇背景色與邊線色彩

自訂

本體 CSS 中的 /* 參數設定 */ 區塊提供了數個設定選項,方便調整樣式:

邊線顏色

預設為黑色邊線,可以修改 --pixel-color 的數值來指定想要的顏色。例如:

  --pixel-color: #009487;

噗文底色

預設為白色,可以修改 --plurk-background-color 的數值來指定想要的底色:

  --plurk-background-color: 色碼;

有將底色更改為深色的話,為了避免文字變得不好閱讀,可以配合以下語法,將噗文及黑色暱稱的字色更改為淺色:

/* 噗文字色 */
:is(url({)), .text_holder, :is(url(})) {
  color: white;
}
/* 暱稱預設字色 */
:is(url({)), .name, :is(url(})) {
  color: #eee;
}

河道背景圖

可以修改 --timeline-background-image 來指定背景圖的網址:

  --timeline-background-image: url(圖片網址);

河道頭像尺寸

可以修改 --timeline-avatar-size 來指定河道上噗文頭像的尺寸。 預設值為 40px,想恢復為噗浪原始大小的話,可以修改成 20px

  --timeline-avatar-size: 20px;

主控台背景色

可以加入以下語法來做設定:

/* 主控台背景色 */
.segment-content {
  background-color: 色碼;
}

如果是使用噗浪的經典佈景的話,可以再加入以下這段,去除主控台外圍的背景:

/* 去除主控台外圍背景 */
#plurk-dashboard {
  background: none;
  border: none;
}

也可以使用疾患大的噗浪語法產生器來做更詳細的設定。

特別感謝

預覽圖使用的圖片素材