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
/******************************
 * 最初的留言（v1.0）
 * 名畫版（v1.0）
 ******************************/
.timeline-holder ~ .plurk_box > .response_box .list-container::before{
    position: relative;
    display: block;
    width: 95%;               /* 對話框寬度 */
    height: 50px;             /* 對話框高度。如果句子太長無法顯示，可修改高度或改為「auto」 */
    min-height: 50px;
    text-align: left;
    font-size: 1.26em;        /* 文字大小 */
    color: black;             /* 對話框文字顏色 */
    background-color: white;  /* 對話框背景顏色 */
    background-repeat: no-repeat;
    align-content: center;
    border: 2px solid #000;   /* 對話框的框線 */
    border-radius: 10px;      /* 對話框的圓角 */
    white-space: normal;
    word-spacing: normal;     /* 如果句子太長，需要手動斷行，請改為「100vw」 */
    margin: auto;
    padding-left: 60px;
}
/* 預設狀態 */
.timeline-holder:has(.plurk.plurk_box) ~ .plurk_box > .response_box .list-container::before {
    content: "主人，看啊！有人來留言啊！";
    background-image: url('https://emos.plurk.com/ae8353dfd6d7d632e01f6959d411c6ea_w48_h48.jpeg');
}
/* 空噗 */
.timeline-holder:has(.plurk.plurk_box) ~ .plurk_box > .response_box:has(.empty:not(.hide)) .list-container::before {
    content: '可憐吶，你的噗一個留言都沒有……';
    background-image: url('https://emos.plurk.com/9ed32b91a672495370dc242ea0259ae1_w48_h48.jpeg');
}
/* 已轉噗的噗 */
.timeline-holder:has(.plurk.plurk_box.replurk) ~ .plurk_box > .response_box .list-container::before{
 content: '人人都幫我轉噗！';
    background-image: url('https://emos.plurk.com/52e9711df4f1991cfbb5e52d5e80759e_w48_h48.jpeg');
}
/* 已加入書籤的噗 */
.timeline-holder:has(.plurk.plurk_box.mark) ~ .plurk_box > .response_box .list-container::before{
    content: '這麼精彩的噗已經被我收藏到書籤了！';
    background-image: url('https://emos.plurk.com/1f4586b7c48a8b872980ae1a8776aa99_w48_h48.jpeg');
}
/* 已愛心的噗 */
.timeline-holder:has(.plurk.plurk_box.favorite) ~ .plurk_box > .response_box .list-container::before{
    content: '你愛我❤我也愛你！';
    background-image: url('https://emos.plurk.com/06a5fa81813e14a6a1226994e075f54e_w48_h48.jpeg');
}
/* 已消音的噗 */
.timeline-holder:has(.plurk.plurk_box.muted) ~ #form_holder.plurk_box > .response_box .list-container::before{
 content: '這個噗讓你這麼難受嗎？';
    background-image: url('https://emos.plurk.com/505f98b6983661caee74623f0b142b03_w48_h48.jpeg');
}
/* 滑到「愛心」 */
.timeline-holder:has(.plurk.plurk_box .like.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '孩子，用力按下去吧❤';
    background-image: url('https://emos.plurk.com/abfad944320e646b4ea30b794f3d5bdd_w48_h48.jpeg');
}
/* 滑到「噗幣」 */
.timeline-holder:has(.plurk.plurk_box .gift.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '金錢主宰了人類的命運！';
    background-image: url('https://emos.plurk.com/2216af57db8db1b8c4b8edcfabc72fc0_w48_h48.jpeg');
}
/* 滑到「加入書籤」 */
.timeline-holder:has(.plurk.plurk_box .bookmark.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '這個噗似乎別具心思，值得收藏。';
    background-image: url('https://emos.plurk.com/d2c85d5b486e09418e29af2335d15728_w48_h48.jpeg');
}
/* 滑到「轉噗」 */
.timeline-holder:has(.plurk.plurk_box .replurk.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '我想把這個噗分享給大家……';
    background-image: url('https://emos.plurk.com/edb222901d7e949e92fd193d4501f430_w48_h48.jpeg');
}
/* 滑到「消音」 */
.timeline-holder:has(.plurk.plurk_box .mute.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '天啊，我不想再看下去了！';
    background-image: url('https://emos.plurk.com/f62f8d5ffdabcf122e135a7649f2c997_w48_h48.jpeg');
}
/* 滑到「愛心」（已經點選愛心的噗） */
.timeline-holder:has(.plurk.plurk_box.favorite .like.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '你真的不再愛我了？';
    background-image: url('https://emos.plurk.com/3c3faf75cd5cba3a9eea2f6de254f1f2_w48_h48.jpeg');
}
/* 滑到「加入書籤」（已經加入書籤的噗） */
.timeline-holder:has(.plurk.plurk_box.mark .bookmark.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '看完了，是時候拋棄這個噗。';
    background-image: url('https://emos.plurk.com/e5a082354c65b42d6b1231edefe3a306_w48_h48.jpeg');
}
/* 滑到「轉噗」（已經轉噗的噗） */
.timeline-holder:has(.plurk.plurk_box.replurk .replurk.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '夠了，不要再把這東西拿給別人看。';
    background-image: url('https://emos.plurk.com/f1c55ad6550edda086ed315ab7a01e1a_w48_h48.jpeg');
}
/* 滑到「噗幣」（已經有噗幣的噗） */
.timeline-holder:has(.plurk.plurk_box .plurk_icon.coin):has(.plurk.plurk_box .gift.popview-targeting) ~ .plurk_box > .response_box .list-container::before{
 content: '噗幣當然是越多越好。';
    background-image: url('https://emos.plurk.com/48c35b64a6ddb22371aab523472b87ff_w48_h48.jpeg');
}
/* 滑到「消音」（已經消音的噗） */
.timeline-holder:has(.plurk.plurk_box.muted .mute.popview-targeting) ~ #form_holder.plurk_box > .response_box .list-container::before{
 content: '這個噗也許可以重見天日了！';
    background-image: url('https://emos.plurk.com/3ddd97ed964bb019d2c823557f441ccd_w48_h48.jpeg');
}
/****************************** 最初的留言－名畫版 語法結束 ******************************/