Docs: optimize codeblock (#259)

Signed-off-by: Carson Yang <yangchuansheng33@gmail.com>
This commit is contained in:
Carson Yang
2023-09-06 09:53:37 +08:00
committed by GitHub
parent 139d0be52b
commit 45ba5e1e01
3 changed files with 229 additions and 188 deletions

View File

@@ -4,4 +4,21 @@
display: block !important;
margin: 0 auto !important;
border-radius: .25rem;
}
div.code-toolbar {
padding-top: 1.95rem !important;
}
.docs-content .main-content pre code::before {
background: #fc625d;
border-radius: 50%;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
content: ' ';
height: 12px;
left: 12px;
margin-top: -21px;
position: absolute;
width: 12px;
z-index: 1;
}

View File

@@ -9638,14 +9638,11 @@ img {
order: 1; }
.docs-content .main-content a {
font-weight: 600;
color: var(--content-link-color); }
.docs-content .main-content a:hover {
text-decoration: underline 2px var(--primary-200);
text-underline-offset: 2.5px !important;
transition: 0s !important; }
.docs-content .main-content a code {
color: var(--content-link-color); }
.docs-content .main-content #edit-this-page a:hover,
.docs-content .main-content #list-item a:hover {
@@ -9666,24 +9663,22 @@ img {
font-weight: 700;
color: var(--body-color); }
.docs-content .content-title {
font-weight: 700;
align-self: center; }
.docs-content .main-content a {
font-weight: 600; }
.docs-content .content-title {
font-weight: 700; }
.docs-content .content-title i {
width: 44px;
height: 44px;
color: var(--content-icon-color);
background-color: var(--content-icon-bg);
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 5px; }
i.title-icon {
width: 44px;
height: 44px;
color: var(--content-icon-color);
background-color: var(--content-icon-bg);
display: inline-flex !important;
align-self: center;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 5px; }
@media (max-width: 768px) {
i.title-icon {
align-self: auto; } }
.docs-content p.lead {
color: var(--text-muted);
font-weight: 400; }
@@ -9697,17 +9692,17 @@ i.title-icon {
.docs-content p.lead {
font-size: 1rem; } }
.docs-content .main-content img,
.docs-content .main-content svg {
max-width: 100%;
height: auto; }
.docs-content .main-content img {
max-width: 100%; }
.docs-content .main-content ul {
list-style: none;
line-height: 26px;
padding-left: 0; }
.docs-content .main-content ul > li {
.docs-content .main-content ul li {
position: relative;
padding-left: 32px; }
.docs-content .main-content ul > li::before {
.docs-content .main-content ul li::before {
content: "";
position: absolute;
width: 6px;
@@ -9718,12 +9713,13 @@ i.title-icon {
background: var(--gray-500); }
.docs-content .main-content ol {
counter-reset: listitem; }
.docs-content .main-content ol > li {
list-style: none;
line-height: 26px; }
.docs-content .main-content ol li {
counter-increment: listitem;
position: relative;
padding-left: 32px; }
.docs-content .main-content ol > li::before {
.docs-content .main-content ol li::before {
content: counter(listitem);
background: var(--ordered-list-bg);
color: var(--ordered-list-color);
@@ -9739,11 +9735,6 @@ i.title-icon {
left: 0;
top: 3px; }
.docs-content .main-content ol,
.docs-content .main-content ul {
list-style: none;
line-height: 26px; }
.docs-content .main-content blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
@@ -9761,7 +9752,7 @@ i.title-icon {
.docs-content .main-content code {
font-size: inherit;
color: var(--text-default);
font-weight: 400;
font-weight: 500;
padding: 1px 2px;
background: var(--inline-code-bg);
border: var(--inline-code-border);
@@ -9831,20 +9822,11 @@ i.title-icon {
overflow-y: overlay;
position: relative;
border-right: 1px solid var(--sidebar-border-color);
scrollbar-width: thin;
scrollbar-color: var(--sidebar-bg) var(--sidebar-bg); }
scrollbar-width: none; }
.page-wrapper .sidebar-wrapper .sidebar-content.desktop {
overflow-y: hidden; }
.page-wrapper .sidebar-wrapper .sidebar-content:hover {
scrollbar-color: var(--sidebar-scrollbar-thumb-color) var(--sidebar-bg); }
.page-wrapper .sidebar-wrapper .sidebar-content::-webkit-scrollbar {
width: 5px;
height: 8px; }
.page-wrapper .sidebar-wrapper .sidebar-content::-webkit-scrollbar-track {
background: var(--sidebar-bg);
display: none; }
.page-wrapper .sidebar-wrapper .sidebar-content:hover::-webkit-scrollbar-thumb {
background: var(--sidebar-scrollbar-thumb-color); }
.page-wrapper .sidebar-wrapper .sidebar-content::-webkit-scrollbar {
display: none; }
.page-wrapper .sidebar-wrapper .sidebar-brand {
background: var(--sidebar-bg);
padding: 10px 20px;
@@ -9855,7 +9837,6 @@ i.title-icon {
.page-wrapper .sidebar-wrapper .sidebar-brand > a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
transition: all 0.3s ease; }
.page-wrapper .sidebar-wrapper .sidebar-brand > a:focus {
outline: none; }
@@ -10599,16 +10580,25 @@ button:not(:disabled) {
background-size: 1.5rem;
filter: invert(1) grayscale(100%) brightness(200%); }
@media (min-width: 768px) {
.alert-dismissible .btn-close {
background-size: 1.25rem; } }
[data-global-alert="closed"] #announcement {
display: none; }
.alert code {
background: #e7e8e9;
color: #000;
padding: 0.25rem 0.5rem; }
:root {
--card-title-color: var(--text-default);
--card-text-color: var(--text-muted); }
[data-dark-mode] {
--card-title-color: var(--text-default);
--card-text-color: var(--gray-500); }
--card-text-color: #6c757d; }
.card {
background: var(--card-bg);
@@ -10627,8 +10617,7 @@ button:not(:disabled) {
color: var(--card-title-color); }
.card-text {
color: var(--card-text-color);
font-weight: 500; }
color: var(--card-text-color); }
:root {
--form-border-color: var(--gray-200);
@@ -10666,12 +10655,12 @@ button:not(:disabled) {
background-color: var(--body-bg);
text-align: left; }
.form-control:focus {
border-color: var(--primary);
border-color: #2f55d4;
box-shadow: none; }
.form-control[readonly] {
background-color: var(--white); }
background-color: #fff; }
.form-control:disabled {
background-color: var(--gray-300); }
background-color: #dee2e6; }
.form-control::placeholder {
color: var(--form-control-placeholder-color); }
@@ -10684,7 +10673,7 @@ button:not(:disabled) {
border: 1px solid var(--form-check-input-border-color);
background-color: var(--body-bg); }
.form-check-input:focus {
border-color: var(--primary);
border-color: #2f55d4;
box-shadow: none; }
.form-check-input.form-check-input:checked {
background-color: var(--form-check-input-background-color);
@@ -10710,6 +10699,7 @@ table td:last-child, table th:last-child {
.table {
--bs-table-color: var(--text-default);
--bs-table-bg: transparent;
--bs-table-border-color: var(--bs-border-color);
--bs-table-accent-bg: none;
--bs-table-striped-color: var(--text-default);
--bs-table-striped-bg: var(--alert-primary-bg);
@@ -10817,12 +10807,10 @@ table td:last-child, table th:last-child {
:root {
--feature-icon-color: var(--primary);
--feature-icon-faint: var(--gray-200);
--feature-link-hover-bg-color: var(--primary); }
[data-dark-mode] {
--feature-icon-color: var(--primary-300);
--feature-icon-faint: var(--gray-900);
--feature-link-hover-bg-color: var(--gray-900); }
.features .icon {
@@ -10846,10 +10834,6 @@ table td:last-child, table th:last-child {
.features.feature-full-bg .icon-color {
color: var(--feature-icon-color) !important; }
.features.feature-full-bg .icon-faint {
color: var(--feature-icon-faint) !important;
transition: all 0.5s ease; }
.features.feature-full-bg:hover {
background-color: var(--feature-link-hover-bg-color) !important; }
@@ -11144,6 +11128,30 @@ table td:last-child, table th:last-child {
.rounded-lg {
border-radius: 30px !important; }
.border-primary {
border-color: #2f55d4 !important; }
.border-secondary {
border-color: #6c757d !important; }
.border-success {
border-color: #2eca8b !important; }
.border-info {
border-color: #17a2b8 !important; }
.border-warning {
border-color: #f17425 !important; }
.border-danger {
border-color: #e43f52 !important; }
.border-light {
border-color: #f8f9fa !important; }
.border-dark {
border-color: #0e1420 !important; }
.bg-white-color {
background: var(--bg-white-color); }
@@ -11920,4 +11928,19 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
margin: 0 auto !important;
border-radius: .25rem; }
div.code-toolbar {
padding-top: 1.95rem !important; }
.docs-content .main-content pre code::before {
background: #fc625d;
border-radius: 50%;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
content: ' ';
height: 12px;
left: 12px;
margin-top: -21px;
position: absolute;
width: 12px;
z-index: 1; }
/*# sourceMappingURL=style.css.map */

View File

@@ -9465,134 +9465,139 @@ p {
@media (max-width: 767px) {
.four-oh-four {
min-height: calc(100vh - 241px); } }
#topnav {
position: fixed;
right: 0;
left: 0;
#topnav .logo {
float: left;
color: #3c4858 !important; }
#topnav .logo .l-dark,
#topnav .logo .logo-dark-mode {
display: none; }
#topnav .logo .l-light,
#topnav .logo .logo-light-mode {
display: inline-block; }
#topnav .logo:focus {
outline: none; }
#topnav #navigation.toggle-menu {
position: relative;
display: block;
top: 0;
background-color: transparent;
z-index: 999;
border: none; }
#topnav #navigation.toggle-menu .toggle-menu-item {
display: block; }
#topnav #navigation.toggle-menu .toggle-menu-item > li {
float: none;
margin: 0 16px !important;
text-align: center; }
#topnav #navigation.toggle-menu .toggle-menu-item > li > a {
padding: 16px 0;
min-height: auto;
font-size: 18px; }
#topnav .navbar-toggle {
border: 0;
-webkit-transition: all .5s ease;
transition: all .5s ease; }
#topnav .logo {
float: left;
color: #3c4858 !important; }
#topnav .logo .l-dark,
#topnav .logo .logo-dark-mode {
display: none; }
#topnav .logo .l-light,
#topnav .logo .logo-light-mode {
display: inline-block; }
#topnav .logo:focus {
outline: none; }
#topnav #navigation.toggle-menu {
position: relative;
position: relative;
padding: 0;
margin: 0;
cursor: pointer; }
#topnav .navbar-toggle .lines {
width: 20px;
display: block;
top: 0;
border: none; }
#topnav #navigation.toggle-menu .toggle-menu-item {
display: block; }
#topnav #navigation.toggle-menu .toggle-menu-item > li {
float: none;
margin: 0 16px !important;
text-align: center; }
#topnav #navigation.toggle-menu .toggle-menu-item > li > a {
padding: 16px 0;
min-height: auto;
font-size: 18px; }
#topnav .navbar-toggle {
border: 0;
position: relative;
padding: 0;
margin: 0;
cursor: pointer; }
#topnav .navbar-toggle .lines {
width: 20px;
display: block;
position: relative;
margin: 4px 0 0 0;
height: 18px; }
#topnav .navbar-toggle span {
height: 2px;
width: 100%;
background-color: #0066ff;
display: block;
margin-bottom: 5px;
transition: transform .5s ease; }
#topnav .navbar-toggle span:last-child {
margin-bottom: 0; }
#topnav .navbar-toggle.open span {
position: absolute; }
#topnav .navbar-toggle.open span:first-child {
top: 6px;
transform: rotate(45deg); }
#topnav .navbar-toggle.open span:nth-child(2) {
visibility: hidden; }
#topnav .navbar-toggle.open span:last-child {
width: 100%;
top: 6px;
transform: rotate(-45deg); }
#topnav .navbar-toggle.open span:hover {
background-color: #0066ff; }
#topnav .navbar-toggle:hover, #topnav .navbar-toggle:focus,
#topnav .navbar-toggle .navigation-menu > li > a:hover, #topnav .navbar-toggle:focus {
background-color: transparent; }
#topnav .navigation-menu {
list-style: none;
margin: 0;
padding: 0; }
#topnav .navigation-menu > li {
float: left;
display: block;
position: relative;
margin: 0 10px; }
#topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a {
color: #0066ff !important; }
#topnav .navigation-menu > li > a {
display: flex;
color: #3c4858;
font-size: 15px;
background-color: transparent !important;
font-weight: 700;
letter-spacing: 1px;
line-height: 24px;
font-family: var(--bs-font-sans-serif);
padding-left: 15px;
padding-right: 15px;
align-items: center; }
#topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:active {
color: #0066ff; }
#topnav.scroll {
background-color: #ffffff;
border: none;
box-shadow: 0 0 3px rgba(60, 72, 88, 0.15); }
#topnav.scroll .navigation-menu > li > a {
color: #3c4858; }
#topnav.scroll .navigation-menu > li > .menu-arrow {
border-color: #3c4858; }
#topnav.scroll .navigation-menu > li:hover > a, #topnav.scroll .navigation-menu > li.active > a {
color: #0066ff; }
#topnav.scroll .navigation-menu > li:hover > .menu-arrow, #topnav.scroll .navigation-menu > li.active > .menu-arrow {
border-color: #0066ff; }
#topnav.nav-sticky {
background: #fff;
-webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
box-shadow: 0 0 3px rgba(60, 72, 88, 0.15); }
#topnav.nav-sticky .navigation-menu.nav-light > li > a {
color: #3c4858; }
#topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
margin: 4px 0 0 0;
height: 18px; }
#topnav .navbar-toggle span {
height: 2px;
width: 100%;
background-color: #0066ff;
display: block;
margin-bottom: 5px;
transition: transform .5s ease; }
#topnav .navbar-toggle span:last-child {
margin-bottom: 0; }
#topnav .navbar-toggle.open span {
position: absolute; }
#topnav .navbar-toggle.open span:first-child {
top: 6px;
transform: rotate(45deg); }
#topnav .navbar-toggle.open span:nth-child(2) {
visibility: hidden; }
#topnav .navbar-toggle.open span:last-child {
width: 100%;
top: 6px;
transform: rotate(-45deg); }
#topnav .navbar-toggle.open span:hover {
background-color: #0066ff; }
#topnav .navbar-toggle:hover, #topnav .navbar-toggle:focus,
#topnav .navbar-toggle .navigation-menu > li > a:hover, #topnav .navbar-toggle:focus {
background-color: transparent; }
#topnav .navigation-menu {
list-style: none;
margin: 0;
padding: 0; }
#topnav .navigation-menu > li {
float: left;
display: block;
position: relative;
margin: 0 10px; }
#topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a {
color: #0066ff !important; }
#topnav.nav-sticky .navigation-menu.nav-light > li:hover > .menu-arrow, #topnav.nav-sticky .navigation-menu.nav-light > li.active > .menu-arrow {
border-color: #0066ff !important; }
#topnav.nav-sticky .navigation-menu.nav-light > li:hover > a, #topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
color: #0066ff !important; }
#topnav.nav-sticky.tagline-height {
top: 0 !important; }
#topnav.nav-sticky .logo .l-dark {
display: inline-block; }
#topnav.nav-sticky .logo .l-light {
display: none; }
#topnav .navigation-menu > li > a {
display: flex;
color: #3c4858;
font-size: 15px;
background-color: transparent !important;
font-weight: 700;
letter-spacing: 1px;
line-height: 24px;
font-family: var(--bs-font-sans-serif);
padding-left: 15px;
padding-right: 15px;
align-items: center; }
#topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:active {
color: #0066ff; }
#topnav.scroll {
background-color: #ffffff;
border: none;
box-shadow: 0 0 3px rgba(60, 72, 88, 0.15); }
#topnav.scroll .navigation-menu > li > a {
color: #3c4858; }
#topnav.scroll .navigation-menu > li > .menu-arrow {
border-color: #3c4858; }
#topnav.scroll .navigation-menu > li:hover > a, #topnav.scroll .navigation-menu > li.active > a {
color: #0066ff; }
#topnav.scroll .navigation-menu > li:hover > .menu-arrow, #topnav.scroll .navigation-menu > li.active > .menu-arrow {
border-color: #0066ff; }
#topnav.defaultscroll.dark-menubar .logo {
line-height: 70px; }
#topnav.defaultscroll.scroll .logo {
line-height: 62px; }
#topnav.defaultscroll.scroll.dark-menubar .logo {
line-height: 62px; }
#topnav.nav-sticky {
background: #fff;
box-shadow: 0 0 3px rgba(60, 72, 88, 0.15); }
#topnav.nav-sticky .navigation-menu.nav-light > li > a {
color: #3c4858; }
#topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
color: #0066ff !important; }
#topnav.nav-sticky .navigation-menu.nav-light > li:hover > .menu-arrow, #topnav.nav-sticky .navigation-menu.nav-light > li.active > .menu-arrow {
border-color: #0066ff !important; }
#topnav.nav-sticky .navigation-menu.nav-light > li:hover > a, #topnav.nav-sticky .navigation-menu.nav-light > li.active > a {
color: #0066ff !important; }
#topnav.nav-sticky.tagline-height {
top: 0 !important; }
#topnav.nav-sticky .logo .l-dark {
display: inline-block; }
#topnav.nav-sticky .logo .l-light {
display: none; }
.logo {
font-weight: 700;
@@ -11006,10 +11011,6 @@ span.menu-icon {
max-width: 100%;
height: auto; } }
.hero {
background-size: cover;
padding-top: 70px; }
.icv {
position: relative;
overflow: hidden;