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
/**************************
 * 留言劇本語法 v1.0
 *
 * 當噗內留言包含指定tag「#召喚狐狸！」，該噗的留言會根據tag顯示說話者的名稱和頭像
 * 此範例包含了#橘狐、#灰狐、#黑狐，橘狐可以搭配#指責、#自信或#被閃的表情
 *
 * 用法：先留一個「#召喚狐狸！」的留言，然後留一個「#橘狐 你好！」，
 * 　　　就會看到橘色的狐狸頭像+「你好！」的留言
 *
 * 注意：如果留言內有#橘狐、#灰狐、#黑狐，該則留言的所有tag都會隱藏。
 *
 ***************************/
/* －－－－－－－－－－－基本界面設定－－－－－－－－－－－ */
/* 界面調整，可隨意刪改 */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt {
	margin: 3px 0;
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .td_qual {
	position: relative;
	min-width: 60px;
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .tr_cnt {
	display: block;
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .td_cnt {
	border-radius: 5px;
	background: white;
	filter: drop-shadow(0 0 1px #000);
	padding: 1rem;
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag:is([href$="橘狐"],[href$="灰狐"],[href$="黑狐"])) .td_qual .name::before{
	border-radius: 5px;
}
 
/* 隱藏原本的名字 */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag:is([href$="橘狐"],[href$="灰狐"],[href$="黑狐"])) .td_qual .name{
	display: inline-block;
	font-size: 0;
	text-decoration: none;
}
/* 頭像部份 */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag:is([href$="橘狐"],[href$="灰狐"],[href$="黑狐"])) .td_qual .name::before{
	display: block;
	content: '';
	width: 48px;
	height: 48px;
	border: 2px dashed #000;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
}
/* 名字部份 */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag:is([href$="橘狐"],[href$="灰狐"],[href$="黑狐"])) .td_qual .name::after{
	font-size: 1rem;
	font-weight: 600;
}
/* 隱藏留言的tag */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag:is([href$="橘狐"],[href$="灰狐"],[href$="黑狐"])) .hashtag {
	display: none;
}

/* －－－－－－－－－－－圖片和名字設定－－－－－－－－－－－ */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="橘狐"]) .td_qual .name::before{
	background-image: url('https://emos.plurk.com/a50dd0be331128893cda454a84ce7247_w48_h48.png');
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="橘狐"]) .td_qual .name::after{
	content: '乖巧的橘狐';
	color: #f67618;
}

.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="灰狐"]) .td_qual .name::before{
	background-image: url('https://emos.plurk.com/ffca76908a731c4044c8e02b01b7acc9_w48_h48.png');
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="灰狐"]) .td_qual .name::after{
	content: '乖巧的灰狐';
	color: #7672a9;
}

.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="黑狐"]) .td_qual .name::before{
	background-image: url('https://emos.plurk.com/8c74deb9047645c2be54553317578912_w48_h48.png');
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="黑狐"]) .td_qual .name::after{
	content: '熱情的黑狐';
	color: #393939;
}

/* －－－－－－－－－－－額外：增添表情集－－－－－－－－－－－ */
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="橘狐"]):has(.hashtag[href$="指責"]) .td_qual .name::before{
	background-image: url('https://emos.plurk.com/aa9ae53d9074382c2a9e880068e87572_w48_h48.png');
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="橘狐"]):has(.hashtag[href$="自信"]) .td_qual .name::before{
	background-image: url('https://emos.plurk.com/af7ab73f4862e82e40dccda399432ea1_w48_h48.png');
}
.response_box:has(.hashtag[href$="召喚狐狸！"]) .plurk_cnt:has(.hashtag[href$="橘狐"]):has(.hashtag[href$="被閃"]) .td_qual .name::before{
	background-image: url('https://emos.plurk.com/ab064780c9fbed28c9334f16e716d679_w48_h48.png');
}