Fluent 主题

DaleZ

Fluent-Flarum

使用这款主题为你的 Flarum 换新颜。
本主题参考了 Microsoft Fluent Design System 进行设计，为您带来熟悉、柔和、亲切和流畅的感觉。

composer require dalez/fluent-flarum

覆盖的内容

按钮、切换开关、选项菜单、标签、边栏、模态窗口、信息栏、加载动画、输入控件和复选框。
不确定是否与 Flarum Categories 兼容。

展示

ℹ下列截图已经过时，不代表当前状态。
请改为访问 Demo 站。

Spoiler

DaleZ

补充一句，这个主题也部分改变了 Forum Widgets 和 Level Ranks 的外观

null o

你这主题github没提交Releases啊

DaleZ

null o 抱歉忘了，现在可以了😅

相当于 dev-main，1.0.0 微调了样式并新增两个部分的样式更新，若安装了 dev-main 建议更新。

null o

DaleZ 那天装了dev版，今天换了1.0版本，不知道是不是我换了字体的关系，感觉有点别扭。

Image description

不过你的主题，改正了tohsakarat/table-of-content 错位的问题👍
继续加油！！！

DaleZ

null o 不知道是不是我换了字体的关系

那当然是推荐微软系字体啦，~~原汤化原食~~

null o 改正了tohsakarat/table-of-content 错位的问题

我甚至没见过这个插件，所以可能是个巧合😂

DaleZ

v1.0.1

改正不正确的细节。
更新覆盖层材料。
更新部分区域为 Fluent 默认配色。
新增少量控件更新。

看起来几乎所有的控件都刷新完成了……如果有任何 UI、布局的问题或建议，亦或是哪个插件有需要额外刷新的控件，请尽管提出。

啊Q

夜间模式没1.0正常，发黄不够黑，另外刷新的时候，那个转的圈外面都有虚线框，我还是想用回1.0.0版本，可以吗

DaleZ

啊Q 当您适应了 Flarum 默认的偏蓝背景时，看中性灰色会发生此情况。适应就好。
至于虚线框，我这边无法复现，请提供截图或网址，个人认为您的浏览器版本可能过旧。
如果仍然希望回退到 1.0.0，请重新安装并在安装时指定版本号。
非常感谢。

DaleZ

由于中文站前段时间的问题，未在这里发布更新日志。
当前版本为1.1.3，若要查看之前的更新内容，可以转到国际站。
之后的更新日志将继续发布在此处，谢谢各位支持。

DaleZ

v1.2.0-beta

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

DaleZ

v1.2.0

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

TL;DR

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

详细更新内容

Spoiler

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

敬请注意

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

当前 Flarum 布局不处于移动端模式；
您的浏览器支持 backdrop-filter CSS（不包括 -webkit-backdrop-filter）；

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

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

DaleZ

v1.2.1

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

Spoiler

为什么要重写？
懒惰的苹果
害得我不得不用阴影来伪装边框🤬

DaleZ

示例站点已可用。
请注意：其托管于 Github Pages 上，所以无法实现真正意义上的“运行”，很多功能也是不可用的。

DaleZ

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

v1.3.0

TL;DR

更微妙的 UI
很多控件都已更新为更接近原生控件的样式，使应用看起来更加熟悉。此版本还去除了不必要的阴影，以增强整体 UI 的连贯与一致性。
更友好的交互
控件在更接近原生样式的同时，还能够对您的操作做出反应，使操作变得更有活力。
适配新插件
此版本增加了对 Blog 的基础支持。
不止为人人，更为每个人
此版本引入了组件的概念，设计自定义 CSS/Less 时，只需按需导入组件便可轻松地 Fluent 化您的目标元素*。
*：实验性功能。某些特性可能会在将来增加或删除。设计指南稍后将在 Github 发布。

完整更新内容

Spoiler

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

问题

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

Spoiler

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

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

新年特别内容

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

Spoiler

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%);
    }
}

蓝色调：

Spoiler

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%);
    }
}

绿色调：

Spoiler

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%);
    }
}

kai

Image description
搜尋欄不適合用透明底

DaleZ

kai 抱歉，这个是从原生控件抄过来的，原本就带透明底。
或许可以用 Less 混合来产生相同的色彩……但会困难一些，因为还要考虑彩色标题栏。
~~如果不是强迫症的话，建议假装看不见~~

Diamochang

我已经在 FreeFlarum 那边申请在他们的服务上安装主题了，相关的 Issue 在这里。
如果不出意外，使用 FreeFlarum 的朋友也能体验这个主题了。

kai

現在好像要上 https://support.freeflarum.com 提要求了
不收 Issue

不管，先補上
https://support.freeflarum.com/d/53-dalezfluent-flarum

找幾個人去投票，應該不難上架

Diamochang

Diamochang 有位朋友在 FreeFlarum 支持论坛上分享了一个临时方案：使用如下的 CSS 样式。

.Hero-close {
display: none;
}

.Post-body {
    border-radius: 5px;
    padding: 10px;
    min-height: 80px
}

header.Hero.DiscussionHero, header.Hero.WelcomeHero {
    border-radius: 10px !important;
    margin: 10px;
    box-shadow: 0 6px 18px rgba(14,21,47,0.1),0 -2px 6px rgba(14,21,47,0.1);
}
.Hero, .UserPage {
    border-radius: 10px !important;
    margin: 10px;
}
.Hero, .UserPage .darkenBackground {
    border-radius: 10px !important;
}

.CommentPost.Post--by-actor {
    border-left: solid @config-primary-color;
}

@media (min-width:992px){
    .TagTiles>li{
        width: 30% !important;
        border-radius: 10px !important;
        margin: 10px;
        box-shadow: 0 6px 18px rgba(14,21,47,0.1),0 -2px 6px rgba(14,21,47,0.1);
    }
}

@media (max-width:991px) and (min-width:768px){
    .TagTiles>li{
        width: 45% !important;
        border-radius: 10px !important;
        margin: 10px;
        box-shadow: 0 6px 18px rgba(14,21,47,0.1),0 -2px 6px rgba(14,21,47,0.1);
    }
}

@media (max-width: 767px){
    .TagTiles>li{
        border-radius: 10px !important;
        margin: 10px;
        box-shadow: 0 6px 18px rgba(14,21,47,0.1),0 -2px 6px rgba(14,21,47,0.1);
    }
}

在插件没有获得 5 个投票之前可以用这个方案先顶着，不过它所实现的样式有限。