From e0331cd924ff554f3cf97789a3baa69c03c2e267 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Wed, 19 Sep 2018 11:09:54 +0200
Subject: [PATCH] Make containers in the account settings translucent for
 background previews.

---
 assets/less/mio/classes/container.less | 4 ++++
 assets/less/mio/main.less              | 1 +
 templates/settings/account.twig        | 6 +++---
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/less/mio/classes/container.less b/assets/less/mio/classes/container.less
index d1730c95..73ad6ae5 100644
--- a/assets/less/mio/classes/container.less
+++ b/assets/less/mio/classes/container.less
@@ -10,6 +10,10 @@
         }
     }
 
+    &--translucent {
+        background-color: var(--background-colour-translucent);
+    }
+
     &__title {
         display: block;
         text-decoration: none;
diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less
index 8fd577bf..88ff9904 100644
--- a/assets/less/mio/main.less
+++ b/assets/less/mio/main.less
@@ -19,6 +19,7 @@
     --text-colour-inverted: color(#fff - @default-text-colour);
     --text-colour-header: @default-header-text-colour;
     --background-colour: @default-background-colour;
+    --background-colour-translucent: fade(@default-background-colour, 90%);
     --gradient-start: @default-gradient-start;
 }
 
diff --git a/templates/settings/account.twig b/templates/settings/account.twig
index 7c5492e4..ce7a0d11 100644
--- a/templates/settings/account.twig
+++ b/templates/settings/account.twig
@@ -5,7 +5,7 @@
 {% endif %}
 
 {% block settings_content %}
-    <div class="container">
+    <div class="container container--translucent">
         <div class="container__title">Account</div>
         <form action="" method="post" class="settings__account">
             <input type="hidden" name="csrf" value="{{ csrf_token() }}">
@@ -126,7 +126,7 @@
     </div>
 
     {% if settings_perms.edit_avatar %}
-        <div class="container">
+        <div class="container container--translucent">
             <div class="container__title">Avatar</div>
             <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                 <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
@@ -197,7 +197,7 @@
     {% endif %}
 
     {% if settings_perms.edit_background %}
-        <div class="container">
+        <div class="container container--translucent">
             <div class="container__title">Background</div>
             <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                 <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">