From ec95edd882df44967997173207195ae4fbe161e7 Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Tue, 23 Aug 2022 17:32:56 +0300
Subject: [PATCH 01/12] docs module edit

---
 .../Pages/Documents/Project/Index.cshtml      |  530 +++---
 .../Pages/Documents/Shared/Styles/vs.css      | 1440 ++++++++++-------
 .../Pages/Documents/Shared/Styles/vs.css.map  |    1 +
 .../Pages/Documents/Shared/Styles/vs.scss     |  397 +++--
 4 files changed, 1354 insertions(+), 1014 deletions(-)
 create mode 100644 modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 5ca2b7fbd9..d471603c2f 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -18,7 +18,7 @@
 
 @model IndexModel
 @{
-    ViewBag.FluidLayout = true;
+    ViewBag.FluidLayout = false;
     Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
     PageLayout.Content.Title = Model.DocumentName?.Replace("-", " ");
     ViewBag.Description = Model.GetDescription();
@@ -50,305 +50,335 @@
 }
 @if (Model.LoadSuccess)
 {
-    <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
-        <div class="row justify-content-end">
-            <div class="col-md-3 docs-sidebar dark-sidebar">
-                <div class="docs-sidebar-wrapper">
+        <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
+            <div class="row">
+                <div class="col-md-2">
+                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
 
-                    <div class="docs-top">
-                        <nav class="navbar navbar-logo">
-                            @if (!Model.Project.Name.IsNullOrWhiteSpace())
-                            {
-                                <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
-                                    <span id="ProjectName">@Model.Project.Name</span><br>
-                                    <strong class="display-block">
-                                        @L["Documents"]
-                                    </strong>
-                                </a>
-                            }
+                        <div class="docs-top">
+                            <nav class="navbar navbar-logo">
+                                @if (!Model.Project.Name.IsNullOrWhiteSpace())
+                                {
+                                    <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
+                                        <span id="ProjectName">@Model.Project.Name</span><br>
+                                        <strong class="display-block">
+                                            @L["Documents"]
+                                        </strong>
+                                    </a>
+                                }
 
-                            @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
-                            {
-                                <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
-                                    <i class="fa fa-chevron-left"></i>
-                                    @L["BackToWebsite"]
-                                </a>
-                            }
+                                @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
+                                {
+                                    <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
+                                        <i class="fa fa-chevron-left"></i>
+                                        @L["BackToWebsite"]
+                                    </a>
+                                }
 
-                            <div class="for-mobile">
-                                <div class="navbar-dark">
-                                    <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
-                                        <span class="navbar-toggler-icon"></span>
-                                    </button>
+                                <div class="for-mobile">
+                                    <div class="navbar-dark">
+                                        <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
+                                            <span class="navbar-toggler-icon"></span>
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                        </nav>
-                    </div>
-
-                    <div class="docs-tree-list">
+                            </nav>
+                        </div>
 
-                        @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
-                        {
-                            <div class="docs-version">
-                                <div class="version-select">
-                                    <div class="input-group">
-                                        <span class="input-group-text">
-                                            <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
-                                        </span>
+                        <div class="docs-tree-list">
+                            <div class="px-3">
+                                <div class="row mx-0 mb-2 ">
+                                    <div class="col-md-6 pe-1 ps-0">
+                                        @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
+                                            {
+                                                <div class="docs-version">
+                                                    <span>Project</span>
+                                                    <div class="version-select">
+                                                        <div class="input-group">
+                                                            <span class="input-group-text d-none">
+                                                                <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
+                                                            </span>
 
-                                        <select asp-items="Model.ProjectSelectItems"
-                                        class="form-select"
-                                        onchange="window.location.pathname = this.value">
-                                        </select>
+                                                            <select asp-items="Model.ProjectSelectItems"
+                                                            class="form-select"
+                                                            onchange="window.location.pathname = this.value">
+                                                            </select>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
                                     </div>
-                                </div>
-                            </div>
-                        }
+                                    <div class="col-md-6 pe-0 ps-1">
+                                        <div class="row">
+                                            @if (Model.VersionSelectItems.Any())
+                                            {
+                                                <div class="col @(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
+                                                    <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
+                                                        <span>Version</span>
+                                                        <div class="version-select">
+                                                            <div class="input-group">
 
-                        <div class="row">
-                            @if (Model.VersionSelectItems.Any())
-                            {
-                                <div class="col @(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
-                                    <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
-                                        <div class="version-select">
-                                            <div class="input-group">
+                                                                <span class="input-group-text">
+                                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
+                                                                </span>
 
-                                                <span class="input-group-text">
-                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
-                                                </span>
 
+                                                                <select asp-items="Model.VersionSelectItems"
+                                                                class="form-select"
+                                                                onchange="if (this.value) { window.location.replace(this.value) }">
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
 
-                                                <select asp-items="Model.VersionSelectItems"
-                                                class="form-select"
-                                                onchange="if (this.value) { window.location.replace(this.value) }">
-                                                </select>
-                                            </div>
+                                            @if (Model.LanguageSelectListItems.Count > 1)
+                                            {
+                                                <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
+                                                    <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
+                                                        <span>Language</span>
+                                                        <div class="version-select">
+                                                            <div class="input-group">
+                                                                @*<span class="input-group-text">
+                                                                    <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
+                                                                    </span>*@
+                                                                <select asp-items="Model.LanguageSelectListItems"
+                                                                class="form-select"
+                                                                onchange="window.location.replace(this.value)">
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
                                         </div>
                                     </div>
                                 </div>
-                            }
 
-                            @if (Model.LanguageSelectListItems.Count > 1)
-                            {
-                                <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
-                                    <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
-                                        <div class="version-select">
-                                            <div class="input-group">
-                                                @*<span class="input-group-text">
-                                                    <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
-                                                    </span>*@
-                                                <select asp-items="Model.LanguageSelectListItems"
-                                                class="form-select"
-                                                onchange="window.location.replace(this.value)">
-                                                </select>
-                                            </div>
+                                <div class="docs-version">
+                                    <div class="version-select">
+                                        <div class="input-group">
+                                            <span class="input-group-text"><i class="fa fa-filter"></i></span>
+                                            <input class="form-control"
+                                            id="filter"
+                                            type="search"
+                                            data-search-url="@Model."
+                                            placeholder="@L["FilterTopics"].Value"
+                                            aria-label="Filter">
                                         </div>
                                     </div>
                                 </div>
-                            }
-                        </div>
-
-                        <div class="docs-version">
-                            <div class="version-select">
-                                <div class="input-group">
-                                    <span class="input-group-text"><i class="fa fa-filter"></i></span>
-                                    <input class="form-control"
-                                       id="filter"
-                                       type="search"
-                                       data-search-url="@Model."
-                                       placeholder="@L["FilterTopics"].Value"
-                                       aria-label="Filter">
-                                </div>
                             </div>
+                            @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
+                            {
+                                <div class="text-muted p-3">
+                                    <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
+                                </div>
+                            }
+                            else
+                            {
+                                <ul root-node="@Model.Navigation"
+                            version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
+                            project-name="@Model.ProjectName"
+                            project-format="@Model.Project.Format"
+                            selected-document-name="@Model.DocumentNameWithExtension"
+                            language="@Model.LanguageCode"
+                            id="sidebar-scroll"
+                            class="nav nav-list"></ul>
+                            }
                         </div>
 
-
-                        @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
-                        {
-                            <div class="text-muted p-3">
-                                <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
-                            </div>
-                        }
-                        else
-                        {
-                            <ul root-node="@Model.Navigation"
-                        version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
-                        project-name="@Model.ProjectName"
-                        project-format="@Model.Project.Format"
-                        selected-document-name="@Model.DocumentNameWithExtension"
-                        language="@Model.LanguageCode"
-                        id="sidebar-scroll"
-                        class="nav nav-list"></ul>
-                        }
                     </div>
-
                 </div>
-            </div>
 
-            @if (Model.Document != null)
-            {
-                <div class="col-md-7 docs-content bg-white">
-                    <div class="docs-link-btns">
-                        <div class="row">
-                            <div class="col">
-                                @if (Model.FullSearchEnabled)
-                                {
-                                    <div class="search-area">
-                                        <div class="input-group">
-                                            <span class="input-group-text"><i class="fa fa-search"></i></span>
+                @if (Model.Document != null)
+                {
+                    <div class="col docs-content bg-white">
+                        <div class="top-container mb-3">
+                            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+                                <ol class="breadcrumb">
+                                    <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
+                                    <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                    <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                    <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                    <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
+                                </ol>
+                            </nav>
 
-                                            <input class="form-control"
-                                       id="fullsearch"
-                                       type="search"
-                                       data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
-                                       placeholder="@L["FullSearch"].Value"
-                                       aria-label="Filter">
-                                        </div>
-                                    </div>
-                                }
+                            <div class="doc-social-btns">
+                                <small> @(L["ShareOn"].Value + " :")</small>
+                                <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                                    <i class="fa fa-twitter"></i>
+                                </a>
+                                <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                                    <i class="fa fa-linkedin"></i>
+                                </a>
+                                <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                                    <i class="fa fa-envelope-square"></i>
+                                </a>
                             </div>
-                            <div class="col-auto">
-                                <div class="cont-container">
-                                    @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
+                        </div>
+
+                        <div class="docs-link-btns">
+                            <div class="row">
+                                <div class="col">
+                                    @if (Model.FullSearchEnabled)
                                     {
-                                        <span class="for-desktop me-3">
-                                            @(L["Contributors"].Value)
-                                        </span>
-                                        @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                        <div class="search-area">
+                                            <div class="input-group">
+                                                <span class="input-group-text"><i class="fa fa-search"></i></span>
+
+                                                <input class="form-control"
+                                        id="fullsearch"
+                                        type="search"
+                                        data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
+                                        placeholder="@L["FullSearch"].Value"
+                                        aria-label="Filter">
+                                            </div>
+                                        </div>
+                                    }
+                                </div>
+                                <div class="col-auto">
+                                    <div class="cont-container">
+                                        @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                                         {
-                                            <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
-                                                <img src="@contributor.AvatarUrl"
-                                     class="rounded-circle"
-                                     alt="Avatar"
-                                     height="21"
-                                     width="21"
-                                     title="@contributor.Username" />
-                                            </a>
+                                            <span class="for-desktop me-3">
+                                                @(L["Contributors"].Value)
+                                            </span>
+                                            @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                            {
+                                                <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
+                                                    <img src="@contributor.AvatarUrl"
+                                        class="rounded-circle"
+                                        alt="Avatar"
+                                        height="21"
+                                        width="21"
+                                        title="@contributor.Username" />
+                                                </a>
+                                            }
                                         }
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    @if (!string.IsNullOrEmpty(Model.Document.EditLink))
+                                    {
+                                        <a href="@Model.Document.EditLink" target="_blank">
+                                            <i class="fa fa-edit"></i>
+                                            @(L["Edit"])
+                                            <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
+                                        </a>
                                     }
+
                                 </div>
                             </div>
-                            <div class="col-auto">
-                                @if (!string.IsNullOrEmpty(Model.Document.EditLink))
-                                {
-                                    <a href="@Model.Document.EditLink" target="_blank">
-                                        <i class="fa fa-edit"></i>
-                                        @(L["Edit"])
-                                        <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
-                                    </a>
-                                }
 
-                            </div>
-                        </div>
 
+                        </div>
 
-                    </div>
+                    
 
-                    <div class="docs-content-field">
-                        <div class="docs-text-field">
-                            <div class="position-relative">
-                                @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
-                                {
-                                    <div class="alert alert-primary alert-criteria">
-                                        <abp-row>
-                                            <abp-column>
-                                                <p class="alert-p mb-2">
-                                                    <i class="fa fa-info-circle"></i>
-                                                    @L["MultipleVersionDocumentInfo"]
-                                                </p>
-                                            </abp-column>
-                                        </abp-row>
-                                        <abp-row>
-                                            @foreach (var parameter in Model.DocumentPreferences.Parameters)
-                                            {
-                                                <abp-column size="_4">
-                                                    <div class="input-group">
-                                                        <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
-                                                        <select class="doc-section-combobox form-select"
-                                                aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
-                                                id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
-                                                            @foreach (var value in parameter.Values)
-                                                            {
-                                                                @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
-                                                                {
-                                                                    <option value="@value.Key" selected="selected">@value.Value</option>
-                                                                }
-                                                                else
+                        <div class="docs-content-field">
+                            <div class="docs-text-field">
+                                <div class="position-relative">
+                                    @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
+                                    {
+                                        <div class="alert alert-primary alert-criteria">
+                                            <abp-row>
+                                                <abp-column>
+                                                    <p class="alert-p mb-2">
+                                                        <i class="fa fa-info-circle"></i>
+                                                        @L["MultipleVersionDocumentInfo"]
+                                                    </p>
+                                                </abp-column>
+                                            </abp-row>
+                                            <abp-row>
+                                                @foreach (var parameter in Model.DocumentPreferences.Parameters)
+                                                {
+                                                    <abp-column size="_6">
+                                                        <div class="custom-input-group">
+                                                            <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
+                                                            <select class="doc-section-combobox form-select"
+                                                    aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
+                                                    id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
+                                                                @foreach (var value in parameter.Values)
                                                                 {
-                                                                    <option value="@value.Key">@value.Value</option>
+                                                                    @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
+                                                                    {
+                                                                        <option value="@value.Key" selected="selected">@value.Value</option>
+                                                                    }
+                                                                    else
+                                                                    {
+                                                                        <option value="@value.Key">@value.Value</option>
+                                                                    }
                                                                 }
-                                                            }
-                                                        </select>
-                                                    </div>
-                                                </abp-column>
-                                            }
-                                        </abp-row>
-                                    </div>
-                                }
-                            </div>
+                                                            </select>
+                                                        </div>
+                                                    </abp-column>
+                                                }
+                                            </abp-row>
+                                        </div>
+                                    }
+                                </div>
 
-                            <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
-                                <article class="docs-body">
+                                <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
+                                    <article class="docs-body">
 
-                                    @if (Model.DocumentLanguageCode != Model.LanguageCode)
-                                    {
-                                        <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
-                                            @L["DocumentNotFoundInSelectedLanguage"]
-                                        </abp-alert>
-                                    }
-                                    @Html.Raw(Model.Document.Content)
-                                </article>
+                                        @if (Model.DocumentLanguageCode != Model.LanguageCode)
+                                        {
+                                            <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
+                                                @L["DocumentNotFoundInSelectedLanguage"]
+                                            </abp-alert>
+                                        }
+                                        @Html.Raw(Model.Document.Content)
+                                    </article>
 
-                                <div id="crawler_link" style="display:none;">
-                                    @foreach (var query in Model.AlternativeOptionLinkQueries)
-                                    {
-                                        <a href="@($"{Request.Path}?{query}")"> @query </a>
-                                    }
+                                    <div id="crawler_link" style="display:none;">
+                                        @foreach (var query in Model.AlternativeOptionLinkQueries)
+                                        {
+                                            <a href="@($"{Request.Path}?{query}")"> @query </a>
+                                        }
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <!-- Right Bar -->
-                <div class="col-md-2 docs-page-index position-relative bg-light">
-                    <div class="doc-social-btns">
-                        @(L["ShareOn"].Value + " :")
-                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                            <i class="fa fa-twitter"></i>
-                        </a>
-                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                            <i class="fa fa-linkedin"></i>
-                        </a>
-                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                            <i class="fa fa-envelope-square"></i>
-                        </a>
-                    </div>
-                    <div id="scroll-index" class="docs-inner-anchors mt-2">
-                        <h5>@L["InThisDocument"]</h5>
-                        <nav id="docs-sticky-index" class="navbar index-scroll">
-                        </nav>
 
-                        <div class="row">
-                            <div class="col p-0 py-3">
-                                <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+                    <!-- Right Bar -->
+                    <div class="col-md-2 docs-page-index position-relative">
+                    
+                        <div class="card docs-inner-anchors">
+                            <div class="card-header">
+                                <h5>@L["InThisDocument"]</h5>
+                            </div>
+                            <div class="card-body">
+                                <div id="scroll-index" class="mt-2">
+                                    <nav id="docs-sticky-index" class="navbar index-scroll">
+                                    </nav>
+                                    <div class="row">
+                                        <div class="col p-0 py-3">
+                                            <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+                                        </div>
+                                    </div>
+                                </div>
+
                             </div>
                         </div>
                     </div>
-                </div>
-            }
-            else
-            {
-                <div class="col-md-9 p-5 bg-white">
-                    <p>@L["DocumentNotFound"]</p>
+                }
+                else
+                {
+                    <div class="col-md-9 p-5 bg-white">
+                        <p>@L["DocumentNotFound"]</p>
 
-                    <a href="/">
-                        <i class="fa fa-chevron-left"></i>
-                        @L["BackToWebsite"]
-                    </a>
-                </div>
-            }
+                        <a href="/">
+                            <i class="fa fa-chevron-left"></i>
+                            @L["BackToWebsite"]
+                        </a>
+                    </div>
+                }
+            </div>
         </div>
-    </div>
 }
 else
 {
@@ -379,4 +409,4 @@ else
               }
           }))
     }
-}
+}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index 47b071442f..918974fa82 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -1,438 +1,622 @@
-body {
-  position: relative; }
+body {
+  position: relative;
+}
 
-a {
-  text-decoration: none; }
-
-.docs-page {
-  background: #f5f7f9; }
-  .docs-page .anchorjs-link {
-    transition: all .25s linear; }
-  .docs-page *:hover > .anchorjs-link {
-    margin-left: -1.125em !important;
-    transition: color .25s linear;
-    color: gray; }
-  .docs-page .anchorjs-link:hover {
-    text-decoration: none; }
-  .docs-page .docs-sidebar {
-    padding-right: 1rem;
-    position: relative;
-    top: 0px;
-    left: 0;
-    position: fixed;
-    background: #1d1d1d; }
-    .docs-page .docs-sidebar .input-group {
-      border-radius: 5px;
-      overflow: hidden; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper {
-      width: 300px;
-      float: right; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control {
-        border: 0; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited {
-          box-shadow: none; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version {
-        position: relative;
-        padding: 0 1rem;
-        margin: .25rem 0; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
-          border-radius: 3px; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
-            padding: 0 12px;
-            font-size: .9rem;
-            width: 30px;
-            height: 34px;
-            line-height: 1;
-            border-radius: 0px;
-            border: 0;
-            background: #000; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
-              color: #666; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-            padding: 0 10px 2px 10px;
-            border: 0;
-            min-height: 34px;
-            height: 34px;
-            font-size: .9em;
-            border-radius: 0px; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select:visited, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-select:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
-              box-shadow: none; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select {
-            padding: 0 10px 2px 6px;
-            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
-            background-repeat: no-repeat !important;
-            background-position: right 0.75rem center !important;
-            background-size: 16px 12px !important; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
-        padding: 0 1rem;
-        margin: .5rem 0;
-        font-size: .9em; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-          color: #ddd; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
-        height: 100vh; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
-          display: block;
-          height: calc(100vh - 230px);
-          overflow-y: auto;
-          margin-right: 12px !important;
-          margin-top: 20px !important; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
-          font-size: 14px;
-          list-style: none;
-          padding: 0 1rem 1rem;
-          margin: 0; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li {
-            margin-left: 0px;
-            padding-left: 24px;
-            display: block;
-            width: 100%;
-            position: relative; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
-              color: #999;
-              font-weight: 700;
-              padding: 7px 0;
-              display: block;
-              border-bottom: 0; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-                color: #000; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
-                top: 11px;
-                color: #aaa; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge {
-              text-transform: uppercase;
-              font-size: 9px;
-              position: relative;
-              letter-spacing: .125px;
-              top: -2px; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
-              color: #999;
-              padding: 7px 0;
-              display: block;
-              border-bottom: 0; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
-              font-size: .85em;
-              transition: .3s;
-              width: 18px;
-              height: 18px;
-              text-align: center;
-              padding: 0;
-              line-height: 1;
-              border-radius: 50%;
-              margin-right: 4px;
-              position: absolute;
-              left: 2px;
-              top: 11px;
-              color: #aaa;
-              cursor: default; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link {
-                color: #555; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right {
-                cursor: pointer; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul {
-              padding: 0; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a {
-                font-weight: 400; }
-              .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul {
-                padding: 0; }
-                .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a {
-                  font-weight: 300; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-              color: #000;
-              transition: .4s; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
-              transform: rotate(90deg);
-              color: #007bff; }
-            .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
-              transform: rotate(0deg); }
-    .docs-page .docs-sidebar .docs-top {
-      padding: 0 1em; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-        font-size: 1.35rem;
-        color: #000;
-        font-weight: 700;
-        padding: 15px 0 15px;
-        line-height: 1; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
-          font-weight: 300;
-          text-transform: uppercase;
-          font-size: .7em;
-          letter-spacing: 1px; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-        color: #000;
-        opacity: .65;
-        transition: .2s;
-        font-size: .8em;
-        font-weight: 300; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover {
-          text-decoration: none;
-          opacity: 1; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-        font-size: .85em; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
-          display: block; }
-  .docs-page .docs-content {
-    overflow-x: scroll;
-    min-height: 100vh; }
-    .docs-page .docs-content .contributors {
-      position: absolute;
-      top: 15px;
-      right: 5px; }
-      .docs-page .docs-content .contributors .contributors-avatar {
-        border-radius: 21px;
-        width: 21px;
-        height: 21px; }
-      .docs-page .docs-content .contributors a {
-        padding: 0;
-        width: 21px;
-        height: 21px;
-        display: inline-block;
-        margin: 0 0 0 2px; }
-        .docs-page .docs-content .contributors a:hover {
-          text-decoration: none; }
-    .docs-page .docs-content .docs-link-btns {
-      background: #f5f7fa;
-      padding: 15px 30px;
-      margin: 0 -15px;
-      text-align: right;
-      font-size: .8em;
-      min-height: 48px; }
-      .docs-page .docs-content .docs-link-btns a {
-        color: #222; }
-        .docs-page .docs-content .docs-link-btns a .text-muted {
-          color: #ccc !important; }
-        .docs-page .docs-content .docs-link-btns a:hover {
-          color: #000;
-          text-decoration: none; }
-      .docs-page .docs-content .docs-link-btns .search-area {
-        margin: -5px 0 -5px -10px;
-        box-shadow: 0 0 10px #e8e8e8; }
-        .docs-page .docs-content .docs-link-btns .search-area .input-group-text {
-          background: white;
-          border: 0;
-          color: #000;
-          font-size: 1em; }
-        .docs-page .docs-content .docs-link-btns .search-area .form-control {
-          background: #fff;
-          border: 0;
-          font-size: 1em;
-          padding-left: 0;
-          outline: 0;
-          box-shadow: none; }
-    .docs-page .docs-content .docs-text-field {
-      padding: 2rem; }
-    .docs-page .docs-content article.docs-body {
-      word-break: break-word; }
-      .docs-page .docs-content article.docs-body h1 {
-        padding-top: 1rem;
-        font-size: 2.25rem;
-        padding-bottom: 10px; }
-      .docs-page .docs-content article.docs-body h2 {
-        padding-top: 2rem;
-        padding-bottom: 10px;
-        font-size: 2rem; }
-      .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
-        padding-top: 20px;
-        padding-bottom: 5px;
-        font-size: 1.5rem; }
-      .docs-page .docs-content article.docs-body h1, .docs-page .docs-content article.docs-body h2, .docs-page .docs-content article.docs-body h3, .docs-page .docs-content article.docs-body h4, .docs-page .docs-content article.docs-body h5, .docs-page .docs-content article.docs-body h6 {
-        position: relative; }
-        .docs-page .docs-content article.docs-body h1 .anchor, .docs-page .docs-content article.docs-body h2 .anchor, .docs-page .docs-content article.docs-body h3 .anchor, .docs-page .docs-content article.docs-body h4 .anchor, .docs-page .docs-content article.docs-body h5 .anchor, .docs-page .docs-content article.docs-body h6 .anchor {
-          position: absolute;
-          right: -26px;
-          font-size: 18px;
-          bottom: 5px;
-          color: #999;
-          opacity: 0;
-          transition: .5s; }
-        .docs-page .docs-content article.docs-body h1:hover .anchor, .docs-page .docs-content article.docs-body h2:hover .anchor, .docs-page .docs-content article.docs-body h3:hover .anchor, .docs-page .docs-content article.docs-body h4:hover .anchor, .docs-page .docs-content article.docs-body h5:hover .anchor, .docs-page .docs-content article.docs-body h6:hover .anchor {
-          opacity: 1; }
-      .docs-page .docs-content article.docs-body .blockquote {
-        margin-bottom: 1rem;
-        margin-left: 0;
-        border-left: 3px solid #d2dbe4;
-        background-color: #e9edf1;
-        padding: 1em 1.5em !important;
-        font-size: 1em; }
-      .docs-page .docs-content article.docs-body img {
-        max-width: 100%;
-        border: 1px solid #f4f5f7;
-        margin: 15px 0 25px;
-        box-shadow: 0 0 45px #f8f9fa;
-        border-radius: 6px; }
-      .docs-page .docs-content article.docs-body table {
-        display: block;
-        overflow: auto;
-        width: 100%; }
-        .docs-page .docs-content article.docs-body table thead tr {
-          border-bottom: 2px inset; }
-        .docs-page .docs-content article.docs-body table th {
-          font-weight: 600; }
-        .docs-page .docs-content article.docs-body table td, .docs-page .docs-content article.docs-body table th {
-          border: 1px solid #dfe2e5;
-          padding: 6px 13px; }
-        .docs-page .docs-content article.docs-body table tr {
-          background-color: #fff;
-          border-top: 1px solid #c6cbd1; }
-        .docs-page .docs-content article.docs-body table tr:nth-child(2n) {
-          background-color: #f6f8fa; }
-        .docs-page .docs-content article.docs-body table img {
-          background-color: initial; }
-  .docs-page .doc-social-btns {
-    margin: 0 -15px 0;
-    font-size: .8em;
-    background: #e9ecf0;
-    height: 53px;
-    padding: 15px 20px;
-    position: fixed;
-    top: 0px;
-    width: 100%; }
-    .docs-page .doc-social-btns a:hover {
-      text-decoration: none; }
-    .docs-page .doc-social-btns .twitter {
-      color: #00ACEE; }
-    .docs-page .doc-social-btns .linkedin {
-      color: #0077B5; }
-    .docs-page .doc-social-btns .email {
-      color: #5a5a5a; }
-    .docs-page .doc-social-btns .share-button {
-      margin-left: 10px; }
-  .docs-page .cont-container a.cont-avatar {
-    position: relative; }
-    .docs-page .cont-container a.cont-avatar img {
-      width: 24px;
-      height: 24px;
-      box-shadow: 0 0 8px #c1bbbb;
-      border: 2px solid #fff;
-      margin-left: -10px;
-      display: inline-block;
-      margin-top: -2px;
-      transition: .2s; }
-  .docs-page .cont-container:hover a.cont-avatar img {
-    margin-left: -2px; }
-  .docs-page .docs-page-index {
-    min-height: 90vh;
-    background-color: #f5f7fa !important; }
-    .docs-page .docs-page-index #scroll-index {
-      max-height: 90vh; }
-    .docs-page .docs-page-index .docs-inner-anchors {
-      position: fixed;
-      top: 50px;
-      padding: 10px;
-      font-size: .90em; }
-      .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
-        font-size: .92em;
-        margin-left: 15px;
-        border-left: 1px solid #eee; }
-        .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link {
-          padding: 3px 14px 4px;
-          color: #aaa;
-          line-height: 1.2;
-          position: relative;
-          border-left: 1px solid #eee;
-          border-radius: 0;
-          margin-left: -1px;
-          margin-top: 1px;
-          margin-bottom: 1px;
-          transition: .2s;
-          font-weight: normal; }
-          .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
-            border-left: 1px solid #007bff;
-            background: none;
-            color: #007bff;
-            font-weight: normal; }
-        .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-          color: #007bff; }
-        .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-          color: #007bff; }
-      .docs-page .docs-page-index .docs-inner-anchors .index-scroll {
-        margin-left: -30px; }
-      .docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
-        max-width: 300px;
-        float: left; }
-    .docs-page .docs-page-index .scroll-top-btn {
-      display: none;
-      font-size: .85em;
-      color: #aaa;
-      text-decoration: none;
-      padding-left: 18px; }
-      .docs-page .docs-page-index .scroll-top-btn.showup {
-        display: block; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-select, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background: #000000;
-  color: white; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background: #000000;
-  color: white; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
-    color: white;
-    opacity: .5; }
+.container {
+  max-width: 1920px !important;
+  border: 1px solid;
+}
 
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
+a {
+  text-decoration: none;
+}
+
+.docs-page .anchorjs-link {
+  transition: all 0.25s linear;
+  -webkit-transition: all 0.25s linear;
+}
+.docs-page .anchorjs-link:hover {
+  text-decoration: none;
+}
+.docs-page *:hover > .anchorjs-link {
+  margin-left: -1.125em !important;
+  transition: color 0.25s linear;
+  color: gray;
+}
+.docs-page .docs-sidebar {
+  position: fixed;
+  top: 4px;
+  left: auto;
+  border-radius: 12px;
+  background: #211e1e;
+}
+.docs-page .docs-sidebar .input-group {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper {
+  width: 300px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control {
+  border: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:visited {
+  box-shadow: none;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version {
+  position: relative;
+  font-size: 12px;
+  background-color: #474747;
+  color: rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  padding: 7px 10px 0 10px;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+  background-repeat: no-repeat !important;
+  background-position: right 0.75rem center !important;
+  background-size: 16px 12px !important;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select {
+  border-radius: 3px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text {
+  padding: 0 0;
+  font-size: 0.9rem;
+  width: 15px;
+  height: 34px;
+  line-height: 1;
+  border-radius: 0px;
+  border: 0;
+  background: transparent;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
+  color: rgba(255, 255, 255, 0.3);
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select,
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
+  padding: 0 10px 2px 10px;
+  border: 0;
+  min-height: 30px;
+  height: 30px;
+  font-size: 1.17em;
+  border-radius: 0px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:focus, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:active, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:hover, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:visited,
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:active,
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
+  box-shadow: none;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select {
+  padding: 0 0 2px 0;
+  background-image: none;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter {
+  padding: 0 1rem;
+  margin: 0.5rem 0;
+  font-size: 0.9em;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
+  color: #ddd;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
+  height: calc(100vh - 130px);
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
+  display: block;
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+  margin-right: 12px !important;
+  margin-top: 20px !important;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
+  font-size: 14px;
+  list-style: none;
+  padding: 0 1rem 1rem;
+  margin: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li {
+  margin-left: 0px;
+  padding-left: 24px;
+  display: block;
+  width: 100%;
+  position: relative;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
+  color: #999;
+  font-weight: 700;
+  padding: 7px 0;
+  display: block;
+  border-bottom: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a:hover {
+  color: #000;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
+  top: 11px;
+  color: #aaa;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .badge {
+  text-transform: uppercase;
+  font-size: 9px;
+  position: relative;
+  letter-spacing: 0.125px;
+  top: -2px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
+  color: #999;
+  padding: 7px 0;
+  display: block;
+  border-bottom: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
+  font-size: 0.85em;
+  transition: 0.3s;
+  width: 18px;
+  height: 18px;
+  text-align: center;
+  padding: 0;
+  line-height: 1;
+  border-radius: 50%;
+  margin-right: 4px;
+  position: absolute;
+  left: 2px;
+  top: 11px;
+  color: #aaa;
+  cursor: default;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link {
+  color: #555;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right {
+  cursor: pointer;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul {
+  padding: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li a {
+  font-weight: 400;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li ul {
+  padding: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a {
+  font-weight: 300;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
+  color: #000;
+  transition: 0.4s;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
+  transform: rotate(90deg);
+  color: #3e9fcb;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
+  transform: rotate(0deg);
+}
+.docs-page .docs-sidebar .docs-top {
+  padding: 0 1em;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  font-size: 1.35rem;
+  color: #000;
+  font-weight: 700;
+  padding: 15px 0 15px;
+  line-height: 1;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
+  font-weight: 300;
+  text-transform: uppercase;
+  font-size: 0.7em;
+  letter-spacing: 1px;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+  color: #000;
+  opacity: 0.65;
+  transition: 0.2s;
+  font-size: 0.8em;
+  font-weight: 300;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
+  font-size: 0.85em;
+}
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
+  display: block;
+}
+.docs-page .docs-content {
+  overflow-x: scroll;
+  min-height: 100vh;
+}
+.docs-page .docs-content .contributors {
+  position: absolute;
+  top: 15px;
+  right: 5px;
+}
+.docs-page .docs-content .contributors .contributors-avatar {
+  border-radius: 21px;
+  width: 21px;
+  height: 21px;
+}
+.docs-page .docs-content .contributors a {
+  padding: 0;
+  width: 21px;
+  height: 21px;
+  display: inline-block;
+  margin: 0 0 0 2px;
+}
+.docs-page .docs-content .contributors a:hover {
+  text-decoration: none;
+}
+.docs-page .docs-content .docs-link-btns {
+  background: #f5f7fa;
+  padding: 15px 30px;
+  margin: 0 -15px;
+  text-align: right;
+  font-size: 0.8em;
+  min-height: 48px;
+}
+.docs-page .docs-content .docs-link-btns a {
+  color: #222;
+}
+.docs-page .docs-content .docs-link-btns a .text-muted {
+  color: #ccc !important;
+}
+.docs-page .docs-content .docs-link-btns a:hover {
+  color: #000;
+  text-decoration: none;
+}
+.docs-page .docs-content .docs-link-btns .search-area {
+  margin: -5px 0 -5px -10px;
+  box-shadow: 0 0 10px #e8e8e8;
+}
+.docs-page .docs-content .docs-link-btns .search-area .input-group-text {
+  background: white;
+  border: 0;
+  color: #000;
+  font-size: 1em;
+}
+.docs-page .docs-content .docs-link-btns .search-area .form-control {
+  background: #fff;
+  border: 0;
+  font-size: 1em;
+  padding-left: 0;
+  outline: 0;
+  box-shadow: none;
+}
+.docs-page .docs-content .docs-text-field {
+  padding: 2rem;
+}
+.docs-page .docs-content article.docs-body {
+  word-break: break-word;
+}
+.docs-page .docs-content article.docs-body h1 {
+  padding-top: 1rem;
+  font-size: 2.25rem;
+  padding-bottom: 10px;
+}
+.docs-page .docs-content article.docs-body h2 {
+  padding-top: 2rem;
+  padding-bottom: 10px;
+  font-size: 2rem;
+}
+.docs-page .docs-content article.docs-body h3,
+.docs-page .docs-content article.docs-body h4,
+.docs-page .docs-content article.docs-body h5,
+.docs-page .docs-content article.docs-body h6 {
+  padding-top: 20px;
+  padding-bottom: 5px;
+  font-size: 1.5rem;
+}
+.docs-page .docs-content article.docs-body h1,
+.docs-page .docs-content article.docs-body h2,
+.docs-page .docs-content article.docs-body h3,
+.docs-page .docs-content article.docs-body h4,
+.docs-page .docs-content article.docs-body h5,
+.docs-page .docs-content article.docs-body h6 {
+  position: relative;
+}
+.docs-page .docs-content article.docs-body h1 .anchor,
+.docs-page .docs-content article.docs-body h2 .anchor,
+.docs-page .docs-content article.docs-body h3 .anchor,
+.docs-page .docs-content article.docs-body h4 .anchor,
+.docs-page .docs-content article.docs-body h5 .anchor,
+.docs-page .docs-content article.docs-body h6 .anchor {
+  position: absolute;
+  right: -26px;
+  font-size: 18px;
+  bottom: 5px;
+  color: #999;
+  opacity: 0;
+  transition: 0.5s;
+}
+.docs-page .docs-content article.docs-body h1:hover .anchor,
+.docs-page .docs-content article.docs-body h2:hover .anchor,
+.docs-page .docs-content article.docs-body h3:hover .anchor,
+.docs-page .docs-content article.docs-body h4:hover .anchor,
+.docs-page .docs-content article.docs-body h5:hover .anchor,
+.docs-page .docs-content article.docs-body h6:hover .anchor {
+  opacity: 1;
+}
+.docs-page .docs-content article.docs-body .blockquote {
+  margin-bottom: 1rem;
+  margin-left: 0;
+  border-left: 3px solid #d2dbe4;
+  padding: 1em 1.5em;
+  background-color: #e9edf1;
+  padding-bottom: 0.2em;
+  font-size: 1em;
+}
+.docs-page .docs-content article.docs-body img {
+  max-width: 100%;
+  border: 1px solid #f4f5f7;
+  margin: 15px 0 25px;
+  box-shadow: 0 0 45px #f8f9fa;
+  border-radius: 6px;
+}
+.docs-page .docs-content article.docs-body table {
+  display: block;
+  overflow: auto;
+  width: 100%;
+}
+.docs-page .docs-content article.docs-body table thead tr {
+  border-bottom: 2px inset;
+}
+.docs-page .docs-content article.docs-body table th {
+  font-weight: 600;
+}
+.docs-page .docs-content article.docs-body table td,
+.docs-page .docs-content article.docs-body table th {
+  border: 1px solid #dfe2e5;
+  padding: 6px 13px;
+}
+.docs-page .docs-content article.docs-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+.docs-page .docs-content article.docs-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+.docs-page .docs-content article.docs-body table img {
+  background-color: initial;
+}
+.docs-page .cont-container a.cont-avatar {
+  position: relative;
+}
+.docs-page .cont-container a.cont-avatar img {
+  width: 24px;
+  height: 24px;
+  box-shadow: 0 0 8px #c1bbbb;
+  border: 2px solid #fff;
+  margin-left: -10px;
+  display: inline-block;
+  margin-top: -2px;
+  transition: 0.2s;
+}
+.docs-page .cont-container:hover a.cont-avatar img {
+  margin-left: -2px;
+}
+.docs-page .docs-page-index {
+  min-height: 90vh;
+  background-color: transparent !important;
+}
+.docs-page .docs-page-index #scroll-index {
+  max-height: 90vh;
+}
+.docs-page .docs-page-index .docs-inner-anchors {
+  position: fixed;
+  top: 4px;
+  font-size: 0.9em;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
+  font-size: 0.92em;
+  margin-left: 15px;
+  border-left: 1px solid #eee;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link {
+  padding: 3px 14px 4px;
+  color: #aaa;
+  line-height: 1.2;
+  position: relative;
+  border-left: 1px solid #eee;
+  border-radius: 0;
+  margin-left: -1px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  transition: 0.2s;
+  font-weight: normal;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
+  border-left: 1px solid #3e9fcb;
+  background: none;
+  color: #3e9fcb;
+  font-weight: normal;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
+  color: #3e9fcb;
+}
+.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
+  color: #3e9fcb;
+}
+.docs-page .docs-page-index .docs-inner-anchors .index-scroll {
+  margin-left: -30px;
+}
+.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
+  max-width: 300px;
+  float: left;
+}
+.docs-page .docs-page-index .scroll-top-btn {
+  display: none;
+  font-size: 0.85em;
+  color: #aaa;
+  text-decoration: none;
+  padding-left: 18px;
+}
+.docs-page .docs-page-index .scroll-top-btn.showup {
+  display: block;
+}
+.docs-page .card {
+  background-color: #fff;
+  border-radius: 12px;
+  border: none;
+  width: 300px;
+  padding: 30px;
+  box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
+}
+.docs-page .card .card-header {
+  background-color: transparent;
+  border-bottom: none;
+  color: #0b1621;
+  font-size: 19px;
+  padding: 0;
+}
+.docs-page .card .card-body {
+  padding: 0;
+}
+.docs-page .top-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0 5px 0;
+  border-bottom: 1px solid #eaeaea;
+}
+.docs-page .top-container .breadcrumb {
+  margin-bottom: 0;
+}
+.docs-page .top-container .breadcrumb .breadcrumb-item {
+  color: #838690;
+  font-size: 13px;
+  font-weight: 500;
+}
+.docs-page .top-container .breadcrumb .breadcrumb-item a {
+  color: #838690;
+}
+.docs-page .top-container .breadcrumb .breadcrumb-item.active {
+  color: #c7c8c9;
+  font-weight: 400;
+}
+.docs-page .top-container .doc-social-btns {
+  color: rgba(11, 22, 33, 0.5);
+}
+.docs-page .top-container .doc-social-btns a:hover {
+  text-decoration: none;
+}
+.docs-page .top-container .doc-social-btns .twitter,
+.docs-page .top-container .doc-social-btns .linkedin,
+.docs-page .top-container .doc-social-btns .email {
+  color: rgba(11, 22, 33, 0.5);
+}
+.docs-page .top-container .doc-social-btns .share-button {
+  margin-left: 10px;
+}
+.docs-page .custom-input-group {
+  border: 1px solid rgba(11, 22, 33, 0.1);
+  background-color: white;
+  border-radius: 8px;
+  padding: 7px 15px;
+}
+.docs-page .custom-input-group .input-group-text {
+  font-size: 12px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  color: rgba(11, 22, 33, 0.3);
+}
+.docs-page .custom-input-group .form-select {
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  background-position: right top;
+}
+.docs-page .custom-input-group .form-select:focus {
+  box-shadow: none !important;
+}
+
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select,
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select label {
   background: #000000;
   border-color: #000000;
-  color: #ddd; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
+  color: #ddd;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .form-control {
   background: #333;
-  color: #999; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select {
+  color: #999;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter select {
   border: 0;
-  border-radius: 6px; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-  color: #aaa; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
+  border-radius: 6px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
   color: #aaa;
-  border-bottom: 0; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-    color: #fff; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
-    font-size: .85em;
-    transition: .3s;
-    width: 18px;
-    height: 18px;
-    text-align: center;
-    padding: 0;
-    line-height: 1;
-    border-radius: 50%;
-    margin-right: 4px;
-    position: absolute;
-    left: 2px;
-    top: 11px;
-    color: #aaa;
-    cursor: default; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
-      color: #555; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
-      cursor: pointer; }
-    .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
-      top: 11px; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
+  color: #aaa;
+  border-bottom: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a:hover {
+  color: #fff;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
+  font-size: 0.85em;
+  transition: 0.3s;
+  width: 18px;
+  height: 18px;
+  text-align: center;
+  padding: 0;
+  line-height: 1;
+  border-radius: 50%;
+  margin-right: 4px;
+  position: absolute;
+  left: 2px;
+  top: 11px;
+  color: #aaa;
+  cursor: default;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
+  color: #555;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
+  cursor: pointer;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
+  top: 11px;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
   color: #555;
   padding: 7px 0;
   display: block;
-  border-bottom: 0; }
-
-.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
+  border-bottom: 0;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
   color: #fff;
-  transition: .4s; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
-    color: #fff; }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
-    transform: rotate(90deg);
-    color: #fff; }
-
+  transition: 0.4s;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
+  color: #fff;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
+  transform: rotate(90deg);
+  color: #fff;
+}
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
   color: #fff;
   text-transform: uppercase;
-  white-space: unset; }
-
+  white-space: unset;
+}
 .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
   color: #fff;
   text-align: center;
@@ -440,103 +624,128 @@ a {
   width: 100%;
   background: #444;
   padding: 6px 0 8px;
-  border-radius: 5px; }
-
+  border-radius: 5px;
+}
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-  color: #ddd; }
+  color: #ddd;
+}
 
 @media (min-width: 1100px) {
   .container {
-    max-width: 1080px; } }
-
+    max-width: 1080px;
+  }
+}
 @media (min-width: 1366px) {
   .container {
-    max-width: 1340px; } }
-
+    max-width: 1340px;
+  }
+}
 @media (min-width: 1440px) {
   .container {
-    max-width: 1400px; } }
-
+    max-width: 1400px;
+  }
+}
 @media (max-width: 767px) {
   .docs-page .docs-content article.docs-body h1 {
-    padding-top: 1.5rem; }
-  .docs-page {
-    background: #f5f7f9; }
-    .docs-page > .container-fluid {
-      display: block; }
-      .docs-page > .container-fluid > .row {
-        display: block; }
-    .docs-page .docs-sidebar {
-      position: fixed;
-      max-width: 100%;
-      width: 100%;
-      display: block;
-      padding: 0 !important;
-      top: 0;
-      left: 0;
-      z-index: 100;
-      right: 0; }
-      .docs-page .docs-sidebar .docs-sidebar-wrapper {
-        max-width: 100%;
-        width: 100%;
-        top: 0px;
-        position: relative;
-        margin: 0 !important;
-        height: 72px; }
-        .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
-          padding: .5rem 1.5rem 2rem 1.5rem;
-          position: fixed;
-          top: 70px;
-          font-size: 17px;
-          left: 0;
-          width: 100%;
-          z-index: 100;
-          background: #1d1d1d;
-          display: none; }
-          .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
-            padding: 0 0 1rem !important; }
-      .docs-page .docs-sidebar .docs-top .navbar-logo {
-        padding: 0rem;
-        padding-top: .3rem;
-        display: block;
-        text-align: center; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-          font-size: 1.25rem;
-          font-weight: 700;
-          display: block;
-          margin-right: 0em;
-          padding: 10px 0 15px;
-          text-transform: uppercase; }
-          .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
-            width: 110px; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-          display: none; }
-        .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-          font-size: 1em;
-          display: none; }
-      .docs-page .docs-sidebar .docs-top .open-dmenu {
-        position: absolute;
-        top: 10px;
-        left: 20px; }
-    .docs-page .docs-content {
-      padding-top: 72px;
-      max-width: 100%;
-      display: block !important; }
-      .docs-page .docs-content .docs-text-field {
-        padding: 1rem 1.5rem; }
-    .docs-page .docs-page-index {
-      display: none; } }
+    padding-top: 1.5rem;
+  }
 
+  .docs-page {
+    background: #f5f7f9;
+  }
+  .docs-page > .container-fluid {
+    display: block;
+  }
+  .docs-page > .container-fluid > .row {
+    display: block;
+  }
+  .docs-page .docs-sidebar {
+    position: fixed;
+    max-width: 100%;
+    width: 100%;
+    display: block;
+    padding: 0 !important;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    right: 0;
+  }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper {
+    max-width: 100%;
+    width: 100%;
+    top: 0px;
+    position: relative;
+    margin: 0 !important;
+    height: 72px;
+  }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
+    padding: 0.5rem 1.5rem 2rem 1.5rem;
+    position: fixed;
+    top: 70px;
+    font-size: 17px;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+    background: #1d1d1d;
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
+    padding: 0 0 1rem !important;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo {
+    padding: 0rem;
+    padding-top: 0.3rem;
+    display: block;
+    text-align: center;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+    font-size: 1.25rem;
+    font-weight: 700;
+    display: block;
+    margin-right: 0em;
+    padding: 10px 0 15px;
+    text-transform: uppercase;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
+    width: 110px;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
+    font-size: 1em;
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-top .open-dmenu {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+  }
+  .docs-page .docs-content {
+    padding-top: 72px;
+    max-width: 100%;
+    display: block !important;
+  }
+  .docs-page .docs-content .docs-text-field {
+    padding: 1rem 1.5rem;
+  }
+  .docs-page .docs-page-index {
+    display: none;
+  }
+}
 .for-mobile {
-  display: none; }
+  display: none;
+}
 
 .for-desktop {
-  display: inline-block; }
+  display: inline-block;
+}
 
-pre[class*="language-"] {
+pre[class*=language-] {
   padding: 1.4em 2em !important;
   margin: 15px 0 25px !important;
-  border-radius: 6px; }
+  border-radius: 6px;
+}
 
 code {
   padding: 0.2em 0.4em;
@@ -544,83 +753,114 @@ code {
   font-size: 82%;
   background-color: #f0f1f3;
   border-radius: 3px;
-  color: #28a745; }
+  color: #28a745;
+}
 
 pre code {
-  padding: 0; }
-
+  padding: 0;
+}
 pre .token.keyword {
-  color: #569cd6; }
-
-pre .token.atrule, pre .token.attr-value, pre .token.function, pre .token.class-name {
-  color: #d69d85; }
-
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
-  background: #191919 !important; }
+  color: #569cd6;
+}
+pre .token.atrule,
+pre .token.attr-value,
+pre .token.function,
+pre .token.class-name {
+  color: #d69d85;
+}
+
+:not(pre) > code[class*=language-],
+pre[class*=language-] {
+  background: #191919 !important;
+}
 
 div.code-toolbar > .toolbar span {
-  cursor: default; }
+  cursor: default;
+}
 
 div.code-toolbar > .toolbar a {
-  cursor: copy; }
+  cursor: copy;
+}
 
 .logo-nav ul {
-  width: 300px !important; }
+  width: 300px !important;
+}
 
 @media (max-width: 767px) {
   body {
-    font-size: 14px; }
+    font-size: 14px;
+  }
+
   .for-mobile {
-    display: inline-block; }
+    display: inline-block;
+  }
+
   .for-desktop {
-    display: none; }
-  .close-mmenu, .close-dmenu {
+    display: none;
+  }
+
+  .close-mmenu,
+.close-dmenu {
     position: absolute;
     top: -78px;
     left: 25px;
     color: #fff;
     font-size: 68px;
     background: #fff;
-    opacity: 0; }
+    opacity: 0;
+  }
+
   .navbar {
-    padding: .5rem 1.75rem; }
-    .navbar .navbar-collapse {
-      background: #38003d;
-      position: fixed;
-      top: 86px;
-      left: 0;
-      width: 100%;
-      height: 100vh;
-      height: calc(100vh - 86px);
-      z-index: 100 !important; }
-      .navbar .navbar-collapse .navbar-nav {
-        height: 100vh;
-        padding: 20px 30px;
-        overflow: auto; }
-        .navbar .navbar-collapse .navbar-nav .nav-link {
-          padding: 1.2rem !important; }
-    .navbar .navbar-toggler {
-      padding: .5rem .75rem;
-      font-size: 1.5rem;
-      line-height: 1;
-      background-color: transparent;
-      border: 0;
-      border-radius: .25rem;
-      color: #fff !important;
-      margin-left: -1rem; }
+    padding: 0.5rem 1.75rem;
+  }
+  .navbar .navbar-collapse {
+    background: #38003d;
+    position: fixed;
+    top: 86px;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    height: calc(100vh - 86px);
+    z-index: 100 !important;
+  }
+  .navbar .navbar-collapse .navbar-nav {
+    height: 100vh;
+    padding: 20px 30px;
+    overflow: auto;
+  }
+  .navbar .navbar-collapse .navbar-nav .nav-link {
+    padding: 1.2rem !important;
+  }
+  .navbar .navbar-toggler {
+    padding: 0.5rem 0.75rem;
+    font-size: 1.5rem;
+    line-height: 1;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0.25rem;
+    color: #fff !important;
+    margin-left: -1rem;
+  }
+
   .section-with-logos img {
     margin: 15px;
     opacity: 1;
     -webkit-filter: grayscale(0%);
-    filter: grayscale(0%); }
+    filter: grayscale(0%);
+  }
+
   span.code-arrow {
     padding: 0px 0 0px;
     display: block;
     transform: rotate(90deg);
-    font-size: 2em; }
-  .mb-5, .my-5 {
-    margin-bottom: 2rem !important; } }
-
+    font-size: 2em;
+  }
+
+  .mb-5,
+.my-5 {
+    margin-bottom: 2rem !important;
+  }
+}
 @media screen and (max-width: 767px) {
   .navbar-logo .navbar-brand {
     display: inline-block;
@@ -628,53 +868,79 @@ div.code-toolbar > .toolbar a {
     max-width: 70%;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap; } }
-
+    white-space: nowrap;
+  }
+}
 .alert-criteria {
   padding: 1.25em 1.5em;
-  max-width: 100%; }
-  .alert-criteria p.alert-p {
-    font-size: .96em; }
-  .alert-criteria .input-group .input-group-text, .alert-criteria .input-group .form-control {
-    font-size: .96em; }
-    @media screen and (max-width: 767px) {
-      .alert-criteria .input-group .input-group-text, .alert-criteria .input-group .form-control {
-        font-size: .88em; } }
+  max-width: 100%;
+  color: #3e9fcb;
+  background-color: #f4f6fa;
+  border-color: #f4f6fa;
+  border-radius: 12px;
+}
+.alert-criteria p.alert-p {
+  font-size: 0.96em;
+}
+.alert-criteria .input-group .input-group-text,
+.alert-criteria .input-group .form-control {
+  font-size: 0.96em;
+}
+@media screen and (max-width: 767px) {
+  .alert-criteria .input-group .input-group-text,
+.alert-criteria .input-group .form-control {
+    font-size: 0.88em;
+  }
+}
+.alert-criteria .input-group .input-group-text {
+  color: #004085;
+  background-color: #bddcfd;
+  border: 1px solid #bddcfd;
+}
+@media screen and (max-width: 1366px) {
   .alert-criteria .input-group .input-group-text {
-    color: #004085;
-    background-color: #bddcfd;
-    border: 1px solid #bddcfd; }
-    @media screen and (max-width: 1366px) {
-      .alert-criteria .input-group .input-group-text {
-        display: none; } }
+    display: none;
+  }
+}
+.alert-criteria .input-group .form-control {
+  color: #004085;
+  background-color: #fff;
+  border: 1px solid #bddcfd;
+}
+@media screen and (max-width: 1366px) {
   .alert-criteria .input-group .form-control {
-    color: #004085;
-    background-color: #fff;
-    border: 1px solid #bddcfd; }
-    @media screen and (max-width: 1366px) {
-      .alert-criteria .input-group .form-control {
-        border-top-left-radius: 0.25rem;
-        border-bottom-left-radius: 0.25rem; } }
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+}
 
 .scrolledMore {
-  padding-top: 107px; }
+  padding-top: 107px;
+}
+.scrolledMore .alert-criteria {
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  border: 0;
+  border-radius: 0;
+  margin-left: -47px;
+  padding: 0.5em 0.75em;
+}
+@media screen and (max-width: 767px) {
   .scrolledMore .alert-criteria {
-    position: fixed;
-    top: 0;
-    z-index: 10;
-    border: 0;
-    border-radius: 0;
-    margin-left: -47px;
-    padding: 0.5em 0.75em; }
-    @media screen and (max-width: 767px) {
-      .scrolledMore .alert-criteria {
-        top: 72px;
-        margin-left: -36px; } }
-    .scrolledMore .alert-criteria p.alert-p {
-      display: none; }
+    top: 72px;
+    margin-left: -36px;
+  }
+}
+.scrolledMore .alert-criteria p.alert-p {
+  display: none;
+}
 
 .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
 .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
   opacity: 1 !important;
   filter: "alpha(opacity=1)";
-  -ms-filter: "alpha(opacity=1)"; }
+  -ms-filter: "alpha(opacity=1)";
+}
+
+/*# sourceMappingURL=vs.css.map */
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
new file mode 100644
index 0000000000..74ca9cf43e
--- /dev/null
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAIA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAOZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACE;;;AAYM;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAOpB;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;EAGJ;IASI;;EARA;IACI;;EAEA;IACI;;EAMR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index c678d177e2..f397ba1cf6 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -1,103 +1,118 @@
 body {
     position: relative;
 }
-a { text-decoration: none;}
 
-.docs-page {
-    background: rgb(245, 247, 249);
+.container {
+    max-width: 1920px !important;
+    border: 1px solid;
+}
+
+a {
+    text-decoration: none;
+}
 
+.docs-page {
     .anchorjs-link {
-        transition: all .25s linear;
+        transition: all 0.25s linear;
+        -webkit-transition: all 0.25s linear;
+
+        &:hover {
+            text-decoration: none;
+        }
     }
 
     *:hover > .anchorjs-link {
         margin-left: -1.125em !important;
-        transition: color .25s linear;
+        transition: color 0.25s linear;
         color: gray;
     }
 
-    .anchorjs-link:hover {
-        text-decoration: none;
-    }
-
     .docs-sidebar {
-        padding-right: 1rem;
-        position: relative;
-        top: 0px;
-        left: 0;
         position: fixed;
-        background: #1d1d1d;
+        top: 4px;
+        left: auto;
+        border-radius: 12px;
+        background: #211e1e;
 
         .input-group {
             border-radius: 5px;
             overflow: hidden;
         }
 
-        .docs-sidebar-wrapper {
+        &.docs-sidebar-wrapper {
             width: 300px;
-            float: right;
 
             input.form-control {
                 border: 0;
 
-                &:focus, &:active, &:hover, &:visited {
+                &:focus,
+                &:active,
+                &:hover,
+                &:visited {
                     box-shadow: none;
                 }
             }
 
             .docs-version {
                 position: relative;
-                padding: 0 1rem;
-                margin: .25rem 0;
+                font-size: 12px;
+                background-color: #474747;
+                color: rgb(255 255 255 / 30%);
+                border-radius: 8px;
+                padding: 7px 10px 0 10px;
+                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+                background-repeat: no-repeat !important;
+                background-position: right 0.75rem center !important;
+                background-size: 16px 12px !important;
 
                 .version-select {
                     border-radius: 3px;
 
                     .input-group-text {
-                        padding: 0 12px;
-                        font-size: .9rem;
-                        width: 30px;
+                        padding: 0 0;
+                        font-size: 0.9rem;
+                        width: 15px;
                         height: 34px;
                         line-height: 1;
                         border-radius: 0px;
                         border: 0;
-                        background: #000;
+                        background: transparent;
 
                         i {
-                            color: #666;
+                            color: rgb(255 255 255 / 30%);
                         }
                     }
 
-                    select.form-select, input.form-control {
+                    select.form-select,
+                    input.form-control {
                         padding: 0 10px 2px 10px;
                         border: 0;
-                        min-height: 34px;
-                        height: 34px;
-                        font-size: .9em;
+                        min-height: 30px;
+                        height: 30px;
+                        font-size: 1.17em;
                         border-radius: 0px;
 
-                        &:focus, &:active, &:hover, &:visited {
+                        &:focus,
+                        &:active,
+                        &:hover,
+                        &:visited {
                             box-shadow: none;
                         }
                     }
 
                     select.form-select {
-                        padding: 0 10px 2px 6px;
-                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
-                        background-repeat: no-repeat !important;
-                        background-position: right 0.75rem center !important;
-                        background-size: 16px 12px !important;
+                        padding: 0 0 2px 0;
+                        background-image: none;
                     }
                 }
             }
 
             .docs-filter {
                 padding: 0 1rem;
-                margin: .5rem 0;
-                font-size: .9em;
+                margin: 0.5rem 0;
+                font-size: 0.9em;
 
                 .filter-icon {
-
                     i.fa {
                         color: #ddd;
                     }
@@ -105,7 +120,7 @@ a { text-decoration: none;}
             }
 
             .docs-tree-list {
-                height: 100vh;
+                height: calc(100vh - 130px);
 
                 > ul {
                     display: block;
@@ -128,7 +143,6 @@ a { text-decoration: none;}
                         width: 100%;
                         position: relative;
 
-
                         a {
                             color: #999;
                             font-weight: 700;
@@ -150,7 +164,7 @@ a { text-decoration: none;}
                             text-transform: uppercase;
                             font-size: 9px;
                             position: relative;
-                            letter-spacing: .125px;
+                            letter-spacing: 0.125px;
                             top: -2px;
                         }
 
@@ -162,8 +176,8 @@ a { text-decoration: none;}
                         }
 
                         .plus-icon {
-                            font-size: .85em;
-                            transition: .3s;
+                            font-size: 0.85em;
+                            transition: 0.3s;
                             width: 18px;
                             height: 18px;
                             text-align: center;
@@ -192,7 +206,6 @@ a { text-decoration: none;}
                             padding: 0;
 
                             li {
-
                                 a {
                                     font-weight: 400;
                                 }
@@ -212,13 +225,13 @@ a { text-decoration: none;}
                         &.selected-tree {
                             > a {
                                 color: #000;
-                                transition: .4s;
+                                transition: 0.4s;
                             }
 
                             > span {
                                 .fa {
                                     transform: rotate(90deg);
-                                    color: #007bff;
+                                    color: #3e9fcb;
                                 }
                             }
 
@@ -235,9 +248,8 @@ a { text-decoration: none;}
             }
         }
 
-
-        .docs-top { 
-             padding: 0 1em; 
+        .docs-top {
+            padding: 0 1em;
 
             .navbar-logo {
                 .navbar-brand {
@@ -250,16 +262,16 @@ a { text-decoration: none;}
                     strong {
                         font-weight: 300;
                         text-transform: uppercase;
-                        font-size: .7em;
+                        font-size: 0.7em;
                         letter-spacing: 1px;
                     }
                 }
 
                 .go-back-site {
                     color: #000;
-                    opacity: .65;
-                    transition: .2s;
-                    font-size: .8em;
+                    opacity: 0.65;
+                    transition: 0.2s;
+                    font-size: 0.8em;
                     font-weight: 300;
 
                     &:hover {
@@ -269,7 +281,7 @@ a { text-decoration: none;}
                 }
 
                 .navbar-logo-desc {
-                    font-size: .85em;
+                    font-size: 0.85em;
 
                     strong {
                         display: block;
@@ -312,7 +324,7 @@ a { text-decoration: none;}
             padding: 15px 30px;
             margin: 0 -15px;
             text-align: right;
-            font-size: .8em;
+            font-size: 0.8em;
             min-height: 48px;
 
             a {
@@ -369,13 +381,21 @@ a { text-decoration: none;}
                 font-size: 2rem;
             }
 
-            h3, h4, h5, h6 {
+            h3,
+            h4,
+            h5,
+            h6 {
                 padding-top: 20px;
                 padding-bottom: 5px;
                 font-size: 1.5rem;
             }
 
-            h1, h2, h3, h4, h5, h6 {
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
                 position: relative;
 
                 .anchor {
@@ -385,7 +405,7 @@ a { text-decoration: none;}
                     bottom: 5px;
                     color: #999;
                     opacity: 0;
-                    transition: .5s;
+                    transition: 0.5s;
                 }
 
                 &:hover {
@@ -401,7 +421,7 @@ a { text-decoration: none;}
                 border-left: 3px solid #d2dbe4;
                 padding: 1em 1.5em;
                 background-color: #e9edf1;
-                padding-bottom: .2em;
+                padding-bottom: 0.2em;
                 font-size: 1em;
             }
 
@@ -413,7 +433,6 @@ a { text-decoration: none;}
                 border-radius: 6px;
             }
 
-
             table {
                 display: block;
                 overflow: auto;
@@ -426,61 +445,31 @@ a { text-decoration: none;}
                 }
 
                 th {
-                    font-weight: 600
+                    font-weight: 600;
                 }
 
-                td, th {
+                td,
+                th {
                     border: 1px solid #dfe2e5;
-                    padding: 6px 13px
+                    padding: 6px 13px;
                 }
 
                 tr {
                     background-color: #fff;
-                    border-top: 1px solid #c6cbd1
+                    border-top: 1px solid #c6cbd1;
                 }
 
                 tr:nth-child(2n) {
-                    background-color: #f6f8fa
+                    background-color: #f6f8fa;
                 }
 
                 img {
-                    background-color: initial
+                    background-color: initial;
                 }
             }
         }
     }
 
-    .doc-social-btns {
-        margin: 0 -15px 0;
-        font-size: .8em;
-        background: #e9ecf0;
-        height: 53px;
-        padding: 15px 20px;
-        position: fixed;
-        top: 0px;
-        width: 100%;
-
-        a:hover {
-            text-decoration: none;
-        }
-
-        .twitter {
-            color: #00ACEE;
-        }
-
-        .linkedin {
-            color: #0077B5;
-        }
-
-        .email {
-            color: #5a5a5a;
-        }
-
-        .share-button {
-            margin-left: 10px;
-        }
-    }
-
     .cont-container {
         a.cont-avatar {
             position: relative;
@@ -493,7 +482,7 @@ a { text-decoration: none;}
                 margin-left: -10px;
                 display: inline-block;
                 margin-top: -2px;
-                transition: .2s;
+                transition: 0.2s;
             }
         }
 
@@ -508,7 +497,7 @@ a { text-decoration: none;}
 
     .docs-page-index {
         min-height: 90vh;
-        background-color: #f5f7fa !important;
+        background-color: transparent !important;
 
         #scroll-index {
             max-height: 90vh;
@@ -516,13 +505,12 @@ a { text-decoration: none;}
 
         .docs-inner-anchors {
             position: fixed;
-            top: 50px;
-            padding: 10px;
-            font-size: .90em;
+            top: 4px;
+            font-size: 0.9em;
 
             .navbar {
                 .nav-pills {
-                    font-size: .92em;
+                    font-size: 0.92em;
                     margin-left: 15px;
                     border-left: 1px solid #eee;
 
@@ -536,13 +524,13 @@ a { text-decoration: none;}
                         margin-left: -1px;
                         margin-top: 1px;
                         margin-bottom: 1px;
-                        transition: .2s;
+                        transition: 0.2s;
                         font-weight: normal;
 
                         &.active {
-                            border-left: 1px solid #007bff;
+                            border-left: 1px solid #3e9fcb;
                             background: none;
-                            color: #007bff;
+                            color: #3e9fcb;
                             font-weight: normal;
                         }
                     }
@@ -550,14 +538,14 @@ a { text-decoration: none;}
                     .nav-pills {
                         .nav-link {
                             &.active {
-                                color: #007bff;
+                                color: #3e9fcb;
                             }
                         }
 
                         .nav-pills {
                             .nav-link {
                                 &.active {
-                                    color: #007bff;
+                                    color: #3e9fcb;
                                 }
                             }
                         }
@@ -575,10 +563,9 @@ a { text-decoration: none;}
             }
         }
 
-
         .scroll-top-btn {
             display: none;
-            font-size: .85em;
+            font-size: 0.85em;
             color: #aaa;
             text-decoration: none;
             padding-left: 18px;
@@ -588,28 +575,110 @@ a { text-decoration: none;}
             }
         }
     }
-}
 
+    .card {
+        background-color: #fff;
+        border-radius: 12px;
+        border: none;
+        width: 300px;
+        padding: 30px;
+        box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
+
+        .card-header {
+            background-color: transparent;
+            border-bottom: none;
+            color: #0b1621;
+            font-size: 19px;
+            padding: 0;
+        }
+        .card-body {
+            padding: 0;
+        }
+    }
+
+    .top-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0 5px 0;
+        border-bottom: 1px solid #eaeaea;
+
+        .breadcrumb {
+            margin-bottom: 0;
+
+            .breadcrumb-item {
+                color: #838690;
+                font-size: 13px;
+                font-weight: 500;
+                a {
+                    color: #838690;
+                }
+                &.active {
+                    color: #c7c8c9;
+                    font-weight: 400;
+                }
+            }
+        }
+        .doc-social-btns {
+            color: rgb(11 22 33 / 50%);
+
+            a:hover {
+                text-decoration: none;
+            }
+
+            .twitter,
+            .linkedin,
+            .email {
+                color: rgb(11 22 33 / 50%);
+            }
+            .share-button {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .custom-input-group {
+        border: 1px solid rgba(11, 22, 33, 0.1);
+        background-color: white;
+        border-radius: 8px;
+        padding: 7px 15px;
+        .input-group-text {
+            font-size: 12px;
+            padding: 0;
+            background-color: transparent;
+            border: none;
+            color: rgb(11 22 33 / 30%)
+        }
+        .form-select {
+            border: none;
+            padding: 0;
+            background-color: transparent;
+            background-position: right top;
+            &:focus{
+              box-shadow: none !important;
+            }
+
+        }
+    }
+}
 
 .docs-page {
     .docs-sidebar {
-        .docs-sidebar-wrapper {
-
+        &.docs-sidebar-wrapper {
             .docs-version {
                 .version-select {
-
-                    select.form-select, input.form-control {
-                        background: #000000;
-                        color: white;
+                    select.form-select,
+                    input.form-control {
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
                     }
 
                     input.form-control {
-                        background: #000000;
-                        color: white;
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
 
                         &::placeholder {
-                            color: white;
-                            opacity: .5;
+                            color: rgb(255 255 255 / 30%);
                         }
                     }
 
@@ -642,8 +711,6 @@ a { text-decoration: none;}
             .docs-tree-list {
                 ul {
                     li {
-
-
                         a {
                             color: #aaa;
                             border-bottom: 0;
@@ -653,8 +720,8 @@ a { text-decoration: none;}
                             }
 
                             .plus-icon {
-                                font-size: .85em;
-                                transition: .3s;
+                                font-size: 0.85em;
+                                transition: 0.3s;
                                 width: 18px;
                                 height: 18px;
                                 text-align: center;
@@ -684,7 +751,6 @@ a { text-decoration: none;}
                             }
                         }
 
-
                         span.tree-toggle {
                             color: #555;
                             padding: 7px 0;
@@ -692,11 +758,10 @@ a { text-decoration: none;}
                             border-bottom: 0;
                         }
 
-
                         &.selected-tree {
                             > a {
                                 color: #fff;
-                                transition: .4s;
+                                transition: 0.4s;
 
                                 span {
                                     .fa {
@@ -741,32 +806,6 @@ a { text-decoration: none;}
     }
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 @media (min-width: 1100px) {
     .container {
         max-width: 1080px;
@@ -821,7 +860,7 @@ a { text-decoration: none;}
                 height: 72px;
 
                 .docs-tree-list {
-                    padding: .5rem 1.5rem 2rem 1.5rem;
+                    padding: 0.5rem 1.5rem 2rem 1.5rem;
                     position: fixed;
                     top: 70px;
                     font-size: 17px;
@@ -846,7 +885,7 @@ a { text-decoration: none;}
             .docs-top {
                 .navbar-logo {
                     padding: 0rem;
-                    padding-top: .3rem;
+                    padding-top: 0.3rem;
                     display: block;
                     text-align: center;
 
@@ -900,7 +939,6 @@ a { text-decoration: none;}
     }
 }
 
-
 .for-mobile {
     display: none;
 }
@@ -909,7 +947,7 @@ a { text-decoration: none;}
     display: inline-block;
 }
 
-pre[class*="language-"] {
+pre[class*='language-'] {
     padding: 1.4em 2em !important;
     margin: 15px 0 25px !important;
     border-radius: 6px;
@@ -933,16 +971,19 @@ pre {
         color: #569cd6;
     }
 
-    .token.atrule, .token.attr-value, .token.function, .token.class-name {
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name {
         color: #d69d85;
     }
 }
 
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
     background: #191919 !important;
 }
 
-
 div.code-toolbar > .toolbar span {
     cursor: default;
 }
@@ -968,7 +1009,8 @@ div.code-toolbar > .toolbar a {
         display: none;
     }
 
-    .close-mmenu, .close-dmenu {
+    .close-mmenu,
+    .close-dmenu {
         position: absolute;
         top: -78px;
         left: 25px;
@@ -979,7 +1021,7 @@ div.code-toolbar > .toolbar a {
     }
 
     .navbar {
-        padding: .5rem 1.75rem;
+        padding: 0.5rem 1.75rem;
 
         .navbar-collapse {
             background: rgb(56, 0, 61);
@@ -1003,12 +1045,12 @@ div.code-toolbar > .toolbar a {
         }
 
         .navbar-toggler {
-            padding: .5rem .75rem;
+            padding: 0.5rem 0.75rem;
             font-size: 1.5rem;
             line-height: 1;
             background-color: transparent;
             border: 0;
-            border-radius: .25rem;
+            border-radius: 0.25rem;
             color: #fff !important;
             margin-left: -1rem;
         }
@@ -1028,13 +1070,12 @@ div.code-toolbar > .toolbar a {
         font-size: 2em;
     }
 
-    .mb-5, .my-5 {
+    .mb-5,
+    .my-5 {
         margin-bottom: 2rem !important;
     }
 }
 
-
-
 @media screen and (max-width: 767px) {
     .navbar-logo {
         .navbar-brand {
@@ -1048,22 +1089,25 @@ div.code-toolbar > .toolbar a {
     }
 }
 
-
-
 .alert-criteria {
     padding: 1.25em 1.5em;
     max-width: 100%;
+    color: #3e9fcb;
+    background-color: #f4f6fa;
+    border-color: #f4f6fa;
+    border-radius: 12px;
 
     p.alert-p {
-        font-size: .96em;
+        font-size: 0.96em;
     }
 
     .input-group {
-        .input-group-text, .form-control {
-            font-size: .96em;
+        .input-group-text,
+        .form-control {
+            font-size: 0.96em;
 
             @media screen and (max-width: 767px) {
-                font-size: .88em;
+                font-size: 0.88em;
             }
         }
 
@@ -1072,7 +1116,6 @@ div.code-toolbar > .toolbar a {
             background-color: #bddcfd;
             border: 1px solid #bddcfd;
 
-
             @media screen and (max-width: 1366px) {
                 display: none;
             }
@@ -1117,6 +1160,6 @@ div.code-toolbar > .toolbar a {
 .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
 .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
     opacity: 1 !important;
-    filter: "alpha(opacity=1)";
-    -ms-filter: "alpha(opacity=1)";
-}
+    filter: 'alpha(opacity=1)';
+    -ms-filter: 'alpha(opacity=1)';
+}
\ No newline at end of file

From 975b4dd8f4c6bdca9ed04f3ee2ee9e166cdefa0d Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Fri, 26 Aug 2022 18:09:48 +0300
Subject: [PATCH 02/12] commit

---
 .../Pages/Documents/Project/Index.cshtml      | 123 +++++++-------
 .../Pages/Documents/Shared/Styles/vs.css      | 133 +++++++--------
 .../Pages/Documents/Shared/Styles/vs.css.map  |   2 +-
 .../Pages/Documents/Shared/Styles/vs.scss     | 152 ++++++++++--------
 4 files changed, 222 insertions(+), 188 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index d471603c2f..ec897eb73c 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -53,13 +53,13 @@
         <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
             <div class="row">
                 <div class="col-md-2">
-                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
+                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar p-2">
 
                         <div class="docs-top">
                             <nav class="navbar navbar-logo">
                                 @if (!Model.Project.Name.IsNullOrWhiteSpace())
                                 {
-                                    <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
+                                    <a class="navbar-brand" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
                                         <span id="ProjectName">@Model.Project.Name</span><br>
                                         <strong class="display-block">
                                             @L["Documents"]
@@ -71,7 +71,6 @@
                                 {
                                     <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
                                         <i class="fa fa-chevron-left"></i>
-                                        @L["BackToWebsite"]
                                     </a>
                                 }
 
@@ -86,9 +85,10 @@
                         </div>
 
                         <div class="docs-tree-list">
-                            <div class="px-3">
-                                <div class="row mx-0 mb-2 ">
-                                    <div class="col-md-6 pe-1 ps-0">
+                            <div class="px-4">
+                                <div class="row mx-0 mb-1 ">
+                                    
+                                    <div class="col-12 px-0 mb-1">
                                         @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
                                             {
                                                 <div class="docs-version">
@@ -108,11 +108,11 @@
                                                 </div>
                                             }
                                     </div>
-                                    <div class="col-md-6 pe-0 ps-1">
-                                        <div class="row">
+
+                                    <div class="col-12 px-0 mb-1">
                                             @if (Model.VersionSelectItems.Any())
                                             {
-                                                <div class="col @(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
+                                                <div class="@(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
                                                     <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
                                                         <span>Version</span>
                                                         <div class="version-select">
@@ -132,28 +132,32 @@
                                                     </div>
                                                 </div>
                                             }
+                                    </div>
 
-                                            @if (Model.LanguageSelectListItems.Count > 1)
-                                            {
-                                                <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
-                                                    <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
-                                                        <span>Language</span>
-                                                        <div class="version-select">
-                                                            <div class="input-group">
-                                                                @*<span class="input-group-text">
-                                                                    <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
-                                                                    </span>*@
-                                                                <select asp-items="Model.LanguageSelectListItems"
-                                                                class="form-select"
-                                                                onchange="window.location.replace(this.value)">
-                                                                </select>
-                                                            </div>
-                                                        </div>
+
+                                <div class="col-12 px-0 mb-1">
+
+                                    @if (Model.LanguageSelectListItems.Count > 1)
+                                    {
+                                        <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
+                                            <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
+                                                <span>Language</span>
+                                                <div class="version-select">
+                                                    <div class="input-group">
+                                                        @*<span class="input-group-text">
+                                                            <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
+                                                            </span>*@
+                                                        <select asp-items="Model.LanguageSelectListItems"
+                                                        class="form-select"
+                                                        onchange="window.location.replace(this.value)">
+                                                        </select>
                                                     </div>
                                                 </div>
-                                            }
+                                            </div>
                                         </div>
-                                    </div>
+                                    }
+                                </div>
+
                                 </div>
 
                                 <div class="docs-version">
@@ -170,6 +174,7 @@
                                     </div>
                                 </div>
                             </div>
+
                             @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
                             {
                                 <div class="text-muted p-3">
@@ -239,41 +244,45 @@
                                         </div>
                                     }
                                 </div>
-                                <div class="col-auto">
-                                    <div class="cont-container">
+                                <div class="col-auto text-end">
+                                    <div class="cont-container d-flex align-items-center justify-content-end h-100">
                                         @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                                         {
-                                            <span class="for-desktop me-3">
-                                                @(L["Contributors"].Value)
-                                            </span>
-                                            @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
-                                            {
-                                                <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
-                                                    <img src="@contributor.AvatarUrl"
-                                        class="rounded-circle"
-                                        alt="Avatar"
-                                        height="21"
-                                        width="21"
-                                        title="@contributor.Username" />
-                                                </a>
-                                            }
+                                                <div class="me-4">
+                                                    <span class="for-desktop w-100 contributors-text">
+                                                       @(L["Contributors"].Value):
+                                                   </span>
+
+                                                     @if (string.IsNullOrEmpty(Model.Document.EditLink))
+                                                        {
+                                                            <a href="@Model.Document.EditLink" target="_blank">
+                                                                <i class="fa fa-edit"></i>
+                                                                @(L["Edit"])
+                                                                <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
+                                                            </a>
+                                                        }
+                                                </div>
+                                                <div class="">
+                                                  @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                                    {
+                                                        <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
+                                                            <img src="@contributor.AvatarUrl"
+                                                                class="rounded-circle"
+                                                                alt="Avatar"
+                                                                height="21"
+                                                                width="21"
+                                                                title="@contributor.Username" />
+                                                        </a>
+                                                    }
+                                                </div>
                                         }
+                                 
                                     </div>
-                                </div>
-                                <div class="col-auto">
-                                    @if (!string.IsNullOrEmpty(Model.Document.EditLink))
-                                    {
-                                        <a href="@Model.Document.EditLink" target="_blank">
-                                            <i class="fa fa-edit"></i>
-                                            @(L["Edit"])
-                                            <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
-                                        </a>
-                                    }
+
+                               
 
                                 </div>
                             </div>
-
-
                         </div>
 
                     
@@ -295,7 +304,7 @@
                                             <abp-row>
                                                 @foreach (var parameter in Model.DocumentPreferences.Parameters)
                                                 {
-                                                    <abp-column size="_6">
+                                                    <abp-column size="_4">
                                                         <div class="custom-input-group">
                                                             <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
                                                             <select class="doc-section-combobox form-select"
@@ -356,7 +365,7 @@
                                     <nav id="docs-sticky-index" class="navbar index-scroll">
                                     </nav>
                                     <div class="row">
-                                        <div class="col p-0 py-3">
+                                        <div class="col p-0">
                                             <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
                                         </div>
                                     </div>
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index 918974fa82..abcfb360bc 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -4,13 +4,21 @@ body {
 
 .container {
   max-width: 1920px !important;
-  border: 1px solid;
+  padding: 0;
 }
 
 a {
   text-decoration: none;
 }
 
+.btn-primary {
+  background-color: #b84297 !important;
+  font-size: 12px;
+}
+
+.docs-page {
+  padding: 0 1rem;
+}
 .docs-page .anchorjs-link {
   transition: all 0.25s linear;
   -webkit-transition: all 0.25s linear;
@@ -46,7 +54,7 @@ a {
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version {
   position: relative;
   font-size: 12px;
-  background-color: #474747;
+  background-color: #121212;
   color: rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   padding: 7px 10px 0 10px;
@@ -100,7 +108,7 @@ a {
   color: #ddd;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-  height: calc(100vh - 130px);
+  height: calc(100vh - 98px);
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
   display: block;
@@ -112,7 +120,7 @@ a {
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
   font-size: 14px;
   list-style: none;
-  padding: 0 1rem 1rem;
+  padding: 0 1.6em 1em;
   margin: 0;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li {
@@ -124,8 +132,8 @@ a {
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
   color: #999;
-  font-weight: 700;
-  padding: 7px 0;
+  font-weight: 500;
+  padding: 4px 0;
   display: block;
   border-bottom: 0;
 }
@@ -189,18 +197,18 @@ a {
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
   transform: rotate(90deg);
-  color: #3e9fcb;
+  color: #b84297;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
   transform: rotate(0deg);
 }
 .docs-page .docs-sidebar .docs-top {
-  padding: 0 1em;
+  padding: 0 1.9em;
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
   font-size: 1.35rem;
   color: #000;
-  font-weight: 700;
+  font-weight: 500;
   padding: 15px 0 15px;
   line-height: 1;
 }
@@ -252,37 +260,37 @@ a {
   text-decoration: none;
 }
 .docs-page .docs-content .docs-link-btns {
-  background: #f5f7fa;
-  padding: 15px 30px;
-  margin: 0 -15px;
-  text-align: right;
   font-size: 0.8em;
-  min-height: 48px;
+  padding: 0 2rem;
 }
 .docs-page .docs-content .docs-link-btns a {
-  color: #222;
+  color: #3e9fcb;
 }
 .docs-page .docs-content .docs-link-btns a .text-muted {
-  color: #ccc !important;
+  color: rgba(11, 22, 33, 0.3) !important;
 }
 .docs-page .docs-content .docs-link-btns a:hover {
-  color: #000;
+  color: #3e9fcb;
   text-decoration: none;
 }
 .docs-page .docs-content .docs-link-btns .search-area {
-  margin: -5px 0 -5px -10px;
-  box-shadow: 0 0 10px #e8e8e8;
+  background-color: rgba(11, 15, 33, 0.05);
+  border-radius: 8px;
+  height: 44px;
+}
+.docs-page .docs-content .docs-link-btns .search-area .input-group {
+  height: 100%;
 }
 .docs-page .docs-content .docs-link-btns .search-area .input-group-text {
-  background: white;
+  background: transparent;
   border: 0;
-  color: #000;
+  color: rgba(41, 45, 51, 0.5);
   font-size: 1em;
 }
 .docs-page .docs-content .docs-link-btns .search-area .form-control {
-  background: #fff;
+  background: transparent;
   border: 0;
-  font-size: 1em;
+  font-size: 1.1em;
   padding-left: 0;
   outline: 0;
   box-shadow: none;
@@ -383,17 +391,19 @@ a {
 .docs-page .docs-content article.docs-body table img {
   background-color: initial;
 }
+.docs-page .cont-container .contributors-text {
+  color: rgba(11, 22, 33, 0.5);
+  font-size: 1.1em;
+  font-weight: 600;
+}
 .docs-page .cont-container a.cont-avatar {
   position: relative;
 }
 .docs-page .cont-container a.cont-avatar img {
-  width: 24px;
-  height: 24px;
-  box-shadow: 0 0 8px #c1bbbb;
-  border: 2px solid #fff;
+  width: 32px;
+  height: 32px;
   margin-left: -10px;
   display: inline-block;
-  margin-top: -2px;
   transition: 0.2s;
 }
 .docs-page .cont-container:hover a.cont-avatar img {
@@ -430,16 +440,16 @@ a {
   font-weight: normal;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
-  border-left: 1px solid #3e9fcb;
+  border-left: 1px solid #b84297;
   background: none;
-  color: #3e9fcb;
+  color: #b84297;
   font-weight: normal;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-  color: #3e9fcb;
+  color: #b84297;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-  color: #3e9fcb;
+  color: #b84297;
 }
 .docs-page .docs-page-index .docs-inner-anchors .index-scroll {
   margin-left: -30px;
@@ -470,11 +480,21 @@ a {
   background-color: transparent;
   border-bottom: none;
   color: #0b1621;
-  font-size: 19px;
   padding: 0;
 }
+.docs-page .card .card-header h5 {
+  font-size: 19px;
+}
 .docs-page .card .card-body {
   padding: 0;
+  color: rgba(11, 22, 33, 0.4);
+  font-size: 13px;
+  padding: 1rem 0;
+}
+.docs-page .card .card-footer {
+  padding: 0;
+  background-color: transparent;
+  border: none;
 }
 .docs-page .top-container {
   display: flex;
@@ -482,6 +502,7 @@ a {
   align-items: center;
   padding: 10px 0 5px 0;
   border-bottom: 1px solid #eaeaea;
+  margin: 0 2rem;
 }
 .docs-page .top-container .breadcrumb {
   margin-bottom: 0;
@@ -619,40 +640,20 @@ a {
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
   color: #fff;
-  text-align: center;
-  display: block;
-  width: 100%;
-  background: #444;
-  padding: 6px 0 8px;
-  border-radius: 5px;
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
   color: #ddd;
 }
 
-@media (min-width: 1100px) {
-  .container {
-    max-width: 1080px;
-  }
-}
-@media (min-width: 1366px) {
-  .container {
-    max-width: 1340px;
-  }
-}
-@media (min-width: 1440px) {
-  .container {
-    max-width: 1400px;
-  }
-}
 @media (max-width: 767px) {
+  .docs-page {
+    padding: 0 0;
+  }
+
   .docs-page .docs-content article.docs-body h1 {
     padding-top: 1.5rem;
   }
 
-  .docs-page {
-    background: #f5f7f9;
-  }
   .docs-page > .container-fluid {
     display: block;
   }
@@ -662,23 +663,24 @@ a {
   .docs-page .docs-sidebar {
     position: fixed;
     max-width: 100%;
-    width: 100%;
+    width: 100% !important;
     display: block;
     padding: 0 !important;
-    top: 0;
+    top: 0 !important;
     left: 0;
     z-index: 100;
     right: 0;
   }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper {
+  .docs-page .docs-sidebar.docs-sidebar-wrapper {
     max-width: 100%;
     width: 100%;
     top: 0px;
     position: relative;
     margin: 0 !important;
     height: 72px;
+    border-radius: 0;
   }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list {
+  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
     padding: 0.5rem 1.5rem 2rem 1.5rem;
     position: fixed;
     top: 70px;
@@ -689,7 +691,7 @@ a {
     background: #1d1d1d;
     display: none;
   }
-  .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
+  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list .docs-filter {
     padding: 0 0 1rem !important;
   }
   .docs-page .docs-sidebar .docs-top .navbar-logo {
@@ -700,7 +702,7 @@ a {
   }
   .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
     font-size: 1.25rem;
-    font-weight: 700;
+    font-weight: 500;
     display: block;
     margin-right: 0em;
     padding: 10px 0 15px;
@@ -722,7 +724,6 @@ a {
     left: 20px;
   }
   .docs-page .docs-content {
-    padding-top: 72px;
     max-width: 100%;
     display: block !important;
   }
@@ -810,6 +811,10 @@ div.code-toolbar > .toolbar a {
     opacity: 0;
   }
 
+  .docs-page .top-container {
+    display: none;
+  }
+
   .navbar {
     padding: 0.5rem 1.75rem;
   }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index 74ca9cf43e..d28bbb609b 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAIA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAOZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACE;;;AAYM;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAOpB;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;AAIR;EACI;IACI;;;EAGJ;IASI;;EARA;IACI;;EAEA;IACI;;EAMR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAIJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACG;;AAGH;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAOZ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index f397ba1cf6..4ca8843571 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -4,14 +4,20 @@ body {
 
 .container {
     max-width: 1920px !important;
-    border: 1px solid;
+    padding: 0;
 }
 
 a {
     text-decoration: none;
 }
 
+.btn-primary {
+    background-color: #b84297 !important;
+    font-size: 12px;
+}
+
 .docs-page {
+    padding: 0 1rem;
     .anchorjs-link {
         transition: all 0.25s linear;
         -webkit-transition: all 0.25s linear;
@@ -56,7 +62,7 @@ a {
             .docs-version {
                 position: relative;
                 font-size: 12px;
-                background-color: #474747;
+                background-color: #121212;
                 color: rgb(255 255 255 / 30%);
                 border-radius: 8px;
                 padding: 7px 10px 0 10px;
@@ -120,7 +126,7 @@ a {
             }
 
             .docs-tree-list {
-                height: calc(100vh - 130px);
+                height: calc(100vh - 98px);
 
                 > ul {
                     display: block;
@@ -133,7 +139,7 @@ a {
                 ul {
                     font-size: 14px;
                     list-style: none;
-                    padding: 0 1rem 1rem;
+                    padding: 0 1.6em 1em;
                     margin: 0;
 
                     li {
@@ -145,8 +151,8 @@ a {
 
                         a {
                             color: #999;
-                            font-weight: 700;
-                            padding: 7px 0;
+                            font-weight: 500;
+                            padding: 4px 0;
                             display: block;
                             border-bottom: 0;
 
@@ -231,7 +237,7 @@ a {
                             > span {
                                 .fa {
                                     transform: rotate(90deg);
-                                    color: #3e9fcb;
+                                    color: #b84297;
                                 }
                             }
 
@@ -249,13 +255,13 @@ a {
         }
 
         .docs-top {
-            padding: 0 1em;
+            padding: 0 1.9em;
 
             .navbar-logo {
                 .navbar-brand {
                     font-size: 1.35rem;
                     color: #000;
-                    font-weight: 700;
+                    font-weight: 500;
                     padding: 15px 0 15px;
                     line-height: 1;
 
@@ -320,41 +326,43 @@ a {
         }
 
         .docs-link-btns {
-            background: #f5f7fa;
-            padding: 15px 30px;
-            margin: 0 -15px;
-            text-align: right;
             font-size: 0.8em;
-            min-height: 48px;
+            padding: 0 2rem;
 
             a {
-                color: #222;
+                color: #3e9fcb;
 
                 .text-muted {
-                    color: #ccc !important;
+                    color:rgb(11 22 33 / 30%) !important
+
                 }
 
                 &:hover {
-                    color: #000;
+                    color: #3e9fcb;
                     text-decoration: none;
                 }
             }
 
             .search-area {
-                margin: -5px 0 -5px -10px;
-                box-shadow: 0 0 10px #e8e8e8;
+                background-color: rgb(11 15 33 / 5%);
+                border-radius: 8px;
+                height: 44px;
+
+                .input-group {
+                   height: 100%;
+                }
 
                 .input-group-text {
-                    background: white;
+                    background: transparent;
                     border: 0;
-                    color: #000;
+                    color: rgb(41 45 51 / 50%);
                     font-size: 1em;
                 }
 
                 .form-control {
-                    background: #fff;
+                    background: transparent;
                     border: 0;
-                    font-size: 1em;
+                    font-size: 1.1em;
                     padding-left: 0;
                     outline: 0;
                     box-shadow: none;
@@ -471,17 +479,20 @@ a {
     }
 
     .cont-container {
+        .contributors-text{
+            color: rgb(11 22 33 / 50%);
+            font-size: 1.1em;
+            font-weight: 600;
+        }
+
         a.cont-avatar {
             position: relative;
 
             img {
-                width: 24px;
-                height: 24px;
-                box-shadow: 0 0 8px #c1bbbb;
-                border: 2px solid #fff;
+                width: 32px;
+                height: 32px;
                 margin-left: -10px;
                 display: inline-block;
-                margin-top: -2px;
                 transition: 0.2s;
             }
         }
@@ -528,9 +539,9 @@ a {
                         font-weight: normal;
 
                         &.active {
-                            border-left: 1px solid #3e9fcb;
+                            border-left: 1px solid #b84297;
                             background: none;
-                            color: #3e9fcb;
+                            color: #b84297;
                             font-weight: normal;
                         }
                     }
@@ -538,14 +549,14 @@ a {
                     .nav-pills {
                         .nav-link {
                             &.active {
-                                color: #3e9fcb;
+                                color: #b84297;
                             }
                         }
 
                         .nav-pills {
                             .nav-link {
                                 &.active {
-                                    color: #3e9fcb;
+                                    color: #b84297;
                                 }
                             }
                         }
@@ -588,11 +599,21 @@ a {
             background-color: transparent;
             border-bottom: none;
             color: #0b1621;
-            font-size: 19px;
             padding: 0;
+            h5 {
+                font-size: 19px;
+            }
         }
         .card-body {
             padding: 0;
+            color: rgb(11 22 33 / 40%);
+            font-size: 13px;
+            padding: 1rem 0;
+        }
+        .card-footer {
+            padding: 0;
+            background-color: transparent;
+            border: none;
         }
     }
 
@@ -602,6 +623,7 @@ a {
         align-items: center;
         padding: 10px 0 5px 0;
         border-bottom: 1px solid #eaeaea;
+        margin: 0 2rem;
 
         .breadcrumb {
             margin-bottom: 0;
@@ -647,17 +669,16 @@ a {
             padding: 0;
             background-color: transparent;
             border: none;
-            color: rgb(11 22 33 / 30%)
+            color: rgb(11 22 33 / 30%);
         }
         .form-select {
             border: none;
             padding: 0;
             background-color: transparent;
             background-position: right top;
-            &:focus{
-              box-shadow: none !important;
+            &:focus {
+                box-shadow: none !important;
             }
-
         }
     }
 }
@@ -790,12 +811,6 @@ a {
 
                 .go-back-site {
                     color: #fff;
-                    text-align: center;
-                    display: block;
-                    width: 100%;
-                    background: #444;
-                    padding: 6px 0 8px;
-                    border-radius: 5px;
                 }
 
                 .navbar-logo-desc {
@@ -806,25 +821,28 @@ a {
     }
 }
 
-@media (min-width: 1100px) {
-    .container {
-        max-width: 1080px;
-    }
-}
+// @media (min-width: 1100px) {
+//     .container {
+//         max-width: 1080px;
+//     }
+// }
 
-@media (min-width: 1366px) {
-    .container {
-        max-width: 1340px;
-    }
-}
+// @media (min-width: 1366px) {
+//     .container {
+//         max-width: 1340px;
+//     }
+// }
 
-@media (min-width: 1440px) {
-    .container {
-        max-width: 1400px;
-    }
-}
+// @media (min-width: 1440px) {
+//     .container {
+//         max-width: 1400px;
+//     }
+// }
 
 @media (max-width: 767px) {
+    .docs-page {
+        padding: 0 0;
+    }
     .docs-page .docs-content article.docs-body h1 {
         padding-top: 1.5rem;
     }
@@ -838,26 +856,25 @@ a {
             }
         }
 
-        background: rgb(245, 247, 249);
-
         .docs-sidebar {
             position: fixed;
             max-width: 100%;
-            width: 100%;
+            width: 100% !important;
             display: block;
             padding: 0 !important;
-            top: 0;
+            top: 0 !important;
             left: 0;
             z-index: 100;
             right: 0;
 
-            .docs-sidebar-wrapper {
+            &.docs-sidebar-wrapper {
                 max-width: 100%;
                 width: 100%;
                 top: 0px;
                 position: relative;
                 margin: 0 !important;
                 height: 72px;
+                border-radius: 0;
 
                 .docs-tree-list {
                     padding: 0.5rem 1.5rem 2rem 1.5rem;
@@ -891,7 +908,7 @@ a {
 
                     .navbar-brand {
                         font-size: 1.25rem;
-                        font-weight: 700;
+                        font-weight: 500;
                         display: block;
                         margin-right: 0em;
                         padding: 10px 0 15px;
@@ -924,7 +941,6 @@ a {
         }
 
         .docs-content {
-            padding-top: 72px;
             max-width: 100%;
             display: block !important;
 
@@ -1020,6 +1036,10 @@ div.code-toolbar > .toolbar a {
         opacity: 0;
     }
 
+    .docs-page .top-container {
+        display: none;
+    }
+
     .navbar {
         padding: 0.5rem 1.75rem;
 
@@ -1162,4 +1182,4 @@ div.code-toolbar > .toolbar a {
     opacity: 1 !important;
     filter: 'alpha(opacity=1)';
     -ms-filter: 'alpha(opacity=1)';
-}
\ No newline at end of file
+}

From fbb0664e57cf3e6e435d1f9afd8d96fb9b6d0290 Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Thu, 1 Sep 2022 18:05:55 +0300
Subject: [PATCH 03/12] docs modul edited

---
 .../Pages/Documents/Project/Index.cshtml      | 141 ++++----
 .../Pages/Documents/Project/Index.cshtml.cs   |   7 +
 .../Pages/Documents/Shared/Scripts/vs.js      |   2 +-
 .../Pages/Documents/Shared/Styles/vs.css      | 290 ++++++++++-------
 .../Pages/Documents/Shared/Styles/vs.css.map  |   2 +-
 .../Pages/Documents/Shared/Styles/vs.scss     | 302 +++++++++++-------
 6 files changed, 450 insertions(+), 294 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index ec897eb73c..24b18cad3a 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -51,9 +51,8 @@
 @if (Model.LoadSuccess)
 {
         <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
-            <div class="row">
-                <div class="col-md-2">
-                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar p-2">
+         
+                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
 
                         <div class="docs-top">
                             <nav class="navbar navbar-logo">
@@ -85,12 +84,12 @@
                         </div>
 
                         <div class="docs-tree-list">
-                            <div class="px-4">
-                                <div class="row mx-0 mb-1 ">
-                                    
-                                    <div class="col-12 px-0 mb-1">
-                                        @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
+                            <div class="">
+                                <div class="row gx-2 mb-2 ">
+                                     @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
                                             {
+                                    <div class="col-12 mb-2">
+                                       
                                                 <div class="docs-version">
                                                     <span>Project</span>
                                                     <div class="version-select">
@@ -106,12 +105,13 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                            }
+                                           
                                     </div>
-
-                                    <div class="col-12 px-0 mb-1">
-                                            @if (Model.VersionSelectItems.Any())
+ } 
+ @if (Model.VersionSelectItems.Any())
                                             {
+                                    <div class="col">
+                                           
                                                 <div class="@(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
                                                     <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
                                                         <span>Version</span>
@@ -131,15 +131,15 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                            }
+                                           
                                     </div>
-
-
-                                <div class="col-12 px-0 mb-1">
-
-                                    @if (Model.LanguageSelectListItems.Count > 1)
+ }
+  @if (Model.LanguageSelectListItems.Count > 1)
                                     {
-                                        <div class="@(Model.VersionSelectItems.Any()? "ps-0 col-5" : "col")">
+                                <div class="col">
+
+                                  
+                                        <div class="@(Model.VersionSelectItems.Any()? "" : "")">
                                             <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
                                                 <span>Language</span>
                                                 <div class="version-select">
@@ -155,9 +155,9 @@
                                                 </div>
                                             </div>
                                         </div>
-                                    }
+                                   
                                 </div>
-
+                                 }
                                 </div>
 
                                 <div class="docs-version">
@@ -195,33 +195,36 @@
                         </div>
 
                     </div>
-                </div>
 
                 @if (Model.Document != null)
                 {
-                    <div class="col docs-content bg-white">
-                        <div class="top-container mb-3">
-                            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-                                <ol class="breadcrumb">
-                                    <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
-                                    <li class="breadcrumb-item"><a href="#"> Documents</a></li>
-                                    <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
-                                    <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
-                                    <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
-                                </ol>
-                            </nav>
-
-                            <div class="doc-social-btns">
-                                <small> @(L["ShareOn"].Value + " :")</small>
-                                <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                                    <i class="fa fa-twitter"></i>
-                                </a>
-                                <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                                    <i class="fa fa-linkedin"></i>
-                                </a>
-                                <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                                    <i class="fa fa-envelope-square"></i>
-                                </a>
+                    <div class="docs-content">
+                        <div class="top-container align-items-center mb-3">
+                            <div class="row w-100 mx-0">
+                                <div class="col-12 col-lg-9 px-0">
+                                    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
+                                            <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                            <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                            <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                            <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                                <div class="col-12 col-lg-3 text-lg-end px-0">
+                                    <div class="doc-social-btns">
+                                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                                            <i class="fa fa-twitter"></i>
+                                        </a>
+                                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                                            <i class="fa fa-linkedin"></i>
+                                        </a>
+                                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                                            <i class="fa fa-envelope-square"></i>
+                                        </a>
+                                    </div>
+                                </div>   
                             </div>
                         </div>
 
@@ -248,9 +251,9 @@
                                     <div class="cont-container d-flex align-items-center justify-content-end h-100">
                                         @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                                         {
-                                                <div class="me-4">
-                                                    <span class="for-desktop w-100 contributors-text">
-                                                       @(L["Contributors"].Value):
+                                                <div class="me-4 d-flex flex-column">
+                                                    <span class="for-desktop contributors-text">
+                                                       @(L["Contributors"].Value)
                                                    </span>
 
                                                      @if (string.IsNullOrEmpty(Model.Document.EditLink))
@@ -258,7 +261,7 @@
                                                             <a href="@Model.Document.EditLink" target="_blank">
                                                                 <i class="fa fa-edit"></i>
                                                                 @(L["Edit"])
-                                                                <span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
+                                                                <span class="for-desktop text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title='@L["LastEditTime"]'>(@Model.Document.LastUpdatedTime.ToShortDateString())</span>
                                                             </a>
                                                         }
                                                 </div>
@@ -271,7 +274,10 @@
                                                                 alt="Avatar"
                                                                 height="21"
                                                                 width="21"
-                                                                title="@contributor.Username" />
+                                                                title="@contributor.Username" 
+                                                                data-bs-toggle="tooltip"
+                                                                 data-bs-placement="top"
+                                                                />
                                                         </a>
                                                     }
                                                 </div>
@@ -301,10 +307,10 @@
                                                     </p>
                                                 </abp-column>
                                             </abp-row>
-                                            <abp-row>
+                                            <abp-row class="gx-2">
                                                 @foreach (var parameter in Model.DocumentPreferences.Parameters)
                                                 {
-                                                    <abp-column size="_4">
+                                                    <div class="col">
                                                         <div class="custom-input-group">
                                                             <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
                                                             <select class="doc-section-combobox form-select"
@@ -323,7 +329,7 @@
                                                                 }
                                                             </select>
                                                         </div>
-                                                    </abp-column>
+                                                    </div>
                                                 }
                                             </abp-row>
                                         </div>
@@ -354,23 +360,23 @@
                     </div>
 
                     <!-- Right Bar -->
-                    <div class="col-md-2 docs-page-index position-relative">
-                    
-                        <div class="card docs-inner-anchors">
-                            <div class="card-header">
-                                <h5>@L["InThisDocument"]</h5>
-                            </div>
-                            <div class="card-body">
-                                <div id="scroll-index" class="mt-2">
-                                    <nav id="docs-sticky-index" class="navbar index-scroll">
-                                    </nav>
-                                    <div class="row">
-                                        <div class="col p-0">
-                                            <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+                    <div class=" docs-page-index">
+                        <div class=" docs-inner-anchors">
+                            <div class="card for-desktop">
+                                <div class="card-body">
+                                    <h5 class="card-title">@L["InThisDocument"]</h5>
+
+                                    <div id="scroll-index" class="mt-2">
+                                        <nav id="docs-sticky-index" class="navbar index-scroll">
+                                        </nav>
+                                        <div class="row">
+                                            <div class="col p-0">
+                                                <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
 
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -386,7 +392,6 @@
                         </a>
                     </div>
                 }
-            </div>
         </div>
 }
 else
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs
index c68d25d1e8..76e1a05f92 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs
@@ -461,6 +461,13 @@ namespace Volo.Docs.Pages.Documents.Project
                 }
             }
 
+            Document.Contributors = new List<DocumentContributorDto>
+            {
+                new DocumentContributorDto { Username = "hikalkan", UserProfileUrl = "https://github.com/hikalkan", AvatarUrl = "https://avatars.githubusercontent.com/u/1210527?v=4", CommitCount = 1 },
+                new DocumentContributorDto { Username = "armgnunlu", UserProfileUrl = "https://github.com/armgnunlu", AvatarUrl = "https://avatars.githubusercontent.com/u/36102404?v=4", CommitCount = 1 },
+                new DocumentContributorDto { Username = "engincanV", UserProfileUrl = "https://github.com/engincanV", AvatarUrl = "https://avatars.githubusercontent.com/u/43685404?v=4", CommitCount = 1 },
+                new DocumentContributorDto { Username = "halimekarayay", UserProfileUrl = "https://github.com/halimekarayay", AvatarUrl = "https://avatars.githubusercontent.com/u/86843575?v=4", CommitCount = 1 },
+            };
             await ConvertDocumentContentToHtmlAsync();
         }
 
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
index 16b5d922c7..247ae27c9b 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
@@ -155,7 +155,7 @@
     };
 
     function docsCriteria() {
-        var docsContentWidth = $('.docs-content').width() - 20;
+        var docsContentWidth = $('.docs-content').width() - 90;
         $('.alert-criteria').width(docsContentWidth);
     }
     $(document).ready(function () {
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index abcfb360bc..eba23294bf 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -1,9 +1,10 @@
 body {
   position: relative;
+  background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%);
 }
 
 .container {
-  max-width: 1920px !important;
+  max-width: 1680px !important;
   padding: 0;
 }
 
@@ -27,16 +28,19 @@ a {
   text-decoration: none;
 }
 .docs-page *:hover > .anchorjs-link {
-  margin-left: -1.125em !important;
+  margin-left: -0.8em !important;
   transition: color 0.25s linear;
   color: gray;
 }
 .docs-page .docs-sidebar {
+  display: inline-block;
   position: fixed;
-  top: 4px;
+  top: 1rem;
+  bottom: 1rem;
   left: auto;
   border-radius: 12px;
   background: #211e1e;
+  padding: 0.5rem 1.75em;
 }
 .docs-page .docs-sidebar .input-group {
   border-radius: 5px;
@@ -57,24 +61,34 @@ a {
   background-color: #121212;
   color: rgba(255, 255, 255, 0.3);
   border-radius: 8px;
-  padding: 7px 10px 0 10px;
+  padding: 0 10px 0 10px;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
   background-repeat: no-repeat !important;
   background-position: right 0.75rem center !important;
   background-size: 16px 12px !important;
 }
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version input[type=search] {
+  background-color: #121212 !important;
+  min-height: 34px !important;
+  height: 34px !important;
+}
+.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version span {
+  bottom: -5px;
+  position: relative;
+}
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select {
   border-radius: 3px;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text {
   padding: 0 0;
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   width: 15px;
   height: 34px;
   line-height: 1;
   border-radius: 0px;
   border: 0;
   background: transparent;
+  top: 1px;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
   color: rgba(255, 255, 255, 0.3);
@@ -108,19 +122,19 @@ a {
   color: #ddd;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-  height: calc(100vh - 98px);
+  height: calc(100vh - 115px);
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
   display: block;
-  height: calc(100vh - 230px);
+  height: calc(100vh - 310px);
   overflow-y: auto;
-  margin-right: 12px !important;
+  margin-right: -4px !important;
   margin-top: 20px !important;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
   font-size: 14px;
   list-style: none;
-  padding: 0 1.6em 1em;
+  padding: 0 0 1em;
   margin: 0;
 }
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li {
@@ -169,7 +183,7 @@ a {
   margin-right: 4px;
   position: absolute;
   left: 2px;
-  top: 11px;
+  top: 9px;
   color: #aaa;
   cursor: default;
 }
@@ -202,9 +216,6 @@ a {
 .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
   transform: rotate(0deg);
 }
-.docs-page .docs-sidebar .docs-top {
-  padding: 0 1.9em;
-}
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
   font-size: 1.35rem;
   color: #000;
@@ -224,6 +235,12 @@ a {
   transition: 0.2s;
   font-size: 0.8em;
   font-weight: 300;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover {
   text-decoration: none;
@@ -236,8 +253,17 @@ a {
   display: block;
 }
 .docs-page .docs-content {
+  display: inline-block;
   overflow-x: scroll;
   min-height: 100vh;
+  width: calc(100% - 600px);
+  margin-left: 300px;
+  padding: 1rem 1rem;
+}
+@media (max-width: 767px) {
+  .docs-page .docs-content {
+    padding: 0 0;
+  }
 }
 .docs-page .docs-content .contributors {
   position: absolute;
@@ -261,7 +287,12 @@ a {
 }
 .docs-page .docs-content .docs-link-btns {
   font-size: 0.8em;
-  padding: 0 2rem;
+  padding: 0 1.75em;
+}
+@media (max-width: 767px) {
+  .docs-page .docs-content .docs-link-btns {
+    padding: 0 1.5rem;
+  }
 }
 .docs-page .docs-content .docs-link-btns a {
   color: #3e9fcb;
@@ -296,7 +327,7 @@ a {
   box-shadow: none;
 }
 .docs-page .docs-content .docs-text-field {
-  padding: 2rem;
+  padding: 1.5em;
 }
 .docs-page .docs-content article.docs-body {
   word-break: break-word;
@@ -352,18 +383,18 @@ a {
 .docs-page .docs-content article.docs-body .blockquote {
   margin-bottom: 1rem;
   margin-left: 0;
-  border-left: 3px solid #d2dbe4;
+  border-left: 3px solid rgba(184, 66, 151, 0.3);
   padding: 1em 1.5em;
-  background-color: #e9edf1;
-  padding-bottom: 0.2em;
+  background-color: rgba(184, 66, 151, 0.15);
   font-size: 1em;
+  border-radius: 12px;
 }
 .docs-page .docs-content article.docs-body img {
   max-width: 100%;
   border: 1px solid #f4f5f7;
   margin: 15px 0 25px;
   box-shadow: 0 0 45px #f8f9fa;
-  border-radius: 6px;
+  border-radius: 12px;
 }
 .docs-page .docs-content article.docs-body table {
   display: block;
@@ -391,6 +422,18 @@ a {
 .docs-page .docs-content article.docs-body table img {
   background-color: initial;
 }
+@media (max-width: 1200px) {
+  .docs-page .docs-content {
+    width: calc(100% - 300px);
+  }
+}
+@media (max-width: 767px) {
+  .docs-page .docs-content {
+    width: 100%;
+    margin-left: 0;
+    padding-top: 80px;
+  }
+}
 .docs-page .cont-container .contributors-text {
   color: rgba(11, 22, 33, 0.5);
   font-size: 1.1em;
@@ -402,23 +445,31 @@ a {
 .docs-page .cont-container a.cont-avatar img {
   width: 32px;
   height: 32px;
-  margin-left: -10px;
+  margin-left: -12px;
   display: inline-block;
   transition: 0.2s;
+  border: 2px solid #fff;
+}
+@media (max-width: 992px) {
+  .docs-page .cont-container a.cont-avatar img {
+    width: 24px;
+    height: 24px;
+  }
 }
 .docs-page .cont-container:hover a.cont-avatar img {
-  margin-left: -2px;
+  margin-left: -8px;
 }
 .docs-page .docs-page-index {
-  min-height: 90vh;
-  background-color: transparent !important;
+  display: inline-block;
+  position: absolute;
 }
 .docs-page .docs-page-index #scroll-index {
   max-height: 90vh;
 }
 .docs-page .docs-page-index .docs-inner-anchors {
   position: fixed;
-  top: 4px;
+  z-index: 99;
+  top: 1rem;
   font-size: 0.9em;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
@@ -468,28 +519,29 @@ a {
 .docs-page .docs-page-index .scroll-top-btn.showup {
   display: block;
 }
+@media (max-width: 1200px) {
+  .docs-page .docs-page-index {
+    display: none;
+  }
+}
 .docs-page .card {
   background-color: #fff;
   border-radius: 12px;
   border: none;
   width: 300px;
-  padding: 30px;
   box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 }
 .docs-page .card .card-header {
   background-color: transparent;
   border-bottom: none;
   color: #0b1621;
-  padding: 0;
 }
 .docs-page .card .card-header h5 {
   font-size: 19px;
 }
 .docs-page .card .card-body {
-  padding: 0;
-  color: rgba(11, 22, 33, 0.4);
   font-size: 13px;
-  padding: 1rem 0;
+  padding: 1.75em;
 }
 .docs-page .card .card-footer {
   padding: 0;
@@ -500,17 +552,22 @@ a {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 0 5px 0;
   border-bottom: 1px solid #eaeaea;
-  margin: 0 2rem;
+  margin: 0 1.75em;
 }
 .docs-page .top-container .breadcrumb {
   margin-bottom: 0;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  white-space: nowrap;
+  padding-bottom: 10px;
 }
 .docs-page .top-container .breadcrumb .breadcrumb-item {
   color: #838690;
   font-size: 13px;
   font-weight: 500;
+  padding: 0 9px 0 0px;
+  display: flex;
 }
 .docs-page .top-container .breadcrumb .breadcrumb-item a {
   color: #838690;
@@ -521,6 +578,17 @@ a {
 }
 .docs-page .top-container .doc-social-btns {
   color: rgba(11, 22, 33, 0.5);
+  white-space: nowrap;
+  top: -2px;
+  position: relative;
+}
+@media (max-width: 992px) {
+  .docs-page .top-container .doc-social-btns {
+    display: none;
+  }
+}
+.docs-page .top-container .doc-social-btns small {
+  font-size: 13px;
 }
 .docs-page .top-container .doc-social-btns a:hover {
   text-decoration: none;
@@ -537,7 +605,7 @@ a {
   border: 1px solid rgba(11, 22, 33, 0.1);
   background-color: white;
   border-radius: 8px;
-  padding: 7px 15px;
+  padding: 7px 1rem;
 }
 .docs-page .custom-input-group .input-group-text {
   font-size: 12px;
@@ -675,7 +743,6 @@ a {
     max-width: 100%;
     width: 100%;
     top: 0px;
-    position: relative;
     margin: 0 !important;
     height: 72px;
     border-radius: 0;
@@ -687,6 +754,7 @@ a {
     font-size: 17px;
     left: 0;
     width: 100%;
+    height: 100vh;
     z-index: 100;
     background: #1d1d1d;
     display: none;
@@ -731,7 +799,11 @@ a {
     padding: 1rem 1.5rem;
   }
   .docs-page .docs-page-index {
-    display: none;
+    display: block;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
   }
 }
 .for-mobile {
@@ -745,7 +817,7 @@ a {
 pre[class*=language-] {
   padding: 1.4em 2em !important;
   margin: 15px 0 25px !important;
-  border-radius: 6px;
+  border-radius: 12px;
 }
 
 code {
@@ -772,7 +844,7 @@ pre .token.class-name {
 
 :not(pre) > code[class*=language-],
 pre[class*=language-] {
-  background: #191919 !important;
+  background: #211e1e !important;
 }
 
 div.code-toolbar > .toolbar span {
@@ -787,6 +859,79 @@ div.code-toolbar > .toolbar a {
   width: 300px !important;
 }
 
+.alert-criteria {
+  padding: 1.25rem 1.25rem;
+  max-width: 100%;
+  color: #3e9fcb;
+  background-color: #f4f6fa;
+  border-color: #f4f6fa;
+  border-radius: 12px;
+  background: rgba(190, 223, 238, 0.82);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+.alert-criteria p.alert-p {
+  font-size: 0.96em;
+}
+.alert-criteria .input-group .input-group-text,
+.alert-criteria .input-group .form-control {
+  font-size: 0.96em;
+}
+@media screen and (max-width: 767px) {
+  .alert-criteria .input-group .input-group-text,
+.alert-criteria .input-group .form-control {
+    font-size: 0.88em;
+  }
+}
+.alert-criteria .input-group .input-group-text {
+  color: #004085;
+  background-color: #bddcfd;
+  border: 1px solid #bddcfd;
+}
+@media screen and (max-width: 1366px) {
+  .alert-criteria .input-group .input-group-text {
+    display: none;
+  }
+}
+.alert-criteria .input-group .form-control {
+  color: #004085;
+  background-color: #fff;
+  border: 1px solid #bddcfd;
+}
+@media screen and (max-width: 1366px) {
+  .alert-criteria .input-group .form-control {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+}
+
+.scrolledMore {
+  padding-top: 107px;
+}
+.scrolledMore .alert-criteria {
+  position: fixed;
+  top: 1rem;
+  z-index: 10;
+  border: 0;
+  margin-left: 0;
+}
+@media screen and (max-width: 767px) {
+  .scrolledMore .alert-criteria {
+    top: 72px;
+    margin-left: -36px;
+  }
+}
+.scrolledMore .alert-criteria p.alert-p {
+  display: none;
+}
+
+.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+  opacity: 1 !important;
+  filter: "alpha(opacity=1)";
+  -ms-filter: "alpha(opacity=1)";
+}
+
 @media (max-width: 767px) {
   body {
     font-size: 14px;
@@ -812,7 +957,7 @@ div.code-toolbar > .toolbar a {
   }
 
   .docs-page .top-container {
-    display: none;
+    margin-top: 10px;
   }
 
   .navbar {
@@ -876,76 +1021,5 @@ div.code-toolbar > .toolbar a {
     white-space: nowrap;
   }
 }
-.alert-criteria {
-  padding: 1.25em 1.5em;
-  max-width: 100%;
-  color: #3e9fcb;
-  background-color: #f4f6fa;
-  border-color: #f4f6fa;
-  border-radius: 12px;
-}
-.alert-criteria p.alert-p {
-  font-size: 0.96em;
-}
-.alert-criteria .input-group .input-group-text,
-.alert-criteria .input-group .form-control {
-  font-size: 0.96em;
-}
-@media screen and (max-width: 767px) {
-  .alert-criteria .input-group .input-group-text,
-.alert-criteria .input-group .form-control {
-    font-size: 0.88em;
-  }
-}
-.alert-criteria .input-group .input-group-text {
-  color: #004085;
-  background-color: #bddcfd;
-  border: 1px solid #bddcfd;
-}
-@media screen and (max-width: 1366px) {
-  .alert-criteria .input-group .input-group-text {
-    display: none;
-  }
-}
-.alert-criteria .input-group .form-control {
-  color: #004085;
-  background-color: #fff;
-  border: 1px solid #bddcfd;
-}
-@media screen and (max-width: 1366px) {
-  .alert-criteria .input-group .form-control {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
-}
-
-.scrolledMore {
-  padding-top: 107px;
-}
-.scrolledMore .alert-criteria {
-  position: fixed;
-  top: 0;
-  z-index: 10;
-  border: 0;
-  border-radius: 0;
-  margin-left: -47px;
-  padding: 0.5em 0.75em;
-}
-@media screen and (max-width: 767px) {
-  .scrolledMore .alert-criteria {
-    top: 72px;
-    margin-left: -36px;
-  }
-}
-.scrolledMore .alert-criteria p.alert-p {
-  display: none;
-}
-
-.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
-.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
-  opacity: 1 !important;
-  filter: "alpha(opacity=1)";
-  -ms-filter: "alpha(opacity=1)";
-}
 
 /*# sourceMappingURL=vs.css.map */
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index d28bbb609b..5ba1933b2f 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;;AAGI;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAIJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACG;;AAGH;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAOZ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;;AAEA;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;EAIR;IACI;;;AAKZ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,KA1CK;EA2CL,QA3CK;EA4CL;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAYxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EAhMJ;IAiMQ;;;AAEJ;EAnMJ;IAoMQ;IACA;IACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAOJ;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA,KAxjBC;EAyjBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EAjFJ;IAkFQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SArpBC;;AAupBL;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;EAIR;IACI;;EAEA;IACI;IACA;;;AAMhB;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA,KAhnCK;EAinCL;EACA;EACA;;AACA;EANJ;IAOQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index 4ca8843571..2f177a5ac1 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -1,9 +1,13 @@
+$gap-x-size: 1.75em;
+$gap-y-size: 1rem;
+
 body {
     position: relative;
+    background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%);
 }
 
 .container {
-    max-width: 1920px !important;
+    max-width: 1680px !important;
     padding: 0;
 }
 
@@ -17,7 +21,8 @@ a {
 }
 
 .docs-page {
-    padding: 0 1rem;
+    padding: 0 $gap-y-size;
+
     .anchorjs-link {
         transition: all 0.25s linear;
         -webkit-transition: all 0.25s linear;
@@ -28,17 +33,20 @@ a {
     }
 
     *:hover > .anchorjs-link {
-        margin-left: -1.125em !important;
+        margin-left: -0.8em !important;
         transition: color 0.25s linear;
         color: gray;
     }
 
     .docs-sidebar {
+        display: inline-block;
         position: fixed;
-        top: 4px;
+        top: $gap-y-size;
+        bottom: $gap-y-size;
         left: auto;
         border-radius: 12px;
         background: #211e1e;
+        padding: 0.5rem $gap-x-size;
 
         .input-group {
             border-radius: 5px;
@@ -65,24 +73,35 @@ a {
                 background-color: #121212;
                 color: rgb(255 255 255 / 30%);
                 border-radius: 8px;
-                padding: 7px 10px 0 10px;
+                padding: 0 10px 0 10px;
                 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
                 background-repeat: no-repeat !important;
                 background-position: right 0.75rem center !important;
                 background-size: 16px 12px !important;
 
+                input[type='search'] {
+                    background-color: #121212 !important;
+                    min-height: 34px !important;
+                    height: 34px !important;
+                }
+
+                span {
+                    bottom: -5px;
+                    position: relative;
+                }
                 .version-select {
                     border-radius: 3px;
 
                     .input-group-text {
                         padding: 0 0;
-                        font-size: 0.9rem;
+                        font-size: 0.75rem;
                         width: 15px;
                         height: 34px;
                         line-height: 1;
                         border-radius: 0px;
                         border: 0;
                         background: transparent;
+                        top: 1px;
 
                         i {
                             color: rgb(255 255 255 / 30%);
@@ -126,20 +145,20 @@ a {
             }
 
             .docs-tree-list {
-                height: calc(100vh - 98px);
+                height: calc(100vh - 115px);
 
                 > ul {
                     display: block;
-                    height: calc(100vh - 230px);
+                    height: calc(100vh - 310px);
                     overflow-y: auto;
-                    margin-right: 12px !important;
+                    margin-right: -4px !important;
                     margin-top: 20px !important;
                 }
 
                 ul {
                     font-size: 14px;
                     list-style: none;
-                    padding: 0 1.6em 1em;
+                    padding: 0 0 1em;
                     margin: 0;
 
                     li {
@@ -193,7 +212,7 @@ a {
                             margin-right: 4px;
                             position: absolute;
                             left: 2px;
-                            top: 11px;
+                            top: 9px;
                             color: #aaa;
                             cursor: default;
 
@@ -255,8 +274,6 @@ a {
         }
 
         .docs-top {
-            padding: 0 1.9em;
-
             .navbar-logo {
                 .navbar-brand {
                     font-size: 1.35rem;
@@ -279,6 +296,12 @@ a {
                     transition: 0.2s;
                     font-size: 0.8em;
                     font-weight: 300;
+                    width: 32px;
+                    height: 32px;
+                    line-height: 32px;
+                    text-align: center;
+                    border-radius: 8px;
+                    background-color: rgb(255 255 255 / 10%);
 
                     &:hover {
                         text-decoration: none;
@@ -298,8 +321,17 @@ a {
     }
 
     .docs-content {
+        display: inline-block;
         overflow-x: scroll;
         min-height: 100vh;
+        width: calc(100% - 600px);
+        margin-left: 300px;
+        padding: $gap-y-size $gap-y-size;
+
+        @media (max-width: 767px) {
+            padding: 0 0;
+        }
+
 
         .contributors {
             position: absolute;
@@ -327,14 +359,17 @@ a {
 
         .docs-link-btns {
             font-size: 0.8em;
-            padding: 0 2rem;
+            padding: 0 $gap-x-size;
+
+            @media (max-width: 767px) {
+                padding: 0 1.5rem;
+            }
 
             a {
                 color: #3e9fcb;
 
                 .text-muted {
-                    color:rgb(11 22 33 / 30%) !important
-
+                    color: rgb(11 22 33 / 30%) !important;
                 }
 
                 &:hover {
@@ -349,7 +384,7 @@ a {
                 height: 44px;
 
                 .input-group {
-                   height: 100%;
+                    height: 100%;
                 }
 
                 .input-group-text {
@@ -371,7 +406,7 @@ a {
         }
 
         .docs-text-field {
-            padding: 2rem;
+            padding: 1.5em;
         }
 
         article.docs-body {
@@ -426,11 +461,11 @@ a {
             .blockquote {
                 margin-bottom: 1rem;
                 margin-left: 0;
-                border-left: 3px solid #d2dbe4;
+                border-left: 3px solid rgb(184 66 151 / 30%);
                 padding: 1em 1.5em;
-                background-color: #e9edf1;
-                padding-bottom: 0.2em;
+                background-color: rgb(184 66 151 / 15%);
                 font-size: 1em;
+                border-radius: 12px;
             }
 
             img {
@@ -438,7 +473,7 @@ a {
                 border: 1px solid #f4f5f7;
                 margin: 15px 0 25px;
                 box-shadow: 0 0 45px #f8f9fa;
-                border-radius: 6px;
+                border-radius: 12px;
             }
 
             table {
@@ -476,10 +511,19 @@ a {
                 }
             }
         }
+
+        @media (max-width: 1200px) {
+            width: calc(100% - 300px);
+        }
+        @media (max-width: 767px) {
+            width: 100%;
+            margin-left: 0;
+            padding-top: 80px;
+        }
     }
 
     .cont-container {
-        .contributors-text{
+        .contributors-text {
             color: rgb(11 22 33 / 50%);
             font-size: 1.1em;
             font-weight: 600;
@@ -491,24 +535,30 @@ a {
             img {
                 width: 32px;
                 height: 32px;
-                margin-left: -10px;
+                margin-left: -12px;
                 display: inline-block;
                 transition: 0.2s;
+                border: 2px solid #fff;
+
+                @media (max-width: 992px) {
+                    width: 24px;
+                    height: 24px;
+                }
             }
         }
 
         &:hover {
             a.cont-avatar {
                 img {
-                    margin-left: -2px;
+                    margin-left: -8px;
                 }
             }
         }
     }
 
     .docs-page-index {
-        min-height: 90vh;
-        background-color: transparent !important;
+        display: inline-block;
+        position: absolute;
 
         #scroll-index {
             max-height: 90vh;
@@ -516,7 +566,8 @@ a {
 
         .docs-inner-anchors {
             position: fixed;
-            top: 4px;
+            z-index: 99;
+            top: $gap-y-size;
             font-size: 0.9em;
 
             .navbar {
@@ -585,6 +636,10 @@ a {
                 display: block;
             }
         }
+
+        @media (max-width: 1200px) {
+            display: none;
+        }
     }
 
     .card {
@@ -592,23 +647,19 @@ a {
         border-radius: 12px;
         border: none;
         width: 300px;
-        padding: 30px;
         box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 
         .card-header {
             background-color: transparent;
             border-bottom: none;
             color: #0b1621;
-            padding: 0;
             h5 {
                 font-size: 19px;
             }
         }
         .card-body {
-            padding: 0;
-            color: rgb(11 22 33 / 40%);
             font-size: 13px;
-            padding: 1rem 0;
+            padding: $gap-x-size;
         }
         .card-footer {
             padding: 0;
@@ -621,17 +672,22 @@ a {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 10px 0 5px 0;
         border-bottom: 1px solid #eaeaea;
-        margin: 0 2rem;
+        margin: 0 $gap-x-size;
 
         .breadcrumb {
             margin-bottom: 0;
+            flex-wrap: nowrap;
+            overflow-x: scroll;
+            white-space: nowrap;
+            padding-bottom: 10px;
 
             .breadcrumb-item {
                 color: #838690;
                 font-size: 13px;
                 font-weight: 500;
+                padding: 0 9px 0 0px;
+                display: flex;
                 a {
                     color: #838690;
                 }
@@ -643,7 +699,16 @@ a {
         }
         .doc-social-btns {
             color: rgb(11 22 33 / 50%);
+            white-space: nowrap;
+            top: -2px;
+            position: relative;
 
+            @media (max-width: 992px) {
+                display: none;
+            }
+            small {
+                font-size: 13px;
+            }
             a:hover {
                 text-decoration: none;
             }
@@ -663,7 +728,7 @@ a {
         border: 1px solid rgba(11, 22, 33, 0.1);
         background-color: white;
         border-radius: 8px;
-        padding: 7px 15px;
+        padding: 7px $gap-y-size;
         .input-group-text {
             font-size: 12px;
             padding: 0;
@@ -871,7 +936,6 @@ a {
                 max-width: 100%;
                 width: 100%;
                 top: 0px;
-                position: relative;
                 margin: 0 !important;
                 height: 72px;
                 border-radius: 0;
@@ -883,6 +947,7 @@ a {
                     font-size: 17px;
                     left: 0;
                     width: 100%;
+                    height: 100vh;
                     z-index: 100;
                     background: #1d1d1d;
                     display: none;
@@ -950,7 +1015,12 @@ a {
         }
 
         .docs-page-index {
-            display: none;
+            display: block;
+
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
+            }
         }
     }
 }
@@ -966,7 +1036,7 @@ a {
 pre[class*='language-'] {
     padding: 1.4em 2em !important;
     margin: 15px 0 25px !important;
-    border-radius: 6px;
+    border-radius: 12px;
 }
 
 code {
@@ -997,7 +1067,7 @@ pre {
 
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
-    background: #191919 !important;
+    background: #211e1e !important;
 }
 
 div.code-toolbar > .toolbar span {
@@ -1012,6 +1082,81 @@ div.code-toolbar > .toolbar a {
     width: 300px !important;
 }
 
+.alert-criteria {
+    padding: 1.25rem 1.25rem;
+    max-width: 100%;
+    color: #3e9fcb;
+    background-color: #f4f6fa;
+    border-color: #f4f6fa;
+    border-radius: 12px;
+    background: hsl(199deg 59% 84% / 82%);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+
+    p.alert-p {
+        font-size: 0.96em;
+    }
+
+    .input-group {
+        .input-group-text,
+        .form-control {
+            font-size: 0.96em;
+
+            @media screen and (max-width: 767px) {
+                font-size: 0.88em;
+            }
+        }
+
+        .input-group-text {
+            color: #004085;
+            background-color: #bddcfd;
+            border: 1px solid #bddcfd;
+
+            @media screen and (max-width: 1366px) {
+                display: none;
+            }
+        }
+
+        .form-control {
+            color: #004085;
+            background-color: #fff;
+            border: 1px solid #bddcfd;
+
+            @media screen and (max-width: 1366px) {
+                border-top-left-radius: 0.25rem;
+                border-bottom-left-radius: 0.25rem;
+            }
+        }
+    }
+}
+
+.scrolledMore {
+    padding-top: 107px;
+
+    .alert-criteria {
+        position: fixed;
+        top: $gap-y-size;
+        z-index: 10;
+        border: 0;
+        margin-left: -0;
+        @media screen and (max-width: 767px) {
+            top: 72px;
+            margin-left: -36px;
+        }
+
+        p.alert-p {
+            display: none;
+        }
+    }
+}
+
+.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+    opacity: 1 !important;
+    filter: 'alpha(opacity=1)';
+    -ms-filter: 'alpha(opacity=1)';
+}
+
 @media (max-width: 767px) {
     body {
         font-size: 14px;
@@ -1037,7 +1182,7 @@ div.code-toolbar > .toolbar a {
     }
 
     .docs-page .top-container {
-        display: none;
+        margin-top: 10px;
     }
 
     .navbar {
@@ -1108,78 +1253,3 @@ div.code-toolbar > .toolbar a {
         }
     }
 }
-
-.alert-criteria {
-    padding: 1.25em 1.5em;
-    max-width: 100%;
-    color: #3e9fcb;
-    background-color: #f4f6fa;
-    border-color: #f4f6fa;
-    border-radius: 12px;
-
-    p.alert-p {
-        font-size: 0.96em;
-    }
-
-    .input-group {
-        .input-group-text,
-        .form-control {
-            font-size: 0.96em;
-
-            @media screen and (max-width: 767px) {
-                font-size: 0.88em;
-            }
-        }
-
-        .input-group-text {
-            color: #004085;
-            background-color: #bddcfd;
-            border: 1px solid #bddcfd;
-
-            @media screen and (max-width: 1366px) {
-                display: none;
-            }
-        }
-
-        .form-control {
-            color: #004085;
-            background-color: #fff;
-            border: 1px solid #bddcfd;
-
-            @media screen and (max-width: 1366px) {
-                border-top-left-radius: 0.25rem;
-                border-bottom-left-radius: 0.25rem;
-            }
-        }
-    }
-}
-
-.scrolledMore {
-    padding-top: 107px;
-
-    .alert-criteria {
-        position: fixed;
-        top: 0;
-        z-index: 10;
-        border: 0;
-        border-radius: 0;
-        margin-left: -47px;
-        padding: 0.5em 0.75em;
-
-        @media screen and (max-width: 767px) {
-            top: 72px;
-            margin-left: -36px;
-        }
-
-        p.alert-p {
-            display: none;
-        }
-    }
-}
-
-.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
-.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
-    opacity: 1 !important;
-    filter: 'alpha(opacity=1)';
-    -ms-filter: 'alpha(opacity=1)';
-}

From d1a196ca7335ef9541c07ecdc87aef922f4f801d Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Fri, 2 Sep 2022 14:19:34 +0300
Subject: [PATCH 04/12] module css update

---
 .../Pages/Documents/Project/Index.cshtml      |  2 +-
 .../Pages/Documents/Shared/Styles/vs.css      | 40 +++++++++++++-----
 .../Pages/Documents/Shared/Styles/vs.css.map  |  2 +-
 .../Pages/Documents/Shared/Styles/vs.scss     | 42 +++++++++++++------
 4 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 24b18cad3a..26f0dae890 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -362,7 +362,7 @@
                     <!-- Right Bar -->
                     <div class=" docs-page-index">
                         <div class=" docs-inner-anchors">
-                            <div class="card for-desktop">
+                            <div class="card">
                                 <div class="card-body">
                                     <h5 class="card-title">@L["InThisDocument"]</h5>
 
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index eba23294bf..eddd0351fe 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -519,9 +519,28 @@ a {
 .docs-page .docs-page-index .scroll-top-btn.showup {
   display: block;
 }
-@media (max-width: 1200px) {
+@media (min-width: 768px) and (max-width: 1200px) {
   .docs-page .docs-page-index {
-    display: none;
+    position: relative;
+    width: calc(100% - 300px);
+    margin-left: 300px;
+    padding: 0 1rem 1rem;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
+    padding: 0 1.75em;
+  }
+}
+@media (max-width: 767px) {
+  .docs-page .docs-page-index {
+    position: relative;
+    width: 100%;
+    padding: 0 1.75em 1.75em;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
   }
 }
 .docs-page .card {
@@ -548,6 +567,11 @@ a {
   background-color: transparent;
   border: none;
 }
+@media (max-width: 1200px) {
+  .docs-page .card {
+    width: 100%;
+  }
+}
 .docs-page .top-container {
   display: flex;
   justify-content: space-between;
@@ -798,13 +822,6 @@ a {
   .docs-page .docs-content .docs-text-field {
     padding: 1rem 1.5rem;
   }
-  .docs-page .docs-page-index {
-    display: block;
-  }
-  .docs-page .docs-page-index .docs-inner-anchors {
-    position: relative;
-    top: auto;
-  }
 }
 .for-mobile {
   display: none;
@@ -847,6 +864,10 @@ pre[class*=language-] {
   background: #211e1e !important;
 }
 
+div.code-toolbar > .toolbar {
+  z-index: 7;
+}
+
 div.code-toolbar > .toolbar span {
   cursor: default;
 }
@@ -918,7 +939,6 @@ div.code-toolbar > .toolbar a {
 @media screen and (max-width: 767px) {
   .scrolledMore .alert-criteria {
     top: 72px;
-    margin-left: -36px;
   }
 }
 .scrolledMore .alert-criteria p.alert-p {
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index 5ba1933b2f..139bf5b74d 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,KA1CK;EA2CL,QA3CK;EA4CL;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAYxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EAhMJ;IAiMQ;;;AAEJ;EAnMJ;IAoMQ;IACA;IACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAOJ;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA,KAxjBC;EAyjBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EAjFJ;IAkFQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SArpBC;;AAupBL;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;EAIR;IACI;;EAEA;IACI;IACA;;;AAMhB;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA,KAhnCK;EAinCL;EACA;EACA;;AACA;EANJ;IAOQ;IACA;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,KA1CK;EA2CL,QA3CK;EA4CL;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAYxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EA/LJ;IAgMQ;;;AAEJ;EAlMJ;IAmMQ;IACA;IACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAOJ;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA,KAvjBC;EAwjBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EAjFJ;IAkFQ;IACA;IACA;IACA;;EAGA;IACI;IACA;IACA;;;AAIR;EA/FJ;IAgGQ;IACA;IACA;;EAEA;IACI;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SAzqBC;;AA2qBL;EACI;EACA;EACA;;AAGJ;EAzBJ;IA0BQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;;AAOhB;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA,KAnoCK;EAooCL;EACA;EACA;;AACA;EANJ;IAOQ;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index 2f177a5ac1..1a4d30c1e7 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -332,7 +332,6 @@ a {
             padding: 0 0;
         }
 
-
         .contributors {
             position: absolute;
             top: 15px;
@@ -637,8 +636,29 @@ a {
             }
         }
 
-        @media (max-width: 1200px) {
-            display: none;
+        @media (min-width: 768px) and (max-width: 1200px) {
+            position: relative;
+            width: calc(100% - 300px);
+            margin-left: 300px;
+            padding: 0 $gap-y-size $gap-y-size; 
+
+
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
+                padding: 0 $gap-x-size;
+
+            }
+        }
+        @media (max-width: 767px) {
+            position: relative;
+            width: 100%;
+            padding: 0 $gap-x-size $gap-x-size; 
+
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
+            }
         }
     }
 
@@ -666,6 +686,10 @@ a {
             background-color: transparent;
             border: none;
         }
+
+        @media (max-width: 1200px) {
+            width: 100%;
+        }
     }
 
     .top-container {
@@ -1014,14 +1038,6 @@ a {
             }
         }
 
-        .docs-page-index {
-            display: block;
-
-            .docs-inner-anchors {
-                position: relative;
-                top: auto;
-            }
-        }
     }
 }
 
@@ -1070,6 +1086,9 @@ pre[class*='language-'] {
     background: #211e1e !important;
 }
 
+div.code-toolbar > .toolbar {
+    z-index: 7;
+}
 div.code-toolbar > .toolbar span {
     cursor: default;
 }
@@ -1141,7 +1160,6 @@ div.code-toolbar > .toolbar a {
         margin-left: -0;
         @media screen and (max-width: 767px) {
             top: 72px;
-            margin-left: -36px;
         }
 
         p.alert-p {

From 0d3bb4372cbf033b63003958d3b08fddd960ce83 Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Tue, 6 Sep 2022 14:04:31 +0300
Subject: [PATCH 05/12] scss file reorganized

---
 .../Pages/Documents/Project/Index.cshtml      |   10 +-
 .../Pages/Documents/Shared/Styles/vs.css      | 1039 +++++-------
 .../Pages/Documents/Shared/Styles/vs.css.map  |    2 +-
 .../Pages/Documents/Shared/Styles/vs.scss     | 1462 +++++++----------
 4 files changed, 1005 insertions(+), 1508 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 26f0dae890..0bfdd1e8c2 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -52,7 +52,7 @@
 {
         <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
          
-                    <div class="docs-sidebar-wrapper docs-sidebar dark-sidebar">
+                    <div class="docs-sidebar-wrapper docs-sidebar">
 
                         <div class="docs-top">
                             <nav class="navbar navbar-logo">
@@ -84,7 +84,6 @@
                         </div>
 
                         <div class="docs-tree-list">
-                            <div class="">
                                 <div class="row gx-2 mb-2 ">
                                      @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
                                             {
@@ -173,7 +172,6 @@
                                         </div>
                                     </div>
                                 </div>
-                            </div>
 
                             @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
                             {
@@ -199,7 +197,7 @@
                 @if (Model.Document != null)
                 {
                     <div class="docs-content">
-                        <div class="top-container align-items-center mb-3">
+                        <div class="top-container mb-3">
                             <div class="row w-100 mx-0">
                                 <div class="col-12 col-lg-9 px-0">
                                     <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
@@ -291,8 +289,6 @@
                             </div>
                         </div>
 
-                    
-
                         <div class="docs-content-field">
                             <div class="docs-text-field">
                                 <div class="position-relative">
@@ -360,7 +356,7 @@
                     </div>
 
                     <!-- Right Bar -->
-                    <div class=" docs-page-index">
+                    <div class="docs-page-index">
                         <div class=" docs-inner-anchors">
                             <div class="card">
                                 <div class="card-body">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index eddd0351fe..bbd253d306 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -2,35 +2,72 @@ body {
   position: relative;
   background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%);
 }
-
-.container {
+body .container {
   max-width: 1680px !important;
   padding: 0;
 }
-
-a {
+body a {
   text-decoration: none;
 }
-
-.btn-primary {
+body .btn-primary {
   background-color: #b84297 !important;
   font-size: 12px;
 }
-
-.docs-page {
-  padding: 0 1rem;
+body .for-mobile {
+  display: none;
 }
-.docs-page .anchorjs-link {
-  transition: all 0.25s linear;
-  -webkit-transition: all 0.25s linear;
+body .for-desktop {
+  display: inline-block;
 }
-.docs-page .anchorjs-link:hover {
-  text-decoration: none;
+body pre[class*=language-] {
+  padding: 1.4em 2em !important;
+  margin: 15px 0 25px !important;
+  border-radius: 12px;
 }
-.docs-page *:hover > .anchorjs-link {
-  margin-left: -0.8em !important;
-  transition: color 0.25s linear;
-  color: gray;
+body pre .token.keyword {
+  color: #569cd6;
+}
+body pre .token.atrule,
+body pre .token.attr-value,
+body pre .token.function,
+body pre .token.class-name {
+  color: #d69d85;
+}
+body :not(pre) > code[class*=language-],
+body pre[class*=language-] {
+  background: #211e1e !important;
+}
+body div.code-toolbar > .toolbar {
+  z-index: 7;
+}
+body div.code-toolbar > .toolbar span {
+  cursor: default;
+}
+body div.code-toolbar > .toolbar a {
+  cursor: copy;
+}
+body .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+body .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+  opacity: 1 !important;
+  filter: "alpha(opacity=1)";
+  -ms-filter: "alpha(opacity=1)";
+}
+body.scrolledMore {
+  padding-top: 107px;
+}
+body.scrolledMore .alert-criteria {
+  position: fixed;
+  top: 1rem;
+  z-index: 10;
+  border: 0;
+  margin-left: 0;
+}
+body.scrolledMore .alert-criteria p.alert-p {
+  display: none;
+}
+
+.docs-page {
+  padding: 0 1rem;
 }
 .docs-page .docs-sidebar {
   display: inline-block;
@@ -41,21 +78,44 @@ a {
   border-radius: 12px;
   background: #211e1e;
   padding: 0.5rem 1.75em;
+  width: 300px;
 }
-.docs-page .docs-sidebar .input-group {
-  border-radius: 5px;
-  overflow: hidden;
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  font-size: 1.35rem;
+  color: #fff;
+  font-weight: 500;
+  padding: 15px 0 15px;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: unset;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper {
-  width: 300px;
+.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
+  font-weight: 300;
+  text-transform: uppercase;
+  font-size: 0.7em;
+  letter-spacing: 1px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control {
-  border: 0;
+.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+  color: #fff;
+  opacity: 0.65;
+  transition: 0.2s;
+  font-size: 0.8em;
+  font-weight: 300;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar.docs-sidebar-wrapper input.form-control:visited {
-  box-shadow: none;
+.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover {
+  text-decoration: none;
+  opacity: 1;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version {
+.docs-page .docs-sidebar .docs-tree-list {
+  height: calc(100vh - 115px);
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version {
   position: relative;
   font-size: 12px;
   background-color: #121212;
@@ -67,19 +127,23 @@ a {
   background-position: right 0.75rem center !important;
   background-size: 16px 12px !important;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version input[type=search] {
+.docs-page .docs-sidebar .docs-tree-list .docs-version input[type=search] {
   background-color: #121212 !important;
   min-height: 34px !important;
   height: 34px !important;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version span {
+.docs-page .docs-sidebar .docs-tree-list .docs-version span {
   bottom: -5px;
   position: relative;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select {
   border-radius: 3px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select .input-group {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select .input-group-text {
   padding: 0 0;
   font-size: 0.75rem;
   width: 15px;
@@ -90,88 +154,91 @@ a {
   background: transparent;
   top: 1px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select .input-group-text i {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select .input-group-text i {
   color: rgba(255, 255, 255, 0.3);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control {
   padding: 0 10px 2px 10px;
   border: 0;
   min-height: 30px;
   height: 30px;
   font-size: 1.17em;
   border-radius: 0px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:focus, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:active, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:hover, .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select:visited,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:active,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:focus, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:active, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:hover, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select:visited,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:focus,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:active,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:hover,
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:visited {
   box-shadow: none;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select {
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select select.form-select {
   padding: 0 0 2px 0;
   background-image: none;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter {
-  padding: 0 1rem;
-  margin: 0.5rem 0;
-  font-size: 0.9em;
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-select {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-  color: #ddd;
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-select::placeholder {
+  color: rgba(255, 255, 255, 0.3);
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-  height: calc(100vh - 115px);
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control {
+  border: 0;
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-tree-list .docs-version .version-select input.form-control:visited {
+  box-shadow: none;
+}
+.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select label {
+  background: #000000;
+  border-color: #000000;
+  color: #ddd;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list > ul {
+.docs-page .docs-sidebar .docs-tree-list > ul {
   display: block;
   height: calc(100vh - 310px);
   overflow-y: auto;
   margin-right: -4px !important;
   margin-top: 20px !important;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul {
+.docs-page .docs-sidebar .docs-tree-list ul {
   font-size: 14px;
   list-style: none;
   padding: 0 0 1em;
   margin: 0;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li {
+.docs-page .docs-sidebar .docs-tree-list ul li {
   margin-left: 0px;
   padding-left: 24px;
   display: block;
   width: 100%;
   position: relative;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
-  color: #999;
+.docs-page .docs-sidebar .docs-tree-list ul li a {
+  color: #aaa;
   font-weight: 500;
   padding: 4px 0;
   display: block;
   border-bottom: 0;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-  color: #000;
+.docs-page .docs-sidebar .docs-tree-list ul li a:hover {
+  color: #fff;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
+.docs-page .docs-sidebar .docs-tree-list ul li a.last-link {
   top: 11px;
   color: #aaa;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .badge {
+.docs-page .docs-sidebar .docs-tree-list ul li .badge {
   text-transform: uppercase;
   font-size: 9px;
   position: relative;
   letter-spacing: 0.125px;
   top: -2px;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
-  color: #999;
-  padding: 7px 0;
-  display: block;
-  border-bottom: 0;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
+.docs-page .docs-sidebar .docs-tree-list ul li .plus-icon {
   font-size: 0.85em;
   transition: 0.3s;
   width: 18px;
@@ -187,71 +254,35 @@ a {
   color: #aaa;
   cursor: default;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link {
+.docs-page .docs-sidebar .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link {
   color: #555;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right {
+.docs-page .docs-sidebar .docs-tree-list ul li .plus-icon .fa-chevron-right {
   cursor: pointer;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul {
+.docs-page .docs-sidebar .docs-tree-list ul li ul {
   padding: 0;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li a {
+.docs-page .docs-sidebar .docs-tree-list ul li ul li a {
   font-weight: 400;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li ul {
+.docs-page .docs-sidebar .docs-tree-list ul li ul li ul {
   padding: 0;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a {
+.docs-page .docs-sidebar .docs-tree-list ul li ul li ul li a {
   font-weight: 300;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-  color: #000;
+.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > a {
+  color: #fff;
   transition: 0.4s;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
+.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > span .fa {
   transform: rotate(90deg);
   color: #b84297;
 }
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
+.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree.last-link > span .fa {
   transform: rotate(0deg);
 }
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-  font-size: 1.35rem;
-  color: #000;
-  font-weight: 500;
-  padding: 15px 0 15px;
-  line-height: 1;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
-  font-weight: 300;
-  text-transform: uppercase;
-  font-size: 0.7em;
-  letter-spacing: 1px;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-  color: #000;
-  opacity: 0.65;
-  transition: 0.2s;
-  font-size: 0.8em;
-  font-weight: 300;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  text-align: center;
-  border-radius: 8px;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover {
-  text-decoration: none;
-  opacity: 1;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-  font-size: 0.85em;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
-  display: block;
-}
 .docs-page .docs-content {
   display: inline-block;
   overflow-x: scroll;
@@ -260,40 +291,54 @@ a {
   margin-left: 300px;
   padding: 1rem 1rem;
 }
-@media (max-width: 767px) {
-  .docs-page .docs-content {
-    padding: 0 0;
-  }
+.docs-page .docs-content .top-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eaeaea;
+  margin: 0 1.75em;
 }
-.docs-page .docs-content .contributors {
-  position: absolute;
-  top: 15px;
-  right: 5px;
+.docs-page .docs-content .top-container .breadcrumb {
+  margin-bottom: 0;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  white-space: nowrap;
+  padding-bottom: 10px;
+}
+.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item {
+  color: #838690;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 9px 0 0px;
+  display: flex;
 }
-.docs-page .docs-content .contributors .contributors-avatar {
-  border-radius: 21px;
-  width: 21px;
-  height: 21px;
+.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item a {
+  color: #838690;
 }
-.docs-page .docs-content .contributors a {
-  padding: 0;
-  width: 21px;
-  height: 21px;
-  display: inline-block;
-  margin: 0 0 0 2px;
+.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item.active {
+  color: #c7c8c9;
+  font-weight: 400;
+}
+.docs-page .docs-content .top-container .doc-social-btns {
+  color: rgba(11, 22, 33, 0.5);
+  white-space: nowrap;
+  top: -2px;
+  position: relative;
 }
-.docs-page .docs-content .contributors a:hover {
+.docs-page .docs-content .top-container .doc-social-btns small {
+  font-size: 13px;
+}
+.docs-page .docs-content .top-container .doc-social-btns a:hover {
   text-decoration: none;
 }
+.docs-page .docs-content .top-container .doc-social-btns .share-button {
+  color: rgba(11, 22, 33, 0.5);
+  margin-left: 10px;
+}
 .docs-page .docs-content .docs-link-btns {
   font-size: 0.8em;
   padding: 0 1.75em;
 }
-@media (max-width: 767px) {
-  .docs-page .docs-content .docs-link-btns {
-    padding: 0 1.5rem;
-  }
-}
 .docs-page .docs-content .docs-link-btns a {
   color: #3e9fcb;
 }
@@ -326,44 +371,64 @@ a {
   outline: 0;
   box-shadow: none;
 }
-.docs-page .docs-content .docs-text-field {
+.docs-page .docs-content .docs-link-btns .cont-container .contributors-text {
+  color: rgba(11, 22, 33, 0.5);
+  font-size: 1.1em;
+  font-weight: 600;
+}
+.docs-page .docs-content .docs-link-btns .cont-container a.cont-avatar {
+  position: relative;
+}
+.docs-page .docs-content .docs-link-btns .cont-container a.cont-avatar img {
+  width: 32px;
+  height: 32px;
+  margin-left: -12px;
+  display: inline-block;
+  border: 2px solid #fff;
+  transition: 0.2s;
+  -webkit-transition: 0.2s;
+}
+.docs-page .docs-content .docs-link-btns .cont-container:hover a.cont-avatar img {
+  margin-left: -8px;
+}
+.docs-page .docs-content .docs-content-field .docs-text-field {
   padding: 1.5em;
 }
-.docs-page .docs-content article.docs-body {
+.docs-page .docs-content .docs-content-field article.docs-body {
   word-break: break-word;
 }
-.docs-page .docs-content article.docs-body h1 {
+.docs-page .docs-content .docs-content-field article.docs-body h1 {
   padding-top: 1rem;
   font-size: 2.25rem;
   padding-bottom: 10px;
 }
-.docs-page .docs-content article.docs-body h2 {
+.docs-page .docs-content .docs-content-field article.docs-body h2 {
   padding-top: 2rem;
   padding-bottom: 10px;
   font-size: 2rem;
 }
-.docs-page .docs-content article.docs-body h3,
-.docs-page .docs-content article.docs-body h4,
-.docs-page .docs-content article.docs-body h5,
-.docs-page .docs-content article.docs-body h6 {
+.docs-page .docs-content .docs-content-field article.docs-body h3,
+.docs-page .docs-content .docs-content-field article.docs-body h4,
+.docs-page .docs-content .docs-content-field article.docs-body h5,
+.docs-page .docs-content .docs-content-field article.docs-body h6 {
   padding-top: 20px;
   padding-bottom: 5px;
   font-size: 1.5rem;
 }
-.docs-page .docs-content article.docs-body h1,
-.docs-page .docs-content article.docs-body h2,
-.docs-page .docs-content article.docs-body h3,
-.docs-page .docs-content article.docs-body h4,
-.docs-page .docs-content article.docs-body h5,
-.docs-page .docs-content article.docs-body h6 {
+.docs-page .docs-content .docs-content-field article.docs-body h1,
+.docs-page .docs-content .docs-content-field article.docs-body h2,
+.docs-page .docs-content .docs-content-field article.docs-body h3,
+.docs-page .docs-content .docs-content-field article.docs-body h4,
+.docs-page .docs-content .docs-content-field article.docs-body h5,
+.docs-page .docs-content .docs-content-field article.docs-body h6 {
   position: relative;
 }
-.docs-page .docs-content article.docs-body h1 .anchor,
-.docs-page .docs-content article.docs-body h2 .anchor,
-.docs-page .docs-content article.docs-body h3 .anchor,
-.docs-page .docs-content article.docs-body h4 .anchor,
-.docs-page .docs-content article.docs-body h5 .anchor,
-.docs-page .docs-content article.docs-body h6 .anchor {
+.docs-page .docs-content .docs-content-field article.docs-body h1 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h2 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h3 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h4 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h5 .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h6 .anchor {
   position: absolute;
   right: -26px;
   font-size: 18px;
@@ -372,15 +437,15 @@ a {
   opacity: 0;
   transition: 0.5s;
 }
-.docs-page .docs-content article.docs-body h1:hover .anchor,
-.docs-page .docs-content article.docs-body h2:hover .anchor,
-.docs-page .docs-content article.docs-body h3:hover .anchor,
-.docs-page .docs-content article.docs-body h4:hover .anchor,
-.docs-page .docs-content article.docs-body h5:hover .anchor,
-.docs-page .docs-content article.docs-body h6:hover .anchor {
+.docs-page .docs-content .docs-content-field article.docs-body h1:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h2:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h3:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h4:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h5:hover .anchor,
+.docs-page .docs-content .docs-content-field article.docs-body h6:hover .anchor {
   opacity: 1;
 }
-.docs-page .docs-content article.docs-body .blockquote {
+.docs-page .docs-content .docs-content-field article.docs-body .blockquote {
   margin-bottom: 1rem;
   margin-left: 0;
   border-left: 3px solid rgba(184, 66, 151, 0.3);
@@ -389,83 +454,91 @@ a {
   font-size: 1em;
   border-radius: 12px;
 }
-.docs-page .docs-content article.docs-body img {
+.docs-page .docs-content .docs-content-field article.docs-body img {
   max-width: 100%;
   border: 1px solid #f4f5f7;
   margin: 15px 0 25px;
   box-shadow: 0 0 45px #f8f9fa;
   border-radius: 12px;
 }
-.docs-page .docs-content article.docs-body table {
+.docs-page .docs-content .docs-content-field article.docs-body table {
   display: block;
   overflow: auto;
   width: 100%;
 }
-.docs-page .docs-content article.docs-body table thead tr {
+.docs-page .docs-content .docs-content-field article.docs-body table thead tr {
   border-bottom: 2px inset;
 }
-.docs-page .docs-content article.docs-body table th {
+.docs-page .docs-content .docs-content-field article.docs-body table th {
   font-weight: 600;
 }
-.docs-page .docs-content article.docs-body table td,
-.docs-page .docs-content article.docs-body table th {
+.docs-page .docs-content .docs-content-field article.docs-body table td,
+.docs-page .docs-content .docs-content-field article.docs-body table th {
   border: 1px solid #dfe2e5;
   padding: 6px 13px;
 }
-.docs-page .docs-content article.docs-body table tr {
+.docs-page .docs-content .docs-content-field article.docs-body table tr {
   background-color: #fff;
   border-top: 1px solid #c6cbd1;
 }
-.docs-page .docs-content article.docs-body table tr:nth-child(2n) {
+.docs-page .docs-content .docs-content-field article.docs-body table tr:nth-child(2n) {
   background-color: #f6f8fa;
 }
-.docs-page .docs-content article.docs-body table img {
+.docs-page .docs-content .docs-content-field article.docs-body table img {
   background-color: initial;
 }
-@media (max-width: 1200px) {
-  .docs-page .docs-content {
-    width: calc(100% - 300px);
-  }
+.docs-page .docs-content .docs-content-field .custom-input-group {
+  border: 1px solid rgba(11, 22, 33, 0.1);
+  background-color: white;
+  border-radius: 8px;
+  padding: 7px 1rem;
 }
-@media (max-width: 767px) {
-  .docs-page .docs-content {
-    width: 100%;
-    margin-left: 0;
-    padding-top: 80px;
-  }
+.docs-page .docs-content .docs-content-field .custom-input-group .input-group-text {
+  font-size: 12px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  color: rgba(11, 22, 33, 0.3);
 }
-.docs-page .cont-container .contributors-text {
-  color: rgba(11, 22, 33, 0.5);
-  font-size: 1.1em;
-  font-weight: 600;
+.docs-page .docs-content .docs-content-field .custom-input-group .form-select {
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  background-position: right top;
 }
-.docs-page .cont-container a.cont-avatar {
-  position: relative;
+.docs-page .docs-content .docs-content-field .custom-input-group .form-select:focus {
+  box-shadow: none !important;
 }
-.docs-page .cont-container a.cont-avatar img {
-  width: 32px;
-  height: 32px;
-  margin-left: -12px;
-  display: inline-block;
-  transition: 0.2s;
-  border: 2px solid #fff;
+.docs-page .docs-content .docs-content-field .alert-criteria {
+  padding: 1.25rem 1.25rem;
+  max-width: 100%;
+  color: #3e9fcb;
+  background-color: #f4f6fa;
+  border-color: #f4f6fa;
+  border-radius: 12px;
+  background: rgba(190, 223, 238, 0.82);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
-@media (max-width: 992px) {
-  .docs-page .cont-container a.cont-avatar img {
-    width: 24px;
-    height: 24px;
-  }
+.docs-page .docs-content .docs-content-field .alert-criteria p.alert-p {
+  font-size: 0.96em;
 }
-.docs-page .cont-container:hover a.cont-avatar img {
-  margin-left: -8px;
+.docs-page .docs-content .docs-content-field .anchorjs-link {
+  transition: all 0.25s linear;
+  -webkit-transition: all 0.25s linear;
+}
+.docs-page .docs-content .docs-content-field .anchorjs-link:hover {
+  text-decoration: none;
+}
+.docs-page .docs-content .docs-content-field *:hover > .anchorjs-link {
+  margin-left: -0.8em !important;
+  transition: color 0.25s linear;
+  color: gray;
 }
 .docs-page .docs-page-index {
   display: inline-block;
   position: absolute;
 }
-.docs-page .docs-page-index #scroll-index {
-  max-height: 90vh;
-}
 .docs-page .docs-page-index .docs-inner-anchors {
   position: fixed;
   z-index: 99;
@@ -505,9 +578,8 @@ a {
 .docs-page .docs-page-index .docs-inner-anchors .index-scroll {
   margin-left: -30px;
 }
-.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper {
-  max-width: 300px;
-  float: left;
+.docs-page .docs-page-index #scroll-index {
+  max-height: 90vh;
 }
 .docs-page .docs-page-index .scroll-top-btn {
   display: none;
@@ -519,238 +591,57 @@ a {
 .docs-page .docs-page-index .scroll-top-btn.showup {
   display: block;
 }
-@media (min-width: 768px) and (max-width: 1200px) {
-  .docs-page .docs-page-index {
-    position: relative;
-    width: calc(100% - 300px);
-    margin-left: 300px;
-    padding: 0 1rem 1rem;
-  }
-  .docs-page .docs-page-index .docs-inner-anchors {
-    position: relative;
-    top: auto;
-    padding: 0 1.75em;
-  }
-}
-@media (max-width: 767px) {
-  .docs-page .docs-page-index {
-    position: relative;
-    width: 100%;
-    padding: 0 1.75em 1.75em;
-  }
-  .docs-page .docs-page-index .docs-inner-anchors {
-    position: relative;
-    top: auto;
-  }
-}
-.docs-page .card {
+.docs-page .docs-page-index .card {
   background-color: #fff;
   border-radius: 12px;
   border: none;
   width: 300px;
   box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 }
-.docs-page .card .card-header {
+.docs-page .docs-page-index .card .card-header {
   background-color: transparent;
   border-bottom: none;
   color: #0b1621;
 }
-.docs-page .card .card-header h5 {
+.docs-page .docs-page-index .card .card-header h5 {
   font-size: 19px;
 }
-.docs-page .card .card-body {
+.docs-page .docs-page-index .card .card-body {
   font-size: 13px;
   padding: 1.75em;
 }
-.docs-page .card .card-footer {
+.docs-page .docs-page-index .card .card-footer {
   padding: 0;
   background-color: transparent;
   border: none;
 }
-@media (max-width: 1200px) {
-  .docs-page .card {
-    width: 100%;
+
+@media (max-width: 767px) {
+  body {
+    font-size: 14px;
   }
-}
-.docs-page .top-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #eaeaea;
-  margin: 0 1.75em;
-}
-.docs-page .top-container .breadcrumb {
-  margin-bottom: 0;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  white-space: nowrap;
-  padding-bottom: 10px;
-}
-.docs-page .top-container .breadcrumb .breadcrumb-item {
-  color: #838690;
-  font-size: 13px;
-  font-weight: 500;
-  padding: 0 9px 0 0px;
-  display: flex;
-}
-.docs-page .top-container .breadcrumb .breadcrumb-item a {
-  color: #838690;
-}
-.docs-page .top-container .breadcrumb .breadcrumb-item.active {
-  color: #c7c8c9;
-  font-weight: 400;
-}
-.docs-page .top-container .doc-social-btns {
-  color: rgba(11, 22, 33, 0.5);
-  white-space: nowrap;
-  top: -2px;
-  position: relative;
-}
-@media (max-width: 992px) {
-  .docs-page .top-container .doc-social-btns {
+  body .for-mobile {
+    display: inline-block;
+  }
+  body .for-desktop {
     display: none;
   }
-}
-.docs-page .top-container .doc-social-btns small {
-  font-size: 13px;
-}
-.docs-page .top-container .doc-social-btns a:hover {
-  text-decoration: none;
-}
-.docs-page .top-container .doc-social-btns .twitter,
-.docs-page .top-container .doc-social-btns .linkedin,
-.docs-page .top-container .doc-social-btns .email {
-  color: rgba(11, 22, 33, 0.5);
-}
-.docs-page .top-container .doc-social-btns .share-button {
-  margin-left: 10px;
-}
-.docs-page .custom-input-group {
-  border: 1px solid rgba(11, 22, 33, 0.1);
-  background-color: white;
-  border-radius: 8px;
-  padding: 7px 1rem;
-}
-.docs-page .custom-input-group .input-group-text {
-  font-size: 12px;
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  color: rgba(11, 22, 33, 0.3);
-}
-.docs-page .custom-input-group .form-select {
-  border: none;
-  padding: 0;
-  background-color: transparent;
-  background-position: right top;
-}
-.docs-page .custom-input-group .form-select:focus {
-  box-shadow: none !important;
-}
-
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select select.form-select,
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background-color: transparent;
-  color: rgba(255, 255, 255, 0.7);
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control {
-  background-color: transparent;
-  color: rgba(255, 255, 255, 0.7);
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
-  color: rgba(255, 255, 255, 0.3);
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-version .version-select label {
-  background: #000000;
-  border-color: #000000;
-  color: #ddd;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .form-control {
-  background: #333;
-  color: #999;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter select {
-  border: 0;
-  border-radius: 6px;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
-  color: #aaa;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a {
-  color: #aaa;
-  border-bottom: 0;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a:hover {
-  color: #fff;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
-  font-size: 0.85em;
-  transition: 0.3s;
-  width: 18px;
-  height: 18px;
-  text-align: center;
-  padding: 0;
-  line-height: 1;
-  border-radius: 50%;
-  margin-right: 4px;
-  position: absolute;
-  left: 2px;
-  top: 11px;
-  color: #aaa;
-  cursor: default;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
-  color: #555;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
-  cursor: pointer;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
-  top: 11px;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
-  color: #555;
-  padding: 7px 0;
-  display: block;
-  border-bottom: 0;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
-  color: #fff;
-  transition: 0.4s;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
-  color: #fff;
-}
-.docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
-  transform: rotate(90deg);
-  color: #fff;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
-  color: #fff;
-  text-transform: uppercase;
-  white-space: unset;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
-  color: #fff;
-}
-.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
-  color: #ddd;
-}
-
-@media (max-width: 767px) {
-  .docs-page {
-    padding: 0 0;
+  body .close-mmenu,
+body .close-dmenu {
+    position: absolute;
+    top: -78px;
+    left: 25px;
+    color: #fff;
+    font-size: 68px;
+    background: #fff;
+    opacity: 0;
   }
-
-  .docs-page .docs-content article.docs-body h1 {
-    padding-top: 1.5rem;
+  body.scrolledMore .alert-criteria {
+    top: 72px;
   }
 
-  .docs-page > .container-fluid {
-    display: block;
-  }
-  .docs-page > .container-fluid > .row {
-    display: block;
+  .docs-page {
+    padding: 0 0;
   }
   .docs-page .docs-sidebar {
     position: fixed;
@@ -762,228 +653,37 @@ a {
     left: 0;
     z-index: 100;
     right: 0;
-  }
-  .docs-page .docs-sidebar.docs-sidebar-wrapper {
-    max-width: 100%;
-    width: 100%;
-    top: 0px;
     margin: 0 !important;
     height: 72px;
     border-radius: 0;
   }
-  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list {
-    padding: 0.5rem 1.5rem 2rem 1.5rem;
-    position: fixed;
-    top: 70px;
-    font-size: 17px;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    z-index: 100;
-    background: #1d1d1d;
-    display: none;
-  }
-  .docs-page .docs-sidebar.docs-sidebar-wrapper .docs-tree-list .docs-filter {
-    padding: 0 0 1rem !important;
-  }
-  .docs-page .docs-sidebar .docs-top .navbar-logo {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo {
     padding: 0rem;
     padding-top: 0.3rem;
     display: block;
     text-align: center;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-brand {
+    display: inline-block;
     font-size: 1.25rem;
-    font-weight: 500;
-    display: block;
-    margin-right: 0em;
     padding: 10px 0 15px;
-    text-transform: uppercase;
+    margin: 0 auto !important;
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-brand .docs-logo {
     width: 110px;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .go-back-site {
     display: none;
   }
-  .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-logo-desc {
     font-size: 1em;
     display: none;
   }
-  .docs-page .docs-sidebar .docs-top .open-dmenu {
-    position: absolute;
-    top: 10px;
-    left: 20px;
-  }
-  .docs-page .docs-content {
-    max-width: 100%;
-    display: block !important;
-  }
-  .docs-page .docs-content .docs-text-field {
-    padding: 1rem 1.5rem;
-  }
-}
-.for-mobile {
-  display: none;
-}
-
-.for-desktop {
-  display: inline-block;
-}
-
-pre[class*=language-] {
-  padding: 1.4em 2em !important;
-  margin: 15px 0 25px !important;
-  border-radius: 12px;
-}
-
-code {
-  padding: 0.2em 0.4em;
-  margin: 0;
-  font-size: 82%;
-  background-color: #f0f1f3;
-  border-radius: 3px;
-  color: #28a745;
-}
-
-pre code {
-  padding: 0;
-}
-pre .token.keyword {
-  color: #569cd6;
-}
-pre .token.atrule,
-pre .token.attr-value,
-pre .token.function,
-pre .token.class-name {
-  color: #d69d85;
-}
-
-:not(pre) > code[class*=language-],
-pre[class*=language-] {
-  background: #211e1e !important;
-}
-
-div.code-toolbar > .toolbar {
-  z-index: 7;
-}
-
-div.code-toolbar > .toolbar span {
-  cursor: default;
-}
-
-div.code-toolbar > .toolbar a {
-  cursor: copy;
-}
-
-.logo-nav ul {
-  width: 300px !important;
-}
-
-.alert-criteria {
-  padding: 1.25rem 1.25rem;
-  max-width: 100%;
-  color: #3e9fcb;
-  background-color: #f4f6fa;
-  border-color: #f4f6fa;
-  border-radius: 12px;
-  background: rgba(190, 223, 238, 0.82);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-}
-.alert-criteria p.alert-p {
-  font-size: 0.96em;
-}
-.alert-criteria .input-group .input-group-text,
-.alert-criteria .input-group .form-control {
-  font-size: 0.96em;
-}
-@media screen and (max-width: 767px) {
-  .alert-criteria .input-group .input-group-text,
-.alert-criteria .input-group .form-control {
-    font-size: 0.88em;
-  }
-}
-.alert-criteria .input-group .input-group-text {
-  color: #004085;
-  background-color: #bddcfd;
-  border: 1px solid #bddcfd;
-}
-@media screen and (max-width: 1366px) {
-  .alert-criteria .input-group .input-group-text {
-    display: none;
-  }
-}
-.alert-criteria .input-group .form-control {
-  color: #004085;
-  background-color: #fff;
-  border: 1px solid #bddcfd;
-}
-@media screen and (max-width: 1366px) {
-  .alert-criteria .input-group .form-control {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
-}
-
-.scrolledMore {
-  padding-top: 107px;
-}
-.scrolledMore .alert-criteria {
-  position: fixed;
-  top: 1rem;
-  z-index: 10;
-  border: 0;
-  margin-left: 0;
-}
-@media screen and (max-width: 767px) {
-  .scrolledMore .alert-criteria {
-    top: 72px;
-  }
-}
-.scrolledMore .alert-criteria p.alert-p {
-  display: none;
-}
-
-.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
-.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
-  opacity: 1 !important;
-  filter: "alpha(opacity=1)";
-  -ms-filter: "alpha(opacity=1)";
-}
-
-@media (max-width: 767px) {
-  body {
-    font-size: 14px;
-  }
-
-  .for-mobile {
-    display: inline-block;
-  }
-
-  .for-desktop {
-    display: none;
-  }
-
-  .close-mmenu,
-.close-dmenu {
-    position: absolute;
-    top: -78px;
-    left: 25px;
-    color: #fff;
-    font-size: 68px;
-    background: #fff;
-    opacity: 0;
-  }
-
-  .docs-page .top-container {
-    margin-top: 10px;
-  }
-
-  .navbar {
-    padding: 0.5rem 1.75rem;
-  }
-  .navbar .navbar-collapse {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse {
     background: #38003d;
     position: fixed;
     top: 86px;
@@ -993,15 +693,15 @@ div.code-toolbar > .toolbar a {
     height: calc(100vh - 86px);
     z-index: 100 !important;
   }
-  .navbar .navbar-collapse .navbar-nav {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse .navbar-nav {
     height: 100vh;
     padding: 20px 30px;
     overflow: auto;
   }
-  .navbar .navbar-collapse .navbar-nav .nav-link {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse .navbar-nav .nav-link {
     padding: 1.2rem !important;
   }
-  .navbar .navbar-toggler {
+  .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-toggler {
     padding: 0.5rem 0.75rem;
     font-size: 1.5rem;
     line-height: 1;
@@ -1011,34 +711,101 @@ div.code-toolbar > .toolbar a {
     color: #fff !important;
     margin-left: -1rem;
   }
-
-  .section-with-logos img {
+  .docs-page .docs-sidebar .docs-top .open-dmenu {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+  }
+  .docs-page .docs-sidebar .docs-tree-list {
+    padding: 0.5rem 1.5rem 2rem 1.5rem;
+    position: fixed;
+    top: 70px;
+    font-size: 17px;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    z-index: 100;
+    background: #1d1d1d;
+    display: none;
+  }
+  .docs-page .docs-sidebar .docs-tree-list .docs-filter {
+    padding: 0 0 1rem !important;
+  }
+  .docs-page .docs-content {
+    display: block !important;
+    padding: 0 0;
+    width: 100% !important;
+    margin-left: 0;
+    padding-top: 80px;
+  }
+  .docs-page .docs-content .top-container {
+    margin-top: 10px;
+  }
+  .docs-page .docs-content .docs-link-btns {
+    padding: 0 1.5rem;
+  }
+  .docs-page .docs-content .docs-content-field article.docs-body h1 {
+    padding-top: 1.5rem;
+  }
+  .docs-page .docs-content .docs-content-field .docs-text-field {
+    padding: 1rem 1.5rem;
+  }
+  .docs-page .docs-content .docs-content-field .section-with-logos img {
     margin: 15px;
     opacity: 1;
     -webkit-filter: grayscale(0%);
     filter: grayscale(0%);
   }
-
-  span.code-arrow {
+  .docs-page .docs-content .docs-content-field span.code-arrow {
     padding: 0px 0 0px;
     display: block;
     transform: rotate(90deg);
     font-size: 2em;
   }
-
-  .mb-5,
-.my-5 {
-    margin-bottom: 2rem !important;
+  .docs-page .docs-page-index {
+    position: relative;
+    width: 100%;
+    padding: 0 1.75em 1.75em;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
+  }
+  .docs-page > .container-fluid {
+    display: block;
+  }
+  .docs-page > .container-fluid > .row {
+    display: block;
   }
 }
-@media screen and (max-width: 767px) {
-  .navbar-logo .navbar-brand {
-    display: inline-block;
-    margin: 0 auto !important;
-    max-width: 70%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+@media (max-width: 992px) {
+  .docs-page .docs-content .top-container .doc-social-btns {
+    display: none;
+  }
+  .docs-page .docs-content .docs-link-btns .cont-container a.cont-avatar img {
+    width: 24px;
+    height: 24px;
+  }
+}
+@media (max-width: 1200px) {
+  .docs-page .docs-content {
+    width: calc(100% - 300px);
+  }
+  .docs-page .docs-page-index .card {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) and (max-width: 1200px) {
+  .docs-page .docs-page-index {
+    position: relative;
+    width: calc(100% - 300px);
+    margin-left: 300px;
+    padding: 0 1rem 1rem;
+  }
+  .docs-page .docs-page-index .docs-inner-anchors {
+    position: relative;
+    top: auto;
+    padding: 0 1.75em;
   }
 }
 
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index 139bf5b74d..cf35442d4a 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,KA1CK;EA2CL,QA3CK;EA4CL;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGI;EACI;;AAKZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAYxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EA/LJ;IAgMQ;;;AAEJ;EAlMJ;IAmMQ;IACA;IACA;;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EARJ;IASQ;IACA;;;AAOJ;EACI;;AAMhB;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA,KAvjBC;EAwjBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EAjFJ;IAkFQ;IACA;IACA;IACA;;EAGA;IACI;IACA;IACA;;;AAIR;EA/FJ;IAgGQ;IACA;IACA;;EAEA;IACI;IACA;;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SAzqBC;;AA2qBL;EACI;EACA;EACA;;AAGJ;EAzBJ;IA0BQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAWI;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAMR;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAQA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAGI;EACI;;AAGJ;EACI;EACA;;AAYxB;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAyBpB;EACI;IACI;;;EAEJ;IACI;;;EAIA;IACI;;EAEA;IACI;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAYR;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;IACA;;EAQZ;IACI;IACA;;EAEA;IACI;;;AAOhB;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACI;;AAGJ;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;;AAIR;AAAA;EAEI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIA;AAAA;EAEI;;AAEA;EAJJ;AAAA;IAKQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;;;AAIR;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;;;;AAMhB;EACI;;AAEA;EACI;EACA,KAnoCK;EAooCL;EACA;EACA;;AACA;EANJ;IAOQ;;;AAGJ;EACI;;;AAKZ;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;IACI;;;EAGJ;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;;EAGJ;IACI;;;EAGJ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAIR;IACI;IACA;IACA;IACA;;;EAGJ;IACI;IACA;IACA;IACA;;;EAGJ;AAAA;IAEI;;;AAIR;EAEQ;IACI;IACA;IACA;IACA;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAtpBC;EAupBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA7uBH;;AA+uBD;EACI;EACA;EACA;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index 1a4d30c1e7..b1c86750ee 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -4,39 +4,90 @@ $gap-y-size: 1rem;
 body {
     position: relative;
     background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%);
-}
 
-.container {
-    max-width: 1680px !important;
-    padding: 0;
-}
+    .container {
+        max-width: 1680px !important;
+        padding: 0;
+    }
 
-a {
-    text-decoration: none;
-}
+    a {
+        text-decoration: none;
+    }
 
-.btn-primary {
-    background-color: #b84297 !important;
-    font-size: 12px;
-}
+    .btn-primary {
+        background-color: #b84297 !important;
+        font-size: 12px;
+    }
 
-.docs-page {
-    padding: 0 $gap-y-size;
+    .for-mobile {
+        display: none;
+    }
+
+    .for-desktop {
+        display: inline-block;
+    }
 
-    .anchorjs-link {
-        transition: all 0.25s linear;
-        -webkit-transition: all 0.25s linear;
+    pre[class*='language-'] {
+        padding: 1.4em 2em !important;
+        margin: 15px 0 25px !important;
+        border-radius: 12px;
+    }
 
-        &:hover {
-            text-decoration: none;
+    pre {
+        .token.keyword {
+            color: #569cd6;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.function,
+        .token.class-name {
+            color: #d69d85;
+        }
+    }
+
+    :not(pre) > code[class*='language-'],
+    pre[class*='language-'] {
+        background: #211e1e !important;
+    }
+
+    div.code-toolbar > .toolbar {
+        z-index: 7;
+
+        span {
+            cursor: default;
         }
+        a {
+            cursor: copy;
+        }
+    }
+
+    .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+    .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
+        opacity: 1 !important;
+        filter: 'alpha(opacity=1)';
+        -ms-filter: 'alpha(opacity=1)';
     }
 
-    *:hover > .anchorjs-link {
-        margin-left: -0.8em !important;
-        transition: color 0.25s linear;
-        color: gray;
+    &.scrolledMore {
+        padding-top: 107px;
+
+        .alert-criteria {
+            position: fixed;
+            top: $gap-y-size;
+            z-index: 10;
+            border: 0;
+            margin-left: -0;
+
+            p.alert-p {
+                display: none;
+            }
+        }
     }
+}
+
+.docs-page {
+    padding: 0 $gap-y-size;
 
     .docs-sidebar {
         display: inline-block;
@@ -47,25 +98,50 @@ a {
         border-radius: 12px;
         background: #211e1e;
         padding: 0.5rem $gap-x-size;
+        width: 300px;
 
-        .input-group {
-            border-radius: 5px;
-            overflow: hidden;
-        }
+        .docs-top {
+            .navbar-logo {
+                .navbar-brand {
+                    font-size: 1.35rem;
+                    color: #fff;
+                    font-weight: 500;
+                    padding: 15px 0 15px;
+                    line-height: 1;
+                    text-transform: uppercase;
+                    white-space: unset;
 
-        &.docs-sidebar-wrapper {
-            width: 300px;
+                    strong {
+                        font-weight: 300;
+                        text-transform: uppercase;
+                        font-size: 0.7em;
+                        letter-spacing: 1px;
+                    }
+                }
 
-            input.form-control {
-                border: 0;
+                .go-back-site {
+                    color: #fff;
+                    opacity: 0.65;
+                    transition: 0.2s;
+                    font-size: 0.8em;
+                    font-weight: 300;
+                    width: 32px;
+                    height: 32px;
+                    line-height: 32px;
+                    text-align: center;
+                    border-radius: 8px;
+                    background-color: rgb(255 255 255 / 10%);
 
-                &:focus,
-                &:active,
-                &:hover,
-                &:visited {
-                    box-shadow: none;
+                    &:hover {
+                        text-decoration: none;
+                        opacity: 1;
+                    }
                 }
             }
+        }
+
+        .docs-tree-list {
+            height: calc(100vh - 115px);
 
             .docs-version {
                 position: relative;
@@ -92,6 +168,11 @@ a {
                 .version-select {
                     border-radius: 3px;
 
+                    .input-group {
+                        border-radius: 5px;
+                        overflow: hidden;
+                    }
+
                     .input-group-text {
                         padding: 0 0;
                         font-size: 0.75rem;
@@ -116,6 +197,8 @@ a {
                         height: 30px;
                         font-size: 1.17em;
                         border-radius: 0px;
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
 
                         &:focus,
                         &:active,
@@ -129,142 +212,144 @@ a {
                         padding: 0 0 2px 0;
                         background-image: none;
                     }
-                }
-            }
+                    input.form-select {
+                        background-color: transparent;
+                        color: rgb(255 255 255 / 70%);
+
+                        &::placeholder {
+                            color: rgb(255 255 255 / 30%);
+                        }
+                    }
+
+                    input.form-control {
+                        border: 0;
 
-            .docs-filter {
-                padding: 0 1rem;
-                margin: 0.5rem 0;
-                font-size: 0.9em;
+                        &:focus,
+                        &:active,
+                        &:hover,
+                        &:visited {
+                            box-shadow: none;
+                        }
+                    }
 
-                .filter-icon {
-                    i.fa {
+                    label {
+                        background: #000000;
+                        border-color: #000000;
                         color: #ddd;
                     }
                 }
             }
 
-            .docs-tree-list {
-                height: calc(100vh - 115px);
+            > ul {
+                display: block;
+                height: calc(100vh - 310px);
+                overflow-y: auto;
+                margin-right: -4px !important;
+                margin-top: 20px !important;
+            }
 
-                > ul {
-                    display: block;
-                    height: calc(100vh - 310px);
-                    overflow-y: auto;
-                    margin-right: -4px !important;
-                    margin-top: 20px !important;
-                }
+            ul {
+                font-size: 14px;
+                list-style: none;
+                padding: 0 0 1em;
+                margin: 0;
 
-                ul {
-                    font-size: 14px;
-                    list-style: none;
-                    padding: 0 0 1em;
-                    margin: 0;
+                li {
+                    margin-left: 0px;
+                    padding-left: 24px;
+                    display: block;
+                    width: 100%;
+                    position: relative;
 
-                    li {
-                        margin-left: 0px;
-                        padding-left: 24px;
+                    a {
+                        color: #aaa;
+                        font-weight: 500;
+                        padding: 4px 0;
                         display: block;
-                        width: 100%;
-                        position: relative;
+                        border-bottom: 0;
 
-                        a {
-                            color: #999;
-                            font-weight: 500;
-                            padding: 4px 0;
-                            display: block;
-                            border-bottom: 0;
-
-                            &:hover {
-                                color: #000;
-                            }
-
-                            &.last-link {
-                                top: 11px;
-                                color: #aaa;
-                            }
+                        &:hover {
+                            color: #fff;
                         }
 
-                        .badge {
-                            text-transform: uppercase;
-                            font-size: 9px;
-                            position: relative;
-                            letter-spacing: 0.125px;
-                            top: -2px;
+                        &.last-link {
+                            top: 11px;
+                            color: #aaa;
                         }
+                    }
 
-                        span.tree-toggle {
-                            color: #999;
-                            padding: 7px 0;
-                            display: block;
-                            border-bottom: 0;
-                        }
+                    .badge {
+                        text-transform: uppercase;
+                        font-size: 9px;
+                        position: relative;
+                        letter-spacing: 0.125px;
+                        top: -2px;
+                    }
 
-                        .plus-icon {
-                            font-size: 0.85em;
-                            transition: 0.3s;
-                            width: 18px;
-                            height: 18px;
-                            text-align: center;
-                            padding: 0;
-                            line-height: 1;
-                            border-radius: 50%;
-                            margin-right: 4px;
-                            position: absolute;
-                            left: 2px;
-                            top: 9px;
-                            color: #aaa;
-                            cursor: default;
+                    .plus-icon {
+                        font-size: 0.85em;
+                        transition: 0.3s;
+                        width: 18px;
+                        height: 18px;
+                        text-align: center;
+                        padding: 0;
+                        line-height: 1;
+                        border-radius: 50%;
+                        margin-right: 4px;
+                        position: absolute;
+                        left: 2px;
+                        top: 9px;
+                        color: #aaa;
+                        cursor: default;
 
-                            .fa-long-arrow-right {
-                                &.no-link {
-                                    color: #555;
-                                }
+                        .fa-long-arrow-right {
+                            &.no-link {
+                                color: #555;
                             }
+                        }
 
-                            .fa-chevron-right {
-                                cursor: pointer;
-                            }
+                        .fa-chevron-right {
+                            cursor: pointer;
                         }
+                    }
 
-                        ul {
-                            padding: 0;
+                    ul {
+                        padding: 0;
 
-                            li {
-                                a {
-                                    font-weight: 400;
-                                }
+                        li {
+                            a {
+                                font-weight: 400;
+                            }
 
-                                ul {
-                                    padding: 0;
+                            ul {
+                                padding: 0;
 
-                                    li {
-                                        a {
-                                            font-weight: 300;
-                                        }
+                                li {
+                                    a {
+                                        font-weight: 300;
                                     }
                                 }
                             }
                         }
+                    }
+
+                    &.selected-tree {
+                        > a {
+                            color: #fff;
+                            transition: 0.4s;
+                        }
 
-                        &.selected-tree {
-                            > a {
-                                color: #000;
-                                transition: 0.4s;
+                        > span {
+                            .fa {
+                                transform: rotate(90deg);
+                                color: #b84297;
                             }
+                        }
 
+                        &.last-link {
                             > span {
                                 .fa {
-                                    transform: rotate(90deg);
-                                    color: #b84297;
-                                }
-                            }
-
-                            &.last-link {
-                                > span {
-                                    .fa {
-                                        transform: rotate(0deg);
-                                    }
+                                    transform: rotate(0deg);
                                 }
                             }
                         }
@@ -272,52 +357,6 @@ a {
                 }
             }
         }
-
-        .docs-top {
-            .navbar-logo {
-                .navbar-brand {
-                    font-size: 1.35rem;
-                    color: #000;
-                    font-weight: 500;
-                    padding: 15px 0 15px;
-                    line-height: 1;
-
-                    strong {
-                        font-weight: 300;
-                        text-transform: uppercase;
-                        font-size: 0.7em;
-                        letter-spacing: 1px;
-                    }
-                }
-
-                .go-back-site {
-                    color: #000;
-                    opacity: 0.65;
-                    transition: 0.2s;
-                    font-size: 0.8em;
-                    font-weight: 300;
-                    width: 32px;
-                    height: 32px;
-                    line-height: 32px;
-                    text-align: center;
-                    border-radius: 8px;
-                    background-color: rgb(255 255 255 / 10%);
-
-                    &:hover {
-                        text-decoration: none;
-                        opacity: 1;
-                    }
-                }
-
-                .navbar-logo-desc {
-                    font-size: 0.85em;
-
-                    strong {
-                        display: block;
-                    }
-                }
-            }
-        }
     }
 
     .docs-content {
@@ -328,31 +367,52 @@ a {
         margin-left: 300px;
         padding: $gap-y-size $gap-y-size;
 
-        @media (max-width: 767px) {
-            padding: 0 0;
-        }
-
-        .contributors {
-            position: absolute;
-            top: 15px;
-            right: 5px;
+        .top-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #eaeaea;
+            margin: 0 $gap-x-size;
+
+            .breadcrumb {
+                margin-bottom: 0;
+                flex-wrap: nowrap;
+                overflow-x: scroll;
+                white-space: nowrap;
+                padding-bottom: 10px;
 
-            .contributors-avatar {
-                border-radius: 21px;
-                width: 21px;
-                height: 21px;
+                .breadcrumb-item {
+                    color: #838690;
+                    font-size: 13px;
+                    font-weight: 500;
+                    padding: 0 9px 0 0px;
+                    display: flex;
+                    a {
+                        color: #838690;
+                    }
+                    &.active {
+                        color: #c7c8c9;
+                        font-weight: 400;
+                    }
+                }
             }
+            .doc-social-btns {
+                color: rgb(11 22 33 / 50%);
+                white-space: nowrap;
+                top: -2px;
+                position: relative;
 
-            a {
-                padding: 0;
-                width: 21px;
-                height: 21px;
-                display: inline-block;
-                margin: 0 0 0 2px;
-
-                &:hover {
+                small {
+                    font-size: 13px;
+                }
+                a:hover {
                     text-decoration: none;
                 }
+
+                .share-button {
+                    color: rgb(11 22 33 / 50%);
+                    margin-left: 10px;
+                }
             }
         }
 
@@ -360,10 +420,6 @@ a {
             font-size: 0.8em;
             padding: 0 $gap-x-size;
 
-            @media (max-width: 767px) {
-                padding: 0 1.5rem;
-            }
-
             a {
                 color: #3e9fcb;
 
@@ -402,155 +458,198 @@ a {
                     box-shadow: none;
                 }
             }
-        }
 
-        .docs-text-field {
-            padding: 1.5em;
-        }
+            .cont-container {
+                .contributors-text {
+                    color: rgb(11 22 33 / 50%);
+                    font-size: 1.1em;
+                    font-weight: 600;
+                }
 
-        article.docs-body {
-            word-break: break-word;
+                a.cont-avatar {
+                    position: relative;
 
-            h1 {
-                padding-top: 1rem;
-                font-size: 2.25rem;
-                padding-bottom: 10px;
-            }
+                    img {
+                        width: 32px;
+                        height: 32px;
+                        margin-left: -12px;
+                        display: inline-block;
+                        border: 2px solid #fff;
+                        transition: 0.2s;
+                        -webkit-transition: 0.2s;
+                    }
+                }
 
-            h2 {
-                padding-top: 2rem;
-                padding-bottom: 10px;
-                font-size: 2rem;
+                &:hover {
+                    a.cont-avatar {
+                        img {
+                            margin-left: -8px;
+                        }
+                    }
+                }
             }
+        }
 
-            h3,
-            h4,
-            h5,
-            h6 {
-                padding-top: 20px;
-                padding-bottom: 5px;
-                font-size: 1.5rem;
+        .docs-content-field {
+            .docs-text-field {
+                padding: 1.5em;
             }
 
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                position: relative;
+            article.docs-body {
+                word-break: break-word;
 
-                .anchor {
-                    position: absolute;
-                    right: -26px;
-                    font-size: 18px;
-                    bottom: 5px;
-                    color: #999;
-                    opacity: 0;
-                    transition: 0.5s;
+                h1 {
+                    padding-top: 1rem;
+                    font-size: 2.25rem;
+                    padding-bottom: 10px;
                 }
 
-                &:hover {
-                    .anchor {
-                        opacity: 1;
-                    }
+                h2 {
+                    padding-top: 2rem;
+                    padding-bottom: 10px;
+                    font-size: 2rem;
                 }
-            }
 
-            .blockquote {
-                margin-bottom: 1rem;
-                margin-left: 0;
-                border-left: 3px solid rgb(184 66 151 / 30%);
-                padding: 1em 1.5em;
-                background-color: rgb(184 66 151 / 15%);
-                font-size: 1em;
-                border-radius: 12px;
-            }
+                h3,
+                h4,
+                h5,
+                h6 {
+                    padding-top: 20px;
+                    padding-bottom: 5px;
+                    font-size: 1.5rem;
+                }
 
-            img {
-                max-width: 100%;
-                border: 1px solid #f4f5f7;
-                margin: 15px 0 25px;
-                box-shadow: 0 0 45px #f8f9fa;
-                border-radius: 12px;
-            }
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    position: relative;
 
-            table {
-                display: block;
-                overflow: auto;
-                width: 100%;
+                    .anchor {
+                        position: absolute;
+                        right: -26px;
+                        font-size: 18px;
+                        bottom: 5px;
+                        color: #999;
+                        opacity: 0;
+                        transition: 0.5s;
+                    }
 
-                thead {
-                    tr {
-                        border-bottom: 2px inset;
+                    &:hover {
+                        .anchor {
+                            opacity: 1;
+                        }
                     }
                 }
 
-                th {
-                    font-weight: 600;
+                .blockquote {
+                    margin-bottom: 1rem;
+                    margin-left: 0;
+                    border-left: 3px solid rgb(184 66 151 / 30%);
+                    padding: 1em 1.5em;
+                    background-color: rgb(184 66 151 / 15%);
+                    font-size: 1em;
+                    border-radius: 12px;
                 }
 
-                td,
-                th {
-                    border: 1px solid #dfe2e5;
-                    padding: 6px 13px;
+                img {
+                    max-width: 100%;
+                    border: 1px solid #f4f5f7;
+                    margin: 15px 0 25px;
+                    box-shadow: 0 0 45px #f8f9fa;
+                    border-radius: 12px;
                 }
 
-                tr {
-                    background-color: #fff;
-                    border-top: 1px solid #c6cbd1;
-                }
+                table {
+                    display: block;
+                    overflow: auto;
+                    width: 100%;
+
+                    thead {
+                        tr {
+                            border-bottom: 2px inset;
+                        }
+                    }
 
-                tr:nth-child(2n) {
-                    background-color: #f6f8fa;
+                    th {
+                        font-weight: 600;
+                    }
+
+                    td,
+                    th {
+                        border: 1px solid #dfe2e5;
+                        padding: 6px 13px;
+                    }
+
+                    tr {
+                        background-color: #fff;
+                        border-top: 1px solid #c6cbd1;
+                    }
+
+                    tr:nth-child(2n) {
+                        background-color: #f6f8fa;
+                    }
+
+                    img {
+                        background-color: initial;
+                    }
                 }
+            }
 
-                img {
-                    background-color: initial;
+            .custom-input-group {
+                border: 1px solid rgba(11, 22, 33, 0.1);
+                background-color: white;
+                border-radius: 8px;
+                padding: 7px $gap-y-size;
+                .input-group-text {
+                    font-size: 12px;
+                    padding: 0;
+                    background-color: transparent;
+                    border: none;
+                    color: rgb(11 22 33 / 30%);
+                }
+                .form-select {
+                    border: none;
+                    padding: 0;
+                    background-color: transparent;
+                    background-position: right top;
+                    &:focus {
+                        box-shadow: none !important;
+                    }
                 }
             }
-        }
 
-        @media (max-width: 1200px) {
-            width: calc(100% - 300px);
-        }
-        @media (max-width: 767px) {
-            width: 100%;
-            margin-left: 0;
-            padding-top: 80px;
-        }
-    }
+            .alert-criteria {
+                padding: 1.25rem 1.25rem;
+                max-width: 100%;
+                color: #3e9fcb;
+                background-color: #f4f6fa;
+                border-color: #f4f6fa;
+                border-radius: 12px;
+                background: hsl(199deg 59% 84% / 82%);
+                -webkit-backdrop-filter: blur(10px);
+                backdrop-filter: blur(10px);
 
-    .cont-container {
-        .contributors-text {
-            color: rgb(11 22 33 / 50%);
-            font-size: 1.1em;
-            font-weight: 600;
-        }
+                p.alert-p {
+                    font-size: 0.96em;
+                }
+            }
 
-        a.cont-avatar {
-            position: relative;
+            .anchorjs-link {
+                transition: all 0.25s linear;
+                -webkit-transition: all 0.25s linear;
 
-            img {
-                width: 32px;
-                height: 32px;
-                margin-left: -12px;
-                display: inline-block;
-                transition: 0.2s;
-                border: 2px solid #fff;
-
-                @media (max-width: 992px) {
-                    width: 24px;
-                    height: 24px;
+                &:hover {
+                    text-decoration: none;
                 }
             }
-        }
 
-        &:hover {
-            a.cont-avatar {
-                img {
-                    margin-left: -8px;
-                }
+            *:hover > .anchorjs-link {
+                margin-left: -0.8em !important;
+                transition: color 0.25s linear;
+                color: gray;
             }
         }
     }
@@ -559,10 +658,6 @@ a {
         display: inline-block;
         position: absolute;
 
-        #scroll-index {
-            max-height: 90vh;
-        }
-
         .docs-inner-anchors {
             position: fixed;
             z-index: 99;
@@ -617,11 +712,10 @@ a {
             .index-scroll {
                 margin-left: -30px;
             }
+        }
 
-            .docs-anchors-wrapper {
-                max-width: 300px;
-                float: left;
-            }
+        #scroll-index {
+            max-height: 90vh;
         }
 
         .scroll-top-btn {
@@ -636,314 +730,66 @@ a {
             }
         }
 
-        @media (min-width: 768px) and (max-width: 1200px) {
-            position: relative;
-            width: calc(100% - 300px);
-            margin-left: 300px;
-            padding: 0 $gap-y-size $gap-y-size; 
-
-
-            .docs-inner-anchors {
-                position: relative;
-                top: auto;
-                padding: 0 $gap-x-size;
-
-            }
-        }
-        @media (max-width: 767px) {
-            position: relative;
-            width: 100%;
-            padding: 0 $gap-x-size $gap-x-size; 
-
-            .docs-inner-anchors {
-                position: relative;
-                top: auto;
-            }
-        }
-    }
-
-    .card {
-        background-color: #fff;
-        border-radius: 12px;
-        border: none;
-        width: 300px;
-        box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
-
-        .card-header {
-            background-color: transparent;
-            border-bottom: none;
-            color: #0b1621;
-            h5 {
-                font-size: 19px;
-            }
-        }
-        .card-body {
-            font-size: 13px;
-            padding: $gap-x-size;
-        }
-        .card-footer {
-            padding: 0;
-            background-color: transparent;
+        .card {
+            background-color: #fff;
+            border-radius: 12px;
             border: none;
-        }
-
-        @media (max-width: 1200px) {
-            width: 100%;
-        }
-    }
+            width: 300px;
+            box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 
-    .top-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #eaeaea;
-        margin: 0 $gap-x-size;
-
-        .breadcrumb {
-            margin-bottom: 0;
-            flex-wrap: nowrap;
-            overflow-x: scroll;
-            white-space: nowrap;
-            padding-bottom: 10px;
-
-            .breadcrumb-item {
-                color: #838690;
-                font-size: 13px;
-                font-weight: 500;
-                padding: 0 9px 0 0px;
-                display: flex;
-                a {
-                    color: #838690;
+            .card-header {
+                background-color: transparent;
+                border-bottom: none;
+                color: #0b1621;
+                h5 {
+                    font-size: 19px;
                 }
-                &.active {
-                    color: #c7c8c9;
-                    font-weight: 400;
-                }
-            }
-        }
-        .doc-social-btns {
-            color: rgb(11 22 33 / 50%);
-            white-space: nowrap;
-            top: -2px;
-            position: relative;
-
-            @media (max-width: 992px) {
-                display: none;
             }
-            small {
+            .card-body {
                 font-size: 13px;
+                padding: $gap-x-size;
             }
-            a:hover {
-                text-decoration: none;
-            }
-
-            .twitter,
-            .linkedin,
-            .email {
-                color: rgb(11 22 33 / 50%);
-            }
-            .share-button {
-                margin-left: 10px;
-            }
-        }
-    }
-
-    .custom-input-group {
-        border: 1px solid rgba(11, 22, 33, 0.1);
-        background-color: white;
-        border-radius: 8px;
-        padding: 7px $gap-y-size;
-        .input-group-text {
-            font-size: 12px;
-            padding: 0;
-            background-color: transparent;
-            border: none;
-            color: rgb(11 22 33 / 30%);
-        }
-        .form-select {
-            border: none;
-            padding: 0;
-            background-color: transparent;
-            background-position: right top;
-            &:focus {
-                box-shadow: none !important;
+            .card-footer {
+                padding: 0;
+                background-color: transparent;
+                border: none;
             }
         }
     }
 }
 
-.docs-page {
-    .docs-sidebar {
-        &.docs-sidebar-wrapper {
-            .docs-version {
-                .version-select {
-                    select.form-select,
-                    input.form-control {
-                        background-color: transparent;
-                        color: rgb(255 255 255 / 70%);
-                    }
-
-                    input.form-control {
-                        background-color: transparent;
-                        color: rgb(255 255 255 / 70%);
-
-                        &::placeholder {
-                            color: rgb(255 255 255 / 30%);
-                        }
-                    }
-
-                    label {
-                        background: #000000;
-                        border-color: #000000;
-                        color: #ddd;
-                    }
-                }
-            }
-
-            .docs-filter {
-                .form-control {
-                    background: #333;
-                    color: #999;
-                }
-
-                select {
-                    border: 0;
-                    border-radius: 6px;
-                }
-
-                .filter-icon {
-                    i.fa {
-                        color: #aaa;
-                    }
-                }
-            }
-
-            .docs-tree-list {
-                ul {
-                    li {
-                        a {
-                            color: #aaa;
-                            border-bottom: 0;
-
-                            &:hover {
-                                color: #fff;
-                            }
-
-                            .plus-icon {
-                                font-size: 0.85em;
-                                transition: 0.3s;
-                                width: 18px;
-                                height: 18px;
-                                text-align: center;
-                                padding: 0;
-                                line-height: 1;
-                                border-radius: 50%;
-                                margin-right: 4px;
-                                position: absolute;
-                                left: 2px;
-                                top: 11px;
-                                color: #aaa;
-                                cursor: default;
-
-                                .fa-long-arrow-right {
-                                    &.no-link {
-                                        color: #555;
-                                    }
-                                }
-
-                                .fa-chevron-right {
-                                    cursor: pointer;
-                                }
-
-                                &.last-link {
-                                    top: 11px;
-                                }
-                            }
-                        }
-
-                        span.tree-toggle {
-                            color: #555;
-                            padding: 7px 0;
-                            display: block;
-                            border-bottom: 0;
-                        }
-
-                        &.selected-tree {
-                            > a {
-                                color: #fff;
-                                transition: 0.4s;
-
-                                span {
-                                    .fa {
-                                        color: #fff;
-                                    }
+@media (max-width: 767px) {
+    body {
+        font-size: 14px;
 
-                                    &:not(.last-link) .fa {
-                                        transform: rotate(90deg);
-                                        color: #fff;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+        .for-mobile {
+            display: inline-block;
         }
 
-        .docs-top {
-            .navbar-logo {
-                .navbar-brand {
-                    color: #fff;
-                    text-transform: uppercase;
-                    white-space: unset;
-                }
+        .for-desktop {
+            display: none;
+        }
 
-                .go-back-site {
-                    color: #fff;
-                }
+        .close-mmenu,
+        .close-dmenu {
+            position: absolute;
+            top: -78px;
+            left: 25px;
+            color: #fff;
+            font-size: 68px;
+            background: #fff;
+            opacity: 0;
+        }
 
-                .navbar-logo-desc {
-                    color: #ddd;
-                }
+        &.scrolledMore {
+            .alert-criteria {
+                top: 72px;
             }
         }
     }
-}
-
-// @media (min-width: 1100px) {
-//     .container {
-//         max-width: 1080px;
-//     }
-// }
-
-// @media (min-width: 1366px) {
-//     .container {
-//         max-width: 1340px;
-//     }
-// }
 
-// @media (min-width: 1440px) {
-//     .container {
-//         max-width: 1400px;
-//     }
-// }
-
-@media (max-width: 767px) {
     .docs-page {
         padding: 0 0;
-    }
-    .docs-page .docs-content article.docs-body h1 {
-        padding-top: 1.5rem;
-    }
-
-    .docs-page {
-        > .container-fluid {
-            display: block;
-
-            > .row {
-                display: block;
-            }
-        }
 
         .docs-sidebar {
             position: fixed;
@@ -955,53 +801,26 @@ a {
             left: 0;
             z-index: 100;
             right: 0;
-
-            &.docs-sidebar-wrapper {
-                max-width: 100%;
-                width: 100%;
-                top: 0px;
-                margin: 0 !important;
-                height: 72px;
-                border-radius: 0;
-
-                .docs-tree-list {
-                    padding: 0.5rem 1.5rem 2rem 1.5rem;
-                    position: fixed;
-                    top: 70px;
-                    font-size: 17px;
-                    left: 0;
-                    width: 100%;
-                    height: 100vh;
-                    z-index: 100;
-                    background: #1d1d1d;
-                    display: none;
-
-                    .docs-filter {
-                        padding: 0 0 1rem !important;
-
-                        .filter-icon {
-                        }
-                    }
-                }
-
-                .docs-version {
-                }
-            }
+            margin: 0 !important;
+            height: 72px;
+            border-radius: 0;
 
             .docs-top {
-                .navbar-logo {
+                .navbar.navbar-logo {
                     padding: 0rem;
                     padding-top: 0.3rem;
                     display: block;
                     text-align: center;
 
                     .navbar-brand {
+                        display: inline-block;
                         font-size: 1.25rem;
-                        font-weight: 500;
-                        display: block;
-                        margin-right: 0em;
                         padding: 10px 0 15px;
-                        text-transform: uppercase;
+                        margin: 0 auto !important;
+                        max-width: 70%;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
 
                         .docs-logo {
                             width: 110px;
@@ -1016,258 +835,173 @@ a {
                         font-size: 1em;
                         display: none;
                     }
+
+                    .navbar-collapse {
+                        background: rgb(56, 0, 61);
+                        position: fixed;
+                        top: 86px;
+                        left: 0;
+                        width: 100%;
+                        height: 100vh;
+                        height: calc(100vh - 86px);
+                        z-index: 100 !important;
+
+                        .navbar-nav {
+                            height: 100vh;
+                            padding: 20px 30px;
+                            overflow: auto;
+
+                            .nav-link {
+                                padding: 1.2rem !important;
+                            }
+                        }
+                    }
+
+                    .navbar-toggler {
+                        padding: 0.5rem 0.75rem;
+                        font-size: 1.5rem;
+                        line-height: 1;
+                        background-color: transparent;
+                        border: 0;
+                        border-radius: 0.25rem;
+                        color: #fff !important;
+                        margin-left: -1rem;
+                    }
                 }
 
                 .open-dmenu {
                     position: absolute;
                     top: 10px;
                     left: 20px;
+                }
+            }
 
-                    .navbar-toggler-icon {
-                    }
+            .docs-tree-list {
+                padding: 0.5rem 1.5rem 2rem 1.5rem;
+                position: fixed;
+                top: 70px;
+                font-size: 17px;
+                left: 0;
+                width: 100%;
+                height: 100vh;
+                z-index: 100;
+                background: #1d1d1d;
+                display: none;
+
+                .docs-filter {
+                    padding: 0 0 1rem !important;
                 }
             }
         }
 
         .docs-content {
-            max-width: 100%;
             display: block !important;
+            padding: 0 0;
+            width: 100% !important;
+            margin-left: 0;
+            padding-top: 80px;
 
-            .docs-text-field {
-                padding: 1rem 1.5rem;
+            .top-container {
+                margin-top: 10px;
             }
-        }
-
-    }
-}
-
-.for-mobile {
-    display: none;
-}
-
-.for-desktop {
-    display: inline-block;
-}
-
-pre[class*='language-'] {
-    padding: 1.4em 2em !important;
-    margin: 15px 0 25px !important;
-    border-radius: 12px;
-}
-
-code {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    font-size: 82%;
-    background-color: #f0f1f3;
-    border-radius: 3px;
-    color: #28a745;
-}
-
-pre {
-    code {
-        padding: 0;
-    }
-
-    .token.keyword {
-        color: #569cd6;
-    }
-
-    .token.atrule,
-    .token.attr-value,
-    .token.function,
-    .token.class-name {
-        color: #d69d85;
-    }
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-    background: #211e1e !important;
-}
-
-div.code-toolbar > .toolbar {
-    z-index: 7;
-}
-div.code-toolbar > .toolbar span {
-    cursor: default;
-}
 
-div.code-toolbar > .toolbar a {
-    cursor: copy;
-}
-
-.logo-nav ul {
-    width: 300px !important;
-}
+            .docs-link-btns {
+                padding: 0 1.5rem;
+            }
 
-.alert-criteria {
-    padding: 1.25rem 1.25rem;
-    max-width: 100%;
-    color: #3e9fcb;
-    background-color: #f4f6fa;
-    border-color: #f4f6fa;
-    border-radius: 12px;
-    background: hsl(199deg 59% 84% / 82%);
-    -webkit-backdrop-filter: blur(10px);
-    backdrop-filter: blur(10px);
-
-    p.alert-p {
-        font-size: 0.96em;
-    }
+            .docs-content-field {
+                article.docs-body h1 {
+                    padding-top: 1.5rem;
+                }
+                .docs-text-field {
+                    padding: 1rem 1.5rem;
+                }
 
-    .input-group {
-        .input-group-text,
-        .form-control {
-            font-size: 0.96em;
+                .section-with-logos img {
+                    margin: 15px;
+                    opacity: 1;
+                    -webkit-filter: grayscale(0%);
+                    filter: grayscale(0%);
+                }
 
-            @media screen and (max-width: 767px) {
-                font-size: 0.88em;
+                span.code-arrow {
+                    padding: 0px 0 0px;
+                    display: block;
+                    transform: rotate(90deg);
+                    font-size: 2em;
+                }
             }
         }
 
-        .input-group-text {
-            color: #004085;
-            background-color: #bddcfd;
-            border: 1px solid #bddcfd;
+        .docs-page-index {
+            position: relative;
+            width: 100%;
+            padding: 0 $gap-x-size $gap-x-size;
 
-            @media screen and (max-width: 1366px) {
-                display: none;
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
             }
         }
 
-        .form-control {
-            color: #004085;
-            background-color: #fff;
-            border: 1px solid #bddcfd;
+        > .container-fluid {
+            display: block;
 
-            @media screen and (max-width: 1366px) {
-                border-top-left-radius: 0.25rem;
-                border-bottom-left-radius: 0.25rem;
+            > .row {
+                display: block;
             }
         }
     }
 }
 
-.scrolledMore {
-    padding-top: 107px;
-
-    .alert-criteria {
-        position: fixed;
-        top: $gap-y-size;
-        z-index: 10;
-        border: 0;
-        margin-left: -0;
-        @media screen and (max-width: 767px) {
-            top: 72px;
-        }
-
-        p.alert-p {
-            display: none;
+@media (max-width: 992px) {
+    .docs-page {
+        .docs-content {
+            .top-container {
+                .doc-social-btns {
+                    display: none;
+                }
+            }
+            .docs-link-btns {
+                .cont-container {
+                    a.cont-avatar {
+                        img {
+                            width: 24px;
+                            height: 24px;
+                        }
+                    }
+                }
+            }
         }
     }
 }
 
-.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
-.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
-    opacity: 1 !important;
-    filter: 'alpha(opacity=1)';
-    -ms-filter: 'alpha(opacity=1)';
-}
-
-@media (max-width: 767px) {
-    body {
-        font-size: 14px;
-    }
-
-    .for-mobile {
-        display: inline-block;
-    }
-
-    .for-desktop {
-        display: none;
-    }
-
-    .close-mmenu,
-    .close-dmenu {
-        position: absolute;
-        top: -78px;
-        left: 25px;
-        color: #fff;
-        font-size: 68px;
-        background: #fff;
-        opacity: 0;
-    }
-
-    .docs-page .top-container {
-        margin-top: 10px;
-    }
-
-    .navbar {
-        padding: 0.5rem 1.75rem;
-
-        .navbar-collapse {
-            background: rgb(56, 0, 61);
-            position: fixed;
-            top: 86px;
-            left: 0;
-            width: 100%;
-            height: 100vh;
-            height: calc(100vh - 86px);
-            z-index: 100 !important;
-
-            .navbar-nav {
-                height: 100vh;
-                padding: 20px 30px;
-                overflow: auto;
-
-                .nav-link {
-                    padding: 1.2rem !important;
-                }
-            }
+@media (max-width: 1200px) {
+    .docs-page {
+        .docs-content {
+            width: calc(100% - 300px);
         }
-
-        .navbar-toggler {
-            padding: 0.5rem 0.75rem;
-            font-size: 1.5rem;
-            line-height: 1;
-            background-color: transparent;
-            border: 0;
-            border-radius: 0.25rem;
-            color: #fff !important;
-            margin-left: -1rem;
+        .docs-page-index {
+            .card {
+                width: 100%;
+            }
         }
     }
-
-    .section-with-logos img {
-        margin: 15px;
-        opacity: 1;
-        -webkit-filter: grayscale(0%);
-        filter: grayscale(0%);
-    }
-
-    span.code-arrow {
-        padding: 0px 0 0px;
-        display: block;
-        transform: rotate(90deg);
-        font-size: 2em;
-    }
-
-    .mb-5,
-    .my-5 {
-        margin-bottom: 2rem !important;
-    }
 }
 
-@media screen and (max-width: 767px) {
-    .navbar-logo {
-        .navbar-brand {
-            display: inline-block;
-            margin: 0 auto !important;
-            max-width: 70%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+@media (min-width: 768px) and (max-width: 1200px) {
+    .docs-page {
+        .docs-page-index {
+            position: relative;
+            width: calc(100% - 300px);
+            margin-left: 300px;
+            padding: 0 $gap-y-size $gap-y-size;
+
+            .docs-inner-anchors {
+                position: relative;
+                top: auto;
+                padding: 0 $gap-x-size;
+            }
         }
     }
 }

From ff6757bee0cdd90ab5b052967e6afe70130e124f Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Thu, 8 Sep 2022 18:43:13 +0300
Subject: [PATCH 06/12] last commit

---
 .../Pages/Documents/Project/Index.cshtml      | 63 ++++++++++---------
 .../Pages/Documents/Shared/Scripts/vs.js      |  8 ++-
 .../Pages/Documents/Shared/Styles/vs.css      | 33 +++++++---
 .../Pages/Documents/Shared/Styles/vs.css.map  |  2 +-
 .../Pages/Documents/Shared/Styles/vs.scss     | 62 +++++++++++-------
 5 files changed, 106 insertions(+), 62 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 0bfdd1e8c2..9f8a78ae9f 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -106,8 +106,8 @@
                                                 </div>
                                            
                                     </div>
- } 
- @if (Model.VersionSelectItems.Any())
+                                    } 
+                                    @if (Model.VersionSelectItems.Any())
                                             {
                                     <div class="col">
                                            
@@ -132,8 +132,8 @@
                                                 </div>
                                            
                                     </div>
- }
-  @if (Model.LanguageSelectListItems.Count > 1)
+                            }
+                            @if (Model.LanguageSelectListItems.Count > 1)
                                     {
                                 <div class="col">
 
@@ -191,38 +191,39 @@
                             class="nav nav-list"></ul>
                             }
                         </div>
-
                     </div>
 
                 @if (Model.Document != null)
                 {
                     <div class="docs-content">
                         <div class="top-container mb-3">
-                            <div class="row w-100 mx-0">
-                                <div class="col-12 col-lg-9 px-0">
-                                    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
-                                        <ol class="breadcrumb">
-                                            <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
-                                            <li class="breadcrumb-item"><a href="#"> Documents</a></li>
-                                            <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
-                                            <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
-                                            <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
-                                        </ol>
-                                    </nav>
+                            <div class="w-100">
+                                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
+                                    <ol class="breadcrumb ">
+                                        <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
+                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
+                                        <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
+                                    </ol>
+                                </nav>
+                                <div class="doc-social-btns">
+                                    <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                                        <i class="fa fa-twitter"></i>
+                                    </a>
+                                    <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                                        <i class="fa fa-linkedin"></i>
+                                    </a>
+                                    <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                                        <i class="fa fa-envelope-square"></i>
+                                    </a>
                                 </div>
-                                <div class="col-12 col-lg-3 text-lg-end px-0">
-                                    <div class="doc-social-btns">
-                                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                                            <i class="fa fa-twitter"></i>
-                                        </a>
-                                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                                            <i class="fa fa-linkedin"></i>
-                                        </a>
-                                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                                            <i class="fa fa-envelope-square"></i>
-                                        </a>
-                                    </div>
-                                </div>   
                             </div>
                         </div>
 
@@ -263,7 +264,7 @@
                                                             </a>
                                                         }
                                                 </div>
-                                                <div class="">
+                                                <div class="contributors">
                                                   @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
                                                     {
                                                         <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
@@ -362,7 +363,7 @@
                                 <div class="card-body">
                                     <h5 class="card-title">@L["InThisDocument"]</h5>
 
-                                    <div id="scroll-index" class="mt-2">
+                                    <div id="scroll-index" class="">
                                         <nav id="docs-sticky-index" class="navbar index-scroll">
                                         </nav>
                                         <div class="row">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
index 247ae27c9b..43ce41da49 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
@@ -20,7 +20,7 @@
         );
 
         var scrollTopBtn = $('.scroll-top-btn');
-        var enoughHeight = $('.docs-sidebar-wrapper > .docs-top').height() + 60;
+        var enoughHeight = $('.docs-sidebar-wrapper > .docs-top').height();
         var enoughHeightPlus = 500;
 
         $(window).scroll(function () {
@@ -133,6 +133,12 @@
             theme: 'minimal-dark',
             alwaysShowScrollbar: 0,
         });
+
+        $('.mCustomScrollbar-1').mCustomScrollbar({
+            theme: 'minimal-dark',
+            alwaysShowScrollbar: 0,
+            horizontalScroll: true,
+        });
     }
 
     window.Toc.helpers.createNavList = function () {
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index bbd253d306..7b047e306c 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -79,6 +79,8 @@ body.scrolledMore .alert-criteria p.alert-p {
   background: #211e1e;
   padding: 0.5rem 1.75em;
   width: 300px;
+  transition: top 0.3s;
+  -webkit-transition: top 0.3s;
 }
 .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
   font-size: 1.35rem;
@@ -297,25 +299,29 @@ body.scrolledMore .alert-criteria p.alert-p {
   align-items: center;
   border-bottom: 1px solid #eaeaea;
   margin: 0 1.75em;
+  position: relative;
+}
+.docs-page .docs-content .top-container nav {
+  padding-right: 150px;
 }
-.docs-page .docs-content .top-container .breadcrumb {
+.docs-page .docs-content .top-container nav .breadcrumb {
   margin-bottom: 0;
   flex-wrap: nowrap;
   overflow-x: scroll;
   white-space: nowrap;
   padding-bottom: 10px;
 }
-.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item {
+.docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item {
   color: #838690;
   font-size: 13px;
   font-weight: 500;
   padding: 0 9px 0 0px;
   display: flex;
 }
-.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item a {
+.docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item a {
   color: #838690;
 }
-.docs-page .docs-content .top-container .breadcrumb .breadcrumb-item.active {
+.docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item.active {
   color: #c7c8c9;
   font-weight: 400;
 }
@@ -323,7 +329,8 @@ body.scrolledMore .alert-criteria p.alert-p {
   color: rgba(11, 22, 33, 0.5);
   white-space: nowrap;
   top: -2px;
-  position: relative;
+  position: absolute;
+  right: 0;
 }
 .docs-page .docs-content .top-container .doc-social-btns small {
   font-size: 13px;
@@ -388,7 +395,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   transition: 0.2s;
   -webkit-transition: 0.2s;
 }
-.docs-page .docs-content .docs-link-btns .cont-container:hover a.cont-avatar img {
+.docs-page .docs-content .docs-link-btns .cont-container .contributors:hover a.cont-avatar img {
   margin-left: -8px;
 }
 .docs-page .docs-content .docs-content-field .docs-text-field {
@@ -519,6 +526,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   background: rgba(190, 223, 238, 0.82);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
+  z-index: 3;
 }
 .docs-page .docs-content .docs-content-field .alert-criteria p.alert-p {
   font-size: 0.96em;
@@ -541,9 +549,11 @@ body.scrolledMore .alert-criteria p.alert-p {
 }
 .docs-page .docs-page-index .docs-inner-anchors {
   position: fixed;
-  z-index: 99;
+  z-index: 2;
   top: 1rem;
   font-size: 0.9em;
+  transition: top 0.3s;
+  -webkit-transition: top 0.3s;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
   font-size: 0.92em;
@@ -596,6 +606,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   border-radius: 12px;
   border: none;
   width: 300px;
+  margin-bottom: 1rem;
   box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 }
 .docs-page .docs-page-index .card .card-header {
@@ -615,6 +626,9 @@ body.scrolledMore .alert-criteria p.alert-p {
   background-color: transparent;
   border: none;
 }
+.docs-page .docs-page-index .card .btn {
+  font-size: 12px;
+}
 
 @media (max-width: 767px) {
   body {
@@ -637,7 +651,7 @@ body .close-dmenu {
     opacity: 0;
   }
   body.scrolledMore .alert-criteria {
-    top: 72px;
+    top: 72px !important;
   }
 
   .docs-page {
@@ -779,6 +793,9 @@ body .close-dmenu {
   }
 }
 @media (max-width: 992px) {
+  .docs-page .docs-content .top-container nav {
+    padding-right: 0;
+  }
   .docs-page .docs-content .top-container .doc-social-btns {
     display: none;
   }
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index cf35442d4a..e0b98457b2 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAtpBC;EAupBD;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA7uBH;;AA+uBD;EACI;EACA;EACA;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAhqBC;EAiqBD;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA,eA5uBC;EA6uBD;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA1vBH;;AA4vBD;EACI;EACA;EACA;;AAGJ;EACI;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAEJ;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index b1c86750ee..514fe8e575 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -99,6 +99,8 @@ body {
         background: #211e1e;
         padding: 0.5rem $gap-x-size;
         width: 300px;
+        transition: top 0.3s;
+        -webkit-transition: top 0.3s;
 
         .docs-top {
             .navbar-logo {
@@ -373,34 +375,41 @@ body {
             align-items: center;
             border-bottom: 1px solid #eaeaea;
             margin: 0 $gap-x-size;
+            position: relative;
 
-            .breadcrumb {
-                margin-bottom: 0;
-                flex-wrap: nowrap;
-                overflow-x: scroll;
-                white-space: nowrap;
-                padding-bottom: 10px;
+            nav {
+                padding-right: 150px;
+                .breadcrumb {
+                    margin-bottom: 0;
+                    flex-wrap: nowrap;
+                    overflow-x: scroll;
+                    white-space: nowrap;
+                    padding-bottom: 10px;
 
-                .breadcrumb-item {
-                    color: #838690;
-                    font-size: 13px;
-                    font-weight: 500;
-                    padding: 0 9px 0 0px;
-                    display: flex;
-                    a {
+                    .breadcrumb-item {
                         color: #838690;
-                    }
-                    &.active {
-                        color: #c7c8c9;
-                        font-weight: 400;
+                        font-size: 13px;
+                        font-weight: 500;
+                        padding: 0 9px 0 0px;
+                        display: flex;
+                        a {
+                            color: #838690;
+                        }
+                        &.active {
+                            color: #c7c8c9;
+                            font-weight: 400;
+                        }
                     }
                 }
             }
+
             .doc-social-btns {
                 color: rgb(11 22 33 / 50%);
                 white-space: nowrap;
                 top: -2px;
-                position: relative;
+                position: absolute;
+                right: 0;
+
 
                 small {
                     font-size: 13px;
@@ -480,7 +489,7 @@ body {
                     }
                 }
 
-                &:hover {
+                .contributors:hover {
                     a.cont-avatar {
                         img {
                             margin-left: -8px;
@@ -631,6 +640,7 @@ body {
                 background: hsl(199deg 59% 84% / 82%);
                 -webkit-backdrop-filter: blur(10px);
                 backdrop-filter: blur(10px);
+                z-index: 3;
 
                 p.alert-p {
                     font-size: 0.96em;
@@ -660,9 +670,11 @@ body {
 
         .docs-inner-anchors {
             position: fixed;
-            z-index: 99;
+            z-index: 2;
             top: $gap-y-size;
             font-size: 0.9em;
+            transition: top 0.3s;
+            -webkit-transition: top 0.3s;
 
             .navbar {
                 .nav-pills {
@@ -735,6 +747,7 @@ body {
             border-radius: 12px;
             border: none;
             width: 300px;
+            margin-bottom: $gap-y-size;
             box-shadow: 0px 0px 19.9858px rgba(11, 15, 33, 0.05);
 
             .card-header {
@@ -754,6 +767,10 @@ body {
                 background-color: transparent;
                 border: none;
             }
+
+            .btn {
+                font-size: 12px;
+            }
         }
     }
 }
@@ -783,7 +800,7 @@ body {
 
         &.scrolledMore {
             .alert-criteria {
-                top: 72px;
+                top: 72px !important;
             }
         }
     }
@@ -958,6 +975,9 @@ body {
     .docs-page {
         .docs-content {
             .top-container {
+                nav{
+                    padding-right: 0;
+                }
                 .doc-social-btns {
                     display: none;
                 }

From d00ce97812db6dc0ee5b6889798bf46b7348e596 Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Thu, 8 Sep 2022 19:01:41 +0300
Subject: [PATCH 07/12] Update Index.cshtml.cs

---
 .../Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs  | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs
index 76e1a05f92..c68d25d1e8 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml.cs
@@ -461,13 +461,6 @@ namespace Volo.Docs.Pages.Documents.Project
                 }
             }
 
-            Document.Contributors = new List<DocumentContributorDto>
-            {
-                new DocumentContributorDto { Username = "hikalkan", UserProfileUrl = "https://github.com/hikalkan", AvatarUrl = "https://avatars.githubusercontent.com/u/1210527?v=4", CommitCount = 1 },
-                new DocumentContributorDto { Username = "armgnunlu", UserProfileUrl = "https://github.com/armgnunlu", AvatarUrl = "https://avatars.githubusercontent.com/u/36102404?v=4", CommitCount = 1 },
-                new DocumentContributorDto { Username = "engincanV", UserProfileUrl = "https://github.com/engincanV", AvatarUrl = "https://avatars.githubusercontent.com/u/43685404?v=4", CommitCount = 1 },
-                new DocumentContributorDto { Username = "halimekarayay", UserProfileUrl = "https://github.com/halimekarayay", AvatarUrl = "https://avatars.githubusercontent.com/u/86843575?v=4", CommitCount = 1 },
-            };
             await ConvertDocumentContentToHtmlAsync();
         }
 

From 6142dd17fc2799bb25fe96e8b71e5d5e8cfc8e76 Mon Sep 17 00:00:00 2001
From: Engincan VESKE <enginveske@gmail.com>
Date: Tue, 20 Sep 2022 15:15:47 +0300
Subject: [PATCH 08/12] Update Index.cshtml

---
 .../Pages/Documents/Project/Index.cshtml      | 707 +++++++++---------
 1 file changed, 365 insertions(+), 342 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 9f8a78ae9f..419c232e36 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -18,7 +18,7 @@
 
 @model IndexModel
 @{
-    ViewBag.FluidLayout = false;
+    ViewBag.FluidLayout = true;
     Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
     PageLayout.Content.Title = Model.DocumentName?.Replace("-", " ");
     ViewBag.Description = Model.GetDescription();
@@ -26,398 +26,421 @@
 }
 
 @section styles {
-<abp-style-bundle name="@typeof(IndexModel).FullName">
-    <abp-style type="@typeof(PrismjsStyleBundleContributor)" />
-    <abp-style type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)" />
-    <abp-style src="/Pages/Documents/Project/bootstrap-toc.css" />
-    <abp-style src="/Pages/Documents/Shared/Styles/vs.css" />
-    <abp-style src="/Pages/Documents/Project/index.css" />
-</abp-style-bundle>
+    <abp-style-bundle name="@typeof(IndexModel).FullName">
+        <abp-style type="@typeof(PrismjsStyleBundleContributor)"/>
+        <abp-style type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)"/>
+        <abp-style src="/Pages/Documents/Project/bootstrap-toc.css"/>
+        <abp-style src="/Pages/Documents/Shared/Styles/vs.css"/>
+        <abp-style src="/Pages/Documents/Project/index.css"/>
+    </abp-style-bundle>
 }
+
 @section scripts {
-<abp-script-bundle name="@typeof(IndexModel).FullName">
-    <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)" />
-    <abp-script type="@typeof(ClipboardScriptBundleContributor)" />
-    <abp-script type="@typeof(AnchorJsScriptBundleContributor)" />
-    <abp-script type="@typeof(PrismjsScriptBundleContributor)" />
-    <abp-script type="@typeof(PopperJsScriptBundleContributor)" />
-    <abp-script src="/client-proxies/docs-proxy.js" />
-    <abp-script src="/Pages/Documents/Project/bootstrap-toc.js" />
-    <abp-script src="/Pages/Documents/Shared/Scripts/vs.js" />
-    <abp-script src="/Pages/Documents/Project/index.js" />
-    <abp-script src="/Pages/Documents/Shared/ErrorComponent/error.js" />
-</abp-script-bundle>
+    <abp-script-bundle name="@typeof(IndexModel).FullName">
+        <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)"/>
+        <abp-script type="@typeof(ClipboardScriptBundleContributor)"/>
+        <abp-script type="@typeof(AnchorJsScriptBundleContributor)"/>
+        <abp-script type="@typeof(PrismjsScriptBundleContributor)"/>
+        <abp-script type="@typeof(PopperJsScriptBundleContributor)"/>
+        <abp-script src="/client-proxies/docs-proxy.js"/>
+        <abp-script src="/Pages/Documents/Project/bootstrap-toc.js"/>
+        <abp-script src="/Pages/Documents/Shared/Scripts/vs.js"/>
+        <abp-script src="/Pages/Documents/Project/index.js"/>
+        <abp-script src="/Pages/Documents/Shared/ErrorComponent/error.js"/>
+    </abp-script-bundle>
 }
+
 @if (Model.LoadSuccess)
 {
-        <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
-         
-                    <div class="docs-sidebar-wrapper docs-sidebar">
-
-                        <div class="docs-top">
-                            <nav class="navbar navbar-logo">
-                                @if (!Model.Project.Name.IsNullOrWhiteSpace())
-                                {
-                                    <a class="navbar-brand" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
-                                        <span id="ProjectName">@Model.Project.Name</span><br>
-                                        <strong class="display-block">
-                                            @L["Documents"]
-                                        </strong>
-                                    </a>
-                                }
+    <div class="docs-page" data-spy="scroll" data-bs-target="#docs-sticky-index">
 
-                                @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
-                                {
-                                    <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
-                                        <i class="fa fa-chevron-left"></i>
-                                    </a>
-                                }
+    <div class="docs-sidebar-wrapper docs-sidebar">
 
-                                <div class="for-mobile">
-                                    <div class="navbar-dark">
-                                        <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
-                                            <span class="navbar-toggler-icon"></span>
-                                        </button>
-                                    </div>
+        <div class="docs-top">
+            <nav class="navbar navbar-logo">
+                @if (!Model.Project.Name.IsNullOrWhiteSpace())
+                {
+                    <a class="navbar-brand" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
+                        <span id="ProjectName">@Model.Project.Name</span><br>
+                        <strong class="display-block">
+                            @L["Documents"]
+                        </strong>
+                    </a>
+                }
+
+                @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
+                {
+                    <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
+                        <i class="fa fa-chevron-left"></i>
+                    </a>
+                }
+
+                <div class="for-mobile">
+                    <div class="navbar-dark">
+                        <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        </div>
+
+        <div class="docs-tree-list">
+            <div class="row gx-2 mb-2 ">
+                @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
+                {
+                    <div class="col-12 mb-2">
+
+                        <div class="docs-version">
+                            <span>Project</span>
+                            <div class="version-select">
+                                <div class="input-group">
+                                    <span class="input-group-text d-none">
+                                        <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
+                                    </span>
+
+                                    <select asp-items="Model.ProjectSelectItems"
+                                            class="form-select"
+                                            onchange="window.location.pathname = this.value">
+                                    </select>
                                 </div>
-                            </nav>
+                            </div>
                         </div>
 
-                        <div class="docs-tree-list">
-                                <div class="row gx-2 mb-2 ">
-                                     @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1)
-                                            {
-                                    <div class="col-12 mb-2">
-                                       
-                                                <div class="docs-version">
-                                                    <span>Project</span>
-                                                    <div class="version-select">
-                                                        <div class="input-group">
-                                                            <span class="input-group-text d-none">
-                                                                <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
-                                                            </span>
-
-                                                            <select asp-items="Model.ProjectSelectItems"
-                                                            class="form-select"
-                                                            onchange="window.location.pathname = this.value">
-                                                            </select>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                           
-                                    </div>
-                                    } 
-                                    @if (Model.VersionSelectItems.Any())
-                                            {
-                                    <div class="col">
-                                           
-                                                <div class="@(Model.LanguageSelectListItems.Count > 1?"pe-0":"")">
-                                                    <div class="docs-version @(Model.LanguageSelectListItems.Count > 1?"pe-1":"")">
-                                                        <span>Version</span>
-                                                        <div class="version-select">
-                                                            <div class="input-group">
-
-                                                                <span class="input-group-text">
-                                                                    <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
-                                                                </span>
-
-
-                                                                <select asp-items="Model.VersionSelectItems"
-                                                                class="form-select"
-                                                                onchange="if (this.value) { window.location.replace(this.value) }">
-                                                                </select>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                           
-                                    </div>
-                            }
-                            @if (Model.LanguageSelectListItems.Count > 1)
-                                    {
-                                <div class="col">
-
-                                  
-                                        <div class="@(Model.VersionSelectItems.Any()? "" : "")">
-                                            <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
-                                                <span>Language</span>
-                                                <div class="version-select">
-                                                    <div class="input-group">
-                                                        @*<span class="input-group-text">
-                                                            <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
-                                                            </span>*@
-                                                        <select asp-items="Model.LanguageSelectListItems"
-                                                        class="form-select"
-                                                        onchange="window.location.replace(this.value)">
-                                                        </select>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                   
-                                </div>
-                                 }
-                                </div>
+                    </div>
+                }
+                @if (Model.VersionSelectItems.Any())
+                {
+                    <div class="col">
+                        <div class="@(Model.LanguageSelectListItems.Count > 1 ? "pe-0" : "")">
+                            <div class="docs-version @(Model.LanguageSelectListItems.Count > 1 ? "pe-1" : "")">
+                                <span>@L["Version"]</span>
+                                <div class="version-select">
+                                    <div class="input-group">
+                                        <span class="input-group-text">
+                                            <i class="fas fa-code-branch" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Version"]"></i>
+                                        </span>
 
-                                <div class="docs-version">
-                                    <div class="version-select">
-                                        <div class="input-group">
-                                            <span class="input-group-text"><i class="fa fa-filter"></i></span>
-                                            <input class="form-control"
-                                            id="filter"
-                                            type="search"
-                                            data-search-url="@Model."
-                                            placeholder="@L["FilterTopics"].Value"
-                                            aria-label="Filter">
-                                        </div>
+                                        <select asp-items="Model.VersionSelectItems"
+                                                class="form-select"
+                                                onchange="if (this.value) { window.location.replace(this.value) }">
+                                        </select>
                                     </div>
                                 </div>
-
-                            @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
-                            {
-                                <div class="text-muted p-3">
-                                    <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
-                                </div>
-                            }
-                            else
-                            {
-                                <ul root-node="@Model.Navigation"
-                            version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
-                            project-name="@Model.ProjectName"
-                            project-format="@Model.Project.Format"
-                            selected-document-name="@Model.DocumentNameWithExtension"
-                            language="@Model.LanguageCode"
-                            id="sidebar-scroll"
-                            class="nav nav-list"></ul>
-                            }
+                            </div>
                         </div>
-                    </div>
 
-                @if (Model.Document != null)
+                    </div>
+                }
+                @if (Model.LanguageSelectListItems.Count > 1)
                 {
-                    <div class="docs-content">
-                        <div class="top-container mb-3">
-                            <div class="w-100">
-                                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
-                                    <ol class="breadcrumb ">
-                                        <li class="breadcrumb-item"><a href="#"> ABP Framework</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Documents</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Infrastructure</a></li>
-                                        <li class="breadcrumb-item"><a href="#"> Background Jobs</a></li>
-                                        <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
-                                    </ol>
-                                </nav>
-                                <div class="doc-social-btns">
-                                    <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
-                                        <i class="fa fa-twitter"></i>
-                                    </a>
-                                    <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
-                                        <i class="fa fa-linkedin"></i>
-                                    </a>
-                                    <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
-                                        <i class="fa fa-envelope-square"></i>
-                                    </a>
+                    <div class="col">
+                        <div>
+                            <div class="docs-version docs-language @(Model.VersionSelectItems.Any() ? "ps-1" : "")">
+                                <span>@L["Language"]</span>
+                                <div class="version-select">
+                                    <div class="input-group">
+                                        @*<span class="input-group-text">
+                                                            <i class="fa fa-globe" aria-hidden="true" data-bs-toggle="tooltip" title="@L["Language"]"></i>
+                                                            </span>*@
+                                        <select asp-items="Model.LanguageSelectListItems"
+                                                class="form-select"
+                                                onchange="window.location.replace(this.value)">
+                                        </select>
+                                    </div>
                                 </div>
                             </div>
                         </div>
 
-                        <div class="docs-link-btns">
-                            <div class="row">
-                                <div class="col">
-                                    @if (Model.FullSearchEnabled)
-                                    {
-                                        <div class="search-area">
-                                            <div class="input-group">
-                                                <span class="input-group-text"><i class="fa fa-search"></i></span>
-
-                                                <input class="form-control"
-                                        id="fullsearch"
-                                        type="search"
-                                        data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
-                                        placeholder="@L["FullSearch"].Value"
-                                        aria-label="Filter">
-                                            </div>
-                                        </div>
-                                    }
-                                </div>
-                                <div class="col-auto text-end">
-                                    <div class="cont-container d-flex align-items-center justify-content-end h-100">
-                                        @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
-                                        {
-                                                <div class="me-4 d-flex flex-column">
-                                                    <span class="for-desktop contributors-text">
-                                                       @(L["Contributors"].Value)
-                                                   </span>
-
-                                                     @if (string.IsNullOrEmpty(Model.Document.EditLink))
-                                                        {
-                                                            <a href="@Model.Document.EditLink" target="_blank">
-                                                                <i class="fa fa-edit"></i>
-                                                                @(L["Edit"])
-                                                                <span class="for-desktop text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title='@L["LastEditTime"]'>(@Model.Document.LastUpdatedTime.ToShortDateString())</span>
-                                                            </a>
-                                                        }
-                                                </div>
-                                                <div class="contributors">
-                                                  @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
-                                                    {
-                                                        <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
-                                                            <img src="@contributor.AvatarUrl"
-                                                                class="rounded-circle"
-                                                                alt="Avatar"
-                                                                height="21"
-                                                                width="21"
-                                                                title="@contributor.Username" 
-                                                                data-bs-toggle="tooltip"
-                                                                 data-bs-placement="top"
-                                                                />
-                                                        </a>
-                                                    }
-                                                </div>
-                                        }
-                                 
-                                    </div>
+                    </div>
+                }
+            </div>
+
+            <div class="docs-version">
+                <div class="version-select">
+                    <div class="input-group">
+                        <span class="input-group-text">
+                            <i class="fa fa-filter"></i>
+                        </span>
+                        <input class="form-control"
+                               id="filter"
+                               type="search"
+                               data-search-url="@Model."
+                               placeholder="@L["FilterTopics"].Value"
+                               aria-label="Filter">
+                    </div>
+                </div>
+            </div>
 
-                               
+            @if (Model.Navigation == null || !Model.Navigation.HasChildItems)
+            {
+                <div class="text-muted p-3">
+                    <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
+                </div>
+            }
+            else
+            {
+                <ul root-node="@Model.Navigation"
+                    version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
+                    project-name="@Model.ProjectName"
+                    project-format="@Model.Project.Format"
+                    selected-document-name="@Model.DocumentNameWithExtension"
+                    language="@Model.LanguageCode"
+                    id="sidebar-scroll"
+                    class="nav nav-list">
+                </ul>
+            }
+        </div>
+    </div>
 
+    @if (Model.Document != null)
+    {
+        // TODO: get elements
+        <div class="docs-content">
+            <div class="top-container mb-3">
+                <div class="w-100">
+                    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
+                        <ol class="breadcrumb ">
+                            <li class="breadcrumb-item">
+                                <a href="#"> ABP Framework</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Documents</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Infrastructure</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Background Jobs</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Documents</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Infrastructure</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Background Jobs</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Documents</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Infrastructure</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#"> Background Jobs</a>
+                            </li>
+                            <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
+                        </ol>
+                    </nav>
+                    <div class="doc-social-btns">
+                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
+                            <i class="fa fa-twitter"></i>
+                        </a>
+                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
+                            <i class="fa fa-linkedin"></i>
+                        </a>
+                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
+                            <i class="fa fa-envelope-square"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="docs-link-btns">
+                <div class="row">
+                    <div class="col">
+                        @if (Model.FullSearchEnabled)
+                        {
+                            <div class="search-area">
+                                <div class="input-group">
+                                    <span class="input-group-text">
+                                        <i class="fa fa-search"></i>
+                                    </span>
+
+                                    <input class="form-control"
+                                           id="fullsearch"
+                                           type="search"
+                                           data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
+                                           placeholder="@L["FullSearch"].Value"
+                                           aria-label="Filter">
                                 </div>
                             </div>
-                        </div>
+                        }
+                    </div>
+                    <div class="col-auto text-end">
+                        <div class="cont-container d-flex align-items-center justify-content-end h-100">
+                            @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
+                            {
+                                <div class="me-4 d-flex flex-column">
+                                    <span class="for-desktop contributors-text">
+                                        @L["Contributors"].Value
+                                    </span>
 
-                        <div class="docs-content-field">
-                            <div class="docs-text-field">
-                                <div class="position-relative">
-                                    @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
+                                    @if (string.IsNullOrEmpty(Model.Document.EditLink))
                                     {
-                                        <div class="alert alert-primary alert-criteria">
-                                            <abp-row>
-                                                <abp-column>
-                                                    <p class="alert-p mb-2">
-                                                        <i class="fa fa-info-circle"></i>
-                                                        @L["MultipleVersionDocumentInfo"]
-                                                    </p>
-                                                </abp-column>
-                                            </abp-row>
-                                            <abp-row class="gx-2">
-                                                @foreach (var parameter in Model.DocumentPreferences.Parameters)
-                                                {
-                                                    <div class="col">
-                                                        <div class="custom-input-group">
-                                                            <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
-                                                            <select class="doc-section-combobox form-select"
-                                                    aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
-                                                    id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
-                                                                @foreach (var value in parameter.Values)
-                                                                {
-                                                                    @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
-                                                                    {
-                                                                        <option value="@value.Key" selected="selected">@value.Value</option>
-                                                                    }
-                                                                    else
-                                                                    {
-                                                                        <option value="@value.Key">@value.Value</option>
-                                                                    }
-                                                                }
-                                                            </select>
-                                                        </div>
-                                                    </div>
-                                                }
-                                            </abp-row>
-                                        </div>
+                                        <a href="@Model.Document.EditLink" target="_blank">
+                                            <i class="fa fa-edit"></i>
+                                            @L["Edit"]
+                                            <span class="for-desktop text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title='@L["LastEditTime"]'>(@Model.Document.LastUpdatedTime.ToShortDateString())</span>
+                                        </a>
                                     }
                                 </div>
-
-                                <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
-                                    <article class="docs-body">
-
-                                        @if (Model.DocumentLanguageCode != Model.LanguageCode)
-                                        {
-                                            <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
-                                                @L["DocumentNotFoundInSelectedLanguage"]
-                                            </abp-alert>
-                                        }
-                                        @Html.Raw(Model.Document.Content)
-                                    </article>
-
-                                    <div id="crawler_link" style="display:none;">
-                                        @foreach (var query in Model.AlternativeOptionLinkQueries)
-                                        {
-                                            <a href="@($"{Request.Path}?{query}")"> @query </a>
-                                        }
-                                    </div>
+                                <div class="contributors">
+                                    @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList())
+                                    {
+                                        <a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
+                                            <img src="@contributor.AvatarUrl"
+                                                 class="rounded-circle"
+                                                 alt="Avatar"
+                                                 height="21"
+                                                 width="21"
+                                                 title="@contributor.Username"
+                                                 data-bs-toggle="tooltip"
+                                                 data-bs-placement="top"/>
+                                        </a>
+                                    }
                                 </div>
-                            </div>
+                            }
+
                         </div>
+
+
                     </div>
+                </div>
+            </div>
 
-                    <!-- Right Bar -->
-                    <div class="docs-page-index">
-                        <div class=" docs-inner-anchors">
-                            <div class="card">
-                                <div class="card-body">
-                                    <h5 class="card-title">@L["InThisDocument"]</h5>
-
-                                    <div id="scroll-index" class="">
-                                        <nav id="docs-sticky-index" class="navbar index-scroll">
-                                        </nav>
-                                        <div class="row">
-                                            <div class="col p-0">
-                                                <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
+            <div class="docs-content-field">
+                <div class="docs-text-field">
+                    <div class="position-relative">
+                        @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any())
+                        {
+                            <div class="alert alert-primary alert-criteria">
+                                <abp-row>
+                                    <abp-column>
+                                        <p class="alert-p mb-2">
+                                            <i class="fa fa-info-circle"></i>
+                                            @L["MultipleVersionDocumentInfo"]
+                                        </p>
+                                    </abp-column>
+                                </abp-row>
+                                <abp-row class="gx-2">
+                                    @foreach (var parameter in Model.DocumentPreferences.Parameters)
+                                    {
+                                        <div class="col">
+                                            <div class="custom-input-group">
+                                                <span class="input-group-text" id="@("Section" + parameter.Name + "ComboboxAddonId")">@(parameter.DisplayName)</span>
+                                                <select class="doc-section-combobox form-select"
+                                                        aria-describedby="@("Section" + parameter.Name + "ComboboxAddonId")"
+                                                        id="@("Section" + parameter.Name + "ComboboxId")" data-key="@parameter.Name">
+                                                    @foreach (var value in parameter.Values)
+                                                    {
+                                                        @if (value.Key == (Model.UserPreferences.ContainsKey(parameter.Name) ? Model.UserPreferences[parameter.Name] : null))
+                                                        {
+                                                            <option value="@value.Key" selected="selected">@value.Value</option>
+                                                        }
+                                                        else
+                                                        {
+                                                            <option value="@value.Key">@value.Value</option>
+                                                        }
+                                                    }
+                                                </select>
                                             </div>
                                         </div>
-                                    </div>
+                                    }
+                                </abp-row>
+                            </div>
+                        }
+                    </div>
+
+                    <div data-spy="scroll" data-bs-target="#docs-sticky-index" data-offset="0">
+                        <article class="docs-body">
+
+                            @if (Model.DocumentLanguageCode != Model.LanguageCode)
+                            {
+                                <abp-alert alert-type="Warning" dismissible="true" class="mb-0">
+                                    @L["DocumentNotFoundInSelectedLanguage"]
+                                </abp-alert>
+                            }
+                            @Html.Raw(Model.Document.Content)
+                        </article>
+
+                        <div id="crawler_link" style="display:none;">
+                            @foreach (var query in Model.AlternativeOptionLinkQueries)
+                            {
+                                <a href="@($"{Request.Path}?{query}")"> @query </a>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right Bar -->
+        <div class="docs-page-index">
+            <div class=" docs-inner-anchors">
+                <div class="card">
+                    <div class="card-body">
+                        <h5 class="card-title">@L["InThisDocument"]</h5>
 
+                        <div id="scroll-index" class="">
+                            <nav id="docs-sticky-index" class="navbar index-scroll">
+                            </nav>
+                            <div class="row">
+                                <div class="col p-0">
+                                    <a href="javascript:;" class="scroll-top-btn">
+                                        <i class="fa fa-chevron-up"></i> @L["GoToTop"]
+                                    </a>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                }
-                else
-                {
-                    <div class="col-md-9 p-5 bg-white">
-                        <p>@L["DocumentNotFound"]</p>
 
-                        <a href="/">
-                            <i class="fa fa-chevron-left"></i>
-                            @L["BackToWebsite"]
-                        </a>
                     </div>
-                }
+                </div>
+            </div>
         </div>
+    }
+    else
+    {
+        <div class="col-md-9 p-5 bg-white">
+            <p>@L["DocumentNotFound"]</p>
+
+            <a href="/">
+                <i class="fa fa-chevron-left"></i>
+                @L["BackToWebsite"]
+            </a>
+        </div>
+    }
+    </div>
 }
 else
 {
     if (!Model.ProjectFound)
     {
         @(await Component.InvokeAsync<ErrorViewComponent>(new
-         {
-             model = new ErrorPageModel
-             {
-                 RedirectUrl = Model.DocumentsUrlPrefix,
-                 ErrorCode = "404",
-                 ErrorMessage = L.GetString("ProjectNotFound")
-             }
-         }))
+        {
+            model = new ErrorPageModel
+            {
+                RedirectUrl = Model.DocumentsUrlPrefix,
+                ErrorCode = "404",
+                ErrorMessage = L.GetString("ProjectNotFound")
+            }
+        }))
     }
 
     if (!Model.DocumentFound)
     {
         @(await Component.InvokeAsync<ErrorViewComponent>(new
-          {
-              model = new ErrorPageModel
-              {
-                  RedirectUrl = Model.DocumentsUrlPrefix + Model.LanguageCode + "/" + Model.ProjectName + "/"
-                                + (Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version),
-                  ErrorCode = "404",
-                  ErrorMessage = L.GetString("DocumentNotFound"),
-                  AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
-              }
-          }))
+        {
+            model = new ErrorPageModel
+            {
+                RedirectUrl = Model.DocumentsUrlPrefix + Model.LanguageCode + "/" + Model.ProjectName + "/"
+                              + (Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version),
+                ErrorCode = "404",
+                ErrorMessage = L.GetString("DocumentNotFound"),
+                AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
+            }
+        }))
     }
 }
\ No newline at end of file

From 53a12d72ca78bc3d806362b6c9fd1693d5f04a0b Mon Sep 17 00:00:00 2001
From: Engincan VESKE <enginveske@gmail.com>
Date: Tue, 20 Sep 2022 17:26:06 +0300
Subject: [PATCH 09/12] docs: Add breadcrumb to document page header

---
 .../Pages/Documents/Project/Index.cshtml      | 33 ++-----------------
 .../Pages/Documents/Project/index.js          | 23 ++++++++++++-
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
index 419c232e36..4d049e684b 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
@@ -195,43 +195,14 @@
 
     @if (Model.Document != null)
     {
-        // TODO: get elements
         <div class="docs-content">
             <div class="top-container mb-3">
                 <div class="w-100">
                     <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
-                        <ol class="breadcrumb ">
+                        <ol class="breadcrumb" id="document-node-wrapper">
                             <li class="breadcrumb-item">
-                                <a href="#"> ABP Framework</a>
+                                <a href="/"><i class="fa fa-home"></i></a>
                             </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Documents</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Infrastructure</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Background Jobs</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Documents</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Infrastructure</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Background Jobs</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Documents</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Infrastructure</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="#"> Background Jobs</a>
-                            </li>
-                            <li class="breadcrumb-item active" aria-current="page">RabbitMQ Integration</li>
                         </ol>
                     </nav>
                     <div class="doc-social-btns">
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
index 69cfa371d8..51621c4d80 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
@@ -1,5 +1,5 @@
 (function ($) {
-    $(function () {
+    $(function () {        
         var initNavigationFilter = function (navigationContainerId) {
             var $navigation = $('#' + navigationContainerId);
 
@@ -254,6 +254,25 @@
             setQueryString();
         };
 
+        var initDocumentNodeBreadcrumb = function (){
+            var selectedTreeRoot = $("li.nav-header.selected-tree")[0];
+            if(selectedTreeRoot)
+            {
+                var $selectedTreeRoot = $(selectedTreeRoot);
+                var firstAnchor = $selectedTreeRoot.find("a");
+
+                var documentNodeNames = $("#document-node-wrapper");
+                documentNodeNames.append('<li class="breadcrumb-item"><a href="' + firstAnchor.attr("href") + '">' + firstAnchor.html() + '</a></li>');
+
+                var selectedTreeItems = $selectedTreeRoot.find("ul.nav-list > li.selected-tree");
+                for (let i = 0; i < selectedTreeItems.length; i++)
+                {
+                    var anchorItem = $(selectedTreeItems[i]).find("a");
+                    documentNodeNames.append('<li class="breadcrumb-item"><a href="' + anchorItem.attr("href") + '">' + anchorItem.html() + '</a></li>');
+                }
+            }
+        };
+        
         initNavigationFilter('sidebar-scroll');
 
         initAnchorTags('.docs-page .docs-body');
@@ -261,5 +280,7 @@
         initSocialShareLinks();
 
         initSections();
+
+        initDocumentNodeBreadcrumb();
     });
 })(jQuery);

From c0743085bfdd4a0c0f08ae204d0795c8bbfcb497 Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Wed, 21 Sep 2022 10:37:12 +0300
Subject: [PATCH 10/12] scrollbar is hidden

---
 .../Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css   | 5 +++++
 .../Pages/Documents/Shared/Styles/vs.css.map             | 2 +-
 .../Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss  | 9 +++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index 7b047e306c..a87da53890 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -310,6 +310,11 @@ body.scrolledMore .alert-criteria p.alert-p {
   overflow-x: scroll;
   white-space: nowrap;
   padding-bottom: 10px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.docs-page .docs-content .top-container nav .breadcrumb::-webkit-scrollbar {
+  display: none;
 }
 .docs-page .docs-content .top-container nav .breadcrumb .breadcrumb-item {
   color: #838690;
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index e0b98457b2..e548a92087 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAhqBC;EAiqBD;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA,eA5uBC;EA6uBD;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA1vBH;;AA4vBD;EACI;EACA;EACA;;AAGJ;EACI;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAEJ;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KArqBC;EAsqBD;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA,eAjvBC;EAkvBD;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA/vBH;;AAiwBD;EACI;EACA;EACA;;AAGJ;EACI;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAEJ;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index 514fe8e575..714491e68a 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -385,6 +385,12 @@ body {
                     overflow-x: scroll;
                     white-space: nowrap;
                     padding-bottom: 10px;
+                    -ms-overflow-style: none;  
+                    scrollbar-width: none; 
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
 
                     .breadcrumb-item {
                         color: #838690;
@@ -410,7 +416,6 @@ body {
                 position: absolute;
                 right: 0;
 
-
                 small {
                     font-size: 13px;
                 }
@@ -975,7 +980,7 @@ body {
     .docs-page {
         .docs-content {
             .top-container {
-                nav{
+                nav {
                     padding-right: 0;
                 }
                 .doc-social-btns {

From 6ed94dbe699a77564b0a557ef961533cca675ca5 Mon Sep 17 00:00:00 2001
From: halimekarayay <karayayhalime@gmail.com>
Date: Wed, 21 Sep 2022 14:42:16 +0300
Subject: [PATCH 11/12] scss file edited

---
 .../src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css  | 5 +++--
 .../Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map  | 2 +-
 .../src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss | 6 ++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index a87da53890..74d910bd89 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -293,6 +293,9 @@ body.scrolledMore .alert-criteria p.alert-p {
   margin-left: 300px;
   padding: 1rem 1rem;
 }
+.docs-page .docs-content::-webkit-scrollbar {
+  display: none;
+}
 .docs-page .docs-content .top-container {
   display: flex;
   justify-content: space-between;
@@ -310,8 +313,6 @@ body.scrolledMore .alert-criteria p.alert-p {
   overflow-x: scroll;
   white-space: nowrap;
   padding-bottom: 10px;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 .docs-page .docs-content .top-container nav .breadcrumb::-webkit-scrollbar {
   display: none;
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
index e548a92087..717cd75fdf 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KArqBC;EAsqBD;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA,eAjvBC;EAkvBD;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SA/vBH;;AAiwBD;EACI;EACA;EACA;;AAGJ;EACI;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAEJ;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["vs.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIA;EACI;;AAGJ;AAAA;AAAA;AAAA;EAII;;AAIR;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;AAAA;EAEI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA,KA3EC;EA4ED;EACA;EACA;;AAEA;EACI;;;AAMhB;EACI;;AAEA;EACI;EACA;EACA,KA7FK;EA8FL,QA9FK;EA+FL;EACA;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAMhB;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAII;;AAIR;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EAII;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAIR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAGI;EACI;;AAQhB;EACI;EACA;;AAIA;EACI;EACA;;AAMA;EACI;;AAUhC;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACI;;AAQhB;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;;AAKZ;EACI;EACA;;AAEA;EACI;EACA;EACA,KAvqBC;EAwqBD;EACA;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAMA;EACI;;AAMA;EACI;;AAQxB;EACI;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA,eAnvBC;EAovBD;;AAEA;EACI;EACA;EACA;;AACA;EACI;;AAGR;EACI;EACA,SAjwBH;;AAmwBD;EACI;EACA;EACA;;AAGJ;EACI;;;AAMhB;EACI;IACI;;EAEA;IACI;;EAGJ;IACI;;EAGJ;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;IACA;;EAIA;IACI;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGI;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIR;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIR;IACI;IACA;IACA;;EAIR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAIA;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;EAKZ;IACI;IACA;IACA;;EAEA;IACI;IACA;;EAIR;IACI;;EAEA;IACI;;;AAMhB;EAIgB;IACI;;EAEJ;IACI;;EAMI;IACI;IACA;;;AAS5B;EAEQ;IACI;;EAGA;IACI;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA","file":"vs.css"}
\ No newline at end of file
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index 714491e68a..033c7fbc85 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -368,6 +368,10 @@ body {
         width: calc(100% - 600px);
         margin-left: 300px;
         padding: $gap-y-size $gap-y-size;
+        
+        &::-webkit-scrollbar {
+            display: none;
+        }
 
         .top-container {
             display: flex;
@@ -385,8 +389,6 @@ body {
                     overflow-x: scroll;
                     white-space: nowrap;
                     padding-bottom: 10px;
-                    -ms-overflow-style: none;  
-                    scrollbar-width: none; 
 
                     &::-webkit-scrollbar {
                         display: none;

From b860079aa674fe53332e74df240c5fb03b2f4515 Mon Sep 17 00:00:00 2001
From: Engincan VESKE <enginveske@gmail.com>
Date: Wed, 21 Sep 2022 14:51:13 +0300
Subject: [PATCH 12/12] Update index.js

---
 modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
index 51621c4d80..9bb18c8677 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
@@ -268,7 +268,7 @@
                 for (let i = 0; i < selectedTreeItems.length; i++)
                 {
                     var anchorItem = $(selectedTreeItems[i]).find("a");
-                    documentNodeNames.append('<li class="breadcrumb-item"><a href="' + anchorItem.attr("href") + '">' + anchorItem.html() + '</a></li>');
+                    documentNodeNames.append('<li class="breadcrumb-item ' + (i === selectedTreeItems.length - 1 ? "active": "") + '"><a href="' + anchorItem.attr("href") + '">' + anchorItem.html() + '</a></li>');
                 }
             }
         };