Visibilidad de las publicaciones de pantalla

Hola,

Solo quiero compartir con ustedes este pequeño ajuste de CSS para mostrar la visibilidad de las publicaciones a todos. En nuestro foro, a veces los usuarios no podían reconocer la visibilidad de la publicación que acababan de crear. ¿Es un mensaje privado o una conversación pública? Así que con frecuencia publicaban datos personales y demás en espacios públicos…

Ahora lo he hecho más obvio para todos con un pequeño código CSS que añade la visibilidad de las publicaciones a todas ellas. Hay tres tipos de visibilidad: Pública, Comunidad (que son las categorías restringidas) y Privada.

Añade esto en admin/
Escritorio/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Pública";
    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 Privada";
    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 Comunidad";
    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;
}

Móvil/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Pública";
    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 Privada";
    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 Comunidad";
    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;
}

Común/Sección <head> :arrow_down:
La propiedad font-family: 'Font Awesome\ 5 Free', var(--font-family); incluye iconos de Font Awesome, por lo que debes añadirlos en la sección <head> para que se muestren.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

Si deseas desactivar los iconos, simplemente usa esta versión. :arrow_down:

Sin iconos

Añade esto en admin/
Escritorio/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Pública";
    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: "Privada";
    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: "Comunidad";
    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;
}

Móvil/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Pública";
    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: "Privada";
    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: "Comunidad";
    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;
}

Y no necesitas añadir nada en la sección <head>. :slight_smile:

Gracias :slight_smile: Esto ayuda a nuestra comunidad. Espero que si tienes el mismo problema, esto te sirva de ayuda. :slight_smile:

Puedes ver cómo funciona en vivo en https://vaperina.cc y hacer clic en cualquier tema. Verás la insignia de visibilidad pública en las publicaciones, en idioma húngaro. :slight_smile:

7 Me gusta