1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/*噗浪原本的噗寶替換圖片*/
#dynamic_logo {
	content: url(https://imgur.com/Q16Mr2k.png);
}

/*時間軸噗寶*/
#timeline_bg {
	/*這裡勿動*/ background-repeat: no-repeat;
	/*圖片*/ background-image: url(https://imgur.com/Q16Mr2k.png);
	/*噗寶位置*/ background-position: left 10px top 10px;
	/*left可改right從右側開始算位置*/
	/*left 00px 可改center左右置中*/
	/*top可改bottom從下方開始算位置*/
	/*top 00px 可改center上下置中*/
}

/*主控台噗寶*/
#dashboard_holder:after {
	/*這裡勿動*/ position: absolute;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ right: 0px; /*right可改left*/
	/*上下位置*/ bottom: 0px; /*bottom可改top*/
}

/*粉絲區塊噗寶1*/
#dash-fans:before {
	/*這裡勿動*/ position: absolute;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ left: 0px; /*left可改right*/
	/*上下位置*/ bottom: 0px; /*bottom可改top*/
}

/*粉絲區塊噗寶2*/
#dash-fans:after {
	/*這裡勿動*/ position: absolute;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ right: 0px; /*right可改left*/
	/*上下位置*/ bottom: 0px; /*bottom可改top*/
}

/*推薦使用額外語法：粉絲區塊下方留空間*/
#dash-fans { padding-bottom: 48px; /*bottom可改top、left、right*/ }

/*好友區塊噗寶1*/
#dash-friends:before {
	/*這裡勿動*/ position: absolute;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ left: 0px; /*left可改right*/
	/*上下位置*/ bottom: 0px; /*bottom可改top*/
}

/*好友區塊噗寶2*/
#dash-friends:after {
	/*這裡勿動*/ position: absolute;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ right: 0px; /*right可改left*/
	/*上下位置*/ bottom: 0px; /*bottom可改top*/
}

/*推薦使用額外語法：好友區塊下方留空間*/
#dash-friends { padding-bottom: 48px; /*bottom可改top、left、right*/ }

/*統計區塊噗寶：手動設定區，只需要改這裡*/
#dash-stats {
	--噗寶高度: 48px;
	--噗寶圖片1: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片2: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片3: url(https://imgur.com/Q16Mr2k.png);
}

/*統計區塊噗寶：自動設定區，勿動*/
#dash-stats {
	padding-bottom: var(--噗寶高度);
	background: var(--噗寶圖片1), var(--噗寶圖片2), var(--噗寶圖片3);
	background-repeat: no-repeat;
	background-position: left bottom, center bottom, right bottom;
}

/*主控台發噗區噗寶：手動設定區，只需要改這裡*/
#plurk_form {
	--噗寶高度: 48px;
	--噗寶圖片1: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片2: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片3: url(https://imgur.com/Q16Mr2k.png);
}

/*主控台發噗區噗寶：自動設定區，勿動*/
#plurk_form {
	padding-bottom: var(--噗寶高度);
	background: var(--噗寶圖片1), var(--噗寶圖片2), var(--噗寶圖片3);
	background-repeat: no-repeat;
	background-position: left bottom, center bottom, right bottom;
}

/*自介區塊噗寶*/
#dash-additional-info:after {
	/*這裡勿動*/ position: absolute;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ right: 0px; /*right可改left*/
	/*上下位置*/ bottom: 0px; /*bottom可改top*/
}

/*噗幣噗寶（無噗幣時仍在）*/
#dash-profile .profile-icons:before {
	/*這裡勿動*/ position: absolute; line-height: 0; right: 100%; bottom: 0px;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
}

/*時間軸下方噗寶1*/
#timeline_holder:before {
	/*這裡勿動*/ position: absolute; top: 100%;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*上下位置*/ margin-top: 20px; /*負數往上正數往下*/
	/*左右位置*/ left: 10px; /*left可改right*/
}

/*時間軸下方噗寶2*/
#timeline_holder:after {
	/*這裡勿動*/ position: absolute; top: 100%;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*上下位置*/ margin-top: 20px; /*負數往上正數往下*/
	/*左右位置*/ right: 10px; /*right可改left*/
}

/*噗串篩選上方噗寶*/
#filter_tab:before {
	/*這裡勿動*/ position:absolute; width:100%; bottom: 100%; text-align: center;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
}

/*浮窗黑背景中的噗寶1*/
._lch_ ~ .pop-window:before {
	/*這裡勿動*/ position:absolute; z-index: 6; line-height: 0;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ left: 10px; /*left可改right*/
	/*上下位置*/ bottom: 10px; /*bottom可改top*/
}

/*浮窗黑背景中的噗寶2*/
._lch_ ~ .pop-window:after {
	/*這裡勿動*/ position:absolute; z-index: 5; line-height: 0;
	/*圖片*/ content: url(https://imgur.com/Q16Mr2k.png);
	/*左右位置*/ right: 10px; /*right可改left*/
	/*上下位置*/ bottom: 10px; /*bottom可改top*/
}

/*時間軸右下一排噗寶：手動設定區*/
#timeline_cnt:after {
	--位置距離右側: 10px;
	--位置距離時間軸: 15px;
	--噗寶寬度: 48px;
	--噗寶高度: 48px;
	--噗寶數量: 7; /*目前最多7*/
	--噗寶圖片1: url(https://imgur.com/Q16Mr2k.png);
	--噗寶圖片2: url(https://imgur.com/iuGrQwu.png);
	--噗寶圖片3: url(https://imgur.com/8YksaG6.png);
	--噗寶圖片4: url(https://imgur.com/GzbQNi0.png);
	--噗寶圖片5: url(https://imgur.com/vNDN1Gm.png);
	--噗寶圖片6: url(https://imgur.com/nUZTF5u.png);
	--噗寶圖片7: url(https://imgur.com/EHNuQ9q.png);
}

/*時間軸右下一排噗寶：自動設定區，勿動*/
#timeline_cnt:after {
	position:absolute; bottom: var(--位置距離時間軸); right: var(--位置距離右側);
	content: ""; width: calc(var(--噗寶寬度) * var(--噗寶數量)); height: var(--噗寶高度);
	background: var(--噗寶圖片1), var(--噗寶圖片2), var(--噗寶圖片3), var(--噗寶圖片4), var(--噗寶圖片5), var(--噗寶圖片6), var(--噗寶圖片7);
	background-repeat: no-repeat;
	background-position: right 0 bottom, right calc(var(--噗寶寬度) * 1) bottom, right calc(var(--噗寶寬度) * 2) bottom, right calc(var(--噗寶寬度) * 3) bottom, right calc(var(--噗寶寬度) * 4) bottom, right calc(var(--噗寶寬度) * 5) bottom, right calc(var(--噗寶寬度) * 6) bottom;
}