☰

Bangumi User Hover Panel

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址