tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Resolved #3238

pull/3398/head
Armağan Ünlü 7 years ago
parent
16bd93c72d
commit
6239fcd585
5 changed files with 384 additions and 326 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
  2. 88
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml
  3. 240
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
  4. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
  5. 349
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

31
modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
View File

@ -68,7 +68,7 @@
} }
<div class="for-mobile"> <div class="for-mobile">
<div class="navbar-light"> <div class="navbar-dark">
<button type="button" class="open-dmenu navbar-toggler" aria-label="Close"> <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -108,7 +108,7 @@
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text"> <label class="input-group-text">
<i class="fa fa-check-square-o" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i> <i class="fas fa-code-branch" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i>
</label> </label>
</div> </div>
@ -124,15 +124,15 @@
@if (Model.LanguageSelectListItems.Count > 1) @if (Model.LanguageSelectListItems.Count > 1)
{ {
<div class="col @(Model.VersionSelectItems.Any()?"pl-0":"")"> <div class="col-5 @(Model.VersionSelectItems.Any()?"pl-0":"")">
<div class="docs-version docs-language @(Model.VersionSelectItems.Any()?"pl-1":"")"> <div class="docs-version docs-language @(Model.VersionSelectItems.Any()?"pl-1":"")">
<div class="version-select"> <div class="version-select">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> @*<div class="input-group-prepend">
<label class="input-group-text"> <label class="input-group-text">
<i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i> <i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
</label> </label>
</div> </div>*@
<select asp-items="Model.LanguageSelectListItems" <select asp-items="Model.LanguageSelectListItems"
class="form-control" class="form-control"
onchange="window.location.replace(this.value)"> onchange="window.location.replace(this.value)">
@ -163,11 +163,11 @@
@if (Model.FullSearchEnabled) @if (Model.FullSearchEnabled)
{ {
<div class="docs-version mb-4"> <div class="docs-version mt-2 mb-4">
<div class="version-select"> <div class="version-select">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text"><i class="fa fa-filter"></i></label> <label class="input-group-text"><i class="fa fa-search"></i></label>
</div> </div>
<input class="form-control" <input class="form-control"
@ -224,7 +224,9 @@
@if (!string.IsNullOrEmpty(Model.Document.EditLink)) @if (!string.IsNullOrEmpty(Model.Document.EditLink))
{ {
<a href="@Model.Document.EditLink" target="_blank"> <a href="@Model.Document.EditLink" target="_blank">
<i class="fa fa-edit"></i> @(L["Edit"]) (@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()) <i class="fa fa-edit"></i>
@(L["Edit"])
<span class="for-desktop">(@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString())</span>
</a> </a>
} }
</div> </div>
@ -232,20 +234,21 @@
<div class="float-right mr-3"> <div class="float-right mr-3">
@if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0) @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
{ {
@(L["Contributors"].Value + " :") <span class="for-desktop">
@(L["Contributors"].Value + " :") </span>
@foreach (var contributor in Model.Document.Contributors) @foreach (var contributor in Model.Document.Contributors)
{ {
<a href="@contributor.UserProfileUrl" target="_blank"> <a href="@contributor.UserProfileUrl" target="_blank">
<img src="@contributor.AvatarUrl" <img src="@contributor.AvatarUrl"
class="rounded-circle" class="rounded-circle"
alt="Avatar" alt="Avatar"
height="21" height="21"
width="21" width="21"
title="@contributor.Username" /> title="@contributor.Username" />
</a> </a>
} }
} }
</div> </div>
</div> </div>

88
modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml
View File

@ -15,53 +15,73 @@
<style> <style>
highlight { highlight {
font-weight: bold; font-weight: bold;
color: red; color: #212529;
font-style: italic; background: #f9efa6;
padding: 0 3px;
border-radius: 3px;
}
body {
background-color: rgba(0, 0, 0, 0.03);
} }
</style> </style>
} }
<div class="container"> <div class="container mb-5">
<form method="get" action="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/" class="mt-4"> <form method="get" action="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/" class="mt-4">
<input type="text" asp-for="@Model.KeyWord" class="form-control" /> <h4 class="text-center my-3">Search in Documents</h4>
<button type="submit" class="btn-block btn-primary btn-lg mt-3">Search</button> <div class="card rounded">
<div class="p-3 bg-white">
<div class="form-row">
<div class="col"><input type="text" asp-for="@Model.KeyWord" class="form-control" /></div>
<div class="col-auto"><button type="submit" class="btn btn-primary px-md-5">Search</button></div>
</div>
</div>
</div>
</form> </form>
<div class="my-3 p-3 bg-white rounded"> <div class="card mt-4 rounded">
<h6 class="border-bottom pb-4 mb-0">Search results</h6> <div class="card-header">
<h5 class="text-center ">Search Results</h5>
@foreach (var docs in Model.SearchOutputs) </div>
{ <div class="p-5 card-body">
<div class="media text-muted pt-3"> @foreach (var docs in Model.SearchOutputs)
<div class="media-body pb-3 mb-0 small border-bottom"> {
<div class="list-group"> <div class="media text-muted">
<div class="media-body pb-3 small">
<div class="list-group">
@functions @functions
{
string RemoveFileExtensionFromPath(string path)
{
if (path == null)
{ {
return null; string RemoveFileExtensionFromPath(string path)
} {
if (path == null)
{
return null;
}
return path.EndsWith("." + @Model.Project.Format) return path.EndsWith("." + @Model.Project.Format)
? path.Left(path.Length - Model.Project.Format.Length - 1) ? path.Left(path.Length - Model.Project.Format.Length - 1)
: path; : path;
}
} }
}
<a href="/@Model.LanguageCode/@Model.ProjectName/@Model.Version/@RemoveFileExtensionFromPath(docs.Name)">
<h3>@RemoveFileExtensionFromPath(docs.Name)</h3></a>
@foreach (var highlight in docs.Highlight)
{
<p class="list-group-item list-group-item-action">@Html.Raw(highlight)</p>
}
<h5 class="mb-3">
<a href="/@Model.LanguageCode/@Model.ProjectName/@Model.Version/@RemoveFileExtensionFromPath(docs.Name)">
@RemoveFileExtensionFromPath(docs.Name)
</a>
</h5>
<div class="mb-4">
@foreach (var highlight in docs.Highlight)
{
<p class=" ">@Html.Raw(highlight)</p>
}
</div>
</div>
</div> </div>
</div> </div>
</div> }
} </div>
</div> </div>
</div> </div>

240
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
View File

@ -10,21 +10,21 @@
transition: color .25s linear; transition: color .25s linear;
color: gray; } color: gray; }
.docs-page .anchorjs-link:hover { .docs-page .anchorjs-link:hover {
color: #007bff;
text-decoration: none; } text-decoration: none; }
.docs-page .docs-sidebar { .docs-page .docs-sidebar {
background: #f5f7f9;
padding-right: 1rem; padding-right: 1rem;
position: relative; position: relative;
top: 0px; top: 0px;
left: 0; left: 0;
position: fixed; } position: fixed;
background: #1d1d1d; }
.docs-page .docs-sidebar .input-group {
border-radius: 5px;
overflow: hidden; }
.docs-page .docs-sidebar .docs-sidebar-wrapper { .docs-page .docs-sidebar .docs-sidebar-wrapper {
width: 270px; width: 270px;
float: right; } float: right; }
.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control { .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control {
background: none;
background: #fff;
border: 0; } 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 { .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; } box-shadow: none; }
@ -33,27 +33,28 @@
padding: 0 1rem; padding: 0 1rem;
margin: .25rem 0; } margin: .25rem 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
border-radius: 3px; border-radius: 3px; }
border: 1px solid #e9ecef; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
padding: 0.375rem 0.6rem; padding: 0 10px;
font-size: .9rem; font-size: .9rem;
width: 32px; width: 26px;
height: 30px; height: 34px;
line-height: 1; line-height: 1;
border-radius: 0px; border-radius: 0px;
border: 1px solid #e9ecef; } border: 0; }
.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-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
padding: 0 10px; padding: 0 10px 2px 10px;
border: 0; border: 0;
min-height: 30px; min-height: 34px;
height: 30px; height: 34px;
font-size: .85em; font-size: .9em;
border-radius: 1px; } border-radius: 0px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
box-shadow: none; } box-shadow: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control {
padding-left: 6px; } padding: 0 10px 2px 6px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0; margin: .5rem 0;
@ -64,7 +65,7 @@
height: 100vh; } height: 100vh; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
display: block; display: block;
height: calc(100vh - 220px); height: calc(100vh - 320px);
overflow-y: auto; } overflow-y: auto; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
font-size: .935em; font-size: .935em;
@ -88,6 +89,12 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
top: 11px; top: 11px;
color: #aaa; } 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 { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #999; color: #999;
padding: 7px 0; padding: 7px 0;
@ -129,10 +136,10 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
transform: rotate(0deg); } transform: rotate(0deg); }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
font-size: 1.5rem; font-size: 1.35rem;
color: #000; color: #000;
font-weight: 700; font-weight: 700;
padding: 20px 0 10px; padding: 15px 0 15px;
line-height: 1; } line-height: 1; }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong {
font-weight: 300; font-weight: 300;
@ -153,7 +160,8 @@
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong {
display: block; } display: block; }
.docs-page .docs-content { .docs-page .docs-content {
overflow-x: scroll; } overflow-x: scroll;
min-height: 100vh; }
.docs-page .docs-content .contributors { .docs-page .docs-content .contributors {
position: absolute; position: absolute;
top: 15px; top: 15px;
@ -222,10 +230,11 @@
.docs-page .docs-content article.docs-body .blockquote { .docs-page .docs-content article.docs-body .blockquote {
margin-bottom: 1rem; margin-bottom: 1rem;
margin-left: 0; margin-left: 0;
border-left: 2px solid gray; border-left: 3px solid #d2dbe4;
padding: 1em; padding: 1em 1.5em;
background-color: #eee; background-color: #e9edf1;
padding-bottom: .2em; } padding-bottom: .2em;
font-size: 1em; }
.docs-page .docs-content article.docs-body img { .docs-page .docs-content article.docs-body img {
max-width: 100%; max-width: 100%;
border: 1px solid #f4f5f7; border: 1px solid #f4f5f7;
@ -257,10 +266,8 @@
.docs-page .docs-page-index .docs-inner-anchors { .docs-page .docs-page-index .docs-inner-anchors {
position: fixed; position: fixed;
top: 0px; top: 0px;
/* max-width: 270px; */
padding: 10px; padding: 10px;
font-size: .90em; font-size: .90em; }
/* height: 100vh; */ }
.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills { .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
font-size: .92em; font-size: .92em;
margin-left: 15px; margin-left: 15px;
@ -300,83 +307,95 @@
.docs-page .docs-page-index .scroll-top-btn.showup { .docs-page .docs-page-index .scroll-top-btn.showup {
display: block; } display: block; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .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 {
background: #000000;
border-color: #000000;
color: #ddd; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
background: #333;
color: #999; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select {
border: 0;
border-radius: 6px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
color: #aaa; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
color: #aaa;
border-bottom: 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
color: #fff; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
font-size: .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;
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 {
color: #fff;
text-transform: uppercase;
white-space: unset; }
.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site {
color: #fff;
text-align: center;
display: block;
width: 100%;
background: #444;
padding: 6px 0 8px;
border-radius: 5px; }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc {
color: #ddd; }
@media (min-width: 1100px) { @media (min-width: 1100px) {
.container { .container {
max-width: 1080px; } max-width: 1080px; } }
.docs-page .docs-sidebar.dark-sidebar {
background: #191919; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select {
border: 1px solid #333; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
background: #191919;
border-color: #191919;
color: #999; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
background: #191919;
border-color: #191919;
color: #999; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
color: #999;
opacity: .5; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
background: #333;
border-color: #333;
color: #ddd; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
background: #333;
color: #999; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select {
border: 0;
border-radius: 6px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
color: #aaa; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a {
color: #aaa;
border-bottom: 0; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
color: #fff; }
.docs-page .docs-sidebar.dark-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.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link {
color: #555; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right {
cursor: pointer; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 0; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #fff;
transition: .4s; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
color: #fff; }
.docs-page .docs-sidebar.dark-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.dark-sidebar .docs-top .navbar-logo .navbar-brand {
color: #fff;
text-transform: uppercase;
white-space: unset; }
.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .go-back-site {
color: #fff; }
.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-logo-desc {
color: #ddd; } }
@media (min-width: 1366px) { @media (min-width: 1366px) {
.container { .container {
@ -420,30 +439,21 @@
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
background: #f5f7f9; background: #1d1d1d;
display: none; } display: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
padding: 0 0 1rem !important; } padding: 0 0 1rem !important; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version label {
width: 36px;
text-align: center;
padding-left: 0;
padding-right: 0;
display: inline-block;
line-height: 26px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version input.form-control {
padding-left: 12px !important; }
.docs-page .docs-sidebar .docs-top .navbar-logo { .docs-page .docs-sidebar .docs-top .navbar-logo {
padding: 0rem; padding: 0rem;
padding-top: .3rem; padding-top: .3rem;
display: block; display: block;
text-align: center; } text-align: center; }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
display: block; display: block;
margin-right: 0em; margin-right: 0em;
padding: 7px 0 10px; padding: 10px 0 15px;
text-transform: uppercase; } text-transform: uppercase; }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo { .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo {
width: 110px; } width: 110px; }

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
View File

File diff suppressed because one or more lines are too long

349
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
View File

@ -16,19 +16,20 @@ body {
} }
.anchorjs-link:hover { .anchorjs-link:hover {
color: #007bff;
text-decoration: none; text-decoration: none;
} }
.docs-sidebar { .docs-sidebar {
background: #f5f7f9;
padding-right: 1rem; padding-right: 1rem;
position: relative; position: relative;
top: 0px; top: 0px;
left: 0; left: 0;
position: fixed; position: fixed;
background: #1d1d1d;
.docs-language {
.input-group {
border-radius: 5px;
overflow: hidden;
} }
.docs-sidebar-wrapper { .docs-sidebar-wrapper {
@ -36,8 +37,6 @@ body {
float: right; float: right;
input.form-control { input.form-control {
background: none;
background: #fff;
border: 0; border: 0;
&:focus, &:active, &:hover, &:visited { &:focus, &:active, &:hover, &:visited {
@ -52,25 +51,28 @@ body {
.version-select { .version-select {
border-radius: 3px; border-radius: 3px;
border: 1px solid #e9ecef;
.input-group-text { .input-group-text {
padding: 0.375rem 0.6rem; padding: 0 10px;
font-size: .9rem; font-size: .9rem;
width: 32px; width: 26px;
height: 30px; height: 34px;
line-height: 1; line-height: 1;
border-radius: 0px; border-radius: 0px;
border: 1px solid #e9ecef; border: 0;
i {
color: #666;
}
} }
select.form-control, input.form-control { select.form-control, input.form-control {
padding: 0 10px; padding: 0 10px 2px 10px;
border: 0; border: 0;
min-height: 30px; min-height: 34px;
height: 30px; height: 34px;
font-size: .85em; font-size: .9em;
border-radius: 1px; border-radius: 0px;
&:focus, &:active, &:hover, &:visited { &:focus, &:active, &:hover, &:visited {
box-shadow: none; box-shadow: none;
@ -78,10 +80,7 @@ body {
} }
select.form-control { select.form-control {
padding-left: 6px; padding: 0 10px 2px 6px;
}
label {
} }
} }
} }
@ -104,7 +103,7 @@ body {
> ul { > ul {
display: block; display: block;
height: calc(100vh - 220px); height: calc(100vh - 320px);
overflow-y: auto; overflow-y: auto;
} }
@ -139,6 +138,14 @@ body {
} }
} }
.badge {
text-transform: uppercase;
font-size: 9px;
position: relative;
letter-spacing: .125px;
top: -2px;
}
span.tree-toggle { span.tree-toggle {
color: #999; color: #999;
padding: 7px 0; padding: 7px 0;
@ -224,16 +231,16 @@ body {
.docs-top { .docs-top {
.navbar-logo { .navbar-logo {
.navbar-brand { .navbar-brand {
font-size: 1.5rem; font-size: 1.35rem;
color: #000; color: #000;
font-weight: 700; font-weight: 700;
padding: 20px 0 10px; padding: 15px 0 15px;
line-height: 1; line-height: 1;
strong { strong {
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
font-size: .7em; font-size: .7em;
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
@ -264,6 +271,7 @@ body {
.docs-content { .docs-content {
overflow-x: scroll; overflow-x: scroll;
min-height: 100vh;
.contributors { .contributors {
position: absolute; position: absolute;
@ -372,10 +380,11 @@ body {
.blockquote { .blockquote {
margin-bottom: 1rem; margin-bottom: 1rem;
margin-left: 0; margin-left: 0;
border-left: 2px solid gray; border-left: 3px solid #d2dbe4;
padding: 1em; padding: 1em 1.5em;
background-color: #eee; background-color: #e9edf1;
padding-bottom: .2em padding-bottom: .2em;
font-size: 1em;
} }
img { img {
@ -433,10 +442,9 @@ body {
.docs-inner-anchors { .docs-inner-anchors {
position: fixed; position: fixed;
top: 0px; top: 0px;
/* max-width: 270px; */
padding: 10px; padding: 10px;
font-size: .90em; font-size: .90em;
/* height: 100vh; */
.navbar { .navbar {
.nav-pills { .nav-pills {
font-size: .92em; font-size: .92em;
@ -508,163 +516,189 @@ body {
} }
@media (min-width: 1100px) { .docs-page {
.container { .docs-sidebar {
max-width: 1080px; .docs-sidebar-wrapper {
}
.docs-page {
.docs-sidebar {
&.dark-sidebar {
background: #191919;
.docs-sidebar-wrapper {
.docs-version {
.version-select {
border: 1px solid #333;
select.form-control, input.form-control { .docs-version {
background: #191919; .version-select {
border-color: #191919;
color: #999;
}
input.form-control { select.form-control, input.form-control {
background: #191919; background: #000000;
border-color: #191919; color: white;
color: #999; }
&::placeholder { input.form-control {
color: #999; background: #000000;
opacity: .5; color: white;
}
}
label { &::placeholder {
background: #333; color: white;
border-color: #333; opacity: .5;
color: #ddd;
}
} }
} }
.docs-filter { label {
.form-control { background: #000000;
background: #333; border-color: #000000;
color: #999; color: #ddd;
} }
}
}
select { .docs-filter {
border: 0; .form-control {
border-radius: 6px; background: #333;
} color: #999;
}
.filter-icon { select {
i.fa { border: 0;
color: #aaa; border-radius: 6px;
} }
}
}
.docs-tree-list { .filter-icon {
ul { i.fa {
li { color: #aaa;
}
}
}
.docs-tree-list {
ul {
li {
a {
color: #aaa;
border-bottom: 0;
&:hover { a {
color: #fff; color: #aaa;
} border-bottom: 0;
.plus-icon { &:hover {
font-size: .85em; color: #fff;
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 { .plus-icon {
cursor: pointer; 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;
&.last-link { .fa-long-arrow-right {
top: 11px; &.no-link {
} color: #555;
} }
} }
.fa-chevron-right {
cursor: pointer;
}
span.tree-toggle { &.last-link {
color: #555; top: 11px;
padding: 7px 0;
display: block;
border-bottom: 0;
} }
}
}
&.selected-tree { span.tree-toggle {
> a { color: #555;
color: #fff; padding: 7px 0;
transition: .4s; display: block;
border-bottom: 0;
}
span {
.fa {
color: #fff;
}
&:not(.last-link) .fa { &.selected-tree {
transform: rotate(90deg); > a {
color: #fff; color: #fff;
} transition: .4s;
}
span {
.fa {
color: #fff;
}
&:not(.last-link) .fa {
transform: rotate(90deg);
color: #fff;
} }
} }
} }
} }
} }
} }
}
}
.docs-top { .docs-top {
.navbar-logo { .navbar-logo {
.navbar-brand { .navbar-brand {
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
white-space: unset; white-space: unset;
} }
.go-back-site { .go-back-site {
color: #fff; color: #fff;
} text-align: center;
display: block;
width: 100%;
background: #444;
padding: 6px 0 8px;
border-radius: 5px;
}
.navbar-logo-desc { .navbar-logo-desc {
color: #ddd; color: #ddd;
}
}
} }
} }
} }
} }
} }
@media (min-width: 1100px) {
.container {
max-width: 1080px;
}
}
@media (min-width: 1366px) { @media (min-width: 1366px) {
.container { .container {
max-width: 1340px; max-width: 1340px;
@ -720,7 +754,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
background: #f5f7f9; background: #1d1d1d;
display: none; display: none;
.docs-filter { .docs-filter {
@ -732,17 +766,6 @@ body {
} }
.docs-version { .docs-version {
label {
width: 36px;
text-align: center;
padding-left: 0;
padding-right: 0;
display: inline-block;
line-height: 26px;
}
input.form-control {
padding-left: 12px !important;
}
} }
} }
@ -754,11 +777,11 @@ body {
text-align: center; text-align: center;
.navbar-brand { .navbar-brand {
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
display: block; display: block;
margin-right: 0em; margin-right: 0em;
padding: 7px 0 10px; padding: 10px 0 15px;
text-transform: uppercase; text-transform: uppercase;
.docs-logo { .docs-logo {
@ -971,6 +994,7 @@ div.code-toolbar > .toolbar a {
background-color: #bddcfd; background-color: #bddcfd;
border: 1px solid #bddcfd; border: 1px solid #bddcfd;
@media screen and (max-width: 1366px) { @media screen and (max-width: 1366px) {
display: none; display: none;
} }
@ -1009,4 +1033,5 @@ div.code-toolbar > .toolbar a {
display: none; display: none;
} }
} }
} }
Write Preview
Loading…
Cancel
Save