站点秀

Golden

你愿意将自己站点的全局自定义 CSS 样式分享到这里吗？

格式：

【站名】网址
截图
使用 spoiler 将代码折叠

评论在下方即可，此贴长期有效~

ink

body::-webkit-scrollbar {
    width: 0.3em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,125,0.3);
    background-color: white;
}
 
body{
background: url("https://i.picsum.photos/id/667/1910/1080.jpg");
background-size:cover;
background-attachment:fixed;
background-position: center center;
background-repeat:no-repeat;

}
.Hero{
background-color: rgba(255, 255, 255, 0.35);
border-radius: 5px;
}

.App-content {
background-color: rgba(255, 255, 255, 0.8);
max-width: 1200px;
margin: 20px auto;
border-radius: 5px;
  }
 .DiscussionPage-discussion > .container  {
    min-height: 530px;
  }
.App:before{
background-color: rgba(255, 255, 255, 0.9);
}
.UserPage{
border-radius: 5px;
}
.PostStream-item{
border-bottom:1px solid #e5aaff !important;
}
.DiscussionListItem:hover{
background-color:#e0beff;
}
.Scrubber-handle{
background:none;
}
/* mobile 移动端*/
@media(max-width:1000px) {
/* 不要在全部标签页上展示竖排、信息流广告，以及在线用户、论坛统计 */
        .TagsPage .item-flagrow-ad,
        .TagsPage .Flagrow-Ads-fake-poststream-item,
        .TagsPage .item-onlineUsers,
        .TagsPage .item-forumStatisticsWidget {
                display: none !important;
        }
/* 不显示在线用户、谷歌竖排广告、论坛统计 */
        .item-onlineUsers,
        .item-flagrow-ad,
        .item-forumStatisticsWidget {
                display: none !important;
        }
}

.Hero h2 { font-size: 25px; font-weight: 700;}
/* 上移帖子页右侧侧边栏 */
		@media (min-width: 768px){
			.DiscussionPage-nav {
				position: sticky;
				top: 60px;
				z-index: 1;
			}
			.DiscussionPage-nav>ul{
				position:relative;
			}
			.DiscussionPage .Post { /* 防止影响一楼的高度 */ 	
			    display: flow-root;
			}
		}

这是我的网站上的全局CSS，其中关于站点统计的手机端修改是golden分享的！！我就直接copy啦！😘

Demo；https://bbs.stkey.top/

Golden

【CSUR】https://bbs.csur.fun

/* 会员名录页, 首页加载更多按钮尺寸 */
.UserDirectoryList-loadMore .Button,
.DiscussionList-loadMore .Button {
	 width: 50%;
         border-radius: 30px;
         margin-top: 30px;
}
.UserDirectoryList-loadMore {
    text-align: center;
}
@media (max-width: 767px) {
	.DiscussionList-loadMore {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* 替换点赞, 回复按钮 */
.item-like .Button--link .Button-label,
.item-reply .Button--link .Button-label{
    display: none;
}
.item-like .Button:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 14px;
    content: '\f164';
    vertical-align: -1px;
}
.item-reply .Button--link:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 15px;
    content: '\f3e5';
    margin-right: 4px;
    vertical-align: -2px;
}

/* 首页主题点击量对齐 */
@media (min-width: 768px){
	.IndexPage li.item-discussion-views {
		margin-right: -70px;
		width: 55px;
	}
}

/* 反应按钮位置 */
.Post-actions .Reactions .Reactions--ShowReactions {
    margin-top: 11px;
}

/* 表格阴影去除 */
.Post .Post-body table{
	box-shadow: none;
}

/* 卡片主题 */
.IndexPage .DiscussionListItem,
.UserPage .DiscussionListItem,
.DiscussionPage-discussion .DiscussionListItem{ 
    transition: all 0.1s; /* 动画时间 */
}
@media (min-width: 991px){
    .IndexPage .DiscussionList-discussions>li:not(:first-child) .DiscussionListItem:hover{ /* 悬浮效果 */
        transform: scale(1.01); /* 缩放 */
    }
}

@media (min-width: 768px){ /* pc 端 */
.IndexPage .DiscussionListItem-content,
.UserPage .DiscussionListItem-content,
.DiscussionPage-discussion .DiscussionListItem-content{ /* 首页、用户页、讨论页卡片大小、描边 */
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 10px;
    border-radius: 8px;
    padding-bottom: 10px;
    border:1px solid #dbdfe6!important;
}
.IndexPage .Post.CommentPost,
.UserPage .Post.CommentPost,
.DiscussionPage-discussion .Post.CommentPost {
    margin-top:20px;
    border-radius: 8px;
    border: 1px solid #dbdfe6 !important;
}

.IndexPage .DiscussionListItem-info>.item-tags,
.UserPage .DiscussionListItem-info>.item-tags {top: 23px !important;}
.DiscussionListItem {
    position: relative;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    border-radius: 8px;
    margin-top:15px;
}}

@media (min-width: 768px){
.IndexPage .DiscussionListItem:hover {
background-color: #fff;
-webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
}}
/* banner */
.WelcomeHero{color: #282828;}
.Hero h2 { font-size: 25px; font-weight: 700;}
.Hero { box-shadow: 0px 1px 10px 0 rgba(151,158,181,0.28); background-color: #fff; margin-bottom: 15px;}
/*.DiscussionHero .TagsLabel .TagLabel { color: #4D698E; }*/
.WelcomeHero .Hero-subtitle {color: #000;}

/* 未读 */
.unread .DiscussionListItem-title:after {
font-family: "Font Awesome 5 Free";
font-weight: 600;
content: "\f111";
color: #667c99;
margin-left: 2px ;
margin-top:-6px;
transform: scale(0.5);
position:absolute;}
.PostsUserPage .PostsUserPage-list .Post{
    padding-top:20px;
}
/* 会员名录、资料卡片 */
.UserDirectoryList .UserCard--directory {
    box-shadow: 0 2px 6px transparent!important;
    background-color: transparent!important;
    border: 2px solid rgba(0,0,0,.1);
    margin-bottom: 15px!important;
    border-radius: 6px!important;
}
.UserCard, .UserCard a {
    color: #40444a;
}
.UserCard {
    background: #e8ecf3;
    background-size: 100% 100%;
}
.darkenBackground {
    background: #fff;
    border-radius: 6px!important;
}
.Badge--social {
    color: #4d698e!important;
}
/* 搜索框 */
.Search-input input {
    border-radius: 30px;
}

ul.IndexPage-toolbar-action>li:not(:first-child) {
    margin-top: 5px;
}
.IndexPage-toolbar-action {
    margin-left: 15px;
}
.UserCard.UserCard--popover,
.UserCard.Hero.UserHero {
    background: none !important;
}

.UserCard .Button {
    color: #667c99;
    background: rgba(0,0,0,.1);
}

[/spoiler]

ink

Golden 怎样使左边的标签栏不随页面的浏览而移动呢？

ink

Golden 再请教下，如何将discussion views中手机端“看过的人”一栏撤去?

自媒体酷

Golden 麻烦分享下页面底部的那些css代码。

于长野

【仰止】https://talk.wowow.club

.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;}

蓝色是和知乎一个色号的，另外颜色多数是半透明的，所以夜间模式也可以很好地适应_😀
enjoy yourself！

taifu

于长野你好，感谢你分享的样式👍，我用上了，但是在 beta15 版本中开启夜间模式好像有问题，部分背景不会变暗，请问需要增添新的样式么。

chins

@于长野 #6681 很漂亮！

ink

暖色调2
#FF4500 #e2d849

.TagsPage .item-forumStatisticsWidget {
                display: none !important;
 }
@media screen and (max-width: 600px) {
     .item-forumStatisticsWidget {
         display: none;
    }
}
body{
background-image: linear-gradient(112.5deg, rgba(232, 232, 232, 0.03) 0%, rgba(232, 232, 232, 0.03) 2%,rgba(231, 231, 231, 0.03) 2%, rgba(231, 231, 231, 0.03) 4%,rgba(231, 231, 231, 0.03) 4%, rgba(231, 231, 231, 0.03) 11%,rgba(2, 2, 2, 0.03) 11%, rgba(2, 2, 2, 0.03) 67%,rgba(231, 231, 231, 0.03) 67%, rgba(231, 231, 231, 0.03) 90%,rgba(111, 111, 111, 0.03) 90%, rgba(111, 111, 111, 0.03) 100%),linear-gradient(157.5deg, rgba(210, 210, 210, 0.03) 0%, rgba(210, 210, 210, 0.03) 17%,rgba(254, 254, 254, 0.03) 17%, rgba(254, 254, 254, 0.03) 18%,rgba(96, 96, 96, 0.03) 18%, rgba(96, 96, 96, 0.03) 44%,rgba(159, 159, 159, 0.03) 44%, rgba(159, 159, 159, 0.03) 70%,rgba(24, 24, 24, 0.03) 70%, rgba(24, 24, 24, 0.03) 82%,rgba(16, 16, 16, 0.03) 82%, rgba(16, 16, 16, 0.03) 100%),linear-gradient(22.5deg, rgba(47, 47, 47, 0.03) 0%, rgba(47, 47, 47, 0.03) 32%,rgba(124, 124, 124, 0.03) 32%, rgba(124, 124, 124, 0.03) 40%,rgba(200, 200, 200, 0.03) 40%, rgba(200, 200, 200, 0.03) 42%,rgba(16, 16, 16, 0.03) 42%, rgba(16, 16, 16, 0.03) 64%,rgba(243, 243, 243, 0.03) 64%, rgba(243, 243, 243, 0.03) 94%,rgba(93, 93, 93, 0.03) 94%, rgba(93, 93, 93, 0.03) 100%),linear-gradient(90deg, #ffffff,#ffffff);
.CommentPost.Post--by-actor {
    // This sets the left border to be the same color as the forum primary.
    border-left: solid @config-primary-color;
}
.Hero {
background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}

.IndexPage .DiscussionListItem,
.UserPage .DiscussionListItem,
.DiscussionPage-discussion .DiscussionListItem{ 
    transition: all 0.1s; 
}
@media (min-width: 991px){
    .IndexPage .DiscussionList-discussions>li:not(:first-child) .DiscussionListItem:hover{ 
        transform: scale(1.01); 
    }
}

@media (min-width: 768px){ /* pc 端 */
.IndexPage .DiscussionListItem-content,
.UserPage .DiscussionListItem-content,
.DiscussionPage-discussion .DiscussionListItem-content{ 
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 10px;
    border-radius: 8px;
    padding-bottom: 10px;
    border:1px solid #dbdfe6!important;
}
.IndexPage .Post.CommentPost,
.UserPage .Post.CommentPost,
.DiscussionPage-discussion .Post.CommentPost {
    margin-top:20px;
    border-radius: 8px;
    border: 1px solid #dbdfe6 !important;
}

.IndexPage .DiscussionListItem-info>.item-tags,
.UserPage .DiscussionListItem-info>.item-tags {top: 23px !important;}
.DiscussionListItem {
    position: relative;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    border-radius: 8px;
    margin-top:15px;
}
}
@media (min-width: 768px){
.IndexPage .DiscussionListItem:hover {
background-color: #fff;
-webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
}}
/* banner */
.WelcomeHero{color: #282828;}
.Hero h2 { font-size: 25px; font-weight: 700;}
.Hero { box-shadow: 0px 1px 10px 0 rgba(151,158,181,0.28); background-color: #fff; margin-bottom: 15px;}
/*.DiscussionHero .TagsLabel .TagLabel { color: #4D698E; }*/
.WelcomeHero .Hero-subtitle {color: #000;}
}
@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;
			}
		}

ink

渐变蓝色清新（冷色）`#00BFFF`+橙色(暖色)`#FF7F00`会很舒适哦！

/* 不要在全部标签页上展示竖排、信息流广告，以及在线用户、论坛统计 */
        .TagsPage .item-forumStatisticsWidget {
                display: none !important;
 }
@media screen and (max-width: 600px) {
     .item-forumStatisticsWidget {
         display: none;
    }
}
body{
background-image: linear-gradient(135deg, transparent 0%, transparent 9%,rgba(126, 196, 233,0.6) 9%, rgba(126, 196, 233,0.6) 51%,transparent 51%, transparent 57%,rgba(146, 246, 234,0.6) 57%, rgba(146, 246, 234,0.6) 100%),linear-gradient(45deg, transparent 0%, transparent 12%,rgb(126, 196, 233) 12%, rgb(126, 196, 233) 33%,rgb(87, 96, 230) 33%, rgb(87, 96, 230) 45%,transparent 45%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
.CommentPost.Post--by-actor {
    // This sets the left border to be the same color as the forum primary.
    border-left: solid @config-primary-color;
}
.Hero {background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);}
/* 卡片主题 */
.IndexPage .DiscussionListItem,
.UserPage .DiscussionListItem,
.DiscussionPage-discussion .DiscussionListItem{ 
    transition: all 0.1s; /* 动画时间 */
}
@media (min-width: 991px){
    .IndexPage .DiscussionList-discussions>li:not(:first-child) .DiscussionListItem:hover{ /* 悬浮效果 */
        transform: scale(1.01); /* 缩放 */
    }
}

@media (min-width: 768px){ /* pc 端 */
.IndexPage .DiscussionListItem-content,
.UserPage .DiscussionListItem-content,
.DiscussionPage-discussion .DiscussionListItem-content{ /* 首页、用户页、讨论页卡片大小、描边 */
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 10px;
    border-radius: 8px;
    padding-bottom: 10px;
    border:1px solid #dbdfe6!important;
}
.IndexPage .Post.CommentPost,
.UserPage .Post.CommentPost,
.DiscussionPage-discussion .Post.CommentPost {
    margin-top:20px;
    border-radius: 8px;
    border: 1px solid #dbdfe6 !important;
}

.IndexPage .DiscussionListItem-info>.item-tags,
.UserPage .DiscussionListItem-info>.item-tags {top: 23px !important;}
.DiscussionListItem {
    position: relative;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    border-radius: 8px;
    margin-top:15px;
}
}
@media (min-width: 768px){
.IndexPage .DiscussionListItem:hover {
background-color: #fff;
-webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;
}}
/* banner */
.WelcomeHero{color: #282828;}
.Hero h2 { font-size: 25px; font-weight: 700;}
.Hero { box-shadow: 0px 1px 10px 0 rgba(151,158,181,0.28); background-color: #fff; margin-bottom: 15px;}
/*.DiscussionHero .TagsLabel .TagLabel { color: #4D698E; }*/
.WelcomeHero .Hero-subtitle {color: #000;}
}

	/* 固定左侧标签栏 */
		@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;
			}
		}
/* 横幅 */
.IndexPage-toolbar::after {
    content: "Please change your avatars as soon as possible！|请尽快更改头像！";
    padding: 10px;
    background-color:#00BFFF	
    color: #DC143C;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    display: block;
    margin: 5px 0;
    white-space: pre-wrap;
}

Demo：https://bbs.stkey.top

undo

taifu

在 beta 13 上，夜间模式使用 body.dark {...}

在 beta 15 上，夜间模式使用 body when (@config-dark-mode = true) {...}

倒也不是因为 flarum 的版本原因，而是 Nightmode 插件的版本原因，在某个版本更新后就弃用了 body.dark

taifu

undo 好的，非常感谢！👍

yannis

自媒体酷可以在这里查看

anyint

论坛版块元素

楼主，这个论坛版块是用插件还是css控制的呀？

yannis

anyint 扩展提供的

Categories：https://discuss.flarum.org/d/23184-flarum-categories

nyarime

萌岛： bbs.idc.moe
body{font-family:‘Microsoft YaHei’,“Open Sans”,“Clear Sans”,“Helvetica Neue”,Helvetica,Arial,sans-serif;line-height:1.6}
.DiscussionListItem-title{font-family:-apple-system,SF UI Display,Arial,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:@config-primary-color}
::-webkit-scrollbar-track{background:fade(@config-secondary-color,30%)}
.IndexPage .DiscussionListItem-title,.UserPage .DiscussionListItem-title{margin-right:155px;font-size:18px}
.IndexPage .DiscussionListItem-info>.item-tags,.UserPage .DiscussionListItem-info>.item-tags{position:inherit!important;-webkit-mask-image:none!important;margin-top:-7px;float:right;padding-right:unset!important}
.DiscussionListItem{border-bottom:1px solid rgba(0,0,0,.0625)}
.DiscussionListItem-author{display:none}
.DiscussionPage-list .DiscussionListItem-content{padding-left:8px;padding-right:15px}
.DiscussionListItem-content{padding-left:5px;padding-right:5px}
.DiscussionListItem-count{display:none}
.DiscussionHero-items{text-align:left}
.DiscussionListItem-badges{float:right}
.IndexPage .DiscussionListItem-badges{margin-top:5px}
.PostUser-badges{float:right;position:initial}
.Badge{margin:2px!important;width:auto;height:auto;background:0 0;color:#276bb0;display:unset;vertical-align:middle;text-align:center;-webkit-box-shadow:none;box-shadow:none}
span.Badge{background:0 0!important}
.Button.active,.Button.focus,.IndexPage .Button:focus,.IndexPage-results .DiscussionList-discussions .Button:hover,.IndexPage-results .DiscussionList-discussions .open>.Dropdown-toggle.Button,.UserPage .Button:focus,.UserPage .Button:hover,.UserPage .open>.Dropdown-toggle.Button{background:0 0!important}
.Button.active,.Button:active,.open>.Button.Dropdown-toggle{box-shadow:none}
.DiscussionHero .item-title{display:unset!important}
.DiscussionPage .DiscussionHero-items li.item-tags{float:right}
header.Hero.DiscussionHero.DiscussionHero–colored{background:@hero-bg!important}
h2.DiscussionHero-title{color:@muted-color}
.DiscussionHero–colored,.DiscussionHero–colored a{color:@hero-color!important}
.DiscussionPage-list button.Dropdown-toggle.Button.Button–icon.Button–flat.Slidable-underneath.Slidable-underneath–right{display:none}
.item-discussion-views{position:unset!important}
.DiscussionPage-list .DiscussionListItem-info>li,.UserPage .DiscussionListItem-info>li{display:none}
.DiscussionPage-list .DiscussionListItem-badges{float:left;padding-right:3px;margin-left:4px;width:auto}
.affix .DiscussionPage-list{overflow-x:hidden}
.affix .App-header{border-top:3px solid @config-primary-color}
.EventPost-icon{text-align:end;width:77px;margin-top:2px;font-size:14px}
.darkenBackground .UserCard-profile i.icon{color:#fff}
.PostUser-avatar{vertical-align:middle;position:relative;left:-7px;top:-2px;width:2.5em;height:2.5em;font-size:1em;line-height:2.5em}
.Post{padding-left:30px}
.PostUser-avatar{border-width:2px!important}
.PostStream-timeGap{padding:10px}
.unread .DiscussionListItem-title:after{font-weight:500;content:‘New’;color:#f26c4f;transform:scale(.6)}
.item-discussion-views,.item-discussion-views:before{content:‘ · 查看’!important;color:@muted-more-color!important;font-size:12px!important}
.UserPage .PostsUserPage-discussion a{font-style:normal;font-size:18px;background:@body-bg;margin-left:-20px}
.UserPage .Post-header{display:none}
.PostsUserPage .PostsUserPage-list .Post{padding:0 0 10px 18px}
.PostsUserPage aside.Post-actions{display:none}
.scroll-up{height:auto!important;background-color:#5eacfb!important}
.scroll-up:focus,.scroll-up:hover{background-color:@config-primary-color!important}
.topicStarter{padding:1px 5px 1px 5px!important;font-weight:600;float:right;position:inherit;margin-left:-35px!important;z-index:99;font-size:12px!important}
.DiscussionListItem-info .fa,.DiscussionListItem-info .fas{display:none}
.IndexPage-results.sideNavOffset .DiscussionList.DiscussionList–searchResults li.item-discussion-views{display:none}
@media (max-width:767px){
.DiscussionListItem-content{padding-left:20px;padding-right:20px}
.IndexPage .DiscussionListItem-info>.item-tags{margin-top:unset}
.IndexPage .DiscussionListItem-title{margin-right:auto}
.item-discussion-views{background:@body-bg!important}
}
.DiscussionList:not(.DiscussionList–searchResults) .unread .DiscussionListItem-title{font-weight:500}
.NotificationsDropdown-unread,.new .NotificationsDropdown-unread{background:@muted-color!important}
.Post–BestAnswer{z-index:999}
.SettingsPage legend{float:unset}
.UserPage .SettingsPage .Button–primary.active,.UserPage .SettingsPage .Button–primary:active,.UserPage .SettingsPage .Button:focus,.UserPage .SettingsPage .Button:hover,.UserPage .SettingsPage .open>.Dropdown-toggle.Button,.UserPage .SettingsPage .open>.Dropdown-toggle.Button–primary{background:@config-primary-color!important}