PureLand 样式

写在最前 | FRONT

关键词:极乐净土样式,PureLand 样式,PureLand Flarum 样式

本来是想制作一份卡通的蓝天主题,
但是,需要和首页的blog相搭配起来,
就制作了这份比较注重阅读、交流与记录的主题,
取名为极乐净土,译为PureLand,多么希望,我们能一直纯洁童真!

演示地址 Demohttps://flarum.pro/ | https://flarum.pro/d/5-pureland-yang-shi

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

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


内容更新 | UPDATING

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

  • 第一版发布,边栏右置,移除头像,注重阅读交流与记录 - 4/8/2020
  • 增加 POST 页面的小头像,增加辨别度
    修复了一些 BUG - 4/9/2020
  • 修复了讨论的 BUG
    增加 引用美化效果 代码 - 4/17/2020
  • 修复自适分辨率BUG,以及适配 reflar/level-ranks 等级插件 - 4/19/2020

致谢 | 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/pureland.css">

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


样式内容 | CSS STYLE-SHEET

颜色

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

样式
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
44
45
46
47
48
49
50
.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags{position:inherit!important;-webkit-mask-image:none!important;padding-right:10px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:@config-primary-color}
::-webkit-scrollbar-track{background:#ededed}
.Search-input:before{display:inline-block;font-size:inherit;text-rendering:auto;content:"\f002";float:left;margin-right:-36px;width:36px;font-size:14px;text-align:center;position:relative;padding:7px 0;line-height:1.5;pointer-events:none;background:#0000000f;color:#fff;border-radius:4px 0 0 4px}
.Search-input input{float:left;width:225px;padding-left:50px;padding-right:32px;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s;box-sizing:inherit!important}
body{font-family:'Microsoft YaHei',"Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.6}
@media (min-width:1120px){
.containerNarrow{max-width:100%}
.Post-header{text-align:right;border-bottom:1px solid #ededed}
.PostUser-badges{display:none}
.DiscussionPage-stream{margin-left:-85px}
.Hero .container{padding-top:15px;padding-bottom:15px}
.PostUser-avatar{vertical-align:middle;position:relative;left:-7px;top:-2px;width:1.5em;height:1.5em;font-size:1em;line-height:1.5em}
.UserPage .Post{padding-left:18px}
.DiscussionListItem-author .Avatar,.IndexPage .DiscussionListItem-author .Avatar{display:none}
.DiscussionListItem-badges{width:0}
.containerNarrow{float:left;text-align:left}
.DiscussionHero--colored,.DiscussionHero--colored a{text-align:left}
.Post--BestAnswer{text-align:center;left:0!important;width:25%;z-index:999}
.Post-body a{border:1px solid #e0e0e0!important;padding:1px;padding-top:0}
.DiscussionListItem-badges{margin-left:-42px;margin-top:20px}
.Badge,.Badge .Badge-icon{vertical-align:middle}
.EventPost-icon{margin-top:2px;margin-left:0;padding-right:10px;width:auto;font-size:1.5em}
.sideNav,.sideNav>ul{width:190px;right:0;position:absolute}
.sideNavOffset{max-width:800px}
nav.IndexPage-nav.sideNav{width:190px;margin-right:0;position:relative;float:right}
.sideNavContainer{display:block}
.TagsPage nav.IndexPage-nav.sideNav{overflow:hidden;margin-right:-99999px}
.TagsPage .sideNavOffset{max-width:1200px}
.Post a.inline-image-link{margin-top:15px}
.Post-likedBy{position:absolute;top:17px}
.item-edited .ButtonGroup>.Button{padding:0}
.DiscussionHero-items{text-align:left}
.PostUser-level{float:right!important;position:inherit!important;margin:0!important}
.PostUser-bar{border-radius:.1px!important;margin-top:7px;height:6px!important;top:24px!important}
.PostUser-text{position:absolute;right:55px;top:24px;width:77px;font-size:12px}
}
.topbutton i{padding:5px}
.topbutton a{color:#fff;text-decoration:unset}
.IndexPage-nav .item-newDiscussion .Button{width:auto}
.Flagrow-Ads-fake-poststream-item{border:0!important}
.PostStream-item:not(:last-child){border:0}
@media (max-width:1024px) and (min-width:768px){
.sideNavOffset{max-width:700px}
nav.IndexPage-nav.sideNav{width:100%;position:initial!important;white-space:nowrap;overflow:auto}
.ComposerBody-header h3,.ComposerBody-header h3 a,.ComposerBody-header h3 input,.Post-body,.TextEditor textarea{font-size:1rem}
.PostsUserPage-discussion a{font-style:normal}
.UserPage .Post-header,.item-bestAnswerPost .Post-header{border-bottom:0}
}

截图 | PICTURE

image.png

image.png

image.png

image.png

image.png

image.png

image.png

其他 | OTHERS

黑夜模式

💡 可开启黑夜模式,但需要微调 board 颜色

欢迎横幅处添加小图标
1
2
3
4
5
6
<div class="topbutton">
<a href="#"><i class="icon fas fa-project-diagram Button-icon" style="color: rgb(255, 141, 70);"></i></a>
<a href="#"><i class="icon fas fa-wrench Button-icon" style="color: rgb(75, 147, 209);"></i></a>
<a href="https://kuoxo.com"><i class="icon fas fa-globe Button-icon" style="color: rgb(181, 158, 140);"></i></a>
<a href="#"><i class="icon fas fa-puzzle-piece Button-icon" style="color: rgb(253, 207, 88);"></i></a>
</div>
美化引用效果

image.png

后3个效果需配合 BBCODE 文本效果

1
2
3
4
5
6
.Post-body pre{font-size:12px;padding:0 10px;border-left:4px solid #929292;border-radius:0}
.Post-body blockquote{background:#f7f7f7;color:#444;font-size:14px;padding:10px;border:0;border-left:4px solid #46a4b2;border-radius:0}
.aaalert.aaerror .aainner,.aaalert.aainfo .aainner,.aaalert.aasuccess .aainner{font-size:14px;text-align:left;width:80%;margin-left:-8px;padding:5px 10px;border:0;border-radius:0}
.aaalert.aaerror .aainner{border-left:4px solid #ff5c5c!important}
.aaalert.aasuccess .aainner{border-left:4px solid #58a400!important}
.aaalert.aainfo .aainner{border-left:4px solid #569ff7!important}