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
/********************************
* 河道直播間 v1.0
*
* 註1：請將「YOUR_UID」換成你的UID，否則自己的噗會視作一般噗來顯示
* 註2：把::before的部份刪掉，只剩::after，就會變成單隻款式
* 註3：這邊用了較少人會調整的.td_img，如有衝突，可以嘗試直接將.td_img調整.plurk或者它的child
********************************/
/* 〔勿刪〕修正：當兩個噗同時是display狀態，只會顯示前面的噗直播，後面的噗直播會隱藏 */
#timeline_cnt .block_cnt > .plurk.display.plurk_box ~ .plurk.display .td_img::before,
#timeline_cnt .block_cnt > .plurk.display.plurk_box ~ .plurk.display .td_img::after,
#timeline_cnt .block_cnt > .plurk.display ~ .plurk.display.plurk_box .td_img::before,
#timeline_cnt .block_cnt > .plurk.display ~ .plurk.display.plurk_box .td_img::after{
display: none;
}

/****** 直播間基本設定 ******/
#timeline_cnt .block_cnt::before, #timeline_cnt .block_cnt::after,
#timeline_cnt .block_cnt > .plurk.display .td_img::before, #timeline_cnt .block_cnt > .plurk.display .td_img::after {
position: fixed;
width: auto; /* 對話框寬度，預設auto */
height: auto; /* 對話框高度，預設auto */
min-width: 50px;
min-height: 50px;
max-width: 25rem;
padding: 10px;
padding-right: 60px; /* 預留空白給方邊頭像 */
background-color: #FFF; /* 對話框背景色 */
background-repeat: no-repeat;
background-position-y: center; /* 頭像位置-Y（預設在中間） */
background-position-x: right; /* 頭像位置-X（預設在右方） */
border: 2px solid #D4AF37; /* 框線 */
border-radius: 10px; /* 框線圓角 */
white-space: normal;
word-spacing: normal;
}
#timeline_cnt .block_cnt::before, #timeline_cnt .block_cnt > .plurk.display .td_img::before{
right: 0px; /* 第一個對話框的位置（預設在右方） */
bottom: 55px; /* 第一個對話框的位置（預設在下方，預留55px空白） */
}

/****** 預設：無對話狀態，只有頭像 ******/
#timeline_cnt .block_cnt::before{
padding: 10px;
background-image: url('https://emos.plurk.com/e067e71edb7bebe8e400b980c277291e_w48_h48.png');
content: ' ';
}

/****** 一般噗：噗首顯示狀態 ******/
#timeline_cnt .block_cnt > .plurk.display .td_img::before{
background-image: url('https://emos.plurk.com/b5e2b9edd1884a1a3a7f39ea0fc118c5_w48_h48.png');
content: 'POG';
}

/* 一般噗：噗首展開狀態 */
#timeline_cnt .block_cnt > .plurk.display.plurk_box .td_img::before{
background-image: url('https://emos.plurk.com/51fba3b2c9b7661aee0b5451cfdbce90_w48_h48.png');
content: 'I LOVE THIS PLURK';
}

/****** 自己的噗：噗首顯示狀態 ******/
#timeline_cnt .block_cnt > .plurk[data-uid='YOUR_UID'].display .td_img::before{
background-image: url('https://emos.plurk.com/c0c84d8fe3524d1453cb58b1e8e011b9_w48_h48.png');
content: 'POGGING';
}

/* 自己的噗：噗首展開狀態 */
#timeline_cnt .block_cnt > .plurk[data-uid='YOUR_UID'].display.plurk_box .td_img::before{
background-image: url('https://emos.plurk.com/d1f24cdda11512d160f91969d0d8a1d7_w48_h48.png');
content: 'WHAT DO YOU MEAN';
}

/****** 偷偷說噗：噗首顯示狀態 ******/
#timeline_cnt .block_cnt > .plurk[data-uid='99999'].display .td_img::before{
background-image: url('https://emos.plurk.com/3e07e6ed05b01e76030641a05d6e311c_w48_h48.png');
content: 'SUS……';
}

/* 偷偷說噗：噗首展開狀態 */
#timeline_cnt .block_cnt > .plurk[data-uid='99999'].display.plurk_box .td_img::before{
background-image: url('https://emos.plurk.com/95389ce368d077a68ecb08717e042528_w48_h48.png');
content: 'I AM AMOUG US SUSSYING YOU';
}

/****** 隨機噗－ID尾數是7即會顯示：噗首顯示狀態 ******/
#timeline_cnt .block_cnt > .plurk[data-pid$='7'].display .td_img::before{
background-image: url('https://emos.plurk.com/6e679f2bd4a36fbb491af01d72c85521_w48_h48.png');
content: 'POOOOOOOOOOOG';
}

/* 隨機噗－ID尾數是7即會顯示：噗首展開狀態 */
#timeline_cnt .block_cnt > .plurk[data-pid$='7'].display.plurk_box .td_img::before{
background-image: url('https://emos.plurk.com/1dd83c3793fa0134d58e4bdf373f662f_w48_h48.png');
content: 'I LOVE THIS PLURK POG';
}