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 | /****************************** * 無人回應的空噗:兩隻陪你聊(不同方向版本) * 註:把::after的部份刪掉後,就會變成單隻款式 ******************************/ .plurk_box > .response_box .list .empty{ visibility: hidden; } /* 頭像及對話框預設,可於此處自行調整 */ .plurk_box > .response_box .list .empty::before, .plurk_box > .response_box .list .empty::after { visibility: visible; position: relative; display: block; width: 320px; /* 對話框寬度 */ height: 50px; /* 對話框高度。如果句子太長無法顯示,可修改高度或改為「auto」 */ min-height: 50px; text-align: left; color: black; /* 對話框文字顏色 */ background-color: white; /* 對話框背景顏色 */ background-repeat: no-repeat; padding: 10px; border: 2px solid #000; /* 對話框的框線 */ border-radius: 10px; /* 對話框的圓角 */ white-space: normal; word-spacing: normal; /* 如果句子太長,需要手動斷行,請改為「100vw」 */ margin: auto; } /* 〔勿刪改〕 刪噗後無法載入回應的情況下,可以顯示系統原本的句子「唔,好像有點怪怪的」 */ .plurk_box > .response_box .list .empty[style]{ visibility: visible; } .plurk_box > .response_box .list .empty[style]::before, .plurk_box > .response_box .list .empty[style]::after { display: none; } /* 頭像及對話:一般狀態 */ .plurk_box > .response_box .list .empty::before { padding-left: 60px; content: "咩、估、咪、醬❤"; background-image: url('https://images.plurk.com/3Du7HmsxnNVHWTtNZkuUCC.png'); } .plurk_box > .response_box .list .empty::after{ padding-right: 60px; content: "不管您想說什麼都請先閉嘴好嗎?"; background-image: url('https://images.plurk.com/5We7HgTi8sEtuKhGZPB5IP.png'); background-position-x: right; text-align: right; } /* 頭像及對話:滑至噗內時(不需要可以刪掉) */ .plurk_box:hover > .response_box .list .empty::before { content: "……你笑什麼?"; background-image: url('https://images.plurk.com/1RjtATUh6gC0OKL9KB4Ztw.png'); } .plurk_box:hover > .response_box .list .empty::after { content: '沒什麼❤'; background-image: url('https://images.plurk.com/31l3uA7IT19fhbygFt7bUd.png'); } |
Direct link: https://paste.plurk.com/show/bNzwiEfKUhPZJ4ukSDh6