docs: redesigned documentation (#2539)
* docs: redesigned navigation bar (#2478) * docs: redesigned homepage (#2480) * docs: redesigned homepage * fixed link * docs: redesigned notes (#2491) * docs: Applied Typography redesign rules (#2516) * changes to typography * small changes and fixes * docs: redesigned table of content (#2518) * redesigning toc * finalized table of content design * docs: redesigned code blocks (#2519) * docs: redesigned code blocks * removed unused package * docs: redesigned survey and content footer (#2522) * fixes to inline code * redesigned doc footer * docs: redesigned footer (#2523) * docs: changed dark mode colors (#2524) * docs: redesigned sidebar (#2535) * docs: redesigned search modal (#2537) * docs: resolved loose ends (#2538) * added spacing for tabs * docs: added no-zoom class for deploy images * fix to tooltip design for inline code
This commit is contained in:
Shahed Nasser authored and 
GitHub committed
1 parent
aee53884a4
commit
76a16aa131
146 files changed
+3449
-1193
No files matched your search
@@ -1,3 +1,9 @@
|
||||
|
||||
.feedback-container {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
border-top: 1px solid var(--ifm-doc-footer-border-color);
|
||||
}
|
||||
|
||||
.inline-feedback {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -10,11 +16,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inline-feedback span,
|
||||
.inline-question span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inline-feedback span {
|
||||
margin-right: 13px;
|
||||
}
|
||||
@@ -28,24 +29,21 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
padding: 12px 16px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: transparent;
|
||||
border: 1px solid #E5E7EB;
|
||||
color: var(--ifm-font-color-base);
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
color: var(--ifm-primary-btn-color);
|
||||
}
|
||||
|
||||
.feedback-btn:focus {
|
||||
box-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .feedback-btn:hover {
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .feedback-btn:active,
|
||||
html:not([data-theme="dark"]) .feedback-btn:disabled {
|
||||
background: #E5E7EB;
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
.markdown p + .cards-grid {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
column-gap: 16px;
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
.cards-grid.grid-6 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.box-link,
|
||||
.box-link:hover {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.card-highlight {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.card-highlight:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position:absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%,
|
||||
#9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%);
|
||||
}
|
||||
|
||||
html:not([data-theme=dark]) .card {
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .card {
|
||||
border: 1px solid var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) and (min-width: 768px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.cards-grid.grid-6 {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
/* [data-theme="dark"] pre code {
|
||||
background-color: var(--ifm-code-background);
|
||||
} */
|
||||
|
||||
code {
|
||||
border: 1px solid var(--ifm-code-border-color);
|
||||
color: var(--ifm-code-color);
|
||||
}
|
||||
|
||||
.inline-code-copy {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
color: var(--ifm-code-color)
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
background-color: none;
|
||||
word-break: break-word;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.prism-code div,
|
||||
.prism-code div:focus,
|
||||
.prism-code div:active {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-markdown a.card:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-tabs .tabs,
|
||||
.code-header {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background-color: #161616;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0px 0px;
|
||||
}
|
||||
|
||||
.code-tabs .tabs {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
overflow-x: auto;
|
||||
|
||||
backface-visibility: hidden;
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.code-tabs .tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item {
|
||||
color: #6F6F6F;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
border-radius: 99999px;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item--active {
|
||||
border-color: #393939;
|
||||
background-color: var(--ifm-code-tabs-active-bg);
|
||||
color: var(--ifm-code-tabs-active-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.theme-code-block {
|
||||
border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius) !important;
|
||||
}
|
||||
|
||||
.code-action {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.code-action:hover {
|
||||
background-color: var(--ifm-code-action-hover-bg);
|
||||
}
|
||||
|
||||
.code-action:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
a.code-action {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-action img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.theme-code-block [class*=buttonGroup] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .code-header,
|
||||
[data-theme="dark"] .theme-code-block {
|
||||
border: 1px solid var(--ifm-code-border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .code-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-code-block {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 568px) {
|
||||
.code-tabs .tabs {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 567px) {
|
||||
.code-action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.code-tabs .tabs {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/* color mode button */
|
||||
.color-mode-tabs {
|
||||
background-color: var(--mode-tabs-bg);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
|
||||
.color-mode-tabs.mobile {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
height: calc(100% - 8px);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pill-button:not(.active) {
|
||||
color: var(--mode-button-text-color);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pill-button.active {
|
||||
color: var(--mode-button-active-text-color);
|
||||
background-color: var(--mode-button-active-bg);
|
||||
border: 1px solid var(--mode-button-active-border-color);
|
||||
}
|
||||
|
||||
/* some style rules for dark mode */
|
||||
|
||||
[data-theme="dark"] .breadcrumbs__item--active a {
|
||||
background-color: var(--ifm-color-gray-800) !important;
|
||||
color: var(--ifm-color-primary-lightest) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:hover {
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.color-mode-tabs {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.color-mode-tabs {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
.DocSearch {
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-searchbox-background);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch {
|
||||
--ifm-search-bar-border-color: #E5E7EB;
|
||||
--docsearch-searchbox-background: #F9FAFB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch {
|
||||
--ifm-search-bar-border-color: #2D2D2D;
|
||||
--docsearch-searchbox-background: #222222;
|
||||
}
|
||||
|
||||
/* Search Modal */
|
||||
.DocSearch-Modal {
|
||||
border-radius: 8px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .DocSearch-Modal:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: var(--docsearch-modal-fade-bg);
|
||||
border-radius: 8px !important;
|
||||
z-index: 99;
|
||||
} */
|
||||
|
||||
.DocSearch-HitsFooter {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Form {
|
||||
--docsearch-searchbox-focus-background: #2D2D2D;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.DocSearch-MagnifierLabel, .DocSearch-Reset {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
font-size: var(--ifm-font-size-base) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input::placeholder,
|
||||
.DocSearch-Input:-ms-input-placeholder,
|
||||
.DocSearch-Input::-ms-input-placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.DocSearch-Footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background-image: url('/img/search-hit.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Container {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
padding: 18px 16px !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--docsearch-hit-border-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
margin: 0 16px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-title mark {
|
||||
color: var(--docsearch-hit-title-color) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-path,
|
||||
.DocSearch-Hit-source {
|
||||
font-size: var(--ifm-font-size-base) !important;
|
||||
line-height: var(--ifm-line-height-base);
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] a {
|
||||
background-color: var(--docsearch-hit-active-bg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action svg,
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action svg {
|
||||
color: var(--docsearch-hit-icon-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] span.DocSearch-Hit-path {
|
||||
color: var(--docsearch-highlight-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] mark {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hits:first-child .DocSearch-Hit-source {
|
||||
margin-top: 12px !important
|
||||
}
|
||||
|
||||
.DocSearch-Hits .DocSearch-Hit-source {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
|
||||
.DocSearch-Button {
|
||||
width: 100%;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--ifm-search-bar-border-color) !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
span.DocSearch-Button-Key {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch-Button .DocSearch-Search-Icon {
|
||||
--docsearch-text-color: #9CA3AF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
|
||||
--docsearch-text-color: #737373;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Placeholder {
|
||||
font-size: 13px !important;
|
||||
color: var(--docsearch-placeholder-color);
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
box-shadow: none !important;
|
||||
border-radius: 4px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 20px !important;
|
||||
font-family: var(--ifm-font-family-base) !important;
|
||||
vertical-align: middle;
|
||||
padding: 2px !important;
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover,
|
||||
.DocSearch-Form, .DocSearch-Form {
|
||||
border-color: var(--docsearch-searchbox-border-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar__items [class*=searchBox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.DocSearch-Button-Keys, .DocSearch-Button-Placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button:focus, .DocSearch-Button:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
article {
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
padding-top: 2rem !important;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(2),
|
||||
.reference-table td:nth-child(2) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(3),
|
||||
.reference-table td:nth-child(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reference-table .theme-code-block span {
|
||||
max-width: 100%;
|
||||
word-break: break-word;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.container:not(.footer-container) {
|
||||
padding-top: 38px !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* User Guide Styling */
|
||||
html[data-theme="dark"] kbd {
|
||||
--ifm-color-emphasis-0: var(--ifm-color-gray-200);
|
||||
}
|
||||
|
||||
kbd {
|
||||
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
|
||||
|
||||
font: 100% var(--ifm-font-family-monospace) !important;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.markdown-doc-wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: var(--ifm-container-width);
|
||||
padding: 0 var(--ifm-spacing-horizontal);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown-doc-wrapper--fluid {
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
.markdown-row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-doc-footer {
|
||||
margin-top: var(--ifm-base-margin-vertical) !important;
|
||||
border-top: 1px solid var(--ifm-doc-footer-border-color) !important;
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .doc-footer {
|
||||
--ifm-doc-footer-border-color: #E5E7EB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-footer {
|
||||
--ifm-doc-footer-border-color: #3E3F41;
|
||||
}
|
||||
|
||||
.theme-edit-this-page {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
}
|
||||
|
||||
.theme-edit-this-page:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.theme-edit-this-page,
|
||||
.theme-edit-this-page:hover {
|
||||
color: var(--ifm-primary-btn-color);
|
||||
}
|
||||
|
||||
.theme-last-updated {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.theme-last-updated b {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
.tabs-wrapper:not(.code-tabs) .tabs-container > div {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.markdown-doc-wrapper {
|
||||
max-width: var(--ifm-container-width-xl) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
[class*=docItemContainer] > article {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
max-width: none
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.footer__title {
|
||||
font-weight: 600 !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer__item:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
background-color: transparent !important;
|
||||
border-top: 1px solid var(--ifm-footer-border-color);
|
||||
padding-top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
padding-bottom: calc(var(--ifm-base-margin-vertical) * 3);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.footer__link-item {
|
||||
line-height: var(--ifm-line-height-base);
|
||||
font-size: var(--ifm-font-size-base);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .footer__item svg {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .footer__item svg {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.social-logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-link:not(:first-child) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.discord-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.twitter-icon {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.github-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.social-logo-container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
html[data-theme="dark"] .navbar-github-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: calc(var(--ifm-z-index-overlay) - 1);
|
||||
padding-top: var(--ifm-navbar-padding-top);
|
||||
padding-bottom: var(--ifm-navbar-padding-bottom);
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
.navbar:not(.navbar-sidebar--show) {
|
||||
background: none;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-github-link:before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar__link svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.navbar__item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar__items {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.navbar__item.dropdown > .navbar__link,
|
||||
.external-link .navbar__item {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar__link--active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar .right-divider {
|
||||
height: 100%;
|
||||
}
|
||||
.navbar .right-divider:after {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
margin-left: 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .navbar .right-divider:after {
|
||||
background-color: #D1D5DB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar .right-divider:after {
|
||||
background-color: #393939;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.alert {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--ifm-note-border-color) !important;
|
||||
background-color: var(--ifm-note-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert p > code {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.alert a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) [class*=alert--] {
|
||||
--ifm-code-background: #F9FAFB !important;
|
||||
--ifm-alert-background-color-highlight: #F9FAFB !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] [class*=alert--] {
|
||||
--ifm-code-background: #222222 !important;
|
||||
--ifm-alert-background-color-highlight: #222222 !important;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
html[data-theme="dark"] .redocusaurus .expanded + tr > td > div {
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
}
|
||||
|
||||
.redocusaurus a {
|
||||
color: var(--ifm-link-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) pre {
|
||||
background-color: transparent !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h5 + svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
padding: 8px 9.6px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
background-color: #11171a;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus .menu-content,
|
||||
html[data-theme="dark"] .redocusaurus .menu-content label {
|
||||
background-color: var(--ifm-background-color) !important;
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
.main-wrapper aside {
|
||||
z-index: var(--ifm-z-index-fixed);
|
||||
}
|
||||
|
||||
.sidebar-bg {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sidebar-bg img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
a.menu__link.menu__link--active.active {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::after,
|
||||
.menu__caret:before {
|
||||
background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 2rem;
|
||||
}
|
||||
|
||||
.menu__list-item > a {
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__link,
|
||||
.redocusaurus .menu-content label {
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px;
|
||||
line-height: 1.7em;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link,
|
||||
.theme-doc-sidebar-item-category-level-1 .menu__link,
|
||||
.redocusaurus .menu-content label.-depth1,
|
||||
.navbar-sidebar__item .menu__link:not(.navbar-github-link),
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content label {
|
||||
color: var(--ifm-menu-color)
|
||||
}
|
||||
|
||||
.menu__link:hover,
|
||||
.menu__link--active,
|
||||
.menu__list-item-collapsible:hover,
|
||||
.menu__list-item-collapsible--active,
|
||||
.redocusaurus .menu-content label:hover,
|
||||
.redocusaurus .menu-content label.active {
|
||||
background-color: transparent !important;
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
.menu__link--active,
|
||||
.menu__list-item-collapsible--active,
|
||||
.redocusaurus .menu-content label.active {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* .menu__list,
|
||||
.redocusaurus .menu-content ul {
|
||||
padding-left: 1.7em;
|
||||
padding-right: 1.7em;
|
||||
} */
|
||||
|
||||
a.menu__link--sublist::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
a.menu__link--sublist + .menu__caret,
|
||||
.redocusaurus .menu-content label svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::before,
|
||||
.redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.8px;
|
||||
transition: transform var(--ifm-transition-fast) linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
background-image: url('/img/triangle-right.png');
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.menu__link--sublist::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
background-image: url('/img/triangle-right-dark.png');
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist:hover::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist.menu__link--active::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1.active::before {
|
||||
background-image: url('/img/triangle-right-hover.png');
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.menu__link--sublist:hover::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
|
||||
[data-theme="dark"] a.menu__link--sublist.menu__link--active::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1.active::before {
|
||||
background-image: url('/img/triangle-right-dark-hover.png');
|
||||
}
|
||||
|
||||
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible > .menu__link--sublist:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.menu__link:not(.menu__link--sublist):not(.navbar-github-link)::before {
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-size: 6px;
|
||||
background-image: url('/img/circle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist):hover::before,
|
||||
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist).menu__link--active::before {
|
||||
background-image: url('/img/circle-hover.png');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__link:not(.menu__link--sublist):hover::before,
|
||||
[data-theme="dark"] .menu__link:not(.menu__link--sublist).menu__link--active::before {
|
||||
background-image: url('/img/circle-dark-hover.png');
|
||||
}
|
||||
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link::before,
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) a.menu__link--sublist::before,
|
||||
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) .menu__link::before,
|
||||
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) a.menu__link--sublist::before {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
|
||||
.theme-doc-sidebar-item-link-level-1 a.menu__link--sublist::before,
|
||||
.theme-doc-sidebar-item-category-level-1 .menu__link::before,
|
||||
.theme-doc-sidebar-item-category-level-1 a.menu__link--sublist::before,
|
||||
.redocusaurus .menu-content label[type=tag].-depth1::before,
|
||||
.navbar-sidebar__item .menu__link::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content label::before {
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::before,
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
|
||||
.menu__link:not(.menu__link--sublist)::before {
|
||||
top: 21%;
|
||||
}
|
||||
|
||||
.menu__list-item > .menu__list-item-collapsible + .menu__list {
|
||||
transition-property: opacity, height !important;
|
||||
transition-duration: 350ms !important;
|
||||
transition-timing-function: ease-in-out !important;
|
||||
will-change: opacity, height !important;
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
height: 0;
|
||||
transition-delay: 100ms, 0s !important;
|
||||
}
|
||||
|
||||
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible + .menu__list {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.menu__list-item.alert-icon .menu__link::before {
|
||||
background-image: url('/img/alert.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 19%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link:hover::before,
|
||||
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/alert-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__list-item.alert-icon .menu__link:hover::before,
|
||||
[data-theme="dark"] .menu__list-item.alert-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/alert-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item.topright-icon .menu__link::before {
|
||||
background-image: url('/img/arrow-top-right.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 19%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link:hover::before,
|
||||
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/arrow-top-right-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__list-item.topright-icon .menu__link:hover::before,
|
||||
[data-theme="dark"] .menu__list-item.topright-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/arrow-top-right-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item.alert-icon [class*=iconExternalLink],
|
||||
.menu__list-item.topright-icon [class*=iconExternalLink] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.navbar-github-link {
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
.theme-doc-toc-desktop .table-of-contents {
|
||||
border-left: none !important;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-image: url('/img/side-menu.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-image: url('/img/side-menu-dark.svg');
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px;
|
||||
background-position-x: -1px;
|
||||
padding-left: 28px;
|
||||
content: 'On this page';
|
||||
font-size: 13px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
|
||||
padding-left: var(--ifm-toc-link-padding-left);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents > li:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: var(--ifm-toc-divider-color);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link:hover,
|
||||
.theme-doc-toc-desktop .table-of-contents__link:hover code,
|
||||
.theme-doc-toc-desktop .table-of-contents__link--active,
|
||||
.theme-doc-toc-desktop .table-of-contents__link--active code {
|
||||
color: var(--ifm-toc-link-active);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link--active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: var(--ifm-toc-link-active);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .toc-wrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .markdown-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents > li:not(:first-child),
|
||||
.theme-doc-toc-desktop .table-of-contents ul li {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents, .table-of-contents ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.table-of-contents ul .table-of-contents__link {
|
||||
padding-left: calc(var(--ifm-toc-padding-horizontal) + var(--ifm-toc-link-padding-left)) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: calc(2 / 12 * 100%)
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: calc(3 / 12 * 100%)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-box {
|
||||
position: absolute;
|
||||
top: calc(-100% - 17px);
|
||||
z-index: 100000;
|
||||
padding: 8px 16px;
|
||||
max-width: 170px;
|
||||
width: max-content;
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--ifm-tooltip-background-color);
|
||||
border: 1px solid var(--ifm-tooltip-border-color);
|
||||
border-radius: 8px;
|
||||
color: var(--ifm-color-content);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
box-shadow: 0px 2px 16px var(--ifm-tooltip-box-shadow-color);
|
||||
|
||||
opacity: 0;
|
||||
transition: all .1s;
|
||||
}
|
||||
|
||||
.tooltip-box.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inline-tooltip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-container:not(.inline-tooltip) .tooltip-box {
|
||||
left: calc(-50% - 30px);
|
||||
}
|
||||
|
||||
.inline-tooltip .tooltip-box {
|
||||
left: 0;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
h1 {
|
||||
font-size: var(--ifm-h1-font-size);
|
||||
line-height: var(--ifm-h1-line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--ifm-h2-font-size);
|
||||
line-height: var(--ifm-h2-line-height);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--ifm-color-headers);
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.theme-doc-markdown a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown h1:first-child {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.markdown > h2 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.markdown > p {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.markdown a,
|
||||
.markdown a:hover {
|
||||
color: var(--ifm-link-color);
|
||||
}
|
||||
|
||||
.markdown a:not(.hash-link) {
|
||||
font-weight: var(--ifm-link-weight);
|
||||
}
|
||||
|
||||
.markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
background-image: url('/img/link-icon.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
background-image: url('/img/link-icon-dark.svg');
|
||||
}
|
||||
|
||||
.markdown p + h2,
|
||||
.markdown .alert + h2 {
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
.markdown p + .alert {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.markdown {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
.markdown p + p > img:not(.ui-icon) {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
p + img:not(.ui-icon) {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
/* You can override the default Infima variables here. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
|
||||
|
||||
:root {
|
||||
/* Base Styles */
|
||||
--ifm-global-radius: 8px;
|
||||
--ifm-hr-background-color: #E5E7EB;
|
||||
--ifm-base-margin-vertical: 32px;
|
||||
--ifm-hr-margin-vertical: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
|
||||
/* Colors */
|
||||
--ifm-color-primary: #111827;
|
||||
--ifm-medusa-gray: #f0f0f0;
|
||||
--ifm-color-content: #6B7280;
|
||||
|
||||
/* Fonts */
|
||||
--ifm-code-font-size: 14px;
|
||||
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
|
||||
--ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
|
||||
--ifm-font-size-base: 14px;
|
||||
--ifm-line-height-base: 24px;
|
||||
|
||||
/* Headings */
|
||||
--ifm-color-headers: #111827;
|
||||
--ifm-heading-font-weight: 600;
|
||||
--ifm-heading-line-height: 24px;
|
||||
--ifm-h1-font-size: 30px;
|
||||
--ifm-h1-line-height: 48px;
|
||||
--ifm-h2-font-size: 24px;
|
||||
--ifm-h2-line-height: 36px;
|
||||
--ifm-h4-font-size: 14px;
|
||||
|
||||
/* Links */
|
||||
--ifm-link-color: #4B5563;
|
||||
--ifm-link-weight: 600;
|
||||
|
||||
/* Sidebar */
|
||||
--doc-sidebar-width: 250px !important;
|
||||
--ifm-menu-active: #111827;
|
||||
|
||||
/* Docs Page */
|
||||
--ifm-docs-page-max-width: 850px;
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #f0f0f0;
|
||||
--ifm-toc-link-color: #6B7280;
|
||||
--ifm-toc-padding-horizontal: 9px;
|
||||
--ifm-toc-link-active: #111827;
|
||||
--ifm-toc-divider-color: #E5E7EB;
|
||||
--ifm-toc-link-padding-left: 16px;
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #E5E7EB;
|
||||
--ifm-navbar-padding-top: 16px;
|
||||
--ifm-navbar-padding-bottom: 17px;
|
||||
--ifm-navbar-padding-vertical: 16px;
|
||||
--ifm-navbar-padding-horizontal: 24px;
|
||||
--ifm-navbar-height: 57px;
|
||||
--ifm-navbar-link-hover-color: #111827;
|
||||
--ifm-navbar-link-color: #6B7280;
|
||||
|
||||
/* Color Mode toggler */
|
||||
--mode-tabs-bg: #F3F4F6;
|
||||
--mode-button-text-color: #6B7280;
|
||||
--mode-button-active-bg: #FFFFFF;
|
||||
--mode-button-active-border-color: #E5E7EB;
|
||||
--mode-button-active-text-color: #111827;
|
||||
|
||||
/* Screen Width */
|
||||
--ifm-container-width-xl: 960px;
|
||||
|
||||
/* Notes */
|
||||
--ifm-note-background: #F9FAFB;
|
||||
--ifm-note-border-color: #E5E7EB;
|
||||
--ifm-note-text-color: #4B5563;
|
||||
|
||||
/* Code */
|
||||
--ifm-code-border-radius: 8px;
|
||||
--ifm-code-padding-horizontal: 8px;
|
||||
--ifm-code-border-color: #E5E7EB;
|
||||
--ifm-code-background: #F9FAFB;
|
||||
--ifm-code-color: #4B5563;
|
||||
--ifm-code-tabs-active-bg: transparent;
|
||||
--ifm-code-tabs-active-color: #F4F4F4;
|
||||
--ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16);
|
||||
|
||||
/* Tooltip */
|
||||
--ifm-tooltip-background-color: #fff;
|
||||
--ifm-tooltip-border-color: #E5E7EB;
|
||||
--ifm-tooltip-box-shadow-color: rgba(17, 24, 39, 0.08);
|
||||
|
||||
/* Buttons */
|
||||
--ifm-primary-btn-background-color: #fff;
|
||||
--ifm-primary-btn-color: #111827;
|
||||
--ifm-primary-btn-border-color: #E5E7EB;
|
||||
|
||||
/* Footer */
|
||||
--ifm-footer-border-color: #E5E7EB;
|
||||
--ifm-footer-logo-max-width: 24px;
|
||||
--ifm-footer-title-color: #111827;
|
||||
--ifm-footer-link-color: var(--ifm-color-content);
|
||||
|
||||
/* Search */
|
||||
--docsearch-searchbox-background: #F9FAFB !important;
|
||||
--docsearch-modal-background: #fff !important;
|
||||
--docsearch-modal-shadow: none !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
|
||||
--docsearch-container-background: rgba(17, 24, 39, 0.4) !important;
|
||||
--docsearch-key-gradient: #E5E7EB !important;
|
||||
--docsearch-muted-color: #6B7280 !important;
|
||||
--docsearch-placeholder-color: #9CA3AF;
|
||||
--docsearch-searchbox-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1) !important;
|
||||
--docsearch-searchbox-border-color: #7C3AED;
|
||||
--docsearch-primary-color: var(--docsearch-searchbox-border-color);
|
||||
--docsearch-searchbox-height: 40px !important;
|
||||
--docsearch-spacing: 16px !important;
|
||||
--docsearch-highlight-color: #6B7280 !important;
|
||||
--docsearch-text-color: #111827 !important;
|
||||
--docsearch-hit-background: #FFFFFF !important;
|
||||
--docsearch-hit-height: auto !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-hit-active-bg: #F9FAFB;
|
||||
--docsearch-hit-icon-color: #9CA3AF;
|
||||
--docsearch-hit-border-color: #E5E7EB;
|
||||
--docsearch-hit-title-color: #000000;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
/* Base Styles */
|
||||
--ifm-hr-background-color: #2D2D2D;
|
||||
|
||||
/* Colors */
|
||||
--ifm-color-primary-dark: #6231ff;
|
||||
--ifm-color-primary-darker: #5520ff;
|
||||
--ifm-color-primary-darkest: #3800ed;
|
||||
--ifm-color-primary: #9675ff;
|
||||
--ifm-color-primary-lighter: #a386ff;
|
||||
--ifm-color-primary-lightest: #c9b8ff;
|
||||
--ifm-background-color: #161616;
|
||||
--ifm-background-surface-color: #161616;
|
||||
--ifm-medusa-gray: #292929;
|
||||
--ifm-color-content: #8A8A8A;
|
||||
|
||||
/* Headings */
|
||||
--ifm-color-headers: #F3F3F3;
|
||||
|
||||
/* Links */
|
||||
--ifm-link-color: #8A8A8A;
|
||||
|
||||
/* Sidebar */
|
||||
--ifm-menu-color: rgba(255, 255, 255, 0.5);
|
||||
--ifm-menu-active: #fff;
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #333;
|
||||
--ifm-toc-link-active: #F3F3F3;
|
||||
--ifm-toc-link-color: #737373;
|
||||
--ifm-toc-divider-color: #393939;
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-background-color: #161616;
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #2D2D2D;
|
||||
--ifm-navbar-link-hover-color: #F3F3F3;
|
||||
--ifm-navbar-link-color: #8A8A8A;
|
||||
|
||||
/* Color Mode toggler */
|
||||
--mode-tabs-bg: #222222;
|
||||
--mode-button-text-color: #8A8A8A;
|
||||
--mode-button-active-bg: #161616;
|
||||
--mode-button-active-border-color: #393939;
|
||||
--mode-button-active-text-color: #F3F3F3;
|
||||
|
||||
/* Notes */
|
||||
--ifm-note-background: #222222;
|
||||
--ifm-note-border-color: #393939;
|
||||
--ifm-note-text-color: #8A8A8A;
|
||||
|
||||
/* Code */
|
||||
--ifm-code-border-color: #393939;
|
||||
--ifm-code-background: #222222;
|
||||
--ifm-code-color: #8A8A8A;
|
||||
--ifm-code-tabs-active-bg: #222222;
|
||||
--ifm-code-tabs-active-color: #F3F3F3;
|
||||
--ifm-code-action-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Tooltip */
|
||||
--ifm-tooltip-background-color: #222222;
|
||||
--ifm-tooltip-border-color: #393939;
|
||||
|
||||
/* Buttons */
|
||||
--ifm-primary-btn-background-color: #222222;
|
||||
--ifm-primary-btn-color: #F3F3F3;
|
||||
--ifm-primary-btn-border-color: #393939;
|
||||
|
||||
/* Footer */
|
||||
--ifm-footer-border-color: #3E3F41;
|
||||
--ifm-footer-title-color: #F3F3F3;
|
||||
--ifm-footer-link-color: var(--ifm-color-content);
|
||||
|
||||
/* Search */
|
||||
--docsearch-searchbox-background: #222222 !important;
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-searchbox-background) !important;
|
||||
--docsearch-modal-background: #222222 !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #222222 100%);
|
||||
--docsearch-container-background: rgba(22, 22, 22, 0.7) !important;
|
||||
--docsearch-key-gradient: #393939 !important;
|
||||
--docsearch-muted-color: #8A8A8A !important;
|
||||
--docsearch-placeholder-color: #686868;
|
||||
--docsearch-searchbox-shadow: 0px 0px 0px 4px rgba(139, 92, 246, 0.2) !important;
|
||||
--docsearch-searchbox-border-color: #8B5CF6;
|
||||
--docsearch-highlight-color: #8A8A8A !important;
|
||||
--docsearch-text-color: #F3F3F3 !important;
|
||||
--docsearch-hit-background: #222222 !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-hit-active-bg: #2D2D2D;
|
||||
--docsearch-hit-icon-color: #737373;
|
||||
--docsearch-hit-border-color: #393939;
|
||||
--docsearch-hit-title-color: #F3F3F3;
|
||||
}
|
||||
+15
-586
@@ -6,589 +6,18 @@
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--ifm-color-primary: #7C53FF;
|
||||
--ifm-color-primary-dark: #6231ff;
|
||||
--ifm-color-primary-darker: #5520ff;
|
||||
--ifm-color-primary-darkest: #3800ed;
|
||||
--ifm-color-primary-light: #9675ff;
|
||||
--ifm-color-primary-lighter: #a386ff;
|
||||
--ifm-color-primary-lightest: #c9b8ff;
|
||||
--ifm-medusa-gray: #f0f0f0;
|
||||
|
||||
/* Fonts */
|
||||
--ifm-code-font-size: 80%;
|
||||
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
|
||||
|
||||
/* Sidebar */
|
||||
--doc-sidebar-width: 250px !important;
|
||||
|
||||
/* Docs Page */
|
||||
--ifm-docs-page-max-width: 850px;
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #f0f0f0;
|
||||
--ifm-toc-link-color: #a6acb5;
|
||||
--ifm-toc-padding-horizontal: 9px;
|
||||
--ifm-menu-active: #111827;
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #a6acb5;
|
||||
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) {
|
||||
/* Navbar */
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #a6acb5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ifm-navbar-background-color: rgba(5, 1, 13, 1);
|
||||
/* --ifm-color-primary: #7C53FF; */
|
||||
--ifm-color-primary-dark: #6231ff;
|
||||
--ifm-color-primary-darker: #5520ff;
|
||||
--ifm-color-primary-darkest: #3800ed;
|
||||
--ifm-color-primary: #9675ff;
|
||||
--ifm-color-primary-lighter: #a386ff;
|
||||
--ifm-color-primary-lightest: #c9b8ff;
|
||||
--ifm-background-color: rgba(5, 1, 13, 1);
|
||||
--ifm-background-surface-color: rgba(5, 1, 13, 1);
|
||||
--ifm-medusa-gray: #292929;
|
||||
--ifm-menu-color: #fff;
|
||||
--ifm-toc-border-color: #333;
|
||||
--ifm-menu-active: #fff;
|
||||
--ifm-menu-color: rgba(255, 255, 255, 0.5);
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .breadcrumbs__item--active a {
|
||||
background-color: var(--ifm-color-gray-800) !important;
|
||||
color: var(--ifm-color-primary-lightest) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-theme="dark"] pre code {
|
||||
background-color: var(--ifm-code-background);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* DocSearch */
|
||||
|
||||
/* html[data-theme="light"] .DocSearch-Button {
|
||||
--docsearch-searchbox-background: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .DocSearch-Button {
|
||||
--docsearch-searchbox-background: #1f1f1f;
|
||||
} */
|
||||
|
||||
.DocSearch-Button {
|
||||
width: 100%;
|
||||
max-width: 175px;
|
||||
border-radius: 8px !important;
|
||||
--docsearch-container-background: #f5f6f7;
|
||||
}
|
||||
|
||||
span.DocSearch-Button-Key {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
|
||||
html[data-theme="dark"] .navbar-github-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] footer:not(.theme-doc-footer) {
|
||||
background-color: var(--ifm-color-gray-800);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .card {
|
||||
border: 1px solid var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 1000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.navbar-github-link:before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar__link svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* DocsPage */
|
||||
|
||||
article {
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
[class*=docItemContainer] > article {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
max-width: none
|
||||
}
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
/* TOC */
|
||||
|
||||
.table-of-contents {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table-of-contents::before {
|
||||
content: "ON THIS PAGE";
|
||||
display: inline-block;
|
||||
font-size: 0.85rem;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.table-of-contents .table-of-contents__link--active {
|
||||
border-left: 3px solid var(--ifm-link-color);
|
||||
color: var(--ifm-color-primary);
|
||||
font-weight: 500;
|
||||
margin-left: -14px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.main-wrapper aside {
|
||||
z-index: var(--ifm-z-index-fixed);
|
||||
}
|
||||
|
||||
.sidebar-bg {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
/* Medusa logo */
|
||||
.sidebar-bg img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
padding-top: 2rem !important;
|
||||
}
|
||||
|
||||
a.menu__link.menu__link--active.active {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::after,
|
||||
.menu__caret:before {
|
||||
background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 2rem;
|
||||
}
|
||||
|
||||
.menu__list-item > a {
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
|
||||
.pagination-nav {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer .footer__items svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
footer .footer__col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
footer .footer__items li {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
footer .footer__title {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) footer {
|
||||
background-color: #ffffff !important;
|
||||
border-top: 1px solid var(--ifm-toc-border-color);
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
|
||||
html:not([data-theme=dark]) .card {
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
background-color: none;
|
||||
word-break: break-word;
|
||||
font-size: 0.8rem;
|
||||
outline: none !important;
|
||||
}
|
||||
.prism-code div,
|
||||
.prism-code div:focus,
|
||||
.prism-code div:active {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-markdown a.card:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.box-link,
|
||||
.box-link:hover {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.theme-doc-markdown a:hover {
|
||||
color: #6e3eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:hover {
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(2),
|
||||
.reference-table td:nth-child(2) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(3),
|
||||
.reference-table td:nth-child(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reference-table .theme-code-block span {
|
||||
max-width: 100%;
|
||||
word-break: break-word;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
/* API Reference Styling */
|
||||
html[data-theme="dark"] .redocusaurus .expanded + tr > td > div {
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
}
|
||||
|
||||
.redocusaurus a {
|
||||
color: var(--ifm-link-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) pre {
|
||||
background-color: transparent !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h5 + svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
padding: 8px 9.6px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
background-color: #11171a;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus .menu-content,
|
||||
html[data-theme="dark"] .redocusaurus .menu-content label {
|
||||
background-color: var(--ifm-background-color) !important;
|
||||
}
|
||||
|
||||
/* User Guide Styling */
|
||||
html[data-theme="dark"] kbd {
|
||||
--ifm-color-emphasis-0: var(--ifm-color-gray-200);
|
||||
}
|
||||
|
||||
kbd {
|
||||
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
|
||||
|
||||
font: 100% var(--ifm-font-family-monospace) !important;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.menu__link,
|
||||
.redocusaurus .menu-content label {
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px;
|
||||
line-height: 1.7em;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link,
|
||||
.theme-doc-sidebar-item-category-level-1 .menu__link,
|
||||
.redocusaurus .menu-content label.-depth1,
|
||||
.navbar-sidebar__item .menu__link:not(.navbar-github-link) {
|
||||
padding-left: 1.7em;
|
||||
}
|
||||
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content label {
|
||||
color: var(--ifm-menu-color)
|
||||
}
|
||||
|
||||
.menu__link:hover,
|
||||
.menu__link--active,
|
||||
.menu__list-item-collapsible:hover,
|
||||
.menu__list-item-collapsible--active,
|
||||
.redocusaurus .menu-content label:hover,
|
||||
.redocusaurus .menu-content label.active {
|
||||
background-color: transparent !important;
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
.menu__link--active,
|
||||
.menu__list-item-collapsible--active,
|
||||
.redocusaurus .menu-content label.active {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* .menu__list,
|
||||
.redocusaurus .menu-content ul {
|
||||
padding-left: 1.7em;
|
||||
padding-right: 1.7em;
|
||||
} */
|
||||
|
||||
a.menu__link--sublist::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
a.menu__link--sublist + .menu__caret,
|
||||
.redocusaurus .menu-content label svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::before,
|
||||
.redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
content: "";
|
||||
height: 1.1em;
|
||||
width: 1.1em;
|
||||
background-image: url('/img/triangle-right.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform var(--ifm-transition-fast) linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist:hover::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist.menu__link--active::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1.active::before {
|
||||
background-image: url('/img/triangle-right-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.menu__link--sublist:hover::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
|
||||
[data-theme="dark"] a.menu__link--sublist.menu__link--active::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1.active::before {
|
||||
background-image: url('/img/triangle-right-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible > .menu__link--sublist:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.menu__link:not(.menu__link--sublist):not(.navbar-github-link)::before {
|
||||
content: "";
|
||||
height: 1.1em;
|
||||
width: 1.1em;
|
||||
background-image: url('/img/circle.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist):hover::before,
|
||||
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist).menu__link--active::before {
|
||||
background-image: url('/img/circle-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__link:not(.menu__link--sublist):hover::before,
|
||||
[data-theme="dark"] .menu__link:not(.menu__link--sublist).menu__link--active::before {
|
||||
background-image: url('/img/circle-hover-dark.svg');
|
||||
}
|
||||
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link::before,
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) a.menu__link--sublist::before,
|
||||
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) .menu__link::before,
|
||||
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) a.menu__link--sublist::before {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
|
||||
.theme-doc-sidebar-item-link-level-1 a.menu__link--sublist::before,
|
||||
.theme-doc-sidebar-item-category-level-1 .menu__link::before,
|
||||
.theme-doc-sidebar-item-category-level-1 a.menu__link--sublist::before,
|
||||
.redocusaurus .menu-content label[type=tag].-depth1::before,
|
||||
.navbar-sidebar__item .menu__link::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.redocusaurus .menu-content label::before {
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::before,
|
||||
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
|
||||
.menu__link:not(.menu__link--sublist)::before {
|
||||
top: 28%;
|
||||
}
|
||||
|
||||
.menu__list-item > .menu__list-item-collapsible + .menu__list {
|
||||
transition-property: opacity, height !important;
|
||||
transition-duration: 350ms !important;
|
||||
transition-timing-function: ease-in-out !important;
|
||||
will-change: opacity, height !important;
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
height: 0;
|
||||
transition-delay: 100ms, 0s !important;
|
||||
}
|
||||
|
||||
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible + .menu__list {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.menu__list-item.alert-icon .menu__link::before {
|
||||
background-image: url('/img/alert.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 19%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link:hover::before,
|
||||
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/alert-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__list-item.alert-icon .menu__link:hover::before,
|
||||
[data-theme="dark"] .menu__list-item.alert-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/alert-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item.topright-icon .menu__link::before {
|
||||
background-image: url('/img/arrow-top-right.svg');
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 19%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link:hover::before,
|
||||
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/arrow-top-right-hover.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .menu__list-item.topright-icon .menu__link:hover::before,
|
||||
[data-theme="dark"] .menu__list-item.topright-icon .menu__link.menu__link--active::before {
|
||||
background-image: url('/img/arrow-top-right-hover-dark.svg');
|
||||
}
|
||||
|
||||
.menu__list-item.alert-icon [class*=iconExternalLink],
|
||||
.menu__list-item.topright-icon [class*=iconExternalLink] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__list-item-collapsible {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.navbar-github-link {
|
||||
overflow: visible;
|
||||
}
|
||||
@import url('./_variables.css');
|
||||
|
||||
@import url('./_card.css');
|
||||
@import url('./_code.css');
|
||||
@import url('./_dark.css');
|
||||
@import url('./_docsearch.css');
|
||||
@import url('./_docspage.css');
|
||||
@import url('./_footer.css');
|
||||
@import url('./_navbar.css');
|
||||
@import url('./_note.css');
|
||||
@import url('./_redocly.css');
|
||||
@import url('./_sidebar.css');
|
||||
@import url('./_toc.css');
|
||||
@import url('./_tooltip.css');
|
||||
@import url('./_typography.css');
|
||||
@@ -0,0 +1,153 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import styles from './styles.module.css';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
function NoteIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/info-icon.png')} className="no-zoom-img" />
|
||||
);
|
||||
}
|
||||
function TipIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/tip-icon.png')} height={16} width={12} className="no-zoom-img" />
|
||||
);
|
||||
}
|
||||
function DangerIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/alert-icon.png')} className="no-zoom-img" />
|
||||
);
|
||||
}
|
||||
function InfoIcon() {
|
||||
return NoteIcon();
|
||||
}
|
||||
function CautionIcon() {
|
||||
return DangerIcon();
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
|
||||
const AdmonitionConfigs = {
|
||||
note: {
|
||||
infimaClassName: 'secondary',
|
||||
iconComponent: NoteIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.note"
|
||||
description="The default label used for the Note admonition (:::note)">
|
||||
note
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
tip: {
|
||||
infimaClassName: 'success',
|
||||
iconComponent: TipIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.tip"
|
||||
description="The default label used for the Tip admonition (:::tip)">
|
||||
tip
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
danger: {
|
||||
infimaClassName: 'danger',
|
||||
iconComponent: DangerIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.danger"
|
||||
description="The default label used for the Danger admonition (:::danger)">
|
||||
danger
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
info: {
|
||||
infimaClassName: 'info',
|
||||
iconComponent: InfoIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.info"
|
||||
description="The default label used for the Info admonition (:::info)">
|
||||
info
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
caution: {
|
||||
infimaClassName: 'warning',
|
||||
iconComponent: CautionIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.caution"
|
||||
description="The default label used for the Caution admonition (:::caution)">
|
||||
caution
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
};
|
||||
// Legacy aliases, undocumented but kept for retro-compatibility
|
||||
const aliases = {
|
||||
secondary: 'note',
|
||||
important: 'info',
|
||||
success: 'tip',
|
||||
warning: 'danger',
|
||||
};
|
||||
function getAdmonitionConfig(unsafeType) {
|
||||
const type = aliases[unsafeType] ?? unsafeType;
|
||||
const config = AdmonitionConfigs[type];
|
||||
if (config) {
|
||||
return config;
|
||||
}
|
||||
console.warn(
|
||||
`No admonition config found for admonition type "${type}". Using Info as fallback.`,
|
||||
);
|
||||
return AdmonitionConfigs.info;
|
||||
}
|
||||
// Workaround because it's difficult in MDX v1 to provide a MDX title as props
|
||||
// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
|
||||
function extractMDXAdmonitionTitle(children) {
|
||||
const items = React.Children.toArray(children);
|
||||
const mdxAdmonitionTitle = items.find(
|
||||
(item) =>
|
||||
React.isValidElement(item) &&
|
||||
item.props?.mdxType === 'mdxAdmonitionTitle',
|
||||
);
|
||||
const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
|
||||
return {
|
||||
mdxAdmonitionTitle,
|
||||
rest,
|
||||
};
|
||||
}
|
||||
function processAdmonitionProps(props) {
|
||||
const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
|
||||
return {
|
||||
...props,
|
||||
title: props.title ?? mdxAdmonitionTitle,
|
||||
children: rest,
|
||||
};
|
||||
}
|
||||
export default function Admonition(props) {
|
||||
const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
|
||||
const typeConfig = getAdmonitionConfig(type);
|
||||
const titleLabel = title ?? typeConfig.label;
|
||||
const {iconComponent: IconComponent} = typeConfig;
|
||||
const icon = iconProp ?? <IconComponent />;
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
ThemeClassNames.common.admonition,
|
||||
ThemeClassNames.common.admonitionType(props.type),
|
||||
'alert',
|
||||
`alert--${typeConfig.infimaClassName}`,
|
||||
styles.admonition,
|
||||
)}>
|
||||
<div className={
|
||||
clsx(
|
||||
styles.admonitionContentContainer
|
||||
)
|
||||
}>
|
||||
<span className={styles.admonitionIcon}>{icon}</span>
|
||||
<div className={styles.admonitionContent}>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
.admonition {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.admonitionIcon svg,
|
||||
.admonitionIcon img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 16px;
|
||||
flex: 1;
|
||||
max-width: 20px;
|
||||
}
|
||||
|
||||
.admonitionIcon img {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.admonitionContent {
|
||||
font-size: 14px;
|
||||
color: var(--ifm-note-text-color);
|
||||
flex: 1;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.admonitionContent > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.admonitionContentContainer {
|
||||
display: flex;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, {isValidElement} from 'react';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ElementContent from '@theme/CodeBlock/Content/Element';
|
||||
import StringContent from '@theme/CodeBlock/Content/String';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import Tooltip from '../Tooltip';
|
||||
import CopyButton from '../CopyButton';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
/**
|
||||
* Best attempt to make the children a plain string so it is copyable. If there
|
||||
* are react elements, we will not be able to copy the content, and it will
|
||||
* return `children` as-is; otherwise, it concatenates the string children
|
||||
* together.
|
||||
*/
|
||||
function maybeStringifyChildren(children) {
|
||||
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
|
||||
return children;
|
||||
}
|
||||
// The children is now guaranteed to be one/more plain strings
|
||||
return Array.isArray(children) ? children.join('') : children;
|
||||
}
|
||||
export default function CodeBlock({children: rawChildren, ...props}) {
|
||||
// The Prism theme on SSR is always the default theme but the site theme can
|
||||
// be in a different mode. React hydration doesn't update DOM styles that come
|
||||
// from SSR. Hence force a re-render after mounting to apply the current
|
||||
// relevant styles.
|
||||
const isBrowser = useIsBrowser();
|
||||
const children = maybeStringifyChildren(rawChildren);
|
||||
const CodeBlockComp =
|
||||
typeof children === 'string' ? StringContent : ElementContent;
|
||||
const {reportCodeLinkPrefix} = useThemeConfig();
|
||||
|
||||
return (
|
||||
<div className='code-wrapper'>
|
||||
<div className='code-header'>
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? document?.title : ''}`)}`} target="_blank" className='report-code code-action img-url'>
|
||||
<ThemedImage alt='Report Incorrect Code' sources={{
|
||||
light: useBaseUrl('/img/alert-code.png'),
|
||||
dark: useBaseUrl('/img/alert-code-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
<CopyButton buttonClassName='code-action' text={children}>
|
||||
<ThemedImage alt='Copy to Clipboard' sources={{
|
||||
light: useBaseUrl('/img/clipboard-copy.png'),
|
||||
dark: useBaseUrl('/img/clipboard-copy-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</CopyButton>
|
||||
</div>
|
||||
<CodeBlockComp key={String(isBrowser)} {...props}>
|
||||
{children}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {useColorMode} from '@docusaurus/theme-common';
|
||||
|
||||
const allowedModes = [
|
||||
'light',
|
||||
'dark',
|
||||
'auto'
|
||||
]
|
||||
|
||||
function ColorModeToggle({className, value, onChange}) {
|
||||
const isBrowser = useIsBrowser();
|
||||
const {colorMode} = useColorMode();
|
||||
const [storageColorMode, setStorageColorMode] = useState(colorMode)
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser) {
|
||||
const previousSelected = window.localStorage.getItem('selected-color-mode')
|
||||
if (previousSelected && allowedModes.includes(previousSelected)) {
|
||||
setStorageColorMode(previousSelected)
|
||||
}
|
||||
}
|
||||
}, [isBrowser])
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser && storageColorMode === 'auto') {
|
||||
|
||||
function userPreferenceChangedHandler(event) {
|
||||
onChange(event.matches ? "dark" : "light")
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', userPreferenceChangedHandler);
|
||||
|
||||
return () => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', userPreferenceChangedHandler);
|
||||
}
|
||||
}
|
||||
}, [storageColorMode, isBrowser])
|
||||
|
||||
function handleAutoOption () {
|
||||
if (isBrowser) {
|
||||
onChange(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
}
|
||||
}
|
||||
|
||||
function handleColorModeChange(mode) {
|
||||
if (isBrowser) {
|
||||
window.localStorage.setItem('selected-color-mode', mode)
|
||||
setStorageColorMode(mode)
|
||||
}
|
||||
|
||||
if (mode === 'auto') {
|
||||
handleAutoOption();
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(mode);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx('color-mode-tabs', className)}>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
(colorMode === 'light' && storageColorMode === 'light') && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('light')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Light'}
|
||||
>
|
||||
Light
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
(colorMode === 'dark' && storageColorMode === 'dark') && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('dark')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Dark'}
|
||||
>
|
||||
Dark
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
storageColorMode === 'auto' && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('auto')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Auto'}
|
||||
>
|
||||
Auto
|
||||
</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default React.memo(ColorModeToggle);
|
||||
@@ -0,0 +1,28 @@
|
||||
/* .toggle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
transition: background var(--ifm-transition-fast);
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
[data-theme='light'] .darkToggleIcon,
|
||||
[data-theme='dark'] .lightToggleIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleButtonDisabled {
|
||||
cursor: not-allowed;
|
||||
} */
|
||||
@@ -0,0 +1,26 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import copy from 'copy-text-to-clipboard';
|
||||
import Tooltip from '../Tooltip';
|
||||
|
||||
export default function CopyButton ({ children, buttonClassName, text, tooltipClassName }) {
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
const copyTimeout = useRef(undefined);
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
copy(text);
|
||||
setIsCopied(true);
|
||||
copyTimeout.current = window.setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
}, 1000);
|
||||
}, [text]);
|
||||
|
||||
useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
|
||||
|
||||
return (
|
||||
<Tooltip text={isCopied ? `Copied!` : `Copy to Clipboard`} tooltipClassName={tooltipClassName}>
|
||||
<button className={`copy-action ${buttonClassName}`} onClick={handleCopy}>
|
||||
{children}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
@@ -9,29 +9,33 @@ import clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
|
||||
function CardContainer({href, children}) {
|
||||
function CardContainer({href, children, className}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={clsx('card padding--lg', styles.cardContainer)}>
|
||||
className={clsx('card', styles.cardContainer, className)}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
function CardLayout({href, icon, title, description}) {
|
||||
function CardLayout({href, icon, title, description, containerClassName}) {
|
||||
return (
|
||||
<CardContainer href={href}>
|
||||
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
|
||||
{icon} {title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
<CardContainer href={href} className={containerClassName}>
|
||||
{icon}
|
||||
<div className={clsx(styles.contentContainer)}>
|
||||
<h2 className={clsx(styles.cardTitle)} title={title}>
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p
|
||||
className={clsx(styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
@@ -55,25 +59,45 @@ function CardCategory({item}) {
|
||||
},
|
||||
{count: item.items.length},
|
||||
)}
|
||||
containerClassName={item.customProps?.className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.image) {
|
||||
icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
|
||||
if (item.customProps && item.customProps.themedImage) {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
<ThemedImage alt={item.label} sources={{
|
||||
light: item.customProps.themedImage.light,
|
||||
dark: item.customProps.themedImage.dark
|
||||
}} />
|
||||
</div>
|
||||
)
|
||||
} else if (item.customProps && item.customProps.image) {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
<img src={item.customProps.image} alt={item.label} />
|
||||
</div>
|
||||
);
|
||||
} else if (item.customProps && item.customProps.icon) {
|
||||
icon = item.customProps.icon;
|
||||
} else {
|
||||
icon = isInternalUrl(item.href) ? '📄️' : '🔗';
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
{isInternalUrl(item.href) ? '📄️' : '🔗'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
|
||||
return (
|
||||
<CardLayout
|
||||
href={item.href}
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={doc?.description}
|
||||
description={item.customProps?.description || doc?.description}
|
||||
containerClassName={item.customProps?.className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
|
||||
function CardContainer({href, children}) {
|
||||
const className = clsx(
|
||||
'card margin-bottom--lg padding--lg',
|
||||
styles.cardContainer,
|
||||
href && styles.cardContainerLink,
|
||||
);
|
||||
return href ? (
|
||||
<Link href={href} className={className}>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<div className={className}>{children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLayout({href, icon, title, description}) {
|
||||
return (
|
||||
<CardContainer href={href}>
|
||||
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
|
||||
{icon} {title}
|
||||
</h2>
|
||||
<div
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</div>
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function CardCategory({item}) {
|
||||
const href = findFirstCategoryLink(item);
|
||||
return (
|
||||
<CardLayout
|
||||
href={href}
|
||||
icon="🗃️"
|
||||
title={item.label}
|
||||
description={translate(
|
||||
{
|
||||
message: '{count} items',
|
||||
id: 'theme.docs.DocCard.categoryDescription',
|
||||
description:
|
||||
'The default description for a category card in the generated index about how many items this category includes',
|
||||
},
|
||||
{
|
||||
count: item.items.length,
|
||||
},
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.image) {
|
||||
icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
|
||||
} else if (item.customProps && item.customProps.icon) {
|
||||
icon = item.customProps.icon;
|
||||
} else {
|
||||
icon = isInternalUrl(item.href) ? '📄️' : '🔗';
|
||||
}
|
||||
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
return (
|
||||
<CardLayout
|
||||
href={item.href}
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={doc?.description}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocCard({item}) {
|
||||
switch (item.type) {
|
||||
case 'link':
|
||||
return <CardLink item={item} />;
|
||||
|
||||
case 'category':
|
||||
return <CardCategory item={item} />;
|
||||
|
||||
default:
|
||||
throw new Error(`unknown item type ${JSON.stringify(item)}`);
|
||||
}
|
||||
}
|
||||
@@ -2,16 +2,31 @@
|
||||
--ifm-link-color: var(--ifm-color-emphasis-800);
|
||||
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
|
||||
--ifm-link-hover-decoration: none;
|
||||
--ifm-background-color: #fff;
|
||||
--ifm-background-color-hover: #F9FAFB;
|
||||
--ifm-border-color: #E5E7EB;
|
||||
|
||||
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
background-color: var(--ifm-background-color);
|
||||
border: 1px solid var(--ifm-border-color) !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: none !important;
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
transition-property: border, box-shadow;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cardContainer {
|
||||
--ifm-background-color-hover: #2D2D2D;
|
||||
--ifm-background-color: #222222;
|
||||
--ifm-border-color: #393939;
|
||||
}
|
||||
|
||||
.cardContainer:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
|
||||
background-color: var(--ifm-background-color-hover);
|
||||
}
|
||||
|
||||
.cardContainer *:last-child {
|
||||
@@ -19,15 +34,29 @@
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 1.2rem;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
font-size: 0.8rem;
|
||||
min-height: 0.8rem;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: var(--ifm-color-content);
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.cardTitle img {
|
||||
vertical-align: bottom;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
useCurrentSidebarCategory,
|
||||
filterDocCardListItems,
|
||||
} from '@docusaurus/theme-common';
|
||||
import DocCard from '@theme/DocCard';
|
||||
function DocCardListForCurrentSidebarCategory({className}) {
|
||||
const category = useCurrentSidebarCategory();
|
||||
return <DocCardList items={category.items} className={className} />;
|
||||
}
|
||||
export default function DocCardList(props) {
|
||||
const {items, className} = props;
|
||||
if (!items) {
|
||||
return <DocCardListForCurrentSidebarCategory {...props} />;
|
||||
}
|
||||
const filteredItems = filterDocCardListItems(items);
|
||||
return (
|
||||
<section className={clsx('cards-grid', `grid-${props.colSize || '4'}`, className)}>
|
||||
{filteredItems.map((item, index) => (
|
||||
<article key={index} className={`card-wrapper margin-bottom--lg`}>
|
||||
<DocCard item={item} />
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,19 @@
|
||||
import React from 'react';
|
||||
import Footer from '@theme-original/DocItem/Footer';
|
||||
import Feedback from '../../../components/Feedback';
|
||||
import { useDoc } from '@docusaurus/theme-common/internal';
|
||||
|
||||
export default function FooterWrapper(props) {
|
||||
const { metadata } = useDoc()
|
||||
|
||||
return (
|
||||
<div className='docusaurus-mt-lg'>
|
||||
<Feedback />
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
<>
|
||||
{!metadata.frontMatter?.hide_footer && (
|
||||
<div className='docusaurus-mt-lg doc-footer'>
|
||||
<Feedback />
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||
import DocItemPaginator from '@theme/DocItem/Paginator';
|
||||
import DocVersionBanner from '@theme/DocVersionBanner';
|
||||
import DocVersionBadge from '@theme/DocVersionBadge';
|
||||
import DocItemFooter from '@theme/DocItem/Footer';
|
||||
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
|
||||
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
|
||||
import DocItemContent from '@theme/DocItem/Content';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import styles from './styles.module.css';
|
||||
/**
|
||||
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||
*/
|
||||
function useDocTOC() {
|
||||
const {frontMatter, toc} = useDoc();
|
||||
const windowSize = useWindowSize();
|
||||
const hidden = frontMatter.hide_table_of_contents;
|
||||
const canRender = !hidden && toc.length > 0;
|
||||
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
|
||||
const desktop =
|
||||
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
|
||||
<DocItemTOCDesktop />
|
||||
) : undefined;
|
||||
return {
|
||||
hidden,
|
||||
mobile,
|
||||
desktop,
|
||||
};
|
||||
}
|
||||
export default function DocItemLayout({children}) {
|
||||
const docTOC = useDocTOC();
|
||||
return (
|
||||
<div className="row markdown-row">
|
||||
<div className={clsx('col', 'markdown-doc-wrapper', !docTOC.hidden && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && <div className="col toc-wrapper">{docTOC.desktop}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.docItemContainer {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 3);
|
||||
}
|
||||
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
.docItemCol {
|
||||
width: calc(10 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
.docItemCol {
|
||||
width: calc(9 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
|
||||
import Content from '@theme/DocSidebar/Desktop/Content';
|
||||
import styles from './styles.module.css';
|
||||
import DocSidebarItem from '@theme/DocSidebarItem';
|
||||
import SearchBar from '../../SearchBar'
|
||||
|
||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
const {
|
||||
@@ -24,16 +25,21 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
isHidden && styles.sidebarHidden,
|
||||
)}>
|
||||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
|
||||
<div className={styles.sidebarSearchContainer}>
|
||||
<SearchBar />
|
||||
</div>
|
||||
<Content path={path} sidebar={sidebar} />
|
||||
<ul className={
|
||||
clsx(
|
||||
styles.sidebarFooterList
|
||||
)
|
||||
}>
|
||||
{sidebarFooter.map((item, index) => (
|
||||
<DocSidebarItem key={index} item={item} index={index} level={1} />
|
||||
))}
|
||||
</ul>
|
||||
{sidebarFooter.length > 0 && (
|
||||
<ul className={
|
||||
clsx(
|
||||
styles.sidebarFooterList
|
||||
)
|
||||
}>
|
||||
{sidebarFooter.map((item, index) => (
|
||||
<DocSidebarItem key={index} item={item} index={index} level={1} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{hideable && <CollapseButton onClick={onCollapse} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -51,4 +51,8 @@
|
||||
|
||||
.sidebarFooterList li a {
|
||||
padding-left: 1.8em !important;
|
||||
}
|
||||
|
||||
.sidebarSearchContainer {
|
||||
margin: 24px 16px 24px;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import SocialLinks from '../SocialLinks';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
export default function FooterLayout({style, links, logo, copyright}) {
|
||||
const { socialLinks } = useThemeConfig()
|
||||
|
||||
return (
|
||||
<footer
|
||||
className={clsx('footer', {
|
||||
'footer--dark': style === 'dark',
|
||||
})}>
|
||||
<div className="container container-fluid footer-container">
|
||||
{(logo || copyright || socialLinks) && (
|
||||
<div className="text--center col col--6 social-logo-container">
|
||||
<div className='logo-container'>
|
||||
{logo && <div className="margin-bottom--sm">{logo}</div>}
|
||||
{copyright}
|
||||
</div>
|
||||
{socialLinks && <SocialLinks links={socialLinks} />}
|
||||
</div>
|
||||
)}
|
||||
<div className="col col--6">
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
|
||||
export default function SocialLinks ({ links = [] }) {
|
||||
const socialIcons = {
|
||||
twitter: {
|
||||
light: useBaseUrl('/img/twitter.png'),
|
||||
dark: useBaseUrl('/img/twitter-dark.png')
|
||||
},
|
||||
github: {
|
||||
light: useBaseUrl('/img/github.png'),
|
||||
dark: useBaseUrl('/img/github-dark.png')
|
||||
},
|
||||
discord: {
|
||||
light: useBaseUrl('/img/discord.png'),
|
||||
dark: useBaseUrl('/img/discord-dark.png')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='social-links'>
|
||||
{links.map((link) => (
|
||||
<a className='social-link' href={link.href} key={link.type}>
|
||||
<ThemedImage sources={socialIcons[link.type]} alt={link.type} className={`social-icon ${link.type}-icon`} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconDiscord({width = 18, height = 14}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9957 9.49648C11.1088 9.49648 10.3776 8.6825 10.3776 7.68228C10.3776 6.68206 11.0941 5.86809 11.9957 5.86809C12.8974 5.86809 13.6276 6.68994 13.6138 7.68228C13.6 8.67462 12.9043 9.49648 11.9957 9.49648ZM6.01412 9.49648C5.12723 9.49648 4.39603 8.6825 4.39603 7.68228C4.39603 6.68206 5.11245 5.86809 6.01412 5.86809C6.9158 5.86809 7.646 6.68994 7.63221 7.68228C7.61841 8.67462 6.91579 9.49648 6.0151 9.49648H6.01412ZM15.2368 1.27496C14.0698 0.739348 12.8383 0.357423 11.573 0.138751C11.5615 0.136467 11.5495 0.137909 11.5389 0.142871C11.5283 0.147833 11.5195 0.156056 11.5138 0.166343C11.3461 0.470858 11.1938 0.783637 11.0576 1.10349C9.69368 0.896352 8.30631 0.896352 6.9424 1.10349C6.80536 0.782831 6.65075 0.469974 6.47925 0.166343C6.47328 0.156357 6.46446 0.148389 6.45392 0.14347C6.44338 0.138551 6.4316 0.136908 6.42012 0.138751C5.15472 0.356967 3.9231 0.73891 2.75627 1.27496C2.74644 1.27927 2.73818 1.28649 2.73261 1.29565C0.399097 4.78214 -0.240452 8.18288 0.0719317 11.5442C0.0728266 11.5525 0.0753836 11.5605 0.079447 11.5678C0.0835103 11.5751 0.0889988 11.5815 0.0955842 11.5866C1.45426 12.5932 2.97408 13.3616 4.59016 13.859C4.60153 13.8624 4.61367 13.8622 4.62494 13.8585C4.63621 13.8548 4.64609 13.8478 4.65323 13.8383C5.00028 13.3658 5.30779 12.8655 5.57264 12.3424C5.57617 12.3352 5.57816 12.3274 5.57846 12.3194C5.57876 12.3114 5.57739 12.3034 5.57442 12.296C5.57144 12.2886 5.56694 12.2818 5.5612 12.2762C5.55547 12.2707 5.54862 12.2664 5.54111 12.2636C5.05609 12.078 4.58653 11.8543 4.13686 11.5945C4.12818 11.5898 4.12084 11.5829 4.11553 11.5746C4.11022 11.5663 4.10713 11.5567 4.10653 11.5468C4.10594 11.537 4.10788 11.5271 4.11215 11.5182C4.11642 11.5093 4.12289 11.5016 4.13095 11.4959C4.22949 11.425 4.32015 11.3521 4.40983 11.2772C4.4178 11.2705 4.42748 11.2662 4.43776 11.2649C4.44805 11.2635 4.45852 11.265 4.46797 11.2693C7.41344 12.6144 10.6033 12.6144 13.5143 11.2693C13.5238 11.2647 13.5344 11.2628 13.5449 11.2641C13.5553 11.2653 13.5652 11.2695 13.5734 11.2762C13.6631 11.3501 13.7577 11.425 13.8533 11.4949C13.8614 11.5006 13.8679 11.5082 13.8723 11.517C13.8766 11.5259 13.8786 11.5357 13.8781 11.5456C13.8777 11.5554 13.8747 11.565 13.8694 11.5734C13.8642 11.5818 13.857 11.5887 13.8483 11.5935C13.4014 11.8541 12.9333 12.0766 12.449 12.2587C12.4415 12.2615 12.4346 12.2659 12.4289 12.2716C12.4232 12.2773 12.4187 12.2842 12.4158 12.2917C12.4129 12.2992 12.4117 12.3073 12.4121 12.3154C12.4126 12.3234 12.4148 12.3313 12.4185 12.3385C12.6873 12.8589 12.9939 13.3588 13.3359 13.8344C13.3428 13.8441 13.3527 13.8515 13.364 13.8554C13.3753 13.8593 13.3875 13.8595 13.399 13.8561C15.0178 13.3602 16.5402 12.5917 17.9005 11.5836C17.9071 11.5788 17.9127 11.5726 17.9167 11.5655C17.9208 11.5583 17.9233 11.5504 17.9241 11.5422C18.2996 7.65961 17.2954 4.28646 15.2634 1.29369C15.2574 1.28462 15.2483 1.27799 15.2378 1.27496H15.2368Z" fill="currentColor"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
export default function IconEdit({className, ...restProps}) {
|
||||
return (
|
||||
<ThemedImage alt='Edit' sources={{
|
||||
light: useBaseUrl('/img/edit.png'),
|
||||
dark: useBaseUrl('/img/edit-dark.png')
|
||||
}} className={clsx(styles.iconEdit, className)} {...restProps} />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.iconEdit {
|
||||
margin-right: 8px;
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.module.css';
|
||||
export default function IconExternalLink({width = 16, height = 16}) {
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
className={styles.iconExternalLink}>
|
||||
<path d="M12.0099 3.99023L3.94995 12.0502" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6.35156 3.94971L12.0098 3.9896L12.0505 9.64865" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.iconExternalLink {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconGitHub({width = 18, height = 18}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M9 0C4.0275 0 0 4.0275 0 9C0 12.9825 2.57625 16.3463 6.15375 17.5387C6.60375 17.6175 6.7725 17.3475 6.7725 17.1112C6.7725 16.8975 6.76125 16.1888 6.76125 15.435C4.5 15.8513 3.915 14.8837 3.735 14.3775C3.63375 14.1187 3.195 13.32 2.8125 13.1062C2.4975 12.9375 2.0475 12.5212 2.80125 12.51C3.51 12.4987 4.01625 13.1625 4.185 13.4325C4.995 14.7937 6.28875 14.4113 6.80625 14.175C6.885 13.59 7.12125 13.1962 7.38 12.9712C5.3775 12.7463 3.285 11.97 3.285 8.5275C3.285 7.54875 3.63375 6.73875 4.2075 6.10875C4.1175 5.88375 3.8025 4.96125 4.2975 3.72375C4.2975 3.72375 5.05125 3.4875 6.7725 4.64625C7.4925 4.44375 8.2575 4.3425 9.0225 4.3425C9.7875 4.3425 10.5525 4.44375 11.2725 4.64625C12.9938 3.47625 13.7475 3.72375 13.7475 3.72375C14.2425 4.96125 13.9275 5.88375 13.8375 6.10875C14.4113 6.73875 14.76 7.5375 14.76 8.5275C14.76 11.9812 12.6562 12.7463 10.6538 12.9712C10.98 13.2525 11.2613 13.7925 11.2613 14.6363C11.2613 15.84 11.25 16.8075 11.25 17.1112C11.25 17.3475 11.4187 17.6287 11.8688 17.5387C15.4237 16.3463 18 12.9712 18 9C18 4.0275 13.9725 0 9 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconTwitter({width = 18, height = 16}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5921 2.33163C17.3093 2.45705 17.0186 2.5629 16.7215 2.64883C17.0732 2.25109 17.3414 1.78309 17.5051 1.27096C17.5417 1.15617 17.5037 1.03052 17.4094 0.95544C17.3151 0.880305 17.1842 0.871305 17.0804 0.932795C16.4496 1.30696 15.7689 1.57586 15.0553 1.7331C14.3364 1.03063 13.3599 0.630859 12.3506 0.630859C10.2199 0.630859 8.48642 2.36426 8.48642 4.49488C8.48642 4.66269 8.49705 4.82956 8.51807 4.99412C5.8741 4.76198 3.41606 3.46243 1.72813 1.39191C1.66797 1.31811 1.5753 1.27834 1.48042 1.28594C1.38549 1.29338 1.30019 1.34691 1.25223 1.42919C0.909882 2.01663 0.728895 2.68849 0.728895 3.37209C0.728895 4.30315 1.06131 5.18654 1.64852 5.87681C1.46997 5.81498 1.29671 5.73769 1.13134 5.64589C1.04256 5.59648 0.934211 5.59723 0.846011 5.64781C0.757753 5.69838 0.702418 5.7914 0.700096 5.89307C0.699689 5.9102 0.699689 5.92733 0.699689 5.94469C0.699689 7.33447 1.44768 8.5857 2.59125 9.26767C2.49301 9.25785 2.39482 9.24363 2.29727 9.22499C2.19671 9.20577 2.09329 9.24101 2.02547 9.31772C1.95754 9.39436 1.93507 9.5012 1.96637 9.59875C2.38966 10.9203 3.47947 11.8924 4.79695 12.1887C3.70423 12.8731 2.45463 13.2316 1.14284 13.2316C0.869121 13.2316 0.593838 13.2155 0.324418 13.1837C0.19058 13.1677 0.0626058 13.2468 0.0170252 13.374C-0.0285554 13.5014 0.0197542 13.6433 0.133619 13.7163C1.81882 14.7969 3.76741 15.368 5.7686 15.368C9.7027 15.368 12.1638 13.5128 13.5355 11.9565C15.2461 10.0159 16.2272 7.44734 16.2272 4.9094C16.2272 4.80338 16.2255 4.6963 16.2223 4.58958C16.8972 4.08111 17.4782 3.46574 17.951 2.75846C18.0229 2.65104 18.0151 2.50907 17.9319 2.41019C17.8488 2.31125 17.7103 2.27925 17.5921 2.33163Z" fill="currentColor"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import React, {isValidElement} from 'react';
|
||||
import CopyButton from '../CopyButton';
|
||||
|
||||
export default function MDXInlineCode(props) {
|
||||
|
||||
return (
|
||||
<CopyButton text={props.children} buttonClassName="inline-code-copy" tooltipClassName="inline-tooltip">
|
||||
<code {...props} />
|
||||
</CopyButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
// Import the original mapper
|
||||
import MDXComponents from '@theme-original/MDXComponents';
|
||||
import InlineCode from './InlineCode'
|
||||
|
||||
export default {
|
||||
// Re-use the default mapping
|
||||
...MDXComponents,
|
||||
// Map the "highlight" tag to our <Highlight /> component!
|
||||
// `Highlight` will receive all props that were passed to `highlight` in MDX
|
||||
inlineCode: InlineCode,
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {
|
||||
splitNavbarItems,
|
||||
useNavbarMobileSidebar,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
import NavbarSearch from '@theme/Navbar/Search';
|
||||
import styles from './styles.module.css';
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
function NavbarItems({items}) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem {...item} key={i} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
function NavbarContentLayout({left, right}) {
|
||||
return (
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">{left}</div>
|
||||
<div className="navbar__items navbar__items--right">{right}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function NavbarContent() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
const items = useNavbarItems();
|
||||
const [leftItems, rightItems] = splitNavbarItems(items);
|
||||
return (
|
||||
<NavbarContentLayout
|
||||
left={
|
||||
// TODO stop hardcoding items?
|
||||
<>
|
||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
||||
<NavbarLogo />
|
||||
<NavbarItems items={leftItems} />
|
||||
</>
|
||||
}
|
||||
right={
|
||||
// TODO stop hardcoding items?
|
||||
// Ask the user to add the respective navbar items => more flexible
|
||||
<>
|
||||
<NavbarItems items={rightItems} />
|
||||
<NavbarColorModeToggle className={styles.colorModeToggle} />
|
||||
<NavbarSearch>
|
||||
<SearchBar />
|
||||
</NavbarSearch>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/*
|
||||
Hide color mode toggle in small viewports
|
||||
*/
|
||||
@media (max-width: 996px) {
|
||||
.colorModeToggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
|
||||
import IconClose from '@theme/Icon/Close';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
function CloseButton() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="clean-btn navbar-sidebar__close"
|
||||
onClick={() => mobileSidebar.toggle()}>
|
||||
<IconClose color="var(--ifm-color-emphasis-600)" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
export default function NavbarMobileSidebarHeader() {
|
||||
return (
|
||||
<div className="navbar-sidebar__brand">
|
||||
<NavbarLogo />
|
||||
<CloseButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
// The primary menu displays the navbar items
|
||||
export default function NavbarMobilePrimaryMenu() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
// TODO how can the order be defined for mobile?
|
||||
// Should we allow providing a different list of items?
|
||||
const items = useNavbarItems();
|
||||
return (
|
||||
<ul className="menu__list">
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem
|
||||
mobile
|
||||
{...item}
|
||||
onClick={() => mobileSidebar.toggle()}
|
||||
key={i}
|
||||
/>
|
||||
))}
|
||||
<NavbarColorModeToggle className='mobile' />
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -334,41 +334,6 @@ function SearchPageContent() {
|
||||
{!!searchResultState.totalResults &&
|
||||
documentsFoundPlural(searchResultState.totalResults)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
'col',
|
||||
'col--4',
|
||||
'text--right',
|
||||
styles.searchLogoColumn,
|
||||
)}>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://www.algolia.com/"
|
||||
aria-label={translate({
|
||||
id: 'theme.SearchPage.algoliaLabel',
|
||||
message: 'Search by Algolia',
|
||||
description: 'The ARIA label for Algolia mention',
|
||||
})}>
|
||||
<svg viewBox="0 0 168 24" className={styles.algoliaLogo}>
|
||||
<g fill="none">
|
||||
<path
|
||||
className={styles.algoliaLogoPathFill}
|
||||
d="M120.925 18.804c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17zM6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.11Line truncated
|
||||
/>
|
||||
<path
|
||||
fill="#5468FF"
|
||||
d="M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938z"
|
||||
/>
|
||||
<path
|
||||
fill="white"
|
||||
d="M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{searchResultState.items.length > 0 ? (
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.searchQueryInput,
|
||||
.searchVersionInput {
|
||||
border-radius: var(--ifm-global-radius);
|
||||
border: 2px solid var(--ifm-toc-border-color);
|
||||
border: 1px solid var(--ifm-toc-border-color);
|
||||
font: var(--ifm-font-size-base) var(--ifm-font-family-base);
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
background: var(--docsearch-searchbox-background);
|
||||
color: var(--docsearch-text-color);
|
||||
margin-bottom: 0.5rem;
|
||||
transition: border var(--ifm-transition-fast) ease;
|
||||
@@ -13,8 +13,9 @@
|
||||
|
||||
.searchQueryInput:focus,
|
||||
.searchVersionInput:focus {
|
||||
border-color: var(--docsearch-primary-color);
|
||||
border-color: var(--docsearch-searchbox-border-color);
|
||||
outline: none;
|
||||
box-shadow: var(--docsearch-searchbox-shadow);
|
||||
}
|
||||
|
||||
.searchQueryInput::placeholder {
|
||||
|
||||
@@ -1,8 +1,174 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, {useState, cloneElement, isValidElement, useEffect} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {duplicates} from '@docusaurus/theme-common';
|
||||
import {
|
||||
useScrollPositionBlocker,
|
||||
useTabGroupChoice,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import styles from './styles.module.css';
|
||||
// A very rough duck type, but good enough to guard against mistakes while
|
||||
// allowing customization
|
||||
function isTabItem(comp) {
|
||||
return 'value' in comp.props;
|
||||
}
|
||||
function TabsComponent(props) {
|
||||
const {
|
||||
lazy,
|
||||
block,
|
||||
defaultValue: defaultValueProp,
|
||||
values: valuesProp,
|
||||
groupId,
|
||||
className,
|
||||
} = props;
|
||||
const children = React.Children.map(props.children, (child) => {
|
||||
if (isValidElement(child) && isTabItem(child)) {
|
||||
return child;
|
||||
}
|
||||
// child.type.name will give non-sensical values in prod because of
|
||||
// minification, but we assume it won't throw in prod.
|
||||
throw new Error(
|
||||
`Docusaurus error: Bad <Tabs> child <${
|
||||
// @ts-expect-error: guarding against unexpected cases
|
||||
typeof child.type === 'string' ? child.type : child.type.name
|
||||
}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
|
||||
);
|
||||
});
|
||||
const values =
|
||||
valuesProp ??
|
||||
// Only pick keys that we recognize. MDX would inject some keys by default
|
||||
children.map(({props: {value, label, attributes}}) => ({
|
||||
value,
|
||||
label,
|
||||
attributes,
|
||||
}));
|
||||
const dup = duplicates(values, (a, b) => a.value === b.value);
|
||||
if (dup.length > 0) {
|
||||
throw new Error(
|
||||
`Docusaurus error: Duplicate values "${dup
|
||||
.map((a) => a.value)
|
||||
.join(', ')}" found in <Tabs>. Every value needs to be unique.`,
|
||||
);
|
||||
}
|
||||
// When defaultValueProp is null, don't show a default tab
|
||||
const defaultValue =
|
||||
defaultValueProp === null
|
||||
? defaultValueProp
|
||||
: defaultValueProp ??
|
||||
children.find((child) => child.props.default)?.props.value ??
|
||||
children[0].props.value;
|
||||
if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
|
||||
throw new Error(
|
||||
`Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
|
||||
.map((a) => a.value)
|
||||
.join(
|
||||
', ',
|
||||
)}. If you intend to show no default tab, use defaultValue={null} instead.`,
|
||||
);
|
||||
}
|
||||
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
|
||||
const [selectedValue, setSelectedValue] = useState(defaultValue);
|
||||
const tabRefs = [];
|
||||
const {blockElementScrollPositionUntilNextRender} =
|
||||
useScrollPositionBlocker();
|
||||
if (groupId != null) {
|
||||
const relevantTabGroupChoice = tabGroupChoices[groupId];
|
||||
if (
|
||||
relevantTabGroupChoice != null &&
|
||||
relevantTabGroupChoice !== selectedValue &&
|
||||
values.some((value) => value.value === relevantTabGroupChoice)
|
||||
) {
|
||||
setSelectedValue(relevantTabGroupChoice);
|
||||
}
|
||||
}
|
||||
const handleTabChange = (event) => {
|
||||
const newTab = event.currentTarget;
|
||||
const newTabIndex = tabRefs.indexOf(newTab);
|
||||
const newTabValue = values[newTabIndex].value;
|
||||
if (newTabValue !== selectedValue) {
|
||||
blockElementScrollPositionUntilNextRender(newTab);
|
||||
setSelectedValue(newTabValue);
|
||||
if (groupId != null) {
|
||||
setTabGroupChoices(groupId, String(newTabValue));
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleKeydown = (event) => {
|
||||
let focusElement = null;
|
||||
switch (event.key) {
|
||||
case 'ArrowRight': {
|
||||
const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
|
||||
focusElement = tabRefs[nextTab] ?? tabRefs[0];
|
||||
break;
|
||||
}
|
||||
case 'ArrowLeft': {
|
||||
const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
|
||||
focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
focusElement?.focus();
|
||||
};
|
||||
return (
|
||||
<div className={clsx('tabs-container', styles.tabList)}>
|
||||
<ul
|
||||
role="tablist"
|
||||
aria-orientation="horizontal"
|
||||
className={clsx(
|
||||
'tabs',
|
||||
{
|
||||
'tabs--block': block,
|
||||
},
|
||||
className,
|
||||
)}>
|
||||
{values.map(({value, label, attributes}) => (
|
||||
<li
|
||||
role="tab"
|
||||
tabIndex={selectedValue === value ? 0 : -1}
|
||||
aria-selected={selectedValue === value}
|
||||
key={value}
|
||||
ref={(tabControl) => tabRefs.push(tabControl)}
|
||||
onKeyDown={handleKeydown}
|
||||
onFocus={handleTabChange}
|
||||
onClick={handleTabChange}
|
||||
{...attributes}
|
||||
className={clsx(
|
||||
'tabs__item',
|
||||
styles.tabItem,
|
||||
attributes?.className,
|
||||
{
|
||||
'tabs__item--active': selectedValue === value,
|
||||
},
|
||||
)}>
|
||||
{label ?? value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
import Tabs from '@theme-original/Tabs';
|
||||
{lazy ? (
|
||||
cloneElement(
|
||||
children.filter(
|
||||
(tabItem) => tabItem.props.value === selectedValue,
|
||||
)[0],
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
{children.map((tabItem, i) =>
|
||||
cloneElement(tabItem, {
|
||||
key: i,
|
||||
hidden: tabItem.props.value !== selectedValue,
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TabsWrapper(props) {
|
||||
export default function Tabs(props) {
|
||||
const isBrowser = useIsBrowser();
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.localStorage.getItem('docusaurus.tab.npm2yarn')) {
|
||||
@@ -12,8 +178,13 @@ export default function TabsWrapper(props) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={`tabs-wrapper ${props.wrapperClassName}`}>
|
||||
<Tabs {...props} />
|
||||
<div className={`tabs-wrapper ${props.wrapperClassName || ''} ${props.groupId === 'npm2yarn' ? 'code-tabs' : ''}`}>
|
||||
<TabsComponent
|
||||
// Remount tabs after hydration
|
||||
// Temporary fix for https://github.com/facebook/docusaurus/issues/5653
|
||||
key={String(isBrowser)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.tabList {
|
||||
margin-bottom: var(--ifm-leading);
|
||||
}
|
||||
|
||||
.tabItem {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function Tooltip ({ children, text, tooltipClassName, ...rest }) {
|
||||
const [show, setShow] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className={`tooltip-container ${tooltipClassName || ''}`}>
|
||||
<div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
|
||||
{text}
|
||||
</div>
|
||||
<div
|
||||
onMouseEnter={() => setShow(true)}
|
||||
onMouseLeave={() => setShow(false)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
const palenightTheme = require("prism-react-renderer/themes/palenight")
|
||||
|
||||
const theme = {
|
||||
...palenightTheme,
|
||||
plain: {
|
||||
color: palenightTheme.plain.color,
|
||||
backgroundColor: '#262626'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = theme;
|
||||
Reference in new issue
Block a user