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..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 @@ -26,328 +26,363 @@ } @section styles { - - - - - - - + + + + + + + } + @section scripts { - - - - - - - - - - - - + + + + + + + + + + + + } + @if (Model.LoadSuccess) {
-
-
-
-
- +
-
+
+
+ @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1) + { +
- @if (Model.ShowProjectsCombobox && Model.ProjectSelectItems.Count > 1) - { -
-
-
- - - +
+ Project +
+
+ + + - -
+
- } - -
- @if (Model.VersionSelectItems.Any()) - { -
-
-
-
- - - - +
+
+ } + @if (Model.VersionSelectItems.Any()) + { +
+
+
+ @L["Version"] +
+
+ + + - -
-
+
- } +
+
- @if (Model.LanguageSelectListItems.Count > 1) - { -
-
-
-
- @* - - *@ - - -
-
+
- } -
- -
-
-
- - -
- - @if (Model.Navigation == null || !Model.Navigation.HasChildItems) - { -
- @L["NavigationDocumentNotFound"] -
- } - else - { - - }
+ } +
+
+
+
+ + + + +
- @if (Model.Document != null) + @if (Model.Navigation == null || !Model.Navigation.HasChildItems) { -
-
-
-
- @if (Model.FullSearchEnabled) - { -
-
- - - -
-
- } +
+ @L["NavigationDocumentNotFound"] +
+ } + else + { + + } +
+
+ + @if (Model.Document != null) + { +
+
+
+ + +
+
+ +
+
+
+ @if (Model.FullSearchEnabled) + { +
+
+ + + + + +
-
-
- @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0) + } +
+
+
+ @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0) + { +
+ + @L["Contributors"].Value + + + @if (string.IsNullOrEmpty(Model.Document.EditLink)) { - - @(L["Contributors"].Value) - - @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList()) - { - - Avatar - - } + + + @L["Edit"] + (@Model.Document.LastUpdatedTime.ToShortDateString()) + }
-
-
- @if (!string.IsNullOrEmpty(Model.Document.EditLink)) - { - - - @(L["Edit"]) - @L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString() - - } +
+ @foreach (var contributor in Model.Document.Contributors.OrderByDescending(c => c.CommitCount).ToList()) + { + + Avatar + + } +
+ } -
+
+
-
-
-
- @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any()) - { -
- - -

- - @L["MultipleVersionDocumentInfo"] -

- - - - @foreach (var parameter in Model.DocumentPreferences.Parameters) - { - -
- @(parameter.DisplayName) - -
- - } - -
- } +
+
+
+ @if (Model.DocumentPreferences != null && Model.DocumentPreferences.Parameters != null && Model.DocumentPreferences.Parameters.Any()) + { +
+ + +

+ + @L["MultipleVersionDocumentInfo"] +

+ + + + @foreach (var parameter in Model.DocumentPreferences.Parameters) + { +
+
+ @(parameter.DisplayName) + +
+
+ } +
+ } +
-
-
+
+
- @if (Model.DocumentLanguageCode != Model.LanguageCode) - { - - @L["DocumentNotFoundInSelectedLanguage"] - - } - @Html.Raw(Model.Document.Content) -
+ @if (Model.DocumentLanguageCode != Model.LanguageCode) + { + + @L["DocumentNotFoundInSelectedLanguage"] + + } + @Html.Raw(Model.Document.Content) +
- -
+
- -
- -
-
@L["InThisDocument"]
- - -
-
- @L["GoToTop"] +
+
+ + +
+
+
+
+
@L["InThisDocument"]
+ + +
- } - else - { -
-

@L["DocumentNotFound"]

+
+
+ } + else + { +
+

@L["DocumentNotFound"]

- - - @L["BackToWebsite"] - -
- } + + + @L["BackToWebsite"] +
+ }
} else @@ -355,28 +390,28 @@ else if (!Model.ProjectFound) { @(await Component.InvokeAsync(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(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 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..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 @@ -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('
  • ' + firstAnchor.html() + '
    • '); + + 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('
  • ' + anchorItem.html() + '
    • '); + } + } + }; + initNavigationFilter('sidebar-scroll'); initAnchorTags('.docs-page .docs-body'); @@ -261,5 +280,7 @@ initSocialShareLinks(); initSections(); + + initDocumentNodeBreadcrumb(); }); })(jQuery); 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..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 () { @@ -155,7 +161,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 47b071442f..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 @@ -1,680 +1,835 @@ -body { - position: relative; } - -a { - text-decoration: none; } +body { + position: relative; + background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%); +} +body .container { + max-width: 1680px !important; + padding: 0; +} +body a { + text-decoration: none; +} +body .btn-primary { + background-color: #b84297 !important; + font-size: 12px; +} +body .for-mobile { + display: none; +} +body .for-desktop { + display: inline-block; +} +body pre[class*=language-] { + padding: 1.4em 2em !important; + margin: 15px 0 25px !important; + border-radius: 12px; +} +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 { - 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; } - -.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label { + padding: 0 1rem; +} +.docs-page .docs-sidebar { + display: inline-block; + position: fixed; + top: 1rem; + bottom: 1rem; + left: auto; + border-radius: 12px; + 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; + color: #fff; + font-weight: 500; + padding: 15px 0 15px; + line-height: 1; + text-transform: uppercase; + white-space: unset; +} +.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: #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-top .navbar-logo .go-back-site:hover { + text-decoration: none; + opacity: 1; +} +.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; + color: rgba(255, 255, 255, 0.3); + border-radius: 8px; + 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-tree-list .docs-version input[type=search] { + background-color: #121212 !important; + min-height: 34px !important; + height: 34px !important; +} +.docs-page .docs-sidebar .docs-tree-list .docs-version span { + bottom: -5px; + position: relative; +} +.docs-page .docs-sidebar .docs-tree-list .docs-version .version-select { + border-radius: 3px; +} +.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; + height: 34px; + line-height: 1; + border-radius: 0px; + border: 0; + background: transparent; + top: 1px; +} +.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-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-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-tree-list .docs-version .version-select select.form-select { + padding: 0 0 2px 0; + background-image: none; +} +.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-tree-list .docs-version .version-select input.form-select::placeholder { + color: rgba(255, 255, 255, 0.3); +} +.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-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: #ddd; +} +.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-tree-list ul { + font-size: 14px; + list-style: none; + padding: 0 0 1em; + margin: 0; +} +.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-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: .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 { - color: #555; - padding: 7px 0; + font-weight: 500; + padding: 4px 0; display: block; - 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; } - -.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { + border-bottom: 0; +} +.docs-page .docs-sidebar .docs-tree-list ul li a:hover { color: #fff; +} +.docs-page .docs-sidebar .docs-tree-list ul li a.last-link { + top: 11px; + color: #aaa; +} +.docs-page .docs-sidebar .docs-tree-list ul li .badge { text-transform: uppercase; - white-space: unset; } - -.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site { - color: #fff; + font-size: 9px; + position: relative; + letter-spacing: 0.125px; + top: -2px; +} +.docs-page .docs-sidebar .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: 9px; + color: #aaa; + cursor: default; +} +.docs-page .docs-sidebar .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link { + color: #555; +} +.docs-page .docs-sidebar .docs-tree-list ul li .plus-icon .fa-chevron-right { + cursor: pointer; +} +.docs-page .docs-sidebar .docs-tree-list ul li ul { + padding: 0; +} +.docs-page .docs-sidebar .docs-tree-list ul li ul li a { + font-weight: 400; +} +.docs-page .docs-sidebar .docs-tree-list ul li ul li ul { + padding: 0; +} +.docs-page .docs-sidebar .docs-tree-list ul li ul li ul li a { + font-weight: 300; +} +.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > a { + color: #fff; + transition: 0.4s; +} +.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > span .fa { + transform: rotate(90deg); + color: #b84297; +} +.docs-page .docs-sidebar .docs-tree-list ul li.selected-tree.last-link > span .fa { + transform: rotate(0deg); +} +.docs-page .docs-content { + display: inline-block; + overflow-x: scroll; + min-height: 100vh; + width: calc(100% - 600px); + 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; + 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 nav .breadcrumb { + margin-bottom: 0; + flex-wrap: nowrap; + overflow-x: scroll; + white-space: nowrap; + padding-bottom: 10px; +} +.docs-page .docs-content .top-container nav .breadcrumb::-webkit-scrollbar { + display: none; +} +.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 nav .breadcrumb .breadcrumb-item a { + color: #838690; +} +.docs-page .docs-content .top-container nav .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: absolute; + right: 0; +} +.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; +} +.docs-page .docs-content .docs-link-btns a { + color: #3e9fcb; +} +.docs-page .docs-content .docs-link-btns a .text-muted { + color: rgba(11, 22, 33, 0.3) !important; +} +.docs-page .docs-content .docs-link-btns a:hover { + color: #3e9fcb; + text-decoration: none; +} +.docs-page .docs-content .docs-link-btns .search-area { + 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: transparent; + border: 0; + color: rgba(41, 45, 51, 0.5); + font-size: 1em; +} +.docs-page .docs-content .docs-link-btns .search-area .form-control { + background: transparent; + border: 0; + font-size: 1.1em; + padding-left: 0; + outline: 0; + box-shadow: none; +} +.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 .contributors: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 .docs-content-field article.docs-body { + word-break: break-word; +} +.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 .docs-content-field article.docs-body h2 { + padding-top: 2rem; + padding-bottom: 10px; + font-size: 2rem; +} +.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 .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 .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; + bottom: 5px; + color: #999; + opacity: 0; + transition: 0.5s; +} +.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 .docs-content-field article.docs-body .blockquote { + margin-bottom: 1rem; + margin-left: 0; + border-left: 3px solid rgba(184, 66, 151, 0.3); + padding: 1em 1.5em; + background-color: rgba(184, 66, 151, 0.15); + font-size: 1em; + border-radius: 12px; +} +.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 .docs-content-field article.docs-body table { display: block; + overflow: auto; 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 .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; } } - -.for-mobile { - display: none; } - -.for-desktop { - display: inline-block; } - -pre[class*="language-"] { - padding: 1.4em 2em !important; - margin: 15px 0 25px !important; - border-radius: 6px; } - -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: #191919 !important; } - -div.code-toolbar > .toolbar span { - cursor: default; } - -div.code-toolbar > .toolbar a { - cursor: copy; } - -.logo-nav ul { - width: 300px !important; } +} +.docs-page .docs-content .docs-content-field article.docs-body table thead tr { + border-bottom: 2px inset; +} +.docs-page .docs-content .docs-content-field article.docs-body table th { + font-weight: 600; +} +.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 .docs-content-field article.docs-body table tr { + background-color: #fff; + border-top: 1px solid #c6cbd1; +} +.docs-page .docs-content .docs-content-field article.docs-body table tr:nth-child(2n) { + background-color: #f6f8fa; +} +.docs-page .docs-content .docs-content-field article.docs-body table img { + background-color: initial; +} +.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; +} +.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 .docs-content .docs-content-field .custom-input-group .form-select { + border: none; + padding: 0; + background-color: transparent; + background-position: right top; +} +.docs-page .docs-content .docs-content-field .custom-input-group .form-select:focus { + box-shadow: none !important; +} +.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); + z-index: 3; +} +.docs-page .docs-content .docs-content-field .alert-criteria p.alert-p { + font-size: 0.96em; +} +.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 .docs-inner-anchors { + position: fixed; + 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; + 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 #b84297; + background: none; + color: #b84297; + font-weight: normal; +} +.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active { + color: #b84297; +} +.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active { + color: #b84297; +} +.docs-page .docs-page-index .docs-inner-anchors .index-scroll { + margin-left: -30px; +} +.docs-page .docs-page-index #scroll-index { + max-height: 90vh; +} +.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 .docs-page-index .card { + background-color: #fff; + 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 { + background-color: transparent; + border-bottom: none; + color: #0b1621; +} +.docs-page .docs-page-index .card .card-header h5 { + font-size: 19px; +} +.docs-page .docs-page-index .card .card-body { + font-size: 13px; + padding: 1.75em; +} +.docs-page .docs-page-index .card .card-footer { + padding: 0; + background-color: transparent; + border: none; +} +.docs-page .docs-page-index .card .btn { + font-size: 12px; +} @media (max-width: 767px) { body { - font-size: 14px; } - .for-mobile { - display: inline-block; } - .for-desktop { - display: none; } - .close-mmenu, .close-dmenu { + font-size: 14px; + } + body .for-mobile { + display: inline-block; + } + body .for-desktop { + display: none; + } + body .close-mmenu, +body .close-dmenu { position: absolute; top: -78px; left: 25px; color: #fff; font-size: 68px; background: #fff; - 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; } - .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; } } + opacity: 0; + } + body.scrolledMore .alert-criteria { + top: 72px !important; + } -@media screen and (max-width: 767px) { - .navbar-logo .navbar-brand { + .docs-page { + padding: 0 0; + } + .docs-page .docs-sidebar { + position: fixed; + max-width: 100%; + width: 100% !important; + display: block; + padding: 0 !important; + top: 0 !important; + left: 0; + z-index: 100; + right: 0; + margin: 0 !important; + height: 72px; + border-radius: 0; + } + .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.navbar-logo .navbar-brand { display: inline-block; + font-size: 1.25rem; + padding: 10px 0 15px; margin: 0 auto !important; max-width: 70%; overflow: hidden; text-overflow: ellipsis; - 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; } } - .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 { + white-space: nowrap; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-brand .docs-logo { + width: 110px; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .go-back-site { + display: none; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-logo-desc { + font-size: 1em; + display: none; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse { + background: #38003d; position: fixed; - top: 0; - z-index: 10; + top: 86px; + left: 0; + width: 100%; + height: 100vh; + height: calc(100vh - 86px); + z-index: 100 !important; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse .navbar-nav { + height: 100vh; + padding: 20px 30px; + overflow: auto; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse .navbar-nav .nav-link { + padding: 1.2rem !important; + } + .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-toggler { + padding: 0.5rem 0.75rem; + font-size: 1.5rem; + line-height: 1; + background-color: transparent; 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; } + border-radius: 0.25rem; + color: #fff !important; + margin-left: -1rem; + } + .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%); + } + .docs-page .docs-content .docs-content-field span.code-arrow { + padding: 0px 0 0px; + display: block; + transform: rotate(90deg); + font-size: 2em; + } + .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 (max-width: 992px) { + .docs-page .docs-content .top-container nav { + padding-right: 0; + } + .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; + } +} -.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 new file mode 100644 index 0000000000..717cd75fdf --- /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":"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 c678d177e2..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 @@ -1,232 +1,357 @@ +$gap-x-size: 1.75em; +$gap-y-size: 1rem; + body { position: relative; -} -a { text-decoration: none;} + background: linear-gradient(270deg, #f7f7f7 0%, #fff 50%, #f7f7f7 100%); -.docs-page { - background: rgb(245, 247, 249); + .container { + max-width: 1680px !important; + padding: 0; + } - .anchorjs-link { - transition: all .25s linear; + a { + text-decoration: none; } - *:hover > .anchorjs-link { - margin-left: -1.125em !important; - transition: color .25s linear; - color: gray; + .btn-primary { + background-color: #b84297 !important; + font-size: 12px; } - .anchorjs-link:hover { - text-decoration: none; + .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; + } + + 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)'; + } + + &.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 { - padding-right: 1rem; - position: relative; - top: 0px; - left: 0; + display: inline-block; position: fixed; - background: #1d1d1d; + top: $gap-y-size; + bottom: $gap-y-size; + left: auto; + border-radius: 12px; + background: #211e1e; + padding: 0.5rem $gap-x-size; + width: 300px; + transition: top 0.3s; + -webkit-transition: top 0.3s; - .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; - float: right; + 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; - padding: 0 1rem; - margin: .25rem 0; + font-size: 12px; + background-color: #121212; + color: rgb(255 255 255 / 30%); + border-radius: 8px; + 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 { + border-radius: 5px; + overflow: hidden; + } + .input-group-text { - padding: 0 12px; - font-size: .9rem; - width: 30px; + padding: 0 0; + font-size: 0.75rem; + width: 15px; height: 34px; line-height: 1; border-radius: 0px; border: 0; - background: #000; + background: transparent; + top: 1px; 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; + background-color: transparent; + color: rgb(255 255 255 / 70%); - &: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; + } + input.form-select { + background-color: transparent; + color: rgb(255 255 255 / 70%); + + &::placeholder { + color: rgb(255 255 255 / 30%); + } } - } - } - .docs-filter { - padding: 0 1rem; - margin: .5rem 0; - font-size: .9em; + input.form-control { + border: 0; - .filter-icon { + &:focus, + &:active, + &:hover, + &:visited { + box-shadow: none; + } + } - i.fa { + label { + background: #000000; + border-color: #000000; color: #ddd; } } } - .docs-tree-list { - height: 100vh; + > ul { + display: block; + height: calc(100vh - 310px); + overflow-y: auto; + margin-right: -4px !important; + margin-top: 20px !important; + } - > ul { - display: block; - height: calc(100vh - 230px); - overflow-y: auto; - margin-right: 12px !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 1rem 1rem; - 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; - - - a { - color: #999; - font-weight: 700; - padding: 7px 0; - display: block; - border-bottom: 0; - - &:hover { - color: #000; - } - - &.last-link { - top: 11px; - color: #aaa; - } - } - - .badge { - text-transform: uppercase; - font-size: 9px; - position: relative; - letter-spacing: .125px; - top: -2px; - } + border-bottom: 0; - span.tree-toggle { - color: #999; - padding: 7px 0; - display: block; - border-bottom: 0; + &:hover { + color: #fff; } - .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; + &.last-link { top: 11px; color: #aaa; - cursor: default; + } + } - .fa-long-arrow-right { - &.no-link { - color: #555; - } - } + .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; - .fa-chevron-right { - cursor: pointer; + .fa-long-arrow-right { + &.no-link { + color: #555; } } - ul { - padding: 0; + .fa-chevron-right { + cursor: pointer; + } + } - li { + ul { + padding: 0; - 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: .4s; + > span { + .fa { + transform: rotate(90deg); + color: #b84297; } + } + &.last-link { > span { .fa { - transform: rotate(90deg); - color: #007bff; - } - } - - &.last-link { - > span { - .fa { - transform: rotate(0deg); - } + transform: rotate(0deg); } } } @@ -234,295 +359,333 @@ a { text-decoration: none;} } } } + } + .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; + + &::-webkit-scrollbar { + display: none; + } - .docs-top { - padding: 0 1em; - - .navbar-logo { - .navbar-brand { - font-size: 1.35rem; - color: #000; - font-weight: 700; - padding: 15px 0 15px; - line-height: 1; - - strong { - font-weight: 300; - text-transform: uppercase; - font-size: .7em; - letter-spacing: 1px; - } - } + .top-container { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #eaeaea; + margin: 0 $gap-x-size; + position: relative; - .go-back-site { - color: #000; - opacity: .65; - transition: .2s; - font-size: .8em; - font-weight: 300; + nav { + padding-right: 150px; + .breadcrumb { + margin-bottom: 0; + flex-wrap: nowrap; + overflow-x: scroll; + white-space: nowrap; + padding-bottom: 10px; - &:hover { - text-decoration: none; - opacity: 1; + &::-webkit-scrollbar { + display: none; } - } - .navbar-logo-desc { - font-size: .85em; - - strong { - display: block; + .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; + } } } } - } - } - - .docs-content { - overflow-x: scroll; - min-height: 100vh; - - .contributors { - position: absolute; - top: 15px; - right: 5px; - - .contributors-avatar { - border-radius: 21px; - width: 21px; - height: 21px; - } - a { - padding: 0; - width: 21px; - height: 21px; - display: inline-block; - margin: 0 0 0 2px; + .doc-social-btns { + color: rgb(11 22 33 / 50%); + white-space: nowrap; + top: -2px; + position: absolute; + right: 0; - &:hover { + small { + font-size: 13px; + } + a:hover { text-decoration: none; } + + .share-button { + color: rgb(11 22 33 / 50%); + margin-left: 10px; + } } } .docs-link-btns { - background: #f5f7fa; - padding: 15px 30px; - margin: 0 -15px; - text-align: right; - font-size: .8em; - min-height: 48px; + font-size: 0.8em; + padding: 0 $gap-x-size; 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; } } - } - .docs-text-field { - padding: 2rem; - } + .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; + + img { + width: 32px; + height: 32px; + margin-left: -12px; + display: inline-block; + border: 2px solid #fff; + transition: 0.2s; + -webkit-transition: 0.2s; + } + } - h1 { - padding-top: 1rem; - font-size: 2.25rem; - padding-bottom: 10px; + .contributors:hover { + a.cont-avatar { + img { + margin-left: -8px; + } + } + } } + } - h2 { - padding-top: 2rem; - padding-bottom: 10px; - font-size: 2rem; + .docs-content-field { + .docs-text-field { + padding: 1.5em; } - h3, h4, h5, h6 { - padding-top: 20px; - padding-bottom: 5px; - font-size: 1.5rem; - } + article.docs-body { + word-break: break-word; - h1, h2, h3, h4, h5, h6 { - position: relative; + h1 { + padding-top: 1rem; + font-size: 2.25rem; + padding-bottom: 10px; + } - .anchor { - position: absolute; - right: -26px; - font-size: 18px; - bottom: 5px; - color: #999; - opacity: 0; - transition: .5s; + h2 { + padding-top: 2rem; + padding-bottom: 10px; + font-size: 2rem; } - &:hover { + h3, + h4, + h5, + h6 { + padding-top: 20px; + padding-bottom: 5px; + font-size: 1.5rem; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + .anchor { - opacity: 1; + position: absolute; + right: -26px; + font-size: 18px; + bottom: 5px; + color: #999; + opacity: 0; + transition: 0.5s; + } + + &:hover { + .anchor { + opacity: 1; + } } } - } - .blockquote { - margin-bottom: 1rem; - margin-left: 0; - border-left: 3px solid #d2dbe4; - padding: 1em 1.5em; - background-color: #e9edf1; - padding-bottom: .2em; - font-size: 1em; - } + .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; + } - img { - max-width: 100%; - border: 1px solid #f4f5f7; - margin: 15px 0 25px; - box-shadow: 0 0 45px #f8f9fa; - border-radius: 6px; - } + img { + max-width: 100%; + border: 1px solid #f4f5f7; + margin: 15px 0 25px; + box-shadow: 0 0 45px #f8f9fa; + border-radius: 12px; + } + table { + display: block; + overflow: auto; + width: 100%; - table { - display: block; - overflow: auto; - width: 100%; + thead { + tr { + border-bottom: 2px inset; + } + } + + th { + font-weight: 600; + } + + td, + th { + border: 1px solid #dfe2e5; + padding: 6px 13px; + } - thead { tr { - border-bottom: 2px inset; + background-color: #fff; + border-top: 1px solid #c6cbd1; } - } - th { - font-weight: 600 - } + tr:nth-child(2n) { + background-color: #f6f8fa; + } - td, th { - border: 1px solid #dfe2e5; - padding: 6px 13px + img { + background-color: initial; + } } + } - tr { - background-color: #fff; - border-top: 1px solid #c6cbd1 + .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%); } - - tr:nth-child(2n) { - background-color: #f6f8fa + .form-select { + border: none; + padding: 0; + background-color: transparent; + background-position: right top; + &:focus { + box-shadow: none !important; + } } + } - img { - background-color: initial + .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); + z-index: 3; + + p.alert-p { + font-size: 0.96em; } } - } - } - - .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; - } + .anchorjs-link { + transition: all 0.25s linear; + -webkit-transition: all 0.25s linear; - .email { - color: #5a5a5a; - } + &:hover { + text-decoration: none; + } + } - .share-button { - margin-left: 10px; - } - } - - .cont-container { - a.cont-avatar { - position: relative; - - 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; - } - } - - &:hover { - a.cont-avatar { - img { - margin-left: -2px; - } - } + *:hover > .anchorjs-link { + margin-left: -0.8em !important; + transition: color 0.25s linear; + color: gray; + } } } .docs-page-index { - min-height: 90vh; - background-color: #f5f7fa !important; - - #scroll-index { - max-height: 90vh; - } + display: inline-block; + position: absolute; .docs-inner-anchors { position: fixed; - top: 50px; - padding: 10px; - font-size: .90em; + z-index: 2; + top: $gap-y-size; + font-size: 0.9em; + transition: top 0.3s; + -webkit-transition: top 0.3s; .navbar { .nav-pills { - font-size: .92em; + font-size: 0.92em; margin-left: 15px; border-left: 1px solid #eee; @@ -536,13 +699,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 #b84297; background: none; - color: #007bff; + color: #b84297; font-weight: normal; } } @@ -550,14 +713,14 @@ a { text-decoration: none;} .nav-pills { .nav-link { &.active { - color: #007bff; + color: #b84297; } } .nav-pills { .nav-link { &.active { - color: #007bff; + color: #b84297; } } } @@ -568,17 +731,15 @@ a { text-decoration: none;} .index-scroll { margin-left: -30px; } - - .docs-anchors-wrapper { - max-width: 300px; - float: left; - } } + #scroll-index { + max-height: 90vh; + } .scroll-top-btn { display: none; - font-size: .85em; + font-size: 0.85em; color: #aaa; text-decoration: none; padding-left: 18px; @@ -587,276 +748,103 @@ a { text-decoration: none;} display: block; } } - } -} - - -.docs-page { - .docs-sidebar { - .docs-sidebar-wrapper { - - .docs-version { - .version-select { - - select.form-select, input.form-control { - background: #000000; - color: white; - } - - input.form-control { - background: #000000; - color: white; - - &::placeholder { - color: white; - opacity: .5; - } - } - label { - background: #000000; - border-color: #000000; - color: #ddd; - } + .card { + background-color: #fff; + 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 { + background-color: transparent; + border-bottom: none; + color: #0b1621; + h5 { + font-size: 19px; } } - - .docs-filter { - .form-control { - background: #333; - color: #999; - } - - select { - border: 0; - border-radius: 6px; - } - - .filter-icon { - i.fa { - color: #aaa; - } - } + .card-body { + font-size: 13px; + padding: $gap-x-size; } - - .docs-tree-list { - ul { - li { - - - a { - color: #aaa; - border-bottom: 0; - - &:hover { - color: #fff; - } - - .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; - - .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: .4s; - - span { - .fa { - color: #fff; - } - - &:not(.last-link) .fa { - transform: rotate(90deg); - color: #fff; - } - } - } - } - } - } + .card-footer { + padding: 0; + background-color: transparent; + border: none; } - } - - .docs-top { - .navbar-logo { - .navbar-brand { - color: #fff; - text-transform: uppercase; - white-space: unset; - } - .go-back-site { - color: #fff; - text-align: center; - display: block; - width: 100%; - background: #444; - padding: 6px 0 8px; - border-radius: 5px; - } - - .navbar-logo-desc { - color: #ddd; - } + .btn { + font-size: 12px; } } } } +@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; + } - - - - - - - - - - - - - - - - - - - - - - -@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 .docs-content article.docs-body h1 { - padding-top: 1.5rem; - } - - .docs-page { - > .container-fluid { - display: block; - - > .row { - display: block; + &.scrolledMore { + .alert-criteria { + top: 72px !important; } } + } - background: rgb(245, 247, 249); + .docs-page { + padding: 0 0; .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 { - max-width: 100%; - width: 100%; - top: 0px; - position: relative; - margin: 0 !important; - height: 72px; - - .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-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: .3rem; + padding-top: 0.3rem; display: block; text-align: center; .navbar-brand { + display: inline-block; font-size: 1.25rem; - font-weight: 700; - 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; @@ -871,252 +859,176 @@ a { text-decoration: none;} 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 { - padding-top: 72px; - 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; } - } - - .docs-page-index { - display: none; - } - } -} - - -.for-mobile { - display: none; -} - -.for-desktop { - display: inline-block; -} - -pre[class*="language-"] { - padding: 1.4em 2em !important; - margin: 15px 0 25px !important; - border-radius: 6px; -} - -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: #191919 !important; -} - - -div.code-toolbar > .toolbar span { - cursor: default; -} - -div.code-toolbar > .toolbar a { - cursor: copy; -} - -.logo-nav ul { - width: 300px !important; -} - -@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; - } - .navbar { - padding: .5rem 1.75rem; + .docs-link-btns { + padding: 0 1.5rem; + } - .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; + .docs-content-field { + article.docs-body h1 { + padding-top: 1.5rem; + } + .docs-text-field { + padding: 1rem 1.5rem; + } - .navbar-nav { - height: 100vh; - padding: 20px 30px; - overflow: auto; + .section-with-logos img { + margin: 15px; + opacity: 1; + -webkit-filter: grayscale(0%); + filter: grayscale(0%); + } - .nav-link { - padding: 1.2rem !important; + span.code-arrow { + padding: 0px 0 0px; + display: block; + transform: rotate(90deg); + font-size: 2em; } } } - .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; - } - } - - .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; - } -} + .docs-page-index { + position: relative; + width: 100%; + padding: 0 $gap-x-size $gap-x-size; + .docs-inner-anchors { + position: relative; + top: auto; + } + } + > .container-fluid { + 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; + > .row { + display: block; + } } } } - - -.alert-criteria { - padding: 1.25em 1.5em; - max-width: 100%; - - p.alert-p { - font-size: .96em; - } - - .input-group { - .input-group-text, .form-control { - font-size: .96em; - - @media screen and (max-width: 767px) { - font-size: .88em; +@media (max-width: 992px) { + .docs-page { + .docs-content { + .top-container { + nav { + padding-right: 0; + } + .doc-social-btns { + display: none; + } } - } - - .input-group-text { - color: #004085; - background-color: #bddcfd; - border: 1px solid #bddcfd; - - - @media screen and (max-width: 1366px) { - display: none; + .docs-link-btns { + .cont-container { + a.cont-avatar { + img { + width: 24px; + height: 24px; + } + } + } } } + } +} - .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; +@media (max-width: 1200px) { + .docs-page { + .docs-content { + width: calc(100% - 300px); + } + .docs-page-index { + .card { + width: 100%; } } } } -.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; - } +@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; - p.alert-p { - display: none; + .docs-inner-anchors { + position: relative; + top: auto; + padding: 0 $gap-x-size; + } } } } - -.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, -.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { - opacity: 1 !important; - filter: "alpha(opacity=1)"; - -ms-filter: "alpha(opacity=1)"; -}