Docs: optimize codeblock (#259)

Signed-off-by: Carson Yang <yangchuansheng33@gmail.com>

Docs: optimize codeblock (#259)
Signed-off-by: Carson Yang <yangchuansheng33@gmail.com>
45ba5e1e · Carson Yang · GitHub · 139d0be5 · 45ba5e1e · 45ba5e1e
Commit 45ba5e1e authored Sep 06, 2023 by Carson Yang Committed by GitHub Sep 06, 2023
3 changed files
--- a/docSite/assets/docs/scss/custom/pages/_custom.scss
+++ b/docSite/assets/docs/scss/custom/pages/_custom.scss
@@ -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;
 }
\ No newline at end of file
--- a/docSite/resources/_gen/assets/scss/docs/scss/style.scss_b97bf3f19a5ec64d7a7c5d60f7e31818.content
+++ b/docSite/resources/_gen/assets/scss/docs/scss/style.scss_b97bf3f19a5ec64d7a7c5d60f7e31818.content
@@ -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 .main-content a {
+  font-weight: 600; }
 .docs-content .content-title {
-  font-weight: 700;
+  font-weight: 700; }
-  align-self: center; }
+  .docs-content .content-title i {
+    width: 44px;
-i.title-icon {
+    height: 44px;
-  width: 44px;
+    color: var(--content-icon-color);
-  height: 44px;
+    background-color: var(--content-icon-bg);
-  color: var(--content-icon-color);
+    display: inline-flex !important;
-  background-color: var(--content-icon-bg);
+    align-items: center;
-  display: inline-flex !important;
+    justify-content: center;
-  align-self: center;
+    font-size: 24px;
-  align-items: center;
+    border-radius: 5px; }
-  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 img {
-.docs-content .main-content svg {
+  max-width: 100%; }
-  max-width: 100%;
-  height: auto; }
 .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; }
+  list-style: none;
-  .docs-content .main-content ol > li {
+  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-width: none; }
-      scrollbar-color: var(--sidebar-bg) var(--sidebar-bg); }
      .page-wrapper .sidebar-wrapper .sidebar-content.desktop {
        overflow-y: hidden; }
-    .page-wrapper .sidebar-wrapper .sidebar-content:hover {
+      .page-wrapper .sidebar-wrapper .sidebar-content::-webkit-scrollbar {
-      scrollbar-color: var(--sidebar-scrollbar-thumb-color) var(--sidebar-bg); }
+        display: none; }
-    .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-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);
+  color: var(--card-text-color); }
-  font-weight: 500; }
 :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 */
\ No newline at end of file
--- a/docSite/resources/_gen/assets/scss/scss/style.scss_6d90bf46f7cdc038e33af2850006d4ba.content
+++ b/docSite/resources/_gen/assets/scss/scss/style.scss_6d90bf46f7cdc038e33af2850006d4ba.content
@@ -9465,134 +9465,139 @@ p {
  @media (max-width: 767px) {
    .four-oh-four {
      min-height: calc(100vh - 241px); } }
-#topnav {
+#topnav .logo {
-  position: fixed;
+  float: left;
-  right: 0;
+  color: #3c4858 !important; }
-  left: 0;
+  #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;
+  border: none; }
-  z-index: 999;
+  #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;
+  position: relative;
-  transition: all .5s ease; }
+  padding: 0;
-  #topnav .logo {
+  margin: 0;
-    float: left;
+  cursor: pointer; }
-    color: #3c4858 !important; }
+  #topnav .navbar-toggle .lines {
-    #topnav .logo .l-dark,
+    width: 20px;
-    #topnav .logo .logo-dark-mode {
+    display: block;
-      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;
+    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;
-    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 10px; }
-    margin: 0;
+    #topnav .navigation-menu > li:hover > a, #topnav .navigation-menu > li.active > a {
-    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 {
-      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 {
+    #topnav .navigation-menu > li > a {
-      top: 0 !important; }
+      display: flex;
-    #topnav.nav-sticky .logo .l-dark {
+      color: #3c4858;
-      display: inline-block; }
+      font-size: 15px;
-    #topnav.nav-sticky .logo .l-light {
+      background-color: transparent !important;
-      display: none; }
+      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;