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

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

v1.2.0-beta

下一个大版本更新预览已推送。
已更新界面,但尚不会宣布更新内容。此版本仅用于检查 Bug。

焊锡锡 麻烦您可以右键一下 Button 然后把控制台截图最大化给我,谢谢


不用了,谢谢您的反馈❤️

    位于 dev-main 通道的测试更新

    恳请论坛进行测试。
    撤销,稍后正式发布。

    试图搞一个 Logo。

    但各位应该都看得出来它与官方的联系……
    WinUI Logo
    所以这样算侵权吗

    v1.2.0

    首先对微软表示衷心的感谢,通过对微软的开源 Windows UI Library 代码进行研究,我们进一步提升了 UI 细节。

    TL;DR

    进度环不再具有锯齿。
    对一些控件应用了亚克力材料。
    更改了一些细节。

    详细更新内容

    • 更新了上下文菜单项目的外边距。
    • 更新了按钮边框并删除阴影。
    • 更新了 UI 边框,现在是半透明的边框。
    • 模态窗口圆角与边框之间不再有缝隙。
    • 对少量控件应用了主题色。
    • 更新背景材料为半透明色。
    • 更新了通知样式。
    • 更新了模态窗口背景。
    • 更新了输入控件和选择控件的样式。
    • 更新了工具提示的样式并添加亚克力背景材料。
    • 修正浅色模式下审核帖子的按钮上文字对比度低的问题。
    • 为上下文菜单添加了亚克力背景材料。

    敬请注意

    亚克力材料仅当符合以下条件时可用:

    • 当前 Flarum 布局不处于移动端模式;
    • 您的浏览器支持 backdrop-filter CSS(不包括 -webkit-backdrop-filter);

    当处于不符合条件的设备时,使用亚克力材料的 UI 将回退到纯色背景。
    此版本的主题使用 outline 部分替代了 border,这将导致某些使用了.Dropdown-menu class 但不是上下文菜单的 UI 出现问题。

    • 对于用户:请通知我们以针对此类 UI 进行适配。
    • 对于开发者:不是上下文菜单的 UI 请尽量避免使用 .Dropdown-menu class。

    今天可以更新了⑧……
    DaleZ 另:“不用了”是因为后来我发现有个“允许用户举报自己的帖子”的开关😅
    把自己的帖子举报了233次🤪

    v1.2.1

    未作界面更新,仅重写少量 CSS。

    为啥重写嘞?

    好好的圆角全被你 Safari 毁掉了!人家 Chrome 和 Firefox 2021年早早地就修了这个 Bug,你呢?
    (又及:iOS 16.4 发布于今年。)
    害得我不得不用阴影来伪装边框🤬

    最后提两个意见:

    1. 更新下fof/Night-mode,最新版本解决了深色模式还是浅色滚动条的问题。
      不过论坛目前通过 CSS 解决了这个问题,所以不更新也可以,酌情吧。
    2. 如果\webmanifest是可编辑的,那么替换成
      {
          "name": "wvbCommunity",
          "description": "wvbCommunity: where Vista booms! 这里是一个正在成为电脑数码技术乐园的小圈子。",
          "start_url": "/",
          "scope": "/",
          "dir": "auto",
          "theme_color": "#1B74E8",
          "display": "standalone",
          "icons": [
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-48x48.png",
                  "sizes": "48x48",
                  "type": "image/png"
              },
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-72x72.png",
                  "sizes": "72x72",
                  "type": "image/png"
              },
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-96x96.png",
                  "sizes": "96x96",
                  "type": "image/png"
              },
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-144x144.png",
                  "sizes": "144x144",
                  "type": "image/png"
              },
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-196x196.png",
                  "sizes": "196x196",
                  "type": "image/png"
              },
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-256x256.png",
                  "sizes": "256x256",
                  "type": "image/png"
              },
              {
                  "src": "https://community.wvbtech.com/assets/pwa-icon-512x512.png",
                  "sizes": "512x512",
                  "type": "image/png"
              }
          ],
          "background_color": "#1B74E8",
          "display_override": [
              "window-controls-overlay",
              "standalone"
          ]
      }
      即可打开Window Controls Overlay,如果不可编辑但可添加额外行,那加上"display_override": ["window-controls-overlay", "standalone"]也可以完成。
    15 天 后

    各位觉得这个噪点够吗……我在电脑上凑屏幕也看不到噪点,在 iPhone 上开最大亮度才能勉强看到

    1 个月 后

    焊锡锡 是……吧,把浏览器 JS 关了之后拷贝出了原始纯洁未污染过的 HTML 结构树,然后连同 public 下面的东西一起掏出来,然后再把所有它要的 API 用静态文件伪装……还好它认不出来

    论坛大部分图片似乎又无法显示了……

      Famous fixed,其实是对象存储的流量包又跑完了(
      这周末一天十几个G,很奇怪

      2 个月 后

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

      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 推送通知。一直以来我都搞错了。有人可以检查下论坛日志吗?

        © 2025 wvbCommunity 管理团队

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

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