pgain2004 发表于 2019-4-22 12:12

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

本帖最后由 pgain2004 于 2023-7-4 10:29 编辑

业余捣鼓了那么些年头的CSS后,总结了之前S1 MUX和其它一些主题的不足,重新写了这个:
https://s2.ax1x.com/2019/04/26/EnVBVO.jpg

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

3、大量使用utf8字符、emoji、svg、css绘制等来替代Discuz!自带、抠边都抠不好的残废图标(基于对emoji的支持,不同平台会有一定程度的显示差异,Win7等支持差的老系统可能就比较挫了,我没测试);
4、相比MUX的卡片+阴影,采用浅勾边风格,更贴近论坛原样式;
https://s2.ax1x.com/2019/04/26/EnVyPH.jpg
https://s2.ax1x.com/2019/04/26/EnV6Gd.jpg
https://s2.ax1x.com/2019/04/26/EnVrIe.jpg

5、使用全局变量进行颜色设置,色调主题的更换和自定义都十分方便;
https://s2.ax1x.com/2019/04/26/EnVwqK.gif




使用方法:

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

内含一些简单的自定义选项,直接在CSS扩展工具中选择:
https://s1.ax1x.com/2023/05/24/p9TqbOs.png

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

pgain2004 发表于 2019-4-22 12:12

本帖最后由 pgain2004 于 2019-4-22 12:37 编辑

自定义主题说明:
进入NUX的代码编辑页面后,你能看到:
/*1-0 配色*/
/*
bg(background):背景色;
pri(primary):主色调,主要作为顶栏和标题栏背景;
prid(primary-dark):深主色调(暗色主题:浅),主要用来为模块勾边;
pril(primary-light):浅主色调(暗色:深);
bn(button):按钮色;
bnd(button-dark):深按钮色;
sec(secondary):副色调;
secp(secondary-in-primary):主色调背景下的副色调;
t(text):默认文本色;
tl(text-light):浅文本色;
tg(text-grey):灰文本色;
pt(primarytext):主色调背景下文本色;
ptl(primarytext-light):主色调背景下浅文本色;
ic(icon):图标色;
icl(icon-light):浅图标色;
icd(icon-dark):深图标色;
icdd(icon-darker):更深图标色;
icddd(icon-darkest):最深图标色;
shd(shadow):阴影色;
shdl(shadow-light):浅阴影色;
*/
:root{
/*tea theme*/

      --bg:#ecedeb;
      --pri:#d1d9c1;
      --prid:#cc9;
      --pril:#e5e9df;
      --bn:#0b7ac9;
      --bnd:#0555ba;
      --sec:#0095ff;
      --secp:#0095ff;
      --t:#022C80;
      --tl:#3159a9;
      --tg:#889dc8;
      --pt:#022C80;
      --ptl:#3159a9;
      --icl:#fff;
      --ic:#ccc;
      --icd:#999;
      --icdd:#555;
      --icddd:#000;
      --shd:#555;
      --shdl:#999;
/**/

/*中间的其它主题,略*/

/*custom theme*/
/*
    --bg:#ecedeb;
    --pri:#d1d9c1;
    --prid:#cc9;
    --pril:#e5e9df;
    --bn:#0b7ac9;
    --bnd:#0555ba;
    --sec:#0095ff;
    --secp:#0095ff;
    --t:#022C80;
    --tl:#3159a9;
    --tg:#889dc8;
    --pt:#022C80;
    --ptl:#3159a9;
    --icl:#fff;
    --ic:#ccc;
    --icd:#999;
    --icdd:#555;
    --icddd:#000;
    --shd:#555;
    --shdl:#999;
/**/
}
最上面是关于颜色值的说明,:root{开始是主题代码,tea theme就是经典的午后红茶(屎黄色)主题,custom theme则是自定义主题。
--bg(背景色)的前一行如果为空,代表该主题代码未被无效化(被注释),主题生效。反之亦然。若有多个主题没被无效化,则最后一个主题有效(覆盖了前面的定义)。
如果不想频繁地去userstyle页面变更自定义项再更新,可以直接去掉对应主题--bg前的那个/*并将其它主题无效化(加上/*)。本主题所有代码都是完整的,诸如签名自动隐藏功能的开关、首页板块的显示隐藏,均能通过增减/*来设置。
你可以随意设置随意主题的hex色值,扩展支持的话甚至能直接点击拖动,所见即所得:
https://ws1.sinaimg.cn/large/73508f0fgy1g2ba74wh4mj20cz0ao3z3.jpg

pgain2004 发表于 2019-4-27 14:36

本帖最后由 pgain2004 于 2023-5-24 01:36 编辑

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 发表于 2019-4-22 12:19

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

pgain2004 发表于 2019-4-22 12:28

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

xsl1099 发表于 2019-4-22 18:21

谢谢 mux用了很多年

とげちー 发表于 2019-4-22 18:30

pgain2004 发表于 2019-4-22 18:40

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

狗叔好像已经调回去了。

性欲モンスター 发表于 2019-4-22 18:57

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

新表情也没了

pgain2004 发表于 2019-4-22 18:58

性欲モンスター 发表于 2019-4-22 18:57
新表情也没了
似乎可能大概或许是因为老爷直接同步整个库回去,于是把表情更新部分也同步没了
还好文件都是现成的,而且是修正过的,再加回去应该不难

小明神 发表于 2019-4-22 23:36

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

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

千本blur 发表于 2019-4-22 23:54

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


pgain2004 发表于 2019-4-23 00:15

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




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

elxy 发表于 2019-4-23 00:28

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

pgain2004 发表于 2019-4-23 00:31

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

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

elxy 发表于 2019-4-23 00:32

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

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

pgain2004 发表于 2019-4-23 00:52

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

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

elxy 发表于 2019-4-23 00:54

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

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

pgain2004 发表于 2019-4-23 01:05

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

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

千本blur 发表于 2019-4-23 01:50

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

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

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

pgain2004 发表于 2019-4-23 01:53

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

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

可以,我之后加吧。

酒丸 发表于 2019-4-23 02:36

可以变成夜间模式好评

待宵 发表于 2019-4-23 07:37

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

pgain2004 发表于 2019-4-23 10:42

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

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

加上了

pgain2004 发表于 2019-4-23 10:51

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

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

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

Lisylfn 发表于 2019-4-23 10:58

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

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

离魂仙 发表于 2019-4-23 11:00

https://wx3.sinaimg.cn/large/622734bdly1g2cduc3ctbj21h70akn0b.jpg
加了强制窄屏代码后变这样了,还是希望能和原版窄屏一样的模式

Lisylfn 发表于 2019-4-23 11:31

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

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

NagisaLoveMami 发表于 2019-4-23 11:35

pgain2004 发表于 2019-4-23 12:03

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

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

pgain2004 发表于 2019-4-23 12:10

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

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


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

kwin_ 发表于 2019-4-23 12:21

用上了,感觉不错

elfspeeder 发表于 2019-4-23 12:53

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

pgain2004 发表于 2019-4-23 13:25

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

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

zhongjie 发表于 2019-4-23 13:40

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

pgain2004 发表于 2019-4-23 13:44

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

不是在外野的后面么……

zhongjie 发表于 2019-4-23 13:48

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

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

pgain2004 发表于 2019-4-23 13:52

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

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

zhongjie 发表于 2019-4-23 13:56

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

https://i.loli.net/2019/04/23/5cbea8ded34b7.png

https://i.loli.net/2019/04/23/5cbea8dee0f42.png

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

pgain2004 发表于 2019-4-23 14:05

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

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

elfspeeder 发表于 2019-4-23 14:41

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

知道了,是为了把个人信息栏加进去才做了两行,以前mux就一行用习惯了
页: [1] 2 3 4 5 6 7 8
查看完整版本: 【论坛美化】S1 NUX【2023/5/24 磨砂玻璃+自适应亮暗主题】