From ef46b0ccbbb2c132b532dab50baa4af2a96b3876 Mon Sep 17 00:00:00 2001 From: flashwave Date: Thu, 3 Jan 2019 19:02:38 +0100 Subject: [PATCH] Fixed graphical glitches (hopefully). --- assets/less/classes/auth.less | 14 +++-------- assets/less/classes/container.less | 2 +- assets/less/classes/profile/header.less | 31 ++++++++++++++++++++----- assets/less/classes/usercard.less | 13 ++++++----- assets/less/main.less | 15 ++++++++++-- templates/auth/macros.twig | 8 +++---- templates/user/_layout/header.twig | 2 ++ 7 files changed, 55 insertions(+), 30 deletions(-) diff --git a/assets/less/classes/auth.less b/assets/less/classes/auth.less index 852103ba..b2b16a2a 100644 --- a/assets/less/classes/auth.less +++ b/assets/less/classes/auth.less @@ -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 { diff --git a/assets/less/classes/container.less b/assets/less/classes/container.less index 6d194c70..087a2e31 100644 --- a/assets/less/classes/container.less +++ b/assets/less/classes/container.less @@ -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); diff --git a/assets/less/classes/profile/header.less b/assets/less/classes/profile/header.less index 52464152..7f0feb94 100644 --- a/assets/less/classes/profile/header.less +++ b/assets/less/classes/profile/header.less @@ -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; diff --git a/assets/less/classes/usercard.less b/assets/less/classes/usercard.less index 964a4b92..eed124b5 100644 --- a/assets/less/classes/usercard.less +++ b/assets/less/classes/usercard.less @@ -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; diff --git a/assets/less/main.less b/assets/less/main.less index 4b2af1c1..b589f15c 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -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; diff --git a/templates/auth/macros.twig b/templates/auth/macros.twig index 911e9811..81819d2e 100644 --- a/templates/auth/macros.twig +++ b/templates/auth/macros.twig @@ -12,10 +12,10 @@ {{ input_hidden('auth[redirect]', redirect) }} {% endif %} -
-
- +
+
+
+
diff --git a/templates/user/_layout/header.twig b/templates/user/_layout/header.twig index 4a95308b..6d940e59 100644 --- a/templates/user/_layout/header.twig +++ b/templates/user/_layout/header.twig @@ -1,6 +1,8 @@ {% from '_layout/input.twig' import input_checkbox_raw %}
+
+
{% if is_editing and perms.edit_avatar %}