检测到论坛CSS可能没有正确加载,如出现排版混乱请刷新重试。

We detected that the CSS might not be loaded correctly. If the website displays abnormally, Please refresh and try again.

怀着激动的心情向各位宣布——

v1.3.0

TL;DR

  • 更微妙的 UI

    很多控件都已更新为更接近原生控件的样式,使应用看起来更加熟悉。此版本还去除了不必要的阴影,以增强整体 UI 的连贯与一致性。
  • 更友好的交互

    控件在更接近原生样式的同时,还能够对您的操作做出反应,使操作变得更有活力。
  • 适配新插件

    此版本增加了对 Blog 的基础支持。
  • 不止为人人,更为每个人

    此版本引入了组件的概念,设计自定义 CSS/Less 时,只需按需导入组件便可轻松地 Fluent 化您的目标元素*。
    *:实验性功能。某些特性可能会在将来增加或删除。设计指南稍后将在 Github 发布。

完整更新内容

  • Acrylic 材料已更新为更接近原生的样式。
  • 在许多 UI 上(如 Hero)已移除不必要的阴影,以增强整体 UI 的连贯与一致性。
  • 按钮与选择元素已完成更新,更新 UI 并增加状态反馈。此更新同时影响帖子列表和通知中心的通知项。
  • 彩色标题栏上的搜索栏样式已更新。
  • 移动端布局中的上下文菜单已大体统一。
  • 大多数进度环现在使用主题色。
  • 工具提示外观已统一。
  • 更新了窗口边框以提高对比度。
  • 组件化。
  • 为 FancyBox 应用了 Acrylic 材料。
  • 通知中心布局进行了调整。未读项现在会带有一个未读徽章。
  • 微调了上下文菜单的整体外观。
  • 正在尝试将引用按钮更改为主题色外观。
  • 现在有图标了。

问题

某些问题在此版本前出现,但至今才发现。

  • (低严重度)按钮的渐变边框不再可用。目前无法使用简单的 CSS 实现这一点。
  • (低严重度)在窗体中,工具提示可能会被裁剪。
  • (低严重度)通知中心上的工具提示的 Acrylic 材料可能无法生效。

我们将继续积极探索问题的解决方案,也衷心希望听到您的反馈!

新年特别内容

提供一组由 Bing Chat 界面而来的渐变背景。此背景能够很好的凸显 Fluent 主题!
选择一个您的 Flarum 使用的主色调,然后添加代码块中的内容到自定义 CSS/Less 当中。
红色调:

body {
    background-attachment: fixed;
    & when (@config-dark-mode = false) {
        background: linear-gradient(90deg, #eeedf3 0%, 0.77381%, #efeff4 1.54762%, 6.72619%, #efeef3 11.9048%, 12.381%, #f0edf4 12.8571%, 27.9167%, #f2ecf4 42.9762%, 51.9048%, #efeef3 60.8333%, 61.9643%, #eeebf6 63.0952%, 66.7262%, #ebeaf9 70.3571%, 73.2738%, #e8e8f8 76.1905%, 77.1429%, #e6e7f8 78.0952%, 79.9405%, #e4e5f9 81.7857%, 84.1667%, #e3e4f8 86.5476%, 87.0238%, #e2e3f8 87.5%, 89.3452%, #e0e0fc 91.1905%, 95.5952%, #dceffc 100%);
    }
    & when (@config-dark-mode = true) {
        background: linear-gradient(90deg, #1f1e23 0%, 0.77381%, #201f24 1.54762%, 6.72619%, #201e23 11.9048%, 12.381%, #211f24 12.8571%, 27.9167%, #232024 42.9762%, 51.9048%, #201e23 60.8333%, 61.9643%, #1f1d26 63.0952%, 66.7262%, #1c1b29 70.3571%, 73.2738%, #191928 76.1905%, 77.1429%, #171728 78.0952%, 79.9405%, #151629 81.7857%, 84.1667%, #141528 86.5476%, 87.0238%, #131428 87.5%, 89.3452%, #11122c 91.1905%, 95.5952%, #0f112c 100%);
    }
}

蓝色调:

body {
    background-attachment: fixed;
    & when (@config-dark-mode = false) {
        background: linear-gradient(90deg, #eff2f7 0%, 7.60286%, #edf0f9 15.2057%, 20.7513%, #ebf0f8 26.297%, 27.6386%, #ebf0f8 28.9803%, 38.2826%, #e7edf9 47.585%, 48.1216%, #e6ecfa 48.6583%, 53.1306%, #e4ecf9 57.6029%, 61.5385%, #e3eafa 65.4741%, 68.7835%, #deeafa 72.093%, 75.7603%, #dbe6f8 79.4275%, 82.8265%, #d8e5f8 86.2254%, 87.8354%, #d5e4f9 89.4454%, 91.8605%, #d2e2f9 94.2755%, 95.4383%, #d1e1f8 96.6011%, 98.3005%, #d0e0f7 100%);
    }
    & when (@config-dark-mode = true) {
        background: linear-gradient(90deg, #2f2e33 0%, 7.60286%, #2d2c35 15.2057%, 20.7513%, #2b2c34 26.297%, 27.6386%, #2b2c34 28.9803%, 38.2826%, #272c35 47.585%, 48.1216%, #262b36 48.6583%, 53.1306%, #242b35 57.6029%, 61.5385%, #232a36 65.4741%, 68.7835%, #1e2a36 72.093%, 75.7603%, #1b2734 79.4275%, 82.8265%, #182634 86.2254%, 87.8354%, #152535 89.4454%, 91.8605%, #122335 94.2755%, 95.4383%, #112234 96.6011%, 98.3005%, #102133 100%);
    }
}

绿色调:

body {
    background-attachment: fixed;
    & when (@config-dark-mode = false) {
        background: linear-gradient(90deg, #ecf2f5 0%, 1.3089%, #eaf3f5 2.6178%, 17.4084%, #e8f1f2 32.199%, 36.2565%, #e5f1f2 40.3141%, 45.0262%, #e3f0f2 49.7382%, 51.8325%, #e2eff5 53.9267%, 57.199%, #e0eff5 60.4712%, 62.9581%, #dcedf5 65.445%, 66.2304%, #dcedf5 67.0157%, 68.0628%, #daecf4 69.1099%, 75.1309%, #d6e9f0 81.1518%, 82.5916%, #d3e7f0 84.0314%, 84.4241%, #d4e7ef 84.8168%, 86.911%, #d2e6ef 89.0052%, 94.5026%, #cfe3ec 100%);
    }
    & when (@config-dark-mode = true) {
        background: linear-gradient(90deg, #2f2e33 0%, 1.3089%, #2d2c35 2.6178%, 17.4084%, #2b2c34 32.199%, 36.2565%, #2b2c34 40.3141%, 45.0262%, #272c35 49.7382%, 51.8325%, #262b36 53.9267%, 57.199%, #242b35 60.4712%, 62.9581%, #232a36 65.445%, 66.2304%, #232a36 67.0157%, 68.0628%, #222935 69.1099%, 75.1309%, #1e2731 81.1518%, 82.5916%, #1b2531 84.0314%, 84.4241%, #1c2532 84.8168%, 86.911%, #1a2432 89.0052%, 94.5026%, #17202d 100%);
    }
}

向论坛催更!


顺便来点冷知识……

开发期间曾经考虑过的事情

Betta_Fish 另外ProgressRing能不能调大点(?)

我重新考虑过这事,但发现环的笔划会等比增加(理所当然的啦),太粗太丑,当然可以额外增加一个 SVG 图片来解决,但会平白无故地浪费掉好几 KB。
另外去掉不必要阴影也是 @Betta_Fish 当初的意见哦~

    另外就是我上了 iPadOS 仍然收不到通知,即使昨天的通知非常多……是我这边的问题吗?
    在 Windows Edge 上看 wss 传输的数据除了 ping-pong 和一些用户输入状态的改变以外什么都没有,即使真的有通知前后端都不会有反应😑

    那个插件不使用 wss 推送通知。一直以来我都搞错了。有人可以检查下论坛日志吗?

    论坛如果换背景,就不要用那上面的了,质量太差,我换了一下:

    body {
        & when (@config-dark-mode = false) {
            background: linear-gradient(90deg, #eff2f7 0%, 7.60286%, #edf0f9 15.2057%, 20.7513%, #ebf0f8 26.297%, 27.6386%, #ebf0f8 28.9803%, 38.2826%, #e7edf9 47.585%, 48.1216%, #e6ecfa 48.6583%, 53.1306%, #e4ecf9 57.6029%, 61.5385%, #e3eafa 65.4741%, 68.7835%, #deeafa 72.093%, 75.7603%, #dbe6f8 79.4275%, 82.8265%, #d8e5f8 86.2254%, 87.8354%, #d5e4f9 89.4454%, 91.8605%, #d2e2f9 94.2755%, 95.4383%, #d1e1f8 96.6011%, 98.3005%, #d0e0f7 100%) fixed;
        }
        & when (@config-dark-mode = true) {
            background: linear-gradient(90deg, #23272e 0%, 7.60286%, #202431 15.2057%, 20.7513%, #1f252f 26.297%, 27.6386%, #1f252f 28.9803%, 38.2826%, #1c222f 47.585%, 48.1216%, #1b2130 48.6583%, 53.1306%, #1a222e 57.6029%, 61.5385%, #19202f 65.4741%, 68.7835%, #17202c 72.093%, 75.7603%, #161d28 79.4275%, 82.8265%, #151c26 86.2254%, 87.8354%, #131b26 89.4454%, 91.8605%, #121924 94.2755%, 95.4383%, #121822 96.6011%, 98.3005%, #111820 100%) fixed;
        }
    }

    DaleZ 歪个楼, 但我怎么觉得这贴可能会变成你坛第一个意见反馈的精贴

    论坛为什么还不更新……🫤🕸️
    @焊锡锡


    焊锡锡 好吧,正好论坛到时候再安装进一步优化的主题。但贴吧表情……[tieba=yinxian]

      DaleZ 负责维护的都忙的一批,我人在老家也搞不定[tieba=yinxian]

        9 天 后

        终于收到通知了!

        既然如此,可以排除论坛的问题了,估计还是微软的锅😶

          23 天 后

          DaleZ 所以new Outlook用起来如何

          DaleZ 您不是用过了吗

          我的观点可能过于客观,想听听不同的声音(

            4 个月 后

            DaleZ 估计还是微软的锅😶

            真相大白。
            几天前已经有其他人的 PR 解决此问题,实际上令人喷饭……

            信息补充:当订阅通知时,浏览器发送一个 Endpoint URL 给服务器,服务器保存,然后把通知发送给 Endpoint,让 Endpoint 发送给设备。

            1. 插件设置了 Endpoint URL 存储单元格最大 255 个字符。
            2. Microsoft Edge 的 Endpoint URL 长度高达 500+。
            3. 放不下,然后被截取到 255 个字符。
            4. 发送,但 URL 错误,然后 404。
            5. 然后喜剧发生了——我们开 Debug 模式,但插件认为所有 4xx 的 HTTP Error 都是因为 Endpoint URL 过期,于是废除此 URL,然后打印一个通知发送成功😅😅😅

            所以最后的解决方案是如此简单:单元格最大长度改大点,没了![tieba=pen]
            总之,通知永远不会发送到 Microsoft Edge。但是,只要 PR 推上来,论坛更新,一切就都解决了。
            期待~
            不过话又说回来,这个问题该怪谁呢(

            SteveWorkshop 估计流量包又跑完了,你在 Chrome 下面看到的应该是缓存,因为我这边 Edge 可以,Safari 不行()

              21 天 后
              13 天 后

              v1.3.1

              微调细节。
              现已与 Extiverse 兼容。

              大更新目前是不会有的,因为我想统一咱博客那边和这边的样式独立成一个库,这要做好多好多事情。另外计划添加的功能也有一些。
              不过概念图人人都爱看,所以放一张今年一月份的概念草稿出来吧:

              看了眼复活的 Pallet Theme,感觉在它的基础上做这个会更轻松也更完美……

                Betta_Fish 实际上 MS Store 里面的 PWA 应用风评都不怎么样……
                而且树大招风上架商店是要论坛被吃饱了撑的人拿去抗压测试吗


                更都更了再写写调了什么细节罢:
                滚动条更窄,若是启用了 Fluent 滚动条的 MS Edge 现在看着会更原生(浏览器兼容性较低);
                把主页那个对比度超低的分隔线砍了;
                主页的“NavigationView”在顶部显示的时候指示灯现在在原版 WinUI 中规定的位置;
                把 discussion-item 里面的文本颜色统一了一下;
                用 CSS 优化掉了一个本来由 SVG 实现的外观。
                由于 CSS 体积远小于 SVG,因此本版本在代码增加的情况下还做到了比上一个版本小零点几 KB(逃
                论坛一年没更新主题了快更新一下吧~

                © 2025 wvbCommunity 管理团队

                删封申诉 | 知乎专栏 | 状态监控 | 用户协议(EULA) | 隐私政策

                本站文章除其作者特殊声明外,一律采用CC BY-NC-SA 4.0许可协议进行授权,进行转载或二次创作时务必以相同协议进行共享,严禁用于商业用途。