C S S V A R I A B L E S

This commit is contained in:
flash 2018-09-23 16:42:15 +02:00
parent 26d17455dc
commit 5186ee9027
25 changed files with 50 additions and 38 deletions

View file

@ -23,7 +23,7 @@
}
&__entry {
color: inherit;
color: var(--user-colour);
text-decoration: none;
width: 200px;
border: 1px solid var(--accent-colour);

View file

@ -49,7 +49,10 @@
&__datetime,
&__user,
&__action {
color: inherit;
--action-colour: inherit;
background-color: var(--action-colour);
color: var(--user-colour);
flex: 0 0 auto;
margin-right: 1px;
text-decoration: none;
@ -170,6 +173,7 @@
&__action {
display: block;
padding: 6px 2px;
background-color: var(--accent-colour);
border-right: 1px solid var(--accent-colour);
writing-mode: sideways-lr;
text-orientation: sideways;
@ -234,6 +238,7 @@
}
&__name {
color: var(--user-colour);
font-size: 1.5em;
line-height: 1.2em;
}

View file

@ -136,6 +136,7 @@
}
&__user {
color: var(--user-colour);
font-weight: 700;
text-decoration: none;

View file

@ -148,6 +148,7 @@
}
&__user {
color: var(--user-colour);
font-weight: 700;
text-decoration: none;

View file

@ -103,6 +103,7 @@
}
&__username {
color: var(--user-colour);
font-size: 1.5em;
line-height: 1.7em;
}

View file

@ -69,6 +69,7 @@
line-height: 1.2em;
&__name {
color: var(--user-colour);
font-weight: 700;
text-decoration: none;

View file

@ -209,7 +209,8 @@
}
&__name {
color: inherit;
color: var(--user-colour);
text-shadow: 0 0 5px var(--user-colour);
font-size: 1.4em;
line-height: 1.4em;
font-family: @mio-font-heading;

View file

@ -27,7 +27,7 @@
}
&__link {
color: inherit;
color: var(--user-colour);
text-decoration: none;
&:hover {

View file

@ -45,6 +45,7 @@
}
&__username {
color: var(--user-colour);
flex-grow: 1;
flex-shrink: 1;
font-weight: 700;

View file

@ -52,5 +52,10 @@
width: 50px;
margin-left: 4px;
}
&__name {
color: var(--user-colour);
text-shadow: 0 0 5px var(--user-colour);
}
}
}

View file

@ -88,6 +88,8 @@
}
&__username {
color: var(--user-colour);
text-shadow: 0 0 5px var(--user-colour);
font-size: 2em;
line-height: 1.5em;
}

View file

@ -92,6 +92,8 @@
}
&__name {
color: var(--user-colour);
text-shadow: 0 0 5px var(--user-colour);
font-size: 1.4em;
line-height: 1.4em;
text-overflow: ellipsis;

View file

@ -15,6 +15,7 @@
--site-background-meta: no-repeat center / cover fixed;
--site-background-image: initial;
--user-colour: inherit;
--accent-colour: @default-accent-colour;
--text-colour: @default-text-colour;
--text-colour-inverted: color(#fff - @default-text-colour);

View file

@ -58,10 +58,7 @@ function comments_parse_for_display(string $text): string
return sprintf(
'<a href="/profile.php?u=%d" class="comment__mention", style="%s">@%s</a>',
$info['user_id'],
html_colour($info['user_colour'], [
'color' => '%s',
'text-shadow' => '0 0 5px %s',
]),
html_colour($info['user_colour']),
$info['username']
);
}, $text);

View file

@ -50,17 +50,12 @@
<div class="header__user__info">
{% if current_user is defined %}
<a href="/profile.php?u={{ current_user.user_id }}"
class="header__user__name"
style="{{ current_user.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}" title="{{ current_user.username }}">
<a href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
{{ current_user.username }}
</a>
{% else %}
<a href="/auth.php?m=login"
class="header__user__name">
<a href="/auth.php?m=login" class="header__user__name">
Guest
</a>
{% endif %}

View file

@ -19,9 +19,9 @@
{% if is_valid %}
<div class="changelog__change" id="#c{{ change.change_id }}">
<div class="changelog__change__line"
style="{{ change.action_colour|html_colour({'border-color':'%s'}) }}">
style="{{ change.action_colour|html_colour('--accent-colour'}) }}">
<div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_get_css_contrast }}"
style="{{ change.action_colour|html_colour({'background-color':'%s','border-color':'%s'}) }}">
style="{{ change.action_colour|html_colour('--accent-colour') }}">
{{ change.action_name }}
</div>

View file

@ -49,7 +49,7 @@
<a class="changelog__action{{ change.action_class is defined and change.action_class is not null ? ' changelog__action--' ~ change.action_class : '' }} changelog__action--{{ change.action_colour|colour_get_css_contrast }}"
href="{{ change_url|format(change.change_id) }}"
{% if change.action_colour is defined %}style="{{ change.action_colour|html_colour({'background-color':'%s'}) }}"{% endif %}>
{% if change.action_colour is defined %}style="{{ change.action_colour|html_colour('--action-colour') }}"{% endif %}>
<div class="changelog__action__text">
{{ change.action_name|default('Unknown') }}
</div>

View file

@ -98,8 +98,7 @@
</div>
<div class="forum__listing__entry__activity__info">
{% if forum.recent_post_user_id is not null %}
by <a
href="/profile.php?u={{ forum.recent_post_user_id }}"
by <a href="/profile.php?u={{ forum.recent_post_user_id }}"
style="{{ forum.recent_post_user_colour|html_colour }}"
class="forum__listing__entry__activity__user">{{ forum.recent_post_username }}</a>,
{% endif %}

View file

@ -5,7 +5,7 @@
<form action="?v=action{{ edit_action is defined ? '&a=' ~ edit_action.action_id : '' }}" method="post">
<h1 class="container__title">
{% if edit_action is defined %}
Editing <span style="{{ edit_action.action_colour|html_colour }}">{{ edit_action.action_name }}</span> ({{ edit_action.action_id }})
Editing <span style="{{ edit_action.action_colour|html_colour }};color:var(--user-colour)">{{ edit_action.action_name }}</span> ({{ edit_action.action_id }})
{% else %}
Adding a new action
{% endif %}

View file

@ -34,7 +34,7 @@
<div class="changelog-actions-tags__list">
{% for action in changelog_actions %}
<a href="?v=action&amp;a={{ action.action_id }}" class="changelog-actions-tags__entry"
style="{{ action.action_colour|html_colour({'border-color':'%s'}) }}">
style="{{ action.action_colour|html_colour('border-color') }}">
<div class="listing__entry__content changelog-tags__content">
<div class="changelog-tags__text">
{{ action.action_name }} ({{ action.action_count }})

View file

@ -15,7 +15,7 @@
<div class="usercard__container">
<div class="avatar usercard__avatar"
style="{{ role.role_colour|html_colour({'background-color':'%s'}) }}">
style="{{ role.role_colour|html_colour('background-color') }}">
</div>
<div class="usercard__content">

View file

@ -13,10 +13,7 @@
{% if post.user_id is not null %}
<a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
<div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
<div class="news__preview__user__name" style="{{ post.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}">
<div class="news__preview__user__name" style="{{ post.user_colour|html_colour }}">
{{ post.username }}
</div>
</a>

View file

@ -3,10 +3,7 @@
<div class="avatar avatar--new profile__header__avatar" style="background-image:url('{{ image }}')"></div>
<div class="profile__header__details__content">
<div class="profile__header__username" style="{{ profile.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}">
<div class="profile__header__username" style="{{ profile.user_colour|html_colour }}">
{{ profile.username }}
</div>

View file

@ -11,10 +11,7 @@
<div class="usercard__details">
<div class="usercard__name"
{% if user.user_colour is defined %}style="{{ user.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}"{% endif %}>
{% if user.user_colour is defined %}style="{{ user.user_colour|html_colour }}"{% endif %}>
{{ user.username }}
</div>

View file

@ -346,12 +346,21 @@ function html_link(string $url, ?string $content = null, $attributes = []): stri
return $html;
}
function html_colour(?int $colour, array $attribs = []): string
function html_colour(?int $colour, $attribs = '--user-colour'): string
{
$colour = $colour ?? colour_none();
if (is_string($attribs)) {
$attribs = [
$attribs => '%s',
];
}
if (!$attribs) {
$attribs['color'] = '%s';
$attribs = [
'color' => '%s',
'--user-colour' => '%s',
];
}
$css = '';