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 | /******************************** * 河道直播間 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-left: 60px; /* 預留空白給方邊頭像 */ color: white; /* 對話框文字顏色 */ background-color: #26cbfd; /* 對話框背景色 */ background-repeat: no-repeat; background-position-y: center; /* 頭像位置-Y（預設在中間） */ background-position-x: left; /* 頭像位置-X（預設在左方） */ border: 2px solid #ffffff; /* 框線 */ border-radius: 5px; /* 框線圓角 */ white-space: normal; word-spacing: normal; } #timeline_cnt .block_cnt::before, #timeline_cnt .block_cnt > .plurk.display .td_img::before{ left: 0px; /* 第一個對話框的位置（預設在右方） */ bottom: 80px; /* 第一個對話框的位置（預設在下方，預留55px空白） */ } #timeline_cnt .block_cnt::after, #timeline_cnt .block_cnt > .plurk.display .td_img::after{ left: 0px; /* 第二個對話框的位置（預設在右方） */ bottom: 15px; /* 第二個對話框的位置（預設在下方，預留5px空白） */ } /****** 預設：無對話狀態，只有頭像 ******/ #timeline_cnt .block_cnt::before{ padding: 10px; background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: ''; } #timeline_cnt .block_cnt::after { padding: 10px; background-image: url('https://images.plurk.com/52G1vwvAStnp2dW45TLZJC.jpg'); content: ''; } /****** 一般噗：噗首顯示狀態 ******/ #timeline_cnt .block_cnt > .plurk.display .td_img::before{ background-image: url('https://images.plurk.com/52G1vwvAStnp2dW45TLZJC.jpg'); content: '[星座「惡魔般的火之審判者」喜歡您們之間的戰友愛。]'; } #timeline_cnt .block_cnt > .plurk.display .td_img::after{ background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: '[星座「隱密的謀略家」饒富興味地看著您。]'; } /* 一般噗：噗首展開狀態 */ #timeline_cnt .block_cnt > .plurk.display.plurk_box .td_img::before{ background-image: url('https://images.plurk.com/52G1vwvAStnp2dW45TLZJC.jpg'); content: '[星座「惡魔般的火之審判者」露出慈愛的微笑。]'; } #timeline_cnt .block_cnt > .plurk.display.plurk_box .td_img::after{ background-image: url('https://images.plurk.com/16Ab71UZI6hQAlF7hBOFzC.jpg'); content: '[星座「緊箍兒的囚犯」在過度的讚嘆下豎起全身毛髮。]'; } /****** 自己的噗：噗首顯示狀態 ******/ #timeline_cnt .block_cnt > .plurk[data-uid='YOUR_UID'].display .td_img::before{ background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: '[星座「隱密的謀略家」豎耳傾聽您的話語。]'; } #timeline_cnt .block_cnt > .plurk[data-uid='YOUR_UID'].display .td_img::after{ background-image: url('https://images.plurk.com/1om2Ycms0tkU280LdrPi7B.jpg'); content: '[星座「救贖的魔王」正在注視著你。]'; } /* 自己的噗：噗首展開狀態 */ #timeline_cnt .block_cnt > .plurk[data-uid='YOUR_UID'].display.plurk_box .td_img::before{ background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: '[星座「隱密的謀略家」覺得您是很有趣的存在。]'; } #timeline_cnt .block_cnt > .plurk[data-uid='YOUR_UID'].display.plurk_box .td_img::after{ background-image: url('https://images.plurk.com/52G1vwvAStnp2dW45TLZJC.jpg'); content: '[星座「惡魔般的火之審判者」因不知名的理由感到開心。]'; } /****** 置頂噗：噗首顯示狀態 ******/ #timeline_cnt .block_cnt > .plurk.pinned.display .td_img::before{ background-image: url('https://images.plurk.com/6PfoMBFT4L0IUTAXvVXh8x.jpg'); content: '這裡充滿了頻道的設定喔！'; } #timeline_cnt .block_cnt > .plurk.pinned.display .td_img::after{ background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: '[星座「隱密的謀略家」乾咳兩聲，以元老身分自居。]'; } /* 置頂噗：噗首展開狀態 */ #timeline_cnt .block_cnt > .plurk.pinned.display.plurk_box .td_img::before{ background-image: url('https://images.plurk.com/6PfoMBFT4L0IUTAXvVXh8x.jpg'); content: '[您獲得8,000 Coin贊助。]'; } #timeline_cnt .block_cnt > .plurk.pinned.display.plurk_box .td_img::after{ background-image: url('https://images.plurk.com/52G1vwvAStnp2dW45TLZJC.jpg'); content: '[星座「惡魔般的火之審判者」目光冷酷地拔出至高之劍。]'; } /****** 偷偷說噗：噗首顯示狀態 ******/ #timeline_cnt .block_cnt > .plurk[data-uid='99999'].display .td_img::before{ background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: '[星座「隱密的謀略家」無所謂地聳了聳肩。]'; } #timeline_cnt .block_cnt > .plurk[data-uid='99999'].display .td_img::after{ background-image: url('https://images.plurk.com/6m4Yy8oACJz4uSxzj61iFW.jpg'); content: '[星座「深淵的黑焰龍」對此表現出敵意。]'; } /* 偷偷說噗：噗首展開狀態 */ #timeline_cnt .block_cnt > .plurk[data-uid='99999'].display.plurk_box .td_img::before{ background-image: url('https://images.plurk.com/2RckZPuUMlsj06tt2vq2mS.jpg'); content: '[星座「隱密的謀略家」興奮地煽動情況。]'; } #timeline_cnt .block_cnt > .plurk[data-uid='99999'].display.plurk_box .td_img::after{ background-image: url('https://images.plurk.com/16Ab71UZI6hQAlF7hBOFzC.jpg'); content: '[星座「緊箍兒的囚犯」挑釁地揮舞著如意金箍棒。]'; } |
Direct link: https://paste.plurk.com/show/7qcHSlooRa3T21BMTXHP