【论坛美化】S1 NUX【2023/5/24 磨砂玻璃+自适应亮暗主题】

pgain2004

业余捣鼓了那么些年头的CSS后，总结了之前S1 MUX和其它一些主题的不足，重新写了这个：


相比之前的MUX，NUX：
1、对长宽变化的适应性更强，有更完善的窄屏自适配布局；
2、覆盖更全面，连大乱斗页面都适配了；

3、大量使用utf8字符、emoji、svg、css绘制等来替代Discuz!自带、抠边都抠不好的残废图标（基于对emoji的支持，不同平台会有一定程度的显示差异，Win7等支持差的老系统可能就比较挫了，我没测试）；
4、相比MUX的卡片+阴影，采用浅勾边风格，更贴近论坛原样式；




5、使用全局变量进行颜色设置，色调主题的更换和自定义都十分方便；

---

使用方法：

先安装Stylus(Firefox/Chromium/Opera)、xStyle(Firefox/Chromium)或同类扩展，支持所有主流浏览器(除非你还在用IE)。
然后通过主题页面安装：https://userstyles.world/style/539/s1-nux

内含一些简单的自定义选项，直接在CSS扩展工具中选择：


配合：Auto Night Mode，Windows用户也可以让该主题根据时间段自动切换亮暗色调了

pgain2004

自定义主题说明：
进入NUX的代码编辑页面后，你能看到：

1. /*1-0 配色*/
   
2. /*
   
3. bg(background)：背景色；
   
4. pri(primary)：主色调，主要作为顶栏和标题栏背景；
   
5. prid(primary-dark)：深主色调(暗色主题：浅)，主要用来为模块勾边；
   
6. pril(primary-light)：浅主色调(暗色：深)；
   
7. bn(button)：按钮色；
   
8. bnd(button-dark)：深按钮色；
   
9. sec(secondary)：副色调；
   
10. secp(secondary-in-primary)：主色调背景下的副色调；
    
11. t(text)：默认文本色；
    
12. tl(text-light)：浅文本色；
    
13. tg(text-grey)：灰文本色；
    
14. pt(primarytext)：主色调背景下文本色；
    
15. ptl(primarytext-light)：主色调背景下浅文本色；
    
16. ic(icon)：图标色；
    
17. icl(icon-light)：浅图标色；
    
18. icd(icon-dark)：深图标色；
    
19. icdd(icon-darker)：更深图标色；
    
20. icddd(icon-darkest)：最深图标色；
    
21. shd(shadow)：阴影色；
    
22. shdl(shadow-light)：浅阴影色；
    
23. */
    
24. :root{
    
25. /*tea theme*/
    
26. 
    
27.         --bg:#ecedeb;
    
28.         --pri:#d1d9c1;
    
29.         --prid:#cc9;
    
30.         --pril:#e5e9df;
    
31.         --bn:#0b7ac9;
    
32.         --bnd:#0555ba;
    
33.         --sec:#0095ff;
    
34.         --secp:#0095ff;
    
35.         --t:#022C80;
    
36.         --tl:#3159a9;
    
37.         --tg:#889dc8;
    
38.         --pt:#022C80;
    
39.         --ptl:#3159a9;
    
40.         --icl:#fff;
    
41.         --ic:#ccc;
    
42.         --icd:#999;
    
43.         --icdd:#555;
    
44.         --icddd:#000;
    
45.         --shd:#555;
    
46.         --shdl:#999;
    
47. /**/
    
48. 
    
49. /*中间的其它主题，略*/
    
50. 
    
51. /*custom theme*/
    
52. /*
    
53.     --bg:#ecedeb;
    
54.     --pri:#d1d9c1;
    
55.     --prid:#cc9;
    
56.     --pril:#e5e9df;
    
57.     --bn:#0b7ac9;
    
58.     --bnd:#0555ba;
    
59.     --sec:#0095ff;
    
60.     --secp:#0095ff;
    
61.     --t:#022C80;
    
62.     --tl:#3159a9;
    
63.     --tg:#889dc8;
    
64.     --pt:#022C80;
    
65.     --ptl:#3159a9;
    
66.     --icl:#fff;
    
67.     --ic:#ccc;
    
68.     --icd:#999;
    
69.     --icdd:#555;
    
70.     --icddd:#000;
    
71.     --shd:#555;
    
72.     --shdl:#999;
    
73. /**/
    
74. }
    

复制代码

最上面是关于颜色值的说明，:root{开始是主题代码，tea theme就是经典的午后红茶(屎黄色)主题，custom theme则是自定义主题。
--bg(背景色)的前一行如果为空，代表该主题代码未被无效化(被注释)，主题生效。反之亦然。若有多个主题没被无效化，则最后一个主题有效(覆盖了前面的定义)。
如果不想频繁地去userstyle页面变更自定义项再更新，可以直接去掉对应主题--bg前的那个/*并将其它主题无效化(加上/*)。本主题所有代码都是完整的，诸如签名自动隐藏功能的开关、首页板块的显示隐藏，均能通过增减/*来设置。
你可以随意设置随意主题的hex色值，扩展支持的话甚至能直接点击拖动，所见即所得：

pgain2004

V1.09
顶栏、快捷导航等应用磨砂玻璃透明模式
增加自适应亮暗色调选项，即自动跟随系统主题，Win用户推荐配合Auto-Night-Mode使用
一些简单的调整

……

V1.055
修复内野子版块入口适配，增强整体适配能力

V1.054
新增配色

V1.053
新增“窄屏下页码栏悬浮展开”选项，方便大缩放比用户点页码。

V1.052
修正功能小窗的匹配。

V1.051
优化部分颜色覆盖，不再影响主题加色。

V1.05
增加滚动条颜色跟随和窄滚动条选项(默认开启)。

V1.049
增加短信息回复栏表情选择框适配。

V1.048
修正增补主页隐藏栏目选项；
增加主题帖内图片最大高度限定选项(默认为不限制)。

V1.045
修改过渡界面图标(效果一般，容我再找)。

V1.042
修复用户类型标签的显示(static服务器用https啦?)

V1.041
可设置版头是否自动收起和展开。

V1.04
适配充值页面。

V1.037
适配签名编辑框的表情选择栏。
准备适配充钱界面。
复活快……乐？

V1.036
修正主页公告和公告页UI。
只读模式快乐。

V1.035
完善大乱斗页适配。

V1.03
增加两种配色；
为板块主题列表底部增加“下一页”宽按钮（非原按钮）；
优化主题列表细节；
改善强制窄屏适配；
快捷导航改为满屏高；
修改主页格式；
增加加大主页选项；
修复小黑屋“更多”按钮的显示问题。

V1.02
增加主题内用户信息显示选项；
增加强制宽度选项，当其被启用后，【自定义宽度(px)】和【“自定义宽度”值+40px】才会生效；
搜索页已访问链接以浅色显示；
增加快捷导航按钮右置选项(不推荐)；
增加Chromium系浏览器适配选项(Chromium居然仍不支持sticky特性！？)；
增加用户信息自动收纳新风格选项；
优化用户信息侧栏布局；
修复快捷入口子菜单错位问题。

V1.0
初版发布。

以后版本更新内容就在这个回复发，看最后能有多长。

lordvv

谢谢楼主，用上了dark theme，这下不会有人质疑我上班摸鱼了

pgain2004

紧急修了点小问题……我也不清楚userstyle改版后现在的更新机制如何，如果发现错位或者代码框字色太浅就更一下吧
还有其它什么意见尽管提。

xsl1099

谢谢 mux用了很多年

pgain2004

とげちー 发表于 2019-4-22 18:30
感谢，刚好最近页面变宽了看着很难受

狗叔好像已经调回去了。

性欲モンスター

pgain2004 发表于 2019-4-22 18:40
狗叔好像已经调回去了。

新表情也没了

pgain2004

性欲モンスター 发表于 2019-4-22 18:57
新表情也没了

似乎可能大概或许是因为老爷直接同步整个库回去，于是把表情更新部分也同步没了
还好文件都是现成的，而且是修正过的，再加回去应该不难

小明神

之前一直用你的，这个更新看起来更好了。感谢楼主

—— 来自 HUAWEI ARS-AL00, Android 8.1.0上的 S1Next-鹅版 v2.1.2

千本blur

挺好看的，但是S1的页面真的改回去了吗，无论是否安装楼主的主题，我这里页面依然横跨了十万八千里。

pgain2004

千本blur 发表于 2019-4-22 23:54
挺好看的，但是S1的页面真的改回去了吗，无论是否安装楼主的主题，我这里页面依然横跨了十万八千里。

我这主题是自适应宽屏的……
你是想要强行窄屏么？
在最后的最后加一行body{width:你想要的数字px!important;max-width:你想要的数字px!important;margin:0 auto!important}，应该就能覆盖所有其它设定，让整个页面缩窄居中了。对其它所有网页都可以这么干。
但如果是有选择地缩窄，那还请具体描述，我可以因应提供选项或者代码。

elxy

问个问题，之前的S1 Mux修改后，一旦更新就还原回去了，这个还会有这样的问题么？

pgain2004

elxy 发表于 2019-4-23 00:28
问个问题，之前的S1 Mux修改后，一旦更新就还原回去了，这个还会有这样的问题么？ ...

呃，是指修改的啥？自己改的代码？页面里的自定义选项？

elxy

pgain2004 发表于 2019-4-23 00:31
呃，是指修改的啥？自己改的代码？页面里的自定义选项？

隐藏板块入口，比如主题页面中的“大乱斗”、“手游”之类的

pgain2004

elxy 发表于 2019-4-23 00:32
隐藏板块入口，比如主题页面中的“大乱斗”、“手游”之类的

如果是设定好的自定义选项，理论上用扩展更新后也会保留。如果是自己改的代码，那在更新时确实会被覆盖，推荐另外开个txt之类的保存该部分代码，到时直接覆盖。这方面确实很难兼顾，抱歉了。

elxy

pgain2004 发表于 2019-4-23 00:52
如果是设定好的自定义选项，理论上用扩展更新后也会保留。如果是自己改的代码，那在更新时确实会被覆盖， ...

好吧，那我用uBlock Origin屏蔽好了。

pgain2004

elxy 发表于 2019-4-23 00:54
好吧，那我用uBlock Origin屏蔽好了。

如果你是指顶部那些快捷入口……不来看看我写的练习用脚本么，会将顶部快捷入口替换为你收藏的板块+几个可自定义项。

千本blur

pgain2004 发表于 2019-4-23 00:15
我这主题是自适应宽屏的……
你是想要强行窄屏么？
在最后的最后加一行body{width:你想要的数字px!import ...

啊哦，谢谢，这个就很棒了。

提一个建议，可不可以增加选项，让用户自己选择是否折叠头像下面的用户信息？感觉浏览的时候这个还看得挺多的。

pgain2004

千本blur 发表于 2019-4-23 01:50
啊哦，谢谢，这个就很棒了。

提一个建议，可不可以增加选项，让用户自己选择是否折叠头像下面的用户信息 ...

可以，我之后加吧。

酒丸

可以变成夜间模式好评

待宵

NUX版论坛首页比起MUX版更为激进，我觉得后者的首页好

pgain2004

千本blur 发表于 2019-4-23 01:50
啊哦，谢谢，这个就很棒了。

提一个建议，可不可以增加选项，让用户自己选择是否折叠头像下面的用户信息 ...

加上了

pgain2004

待宵 发表于 2019-4-23 07:37
NUX版论坛首页比起MUX版更为激进，我觉得后者的首页好

因为一开始主页是现在“板块分类”的这个布局：https://bbs.saraba1st.com/2b/forum.php?gid=1
【板块名】
【板块简述】
【子板块入口】
【版主列表】
例如子版块入口和版主列表，我觉得有保留价值，当初MUX留的也是这个。

后来改版成双栏后，就只剩下“总主题&回复数”和“最后被回复的主题”了。
就算老爷自己也不会去看这什么总数吧，也不需要（直接就能看数据库），而后者……你会用到吗

Lisylfn

elxy 发表于 2019-4-23 00:32
隐藏板块入口，比如主题页面中的“大乱斗”、“手游”之类的

https://openuserjs.org/scripts/ylns1314/S1_NaviBar_Customization
用一个脚本来自定义, 两边就不会覆盖了

离魂仙

加了强制窄屏代码后变这样了，还是希望能和原版窄屏一样的模式

Lisylfn

帖子列表底部的下一页栏是删掉了吗? 帖子里的还在

另外, 搜索页面的链接能加一个已访问的变色标记吗?

pgain2004

离魂仙 发表于 2019-4-23 11:00
加了强制窄屏代码后变这样了，还是希望能和原版窄屏一样的模式

增加了强制宽屏选项，但注意设置太窄会导致“地址栏”和“页码栏”在一些标题较长页数又多的帖子里相互覆盖。
另外不知道为啥这时候页面会让用户“安装”成另一个主题而不是更新原来的主题，如果你发现有两个NUX在同时生效，把老的删了就好。

pgain2004

Lisylfn 发表于 2019-4-23 11:31
帖子列表底部的下一页栏是删掉了吗? 帖子里的还在

另外, 搜索页面的链接能加一个已访问的变色标记吗?

更了，已访问的链接会变淡。
至于删掉板块列表底部的下一页栏，主要是因为它触发的行为模式和主题内的不同，容易导致布局错乱，只能说抱歉了，习惯一下用页码栏来跳转吧。

kwin_

用上了，感觉不错

elfspeeder

帖子内固定显示栏的第二条，就是那个帖子来源导航，影响信息密度能不能改个选项鼠标悬浮显示或者不要

pgain2004

elfspeeder 发表于 2019-4-23 12:53
帖子内固定显示栏的第二条，就是那个帖子来源导航，影响信息密度能不能改个选项鼠标悬浮显示或者不要 ...

隐了这一栏连页码都会看不到的啊……

zhongjie

没有适配二手区吗？没看到入口啊

pgain2004

zhongjie 发表于 2019-4-23 13:40
没有适配二手区吗？没看到入口啊

不是在外野的后面么……

zhongjie

pgain2004 发表于 2019-4-23 13:44
不是在外野的后面么……

发现了，原来要到快捷导航那里找，我在页面定的导航栏或者S1首页没看到

pgain2004

zhongjie 发表于 2019-4-23 13:48
发现了，原来要到快捷导航那里找，我在页面定的导航栏或者S1首页没看到

首页有的啊，就在外野入口后面，你是用其它扩展之类的屏蔽了吧？

zhongjie

pgain2004 发表于 2019-4-23 13:52
首页有的啊，就在外野入口后面，你是用其它扩展之类的屏蔽了吧？

我的首页和扩展是这些，我也不知道是哪个出了问题

pgain2004

zhongjie 发表于 2019-4-23 13:56
我的首页和扩展是这些，我也不知道是哪个出了问题

我在主帖展示了一个自定义选项界面，里面能设置首页各部分的显示或隐藏，你是把主板块、收藏板块和友情链接隐藏了吧。按喜好重新选择后点更新按钮就可以了。

elfspeeder

pgain2004 发表于 2019-4-23 13:25
隐了这一栏连页码都会看不到的啊……

知道了，是为了把个人信息栏加进去才做了两行，以前mux就一行用习惯了