OXO 样式

Flarum►主题 评论

A COAT，U CAN TAKE IT OFF ANYTIME , BECAUSE IT’S JUST A PIECE OF CSS, ISN’T IT?
这是一件衣服，你可以随时穿上或者脱下来，因为它只是一段代码，很方便对吧！？

HOT TO INSTALLATION | 如何使用该风格

copy this code to your Appearance >> Custom Header or Custom Footer
复制这些片段的代码至你的后台管理中的外观>>自定义页眉/页脚

why not Custom Styles, because I CANNOT write it (“@media (xxx){xxx}”) here !!
为什么不放在自定义样式中，因为无法将@media写在其中

Demo Link: https://bbs.kuoxo.com/ | https://bbs.kuoxo.com/d/301-oxo-flarum-themes
Link: https://discuss.flarum.org/d/22245-oxo-flarum-themes-by-yannisme

UPDATING | 内容更新

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

  • Dec. 12, 2019 第一版发布
  • Jan. 15, 2020 进行细节优化，更至第二版

[AINFO] 主题暂未适配边栏友情链接，后续会优化不同分辨率下的适配问题，包含手机端。
@media可以写在自定义样式里面了，会对其优化、整理，请耐心等待…[/AINFO]

CONTRIBUTING | 贡献

Flarum - Without you, nothing exist
没有你，就没有这个主题的存在
Yannisme - Just me 😀
这就是我 😀

SUGGESTIONS | 建议

Colors #b59e8c , #444
颜色搭配，第一种作为突出显示颜色，第二种作为背景元素样式。

✅ Colored Header
✅ 勾选 彩色页眉

I suggest use the following fonts
同时，建议使用以下网页字体，有利于阅读和缓解视觉疲劳

1
2
3
1. font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
2. font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
3. font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

CONTENT | 主题代码内容

Dec. 12, 2019

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
body {
	font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif;
	background:-moz-linear-gradient(to bottom,#f2f2f2,#ebebeb)
}
.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:rgba(0,0,0,.11);
	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
}
.Post-body table {
	box-shadow:0 -1px 5px -2px #515151!important
}
@media (min-width:768px) {
	.DiscussionListItem {
	position:relative;
	margin:0;
	padding:0;
	border-radius:5px;
	margin-top:18px;
}
.UserPage .sideNavOffset,.sideNav .Dropdown--select {
	display:block;
	background:#fff;
	padding:15px;
	padding-top:5px;
	padding-bottom:5px;
	box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
	border-radius:6px
}
.DiscussionListItem-count {
	margin-top:5px
}
body {
	background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);
	background-repeat:no-repeat
}
.IndexPage-results sideNavOffset .Post.CommentPost {
	background-color:#fff!important;
	border-radius:5px;
	margin-top:20px;
	-webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
	box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important
}
.Scrubber-handle {
	background-color:transparent!important
}
bbs.kuoxo.com {
	author:yannisme
}
.DiscussionHero .TagsLabel .TagLabel.colored {
	margin-right:5px;
	background:#fff!important;
	color:#667c99
}
.DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text {
	color:inherit!important
}
.Hero {
	box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
	background-color:#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
}
.DiscussionHero .TagsLabel .TagLabel {
	color:#4d698e;
	font-size:18px!important
}
.App-header .Button,.App-header .Button:hover {
	color:#fff
}
.IndexPage-results .DiscussionListItem-content {
	padding-left:80px;
	padding-right:80px;
	padding-top:10px;
	border-radius:5px;
	padding-bottom:10px;
	background-color:#fff!important;
	-webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
	box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important
}
.UserPage .DiscussionListItem-content {
	padding-left:80px;
	padding-right:80px;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#fff!important;
	border-bottom:1px solid #ebebeb
}
.UserPage .Hero h2 {
	color:#fff
}
.DiscussionPage .CommentPost {
	border-radius:5px;
	margin-top:20px;
	box-shadow:0 4px 30px 0 rgba(0,0,0,.1)!important;
	background:#fff
}
}

[ASUCCESS]Jan. 15, 2020 🌟 推荐 [/ASUCCESS]

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
body {
	font-family:"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	background:-moz-linear-gradient(to bottom,#f2f2f2,#ebebeb);
}
.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:rgba(0,0,0,0.11);
	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;
}
.Post-body table {
	box-shadow:0px -1px 5px -2px #515151!important;
}
@media (max-width:767px) {
	#yqlj {
	display:none;
}}
@media (min-width:768px) {
	body {
	background-image:linear-gradient(to bottom,#f2f2f2,#ebebeb);
	background-repeat:no-repeat;
}
.DiscussionListItem {
	position:relative;
	margin:0;
	padding:0;
	border-radius:5px;
	margin-top:18px;
}
.IndexPage .DiscussionListItem-info>.item-tags {
	margin-right:0;
	position:absolute;
	left:80px;
	top:38px;
	max-width:150px;
	white-space:nowrap;
	overflow:inherit;
	transition:max-width .2s ease-in-out,-webkit-mask-image .2s;
	-webkit-mask-image:none;
	font-size:12px;
}
.IndexPage .DiscussionListItem-controls {
	right:32px;
	top:38px;
}
.IndexPage .DiscussionListItem-title {
	margin-right:155px;
	padding-bottom:30px;
}
.IndexPage .DiscussionListItem-author .Avatar {
	width:48px;
	height:48px;
	position:absolute;
	left:17px;
	border-radius:48px;
	top:20px;
}
.UserPage .DiscussionListItem-content {
	padding-left:80px;
	padding-right:80px;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#fff!important;
	border-bottom:1px solid #ebebeb;
}
.IndexPage-results .DiscussionListItem-content {
	padding-left:80px;
	padding-right:80px;
	padding-top:0;
	border-radius:5px;
	background-color:#fff!important;
	-webkit-box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
	box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
}
.sideNav .Dropdown--select,.UserPage .sideNavOffset {
	display:block;
	background:#fff;
	padding-left:15px;
	padding-right:15px;
	padding-top:5px;
	padding-bottom:5px;
	box-shadow:0 1px 5px 0 rgba(151,158,181,.28)!important;
	border-radius:6px;
}
.Scrubber-handle {
	background-color:transparent!important;
}
bbs.kuoxo.com {
	author:yannisme;
}
.DiscussionHero .TagsLabel .TagLabel.colored {
	margin-right:5px;
	background:#fff!important;
	color:#667c99;
}
.DiscussionHero .TagsLabel .TagLabel.colored .TagLabel-text {
	color:inherit!important;
}
.DiscussionHero .TagsLabel .TagLabel {
	color:#4d698e;
	font-size:18px!important;
}
.Hero {
	box-shadow:0 1px 10px 0 rgba(151,158,181,.28)!important;
	background-color:#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:#ffffff;
}
.UserPage .Hero h2 {
	color:#ffffff;
}
.Post-body {
	font-size:14px;
	line-height:1.7;
	position:relative;
	overflow:auto;
	overflow-wrap:break-word;
	border-radius:5px;
	margin-top:0;
	box-shadow:0 8px 9px 0 rgba(0,0,0,0.1) !important;
	background:#fff;
	padding:20px;
	min-height:80px;
}
.Post-body>*:first-child,.Post-preview>*:first-child {
	margin-top:0 !important;
	margin-bottom:0;
}
.Post-actions {
	margin-top:5px;
}
.Post-footer {
	margin-top:10px;
	margin-bottom:0;
}
.Post-header {
	margin-bottom:10px;
	color:#808080;
}
.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;
}}

SCREENSHOTS | 效果截图

Dec. 12, 2019

image.png

Jan. 15, 2020

image.png

Yannis学习分享&个人记录

倘若你没有耐心和信任, 就请收起你所谓的喜欢和爱.!