显示帖子可见性

贡献 功能
1

大家好，

我想和大家分享一个小小的 CSS 调整，用于向所有人显示帖子的可见性。在我们的论坛上，用户有时无法识别所创建帖子的实际可见性。这是私信还是公开对话？因此，他们多次在公开场合发布了个人数据等。

现在我通过一段简单的 CSS 代码，让所有人更清楚地看到所有帖子的可见性。可见性有三种类型：公开、社区（即受限分类）和私人。

将此代码添加到 admin/ 部分：
桌面端/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 公开";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 私人";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 社区";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

移动端/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 公开";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 私人";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 社区";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

通用/<head> 部分 :arrow_down:
font-family: 'Font Awesome\ 5 Free', var(--font-family); 包含 Font Awesome 图标，因此您需要在 <head> 部分添加它以显示这些图标。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

Screenshot 2021-03-03 at 19.23.09
Screenshot 2021-03-03 at 19.23.09248×119 2.02 KB
Screenshot 2021-03-03 at 19.24.01
Screenshot 2021-03-03 at 19.24.01323×134 2.74 KB
Screenshot 2021-03-03 at 19.24.36
Screenshot 2021-03-03 at 19.24.36235×100 1.98 KB

如果您想禁用图标，只需使用以下版本。:arrow_down:

无图标

将此代码添加到 admin/ 部分：
桌面端/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "公开";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "私人";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "社区";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

移动端/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "公开";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "私人";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "社区";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

无需在 <head> 部分添加任何内容。:slight_smile:

谢谢 :slight_smile: 这对我们的社区有帮助，希望如果您遇到同样的问题，这也能帮到您。:slight_smile:

您可以在实时环境中查看其效果。访问 https://vaperina.cc 并点击任意主题。您将看到帖子上的公开可见性徽章（匈牙利语版本）。:slight_smile:

7 个赞
CSS classes for current groups who can view topic?