[IMP] website_forum, *: revamp design

* web_editor, website_profile

Part of https://github.com/odoo/odoo/pull/35749
task-2024197

Co-authored-by: Jérémy Kersten <jke@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
Co-authored-by: fja-odoo <fja@odoo.com>

1 files changed, 153 insertions, 147 deletions

diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index 8694ecc77ab..c9ff7de71c1 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -1,178 +1,195 @@
-$gold: #ffcc00;
+$gold: #eca801;
 $silver: #cccccc;
 $bronze: #eea91e;
 
 .website_forum {
+    .o_forum_ask_btn {
+        @include media-breakpoint-up(md) {
+            box-shadow: $box-shadow;
+            width: 200px;
+        }
+    }
+
+    .o_wforum_nav .nav-link {
+        @include o-hover-text-color($body-color, $link-color);
+        line-height: 1;
+
+        .fa {
+            opacity: 0.5;
+        }
+
+        &:hover, &.active {
+            .fa {
+                opacity: 1;
+            }
+        }
 
-    .question-block .question-name {
-        max-width: 80%;
+        &.active {
+            background-color: rgba(theme-color('info'), 0.1);
+            color: darken(theme-color('info'), 15%)!important;
+        }
     }
 
-    .o_post_content {
+    // Single Post
+    .o_wforum_post, .note-editable.panel-body {
+        word-wrap: break-word;
+
         pre {
-            padding: 1.5rem;
-            border-radius: 5px;
-            color: $white;
-            background-color: $gray-700;
+            color: color-yiq(gray('100'));
+            border-radius: $border-radius;
+            padding: 1rem;
+            background-color: gray('100');
+            white-space: pre-wrap;
         }
+
         blockquote {
             position: relative;
-            padding-left: 3rem;
-            border-left: 2px solid $gray-500;
-            font-style: italic;
-            font-weight: lighter;
+            padding-left: 1em;
+            border-left: .25em solid gray('500');
+            color: gray('600');
         }
-        word-wrap: break-word;
     }
 
-    .vote {
-        min-width: 38px;
-        margin-right: 12px;
-        .vote_count {
-            font-weight: bold;
-            line-height: 12px;
-            font-size: 160%;
-        }
-        .vote_down,
-        .vote_up {
-            font-size: 130%;
+    .o_wforum_readable {
+        max-width: 700px;
+
+        p {
+            margin-bottom: 0.5rem;
         }
     }
 
-    .post_to_validate {
-        overflow: hidden;
-        .validate_answer {
-            display: none;
+    textarea.o_wysiwyg_loader + .note-editor {
+        border: 0;
+
+        .note-toolbar {
+            @include border-top-radius($border-radius);
+            height: 32px;
         }
-    }
 
-    .validate_answer {
-        @include o-position-absolute(0, auto, 0, 0);
-        width: 4px;
-        height: 100%;
-        z-index: 1; // On top of card content if an alert is displayed inside
+        .note-editable, .note-statusbar {
+            border: 1px solid $border-color;
+            border-width: 0 1px;
+        }
 
-        > .bg-success {
-            @include o-position-absolute(0, 0, 0, 0);
+        .note-statusbar {
+            display: block;
+            border-bottom-width: 1px;
         }
-        > span {
-            @include o-position-absolute(10px, 50%);
-            transform: translateX(50%);
-            font-size: 20px;
+    }
 
-            &[data-href] {
-                cursor: pointer;
+    .o_wforum_author_box {
+        &.o_show_info {
+            line-height: 1.2;
+            img {
+                @include size(2em);
             }
+        }
+
+        &.o_compact {
+            line-height: 1;
 
-            i {
-                padding: 2px 3px;
-                border-radius: 100%;
+            img {
+                @include size(1.4em);
             }
         }
-    }
 
-    .user_name_people {
-        font-weight: bold;
-        max-width: 60%;
     }
 
-    .oe_answer_true {
-        color: theme-color('success');
-        &:hover {
-            color: lighten(theme-color('success'), 20%);
+    .forum_answer {
+        .o_wforum_answer_correct_badge {
+            display: none;
         }
-    }
 
-    .oe_answer_false {
-        color: $gray-400;
-        &:hover {
-            color: $gray-600;
+        .o_wforum_author_box_check {
+            @include size(1em);
+            display: none;
+            top: 0;
+            right: -3px;
+            box-shadow: 0 0 0 2px white;
+            line-height: .8;
         }
-    }
 
-    .favourite_question {
-        color: $gray-400 !important;
+        .o_wforum_validate_toggler {
+            @include o-hover-text-color(gray('400'), lighten(theme-color('success'), 20%));
+        }
 
-        &.forum_favourite_question {
-            color: $gold !important;
+        &.o_wforum_answer_correct {
+            .o_wforum_answer_correct_badge, .o_wforum_author_box .o_wforum_author_box_check {
+                display: inline;
+            }
+
+            .o_wforum_validate_toggler {
+                @include o-hover-text-color(theme-color('success'), theme-color('warning'));
+
+                &:hover .fa.fa-check:before {
+                    content: '\f00d';
+                }
+            }
+
+            .o_wforum_answer_header .o_wforum_author_pic {
+                border: 2px solid $success;
+                padding: 3px;
+            }
         }
     }
 
-    .oe_grey {
-        background-color: #eeeeee;
+    .o_wforum_gold {
+        color: $gold;
     }
 
-
     a.no-decoration {
         cursor: pointer;
         text-decoration: none !important;
     }
 
-    .close.comment_delete {
-        font-size: 0.875rem;
-        float: none;
-        opacity: 1;
-        font-weight: 300;
-        line-height: 1.5;
-    }
-    .country_flag {
-        display: inline-block;
-        margin-left: 2px;
-        max-height: 13px;
-        width: auto !important;
-    }
-
     .forum_answer img, .question-block img {
         max-width: 100%
     }
+}
 
-    img.country_flag_people {
-        @include o-position-absolute(0,0);
-        max-height: 25px;
-        width: auto;
-    }
+.website_forum, .o_wforum_profile_tab {
+    .vote {
+        .vote_count {
+            line-height: 1;
+            animation-play-state: paused;
 
-    .tag_text .text-core .text-wrap {
-        .text-dropdown,
-        .text-prompt,
-        input,
-        textarea {
-            font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+            &.o_forum_vote_animate {
+                animation: bounceIn 0.3s ease running;
+            }
         }
 
-        .text-tags .text-tag .text-button {
-            font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-            height: 1.2em !important;
+        .vote_down, .vote_up {
+            line-height: 0.5;
+            font-size: 1.1em;
+            @include o-hover-text-color(rgba($text-muted, 0.5), theme-color('success'));
         }
-    }
 
-    .oe_forum_email_required {
-        position: absolute;
-        margin-top: 155px;
-        margin-left: 500px;
-        margin-right: 100px;
-        z-index: 5;
-    }
+        .vote_down {
+            @include o-hover-text-color(rgba($text-muted, 0.5), theme-color('danger'));
+        }
 
-    button.btn-link.text-muted {
-        color: $gray-600;
+        &.o_wforum_vote_vertical {
+            @include media-breakpoint-up(sm) {
+                font-size: 1.2em;
+            }
+        }
     }
 }
 
-.o_forum_tag_follow_box {
-    position: absolute;
-    display: none;
-    z-index: 1;
-    text-align: center;
-    opacity: 0.9;
-}
+.o_js_forum_tag_follow {
+    .badge {
+        font-size: 100%;
+    }
 
-.forum_answer {
-    position: relative;
-}
+    .o_forum_tag_follow_box {
+        @include o-position-absolute(100%, auto, auto, 0);
+        display: none;
+        z-index: 1;
 
-.o_wforum_post_count_answer_count {
-    border-left: 3px solid;
+        .card {
+            padding: ($grid-gutter-width*0.5) - 1px;
+        }
+    }
 }
 
 .o_profile_main {
@@ -180,44 +197,33 @@ $bronze: #eea91e;
 }
 
 img.o_forum_avatar {
-    max-height: 40px;
-    margin-right: 10px;
-    width: auto;
+    @include size(40px);
+    object-fit: cover;
 }
 
 img.o_forum_avatar_big {
-    max-width: 75px;
-    margin-right: 10px;
-    width: auto;
+    @include size(75px);
+    object-fit: cover;
 }
 
-.o_forum_user_bio_expand {
-    position: absolute;
-    display: none;
-    z-index: 200;
-}
+.o_wforum_bio_popover_wrap {
+    .o_wforum_bio_popover_name {
+        address > div, span[data-oe-model="res.country"] {
+            display: flex;
+            align-items: center;
+        }
+        span[data-oe-model="res.country"] {
+            margin-left: 10px;
+        }
+    }
 
-.o_forum_tooltip_heading {
-    padding: 0;
-    margin: 0;
-    font-size: 18px;
-}
+    .o_wforum_bio_popover_info .css_editable_mode_hidden > div:last-child > .o_forum_tooltip_line {
+        margin-top: -0.5rem; // compensate parent 'mt-2' class
+    }
 
-.o_forum_user_bio {
-    color: $black;
-    width: 318px;
-    min-height: 100px;
-    cursor: auto;
-    border: 1px solid darkgray;
-    background-color: whitesmoke;
-    line-height: 13px;
-    font-size: 11px;
-    word-wrap: break-word;
-    .o_forum_tooltip_line {
-        min-height: 13px;
-    }
-    .o_forum_tooltip_header {
-        min-height: 75px;
+    .o_wforum_bio_popover_bio p {
+        margin-top: 8px;
+        margin-bottom: 0;
     }
 }