Flarum自定义CSS样式分享

58次阅读
没有评论

取消横幅关闭

/* 取消横幅关闭 */
.Hero-close {display:none;}

横幅跳动标题

/* 跳动标题 */
.Hero-title {
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

@keyframes my-face {
    2% {transform: translate(0,1.5px) rotate(1.5deg);
    }

    4% {transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    6% {transform: translate(0,1.5px) rotate(-1.5deg);
    }

    8% {transform: translate(0,-1.5px) rotate(-1.5deg);
    }

    10% {transform: translate(0,2.5px) rotate(1.5deg);
    }

    12% {transform: translate(0,-0.5px) rotate(1.5deg);
    }

    14% {transform: translate(0,-1.5px) rotate(1.5deg);
    }

    16% {transform: translate(0,-0.5px) rotate(-1.5deg);
    }

    18% {transform: translate(0,0.5px) rotate(-1.5deg);
    }

    20% {transform: translate(0,-1.5px) rotate(2.5deg);
    }

    22% {transform: translate(0,0.5px) rotate(-1.5deg);
    }

    24% {transform: translate(0,1.5px) rotate(1.5deg);
    }

    26% {transform: translate(0,0.5px) rotate(0.5deg);
    }

    28% {transform: translate(0,0.5px) rotate(1.5deg);
    }

    30% {transform: translate(0,-0.5px) rotate(2.5deg);
    }

    32% {transform: translate(0,1.5px) rotate(-0.5deg);
    }

    34% {transform: translate(0,1.5px) rotate(-0.5deg);
    }

    36% {transform: translate(0,-1.5px) rotate(2.5deg);
    }

    38% {transform: translate(0,1.5px) rotate(-1.5deg);
    }

    40% {transform: translate(0,-0.5px) rotate(2.5deg);
    }

    42% {transform: translate(0,2.5px) rotate(-1.5deg);
    }

    44% {transform: translate(0,1.5px) rotate(0.5deg);
    }

    46% {transform: translate(0,-1.5px) rotate(2.5deg);
    }

    48% {transform: translate(0,-0.5px) rotate(0.5deg);
    }

    50% {transform: translate(0,0.5px) rotate(0.5deg);
    }

    52% {transform: translate(0,2.5px) rotate(2.5deg);
    }

    54% {transform: translate(0,-1.5px) rotate(1.5deg);
    }

    56% {transform: translate(0,2.5px) rotate(2.5deg);
    }

    58% {transform: translate(0,0.5px) rotate(2.5deg);
    }

    60% {transform: translate(0,2.5px) rotate(2.5deg);
    }

    62% {transform: translate(0,-0.5px) rotate(2.5deg);
    }

    64% {transform: translate(0,-0.5px) rotate(1.5deg);
    }

    66% {transform: translate(0,1.5px) rotate(-0.5deg);
    }

    68% {transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    70% {transform: translate(0,1.5px) rotate(0.5deg);
    }

    72% {transform: translate(0,2.5px) rotate(1.5deg);
    }

    74% {transform: translate(0,-0.5px) rotate(0.5deg);
    }

    76% {transform: translate(0,-0.5px) rotate(2.5deg);
    }

    78% {transform: translate(0,-0.5px) rotate(1.5deg);
    }

    80% {transform: translate(0,1.5px) rotate(1.5deg);
    }

    82% {transform: translate(0,-0.5px) rotate(0.5deg);
    }

    84% {transform: translate(0,1.5px) rotate(2.5deg);
    }

    86% {transform: translate(0,-1.5px) rotate(-1.5deg);
    }

    88% {transform: translate(0,-0.5px) rotate(2.5deg);
    }

    90% {transform: translate(0,2.5px) rotate(-0.5deg);
    }

    92% {transform: translate(0,0.5px) rotate(-0.5deg);
    }

    94% {transform: translate(0,2.5px) rotate(0.5deg);
    }

    96% {transform: translate(0,-0.5px) rotate(1.5deg);
    }

    98% {transform: translate(0,-1.5px) rotate(-0.5deg);
    }

    0%,100% {transform: translate(0,0) rotate(0deg);
    }
}

替换帖子下方点赞回复按钮

/* 点赞回复等按钮 */
.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;
}

列表、帖子卡片样式

/* 卡片主题 */
.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;
    }
}

已读未读标识

/* 未读 */
.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;
}

楼主板凳沙发

/* 右上角楼主 */
div.PostStream-item[data-index="0"] article.CommentPost.Post.Post--by-start-user header.Post-header ul:not(ul.PostUser-badges.badges):after {
    content: "楼主";
    background: #F05D1D;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/* 沙发 */
div.PostStream-item[data-index="1"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges)::after {
    content: "沙发";
    background: #f947c8;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/* 板凳 */
div.PostStream-item[data-index="2"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges)::after {
    content: "板凳";
    background: #db45fb;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}
/* 地板 */
div.PostStream-item[data-index="3"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges)::after {
    content: "地板";
    background: #2a92f4;
    padding: 1px 10px 0px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    float: right;
}

欢迎打赏
post-qrcode
每日忙乎
版权声明:本站原创文章,由 每日忙乎 2022-06-04发表,共计5356字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码
载入中...