[IMP] website_profile: reduce bootstrap customization and improve circular progress design

Purpose: reduce some customization and ease eLearning link with themes. For
that purpose use the body class name propagation recently added.

Also mask the initial part of the circular progress, removing the border
radius effect.

Linked to task 1958372
Related to PR #32648

addons/website_profile/static/src/scss/website_profile.scss

-$owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
-$owprofile-tabs-height: 36px;
+// Retrive the tab's height by summ its properties
+$owprofile-tabs-height: ($nav-link-padding-y*2) + ($font-size-base * $line-height-base);
 
-.o_wprofile_wrap {
+// Overal page bg-color: Blend it 'over' the color choosen by the user
+// ($body-bg), rather than force it replacing the variable's value.
+$owprofile-color-bg: mix($body-bg, #efeff4);
+
+.o_wprofile_body {
     background-color: $owprofile-color-bg;
 }
 
@@ -10,16 +14,15 @@ $owprofile-tabs-height: 36px;
 }
 
 .o_wprofile_pict {
-    @include size(30%);
-    border-radius: 100%;
+    @include size(100%);
     padding-top: 30%;
     background-size: cover;
     background-position: center;
 
     @include media-breakpoint-up(md)  {
-        @include size(100%);
-        border-radius: 0;
-        padding-top: 100%;
+        padding-top: 70%;
+        border: 1px solid darken(#875A7B, 10%);
+        border-bottom-width: 0;
     }
 }
 
@@ -34,6 +37,14 @@ $owprofile-tabs-height: 36px;
     }
 }
 
+.o_wprofile_sidebar {
+    border: 1px solid $border-color;
+
+    @include media-breakpoint-up(md) {
+        border-top-width: 0;
+    }
+}
+
 .o_wprofile_nav_tabs {
     @include media-breakpoint-up(md)  {
         margin-top: $owprofile-tabs-height * -1;
@@ -42,6 +53,7 @@ $owprofile-tabs-height: 36px;
         .nav-link {
             border-radius: 0;
             border-width: 0 1px;
+            line-height: $line-height-base;
             @include o-hover-text-color(rgba(white, 0.8), white);
 
             &, &:hover {

addons/website_profile/views/website_profile.xml

@@ -84,6 +84,7 @@
 
     <!-- Edit Profile Page -->
     <template id="user_profile_edit_main" name="Edit Profile">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
         <t t-call="website.layout">
             <div id="wrap" class="o_wprofile_wrap">
                 <div class="container pt-4 pb-5">
@@ -185,8 +186,9 @@
 
     <!-- Profile Page -->
     <template id="user_profile_main" name="Profile Page">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
         <t t-call="website.layout">
-            <div id="wrap" class="o_wprofile_wrap">
+            <div id="wrap" class="o_wprofile_wrap mt-0">
                 <t t-call="website_profile.user_profile_header"/>
                 <t t-call="website_profile.user_profile_content"/>
             </div>
@@ -203,7 +205,7 @@
                 <div class="row">
                     <!-- ==== Header Left ==== -->
                     <div class="col-12 col-md-4 col-lg-3">
-                        <div t-attf-class="d-flex align-items-start #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
+                        <div t-attf-class="d-flex align-items-start h-100 #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
                             <div class="o_wprofile_pict d-inline-block mb-3 mb-md-0" t-attf-style="background-image:url(/web/image/res.users/#{user.id}/image)"/>
                             <a class="btn btn-primary d-inline-block d-md-none" t-if="request.env.user == user and validation_email_done" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}">
                                 <i class="fa fa-pencil mr-1"/>EDIT
@@ -246,8 +248,8 @@
 
                 <!-- ========== SIDEBAR ========== -->
                 <div class="col-12 col-md-4 col-lg-3 mt-3 mt-md-0">
-                    <div class="bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
-                        <div class="d-flex justify-content-between">
+                    <div class="o_wprofile_sidebar bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
+                        <div class="o_wprofile_sidebar_top d-flex justify-content-between">
                             <div t-if="user.rank_id" class="d-flex align-items-center">
                                 <small class="font-weight-bold mr-2">Current rank:</small>
                                 <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
@@ -320,7 +322,10 @@
                     <t t-set="user_points" t-value="0"/>
                 </t>
                 <path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
-                <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" />
+                <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" mask="url(#mask)"/>
+                <mask id="mask">
+                    <polygon points="0,0 17.2,0 17.2,10 18,10 18,0 36,0 36,36 0,36" fill="white"/>
+                </mask>
                 <linearGradient id="gradient">
                     <stop offset="0%" stop-color="var(--o-pc-color-stop-1)"/>
                     <stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
@@ -448,8 +453,9 @@
     All Users Page
     -->
     <template id="users_page_main" name="Users Page">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
          <t t-call="website.layout">
-            <div id="wrap" class="o_wprofile_wrap pb-5">
+            <div id="wrap" class="o_wprofile_wrap mt-0 pb-5">
                 <t t-call="website_profile.users_page_header"/>
                 <t t-call="website_profile.users_page_content"/>
             </div>