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] 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)';
-}