2020 COLOR Flarum Theme

与暗黑风格相对的彩色风格出现了,
其实一开始打算弄白色系的,觉得不够粉男人,就Sao起来了 🙃
这个风格搭配Sao可爱粉和基佬紫以及迷人的工口色~


HOT TO INSTALLATION | 如何使用该风格

copy this code to your Appearance >> Custom Styles
复制这些片段的代码至你的后台管理中的外观>>样式

Demo Link: https://bbs.kuoxo.com/ | https://bbs.kuoxo.com/d/323-2020-color-flarum-theme
声明: 如果您对 !important 介意,请不要使用此主题,请自己码,谢谢!


UPDATING | 内容更新

Welcome to give me some inspiration or a bug, I will do it all day.
谢谢你能给我一些建议或者BUG,我会仔细check的!Great?😅

  • Feb. 25, 2020 第一版发布
  • Feb. 26, 2020
    Fixed the problem of excessive notification text
    修复了通知文字过大的问题
  • Apr. 7, 2020
    修改首页鼠标停留到内容效果
    修复了Hero的DIV错误和优化部分代码
    修改背景图片地址
    [https://kuoxo.com/images/flarum/color-background.png]

CONTRIBUTING | 贡献

Yannisme - Just me 😀
这就是我 😀


SUGGESTIONS | 建议

💡 It needs Colored Header Mode
💡 本主题需搭彩色页眉使用

Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements.
颜色搭配,第一种作为突出显示颜色,第二种作为背景元素样式。
Colors #ff6476 , #6d508b

✅ please Colored Header
✅ 勾选 彩色页眉


CONTENT | 主题代码内容

Apr. 7, 2020 🌟

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
body,body.touch {
background: #faf6f5;
}

.DiscussionHero .item-title {
margin: 15px;
}

.Scrubber-handle {
background: #faf6f5;
}

a.NotificationGroup-header {
font-size: 16px!important;
}

.Notification-content {
margin-right: 5px;
font-size: 14px;
}

.NotificationGroup-content li a {
font-size: 12px;
}

.DiscussionListItem-title, .UserPage .DiscussionListItem-title {
color: #313131!important;
}

.UserCard.Hero.UserHero {
background: #505a8b url(https://kuoxo.com/images/flarum/color-background.png)!important;
}

.UserCard.Hero.UserHero .darkenBackground {
background: rgba(0, 0, 0, 0)!important;
}

@media (min-width:768px) {
.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags {
margin-right: 0;
position: inherit;
padding-right: 10px
}

.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags {
transition: none;
-webkit-mask-image: none
}
}

body {
font: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.Alert {
background: #ede8f2;
}

.Alert, .Alert a, .Alert a:hover, .Alert .Button, .Alert .Button:hover, .Alert .Button:active, .Alert .Button.active, .Alert .Button:focus, .Alert .Button.focus {
color: #7f6699;
}

.Hero {
background: #ffe305 url(https://kuoxo.com/images/flarum/color-background.png);
}

.Hero h2,.Hero-subtitle,.App-header .Button {
font-weight: 600;
}

h3.DiscussionListItem-title {
font-size: 18px;
}

.sideNav .Dropdown--select .Dropdown-menu>li>a {
font-size: 14px;
}

.containerNarrow {
color: #1a1a1a;
}

.App-header .Button {
color: #f3f0f5;
font-size: 16px;
font-weight: 700;
}

.App-header .Button:hover {
color: #fde4bb;
}

.App-header,.App-header a {
color: #ffffff;
font-size: 21px;
font-weight: 600;
text-decoration: none;
}

.DiscussionListItem-title,.UserPage .DiscussionListItem-title {
color: #ededed;
}

.DiscussionListItem {
margin-top: 15px;
}

.IndexPage .DiscussionListItem:hover {
background: #ede8f25c;
border-left: 5px dashed #dddddd;
margin-left: -20px;
}

h2.DiscussionHero-title,.PageHero-title>a {
color: #1a1a1a;
}

.DiscussionList-loadMore .Button {
width: 80%;
background: #ede8f28a;
}

.Post-body blockquote {
border: 2px dotted #bac;
}

.Post-body pre {
border: 2px dotted #aaa;
}

.aaalert.aaerror .aainner {
border: 2px dotted #b94a48;
text-align: left;
}

.aaalert.aasuccess .aainner {
background-color: #dff0d8;
border: 2px dotted #468847;
text-align: left;
}

.aaalert.aainfo .aainner {
border: 2px dotted #3a87ad;
text-align: left;
}

SCREENSHOTS | 效果截图

image.png

image.png

image.png

image.png

image.png

OTHERS | 其他搭配

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

::-webkit-scrollbar {/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}

::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background: @config-secondary-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
}