add colored background setting functionality

src/lib/member/Body.svelte

@@ -61,7 +61,7 @@
     
 </script>
 
-<CardBody style="border-left: 4px solid #{member.color}; margin: -1rem -1.25rem">
+<CardBody style="border-left: 4px solid #{settings.appearance.color_background ? isPage ? "" : member.color : member.color }; margin: -1rem -1.25rem">
     {#if !editMode && !groupMode}
     <Row>
         {#if member.id}

src/pages/Member.svelte

@@ -66,6 +66,9 @@
 {#if settings && settings.appearance.color_background}
     <div class="background" style="background-color: {member && `#${member.color}`}"></div>
 {/if}
+{#if member && member.banner && ((settings && settings.appearance.banner_top) || !settings)}
+<div class="banner" style="background-image: url({member.banner})" />
+{/if}
 <Container>
     <Row>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
@@ -74,7 +77,7 @@
             {:else if loading}
                 <Spinner/>
             {:else if member && member.id}
-                <Card>
+                <Card class="mb-3">
                     <CardHeader>
                         <CardsHeader bind:item={member}>
                             <FaAddressCard slot="icon" />
@@ -100,9 +103,12 @@
 
 <style>
     .background {
-        position: absolute;
+        position: fixed;
-        width: 100vw;
+        top: 0;
-        height: 100vh;
+        left: 0;
+        width: 100%;
+        flex: 1;
+        min-height: 100%;
         z-index: -30;
     }
 </style>

styles/generic.scss

@@ -48,7 +48,7 @@ code {
 }
 
 .banner {
-    z-index: -200;
+    z-index: -20;
     width: 100%;
     height: 40vh;
     position: absolute;