Bubble Styling for Twikoo Comments

 1/* Set text content :nth-child(1) selects the first element */
 2.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
 3  content: "Entering your QQ number will automatically fetch your nickname and avatar🐧";
 4}
 5
 6.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
 7  content: "Replies will be sent to your email📧";
 8}
 9
10.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
11  content: "You can access your website via your nickname🔗";
12}
13
14/* Display when the user clicks on the input field */
15.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
16.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
17  display: block;
18}
19
20/* Main content area */
21.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
22  /* Hide initially */
23  display: none;
24  /* Absolute positioning */
25  position: absolute;
26  /* Move up by 60 pixels */
27  top: -60px;
28  /* Prevent text wrapping caused by left:50% */
29  white-space: nowrap;
30  /* Rounded corners */
31  border-radius: 10px;
32  /* 50% from the left */
33  left: 50%;
34  /* Move left by half of its own width to center it */
35  transform: translate(-50%);
36  /* Padding */
37  padding: 14px 18px;
38  background: #444;
39  color: #fff;
40}
41
42/* Small arrow indicator */
43.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
44  display: none;
45  content: "";
46  position: absolute;
47  /* When the content size (width and height) is 0 and the border size is not 0, each border (4 borders) becomes a triangle, forming a square.
48     First, make all borders transparent, then add color to one border to create a small triangle */
49  border: 12px solid transparent;
50  border-top-color: #444;
51  left: 50%;
52  transform: translate(-50%, -48px);
53}
54
55/************ Adjust the background box style in Twikoo comments ************/
56#twikoo .tk-content {
57  background: rgb(235 235 235 / 60%);
58  padding: 10px 15px;
59  border-radius: 10px;
60}
61
62.tk-content * {
63  margin: 0;
64}
65/************ Adjust the background box style in Twikoo comments ************/
66
67/* Style for the expand/collapse button */
68.tk-expand {
69  background: var(--card-bg);
70  border: 1px solid #e0e3ed;
71  box-shadow: 0 5px 10px rgb(189 189 189 / 10%);
72  transition: all 0.3s ease-in-out;
73  border-radius: 12px;
74}

1<link rel="stylesheet" href="/css/twikoo.css"> # Bubble styling for Twikoo comments