分享一下我论坛的 CSS

小小白哦

- Xiaobai Forum CSS -

效果

大部分圆角来自 Moderno 主题

代码

严禁转载、搬运。转载、搬运者必究！

.Badge {
  opacity: 0.9;
  color: #fff;
}

/* 导航栏高斯模糊 */
@media (min-width:768px) {
    #header {
        & when (@config-dark-mode = false) {
            background:rgba(255,255,255,0.6) !important;
            -webkit-backdrop-filter:blur(8px);
            backdrop-filter:blur(3px);
        }
        & when (@config-dark-mode = true) {
            background:rgba(0,0,0,0.6) !important;
            -webkit-backdrop-filter:blur(8px);
            backdrop-filter:blur(3px);
        }
    }
}

@media (max-width: 767px){
.AfruxWidgets-topWidgetSection {
    margin: 5px;
}}

/* Hero 优化 */
.carousel__slide-title {
    font-size: 35px!important;
    line-height: 1!important;
}
.carousel__slide-description {
    margin: 0.4rem auto 0!important;
    line-height: 0.9!important;
}
.carousel__slide-button {
    border: 3px solid #fff!important;
    border-radius: 8px!important;
    padding: 0.5rem 1rem!important;
    text-decoration: none;
    transition: all .8s cubic-bezier(0, -0.18, 0, 0.92)!important;
    backdrop-filter: blur(10px);
}
.carousel {
    min-height: 35vh!important;
}
.carousel__control {
    border-radius: 38%!important;
    width: 7px!important;
    height: 7px!important;
    margin: 0px 15px 0px 0px!important;
    transition: all .8s cubic-bezier(0, -0.18, 0, 0.92)!important;
}

/* 手机端搜索框优化 */
@media (max-width: 767px){ .item-search {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}}

/* 移除政治元素 */
i[data-name=":flag_tw:"] {visibility:hidden!important;}
i[data-name=":flag_hk:"] {visibility:hidden!important;} 

/* ChillRoundF */
@font-face { font-family: ChillRoundF; src: url("https://fastly.jsdelivr.net/gh/145hub/145hub.github.io@master/ChillRoundFRegular.ttf") format("truetype"); font-weight: normal; font-style: normal; } 

* { font-family: ChillRoundF, Verdana, Arial, sans-serif; }

/* 欢迎白色阴影 */
.WelcomeHero {
    background: no-repeat center/80% url('//img.fastmirror.net/s/2024/09/27/66f6c4d94c61a.jpeg');
    background-size: cover;
}

.Hero-close i {
    background: rgba(209, 2, 4, 0.98);
    border-radius: 50px;
    padding: 6px 10px;
    backdrop-filter: blur(3px);
}

.Hero-close + div {
    background: rgba(209, 2, 4, 0.8);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
    padding: 40px 0;
}.WelcomeHero {
    background: no-repeat center/80% url('https://bing.img.run/uhd.php');
    background-size: cover;
}

.Hero-close i {
    background: rgba(209, 2, 4,0.98);
    border-radius: 10px;
    padding: 6px 10px;
    backdrop-filter: blur(5px);
}

.Hero-close + div {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    backdrop-filter: blur(5px);
    font-family: 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
    padding: 40px 0;
}

@media screen and (max-width: 768px){
pre[class*=language-] {
padding-left: 0px!important;
 }
}
pre[class*=language-] {
    padding: 0px 0px !important;
}
@border-radius: 8px;
.tooltip-arrow,
.Hero-close {
    display: none;
}
@media @phone {
    .Dropdown-menu {
        margin: 8px !important;
        border-radius: 8px !important;
        padding: 4px !important;
    }
}
.Dropdown-menu {
    border-radius: 12px;
    padding: 1px;
    &>li {
        margin: 4px;
        &>a,
        &>button,
        &>span {
            border-radius: 8px;
            transition: 0.4s;
        }
    }
}
.Button {
    transition: background-color 0.4s;
}
.Button:active,
.Button.active,
.open>.Button.Dropdown-toggle {
    box-shadow: unset;
}
.Modal, .Modal-content {
    border-radius: 12px;
}
.backdrop {
    background-color: ~"#0000004D";
}
@media @phone {
    .dropdown-backdrop, .drawer-backdrop, .composer-backdrop {
        background-color: ~"#0000004D";
    }
}
.LoadingIndicator {
    animation: none;
    border: none;
    border-radius: 0;
    background-color: currentColor;
    --animation-image: url("data:image/svg+xml,%3Csvg viewBox='5.963 5.963 21.940666 21.940666' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg id='layer1'%3E%3Ccircle cx='16.933332' cy='16.933332' r='9.4701843' stroke='%23000' stroke-width='2' fill='none' stroke-dashoffset='' id='circlebar' stroke-dasharray='1 100'%3E %3CanimateTransform attributeName='transform' attributeType='AUTO' type='rotate' values='-95 16.933332 16.933332;355 16.933332 16.933332;985 16.933332 16.933332' dur='2s' repeatCount='indefinite' /%3E %3Canimate attributeName='stroke-dasharray' attributeType='AUTO' type='rotate' values='0.01 100;30 100;0.01 100' dur='2s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask: var(--animation-image);
    mask: var(--animation-image);
}
.AfruxWidgets-Widget-content {
    border-radius: 8px !important;
    background: @control-bg;
}
.Composer {
    border-radius: 12px 12px 0 0;
}
.ComposerBody-loading {
    border-radius: 12px;
}
.Post {
    border-radius: 12px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 16px;
    margin-bottom: 16px;
    background: @control-bg;
}
.PostStream-item {
    &:not(:last-child) {
        border-bottom: none;
    }
}
.EventPost {
    background-color: transparent;
    .Post-footer {
        display: none;
    }
}
.ReplyPlaceholder {
    background: none;
    margin: auto;
    margin-top: 8px;
    width: 100%;
}
@media (min-width:992px) {
    .TagTiles>li {
        width: 30% !important;
        border-radius: 8px !important;
        margin: 15px;
    }
}
@media (max-width:991px) and (min-width:768px) {
    .TagTiles>li {
        width: 45% !important;
        border-radius: 12px !important;
        margin: 15px;
    }
}
@media (max-width:767px) {
    .TagTiles>li {
        border-radius: 12px !important;
        margin: 15px;
    }
}
.DiscussionListItem {
    margin: 0 0 8px;
    border-radius: 12px;
    background: @control-bg;
    @media @phone {
        margin: 8px !important;
    }
    &-controls .Dropdown-toggle {
        border-radius: 12px;
    }
}
.DiscussionListItem-content {
    box-shadow: unset !important;
    border-radius: 12px !important;
}
.Hero {
    margin: 15px auto 0;
    max-width: @screen-desktop-hd;
    border-radius: 12px;
    @media @desktop {
        max-width: @screen-desktop;
    }
    @media @tablet {
        max-width: @screen-tablet;
    }
    @media @phone {
        max-width: calc(~"100% - 30px");
        margin-bottom: 15px;
    }
}
.darkenBackground {
    border-radius: 12px;
}
.Post-body pre {
    font-size: 12px;
    padding: 0;
    border-left: 4px solid #929292;
    border-radius: 2px;
}
.Post-body blockquote {
    fontsize: 14px;
    padding: 10px;
    border: 0;
    border-left: 4px solid #0066d0;
    border-radius: 2px;
    & when (@config-dark-mode =false) {
        background: #f7f7f7;
        color: #444;
    }
    & when (@config-dark-mode =true) {
        background: #111111;
        color: #eee;
    }
}
.aaalert.aaerror .aainner,
.aaalert.aainfo .aainner,
.aaalert.aasuccess .aainner {
    font-size: 14px;
    text-align: left;
}
.aaalert.aaerror .aainner {
    border-left: 4px solid #ff5c5c !important;
}
.aaalert.aasuccess .aainner {
    border-left: 4px solid #58a400 !important;
}
.aaalert.aainfo .aainner {
    border-left: 4px solid #569ff7 !important;
}
ul.NotificationGroup-content {
    &>li {
        margin: 4px 8px;
        &>a {
            &.Notification {
                border-radius: 12px;
                transition: 0.4s;
            }
            &.unread .Notification-title:after {
                content: '';
                display: inline-block;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                background-color: var(--primary-color);
                transform: translateY(10%);
                margin-left: 8px;
            }
        }
    }
}
.ConversationsList .chat .chat-message {
    border-radius: 0 0 @border-radius 0 !important;
}

.item-like .Button--link .Button-label,.item-dislike .Button--link .Button-label,.item-reply .Button--link .Button-label {
	display:none;
}
.item-like .Button:before {
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
	font-weight: 600;
	font-size: 14px;
	content: '\f164    赞';
	vertical-align: -1px;
}
.item-dislike .Button:before {
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
	font-weight: 600;
	font-size: 14px;
	content: '\f165    踩';
	vertical-align: -3px;
}
.item-reply .Button--link:before {
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
	font-weight: 600;
	font-size: 15px;
	content: '\f3e5    回复';
	margin-right: 4px;
	vertical-align: -2px;
}
/* 关注、楼主、收藏挤一起  */
@media (max-width:768px) {
  .DiscussionPage-nav > ul { padding:0; list-style:none;}
  .DiscussionPage-nav > ul > li { margin:5px 5px;}
}
table {
    table-layout: auto; /* 自动调整列宽 */
    padding: 0;
    word-break: break-all;
    border-collapse: collapse;
    margin: 0.8em 0;
    width: 100%; 
/* 表格宽度自适应 */
}

table tr {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}

table tr:nth-child(2n), thead {
    background-color: #f8f8f8;
}

table th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
    width: auto !important; /* 确保列宽自动调整 */
}

table td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}

table th:first-child, table td:first-child {
    margin-top: 0;
}

table th:last-child, table td:last-child {
    margin-bottom: 0;
}
.ComposerBody-header { list-style: none; padding: 1px 0px; margin: 0px 0px 10px; }

.minimized .ComposerBody-header { pointer-events: none; }

alay

不错的css
截图能不能专业点，用电脑！

小小白哦

alay 我没电脑...

alay

小小白哦你是个人才！

小小白哦

alay 我一般抓元素都是用 Via 浏览器里面的广告标记功能，然后浏览用 Edge

alay

小小白哦能不能帮我把私信的手机端优化下？

𝟏𝟒𝟓𝟔𝟗

小小白哦我一般抓元素都是用 Via 浏览器里面的广告标记功能

怎么抓的，教一教我

小小白哦

alay emmmmmmmm不彳亍

大二学长

小小白哦很不错呀，非常没关，整体效果很好

小小白哦

𝟏𝟒𝟓𝟔𝟗
首先，在 Via 输入你想要搜索的网页，然后点三条杠。

在出现的菜单中右拉，点击标记广告。

最后，点击你想要抓取的区域，然后下方就会显示它的元素。
这个主要是用来抓名称的，不像电脑版那么专业，直接一个 F12 就行（这是我在网上找到的唯一一个浏览器的功能）。
当然这个也能查看源码，我就不多说了。

alay

小小白哦 VIA有电脑版的吗？

𝟏𝟒𝟓𝟔𝟗

小小白哦标记不了，我 iOS

小小白哦

alay 木有，但是可以用市面上全部浏览器