From 1b0a4677b095bf0c4559b5cb2cd57bc82c13db70 Mon Sep 17 00:00:00 2001 From: Yukimura Aoi Date: Wed, 14 Aug 2024 10:08:44 +0800 Subject: [PATCH] Add files via upload --- audioEffect.js | 64 +++-- loginWindow.js | 17 +- main.js | 626 +++++++++++++++++++++++++++++++++++++------------ manifest.json | 5 +- preview.png | Bin 16363 -> 30326 bytes 5 files changed, 528 insertions(+), 184 deletions(-) diff --git a/audioEffect.js b/audioEffect.js index 6b7d6d7..13e38ec 100644 --- a/audioEffect.js +++ b/audioEffect.js @@ -10,11 +10,13 @@ function refreshCss() { var rswCaches = JSON.parse(localStorage.getItem("RswColorCaches")); var cssIn = ` /*某些class会在主题变化后变动*/ :root { /*整体*/ - --rsw-accent-color: ` + rswCaches.accentColor + `; - --rsw-text-color: ` + rswCaches.accentTextColor + `; - --rsw-bg-color: ` + rswCaches.bgColor + `; - --rsw-bg-color-trans: ` + rswCaches.bgColorTrans + `; + --rsw-accent-color: ${rswCaches.accentColor}; + --rsw-text-color: ${rswCaches.accentTextColor}; + --rsw-bg-color: ${rswCaches.bgColor}; + --rsw-bg-color-trans: ${rswCaches.bgColorTrans}; --rsw-trans-color: rgba(127, 127, 127, 0.1); + --rsw-timing-function-in: cubic-bezier(.34, .68, 0, 1); + --rsw-timing-function-out: cubic-bezier(1, 0, .68, .34); --themeC1: var(--rsw-accent-color); } @keyframes inBody { /*别想多*/ @@ -46,6 +48,7 @@ function refreshCss() { background: var(--rsw-trans-color); border-bottom: 1px solid var(--rsw-accent-color); box-shadow: inset 0 -5px 4px -5px var(--rsw-accent-color); + backdrop-filter: blur(12px); } div.title { /*“音效”*/ display: none; @@ -55,10 +58,13 @@ function refreshCss() { top: 10px; } @keyframes navBarSelected { - 0% { + 0%, 33.3% { height: 1px; box-shadow: 0 0 4px 0 var(--rsw-accent-color); } + 33.3% { + height: 44px; + } } #root nav a { /*导航栏项*/ color: var(--rsw-text-color); @@ -79,32 +85,30 @@ function refreshCss() { height: 44px; line-height: 45px; color: var(--rsw-accent-color); - background: var(--rsw-bg-color); border: 1px solid var(--rsw-accent-color); - border-bottom: 0; box-shadow: - 0 -4px 3px -4px var(--rsw-accent-color), /*上*/ - 4px 0 3px -4px var(--rsw-accent-color), /*右*/ - -4px 0 3px -4px var(--rsw-accent-color); /*左*/ - animation: navBarSelected .1s 1; + 0 0 4px 0 var(--rsw-accent-color), /*其他*/ + inset 0 -6px 5px -5px var(--rsw-accent-color); /*下*/ + animation: navBarSelected .3s 1; transition: .1s; } #root nav a.z-sel:hover { /*导航栏选中项（鼠标移上）*/ box-shadow: - 0 -5px 3px -4px var(--rsw-accent-color), /*上*/ - 5px 0 3px -4px var(--rsw-accent-color), /*右*/ - -5px 0 3px -4px var(--rsw-accent-color); /*左*/ + 0 0 6px 0 var(--rsw-accent-color), /*其他*/ + inset 0 -8px 4px -5px var(--rsw-accent-color); /*下*/ + transition: .1s; } #root nav a.z-sel:active { /*导航栏选中项（鼠标按下）*/ - box-shadow: #0000; + box-shadow: inset 0 -8px 6px -5px var(--rsw-accent-color); /*下*/ + transition: .1s; } - #root nav a.z-sel::before { /*导航栏选中项下划线*/ + #root nav a.z-sel::before { /*抓条下划线，缩水变小看不见*/ display: none; } #root .dlxBYs { /*开关栏*/ right: 50px; } - span.title { /*开关左侧小标题*/ + #root span.title { /*开关左侧小标题*/ cursor: default; overflow: unset; max-width: unset; @@ -117,7 +121,7 @@ function refreshCss() { div[type="button"]::after { /*开关内部小球球*/ } div[type="button"][aria-checked="true"]::after { /*开关内部小球球（开启版）*/ - background-color: var(--rsw-bg-color); + background: ${rswCaches.bgColor}; /*没法用CSS变量…*/ } #root > div > span { /*关闭按钮*/ top: 16px; @@ -130,6 +134,12 @@ function refreshCss() { #root > div > span:hover svg { /*关闭按钮svg （鼠标移上）*/ fill: var(--rsw-accent-color); } + #root > div > div:last-child { /*音效页*/ + height: 440px; + top: -54px; + padding-top: 69px; + z-index: -1; + } #root .jrSfld { /*音效选块*/ background: #0000; border-radius: 12px; @@ -210,24 +220,25 @@ function refreshCss() { display: block; border-color: var(--rsw-accent-color); border-radius: 10px; - background: var(--rsw-bg-color-trans); + background: #0000; backdrop-filter: blur(8px); box-shadow: 0 0 3px 0 var(--rsw-accent-color); - transition: .2s; + transition: .3s var(--rsw-timing-function-in); } #root div.select-type:hover { /*下拉菜单（鼠标移上）*/ box-shadow: 0 0 6px 0 var(--rsw-accent-color); } #root div.select-type.f-dn { /*下拉菜单（隐藏版）*/ - top: 0; + top: 30px; max-height: 0; opacity: 0; + transition: .2s var(--rsw-timing-function-out); } #root div.select-type.top { /*下拉菜单（贴底版）*/ top: -125px; } #root div.select-type.top.f-dn { /*下拉菜单（贴底隐藏版）*/ - top: 30px; + top: 0; max-height: 0; opacity: 0; } @@ -254,10 +265,15 @@ function refreshCss() { background: #8888 !important; } .has .ctrl .val { /*条条的工具提示*/ - color: var(--rsw-bg-color); - background: var(--rsw-accent-color); + color: var(--rsw-text-color); + border: 1px solid var(--rsw-accent-color); + border-radius: 8px; + background: #0000; + backdrop-filter: blur(4px); + box-shadow: 0 0 3px 0 var(--rsw-accent-color); } .has .ctrl .val::after { /*条条的工具提示之向下箭头*/ + top: 24px; border-color: var(--rsw-accent-color) #0000 #0000; } `; diff --git a/loginWindow.js b/loginWindow.js index d9a1bc2..4d10ad9 100644 --- a/loginWindow.js +++ b/loginWindow.js @@ -58,7 +58,7 @@ function refreshCss() { .n-login-scan .main .qr { /*QR码本码（几维码?）*/ box-shadow: 0 0 0 1px var(--rsw-trans-color); border-radius: 4px; - animation: QRCodeFlyIn .2s 1; + animation: QRCodeFlyIn .3s cubic-bezier(.34, .68, 0, 1) 1; } .n-login-scan .main .tip { /*QR码过期提示*/ background: #0003; @@ -66,7 +66,14 @@ function refreshCss() { } .n-login-scan .main .phone { /*hover QR码后出现的手机*/ top: 4px; - clip-path: inset(30px 0 20px round 8px); + clip-path: inset(30px 0 80px 3px round 8px); + } + .n-login-scan .main.z-hover .txt { /*hover后的用什么扫描提示*/ + top: 194px; + width: unset; + right: 0; + left: 0; + line-height: unset; } .n-login .iner .scan .icn { /*左上角QR码图标*/ clip-path: polygon(0 0, 97% 0, 0 97%); /*斜向裁切（并非100%是为了去白线）*/ @@ -171,7 +178,7 @@ function refreshCss() { border: 1px solid var(--rsw-accent-color); border-radius: 10px; box-shadow: 0 0 3px 0 var(--rsw-accent-color); - background: var(--rsw-bg-color); + background: #0000; transition: .1s; cursor: default; } @@ -183,7 +190,7 @@ function refreshCss() { .n-login .btn-dark:hover, .n-login-scan .main .tip a:hover { /*高亮按钮+mini（鼠标移上）*/ border-color: var(--rsw-accent-color); box-shadow: 0 0 6px 0 var(--rsw-accent-color); - background: var(--rsw-bg-color); + background: #0000; } .n-login-scan .main .tip a:hover { /*mini高亮按钮（鼠标移上）*/ background: var(--rsw-bg-color-trans); @@ -202,7 +209,7 @@ function refreshCss() { color: #888; box-shadow: 0 0 3px #888; border: 1px solid #888; - background: var(--rsw-bg-color); + background: #0000; } .n-login .btn.z-dis:hover { /*DISABLED按钮（鼠标移上）*/ box-shadow: 0 0 6px #888; diff --git a/main.js b/main.js index e249781..3dbb2de 100644 --- a/main.js +++ b/main.js @@ -8,22 +8,39 @@ function qAll(n) { async function refreshCss() { let rswCaches = JSON.parse(localStorage.getItem("RswColorCaches")); - try { - /*是否ReLive主题*/ - if (/relive-theme/.test(q("#StyleSnippetStyles").outerHTML)) { - document.body.classList.add("rsw-relive"); - } - } catch {} let cssIn = ` + @keyframes transGradient { + 0% { + opacity: 0; + } + } + @keyframes navBarSelected { + 0%, 33.3% { + height: 1px; + box-shadow: 0 0 4px 0 var(--rsw-accent-color); + } + 33.3% { + height: 30px; + } + } body { /*整体*/ - --rsw-accent-color: ` + rswCaches.accentColor + `; - --rsw-text-color: ` + rswCaches.accentTextColor + `; - --rsw-bg-color: ` + rswCaches.bgColor + `; - --rsw-bg-color-trans: ` + rswCaches.bgColorTrans + `; + perspective: 1000px; /*3D动画必要*/ + --rsw-accent-color: ${rswCaches.accentColor}; + --rsw-text-color: ${rswCaches.accentTextColor}; + --rsw-bg-color: ${rswCaches.bgColor}; + --rsw-bg-color-trans: ${rswCaches.bgColorTrans}; + --rsw-bg-clip: padding-box; --rsw-trans-color: rgba(127, 127, 127, .1); --rsw-window-blur: blur(24px); --rsw-window-bd: solid rgba(127, 127, 127, .1); + --rsw-window-bdr: 8px; --rsw-window-shadow-color: rgba(0, 0, 0, .3); + --rsw-title-bg: #0000; + --rsw-title-blur: blur(12px); + --rsw-mask-blur: blur(12px); + --rsw-timing-function-in: cubic-bezier(.34, .68, 0, 1); + --rsw-timing-function-in2: cubic-bezier(.11, .79, 0, 1); + --rsw-timing-function-out: cubic-bezier(1, 0, .68, .34); } body.refined-now-playing.mq-playing > * { /*整体(RNP)*/ --rsw-accent-color: var(--rnp-accent-color); @@ -35,9 +52,11 @@ async function refreshCss() { body.material-you-theme > * { /*整体(MY)*/ --rsw-bg-color: var(--md-accent-color-bg); --rsw-bg-color-trans: var(--rsw-bg-color); - --rsw-trans-color: #0000; --rsw-window-blur: none; --rsw-window-bd: none; + --rsw-window-bdr: 16px; + --rsw-title-bg: #0000; + --rsw-title-blur: none; } body.material-you-theme.refined-now-playing.mq-playing:not(.ignore-now-playing) > * { /*整体(MY+RNP)*/ --rsw-text-color: inherit; @@ -49,43 +68,134 @@ async function refreshCss() { --rsw-window-blur: blur(var(--layer-blur)); } html[style*=MoTheme] > body > * { /*整体(MoTheme)*/ - --rsw-bg-color: var(--MoTheme-popWindow_backgroundColor); + --rsw-bg-color: var(--MoTheme-other_backgroundColor); --rsw-bg-color-trans: var(--rsw-bg-color); - --rsw-window-blur: saturate(var(--MoTheme-popWindow_backgroundSaturate)) blur(var(--MoTheme-popWindow_backgroundBlur)); + --rsw-bg-clip: ; + --rsw-window-blur: saturate(var(--MoTheme-other_backgroundSaturate)) blur(var(--MoTheme-other_backgroundBlur)); --rsw-window-bd: solid rgba(255, 255, 255, 0.2); + --rsw-window-bdr: var(--MoTheme-other_radius); + --rsw-title-blur: var(--rsw-window-blur); + --rsw-mask-blur: var(--rsw-window-blur); + } + html[style*=MoTheme] > body div.m-layer, + html[style*=MoTheme] > body div.m-layer-sharecard, + html[style*=MoTheme] > body div.m-card-sharecard, + html[style*=MoTheme] > body div.m-mask, + html[style*=MoTheme] > body div.m-card + div[class^=auto-], + html[style*=MoTheme] > body div.m-layer + div[class^=auto-], + html[style*=MoTheme] > body div.m-timelineslide .mask { /*整体(MoTheme 弹窗+背景遮罩)*/ + --rsw-bg-color: var(--MoTheme-popWindow_backgroundColor); + --rsw-window-blur: saturate(var(--MoTheme-popWindow_backgroundSaturate)) blur(var(--MoTheme-popWindow_backgroundBlur)); + --rsw-window-bdr: var(--MoTheme-popWindow_radius); } html[style*=MoTheme] > body.refined-now-playing.mq-playing > * { /*整体(MoTheme+RNP)*/ --rsw-window-blur: saturate(var(--MoTheme-popWindow_backgroundSaturate)) blur(var(--MoTheme-popWindow_backgroundBlur)); } - @keyframes inMask { + @keyframes inLayer { 0% { opacity: 0; + transform: rotateX(-35deg) scale(.8); + } + } + @keyframes outLayer { /*无用*/ + 100% { + opacity: 0; + transform: rotateX(30deg) rotateY(10deg) scale(.8); } } - div.m-mask, div.m-card + div[class^=auto-], div.m-layer + div[class^=auto-] { /*弹弹背景遮罩（参考了MY的写法）*/ + @keyframes inMask { + 0% { + background: #0000; + backdrop-filter: none; + } + } + @keyframes outMask { + 100% { + background: #0000; + backdrop-filter: none; + } + } + div.m-layer, div.m-card, div.m-playlist, div.m-schlist, div.m-userlist, div.m-skswitch, div.u-arrlay-msg { /*大家好，我们是弹窗卡列大家族*/ + color: var(--rsw-text-color) !important; + animation: inLayer .4s var(--rsw-timing-function-in) 1; + } + #music-163-com div.m-card:not(body.material-you-theme *), + #music-163-com div.m-playlist:not(body.material-you-theme *), + #music-163-com div.m-schlist:not(body.material-you-theme *), + #music-163-com div.m-userlist:not(body.material-you-theme *), + #music-163-com div.m-skswitch:not(body.material-you-theme *), + #music-163-com div.u-arrlay-msg:not(body.material-you-theme *) { + /*大家族（非MY） * 似乎缺了一位？*/ + border: 1px solid #0000 !important; + border-radius: var(--rsw-window-bdr); + background: none !important; + backdrop-filter: none !important; /*防止子元素该属性的渲染异常*/ + box-shadow: 0 6px 24px 0 var(--rsw-window-shadow-color); + overflow: visible; /*让伪元素可以超出*/ + } + div.m-layer:not(body.material-you-theme *)::after, + div.m-card:not(body.material-you-theme *)::after, + div.m-playlist:not(body.material-you-theme *)::after, + div.m-schlist:not(body.material-you-theme *)::after, + div.m-userlist:not(body.material-you-theme *)::after, + div.m-skswitch:not(body.material-you-theme *)::after, + div.u-arrlay-msg:not(body.material-you-theme *)::after { + /*家族的背景实现*/ + position: absolute; + content: ""; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + border: 1px var(--rsw-window-bd); + border-radius: var(--rsw-window-bdr); + background: var(--rsw-bg-color-trans) var(--rsw-bg-clip); + backdrop-filter: var(--rsw-window-blur); + z-index: -1; + } + div.m-playlist:not(body.material-you-theme *), div.m-schlist, div.m-userlist, div.m-skswitch, div.u-arrlay-msg { /*侧边弹出家族*/ + box-shadow: 0 1px 12px 0 var(--rsw-window-shadow-color); + } + div.m-mask, div.m-card + div[class^=auto-], div.m-layer + div[class^=auto-], div.m-timelineslide .mask { /*弹弹背景遮罩（参考了MY的写法）*/ z-index: 9999 !important; - backdrop-filter: blur(2px) brightness(.9); - animation: inMask .4s cubic-bezier(.68, .68, 0, 1) 1; + background: #0003; + backdrop-filter: var(--rsw-mask-blur); + animation: inMask .3s 1; } - div.m-card ::-webkit-scrollbar, div.m-layer ::-webkit-scrollbar, div.m-playlist ::-webkit-scrollbar, div.m-schlist ::-webkit-scrollbar, div.u-arrlay-msg ::-webkit-scrollbar { + div.m-timelineslide .mask { /*看图器遮罩*/ + z-index: -1 !important; + } + div.m-card ::-webkit-scrollbar, div.m-layer ::-webkit-scrollbar, div.m-playlist ::-webkit-scrollbar, + div.m-schlist ::-webkit-scrollbar, div.u-arrlay-msg ::-webkit-scrollbar { /*弹弹滚动条*/ width: 4px; } - div.m-card ::-webkit-scrollbar-track, div.m-layer ::-webkit-scrollbar-track, div.m-playlist ::-webkit-scrollbar-track, div.m-schlist ::-webkit-scrollbar-track, div.u-arrlay-msg ::-webkit-scrollbar-track { + div.m-card ::-webkit-scrollbar-track, div.m-layer ::-webkit-scrollbar-track, div.m-playlist ::-webkit-scrollbar-track, + div.m-schlist ::-webkit-scrollbar-track, div.u-arrlay-msg ::-webkit-scrollbar-track { /*弹弹滚动条背景*/ background: 0 !important; } div.m-card .zbar, div.m-layer .zbar, div.m-playlist .listhd, div.u-arrlay-msg .sfrmhd, div.u-arrlay .msghd { /*弹弹标题栏*/ /*background: var(--rsw-accent-color);*/ - background: var(--rsw-trans-color); + background: var(--rsw-title-bg); + backdrop-filter: var(--rsw-title-blur); border-bottom: 1px solid var(--rsw-accent-color); - border-radius: 7px 7px 0 0; + border-radius: var(--rsw-window-bdr) var(--rsw-window-bdr) 0 0; box-shadow: inset 0 -5px 4px -5px var(--rsw-accent-color); + z-index: 3; } - div.m-card .zbar .zttl, div.m-layer .zbar .zttl, div.m-layer.no-title .zbar::before, div.u-arrlay-msg .sfrmhd h3, div.u-arrlay .msghd > .f-thide > span:nth-child(1) { + div.m-layer .zbar, div.m-card .zbar, div.u-arrlay-msg .sfrmhd, div.u-arrlay .msghd { + /*弹窗标题栏+消息标题栏*/ + cursor: default; + line-height: 19px; + padding: 14px 40px 14px 20px; + margin-bottom: 10px; + } + div.m-card .zbar .zttl, div.m-layer .zbar .zttl, div.m-layer.no-title .zbar::before, + div.u-arrlay-msg .sfrmhd h3, div.u-arrlay .msghd > .f-thide > span:nth-child(1) { /*弹弹标题文字*/ overflow: hidden; text-overflow: unset; @@ -93,14 +203,33 @@ async function refreshCss() { font-size: 17px; font-weight: 800; } - .u-icn-laycls svg, .u-arrlay .back svg, .m-chartlist .blacknote .cls svg { /*关闭/返回按钮svg*/ + .u-icn-laycls svg, .u-arrlay .back svg, .m-chartlist .blacknote .cls svg, + .m-timelineslide .cls svg, .m-timelineslide .pictool:hover svg { + /*关闭/返回按钮等svg*/ fill: var(--rsw-text-color) !important; - transition: .2s; + transition: .2s var(--rsw-timing-function-in); } - .u-icn-laycls:hover svg, .u-arrlay .back:hover svg, .m-chartlist .blacknote .cls:hover svg { /*关闭/返回按钮svg （鼠标移上）*/ + .u-icn-laycls:hover svg, .u-arrlay .back:hover svg, .m-chartlist .blacknote .cls:hover svg, + .m-timelineslide .cls:hover svg, .m-timelineslide .pictool:hover svg { + /*关闭/返回按钮等svg （鼠标移上）*/ fill: var(--rsw-accent-color) !important; + transition: .2s var(--rsw-timing-function-in); + } + div.m-card li, div.m-layer li, div.m-layer button, div.m-playlist li, div.m-schlist li, div.u-arrlay li, div.m-userlist .blk a { /*各种li/列表/按钮等*/ + transition: .2s var(--rsw-timing-function-in); } - div.m-playlist .s-fc2, div.u-arrlay-msg .s-fc2 { /*高亮…链接？*/ + body.refined-now-playing.mq-playing:not(.material-you-theme) .u-ibtn1, + body.refined-now-playing.mq-playing:not(.material-you-theme) .u-ibtn1:hover, + body.refined-now-playing.mq-playing.ignore-now-playing.material-you-theme .u-ibtn1, + body.refined-now-playing.mq-playing.ignore-now-playing.material-you-theme .u-ibtn1:hover { + /*高亮按钮(RNP)*/ + color: var(--rsw-bg-color); + background: var(--rsw-accent-color); + } + div.u-arrlay-chat .cmtform, div.m-card-sharecard li:last-child, div.m-layer-sharecard li:last-child { /*各种贴底东西*/ + border-radius: 0 0 var(--rsw-window-bdr) var(--rsw-window-bdr); + } + div.m-layer .s-fc2, div.m-card .s-fc2, div.m-playlist .s-fc2, div.u-arrlay-msg .s-fc2 { /*高亮…链接？*/ color: var(--rsw-accent-color) !important; font-weight: 400; } @@ -108,55 +237,64 @@ async function refreshCss() { overflow: hidden; text-overflow: unset; } - - @keyframes inLayer { - 0% { - transform: rotate3d(-1, -1, 0, 90deg) scale(80%); - box-shadow: none; - } + div.m-playlist .listbd, div.m-schlist .wrap:nth-of-type(2), div.m-addto .list { /*各种滚动列表*/ + overflow-y: overlay; /*让滚动条不占空间*/ } - div.m-card-sharecard li, div.m-layer-sharecard li, div.m-playlist li { /*各种li*/ - transition: .1s + div.m-schlist.f-dn, div.u-arrlay.u-arrlay-msg.f-dn:not(html[style*=MoTheme] *) { /*各种隐藏*/ + display: block !important; + animation: outTopMenus .4s forwards var(--rsw-timing-function-out) 1; } - div.m-layer, div.m-card, div.m-playlist:not(body.material-you-theme *, html[style*=MoTheme] *), div.m-schlist, div.m-userlist, div.m-skswitch, div.u-arrlay-msg { - /*大家好，我们是弹窗卡列大家族*/ - color: var(--rsw-text-color) !important; - background: var(--rsw-bg-color-trans) padding-box; - backdrop-filter: var(--rsw-window-blur); + + /*这背景效果有动画bug，防它闪现给人不适感*/ + + /*第一版方案 + div.m-layer:not(body.material-you-theme *) { /*叛变者 border: 1px var(--rsw-window-bd); + border-radius: var(--rsw-window-bdr); + background: var(--rsw-bg-color-trans) var(--rsw-bg-clip); + backdrop-filter: var(--rsw-window-blur); box-shadow: 0 6px 24px 0 var(--rsw-window-shadow-color); - border-radius: 8px; - animation: inLayer .3s .1s backwards 1; + }*/ + /*第二版方案： + @keyframes inLayer-bg { + 0% { + backdrop-filter: none; + } } - html[style*=MoTheme] div.m-layer, html[style*=MoTheme] div.m-card, html[style*=MoTheme] div.m-playlist { - /*MoTheme适配*/ - box-shadow: 0 6px 24px 0 var(--rsw-window-shadow-color); - animation: inLayer .3s .1s backwards 1; + div.m-layer:not(body.material-you-theme *)::after { /*弹窗的背景实现 + animation: inLayer-bg .5s .4s 1; } - div.m-playlist:not(body.material-you-theme *), div.m-schlist, div.m-userlist, div.m-skswitch, div.u-arrlay-msg { /*侧边弹出家族*/ - box-shadow: 0 1px 12px 0 var(--rsw-window-shadow-color); + body.refined-now-playing.mq-playing div.m-layer:not(body.material-you-theme *)::after { /*RNP下 + animation: none; /*……给你闪吧 } - - div.m-layer .zbar, div.m-card .zbar, div.u-arrlay-msg .sfrmhd, div.u-arrlay .msghd { /*弹窗标题栏+消息标题栏*/ - cursor: default; - line-height: 19px; - padding: 14px 40px 14px 20px; - margin-bottom: 10px; + */ + /*第三版方案*/ /*效果完美！*/ + @keyframes inLayer-bg { + 0% { + backdrop-filter: var(--rsw-window-blur); + } } - div.m-card .zbar { /*一种另类弹窗的旧标题*/ - display: block; - margin-bottom: 0; + @keyframes inLayer-bgPseudoE { + 0% { + backdrop-filter: none; + } } - div.m-card .zcls { /*上的关闭按钮*/ - display: inline-block; - position: absolute; - z-index: 5; - right: 12px; - top: 14px; - cursor: pointer; + /*我去你的*/ + #music-163-com div.m-layer:not(body.material-you-theme *) { + border: 1px solid #0000 !important; + border-radius: var(--rsw-window-bdr); + background: none !important; + backdrop-filter: none; + box-shadow: 0 6px 24px 0 var(--rsw-window-shadow-color); + overflow: visible; /*让伪元素可以超出*/ + animation: inLayer .4s var(--rsw-timing-function-in) 1, inLayer-bg 0s .6s backwards 1; } - div.m-card .m-newlayer .head { /*另类弹窗的新标题*/ - display: none; + div.m-layer:not(body.material-you-theme *)::after { + animation: inLayer-bgPseudoE 0s .6s backwards 1; + } + + div.m-layer .zbar { /*弹窗标题栏*/ + backdrop-filter: none; } div.m-layer.no-title .zbar { /*没标题的弹窗标题栏*/ height: 20px; @@ -185,11 +323,6 @@ async function refreshCss() { div.m-layer .u-cklist input[type="checkbox"]:checked + span svg { /*弹窗内多选框svg*/ fill: var(--rsw-bg-color); } - body.refined-now-playing.mq-playing:not(.material-you-theme) div.m-layer .u-ibtn1, body.refined-now-playing.mq-playing:not(.material-you-theme) div.m-layer .u-ibtn1:hover, body.refined-now-playing.mq-playing.ignore-now-playing.material-you-theme div.m-layer .u-ibtn1, body.refined-now-playing.mq-playing.ignore-now-playing.material-you-theme div.m-layer .u-ibtn1:hover { - /*弹窗内高亮按钮(RNP)*/ - color: var(--rsw-bg-color); - background: var(--rsw-accent-color); - } div.m-layer.m-layer-trial .zbar { /*弹会员标题栏*/ padding: 19px 20px; margin: 0; @@ -206,16 +339,34 @@ async function refreshCss() { border: 3px solid #0000; backdrop-filter: blur(4px); } + div.m-layer.m-listen-record .zbar { /*一起听本次记录 标题栏*/ + height: 10px; + background: #0000; + backdrop-filter: none; + border: 0; + box-shadow: none; + } - div.m-card-sharecard, div.m-layer-sharecard { /*弹卡(分享)+弹窗(分享)*/ - background: var(--rsw-bg-color-trans) !important; - padding: 0; + div.m-card .zbar { /*一种另类弹窗的旧标题*/ + display: block; + margin-bottom: 0; } - div.m-card-sharecard .m-card-sharecard, div.m-layer-sharecard .m-layer-sharecard { /*我勒个套娃*/ - background: #0000 !important; + div.m-card .zcls { /*上的关闭按钮*/ + display: inline-block; + position: absolute; + z-index: 5; + right: 12px; + top: 14px; + cursor: pointer; } - div.m-card-sharecard li:last-child, div.m-layer-sharecard li:last-child { /*分享选项（最后一个）*/ - border-radius: 0 0 8px 8px; + div.m-card .m-newlayer .head { /*另类弹窗的新标题*/ + display: none; + } + + div.m-card-sharecard, div.m-layer-sharecard, + div.m-card-sharecard .m-card-sharecard, div.m-layer-sharecard .m-layer-sharecard { /*弹卡(分享)+弹窗(分享)*/ /*我勒个套娃*/ + background: #0000 !important; + padding: 0; } div.m-card-sharecard li:hover, div.m-layer-sharecard li:hover { /*分享选项（鼠标移上）*/ background: var(--rsw-trans-color); @@ -233,13 +384,25 @@ async function refreshCss() { background-color: #0000; } + @keyframes inListenWith { + 0% { + margin-top: 1000px; + } + 0%, 25% { + box-shadow: none; + } + } div.m-card-invite { /*弹卡(一起听)*/ width: 330px; max-height: 430px; - transform: translateX(-50px); + margin-top: -20px; + margin-left: -50px; + animation: + transGradient 0s .1s backwards 1, /*不影响JS定位*/ + inListenWith .4s .1s var(--rsw-timing-function-in) 1; } - div.m-card-invite .zbar { /*一起听标题栏*/ - padding: 16px 20px; + body.rsw-relive .m-card-invite { /*一起听（ReLive）*/ + margin-left: 0; } div.m-card-invite .zbar .zttl { /*一起听标题文字*/ line-height: 19px; @@ -251,12 +414,17 @@ async function refreshCss() { height: auto; max-height: 321px; } + div.m-card-invite .friend-list .itm .btn-invite, div.m-card-invite .friend-list .itm .info-invite { /*上次一起听/邀请按钮*/ + animation: transGradient .2s 1; + } div.m-card-invite .footer { /*一起听底栏嵌进标题*/ - transform: translate(90px, -347px) scale(.9); + transform: translate(84px, -345px) scale(.9); border: 0; } div.m-card-invite .footer .btn { /*一起听底栏按钮*/ - width: 50px; + width: 43px; + padding: 0; + margin: 0 3px; } div.m-card-invite .footer .btn .txt { /*一起听底栏文字*/ display: none; @@ -272,13 +440,13 @@ async function refreshCss() { } } div.m-playlist.z-show { /*弹正播列*/ - animation: inPlaylist .4s .1s backwards cubic-bezier(.34, .68, 0, 1) 1 !important; - transition: .5s cubic-bezier(.34, .68, 0, 1); + animation: inPlaylist .4s .1s backwards var(--rsw-timing-function-in) 1 !important; + transition: .5s var(--rsw-timing-function-in); /*MY悬浮底栏贴边动画*/ } div.m-playlist.z-show:not(body.material-you-theme *) { /*弹正播列(非MY)*/ top: max(10%, 75px); - right: calc(6px + var(--extra-pos-margin, 0px)); - bottom: calc(var(--bottombar-height, 72px) + var(--bottombar-elevation, 0px) + 6px); + right: calc(10px + var(--extra-pos-margin, 0px)); + bottom: calc(var(--bottombar-height, 72px) + var(--bottombar-elevation, 0px) + 10px); } body.material-you-theme div.m-playlist.z-show { /*弹正播列(MY)*/ border: 1px var(--rsw-window-bd); @@ -288,36 +456,47 @@ async function refreshCss() { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - body.material-you-theme .m-playlist .listhd { /*弹正播列标题(MY)*/ - border-radius: 16px 0 0 0; + body.material-you-theme div.m-playlist .listhd { /*弹正播列标题（MY）*/ + background: #0000; + } + body.material-you-theme .m-playlist .listhd, body.material-you-theme .m-playlist .listbd { /*标题 及 其列(MY)*/ + border-radius: var(--rsw-window-bdr) 0 0 0; } - body.material-you-theme.refined-now-playing.mq-playing .m-playlist .listhd { /*弹卡正播列标题(MY+RNP)*/ - border-radius: 16px 16px 0 0; + body.material-you-theme.refined-now-playing.mq-playing .m-playlist .listhd { /*标题(MY+RNP)*/ + border-radius: var(--rsw-window-bdr) var(--rsw-window-bdr) 0 0; } - div.m-playlist .listhd h2 { /*弹正播列标题文字*/ + div.m-playlist .listhd h2 { /*标题文字*/ line-height: 8px; } - div.m-playlist .listsub { /*弹正播列控制栏*/ + div.m-playlist .listsub { /*控制栏*/ top: 17px; margin-left: 105px; border: 0; + z-index: 16; } - div.m-playlist .listsub .f-fl { /*弹正播列歌曲总数/心动模式*/ + div.m-playlist .listsub .f-fl { /*歌曲总数/心动模式*/ transform: translateY(4px); } - div.m-playlist .listbd { /*弹正播列的列*/ - top: 54px; - border-radius: 0 0 8px 8px; - overflow-y: overlay; + div.m-playlist .listbd { /*弹正播列的列（上方还有）*/ + top: 0; + margin-top: 3px; + padding-top: 51px; + border-radius: var(--rsw-window-bdr); } - body.material-you-theme .m-playlist .listbd, body.rsw-relive .m-playlist .listbd { /*弹正播列的列(MY/ReLive)*/ - border-radius: 0; + body.material-you-theme .m-playlist .listbd { /*弹正播列的列(MY)*/ + top: 54px; + margin-top: 0; + padding-top: 0; } body.material-you-theme.floating-bottombar .m-playlist .listbd { /*弹正播列的列(MY浮动底栏)*/ border-radius: 0 0 12px 12px; } body.material-you-theme.refined-now-playing.mq-playing:not(.ignore-now-playing) .m-playlist .listbd { /*弹正播列的列(MY+RNP)*/ - border-radius: 0 0 16px 16px; + border-radius: 0 0 var(--rsw-window-bdr) var(--rsw-window-bdr); + } + body.rsw-relive .m-playlist .listbd { /*弹正播列的列(ReLive)*/ + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } @keyframes inTopMenus { @@ -347,31 +526,26 @@ async function refreshCss() { } } - div.m-schlist.f-dn, div.u-arrlay.u-arrlay-msg.f-dn:not(html[style*=MoTheme] *) { /*各种隐藏*/ - display: block !important; - animation: outTopMenus .4s forwards cubic-bezier(1, 0, .68, .34) 1; - } - div.m-schlist { /*搜索建议列表*/ bottom: max(20%, calc(var(--bottombar-height, 72px) + var(--bottombar-elevation, 0px) + 15px)); - animation: inTopMenus .4s cubic-bezier(.34, .68, 0, 1) 1; - transition: width .5s cubic-bezier(.34, .68, 0, 1), height .3s cubic-bezier(.34, .68, 0, 1) !important; + animation: inTopMenus .4s var(--rsw-timing-function-in) 1; + transition: width .5s var(--rsw-timing-function-in), height .3s var(--rsw-timing-function-in) !important; } div.m-schlist .side:nth-of-type(2) { /*不是…咋想的*/ border: 0; } - div.m-schlist .wrap:nth-of-type(2) { /*还有套娃？*/ + div.m-schlist .wrap:nth-of-type(2) { /*修bug了属于是*/ top: 0; bottom: 0; - overflow: clip overlay; + overflow-x: clip; } - div.m-schlist .wrap.j-flag { - transition: opacity .3s cubic-bezier(.34, .68, 0, 1); + div.m-schlist .wrap.j-flag { /*切换动画*/ + transition: opacity .3s var(--rsw-timing-function-in); } div.m-schlist .side.history { /*搜索历史*/ margin-top: 0; } - div.m-schlist .hotlst li:nth-child(1) > a:before, .m-schlist .hotlst li:nth-child(2) > a:before, .m-schlist .hotlst li:nth-child(3) > a:before { /*热搜的123*/ + div.m-schlist .hotlst li:nth-child(1) > a::before, .m-schlist .hotlst li:nth-child(2) > a::before, .m-schlist .hotlst li:nth-child(3) > a::before { /*热搜的123*/ color: var(--rsw-accent-color); } body.refined-now-playing.mq-playing .g-hd .m-sch { /*RNP下搜索列动画bug修复*/ @@ -384,7 +558,7 @@ async function refreshCss() { div.m-userlist { /*头像菜单*/ top: 57px; - animation: inShitMenus .4s .1s backwards cubic-bezier(.34, .68, 0, 1) 1; + animation: inShitMenus .4s .1s backwards var(--rsw-timing-function-in) 1; } div.m-userlist .exit { /*退出登录按钮优化*/ border: 0; @@ -395,7 +569,7 @@ async function refreshCss() { top: 40px; width: 330px; height: 274px; - animation: inShitMenus .4s cubic-bezier(.34, .68, 0, 1) 1; + animation: inShitMenus .4s var(--rsw-timing-function-in) 1; } @keyframes inMsg-MoTheme { @@ -414,58 +588,156 @@ async function refreshCss() { box-shadow: none; } } + @keyframes inMsg-Msghd { + 0% { + height: 20px; + } + } + @keyframes inMsg-Title { + 0% { + padding-left: 20px; + } + } @keyframes inChat-Msghd { 0% { + height: 46px; padding-left: 20px; } } @keyframes inChat-MsghdBack { 0% { - left: -27px; + left: -50px; } } @keyframes inChat-MsghdSet { 0% { - right: -27px; + right: -50px; + } + } + @keyframes inChat-SendForm { + 0% { + height: 0; + padding: 0; + } + } + @keyframes inChat-BlackNote { + 0% { + transform: translateY(120px); } } + div.u-arrlay.u-arrlay-msg { /*消息*/ top: 66px; right: calc(15px + var(--extra-pos-margin, 0px)); bottom: 15%; padding: 0; - animation: inTopMenus .4s cubic-bezier(.34, .68, 0, 1) 1; + border: 0; + animation: inTopMenus .4s var(--rsw-timing-function-in) 1; } html[style*=MoTheme] div.u-arrlay.u-arrlay-msg { /*消息(MoTheme)*/ - animation: inMsg-MoTheme .4s cubic-bezier(.34, .68, 0, 1) 1; + animation: inMsg-MoTheme .4s var(--rsw-timing-function-in) 1; } html[style*=MoTheme] div.u-arrlay.u-arrlay-msg.f-dn { /*消息(隐藏)(MoTheme)*/ display: block !important; - animation: outMsg-MoTheme .4s forwards cubic-bezier(1, 0, .68, .34) 1; + animation: outMsg-MoTheme .4s forwards var(--rsw-timing-function-out) 1; } + div.u-arrlay-msg .sfrmhd, div.u-arrlay .msghd { /*消息的标题*/ - height: 20px; + } + div.u-arrlay-msg .sfrmhd, div.u-arrlay-msg .u-tabbtn { /*消息一级标题and选项*/ + position: relative; + z-index: 15; + } + div.u-arrlay-msg .sfrmhd { /*消息一级标题*/ + height: 46px; + animation: inMsg-Msghd .3s var(--rsw-timing-function-in) 1; } div.u-arrlay-msg .sfrmhd h3 { /*消息一级标题文字*/ margin: 0; + animation: inMsg-Title .2s var(--rsw-timing-function-in) 1; } div.u-arrlay-msg .sfrmhd a { /*消息标题一键已读*/ top: 17px; + animation: transGradient .2s 1; + transition: .2s; } - .u-tabbtn .btn.z-sel, .u-tabbtn .btn.z-sel:hover { /*已选中的选项卡*/ - color: var(--rsw-bg-color); - background: var(--md-accent-color, var(--rsw-accent-color)); + + div.u-arrlay-msg .u-tabbtn { /*选项*/ + width: 344px; + border: none; + background: none; + transform: translateY(-40px); + animation: transGradient .3s 1; + } + div.u-arrlay-msg .u-tabbtn .btn { /*选项卡*/ + color: var(--rsw-text-color); + height: 30px; + line-height: 24px; + margin: 0 3px; + border-radius: 0; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + transition: .1s; + } + div.u-arrlay-msg .u-tabbtn .btn:hover { /*选项卡（鼠标移上）*/ + color: var(--rsw-accent-color); + line-height: 29px; + background: var(--rsw-trans-color); + } + div.u-arrlay-msg .u-tabbtn .btn.z-sel { /*已选中的选项卡*/ + color: var(--layer-background, var(--rsw-bg-color)); + height: 30px; + line-height: 31px; + color: var(--rsw-accent-color); + background: #0000; + border: 1px solid var(--rsw-accent-color); + box-shadow: + 0 0 4px 0 var(--rsw-accent-color), /*其他*/ + inset 0 -6px 5px -5px var(--rsw-accent-color); /*下*/ + animation: navBarSelected .3s 1; + } + div.u-arrlay-msg .u-tabbtn .btn.z-sel:hover { + box-shadow: + 0 0 6px 0 var(--rsw-accent-color), /*其他*/ + inset 0 -8px 4px -5px var(--rsw-accent-color); /*下*/ + } + div.u-arrlay-msg .u-tabbtn .btn.z-sel:active { + box-shadow: inset 0 -8px 6px -5px var(--rsw-accent-color); /*下*/ + } + + div.u-arrlay-msg .u-load { /*载入中…*/ + margin-top: 105px; + } + div.u-arrlay-msg .m-msglist, .u-arrlay-msg .m-cmtlist, + div.u-arrlay-msg .m-atlist { /*一级消息列表*/ + top: 0; + bottom: 0; + margin-top: 3px; + padding-top: 72px; + border-radius: var(--rsw-window-bdr); + } + body.material-you-theme .m-msglist, body.material-you-theme .m-cmtlist, + body.material-you-theme .m-atlist { /*一级消息列表(MY)*/ + top: 75px; + margin-top: 0; + padding-top: 0; } + div.m-msglist li, div.m-cmtlist li, div.m-atlist li { /*一级消息列表项*/ + animation: transGradient .2s 1; + } + div.u-arrlay .msghd { /*消息二级标题*/ + height: 20px; padding: 14px 0 14px 40px; text-align: left; - animation: inChat-Msghd .3s .1s backwards 1; + animation: inChat-Msghd .3s var(--rsw-timing-function-in) 1; + z-index: 15; } div.u-arrlay .back { /*返回按钮*/ top: 14px; left: 17px; padding: 0; - animation: inChat-MsghdBack .3s 1; + animation: inChat-MsghdBack .2s var(--rsw-timing-function-in) 1; } div.u-arrlay .msghd .set { /*设置(主要是小秘书)*/ position: absolute; @@ -473,7 +745,7 @@ async function refreshCss() { right: 16px; margin: 0; padding: 0; - animation: inChat-MsghdSet .3s .1s backwards 1; + animation: inChat-MsghdSet .3s var(--rsw-timing-function-in) 1; } body.material-you-theme div.u-arrlay .msghd .set { /*设置(MY)*/ top: 6px; @@ -486,8 +758,20 @@ async function refreshCss() { height: 24px; } div.u-arrlay-chat .m-chartlist { /*二级消息列表*/ + top: 0; + bottom: 0; + margin: 3px 0; + padding: 46px 0 109px; + animation: transGradient .2s 1; + } + body.material-you-theme div.u-arrlay-chat .m-chartlist { /*二级消息列表（MY）*/ + bottom: 112px; top: 49px; - margin-bottom: 4px; + margin: 0; + padding: 0; + } + div.m-chartlist li.m-dlist-msg { /*消息块*/ + animation: transGradient .2s 1; } div.m-chartlist li.m-dlist-msg .charttxt, div.m-chartlist li.m-dlist-msg .chartpic { /*主要给自己发的消息去蓝*/ background: #8881; @@ -498,11 +782,26 @@ async function refreshCss() { .m-dlist .src-hvr:hover, .m-dlist .card:hover, .m-dlist .src:hover, .m-chartlist .me .src:hover { /*链接卡片（鼠标移上）*/ background: #8883; } + div.u-arrlay-chat .cmtform { /*底部消息表单*/ + bottom: 0; + height: 97px; + padding: 1px 15px 15px; + overflow: hidden; + background: var(--rsw-title-bg); + backdrop-filter: var(--rsw-title-blur); + animation: + transGradient 0s .2s backwards 1, /*不影响JS定位+防止加载未完毕闪现*/ + inChat-SendForm .4s .2s var(--rsw-timing-function-in2) 1; + z-index: 15; + } div.m-chartlist .blacknote { /*陌生人私信关闭提示*/ - background: #0000; + margin-top: -53px; + background: var(--rsw-title-bg); + animation: + transGradient 0s .1s backwards 1, /*不影响JS定位*/ + inChat-BlackNote .4s .1s var(--rsw-timing-function-in) 1; } - /***该内容已被屏蔽***/ /*消息输入框文本超出BUG修复*/ div.u-arrlay-msg textarea.edttxt { height: 57px !important; @@ -510,6 +809,15 @@ async function refreshCss() { div.m-editor.m-editor-chat .insert { margin-top: 18px !important; } + + div.m-timelineslide .tool { /*看图器工具栏*/ + opacity: 1; + background: #0008; + backdrop-filter: blur(6px); + } + div.m-timelineslide .cls, div.m-timelineslide .pictool, div.m-timelineslide .pictool:hover { /*看图器关闭/上下张*/ + opacity: 1; + } `; if(!JSON.parse(localStorage.getItem("isRswEnable"))) { console.log("RswLog: Disabled"); @@ -529,23 +837,34 @@ function loop() { if(!JSON.parse(localStorage.getItem("isRswEnable"))) { return; } - function s(s) { - return getComputedStyle(document.body).getPropertyValue(s); - } - let accentColor = s("--themeC1"); - let accentTextColor = s("--md-accent-color-secondary"); - if (accentTextColor == "") { - accentTextColor = s("--ncm-text"); + let dbcl = document.body.classList; + let isReLive + function s(e, s) { + return getComputedStyle(q(e)).getPropertyValue(s); } - let bgColor = s("--md-accent-color-bg-rgb"); - if (bgColor == "") { - bgColor = s("--ncm-bg-rgb"); - if (!q("body.ncm-light-theme")) { - bgColor = s("--ncm-fg-rgb"); + let accentColor = s("body", "--themeC1"); + let accentTextColor = s("body", "color"); + let bgColor = s("body", "background-color"); + let bgColorTrans = bgColor.slice(0, bgColor.length - 1) + ", .7)"; + /*if (/#/.test(bgColor)) { + if (bgColor.length == 4) { /*3位转6位 + let n = "#"; + for (i = 1; i < 4; i++) { + n += bgColor.slice(i, i + 1).concat(bgColor.slice(i, i + 1)); + } + bgColor = n; } - } - let bgColorTrans = "rgba(" + bgColor + ", .7)"; - bgColor = "rgb(" + bgColor + ")"; + bgColorTrans = bgColor + "B2"; + }*/ + + try { /*是否ReLive主题*/ + if (/relive-theme/.test(q("#StyleSnippetStyles").outerHTML)) { + isReLive = true; + bgColor = s("#portal_root", "background-image"); /*.match(/linear-gradient\((?:[^()]*|\([^)]*\))*\)/); /*匹配其中的linear-gradient*/ + bgColorTrans = s("body", "--layer-background"); + } + } catch {} + let rswColors = ({ accentColor, accentTextColor, @@ -555,6 +874,11 @@ function loop() { rswColors = JSON.stringify(rswColors) let rswCaches = localStorage.getItem("RswColorCaches"); if (rswCaches != rswColors) { + if (isReLive) { + dbcl.add("rsw-relive"); + } else { + dbcl.remove("rsw-relive"); + } localStorage.setItem("RswColorCaches", rswColors); refreshCss(); } @@ -576,7 +900,7 @@ function loop() { new MutationObserver((list) => { list.forEach((item) => { - if (item.target == "[object HTMLStyleElement]") { + if (item.target instanceof HTMLStyleElement) { cb(); } }) @@ -619,17 +943,13 @@ plugin.onConfig( () => { crCfgPage.innerHTML = `

RevisedSecondaryWindows


-

v0.1.3 by

+

v0.3.0 by