flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed graphical glitches (hopefully).

Browse source
This commit is contained in:
flash 2019-01-03 19:02:38 +01:00
parent 55d991d261
commit ef46b0ccbb
7 changed files with 55 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/less/classes/auth.less
View file

@ -1,20 +1,12 @@
.auth {
background: var(--background-colour);
max-width: 400px;
margin: 0 auto;
margin-bottom: 2px;
&__header {
background: var(--user-header) center / cover no-repeat, var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: normal, multiply;
&__wrapper {
display: flex;
justify-content: center;
padding: 20px;
background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
}
display: flex;
justify-content: center;
padding: 20px;
}
&__warning {

2
assets/less/classes/container.less
View file

@ -1,5 +1,5 @@
.container {
// todo: make this now bad
// todo: make this not bad
background-image: linear-gradient(0deg, var(--background-colour-translucent), var(--background-colour-translucent));
background-color: var(--accent-colour);

31
assets/less/classes/profile/header.less
View file

@ -3,10 +3,10 @@
flex-direction: column;
margin-bottom: 2px;
color: #fff;
background-color: var(--background-colour);
background: var(--user-header) center / cover no-repeat, var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: normal, multiply;
--profile-header-overlay-start: transparent;
--profile-header-overlay-stop: var(--background-colour-translucent-9);
@media (max-width: @site-mobile-width) {
height: auto;
@ -14,6 +14,25 @@
background-position: center top;
}
&__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--accent-colour) var(--background-pattern);
background-blend-mode: multiply;
}
&--has-header {
--profile-header-overlay-start: var(--background-colour-translucent-3);
}
&--has-header &__background {
background: var(--user-header) center / cover no-repeat;
background-blend-mode: unset;
}
&__avatar {
--avatar-checked-colour: fade(#000, 13%);
@ -85,7 +104,7 @@
display: flex;
align-items: flex-end;
padding: 20px;
background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
background-image: linear-gradient(0deg, var(--profile-header-overlay-stop), var(--profile-header-overlay-start));
&__content {
margin: 5px 10px;
@ -98,7 +117,7 @@
&__relation {
font-variant: all-small-caps;
background: var(--background-colour-translucent);
background: var(--profile-header-overlay-stop);
border-radius: 2px;
line-height: 1.2em;
padding: 1px 5px 4px;
@ -113,7 +132,7 @@
&__options {
min-height: 62px;
background-color: var(--background-colour-translucent);
background-color: var(--profile-header-overlay-stop);
padding: 0 20px;
display: flex;
justify-content: space-between;

13
assets/less/classes/usercard.less
View file

@ -6,6 +6,7 @@
color: #fff;
text-shadow: 0 1px 4px #111;
box-shadow: 0 1px 2px #000;
background-color: var(--accent-colour);
&:hover {
box-shadow: 0 1px 4px #000;
@ -14,19 +15,19 @@
&__background {
position: absolute;
left: 0;
top: 0;
height: 100%;
left: 0;
width: 100%;
background: var(--user-header) center / cover no-repeat, var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: normal, multiply;
height: 100%;
background: var(--accent-colour) var(--background-pattern);
background-blend-mode: multiply;
mask-image: linear-gradient(0deg, transparent 0%, var(--background-colour) 90%);
-webkit-mask-image: linear-gradient(0deg, transparent 0%, var(--background-colour) 90%);
}
&__container {
height: 100%;
width: 100%;
//border: 1px solid var(--accent-colour);
pointer-events: none;
display: flex;
flex-direction: column;

15
assets/less/main.less
View file

@ -8,8 +8,19 @@
--site-max-width: 1200px;
--background-image: initial;
--background-colour: #111;
--background-colour-translucent: fade(#111, 93%);
@background-colour: #111;
--background-colour: @background-colour;
--background-colour-translucent-1: fade(@background-colour, 10%);
--background-colour-translucent-2: fade(@background-colour, 20%);
--background-colour-translucent-3: fade(@background-colour, 30%);
--background-colour-translucent-4: fade(@background-colour, 40%);
--background-colour-translucent-5: fade(@background-colour, 50%);
--background-colour-translucent-6: fade(@background-colour, 60%);
--background-colour-translucent-7: fade(@background-colour, 70%);
--background-colour-translucent-8: fade(@background-colour, 80%);
--background-colour-translucent-9: fade(@background-colour, 90%);
--background-colour-translucent: var(--background-colour-translucent-9); // switch to the numbered ones
--background-pattern: url('/images/clouds.png') fixed;
--text-colour: #fff;

8
templates/auth/macros.twig
View file

@ -12,10 +12,10 @@
{{ input_hidden('auth[redirect]', redirect) }}
{% endif %}
<div class="auth__header">
<div class="auth__header__wrapper">
<div class="avatar auth__avatar js-login-avatar"
style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
<div class="container__title">
<div class="container__title__background"></div>
<div class="auth__header">
<div class="avatar auth__avatar js-login-avatar" style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
</div>
</div>

2
templates/user/_layout/header.twig
View file

@ -1,6 +1,8 @@
{% from '_layout/input.twig' import input_checkbox_raw %}
<div class="container profile__header">
<div class="profile__header__background"></div>
<div class="profile__header__details">
<div class="profile__header__avatar">
{% if is_editing and perms.edit_avatar %}