C S S V A R I A B L E S
This commit is contained in:
parent
26d17455dc
commit
5186ee9027
25 changed files with 50 additions and 38 deletions
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
&__entry {
|
||||
color: inherit;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
width: 200px;
|
||||
border: 1px solid var(--accent-colour);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -136,6 +136,7 @@
|
|||
}
|
||||
|
||||
&__user {
|
||||
color: var(--user-colour);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
|
@ -148,6 +148,7 @@
|
|||
}
|
||||
|
||||
&__user {
|
||||
color: var(--user-colour);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
|
@ -103,6 +103,7 @@
|
|||
}
|
||||
|
||||
&__username {
|
||||
color: var(--user-colour);
|
||||
font-size: 1.5em;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
|
|
@ -69,6 +69,7 @@
|
|||
line-height: 1.2em;
|
||||
|
||||
&__name {
|
||||
color: var(--user-colour);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
}
|
||||
|
||||
&__username {
|
||||
color: var(--user-colour);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
font-weight: 700;
|
||||
|
|
|
@ -52,5 +52,10 @@
|
|||
width: 50px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: var(--user-colour);
|
||||
text-shadow: 0 0 5px var(--user-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -88,6 +88,8 @@
|
|||
}
|
||||
|
||||
&__username {
|
||||
color: var(--user-colour);
|
||||
text-shadow: 0 0 5px var(--user-colour);
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
<div class="changelog-actions-tags__list">
|
||||
{% for action in changelog_actions %}
|
||||
<a href="?v=action&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 }})
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 }}&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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
13
utility.php
13
utility.php
|
@ -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 = '';
|
||||
|
|
Loading…
Add table
Reference in a new issue