☰

Bangumi User Hover Panel-change

fork of https://bgm.tv/dev/app/2647. Display a hover panel when mouse hover on user link.

  1. // ==UserScript==
  2. // @name         Bangumi User Hover Panel-change
  3. // @name:zh-CN   Bangumi 用户悬浮面板-改
  4. // @namespace    https://github.com/stay206/bangumi/
  5. // @version      1.0.0
  6. // @description  fork of https://bgm.tv/dev/app/2647. Display a hover panel when mouse hover on user link.
  7. // @description:zh-CN  https://bgm.tv/dev/app/2647 的修改版，鼠标悬浮在用户链接上方时出现悬浮框，添加了wiki协助记录
  8. // @author       cureDovahkiin + CryoVit + 墨云
  9. // @match        https://bangumi.tv/*
  10. // @match        https://bgm.tv/*
  11. // @match        https://chii.in/*
  12. // @icon         https://bgm.tv/img/favicon.ico
  13. // @grant        none
  14. // @license      MIT
  15. // ==/UserScript==
  16.  
  17. (function () {
  18.     /*
  19.         2 = timeline
  20.         4 = stats
  21.         8 = sinkuro
  22.         16 = anime
  23.         32 = game
  24.         64 = book
  25.         128 = [reserved] for music
  26.         256 = [reserved] for real
  27.         the value is the sum of the entries to show,
  28.         e.g. 28 = 4 + 8 + 16, means show stats, sinkuro and anime
  29.     */
  30.     if (localStorage.getItem('hover-panel-config') === null) { // default config
  31.         localStorage.setItem('hover-panel-config', '28'); // 4 + 8 + 16
  32.     }
  33.     const entryStates = [
  34.         ['在看', '看过', '想看', '搁置', '抛弃'],
  35.         ['在玩', '玩过', '想玩', '搁置', '抛弃'],
  36.         ['在读', '读过', '想读', '搁置', '抛弃']
  37.     ];
  38.     const cfgNames = ['时间线', '统计', '同步率', '动画', '游戏', '书籍'];
  39.     const cfgTimeline = 2;
  40.     const cfgStats = 4;
  41.     const cfgSinkuro = 8;
  42.     const cfgAnime = 16;
  43.     let locker = false
  44.     $('[href*="/user/"],#pm_sidebar a[onclick^="AddMSG"]').each(function () {
  45.         let timer = null
  46.         $(this).hover(function () {
  47.             timer = setTimeout(() => {
  48.                 if (locker) return false
  49.                 if (this.text == "查看好友列表" || $(this).find('.avatarSize75').length > 0) return false
  50.                 locker = true
  51.                 const layout = document.createElement('div')
  52.                 let timer = null
  53.                 $(layout).addClass('user-hover')
  54.                 if ($(this).hasClass('avatar')) {
  55.                     $(layout).addClass('fix-avatar-hover')
  56.                 }
  57.                 if (document.body.clientWidth - this.getBoundingClientRect().right < 430) {
  58.                     $(layout).addClass('fix-right-hover')
  59.                 }
  60.                 layout.innerHTML = `<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>`
  61.                 const userData = {}
  62.                 if (this.onclick) {
  63.                     userData.id = this.onclick.toString().split("'")[1]
  64.                 } else {
  65.                     let urlSplit = /.*\/user\/([^\/]*)\/?(.*)/.exec(this.href)
  66.                     if (urlSplit[2]) return
  67.                     userData.id = urlSplit[1]
  68.                 }
  69.                 userData.href = '/user/' + userData.id
  70.                 const req = {
  71.                     req1: null,
  72.                     req2: null
  73.                 }
  74.                 Promise.all([
  75.                     new Promise((r, j) => {
  76.                         req.req1 = $.ajax({
  77.                             url: userData.href,
  78.                             dataType: 'text',
  79.                             success: e => {
  80.                                 userData.self = /<a class="avatar" href="([^"]*)">/.exec(e)[1].split('/').pop()
  81.                                 if (userData.self != userData.id) {
  82.                                     userData.sinkuro = /mall class="hot">\/([^<]*)<\/small>/.exec(e)[1]
  83.                                     userData.sinkuroritsu = /<span class="percent" style="width:([^"]*)">/.exec(e)[1]
  84.                                     userData.addFriend = /<a href="([^"']*)" id="connectFrd" class="chiiBtn">/.exec(e)
  85.                                     userData.addFriend = userData.addFriend ? userData.addFriend[1] : false
  86.                                 }
  87.                                 userData.joinDate = /Bangumi<\/span> <span class="tip">([^<]*)<\/span>/.exec(e)[1]
  88.                                 // userData.lastEvent = /<small class="time">([^<]*)<\/small><\/li>/.exec(e)
  89.                                 userData.entry = [
  90.                                     Array.from(e.match(/<a href="\/anime\/list[^>=]*>([0-9]{1,4}[^<]*)/g) || [], el => />([0-9]{1,5}.*)/.exec(el)[1]).map(el => el.split('部')),
  91.                                     Array.from(e.match(/<a href="\/game\/list[^>=]*>([0-9]{1,4}[^<]*)/g) || [], el => />([0-9]{1,5}.*)/.exec(el)[1]).map(el => el.split('部')),
  92.                                     Array.from(e.match(/<a href="\/book\/list[^>=]*>([0-9]{1,4}[^<]*)/g) || [], el => />([0-9]{1,5}.*)/.exec(el)[1]).map(el => el.split('本'))
  93.                                 ]
  94.                                 userData.stats = /<div class="gridStats">([\s\S]*)<\/div>/.exec(e)[1]
  95.                                 userData.stats = Array.from(userData.stats.match(/<div[^>]*>([\s\S]*?)<\/div>/g).slice(0, 6), el => /<div[^>]*>([\s\S]*?)<\/div>/.exec(el)[1])
  96.                                 userData.stats = userData.stats.map(el => Array.from(el.match(/<span[^>]*>([\s\S]*?)<\/span>/g), el => /<span[^>]*>([\s\S]*?)<\/span>/.exec(el)[1]))
  97.                                 userData.timeline = /<ul class="timeline">([\s\S]*?)<\/ul>/.exec(e)[1]
  98.                                 // console.log(userData)
  99.                                 r()
  100.                             },
  101.                             error: () => {
  102.                                 j()
  103.                             }
  104.                         })
  105.                     }),
  106.                     new Promise((r, j) => {
  107.                         req.req2 = $.ajax({
  108.                             url: 'https://api.bgm.tv/user/' + userData.id,
  109.                             dataType: 'json',
  110.                             success: e => {
  111.                                 userData.name = e.nickname
  112.                                 userData.avatar = e.avatar.large.replace(/https?/, 'https')
  113.                                 userData.sign = e.sign
  114.                                 userData.url = e.url
  115.                                 userData.message = `https://bgm.tv/pm/compose/${e.id}.chii`
  116.                                 userData.wiki = `https://patch.bgm38.tv/contrib/${e.id}`
  117.                                 r()
  118.                             },
  119.                             error: () => {
  120.                                 j()
  121.                             }
  122.                         })
  123.                     })
  124.                 ]).then(() => {
  125.                     layout.innerHTML = `
  126.                         <img class='avater' src="${userData.avatar}"/>
  127.                         <div class='user-info'>
  128.                             <p class='user-name'><a href="${userData.href}" target="_blank">${userData.name}</a></p>
  129.                             <p class='user-joindate'>${userData.joinDate}</p><span class='user-id'>@${userData.id}</span>
  130.                             <p class='user-sign'>${userData.sign}</p>
  131.                         </div>
  132.                         ${
  133.                         ((localStorage.getItem('hover-panel-config') & cfgSinkuro) && userData.sinkuro) ? `
  134.                             <div class="shinkuro">
  135.                             <div style="width:${userData.sinkuroritsu}" class="shinkuroritsu"></div>
  136.                             <div class="shinkuro-text">
  137.                                 <span>${userData.sinkuro}</span> 
  138.                                 <span>同步率：${userData.sinkuroritsu}</span> 
  139.                             </div>                                      
  140.                             </div>
  141.                             `: ''
  142.                         }                
  143.                         <div class='user-stats'>
  144.                             ${(function () {
  145.                                 const cfg = localStorage.getItem('hover-panel-config')
  146.                                 let html = ''
  147.                                 let odd = true
  148.                                 for (let i = 0; i < 3; i++) {
  149.                                     if (cfg & (cfgAnime << i)) {
  150.                                         html += '<div class="stats-' + (odd ? 'odd' : 'even') + '">'
  151.                                         let dt_j = 0
  152.                                         for (let st_j = 0; st_j < 5; st_j++) {
  153.                                             if (dt_j >= userData.entry[i].length || userData.entry[i][dt_j][1] != entryStates[i][st_j]) {
  154.                                                 html += `<span class="stats-zero">${entryStates[i][st_j]} <strong>0</strong></span>`
  155.                                             } else {
  156.                                                 html += `<span>${entryStates[i][st_j]} <strong>${userData.entry[i][dt_j][0]}</strong></span>`
  157.                                                 dt_j++
  158.                                             }
  159.                                         }
  160.                                         html += '</div>'
  161.                                         odd = !odd
  162.                                     }
  163.                                 }
  164.                                 if (cfg & cfgStats) {
  165.                                     html += '<div class="stats-' + (odd ? 'odd' : 'even') + '">'
  166.                                     for (let i = 0; i < 6; i++) {
  167.                                         if (i == 2) {
  168.                                             continue
  169.                                         }
  170.                                         if (userData.stats[i][0] == 0) { // '0.00' == 0
  171.                                             html += `<span class="stats-zero">${userData.stats[i][1]} <strong>${userData.stats[i][0]}</strong></span>`
  172.                                         } else {
  173.                                             html += `<span>${userData.stats[i][1]} <strong>${userData.stats[i][0]}</strong></span>`
  174.                                         }
  175.                                     }
  176.                                     html += '</div>'
  177.                                     odd = !odd
  178.                                 }
  179.                                 return html
  180.                             })()}
  181.                         </div>
  182.                         ${
  183.                         (localStorage.getItem('hover-panel-config') & cfgTimeline) ? `
  184.                             <ul class="timeline" id="panel-timeline">${userData.timeline}</ul>
  185.                             `: ''
  186.                         }
  187.                         <!-- <span class='user-lastevent'>Last @ ${userData.lastEvent ? userData.lastEvent[1] : ''}</span> -->
  188.                         <a class = 'hover-panel-btn' href="${userData.message}" target="_blank">发送短信</a>
  189.                         <a class = 'hover-panel-btn' href="${userData.wiki}" target="_blank">协助记录</a>
  190.                         <span id="panel-friend">
  191.                         ${ userData.addFriend ? `
  192.                                 <a class='hover-panel-btn' href="${userData.addFriend}" id='PanelconnectFrd' href="javascript:void(0)">添加好友</a>                    
  193.                             `: `
  194.                         ${ userData.id == userData.self ? '' : `<span class = 'my-friend' >我的好友</span>`}
  195.                             `}
  196.                         </span>
  197.                         `
  198.                     
  199.                     let cb = document.createElement('a')
  200.                     cb.className = 'hover-panel-btn'
  201.                     cb.id = 'cfg-btn'
  202.                     cb.href = 'javascript:void(0)'
  203.                     cb.onclick = function () {
  204.                         let cfg = localStorage.getItem('hover-panel-config')
  205.                         let sub = document.createElement('div')
  206.                         sub.className = 'user-hover'
  207.                         sub.id = 'hover-panel-sub'
  208.                         sub.innerHTML = `
  209.                             <fieldset>
  210.                                 <legend>设置显示项目</legend>
  211.                                 ${(function () {
  212.                                     let html = ''
  213.                                     for (let i = 0; i < 6; i++) {
  214.                                         html += `<div class='hover-cfg-item'>
  215.                                             <input type='checkbox' id='hover-cfg-${i}' ${cfg & (2 << i) ? 'checked' : ''}>
  216.                                             <label for='hover-cfg-${i}'>${cfgNames[i]}</label>
  217.                                         </div>`
  218.                                     }
  219.                                     return html
  220.                                 })()}
  221.                                 </div>
  222.                             </fieldset>
  223.                         `
  224.  
  225.                         let cancel = document.createElement('a')
  226.                         cancel.className = 'hover-panel-btn'
  227.                         cancel.id = 'cfg-cancel-btn'
  228.                         cancel.href = 'javascript:void(0)'
  229.                         cancel.innerText = '取消'
  230.                         cancel.onclick = function () {
  231.                             $('#hover-panel-sub').remove()
  232.                         }
  233.                         sub.appendChild(cancel)
  234.  
  235.                         let save = document.createElement('a')
  236.                         save.className = 'hover-panel-btn'
  237.                         save.id = 'cfg-save-btn'
  238.                         save.href = 'javascript:void(0)'
  239.                         save.innerText = '保存'
  240.                         save.onclick = function () {
  241.                             let cfg = 0
  242.                             for (let i = 0; i < 6; i++) {
  243.                                 if (document.getElementById(`hover-cfg-${i}`).checked) {
  244.                                     cfg |= (2 << i)
  245.                                 }
  246.                             }
  247.                             localStorage.setItem('hover-panel-config', cfg)
  248.                             $('#hover-panel-sub').remove()
  249.                         }
  250.                         sub.appendChild(save)
  251.                         document.body.appendChild(sub)
  252.                     }
  253.                     cb.innerText = '设置'
  254.                     layout.appendChild(cb)
  255.  
  256.                     $(layout).addClass('dataready')
  257.                     $('#PanelconnectFrd').click(function () {
  258.                         $('#panel-friend').html(`<span class='my-friend'>正在添加</span>`)
  259.                         $("#robot").fadeIn(500)
  260.                         $("#robot_balloon").html(AJAXtip['wait'] + AJAXtip['addingFrd'])
  261.                         $.ajax({
  262.                             type: "GET",
  263.                             url: this + '&ajax=1',
  264.                             success: function (html) {
  265.                                 $('#PanelconnectFrd').hide()
  266.                                 $('#panel-friend').html(`<span class = 'my-friend' >我的好友</span>`)
  267.                                 $("#robot_balloon").html(AJAXtip['addFrd'])
  268.                                 $("#robot").animate({
  269.                                     opacity: 1
  270.                                 }, 1000).fadeOut(500)
  271.                                 localStorage.removeItem('bgmFriends')
  272.                             },
  273.                             error: function (html) {
  274.                                 $("#robot_balloon").html(AJAXtip['error'])
  275.                                 $("#robot").animate({
  276.                                     opacity: 1
  277.                                 }, 1000).fadeOut(500)
  278.                                 $('#panel-friend').html(`<span class='my-friend-fail'>添加失败</span>`)
  279.                             }
  280.                         })
  281.                         return false
  282.                     })
  283.                 }).catch(() => {
  284.                     layout.innerHTML = `
  285.                         <p style='font-size:16px; margin:25px 30px'>
  286.                         <img style="height:15px;width:16px" src='/img/smiles/tv/15.gif'/><br/>
  287.                         请求失败，请稍后再试。<br/><br/>或者使用<a href='https://bgm.tv'>bgm.tv</a>域名，</p>`
  288.                     $(layout).addClass('dataready')
  289.                 })
  290.                 function removeLayout () {
  291.                     setTimeout(() => {
  292.                         $(layout).remove()
  293.                         locker = false
  294.                         req.req1.abort()
  295.                         req.req2.abort()
  296.                     }, 200);
  297.                 }
  298.                 $(this).after(layout).mouseout(function () {
  299.                     timer = setTimeout(() => {
  300.                         removeLayout()
  301.                     }, 500);
  302.                 })
  303.                 $(layout).hover(function () {
  304.                     clearTimeout(timer)
  305.                 }, function () {
  306.                     removeLayout()
  307.                 })
  308.                 return false
  309.             }, 500)
  310.         },
  311.             function () {
  312.                 clearTimeout(timer)
  313.             }
  314.         )
  315.     })
  316.  
  317.     // prevent user link at (1) page header (2) footer dock (3) reply form (4) timeline
  318.     // from triggering hover panel
  319.     $("#headerNeue2, #dock, #reply_wrapper, .tml_item").find("a[href*='/user/']").unbind();
  320.  
  321.     const style = document.createElement("style");
  322.     const heads = document.getElementsByTagName("head");
  323.     style.setAttribute("type", "text/css");
  324.     style.innerHTML = `
  325.         :root {
  326.             --bg-color: #fff;
  327.             --text-color: #010101;
  328.             --bg-pink: #fce9e9;
  329.             --bg-sky: #c2e1fc;
  330.             --box-shadow: #ddd;
  331.             --text-gray: #6e6e6e;
  332.             --bg-filter: blur(10px) contrast(90%);
  333.         }
  334.         [data-theme='dark'] {
  335.             --bg-color: #2d2e2f;
  336.             --text-color: #f7f7f7;
  337.             --bg-pink: #3c3c3c;
  338.             --bg-sky: #3c3c3c;
  339.             --box-shadow: #6e6e6e;
  340.             --text-gray: #aaa;
  341.             --bg-filter: blur(10px) contrast(50%);
  342.         }
  343.         .user-hover {
  344.             position: absolute;
  345.             width: 430px;
  346.             /* background: var(--bg-color); */
  347.             box-shadow: 0px 0px 4px 1px var(--box-shadow);
  348.             transition: all .2s ease-in;
  349.             transform: translate(0,6 px);
  350.             font-size: 12px;
  351.             z-index:999;
  352.             color: var(--text-color);
  353.             line-height: 130%;
  354.             border-radius: 15px;
  355.             -webkit-border-radius: 15px;
  356.             backdrop-filter: var(--bg-filter);
  357.             -webkit-backdrop-filter: var(--bg-filter);
  358.         }
  359.         .fix-avatar-hover {
  360.             transform: translate(55px, 20px)
  361.         }
  362.         .fix-right-hover {
  363.             transform: translate(-430px, 6px)
  364.         }
  365.         .fix-avatar-hover.fix-right-hover {
  366.             transform: translate(-485px, 20px)
  367.         }
  368.  
  369.         /* basic info */
  370.         div.dataready {
  371.             padding: 8px;
  372.             font-weight: normal;
  373.             text-align: left;
  374.         }
  375.         /* span.user-lastevent {
  376.             margin-top: 3px;
  377.             display: inline-block;
  378.             vertical-align: top;
  379.             color: var(--text-gray);
  380.         } */
  381.         div.dataready img {
  382.             height: 75px;
  383.             width:75px;
  384.             border-radius: 5px;
  385.         }
  386.         .user-info {
  387.             display: inline-block;
  388.             vertical-align: top;
  389.             max-width: 250px;
  390.             margin: 0 0 10px 10px;
  391.         }
  392.         .user-info .user-name {
  393.             font-size: 20px;
  394.             font-weight: bold;
  395.         }
  396.         .user-info .user-joindate {
  397.             background-color: #f09199;
  398.             display: inline-block;
  399.             color: #f7f7f7;
  400.             border-radius: 10px;
  401.             padding: 0 10px;
  402.             margin: 8px 4px 3px 0;
  403.         }
  404.         .user-info .user-id{
  405.             font-size: 12px;
  406.             font-weight:normal;
  407.             color: var(--text-gray);
  408.         }
  409.         .user-info .user-sign {
  410.             word-break: break-all;
  411.             margin-top: 3px;
  412.             color: var(--text-gray);
  413.         }
  414.  
  415.         /* stats */
  416.         .user-stats {
  417.             padding: 10px 0px 5px;
  418.             margin-bottom: 0;
  419.         }
  420.         .user-stats span {
  421.             display: inline-block;
  422.             padding: 4px;
  423.             width: 19%;
  424.             box-sizing: border-box;
  425.             border-left: 4px solid #f09199;
  426.             background-color: var(--bg-pink);
  427.             color: var(--text-color);
  428.             margin: 0 1% 1% 0;
  429.         }
  430.         .stats-even span {
  431.             border-left: 4px solid #369cf8;
  432.             background-color: var(--bg-sky);
  433.         }
  434.         .stats-zero {
  435.             opacity: 0.5;
  436.         }
  437.  
  438.         /* shinkuro */
  439.         .shinkuro {
  440.             width: 100%;
  441.             height: 20px;
  442.             background-color: var(--bg-sky);
  443.             line-height: 20px;
  444.             border-radius: 10px;
  445.             margin-top: 5px;
  446.         }
  447.         .shinkuro-text {
  448.             position: absolute;
  449.             width: 100%;
  450.             height: 20px;
  451.             display: flex;
  452.             align-items: center;
  453.             justify-content: space-between;
  454.         }
  455.         .shinkuro-text span {
  456.             color: var(--text-color);
  457.         }
  458.         .shinkuroritsu {
  459.             height: 20px;
  460.             float: left;
  461.             border-radius: 10px;
  462.             background: #369cf8;
  463.         }
  464.         .shinkuro-text span:nth-of-type(1) {
  465.             margin-left: 10px;
  466.         }
  467.         .shinkuro-text span:nth-of-type(2) {
  468.             margin-right: 26px;
  469.         }
  470.  
  471.         /* timeline */
  472.         #panel-timeline li {
  473.             margin-top: 0;
  474.         }
  475.         #panel-timeline a {
  476.             display: inline !important;
  477.         }
  478.         #panel-timeline .time {
  479.             color: var(--text-gray);
  480.         }
  481.  
  482.         /* buttons */
  483.         a.hover-panel-btn, span.my-friend, span.my-friend-fail {
  484.             display: inline-block;
  485.             float: right;
  486.             color: white;
  487.             padding: 1px 8px;
  488.             border-radius: 10px;
  489.             margin: 8px 0 0 10px;
  490.             transition: all .2s ease-in;
  491.         }
  492.         a.hover-panel-btn {
  493.             background: #f09199;
  494.             transition: all .2s ease-in;
  495.         }
  496.         span.my-friend {
  497.             background: #6eb76e;
  498.         }
  499.         span.my-friend-fail {
  500.             background: red;
  501.         }
  502.         #cfg-btn {
  503.             background: #369cf8;
  504.             float: left;
  505.             margin-left: 0;
  506.         }
  507.  
  508.         /* animation */
  509.         .lds-roller {
  510.             display: inline-block;
  511.             position: relative;
  512.             width: 64px;
  513.             height: 64px;
  514.             margin:10px 20px
  515.         }
  516.         .lds-roller div {
  517.             animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  518.             transform-origin: 32px 32px;
  519.         }
  520.         .lds-roller div:after {
  521.             content: " ";
  522.             display: block;
  523.             position: absolute;
  524.             width: 6px;
  525.             height: 6px;
  526.             border-radius: 50%;
  527.             background: #f09199;
  528.             margin: -3px 0 0 -3px;
  529.         }
  530.         .lds-roller div:nth-child(1) {
  531.             animation-delay: -0.036s;
  532.         }
  533.         .lds-roller div:nth-child(1):after {
  534.             top: 50px;
  535.             left: 50px;
  536.         }
  537.         .lds-roller div:nth-child(2) {
  538.             animation-delay: -0.072s;
  539.         }
  540.         .lds-roller div:nth-child(2):after {
  541.             top: 54px;
  542.             left: 45px;
  543.         }
  544.         .lds-roller div:nth-child(3) {
  545.             animation-delay: -0.108s;
  546.         }
  547.         .lds-roller div:nth-child(3):after {
  548.             top: 57px;
  549.             left: 39px;
  550.         }
  551.         .lds-roller div:nth-child(4) {
  552.             animation-delay: -0.144s;
  553.         }
  554.         .lds-roller div:nth-child(4):after {
  555.             top: 58px;
  556.             left: 32px;
  557.         }
  558.         .lds-roller div:nth-child(5) {
  559.             animation-delay: -0.18s;
  560.         }
  561.         .lds-roller div:nth-child(5):after {
  562.             top: 57px;
  563.             left: 25px;
  564.         }
  565.         .lds-roller div:nth-child(6) {
  566.             animation-delay: -0.216s;
  567.         }
  568.         .lds-roller div:nth-child(6):after {
  569.             top: 54px;
  570.             left: 19px;
  571.         }
  572.         .lds-roller div:nth-child(7) {
  573.             animation-delay: -0.252s;
  574.         }
  575.         .lds-roller div:nth-child(7):after {
  576.             top: 50px;
  577.             left: 14px;
  578.         }
  579.         .lds-roller div:nth-child(8) {
  580.             animation-delay: -0.288s;
  581.         }
  582.         .lds-roller div:nth-child(8):after {
  583.             top: 45px;
  584.             left: 10px;
  585.         }
  586.         @keyframes lds-roller {
  587.             0% {
  588.                 transform: rotate(0deg);
  589.             }
  590.             100% {
  591.                 transform: rotate(360deg);
  592.             }
  593.         }
  594.         
  595.         #comment_list div.sub_reply_collapse {
  596.             opacity: 1;
  597.         }
  598.  
  599.         /* config panel */
  600.         #hover-panel-sub {
  601.             width: 150px;
  602.             height: 160px;
  603.             padding: 5px;
  604.             line-height: 1.5;
  605.             position: fixed;
  606.             top: 50%;
  607.             left: 50%;
  608.             transform: translate(-50%, -50%);
  609.             z-index: 1000;
  610.         }
  611.         #hover-panel-sub legend {
  612.             font-size: 14px;
  613.             font-weight: bold;
  614.             text-align: center;
  615.         }
  616.         #hover-panel-sub fieldset {
  617.             padding: 0 5px;
  618.         }
  619.         #hover-panel-sub .hover-panel-btn {
  620.             display: inline-block;
  621.             text-align: center;
  622.         }
  623.         #cfg-cancel-btn {
  624.             position: absolute;
  625.             left: 14px;
  626.             bottom: 6px;
  627.             background: #f09199;
  628.         }
  629.         #cfg-save-btn {
  630.             position: absolute;
  631.             right: 24px;
  632.             bottom: 6px;
  633.             background: #6eb76e;
  634.         }
  635.     `
  636.     heads[0].append(style)
  637. })();