打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

用户:RedDragon/Test1:修订间差异

来自Rizline中文维基
 
(未显示同一用户的5个中间版本)
第2行: 第2行:


<html>
<html>
<table class="infobox" cellspacing="3" style="border-collapse:separate;border-spacing:2px;float:right;">
<style>
     <tbody>
     .glowing-card {
        <tr class="infobox-below">
        width: 120px;
            <td colspan="2" style="padding:0.5em;background:#796CD5; text-align:center; color:#FFFFFF;;">
        padding: 10px;
                <b>Rizline Original</b><sup id="cite_ref-1" class="reference"><a href="#cite_note-1" title=""><span
        border-radius: 10px;
                            class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>
        color: #976dff;
                <div class="mw-collapsible mw-made-collapsible" style="width: 100%; text-align: left;"><button
        text-align: center;
                        type="button"
        font-size: 17px;
                        class="mw-collapsible-toggle mw-collapsible-toggle-default mw-collapsible-toggle-expanded"
        font-weight: bold;
                        aria-expanded="true" tabindex="0"><span class="mw-collapsible-text">折叠</span></button>
        text-shadow: 0 0 10px #976dff;
                    <div class="mw-collapsible-content" style="">
        text-shadow: 0 0 5px #976dff;
                        <div
        transition: all 0.2s ease;
                            style="background:#9286DC; color:var(--color-emphasized); padding: 8px; font-weight: bold; text-align: center;">
        cursor: pointer;
                            详细信息</div>
        position: relative;
                        <table class="infobox" style="width:100%; border:none; margin:0;">
        overflow: hidden;
                            <tbody>
        z-index: 1;
                                <tr>
        user-select: none;
                                    <th scope="row"
     }
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        Riztime时间</th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        112.29s-142.29s</td>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">主题颜色
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        常规主题</th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        #D2CDDDFF<br>#A2BFD8FF<br>#A29BCDFF</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        Riztime主题1</th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        #ADB9D4FF<br>#9F84B7FF<br>#6574ABFF</td>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">谱面信息
                                    </th>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">
                                        Tap/Drag/Hold</th>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#57E4C4;padding:0 0.80em;margin:0.1em 0.50em;">EZ
                                            4</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        70/43/43</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FDBA61;padding:0 0.80em;margin:0.1em 0.50em;">HD
                                            6</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        203/164/48</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FE8661;padding:0 0.80em;margin:0.1em 0.50em;">IN
                                            12</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        393/233/84</td>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">线条数
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#57E4C4;padding:0 0.80em;margin:0.1em 0.50em;">EZ
                                            4</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        197</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FDBA61;padding:0 0.80em;margin:0.1em 0.50em;">HD
                                            6</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        222</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FE8661;padding:0 0.80em;margin:0.1em 0.50em;">IN
                                            12</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        1020</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
     </tbody>
</table>


<script>
     .glowing-card::before {
     document.addEventListener('DOMContentLoaded', addColorBorders)
        content: '';
   
        position: absolute;
    const hexColorRegex = /#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})\b/g
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #5d27e64d;
        border-radius: 10px;
        transition: left 0.1s ease;
        z-index: -1;
    }


     function addColorBorders() {
     .glowing-card:hover {
         const walker = document.createTreeWalker(
         background: rgba(255, 255, 255, 0.05);
            document.body,
        color: #3492ff;
            NodeFilter.SHOW_TEXT,
        transform: translate(-1px, -1px);
            null,
        text-shadow: 0 0 10px #3492ff;
            false
         text-shadow: 0 0 5px #3492ff;
         )
    }


        const textNodes = []
    .glowing-card:active::before {
        let node
        left: 0;
        while (node = walker.nextNode()) {
    }
            textNodes.push(node)
        }


        textNodes.forEach(textNode => {
    .glowing-card:active {
            const parent = textNode.parentNode
        color: white;
            if (parent.nodeName === 'SCRIPT' || parent.nodeName === 'STYLE') {
        text-shadow: 0 0 10px #fff;
                return
    }
            }
</style>


            const text = textNode.textContent
<body>
            const matches = [...text.matchAll(hexColorRegex)]
    <div class="glowing-card">
        click this
    </div>
</body>
</html>


             if (matches.length > 0) {
<html>
                const fragment = document.createDocumentFragment()
<table class="infobox" cellspacing="3" style="border-collapse:separate;border-spacing:2px;float:right;">
                let lastIndex = 0
  <tbody>
 
    <tr class="infobox-below">
                 matches.forEach(match => {
      <td colspan="2" style="padding:0;background:#6255BA; text-align:center; color:#FFFFFF; border:4px solid #6255BA;">
                    const matchIndex = match.index
        <div class="mw-collapsible mw-made-collapsible" style="width: 100%;">
                    const hexColor = match[0]
          <button type="button" class="mw-collapsible-toggle mw-collapsible-toggle-default webfonts-changed mw-collapsible-toggle-expanded" aria-expanded="true" tabindex="0">
 
             <span class="mw-collapsible-text">折叠</span>
                    if (matchIndex > lastIndex) {
          </button>
                        fragment.appendChild(
          <div style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; font-weight: bold; text-align: center; border:4px solid #7D73C6;">详细信息</div>
                            document.createTextNode(text.substring(lastIndex, matchIndex))
          <table class="infobox mw-collapsible-content" style="width: 100%; border: none; margin: 0px;">
                        )
            <tbody>
                    }
              <tr>
 
                 <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">预览时间</th>
                    const colorSpan = document.createElement('span')
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">49.704s-69.704s</td>
                    colorSpan.style.display = 'inline-block'
              </tr>
                    colorSpan.style.padding = '0'
              <tr>
                    colorSpan.style.margin = '0'
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">Riztime时间</th>
                    colorSpan.style.border = '4px solid'
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">50.282s-77.746s</td>
                    colorSpan.style.borderRadius = '0'
              </tr>
                    colorSpan.style.fontWeight = 'bold'
              <tr>
                    colorSpan.style.background = 'transparent'
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">主题颜色</th>
                    colorSpan.style.lineHeight = '1'
              </tr>
                    colorSpan.style.verticalAlign = 'baseline'
              <tr>
                    colorSpan.style.boxSizing = 'border-box'
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">常规主题</th>
                    colorSpan.style.minWidth = 'fit-content'
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:0px 4px; border:4px solid var(--color-surface-1);">
                    colorSpan.textContent = hexColor
                  <span style="display:block; padding:2px 4px; border:4px solid #B3A3EDFF; margin:0 -4px;">#B3A3EDFF</span>
                    colorSpan.style.borderColor = hexColor
                  <span style="display:block; padding:2px 4px; border:4px solid #5BCFEEFF; margin:0 -4px;">#5BCFEEFF</span>
 
                  <span style="display:block; padding:2px 4px; border:4px solid #4637AEFF; margin:0 -4px;">#4637AEFF</span>
                    fragment.appendChild(colorSpan)
                </td>
                    lastIndex = matchIndex + hexColor.length
              </tr>
                 })
              <tr>
 
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">Riztime主题1</th>
                 if (lastIndex < text.length) {
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:0px 4px; border:4px solid var(--color-surface-1);">
                    fragment.appendChild(
                  <span style="display:block; padding:2px 4px; border:4px solid #594095FF; margin:0 -4px;">#594095FF</span>
                        document.createTextNode(text.substring(lastIndex))
                  <span style="display:block; padding:2px 4px; border:4px solid #FF147DFF; margin:0 -4px;">#FF147DFF</span>
                    )
                  <span style="display:block; padding:2px 4px; border:4px solid #5BCFEEFF; margin:0 -4px;">#5BCFEEFF</span>
                 }
                </td>
 
              </tr>
                 parent.replaceChild(fragment, textNode)
              <tr>
             }
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">谱面信息</th>
         })
              </tr>
     }
              <tr>
</script>
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">Tap/Drag/Hold</th>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#57E4C4;padding:0 0.80em;margin:0.1em 0.50em;">EZ 3</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">134/54/68</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FDBA61;padding:0 0.80em;margin:0.1em 0.50em;">HD 8</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">169/222/134</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FE8661;padding:0 0.80em;margin:0.1em 0.50em;">IN 13+</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">435/129/98</td>
              </tr>
              <tr>
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">线条数</th>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#57E4C4;padding:0 0.80em;margin:0.1em 0.50em;">EZ 3</span>
                 </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">291</td>
              </tr>
              <tr>
                 <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FDBA61;padding:0 0.80em;margin:0.1em 0.50em;">HD 8</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">358</td>
              </tr>
              <tr>
                 <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <span style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FE8661;padding:0 0.80em;margin:0.1em 0.50em;">IN 13+</span>
                </th>
                 <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">678</td>
              </tr>
             </tbody>
          </table>
         </div>
      </td>
     </tr>
  </tbody>
</table>
</html>
</html>



2025年11月29日 (六) 20:35的最新版本

加入社区

avataravataravataravatar
avataravataravataravatar
avatar

click this

详细信息
预览时间 49.704s-69.704s
Riztime时间 50.282s-77.746s
主题颜色
常规主题 #B3A3EDFF #5BCFEEFF #4637AEFF
Riztime主题1 #594095FF #FF147DFF #5BCFEEFF
谱面信息
Tap/Drag/Hold
EZ 3 134/54/68
HD 8 169/222/134
IN 13+ 435/129/98
线条数
EZ 3 291
HD 8 358
IN 13+ 678


User:RedDragon/Test User:RedDragon/Test1 User:RedDragon/Test2