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
171
172
173
174
175
176
177
178
179
180
181
182
/*留言對話框，自己留言靠右+暱稱旁新增圖示+更改時間樣式*/
/*把123456789取代成自己的uid*/
/*對話框參考：https://www.plurk.com/p/ogg8nj*/

/*****可改的地方*****/
.response_box {
  --自己對話框顏色: #9DE693;
  --其他人對話框顏色: #FFF;
  --留言區背景色: #97B3DB;
  --最上方回應數顏色: #FFF;
}
.list .name { /*暱稱顏色&樣式*/
  color:#46556C !important; 
  text-decoration: none;
} 
.timeline-cnt .plurk_box {
  width: 445px; /*點開噗文寬度*/
}
.list .plurk_cnt .text_holder {
  max-width: 66%; /*更改回應最大寬度*/
}
/*時間、回覆跟箭頭的顏色&背景*/
.response-manager .edit, .response-manager .time a, .response-manager .mention, .response-manager .option {
  background: transparent;  
  color: #FFF;
}

/*****更改頭貼圖片*****/
/*改自己實名噗+偷偷說回應的小圖示，要改圖片在url那邊改就可以了*/
.list .response .name::after {
  background-image: url('https://emos.plurk.com/555bf956957c034b09aa13b3803dba85_w42_h42.gif');
}
/*改其他人非噗主的小圖示，要改圖片在url那邊改就可以了*/
.list .response:not(.highlight_owner) .name::before {
    background-image: url('https://emos.plurk.com/362648ae2a2db332998ae307bc9c3813_w48_h48.gif');
}
/*改其他人為噗主的小圖示，要改圖片在url那邊改就可以了*/
.list .response.highlight_owner .name::before {
    background-image: url('https://emos.plurk.com/9b59dd4cd7ab43d694f4bdb53d257f73_w48_h48.png');
}
/*改偷偷說噗主小圖示*/
.list .response.highlight_owner .tr_cnt .name[data-uid='99999']::before {
  background-image: url('https://emos.plurk.com/0a4b22f0c7d674c2ff0a035156b2f4eb_w48_h48.png');
}
/*改偷偷說其他人小圖示*/
.list .response:not(.highlight_owner) .name[data-uid="99999"]::before {
  background-image: url('https://emos.plurk.com/7e4f98d93b2c08d78e01036cf4ce5aff_w48_h48.png');
}
/*隨機其他人非噗主小圖示，uid尾數為9為同一張圖*/
.list .response:not(.highlight_owner) .name[data-uid$='9']:not([data-uid="99999"])::before {
  background-image: url('https://emos.plurk.com/090c4e3622f3301169ffef72fe980814_w48_h48.gif');
}
/*隨機其他人為噗主小圖示，uid尾數為4為同一張圖*/
.list .response.highlight_owner .name[data-uid$='4']:not([data-uid="99999"])::before {
  background-image: url('https://emos.plurk.com/3518cacad7b69eb25928955983ff6afa_w48_h48.png');
}
/*改特定帳號非噗主小圖示，uid自行更換*/
.list .response:not(.highlight_owner) .tr_cnt .name[data-uid='12345678']::before {
  background-image: url('https://emos.plurk.com/889b365fd6f40815c6d1691a453324f8_w48_h48.png');
}
/*改特定帳號噗主小圖示，uid自行更換*/
.list .response.highlight_owner .tr_cnt .name[data-uid='12345678']::before {
  background-image: url('https://emos.plurk.com/889b365fd6f40815c6d1691a453324f8_w48_h48.png');
}
/********************/
.list .response .name:not([data-uid="99999"][style="color:#0a9c17"]):not([data-uid="123456789"])::before,
.list .response .name[data-uid="123456789"]::after,
.list .response .name[data-uid="99999"][style="color:#0a9c17"]::after {
  background-size: 100%;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  border-radius: 50%;  /*頭貼圓角*/
  background-repeat: no-repeat;
  background-position: center;
}
/*頭貼位置設定*/
.list .response .name:not([data-uid="99999"][style="color:#0a9c17"]):not([data-uid="123456789"])::before {
  margin: 0px 5px -7px -5px;
}
.list .response .name[data-uid="123456789"]::after,
.list .response .name[data-uid="99999"][style="color:#0a9c17"]::after {
    margin: 0px -5px -7px 5px;
}

.list .tr_cnt > td { /*名字換行*/
  display: block;
}
.list .tr_cnt:has(.name[data-uid="123456789"]) .td_cnt, /*自己留言靠右，填入自己的uid*/
.list .tr_cnt:has(.name[data-uid="99999"][style="color:#0a9c17"]) .td_cnt {
  display: flex;
  justify-content: flex-end;
}
.list .tr_cnt:has(.name[data-uid="123456789"]) .td_qual, /*自己名字靠右，填入自己的uid*/
.list .tr_cnt:has(.name[data-uid="99999"][style="color:#0a9c17"]) .td_qual {
  display:flex;
  display:flex;
  justify-content: flex-end;
  width: auto;
}
.list .plurk_cnt .td_cnt { /*對話框邊距調整*/
  padding: 0.5em 15px 0;  /*位置往外調，留出頭貼位置*/
}
.list .plurk_cnt .text_holder  { /*對話框樣式*/
  display: inline-block;
  padding:0.5em 1em;
  width:auto !important;
  border-radius:16px;
  min-width: 0;
  background: var(--其他人對話框顏色);
}
.list .tr_cnt:has(.name[data-uid="123456789"]) .text_holder, /*自己對話框顏色，填入自己的uid*/
.list .tr_cnt:has(.name[data-uid="99999"][style="color:#0a9c17"]) .text_holder {
  background:var(--自己對話框顏色);
}
.response .plurk_cnt {background-color: transparent;}
.list .plurk_cnt .text_holder::after { /*對話框尾巴樣式和位置*/
  content:"";
  position:absolute;
  left:3px;
  top:-2px;
  border-style: solid;
  border-width: 7px 5px; 
  border-color: transparent;
  border-left-color: var(--其他人對話框顏色);
}
.list .tr_cnt:has(.name[data-uid="123456789"]) .text_holder::after, /*自己對話框尾巴位置，填入自己的uid*/
.list .tr_cnt:has(.name[data-uid="99999"][style="color:#0a9c17"]) .text_holder::after {
  left: auto;
  right: 3px;
  border-left-color: transparent;
  border-right-color: var(--自己對話框顏色);
}
.qualifier.q_says { /*隱藏發語詞*/
  display: none;
}
.response_box {background-color: var(--留言區背景色);} /*回應背景色*/
.response-count.pif-message {color: var(--最上方回應數顏色);} /*最上方回應數顏色*/
.response.show-response-manager .plurk_cnt { /*滑鼠移上背景色*/
  background: none;
}
/**********更改時間樣式***********/
/*每則留言間的空隙調小*/
.response-manager > * {
    padding: 2px 6px 0px;
}
.response { margin: 0;}
.response .plurk_cnt { padding: 0;}

/*顯示時間樣式更改*/
.response-manager {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  justify-content: start;
  margin: 0 1.5em 0 2em;    /*位置往外調，留出頭貼位置*/
  border: 0;
  background: transparent;
  transform-origin: left;
}
/*顯示投幣樣式更改*/
.response-manager .coin {
    position: relative;
    top: auto;
    right: auto;
}
/*自己時間靠右，填入自己的uid*/
.plurk:has(.name[data-uid="123456789"]) .response-manager,
.plurk:has(.name[data-uid="99999"][style="color:#0a9c17"]) .response-manager {
  justify-content: end;
  transform-origin: right;
}
/*整個回應邊距調整(含名字及留言)*/
.response .plurk_cnt {
  padding: 0 5px 20px;
}
/*顯示時間時留位置給它*/
.response.show-response-manager .plurk_cnt {
    padding-bottom: 0px;
}