Git Product home page Git Product logo

wtonychen / flatnmusic Goto Github PK

View Code? Open in Web Editor NEW
48.0 1.0 4.0 1.28 MB

网易云音乐扁平风格样式表

Home Page: https://wtonychen.github.io/flatnmusic/

License: GNU General Public License v3.0

JavaScript 13.22% CSS 86.67% HTML 0.11%
userstyles stylus usercss netease-music netease-cloud-music userscripts neteasemusic neteasecloudmusic netease-cloudmusic css javascript stylesheet userstyle stylesheets userscript 163 163music

flatnmusic's Introduction

网易云音乐扁平风格

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



❤ 喜欢的话,就 ⭐Star 一下来支持一下我吧 :)



兼容 Chrome 兼容 Edge 兼容 Opera 有限兼容 Firefox 最后更新时间


网易云音乐扁平风格




样式表下载 版本
UserCSS 版本 (适用于 Stylus 扩展,含调整功能):安装样式
标准版本 (适用于不支持 UserCSS 的扩展,不含调整功能) :安装样式

辅助用户脚本下载 版本
下载辅助脚本

全部下载源

UserCSS 样式表 普通样式表 辅助脚本
GitHub GitHub GitHub
Greasy Fork UserStyles.org 0.6.1 版本 Greasy Fork
UserStyles.world UserStyles.org 0.3.81 版本 OpenUserJS

没有 Stylus 扩展? 请见备注2
不了解如何安装?前往了解如何安装用户脚本?

介绍

为网易云音乐备注1带来矢量图标 + 现代化扁平界面
在高分辨率屏幕(大于 100% 的显示缩放)上有较好体验


  • 可自定义顶栏风格。仅限 UserCSS 版本
  • 支持自定义主题色,动画效果开关、隐藏主页客户端下载选项以及置顶顶栏。仅限 UserCSS 版本
  • 多种字体可供选择。
  • 如需实现更多功能,可安装辅助用户脚本提升体验。

遇到问题?请在 GitHub 开启新的 Issue进行反馈。
也可以在网易云音乐向我私聊进行反馈。


截图

展开首页截图

首页截图

展开首页截图(背景色顶栏)

首页截图(背景色顶栏)

展开歌单页截图

歌单页截图

展开电台页截图

电台页截图

展开用户页截图

用户页截图

展开歌手页截图

歌手页截图

展开榜单页截图

榜单页截图


备注

  1. 只适用于网易云音乐桌面网页版 ( 适用于 music.163.com,不适用于 music.163.com/m/ )。
  2. 前往安装 Stylus 浏览器扩展:Chrome | Firefox | Opera

帮助

点此查看帮助


更新日志

点此查看更新日志


许可

GNU General Public License

您可以在 https://www.gnu.org/licenses/translations.html 查看许可证的翻译版本。


鸣谢

JetBrains logo
感谢 JetBrains s.r.o. 为本项目提供开发工具

flatnmusic's People

Contributors

wtonychen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

flatnmusic's Issues

用户名过长时 `发私信` 和 `关注` 按钮位置有些奇怪

描述问题
用户名过长时 发私信关注 按钮位置有些奇怪

截图(可选)
image
对比
image
image
image

桌面端

  • 操作系统:
  • 浏览器:Chrome(百分浏览器)
  • 浏览器版本:百分浏览器 4.2.10.171(正式版本) (64 位) (Chromium 80.0.3987.163)
  • 显示分辨率:1920x1080
  • 工具:Stylus

辅助脚本设置可以放在别的地方嘛

现在它在网易云用户的个人设置里,这对没有网易云账号的人不太友好。一些关键设置,比如查看高清图片都无法打开。

可否将其放在无需登录账号就能访问的界面里?或者使用油猴插件自己的脚本设置?

电台节目播放页按钮样式不正常

描述问题
电台节目播放页(示例)的“订阅”及“播放全部”按钮显示不正常。

截图
screenshot 1

桌面端 (请完成以下信息)

  • Ubuntu, Firefox 64, Stylus

附加内容
按钮是用 background 实现的 :-/ 颜色是按钮自带的背景色。如果直接移除背景的话按钮也会消失,但是调整了 padding-left 之后感觉还不错...

关于 Model Window 的边框配色

这个功能请求是否与问题关联?请描述。
黑白配色的模态窗口用红色描边感觉略微有些奇怪...

Model window w/ red border

描述你所想的解决方案
也许,不加边框...?

描述你考虑到的备用方案
(抱歉,不是很了解 Issue Template 中这一节的含义)

附加内容
(无)

[改进]

功能请求:
画中画边框优化和缩放机制调整

理由:

  1. 在基本实现全局圆角边框后,画中画单独保持直角边框从整体视角看缺乏协调感
  2. 当前画中画大小调整是沿对角线缩放的(个人认为较为僵化缺乏灵活性)。
    2
    1

解决方案:

  • 将画中画从直角边框改为圆角边框(同时保留相应的直角边框开关供用户选择)。
  • 调整画中画大小缩放机制,最好能做到像浏览器大小边框调整一样灵活。

附加内容(建议):
关于web端的歌词显示,除了官方的“画中画”之外,不知能否通过其他方式实现歌词滚动内容在网页固定区域常驻?
(如利用右侧空白边栏或在底部播放栏目上方设置专门的歌词滚动呈现区域等)

使顶栏可动态固定

这个功能请求是否与问题关联?请描述。(可选)
勉强算是 #13 的一个替代解决方案

描述你所想的解决方案
顶栏滚动状态 增加一个 动态固定 选项。
具体来说就是页面往下滚动时顶栏收起,向上滚动时顶栏固定。可以参考 B 站直播间的顶栏,就是我心中的理想效果。

附加内容(可选)
B 站直播间的顶栏效果:
navbar

用户粉丝、关注 tab 下的关注按钮未适配

简体中文

描述问题
用户粉丝、关注 tab 下的关注按钮未适配

截图(可选)
image
image

桌面端 (请完成以下信息)

  • 操作系统:Windows 10 20H2
  • 浏览器:百分浏览器(Chromium)
  • 浏览器版本:4.3.9.248(正式版本) (64 位) (Chromium 86.0.4240.198)
  • 显示分辨率:1920x1080
  • 工具:Stylus

搜索结果页用户 tab 关注按钮未适配

描述问题
搜索结果页用户 tab 关注按钮未适配

截图(可选)
image

桌面端

  • 操作系统:
  • 浏览器:Chrome(百分浏览器)
  • 浏览器版本:百分浏览器 4.2.10.171(正式版本) (64 位) (Chromium 80.0.3987.163)
  • 显示分辨率:1920x1080
  • 工具:Stylus

Dark Mode

深色模式谢谢
半夜开网易云还要被白光瞎眼...
主题色 背景色都改为深色 但不能完全做到深色
图片
用插件效果也不好

顶栏 tab 的圆角有些怪

这个功能请求是否与问题关联?请描述。(可选)
对整体圆角化每一件,但顶栏 tab(发现应用、我的音乐、朋友)也有圆角后个人感觉有些怪,不知道是不习惯还是怎么的,个人还是倾向于 tab 无圆角。附现最新版(0.6.0) tab 圆角效果图:
image

描述你所想的解决方案
我个人倾向于这三个 tab 不加圆角

描述你考虑到的备用方案(可选)
或者针对这三个 tab 的圆角给个选项?

附加内容(可选)
还希望后续能提供一个全局的圆角半径的设置项

通过底栏进度条链接图标跳转至歌单/专辑(歌曲列表)该歌曲位置时锚点定位错误

描述问题
播放歌单/专辑(歌曲列表)歌曲时,通过底栏进度条链接图标跳转至歌单/专辑(歌曲列表)该歌曲位置时锚点定位错误。

我这边测试跳转后的位置在目标位置的下方,可能差了一个顶栏的高度;且跳转完成后关闭样式顶部刚好对齐歌曲列表中目标歌曲的下一首歌(这一段看懂了吗/汗)。

截图(可选)
底栏进度条链接图标
image

官方跳转完成效果:
image

桌面端

  • 操作系统:
  • 浏览器:Chrome(百分浏览器)
  • 浏览器版本:百分浏览器 4.2.10.171(正式版本) (64 位) (Chromium 80.0.3987.163)
  • 显示分辨率:1920x1080
  • 工具:Stylus

样式不应用于专栏目录页

描述问题
样式不应用于专栏目录页

截图(可选)
image

桌面端 (请完成以下信息)

  • 操作系统:Windows 10 1909
  • 浏览器:Chrome(百分浏览器)
  • 浏览器版本:4.2.10.171(正式版本) (64 位) (Chromium 80.0.3987.163)
  • 显示分辨率:1920x1080
  • 工具:Stylus

附加内容(可选)
如:https://music.163.com/#/series?id=2801580 https://music.163.com/#/series?id=6625168
是故意没有在专栏目录页应用样式吗?还是没来得及做?

几个未适配元素反馈

描述问题
几个未适配元素
VIP 单曲(见图 1)
底栏播放器的播放列表中的歌曲的来源图标(见图 2、3)

截图(可选)
VIP 单曲标签和播放按钮
image

底栏播放器的播放列表中的歌曲无法区分是否有来源:
image
以下是原版效果(有明暗效果进行区分的):
image

桌面端

  • 操作系统:Windows 20H2 19042.685
  • 浏览器:Chrome(百分浏览器)
  • 浏览器版本:百分浏览器 4.3.9.227(正式版本) (64 位) (Chromium 86.0.4240.198)
  • 显示分辨率:1920x1080
  • 工具:Stylus

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.