FlarumCN 样式

写在最前 | FRONT

关键词:FlarumCN 样式,FlarumCN 活力橙 CSS,Flarum 中文社区样式

与 Flarum 中文社区的样式有细微差别,基于中文社区样式进行优化,
新增样式表外部调用,避免复制冗长代码片段,加重维护、误删和回档的压力。
简化排版,前置中文,去除部分英文说明。

演示地址 Demohttps://discuss.flarum.org.cn/ | https://flarum.pro/d/18-flarumcn-yang-shi

请遵循 CC-BY-NC-SA 4.0.!

其他:如果您对 !important 介意或有偏执,请不要使用或声讨以及后续的反馈,谢谢!
非安装方式达到覆盖效果,需要 !important 才可生效,暂不支持 Composer 安装。


内容更新 | UPDATING

遇到了错位或 BUG,欢迎留言反馈。在等待的这期间,您可以检查是否是由插件扩展带来的冲突,謝謝。

  • 新增活力橙🍊配色 - 7/19/2020
    修复间隔错位 Bug .PostStream-item{border: 0!important}
  • 优化气泡遮挡问题 - 6/4/2020
    .new .NotificationsDropdown-unread { background: #fff; position: absolute; z-index: 3; }
  • 插件扩展冲突,选择性使用 - 6/4/2020
    • Footer遮挡问题,导致管理员菜单溢出DEBUG:
      .App { overflow-x: visible!important; }

致谢 | THANKS

  • Yannis - Me.!
  • FlarumCN - BOSS :) .!
  • CodingNet - 托管 CSS 样式表~

如何使用样式 | HOT TO DO

  • 复制样式内容片段至后台中:外观>>自定义样式
    copy this code to your Appearance >> Custom Styles

  • 外部调用行代码,复制至: 外观>>自定义页眉

默认配色 💎
<link rel="stylesheet" type="text/css" href="https://css.yannis.cn/flarumcn.css">

活力橙🍊 配色
<link rel="stylesheet" type="text/css" href="https://css.yannis.cn/flarumcn_orange.css">

PS: 外部调用需要考虑到链接阻塞问题,建议您在本地备份,失效时可替代。
偶尔可能会出现短暂失效问题,还请耐心等待,不必太担心。国外线路请选择性调用,謝謝。


样式内容 | CSS STYLE-SHEET

颜色

第一种作为突出显示颜色,第二种作为背景元素样式。
The first will be used as a highlight color, while the second will be used to style background elements.
颜色参数: #4D698E , #4D698E

样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#4D698E} //@config-primary-color
::-webkit-scrollbar-track{background:#e8ecf3}
.App{overflow-x:visible!important}
.Avatar{border-radius:20%!important}
.App-header .Button.active,.App-header .Button.focus,.App-header .Button:active,.App-header .Button:focus,.App-header .Button:hover,.App-header .open>.Dropdown-toggle.Button,.ButtonGroup>.Dropdown-toggle:hover,.open>.Button.Dropdown-toggle{border-radius:10%!important}
.DiscussionList-loadMore .Button,.UserDirectoryList-loadMore .Button{background:#e0e0e0;color:#828282}
i.icon.fas.fa-check.Button-icon{color:#4D698E} //@config-primary-color
.TagDiscussionModal-form i.icon.fas.fa-check.Button-icon{color:#b8c3d2!important}
@media (min-width:769px){
body{background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);background-repeat:no-repeat;background:#ebebeb}
.IndexPage h3.DiscussionListItem-title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.DiscussionHero .TagsLabel .TagLabel{color:#4d698e;font-size:16px!important}
h3.DiscussionListItem-title{padding-bottom:3px}
.UserCard.Hero.UserHero{background:#7ca6e1!important}
.DiscussionListItem{margin-top:10px}
.DiscussionListItem-info{color:#888}
.EventPost-icon{text-align:center;margin-left:-19px;width:64px;font-size:22px}
.DiscussionListItem:hover{background:#f7f7f7}
.DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title{color:#1b2028}
.DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text{color:inherit!important;font-size:16px}
.Scrubber-handle{background-color:transparent!important}
.kuoxo{py:yannis!important}
.Hero{background:#fff!important;margin-bottom:15px}
.Hero h2{font-size:2em;font-weight:bolder;color:#191919}
.Hero-subtitle{color:#000;font-size:15px;margin:8px 0 0;line-height:1.5em}
.App-header .Button,.App-header .Button:hover{color:#fff}
.UserPage .Hero h2{color:#fff}
.Post-body{font-size:14px;line-height:1.7;position:relative;overflow:auto;overflow-wrap:break-word;border-radius:5px;margin-top:0;border:1px solid #d6d6d6;box-shadow:0 3px 9px 1px rgba(0,0,0,.1)!important;background:#fff;padding:20px;min-height:80px}
.Post-body pre{font-size:80%;border-radius:0;border-left-color:#959ea9;border-left-width:5px;border-left-style:solid}
.Post-body>:first-child,.Post-preview>:first-child{margin-top:0!important}
.Post-actions{margin-top:5px}
.Post-footer{margin-top:10px;margin-bottom:0}
.Post-header{margin-bottom:10px;color:grey}
.PostStream-item{border: 0!important}
.PostStream-timeGap{padding-top:0;padding-bottom:0}
.Select-caret{margin-left:5px}
.Post{padding-bottom:10px}
.PostStream-timeGap span{margin-top:-10px;position:absolute}
.UserPage .Post-body{box-shadow:none!important}
.tooltip.right{margin-left:-29px;margin-top:-18px;padding:0}
}.Post-body blockquote { color: #2c3e50; background-color: #f3f5f7; border-radius: 0; border: 0; border-left-color: #42b983; border-left-width: 5px; border-left-style: solid; padding: 0 15px; margin: 1rem 0; }
.new .NotificationsDropdown-unread{background:#fff;position:absolute;z-index:3}

截图 | PICTURE

即得即所见

其他 | OTHERS

活力橙🍊配色 - (兼容夜间模式)
  • 如果之前使用调用方法,请覆盖替换
    1
    <link rel="stylesheet" type="text/css" href="https://css.yannis.cn/flarumcn_orange.css">
  • 如果是直接复制 CSS 样式,请作如下修改

配色:#f38761#ff8100

1
body{background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);background-repeat:no-repeat;background:#ebebeb}
1
.Hero{background:#fff!important;margin-bottom:15px}

需要在默认基础上将如上内容覆盖为以下样式

1
body{background:#f6f6f6 url(https://css.yannis.cn/img/flarumcn_orange/new_bodybg.png) 10px fixed}
1
.Hero{background:#63584f0d!important;margin-bottom:15px}

并增添如下样式

1
2
3
4
.App:before{background: linear-gradient(to right,#fb9b47,#f48663,#ee757a)}
@media (min-width:769px) {
.DiscussionPage-discussion{background:url(https://css.yannis.cn/img/flarumcn_orange/topright_bodybg.png) no-repeat right -275px}
}

欢迎反应BUG,夜间模式样式问题优先

夜间模式需要加入以下样式,可配合 FoF 夜间模式 插件使用

1
2
3
4
5
6
7
8
9
10
body.dark a{border:none}
body.dark p{color:#fff}
body.dark h3.DiscussionListItem-title{color:#ab9681!important}
body.dark h2.DiscussionHero-title{color:#ad957e}
body.dark li.item-bestAnswerPost{background:0 0}
body.dark span.BestAnswer--User .username{color:#fff}
body.dark .PostStream-timeGap{padding:0 0 15px 0}
body.dark .PostStream-timeGap span{margin-top:-20px;border-bottom:2px solid #f38761}
body.dark .Hero-subtitle,body.dark h2.Hero-title{color:#93806c}
body.dark .Post-body{border:0;box-shadow:none!important;background:none}