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

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

DaleZ 强烈谴责Firefox桌面端对PWA的原生支持（

    DaleZ 你说的对，但是macOS 14原生PWA是一款[tieba=huaji]
    周六贴图

    提本狐 可以在侧边栏点wvb logo，如果不行就试试“主页”；也可以点“全部主题”

        提本狐 最近论坛的可响应度确实下降了……明明有通知在中心，铃铛也不高亮（除非刷新）

          补图

          其实以前Teams内置过一个应该是嵌入式的，那个东西效果还挺好的（）不过是20年21年左右的事了

            ha1 内置过一个应该是嵌入式的

            ？Window Overlays Control？Electron 系应用都可以轻松做到
            没想到您是一个 Safari 坚守者，那看不到我的 Blog 的标题栏自定义了（

            • ha1 回复了此帖

                目前有一个非常智能的漏洞阻止此主题推出。
                Less 预处理器会非常智能地把以下这个平平无奇的 CSS：

                background: padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff20 90%, #00000060 100%), border-box var(--button-bg);

                给优化为：

                background: padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#fff 20 90%, #000 60 100%), border-box var(--button-bg);

                很棒的优化！按钮颜色没了
                甚至加到自定义 CSS 里面也逃不过，真是太智能了

                DaleZ 给点建议

                1. 个人认为先把控件（如按钮、搜索框）这些控件的样式写好并且完善之后再改UI（但楼主好像已经写好了？[tieba=yinxian]

                2. 最好不要把所有东西都搞成卡片，这会让界面有种莫名的割裂感（而且FD中卡片的阴影似乎没那么重）
                  一个分割线，甚至加点边距就可以将不同内容分割出来
                  如果有"动态"这类东西可以做成卡片式的，但是泥潭并没有（

                3. 既然要用Fluent Design，就尽量别用大色块了，而且FD的取色和Flarum默认主题的取色也有点不一样，可以下个WinUI3 Gallery看看Colors那一块

                4. 不是每个地方底下都要加厚边框，比如这种弹出菜单，一个阴影足矣（WinUI里边还要用亚克力）

                其他的地方，建议看一看Windows11设计规范
                希望对你有一些帮助，楼主加油[tieba=huaji]

                    DaleZ 草
                    于是真开始为了自己的使用问题开始开发插件解决了

                    gyigi 属于是让用户自己解决自己的问题了（

                          Betta_Fish 好的。
                          首先的首先先声明：可完全自定义的内容，本人严格遵循 Windows 11 设计原则，设计灵活度受限的地方尽可能在不破坏原始功能的情况下刷新。
                          Flarum 是第三方框架，设计灵活度受限的情况是不可能避免的。

                          1. 是的。因为之前自己重写过一遍，现在可以光速适配[tieba=huaji]，按钮、切换器、输入框和进度条等原生存在的控件已像素级移植。
                          2. 微软也用卡片，割裂感的话……个人没感觉。顺便一提，分割线很难搞，因为 Flarum 往死里共用 class，id 罕见😮‍💨……可能这边的分割线看起来不错，但同时应用到了另一边的时候可能没法看
                            至于阴影，直接从 Fluent UI Web Components 里抄过来的，最多只能说微软也做得不像。
                          3. 还没看见过大色块，但如果你说的是 Flarum 那边的，不敢动——随随便便就能出问题，包括代码和人为意见层面的🫥
                          4. 这个阴影是打样式的时候打反了😂，不好意思，正式上线的时候会纠正的。
                            至于亚克力，出于性能和 Flarum 的主流审美考虑，不会添加，但可能考虑加噪点（这个微软亲手重打造过，也可以像素级抄袭😝）

                          总而言之，这是独特与妥协的完美结合[tieba=yinxian]，但仍然有丰富的细节。如果您还有其它建议，请尽管提出来，因为现在在没有更好的布局下，主页/用户面板/帖子内容我觉得用卡片分层是最好的了，这也是微软经常用的。

                              DaleZ localhost搭Flarum成功了？圆了我多年前的梦想
                              想知道如何实现

                                  DaleZ 还没看见过大色块


                                  个人认为这算是。

                                  DaleZ 微软也用卡片，割裂感的话……个人没感觉。顺便一提，分割线很难搞，因为 Flarum 往死里共用 class，id 罕见😮‍💨……可能这边的分割线看起来不错，但同时应用到了另一边的时候可能没法看

                                  主页/用户面板/帖子内容我觉得最好用卡片分层，这也是微软所建议的。

                                  我也没说卡片不能用，但是没必要用卡片的地方就尽量别用
                                  Flarum原版主题里很多地方不用卡片也能达到分层的效果，这些地方也不需要再加卡片

                                  用户页完全可以做成这样。无需使用卡片也能达到分层的效果

                                  DaleZ 另外您的图片很黄（

                                  咱开了全局护眼（

                                          DaleZ 只是懒得下chrome而已（）macOS版的chrome用一段时间要1个G左右了（）而且我个人认为Safari的优化确实比Chrome好太多
                                          插楼，如果想用Chromium但是又不想用臃肿的Chrome的话可以试试ungoogled-chrome，macOS，Linux和win都有
                                          macOS下直接从homebrew装就行：

                                          brew install --cask eloston-chromium

                                            这集成度好像还不错（Edge 115）

                                            何木槿 我到现在也没搞明白（
                                            让我重新装一次也不一定成功（

                                            Betta_Fish 我打算直接扔掉卡片了，啥也不做
                                            另外您的图片很黄（

                                            ThinkBou 谢谢，Fluent 2 的文档比 Learn 的详细多了

                                                    诚挚邀请各位测试。
                                                    打开控制台，新建样式规则，然后把下面的东西全部塞进去：

                                                    :root{accent-color:var(--primary-color);}.Button:not(.Button--flat,.App-header .Button,.App-header .Button:hover,.UserCard .Button,.UserCard .Button:hover){background:padding-box linear-gradient(var(--button-bg),var(--button-bg)),border-box linear-gradient(#ffffff20 90%,#00000060 100%),border-box var(--button-bg);border:1px solid transparent;}.Select>.Select-input{background:padding-box linear-gradient(var(--control-bg),var(--control-bg)),border-box linear-gradient(#ffffff20 90%,#00000060 100%),border-box var(--control-bg);border:1px solid transparent;}.Select>.Select-input:focus{background:padding-box linear-gradient(var(--primary-color),var(--primary-color)),border-box linear-gradient(#ffffff20 90%,#00000060 100%),border-box var(--primary-color);}div.PostUser-bar--empty{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB2aWV3Qm94PSIwIDAgMC4yNjQ1ODMzNSAwLjc5Mzc1MDA1IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxnCiAgICAgaWQ9ImxheWVyMSI+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzhkOGQ4ZDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIKICAgICAgIGlkPSJyZWN0MzEiCiAgICAgICB3aWR0aD0iMC4yNjQ1ODMzNSIKICAgICAgIGhlaWdodD0iMC4yNjQ1ODMzNSIKICAgICAgIHg9IjAiCiAgICAgICB5PSIwLjI2NDU4MzM1IiAvPgogIDwvZz4KPC9zdmc+Cg==);}.PostUser-bar{height:3px;}.Dropdown-menu{box-shadow:0 0 2px 0 rgba(0,0,0,0.2),0 16px 32px rgba(0,0,0,0.24);padding:0;}.Dropdown-menu>li{margin:8px;}.Dropdown-menu>li>a,.Dropdown-menu>li>button{border-radius:4px;}.Dropdown-menu:not(.sideNav .Dropdown-menu,.item-scrubber .Dropdown-menu){background-color:var(--body-bg);background-image:url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg' style='background:transparent;filter:grayscale(1) contrast(2.5);opacity:5%25'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='100' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");}.Button:active,.Button.active,.open>.Button.Dropdown-toggle{box-shadow:unset;}.item-nav>div>ul>li{margin:8px 0;padding:0 8px;border-radius:4px;}.item-nav>div>ul>li:hover,.item-nav>div>ul>li.active{background-color:#99999922;}.item-nav>div>ul>li:active{background-color:#99999933;}.item-nav>div>ul>li.active::before{content:'';width:4px;height:17px;background:var(--primary-color);border-radius:2px;float:left;margin:9px -28px 0 -8px;}.item-nav>div>ul>li.active::before{content:'';width:4px;height:17px;background:var(--primary-color);border-radius:2px;float:left;margin:9px -28px 0 -8px;}.Hero{margin:12px;border-radius:8px;box-shadow:0 0 2px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.14);}.darkenBackground{border-radius:8px;}.Modal{border-radius:8px;box-shadow:0 0 2px rgba(0,0,0,0.2),0 64px 128px rgba(0,0,0,0.24);}.Modal-content{border-radius:8px;}.IndexPage>.container{margin-top:16px;}.LoadingIndicator{animation:none;border:none;border-radius:0;background-color:currentColor;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSI1Ljk2MyA1Ljk2MyAyMS45NDA2NjYgMjEuOTQwNjY2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9ImxheWVyMSI+PGNpcmNsZSBjeD0iMTYuOTMzMzMyIiBjeT0iMTYuOTMzMzMyIiByPSI5LjQ3MDE4NDMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIiBzdHJva2UtZGFzaG9mZnNldD0iIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGlkPSJjaXJjbGViYXIiIHN0cm9rZS1kYXNoYXJyYXk9IjEgMTAwIj4gPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJBVVRPIiB0eXBlPSJyb3RhdGUiIHZhbHVlcz0iMCAxNi45MzMzMzIgMTYuOTMzMzMyOzQ1MCAxNi45MzMzMzIgMTYuOTMzMzMyOzEwODAgMTYuOTMzMzMyIDE2LjkzMzMzMiIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+IDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGF0dHJpYnV0ZVR5cGU9IkFVVE8iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwLjAxIDEwMDszMCAxMDA7MC4wMSAxMDAiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvZz48L3N2Zz4=);mask:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSI1Ljk2MyA1Ljk2MyAyMS45NDA2NjYgMjEuOTQwNjY2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9ImxheWVyMSI+PGNpcmNsZSBjeD0iMTYuOTMzMzMyIiBjeT0iMTYuOTMzMzMyIiByPSI5LjQ3MDE4NDMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIiBzdHJva2UtZGFzaG9mZnNldD0iIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGlkPSJjaXJjbGViYXIiIHN0cm9rZS1kYXNoYXJyYXk9IjEgMTAwIj4gPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJBVVRPIiB0eXBlPSJyb3RhdGUiIHZhbHVlcz0iMCAxNi45MzMzMzIgMTYuOTMzMzMyOzQ1MCAxNi45MzMzMzIgMTYuOTMzMzMyOzEwODAgMTYuOTMzMzMyIDE2LjkzMzMzMiIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+IDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGF0dHJpYnV0ZVR5cGU9IkFVVE8iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwLjAxIDEwMDszMCAxMDA7MC4wMSAxMDAiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvZz48L3N2Zz4=);transform:rotate(-95deg);}.Form--centered .FormControl[type=text],.Form--centered .FormControl[type=email],.Form--centered .FormControl[type=password]{border-radius:4px;border:2px solid transparent;background:padding-box linear-gradient(var(--body-bg),var(--body-bg)),border-box linear-gradient(#99999933 calc(100% - 2px),#999 calc(100% - 1px),#999);}.FormControl:not(input[type~=search]):focus{background:padding-box linear-gradient(var(--body-bg),var(--body-bg)),border-box linear-gradient(#99999933 calc(100% - 2px),var(--primary-color) calc(100% - 1px),var(--primary-color)) !important;}.Checkbox--switch .Checkbox-display{width:40px;height:20px;border-radius:20px;margin-top:0px;}.Checkbox--switch .Checkbox-display:before{background:white;width:20px;height:20px;border:5px solid var(--control-bg);box-shadow:none;transition:border .2s;top:0px;left:0px;}.on.Checkbox--switch .Checkbox-display{background:var(--primary-color);}.on.Checkbox--switch .Checkbox-display:before{left:20px;border:5px solid var(--primary-color);}.AfruxWidgets-Widget-content{box-shadow:0 0 2px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.14);}.AlertManager .Alert{box-shadow:0 0 2px rgba(0,0,0,0.2),0 16px 32px rgba(0,0,0,0.24);}.Composer{box-shadow:0 0 2px rgba(0,0,0,0.2),0 64px 128px rgba(0,0,0,0.24);border-radius:8px 8px 0 0;}.ComposerBody-loading{border-radius:8px;}@media (min-width:768px){.Composer.active:not(.fullScreen){box-shadow:0 0 0 2px var(--primary-color),0 64px 128px rgba(0,0,0,0.24);}}

                                                    即可预览。

                                                      © 2025 wvbCommunity 管理团队

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

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