现用 Flarum 讨论社区 CSS 样式分享

自定义 CSS 样式:

/* 固定左侧标签栏 */
@media (min-width:992px) {
	.sideNav, .sideNav>ul {
		width: 190px;
		position: sticky;
		top: 80px;
	}
	.App {
		overflow-x: visible;
	}
	/* 版块页不受影响 */
	.CategoriesPage.TagsPage .sideNav,
	.CategoriesPage.TagsPage .sideNav>ul {
		position: unset;
	}
	/* 标签页不受影响 */
	.TagsPage.TagsPage .sideNav,
	.TagsPage.TagsPage .sideNav>ul {
		position: unset;
	}
}

.Button .Button-label{ font-weight:600;}
.DiscussionListItem{
    padding: 10px;
    margin: 10px;
    background:#ffffff30;
    border-radius: 10px;
}
.Header-title{
    font-family: monospace;
    font-weight: 600;
    font-size:25px;
}
.DiscussionListItem:hover, .DiscussionListItem:focus {
    background: #ffffff;
    transition: all 300ms;
    box-shadow:10px 10px 20px #00000020;
}
body{background:#f5f5f5;letter-spacing: 1px;}

@media (max-width: 767px)
{.App-content {background:#f5f5f5;}}

a.scroll-up {
    background-color: #0077e6;
    width:30px;
    line-height: 3.5;
}

.scroll-up:hover, .scroll-up:focus{background-color: #0077e6!important;}

.DiscussionListItem-main mark {background: #ffff80 !important;}
.Header-title {
	overflow: hidden;
}

.Header-title:before {
	content: "";
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	position: absolute;
	width: 100px;
	height: 10px;
	background-color: rgba(255, 255, 255, .9);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: searchLights 1s ease-in 1s infinite;
	-o-animation: searchLights 1s ease-in 1s infinite;
	animation: searchLights 3s ease-in 1s infinite;
}

@keyframes searchLights {
	0% {
		left: 0%;
		top: 0px;
	}

	100% {
		left: 50%;
		top: 0px;
	}
}
继续..

自定义页脚:

<hr />
<p style="text-align: center;">本站使用 Flarum 构建 | 版本号:1.2.0-220304 | 社区规范</p>
<p style="text-align: center;"><a href="https://12377.cn" target="_blank" rel="noopener">违法和不良信息举报</a> | <a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">豫ICP备2022004600号 </a> | <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=52203042002436" target="_blank" rel="noopener">豫公网安备52203042002436号</a></p>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇