Skip to content

网易云音乐扁平风格 by wtonychen

Imported from https://github.com/wTonyChen/flatnmusic/raw/master/flatnmusic.user.css

Mirrored from https://raw.githubusercontent.com/wtonychen/flatnmusic/master/flatnmusic.user.css

Screenshot of 网易云音乐扁平风格

Details

Authorwtonychen

LicenseGPL-3.0-or-later

Categorymusic.163.com

Created

Updated

Size160 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

网易云音乐扁平风格

一个用于网易云音乐网站的样式表。

兼容 Chrome 95+ | 兼容 Edge 95+ | 兼容 Opera 80+ | Firefox 93+ 有限支持

全部下载源

UserCSS 样式表普通样式表辅助脚本
[GitHub](https://wtonychen.github.io/flatnmusic/flatnmusic.user.css) [GitHub](https://wtonychen.github.io/flatnmusic/flatnmusic.min.css) [GitHub](https://wtonychen.github.io/flatnmusic/flatnmusic.user.js)
[Greasy Fork](https://greasyfork.org/scripts/406821) [Userstyles.org 0.6.1 版本](https://userstyles.org/styles/186848) [Greasy Fork](https://greasyfork.org/scripts/369688)
[UserStyles.world](https://userstyles.world/style/824) [Userstyles.org 0.3.81 版本](https://userstyles.org/styles/155372) [OpenUserJS](https://openuserjs.org/scripts/wTonyChen/%E9%80%82%E7%94%A8%E4%BA%8E%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E6%89%81%E5%B9%B3%E9%A3%8E%E6%A0%BC%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%9A%84%E8%BE%85%E5%8A%A9%E7%94%A8%E6%88%B7%E8%84%9A%E6%9C%AC)

没有 Stylus 扩展? 请见备注2

不了解如何安装?前往了解如何安装用户脚本?

介绍

为网易云音乐备注1带来矢量图标 + 现代化扁平界面

在高分辨率屏幕(大于 100% 的显示缩放)上有较好体验

  • 可自定义顶栏风格。
  • 支持自定义主题色,动画效果开关、隐藏主页客户端下载选项以及置顶顶栏。
  • 多种字体可供选择。
  • 如需实现更多功能,可安装辅助用户脚本提升体验。
遇到问题?请[在 GitHub 开启新的 Issue](https://github.com/wTonyChen/flatnmusic/issues/new)进行反馈。
也可以在网易云音乐[向我私聊](http://music.163.com/user/home?nickname=wTonyChen)进行反馈。

截图

首页截图

首页截图(背景色顶栏)

歌单页截图

电台页截图

用户页截图

歌手页截图

榜单页截图

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name:en Flat-Style Netease Music 网易云音乐扁平风格
@description:en A stylesheet for Netease Music website. 一个用于网易云音乐网站的样式表。
@name:zh 网易云音乐扁平风格
@description:zh 一个用于网易云音乐网站的样式表。
@name 网易云音乐扁平风格
@description 一个用于网易云音乐网站的样式表。
@namespace wTonyChen.flatnmusic
@version 0.9.20
@author wTonyChen
@copyright 2022 wTonyChen (https://github.com/wTonyChen)
@homepageURL https://wtonychen.github.io/flatnmusic/
@supportURL https://github.com/wTonyChen/flatnmusic/issues
@compatible chrome 101+
@compatible edge 101+
@compatible opera 87+
@compatible firefox 100+ 有限支持
@license GPL-3.0-or-later
@preprocessor uso
@var select font-1st "\u9996\u9009\u5b57\u4f53"{"Segoe UI":"local('Segoe UI Variable Display'),local('Segoe UI Variable'),local('Segoe UI'),local('Segoe UI'),local('Segoe Pro'),local('Segoe WP'),","Arial":"local('Arial'),","Avenir Next":"local('Avenir Next'),local('Avenir Next LT Pro'),local('Avenir Next Pro'),","DIN":"local('Bahnschrift'),local('DIN Pro'),local('DIN Schrift LT'),local('DIN Next LT Pro'),local('DIN Next'),local('DIN Next LT'),local('DIN'),local('Barlow'),","Calibri":"local('Calibri'),","Century Gothic":"local('Century Gothic'),","Comic Sans":"local('Comic Sans MS'),local('Comic Sans'),","Corbel":"local('Corbel'),","Lucida Sans":"local('Lucida Sans'),","Noto Sans":"local('Noto Sans'),local('Noto Sans Display'),","Product Sans":"local('Google Sans'),local('Product Sans'),local('Google Sans Display'),local('Google Sans Text'),local('HarmonyOS Sans'),","Roboto":"local('Roboto'),","Tahoma":"local('Tahoma'),","Trebuchet":"local('Trebuchet MS'),local('Trebuchet'),","Tw Cen MT":"local('Tw Cen MT'),","Ubuntu":"local('Ubuntu'),","Verdana":"local('Verdana'),","Cambria":"local('Cambria'),","Century":"local('Century'),","Times New Roman":"local('Times New Roman'),"}
@var select font-2nd "\u5907\u9009\u5b57\u4f53"{"\u5fae\u8f6f\u96c5\u9ed1":"local('Microsoft YaHei UI'),local('Microsoft YaHei'),","\u5fae\u8f6f\u6b63\u9ed1":"local('Microsoft JhengHei UI'),local('Microsoft JhengHei'),","\u7b49\u7ebf":"local('FZDengXian'),local('DengXian'),","\u9ed1\u4f53":"local('Heiti SC'),local('Heiti TC'),local('SimHei'),","\u5706\u4f53":"local('Yuanti SC'),local('Yuanti TC'),local('YouYuan'),","\u534e\u6587\u4eff\u5b8b":"local('STFangSong'),","\u534e\u6587\u6977\u4f53":"local('STKaiTi'),","\u534e\u6587\u96b6\u4e66":"local('STLiTi'),","\u534e\u6587\u5b8b\u4f53":"local('STSong'),","\u534e\u6587\u7ec6\u9ed1":"local('STXiHei'),","\u534e\u6587\u65b0\u9b4f":"local('STXinWei'),","\u534e\u6587\u4e2d\u5b8b":"local('STZhongSong'),","Noto Sans CJK":"local('Noto Sans CJK SC VF'),local('Source Han Sans SC VF'),local('Noto Sans CJK TC VF'),local('Source Han Sans TC VF'),local('Noto Sans CJK SC'),local('Source Han Sans SC'),local('Noto Sans CJK TC'),local('Source Han Sans TC'),local('HarmonyOS Sans SC'),local('HarmonyOS Sans TC'),","PingFang":"local('PingFang SC'),local('PingFang TC'),local('PingFang HK'),local('Hiragino Sans GB'),local('Hiragino Sans CNS'),local('Hiragino Sans'),"}
@var range letter-spacing "\u5b57\u95f4\u8ddd"[0,-20,20,1]
@var range word-spacing "\u8bcd\u95f4\u8ddd (\u7a7a\u683c\u5bbd\u5ea6)"[0,-20,20,1]
@var color color "\u4e3b\u9898\u8272" #f00
@var select bg-color "\u80cc\u666f\u8272"{"\u9ed8\u8ba4":"var(--cp-b0)","\u81ea\u5b9a\u4e49":"var(--a-custom-bg)"}
@var color custom-bg "\u81ea\u5b9a\u4e49\u80cc\u666f\u8272" #fff
@var select blur-effect "\u6a21\u7cca\u6548\u679c (\u9700\u6d4f\u89c8\u5668\u652f\u6301)"{"\u7981\u7528":" ","\u542f\u7528":"@supports(backdrop-filter:none){.u-cover .bottom,.m-dlist .src-video .ply,.m-playbar .bg,div.m-mask,div.m-layer~[class*=auto-],.u-cover .ci,.m-mvlist .tr,.m-mvlist .bl,.n-artist .btn-rz,.n-artist .btnfav,.m-vipcashier-modal-overlay,body:not(.wk-playlist-applied) .m-playbar .list,.m-ctvideo .controls::before,.m-playbar .tip,.m-vol .vbg{backdrop-filter:blur(30px) saturate(2) contrast(.8)}.m-playbar .list{opacity:1}.m-playbar .bg,.m-playbar .listhd,.m-playbar .listbd,.m-playbar .list::after{background:var(--cp-x8)}div.m-mask{background:var(--cp-x1)}.m-dlist .src-video .ply{border-radius:99vh;opacity:1}.m-ctvideo.z-fullscreen,div.m-layer{animation-name:window-in-alt}div.m-layer.hidden{animation-name:window-in-alt-r;animation-timing-function:var(--gb-al);animation-duration:.15s}.m-sysmsg{animation:window-in-alt .3s var(--gb-ad) backwards,window-in-alt-r .15s var(--gb-al) 1s forwards}html[wk-style-assist] .n-artist .btm{backdrop-filter:blur(30px);padding:10px 20px 0 20px;display:inline-block;background:var(--cp-w5);border-radius:99vh;filter:none}html[wk-style-assist] .n-artist .salias,html[wk-style-assist] .n-artist .sname-max{max-width:initial}.u-cover-alb1 .icon-play,.u-cover-alb2 .icon-play,.u-cover-alb3 .icon-play,.m-layer-termconfirm{backdrop-filter:blur(30px) saturate(2) contrast(.8);background:none}body.wk-playlist-showing #g-topbar,body.wk-playlist-showing #g_iframe{filter:blur(30px) contrast(.8)}body.wk-playlist-applied .m-playbar .list{backdrop-filter:saturate(2)}.m-playbar .tip,.m-vol .vbg{background:var(--cp-a2)}.m-playbar .tip{border-color:var(--cp-w3);box-shadow:0 0 10px var(--cp-a2)}.m-pbar .btn i{background:var(--v-a)}}"}
@var select app-download "\u9996\u9875\u5ba2\u6237\u7aef\u4e0b\u8f7d"{"\u53ef\u89c1":" ","\u9690\u85cf":".n-ban .download,.m-multi{display:none !important}.n-ban .ban img{margin:0 auto !important}.n-ban .ban .btnl{left:10px !important}.n-ban .ban .btnr{right:10px !important}.n-ban .dots{width:100% !important}"}
@var select banner-bg "\u9996\u9875\u6a2a\u5e45\u80cc\u666f"{"\u9ed8\u8ba4":" ","\u65e0":"div#index-banner{background:var(--cp-00) !important}.n-ban .dots .pg{color:var(--cp-a0)}"}
@var select fixed-topbar "\u9876\u680f\u6eda\u52a8\u72b6\u6001"{"\u56fa\u5b9a\u4e8e\u9876\u90e8":".g-topbar{top:0 !important}","\u8ddf\u968f\u9875\u9762\u6eda\u52a8":" "}
@var select navbar-dont-cover-scrollbar "\u9876\u680f\u4e0d\u906e\u6321\u6eda\u52a8\u6761"{"\u7981\u7528":" ","\u542f\u7528":".g-topbar{min-width:initial}"}
@var select topbar-bg-style "\u9876\u680f\u80cc\u666f\u989c\u8272"{"\u4e3b\u9898\u8272":" ","\u754c\u9762\u80cc\u666f\u8272":"body{background:var(--cp-b0)}.m-top{background:var(--cp-b0)}.m-nav a{color:var(--cp-d7)}.m-nav a:hover{color:var(--cp-c3)}.m-nav a.z-slt{color:var(--gc-aa)}.m-srch .parent input{box-shadow:inset 0 32px 0 0 var(--cp-a1)}.m-srch .parent input:hover{box-shadow:inset 0 32px 0 0 var(--cp-a2)}.m-srch .parent input:focus{box-shadow:inset 0 32px 0 0 var(--cp-b0)}.m-topvd{border-color:var(--cp-d7);color:var(--cp-d7)}.m-topvd:hover{border-color:var(--cp-c3);color:var(--cp-c3)}.m-tlist{border-color:var(--cp-d3);background:var(--cp-d1)}.m-tlist a:hover{background:var(--cp-d2)}.m-tlist a:active{background:var(--cp-d3)}.m-tlist a,.m-tlist a:hover,.m-tophead .link,.m-tophead .link:hover,.m-tophead:hover .link{color:var(--cp-a0)}.m-tlist .icn-verify::before{color:var(--cp-d1)}"}
@var select topbar-nav-style "\u9876\u680f\u5bfc\u822a\u98ce\u683c"{"\u5706\u89d2":" ","\u76f4\u89d2":".m-nav a.z-slt{border-radius:0}","\u836f\u4e38":".m-nav a,.m-nav a.z-slt{transform:scale(.8);border-radius:99vw}.m-nav a:hover,.m-nav a.z-slt{transform:scale(.85)}.m-nav a:active{transform:scale(.9)}"}
@var select no-artist-alias "\u6b4c\u624b\u9875\u9690\u85cf\u522b\u540d"{"\u7981\u7528":" ","\u542f\u7528":".n-artist .salias,.n-singer .tit span{display:none}"}
@var select lyric-alignment "\u5e95\u680f\u64ad\u653e\u5217\u8868\u6b4c\u8bcd\u5bf9\u9f50"{"\u5c45\u4e2d":" ","\u9760\u5de6":".m-playbar .listlyric p{text-align:left;transform-origin:left;margin:0 auto 0 10px}.m-playbar .listlyric p:first-child{transform-origin:left bottom}","\u9760\u53f3":".m-playbar .listlyric p{text-align:right;transform-origin:right;margin:0 10px 0 auto}.m-playbar .listlyric p:first-child{transform-origin:right bottom}"}
@var select lyric-emptyline "\u5e95\u680f\u64ad\u653e\u5217\u8868\u6b4c\u8bcd\u4e0d\u663e\u793a\u7a7a\u884c"{"\u7981\u7528":" ","\u542f\u7528":".m-playbar .listlyric p:empty{min-height:1px;max-height:1px;padding:0}"}
@var select ui-color-palettes "\u754c\u9762\u989c\u8272 (Beta)"{"\u81ea\u52a8":"@media(prefers-color-scheme:dark){*:not(fuck){--cp-b1:var(--cp-x1);--cp-b2:var(--cp-x2);--cp-b3:var(--cp-x3);--cp-b4:var(--cp-x4);--cp-b5:var(--cp-x5);--cp-b6:var(--cp-x6);--cp-b7:var(--cp-x7);--cp-b8:var(--cp-x8);--cp-b9:var(--cp-x9);--cp-b0:var(--cp-x0);--cp-a1:var(--cp-z1);--cp-a2:var(--cp-z2);--cp-a3:var(--cp-z3);--cp-a4:var(--cp-z4);--cp-a5:var(--cp-z5);--cp-a6:var(--cp-z6);--cp-a7:var(--cp-z7);--cp-a8:var(--cp-z8);--cp-a9:var(--cp-z9);--cp-a0:var(--cp-z0);--cp-c7:var(--cp-y8);--cp-c6:var(--cp-y9);--cp-c5:var(--cp-ya);--cp-c4:var(--cp-yb);--cp-c3:var(--cp-yc);--cp-c2:var(--cp-yd);--cp-c1:var(--cp-ye);--cp-d1:var(--cp-y1);--cp-d2:var(--cp-y2);--cp-d3:var(--cp-y3);--cp-d4:var(--cp-y4);--cp-d5:var(--cp-y5);--cp-d6:var(--cp-y6);--cp-d7:var(--cp-y7)}.u-goon,.n-pglg,.n-pglg .btn,.member-wrap .member-body,.member-wrap .member-body .user-info .user-head .avatar-img,.member-wrap .member-body .m-privilege,.member-wrap .member-body .n-special,.m-dynamicbar,.n-sltlyr .u-icn,.m-schlist .hd .icn,.m-info-program .rdiname .icon,#player h2 .logo,.m-radio .rditype .apply .icon,.u-errlg-404,.n-nmusic .u-icn-21,.n-msgnt-tip,.m-newsongbar-normal .nicon,.m-newsonglist .m-dlist .rightbox .playicon{filter:invert(1) hue-rotate(180deg)}.member-wrap .member-body .n-special .title em,.member-wrap .member-body .m-privilege .title em{background:none}.m-pbar .btn i:not(.fuck){--v-a:var(--cp-x0)}.n-daily .bg{opacity:.8}}","\u6d45\u8272":" ","\u6df1\u8272":"*:not(fuck){--cp-b1:var(--cp-x1);--cp-b2:var(--cp-x2);--cp-b3:var(--cp-x3);--cp-b4:var(--cp-x4);--cp-b5:var(--cp-x5);--cp-b6:var(--cp-x6);--cp-b7:var(--cp-x7);--cp-b8:var(--cp-x8);--cp-b9:var(--cp-x9);--cp-b0:var(--cp-x0);--cp-a1:var(--cp-z1);--cp-a2:var(--cp-z2);--cp-a3:var(--cp-z3);--cp-a4:var(--cp-z4);--cp-a5:var(--cp-z5);--cp-a6:var(--cp-z6);--cp-a7:var(--cp-z7);--cp-a8:var(--cp-z8);--cp-a9:var(--cp-z9);--cp-a0:var(--cp-z0);--cp-...

Reviews

No reviews yet.