【论坛美化】S1 NUX【25/6/20 修复匹配bug】

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

V2024.12.23
进一步替换为Less变量，为后续动态字色做准备
移除高级编辑界面的超链接颜色设置（当初为啥会加这选项的？），防止出bug
修复版头选择非自动收起的情况下，顶栏仍然动态出现和消失的问题
修复几个语法错误导致的样式失效问题

V2024.12.21
修复一些兼容问题

V2024.12.20
新版本号直接取用更新日期
切换到Less预处理器，会导致部分设置失效，需要用户重新选择

V1.3.6
对新的表情选择栏进行适配

V1.3.5
给右上角的提醒状态增加动态强调元素

V1.3.4
修复窄屏和强制宽度导致的显示bug

V1.3.3
增加窄屏模式隐藏帖子列表中的发帖人及发帖日期选项

V1.3.2
修正顶栏已认证手机用户的图标（就是删了）

V1.3.1
对完全没人反馈的主题内用户信息显示方式1进行修正和完善，现在布局应该比较完善了

V1.3.0
对显示屏蔽内容黑科技脚本的登录窗口进行适配

V1.2.9
修复带图投票帖中的图片显示错误

V1.2.8
完善帖内图片在维持宽高比下的尺寸自适应

V1.27→V1.2.7
根据SemVer规范修改版本号
修正窄屏模式下导航栏分版本菜单的适配
修正一些主题色中的部分颜色选择
板块列表中会已访问链接会有稍微变暗

V1.25-1.26
适配修正

V1.24
部分图标变更为X3.5的dizcon原图标（配搭主题色），对S1用户标记脚本(https://bbs.saraba1st.com/2b/thread-2049578-1-1.html)进行优化适配

V1.21-1.23
适配修正

V1.20
适配升级到Discuz X3.5后的一些变化。肯定还有bug（甚至发现了一些新页面），大家帮忙多报一下bug，我一个人很难全部发现

V1.10-1.12
修复页码栏中下一页按钮在不同页面适配情况不同导致消失的问题

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

V1.086
修复在Chrome上用户头像顶部粘连效果失效的问题

V1.085
变更评分理由字体颜色
新增字体选项，可自定义

V1.083
修复窄屏适配下的头像信息栏适配

V1.08
优化头像信息栏的适配
根据新的usercss规则，删除部分冗余代码

V1.07
迁移到userstyles.world
（这代码还不是随随便便就能搞定的嘿……）

V1.061
修复带翻页主帖页码栏被误删的问题
适配新上传附件按钮与组件

V1.06
修复用户回复展示页的页码按钮在一定窗口宽度下消失的问题
将编辑功能图标图片直接用base64的方式嵌入(大幅增加了脚本体积，但似乎没受userstyles的字节限制？)

V1.059
完善上传附件窗口适配，增加强制窄屏不影响顶部导航栏选项

V1.057
完善邀请用户、论坛权限等页面的适配

V1.0561
高亮帖子和富文本编辑器内链接，并提供字色选项

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

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

pgain2004

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

不是在外野的后面么……

pgain2004

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

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

pgain2004

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

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

elfspeeder

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

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