Updated lock notif styling.

This commit is contained in:
flash 2018-10-15 22:45:06 +02:00
parent 9c5e5192fa
commit f329964792
2 changed files with 14 additions and 15 deletions

View file

@ -4,24 +4,21 @@
align-items: center; align-items: center;
min-height: 40px; min-height: 40px;
margin-bottom: 2px; margin-bottom: 2px;
box-shadow: 0 1px 2px var(--accent-colour);
&__icon { &__icon {
height: 40px; height: 40px;
width: 40px; width: 40px;
background-size: 35px; background-image: linear-gradient(90deg, var(--accent-colour), transparent);
background-image: url('https://static.flash.moe/images/topic-icons/topic-locked-read.png'); flex: 0 0 auto;
background-position: center; display: flex;
background-repeat: no-repeat; justify-content: center;
background-color: var(--accent-colour); align-items: center;
flex-grow: 0; font-size: 2em;
flex-shrink: 0;
} }
&__text { &__text {
margin: 0 10px; margin: 0 5px;
flex-grow: 1; flex: 1 1 auto;
flex-shrink: 1;
} }
&__emphasis { &__emphasis {

View file

@ -137,14 +137,16 @@
{% macro forum_topic_locked(locked, archived) %} {% macro forum_topic_locked(locked, archived) %}
{% if locked is not null or archived %} {% if locked is not null or archived %}
<div class="forum__status"> <div class="container container--new forum__status">
<div class="forum__status__icon"></div> <div class="forum__status__icon">
<i class="fas fa-{{ archived ? 'archive' : 'lock' }}"></i>
</div>
<div class="forum__status__text"> <div class="forum__status__text">
{% if archived %} {% if archived %}
This topic has been <span class="forum__status__emphasis">archived</span>. This topic has been <span class="forum__status__emphasis">archived</span>.
{% else %} {% else %}
This topic was locked <time This topic was locked
class="forum__status__emphasis" <time class="forum__status__emphasis"
datetime="{{ locked|date('c') }}" datetime="{{ locked|date('c') }}"
title="{{ locked|date('r') }}">{{ locked|time_diff }}</time>. title="{{ locked|date('r') }}">{{ locked|time_diff }}</time>.
{% endif %} {% endif %}