VEGA-5038 Адаптация контента страниц документации
This commit is contained in:
Русович Виолетта Игоревна
committed by
Речкина Елена Валерьевна
Речкина Елена Валерьевна
parent
9e3bf98788
commit
601bec1af2
@@ -54,10 +54,12 @@ const pageName = computed(() =>
|
||||
<div class="content-container">
|
||||
<slot name="doc-before" />
|
||||
<main class="main">
|
||||
<Content class="vp-doc" :class="[
|
||||
pageName,
|
||||
theme.externalLinkIcon && 'external-link-icon-enabled'
|
||||
]" />
|
||||
<div class="vp-doc" :class="[
|
||||
pageName,
|
||||
theme.externalLinkIcon && 'external-link-icon-enabled'
|
||||
]">
|
||||
<Content />
|
||||
</div>
|
||||
<SectionLinkList v-if="frontmatter.section_links" :links="frontmatter.section_links" />
|
||||
</main>
|
||||
<VPDocFooter>
|
||||
|
||||
@@ -6,6 +6,8 @@ import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/pre
|
||||
import VPIconEdit from 'vitepress/dist/client/theme-default/components/icons/VPIconEdit.vue'
|
||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
||||
import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
|
||||
import CustomIcon from './CustomIcon.vue'
|
||||
import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
|
||||
|
||||
const { theme, page, frontmatter } = useData()
|
||||
|
||||
@@ -43,14 +45,14 @@ const showFooter = computed(() => {
|
||||
<nav v-if="control.prev?.link || control.next?.link" class="prev-next">
|
||||
<div class="pager">
|
||||
<VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
|
||||
<span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
|
||||
<CustomIcon class="desc-prev" :icon="Icons.ArrowRight" />
|
||||
<span class="title" v-html="control.prev.text"></span>
|
||||
</VPLink>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
|
||||
<span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
|
||||
<span class="title" v-html="control.next.text"></span>
|
||||
<CustomIcon class="desc-next" :icon="Icons.ArrowRight" />
|
||||
</VPLink>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -59,7 +61,7 @@ const showFooter = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.VPDocFooter {
|
||||
margin-top: 64px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.edit-info {
|
||||
@@ -98,8 +100,6 @@ const showFooter = computed(() => {
|
||||
}
|
||||
|
||||
.prev-next {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 24px;
|
||||
display: grid;
|
||||
grid-row-gap: 8px;
|
||||
}
|
||||
@@ -115,10 +115,19 @@ const showFooter = computed(() => {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 11px 16px 13px;
|
||||
padding: 10px 16px 10px 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: border-color 0.25s;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
color: #1a73e8;
|
||||
|
||||
&.next {
|
||||
padding: 10px 12px 10px 16px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.pager-link:hover {
|
||||
@@ -136,6 +145,14 @@ const showFooter = computed(() => {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
&-next {
|
||||
rotate: -270deg;
|
||||
}
|
||||
|
||||
&-prev {
|
||||
rotate: -90deg;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
||||
@@ -1,11 +1,303 @@
|
||||
.custom-block {
|
||||
padding: 24px;
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/colors";
|
||||
@use "@beeline/design-tokens/scss/tokens/themes";
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
|
||||
|
||||
&-title {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .2px;
|
||||
margin-bottom: 12px;
|
||||
.custom-block {
|
||||
padding: 24px;
|
||||
|
||||
&-title {
|
||||
font-size: 17px !important;
|
||||
line-height: 22px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: .2px !important;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&.tip a {
|
||||
color: #1a73e8;
|
||||
|
||||
&:hover {
|
||||
color: #1a73e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 24px 24px 24px 64px;
|
||||
line-height: 24px;
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
&.custom-block.details {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.info {
|
||||
border-color: var(--vp-custom-block-info-border);
|
||||
color: var(--vp-custom-block-info-text);
|
||||
background-color: var(--vp-custom-block-info-bg);
|
||||
}
|
||||
|
||||
.custom-block.info a,
|
||||
.custom-block.info code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.custom-block.info a:hover,
|
||||
.custom-block.info a:hover > code {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.custom-block.info code {
|
||||
background-color: var(--vp-custom-block-info-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.note {
|
||||
border-color: var(--vp-custom-block-note-border);
|
||||
color: var(--vp-custom-block-note-text);
|
||||
background-color: var(--vp-custom-block-note-bg);
|
||||
}
|
||||
|
||||
.custom-block.note a,
|
||||
.custom-block.note code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.custom-block.note a:hover,
|
||||
.custom-block.note a:hover > code {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.custom-block.note code {
|
||||
background-color: var(--vp-custom-block-note-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.tip {
|
||||
border-color: var(--vp-custom-block-tip-border);
|
||||
color: var(--vp-custom-block-tip-text);
|
||||
background-color: var(--vp-custom-block-tip-bg);
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-image: var(--vp-icon-clock);
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.tip a,
|
||||
.custom-block.tip code {
|
||||
color: var(--vp-c-tip-1);
|
||||
}
|
||||
|
||||
.custom-block.tip a:hover,
|
||||
.custom-block.tip a:hover > code {
|
||||
color: var(--vp-c-tip-2);
|
||||
}
|
||||
|
||||
.custom-block.tip code {
|
||||
background-color: var(--vp-custom-block-tip-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.important {
|
||||
border-color: var(--vp-custom-block-important-border);
|
||||
color: var(--vp-custom-block-important-text);
|
||||
background-color: var(--vp-custom-block-important-bg);
|
||||
}
|
||||
|
||||
.custom-block.important a,
|
||||
.custom-block.important code {
|
||||
color: var(--vp-c-important-1);
|
||||
}
|
||||
|
||||
.custom-block.important a:hover,
|
||||
.custom-block.important a:hover > code {
|
||||
color: var(--vp-c-important-2);
|
||||
}
|
||||
|
||||
.custom-block.important code {
|
||||
background-color: var(--vp-custom-block-important-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.warning {
|
||||
border-color: var(--vp-custom-block-warning-border);
|
||||
color: var(--vp-custom-block-warning-text);
|
||||
background-color: var(--vp-custom-block-warning-bg);
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-image: var(--vp-icon-info-circled);
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.warning a,
|
||||
.custom-block.warning code {
|
||||
color: $color-text-link;
|
||||
}
|
||||
|
||||
.custom-block.warning a:hover,
|
||||
.custom-block.warning a:hover > code {
|
||||
color: $color-text-link;
|
||||
}
|
||||
|
||||
.custom-block.warning code {
|
||||
background-color: var(--vp-custom-block-warning-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.danger {
|
||||
border-color: var(--vp-custom-block-danger-border);
|
||||
color: var(--vp-custom-block-danger-text);
|
||||
background-color: var(--vp-custom-block-danger-bg);
|
||||
|
||||
&::before {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-image: var(--vp-icon-warning-triangle);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.danger a,
|
||||
.custom-block.danger code {
|
||||
color: var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
.custom-block.danger a:hover,
|
||||
.custom-block.danger a:hover > code {
|
||||
color: var(--vp-c-danger-2);
|
||||
}
|
||||
|
||||
.custom-block.danger code {
|
||||
background-color: var(--vp-custom-block-danger-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.caution {
|
||||
border-color: var(--vp-custom-block-caution-border);
|
||||
color: var(--vp-custom-block-caution-text);
|
||||
background-color: var(--vp-custom-block-caution-bg);
|
||||
}
|
||||
|
||||
.custom-block.caution a,
|
||||
.custom-block.caution code {
|
||||
color: var(--vp-c-caution-1);
|
||||
}
|
||||
|
||||
.custom-block.caution a:hover,
|
||||
.custom-block.caution a:hover > code {
|
||||
color: var(--vp-c-caution-2);
|
||||
}
|
||||
|
||||
.custom-block.caution code {
|
||||
background-color: var(--vp-custom-block-caution-code-bg);
|
||||
}
|
||||
|
||||
.custom-block.details {
|
||||
border-color: var(--vp-custom-block-details-border);
|
||||
color: var(--vp-custom-block-details-text);
|
||||
background-color: transparent;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
|
||||
pre {
|
||||
border: none !important;
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&:open {
|
||||
&.custom-block.details summary {
|
||||
background-color: $color-background-base-hover;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
|
||||
&::before {
|
||||
background-image: var(--vp-icon-nav-arrow-up);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.details a {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.custom-block.details a:hover,
|
||||
.custom-block.details a:hover > code {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.custom-block.details code {
|
||||
background-color: var(--vp-custom-block-details-code-bg);
|
||||
}
|
||||
|
||||
.custom-block-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.custom-block p + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.custom-block.details summary {
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 19px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.2px;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
content: '';
|
||||
background-image: var(--vp-icon-nav-arrow-down);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.details summary + p {
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.custom-block a {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.custom-block a:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.custom-block code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
}
|
||||
|
||||
.custom-block.custom-block th,
|
||||
.custom-block.custom-block blockquote > p {
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,135 +1,566 @@
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/colors";
|
||||
@use "@beeline/design-tokens/scss/tokens/themes";
|
||||
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
|
||||
|
||||
@mixin font_style($fontSize, $fontWeight, $lineHeight, $letterSpacing) {
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
line-height: $lineHeight;
|
||||
letter-spacing: $letterSpacing;
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
line-height: $lineHeight;
|
||||
letter-spacing: $letterSpacing;
|
||||
}
|
||||
|
||||
@mixin generate-numbered-list-styles($start, $end) {
|
||||
@for $counter from $start through $end {
|
||||
$counter-name: list + ' ' + ($counter - 1);
|
||||
ol[start*="#{$counter}"] {
|
||||
list-style-type: none;
|
||||
counter-reset: $counter-name;
|
||||
}
|
||||
@for $counter from $start through $end {
|
||||
$counter-name: list + ' ' + ($counter - 1);
|
||||
ol[start*="#{$counter}"] {
|
||||
list-style-type: none;
|
||||
counter-reset: $counter-name;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
font-size: 17px;
|
||||
font-size: 17px;
|
||||
|
||||
// Titles
|
||||
h1 {
|
||||
@include font_style(44px, 500, 46px, 0.3px);
|
||||
margin-bottom: 24px;
|
||||
// Titles
|
||||
h1 {
|
||||
@include font_style(44px, 500, 56px, 0.3px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin: 40px 0 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font_style(20px, 700, 28px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font_style(17px, 500, 22px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// Text
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: list;
|
||||
margin: 0 0 0 50px;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
|
||||
& > * + * {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@include generate-numbered-list-styles(2, 50);
|
||||
|
||||
ol li {
|
||||
position: relative;
|
||||
padding: 8px 0 0 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 8px;
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
}
|
||||
|
||||
ol li:nth-last-of-type(n+2)::after {
|
||||
content: '';
|
||||
border-left: 1px solid rgb(201, 197, 197);
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
left: -30px;
|
||||
top: 43px;
|
||||
bottom: -25px;
|
||||
}
|
||||
|
||||
ol li::before {
|
||||
content: counter(list);
|
||||
counter-increment: list;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: colors.$color-background-brand;
|
||||
color: themes.$color-text-active;
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul li:nth-last-of-type(n):after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
ol ul li::before {
|
||||
counter-increment: list;
|
||||
content: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol li:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ol li p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: #1a73e8;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus-visible, &:focus, &:active {
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font_style(34px, 400, 36px, 0.3px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font_style(20px, 700, 28px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font_style(17px, 500, 22px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// Text
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: list;
|
||||
margin: 0 0 0 50px;
|
||||
padding: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
|
||||
& > * + * {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@include generate-numbered-list-styles(2, 50);
|
||||
|
||||
ol li {
|
||||
position: relative;
|
||||
padding: 5px 0 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
ol li::before {
|
||||
content: counter(list);
|
||||
counter-increment: list;
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -48px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: colors.$color-background-brand;
|
||||
color: themes.$color-text-active;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul li:nth-last-of-type(n):after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
ol ul li::before {
|
||||
counter-increment: list;
|
||||
content: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol li:last-child, ul li:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
ol li p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: #1a73e8;
|
||||
|
||||
&:hover, &:focus-visible, &:focus, &:active {
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #7e00ed;
|
||||
}
|
||||
&:visited {
|
||||
color: #7e00ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.plugin-tabs {
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
background-color: revert-layer !important;
|
||||
|
||||
&--tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
&--content {
|
||||
padding: 24px !important;
|
||||
|
||||
.language- {
|
||||
border: none;
|
||||
padding: 0px !important;
|
||||
overflow-y: hidden !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-color);
|
||||
}
|
||||
|
||||
.vp-doc :not(pre) > code {
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
background-color: var(--vp-code-bg);
|
||||
transition:
|
||||
color 0.25s,
|
||||
background-color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc a > code {
|
||||
color: var(--vp-code-link-color);
|
||||
}
|
||||
|
||||
.vp-doc a:hover > code {
|
||||
color: var(--vp-code-link-hover-color);
|
||||
}
|
||||
|
||||
.vp-doc h1 > code,
|
||||
.vp-doc h2 > code,
|
||||
.vp-doc h3 > code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.vp-doc div[class*='language-'],
|
||||
.vp-block {
|
||||
position: relative;
|
||||
margin: 16px -24px;
|
||||
background-color: transparent;
|
||||
overflow-x: auto;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.vp-doc div[class*='language-'],
|
||||
.vp-block {
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.vp-doc li div[class*='language-'] {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc div[class*='language-'] + div[class*='language-'],
|
||||
.vp-doc div[class$='-api'] + div[class*='language-'],
|
||||
.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] pre,
|
||||
.vp-doc [class*='language-'] code {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
/*rtl:ignore*/
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code {
|
||||
display: block;
|
||||
padding: 0px;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
line-height: var(--vp-code-line-height);
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-color);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .highlighted {
|
||||
background-color: var(--vp-code-line-highlight-color);
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .highlighted.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .highlighted.warning {
|
||||
background-color: var(--vp-code-line-warning-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff {
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff::before {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0.095rem);
|
||||
opacity: 0.4;
|
||||
transition:
|
||||
filter 0.35s,
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
filter 0.35s,
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.remove {
|
||||
background-color: var(--vp-code-line-diff-remove-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.add {
|
||||
background-color: var(--vp-code-line-diff-add-color);
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] code .diff.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
}
|
||||
|
||||
.vp-doc div[class*='language-'].line-numbers-mode {
|
||||
/*rtl:ignore*/
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.vp-doc .line-numbers-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
/*rtl:ignore*/
|
||||
border-right: 1px solid var(--vp-code-block-divider-color);
|
||||
padding-top: 20px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
line-height: var(--vp-code-line-height);
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-line-number-color);
|
||||
transition:
|
||||
border-color 0.5s,
|
||||
color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
/*rtl:ignore*/
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
background-image: var(--vp-icon-copy);
|
||||
background-position: 50%;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
background-color 0.25s,
|
||||
opacity 0.25s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-']:hover > button.copy,
|
||||
.vp-doc [class*='language-'] > button.copy:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy:hover,
|
||||
.vp-doc [class*='language-'] > button.copy.copied {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy.copied,
|
||||
.vp-doc [class*='language-'] > button.copy:hover.copied {
|
||||
/*rtl:ignore*/
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > button.copy.copied::before,
|
||||
.vp-doc [class*='language-'] > button.copy:hover.copied::before {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(-100% - 1px));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
/*rtl:ignore*/
|
||||
border-right: 0;
|
||||
padding: 0 10px;
|
||||
width: fit-content;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-copy-code-active-text);
|
||||
white-space: nowrap;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-'] > span.lang {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
/*rtl:ignore*/
|
||||
right: 8px;
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-lang-color);
|
||||
transition:
|
||||
color 0.4s,
|
||||
opacity 0.4s;
|
||||
}
|
||||
|
||||
.vp-doc [class*='language-']:hover > button.copy + span.lang,
|
||||
.vp-doc [class*='language-'] > button.copy:focus + span.lang {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Banner
|
||||
.vp-doc .custom-block {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p {
|
||||
margin: 8px 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] {
|
||||
margin: 8px 0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block .vp-code-group .tabs {
|
||||
margin: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
// Table
|
||||
.vp-doc table {
|
||||
display: block;
|
||||
border-collapse: collapse;
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-border;
|
||||
// width: 100%;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.vp-doc tr {
|
||||
border-top: hidden;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.vp-doc tr:nth-child(2n) {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.vp-doc th,
|
||||
.vp-doc td {
|
||||
padding: 18px 16px;
|
||||
padding: 18px 16px;
|
||||
width: 100vh;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vp-doc tbody tr {
|
||||
border-top: 1px solid $color-border;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc th {
|
||||
@include font_style(15px, 500, 20px, 0.2px);
|
||||
color: $color-text-active;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-top: 1px solid $color-border;
|
||||
}
|
||||
|
||||
.vp-doc td {
|
||||
@include font_style(15px, 400, 18px, 0.2px);
|
||||
padding: 18px 16px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-right: hidden;
|
||||
border-left: hidden;
|
||||
color: $color-text-active;
|
||||
}
|
||||
|
||||
// Block
|
||||
.vp-doc .custom-block {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p {
|
||||
margin: 8px 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] {
|
||||
margin: 40px 0;
|
||||
border-radius: 12px;
|
||||
|
||||
&.vp-doc .custom-block {
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-doc .custom-block div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block .vp-code-group .tabs {
|
||||
margin: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
:root {
|
||||
--vp-font-family-base: 'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--vp-font-family-mono: 'Roboto Mono', monospace;
|
||||
--vp-font-family-mono: 'JetBrains Mono', monospace;
|
||||
|
||||
// Code
|
||||
// --vp-code-font-size: ;
|
||||
@@ -183,16 +183,18 @@
|
||||
--vp-custom-block-code-font-size: 17px;
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-bg: #f1f1f3;
|
||||
--vp-custom-block-tip-bg: #f9f9f9;
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||
--vp-custom-block-warning-bg: #fff4e1;
|
||||
--vp-custom-block-danger-bg: #ffecef;
|
||||
--vp-custom-block-warning-bg: #e3f2ff;
|
||||
--vp-custom-block-warning-icon: #1a73e8;
|
||||
--vp-custom-block-danger-bg: #fff4e1;
|
||||
--vp-custom-block-danger-icon: #ff9419;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-custom-block-warning-bg: #3d392a;
|
||||
--vp-custom-block-warning-bg: #132338;
|
||||
--vp-custom-block-tip-bg: #36383c;
|
||||
--vp-custom-block-danger-bg: #371313;
|
||||
--vp-custom-block-danger-bg: #3d392a;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -204,5 +206,11 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-icon-copy: url('../../../public/icons/copy.svg');
|
||||
--vp-icon-clock: url('../../../public/icons/clock.svg');
|
||||
--vp-icon-info-circled: url('../../../public/icons/info_circled.svg');
|
||||
--vp-icon-warning-triangle: url('../../../public/icons/warning_triangle.svg');
|
||||
--vp-icon-nav-arrow-down: url('../../../public/icons/nav_arrow_down.svg');
|
||||
--vp-icon-nav-arrow-up: url('../../../public/icons/nav_arrow_up.svg');
|
||||
--vp-sidebar-width: 320px;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.164 1.280 C 8.407 1.511,5.917 2.733,4.056 4.768 C 0.808 8.319,0.331 13.626,2.894 17.705 C 4.604 20.429,7.414 22.228,10.640 22.665 C 11.247 22.747,12.633 22.758,13.220 22.685 C 15.814 22.362,18.039 21.238,19.844 19.338 C 22.249 16.807,23.262 13.117,22.495 9.684 C 21.506 5.258,17.875 1.930,13.391 1.342 C 12.804 1.265,11.708 1.235,11.164 1.280 M12.992 2.802 C 14.034 2.915,15.102 3.227,16.060 3.699 C 18.938 5.114,20.862 7.872,21.202 11.070 C 21.262 11.631,21.231 12.869,21.143 13.417 C 20.834 15.352,19.950 17.095,18.569 18.494 C 17.813 19.259,17.035 19.820,16.060 20.300 C 12.202 22.200,7.549 21.173,4.821 17.820 C 3.712 16.458,2.991 14.732,2.802 12.992 C 2.748 12.493,2.748 11.507,2.802 11.008 C 2.988 9.301,3.702 7.571,4.779 6.220 C 5.100 5.818,5.759 5.161,6.200 4.805 C 7.555 3.710,9.254 2.996,10.960 2.804 C 11.400 2.755,12.544 2.754,12.992 2.802 M11.740 5.300 C 11.540 5.371,11.339 5.585,11.283 5.786 C 11.223 6.004,11.224 12.001,11.285 12.219 C 11.341 12.423,11.577 12.659,11.781 12.715 C 12.004 12.777,17.996 12.777,18.219 12.715 C 18.432 12.656,18.660 12.422,18.719 12.202 C 18.827 11.802,18.599 11.390,18.209 11.282 C 18.113 11.255,17.109 11.240,15.410 11.240 L 12.760 11.240 12.760 8.590 C 12.760 6.780,12.746 5.890,12.715 5.781 C 12.635 5.493,12.285 5.236,11.980 5.242 C 11.936 5.243,11.828 5.269,11.740 5.300 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.277 3.294 C 3.867 3.406,3.553 3.676,3.364 4.078 L 3.260 4.300 3.260 9.500 L 3.260 14.700 3.365 14.925 C 3.514 15.241,3.725 15.458,4.033 15.610 L 4.298 15.740 6.267 15.752 L 8.236 15.764 8.248 17.732 L 8.260 19.700 8.365 19.925 C 8.514 20.241,8.725 20.458,9.033 20.610 L 9.298 20.740 14.500 20.740 L 19.702 20.740 19.967 20.610 C 20.275 20.458,20.486 20.241,20.635 19.925 L 20.740 19.700 20.740 14.500 L 20.740 9.300 20.634 9.073 C 20.484 8.754,20.247 8.513,19.950 8.375 L 19.700 8.260 17.732 8.248 L 15.764 8.236 15.752 6.268 L 15.740 4.300 15.634 4.073 C 15.484 3.754,15.247 3.513,14.950 3.375 L 14.700 3.260 9.580 3.252 C 5.607 3.246,4.419 3.256,4.277 3.294 M14.240 6.499 L 14.240 8.237 11.770 8.249 L 9.300 8.260 9.075 8.365 C 8.759 8.514,8.542 8.725,8.390 9.033 L 8.260 9.298 8.249 11.769 L 8.237 14.240 6.499 14.240 L 4.760 14.240 4.760 9.500 L 4.760 4.760 9.500 4.760 L 14.240 4.760 14.240 6.499 M19.240 14.500 L 19.240 19.240 14.500 19.240 L 9.760 19.240 9.760 14.500 L 9.760 9.760 14.500 9.760 L 19.240 9.760 19.240 14.500 " stroke="none" fill-rule="evenodd" fill="rgba(25, 28, 52, 0.7)"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="rgb(26, 115, 232)" xmlns="http://www.w3.org/2000/svg"><path d="M11.360 1.265 C 9.727 1.403,8.426 1.757,7.127 2.418 C 2.743 4.648,0.464 9.535,1.524 14.429 C 2.035 16.786,3.511 19.075,5.472 20.551 C 6.984 21.689,8.581 22.352,10.560 22.665 C 11.147 22.757,12.886 22.757,13.480 22.663 C 16.062 22.258,18.197 21.125,19.948 19.231 C 21.260 17.812,22.172 15.993,22.539 14.060 C 22.802 12.680,22.794 11.152,22.518 9.811 C 21.989 7.240,20.388 4.798,18.216 3.251 C 16.755 2.210,14.862 1.480,13.217 1.323 C 12.753 1.278,11.620 1.243,11.360 1.265 M13.142 2.822 C 14.244 2.966,15.085 3.223,16.090 3.725 C 17.514 4.435,18.595 5.362,19.536 6.678 C 19.884 7.166,20.076 7.496,20.383 8.139 C 20.760 8.929,20.969 9.584,21.146 10.540 C 21.259 11.149,21.249 12.831,21.130 13.500 C 20.766 15.526,19.952 17.089,18.501 18.542 C 17.652 19.392,16.850 19.952,15.806 20.423 C 13.274 21.564,10.578 21.550,8.063 20.382 C 6.267 19.549,4.652 17.975,3.751 16.182 C 3.108 14.902,2.809 13.689,2.772 12.220 C 2.750 11.334,2.801 10.786,2.985 9.960 C 3.284 8.616,3.959 7.212,4.808 6.168 C 6.036 4.660,7.867 3.498,9.765 3.023 C 10.791 2.766,12.108 2.688,13.142 2.822 M11.767 6.829 C 11.612 6.858,11.333 7.159,11.281 7.353 C 11.194 7.679,11.360 8.055,11.652 8.196 C 12.159 8.442,12.723 8.112,12.726 7.568 C 12.728 7.039,12.319 6.723,11.767 6.829 M11.720 10.864 C 11.550 10.938,11.414 11.060,11.326 11.220 C 11.267 11.327,11.259 11.604,11.248 13.840 C 11.241 15.215,11.246 16.434,11.260 16.548 C 11.289 16.786,11.404 16.979,11.592 17.106 C 12.018 17.393,12.607 17.149,12.716 16.640 C 12.775 16.368,12.775 11.654,12.717 11.401 C 12.610 10.938,12.137 10.683,11.720 10.864 " stroke="none" fill-rule="evenodd"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.740 8.300 C 5.326 8.447,5.131 8.963,5.341 9.359 C 5.370 9.414,6.795 10.858,8.507 12.567 C 11.334 15.389,11.636 15.678,11.796 15.720 C 11.985 15.770,12.194 15.747,12.359 15.659 C 12.414 15.630,13.858 14.205,15.567 12.493 C 18.375 9.679,18.678 9.363,18.720 9.205 C 18.870 8.634,18.366 8.130,17.795 8.280 C 17.637 8.322,17.346 8.600,14.810 11.133 L 12.000 13.939 9.190 11.133 C 6.772 8.718,6.358 8.320,6.220 8.283 C 6.014 8.228,5.936 8.231,5.740 8.300 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
|
||||
|
After Width: | Height: | Size: 618 B |
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.742 8.298 C 11.618 8.344,10.899 9.041,8.455 11.488 C 5.625 14.320,5.322 14.637,5.280 14.795 C 5.130 15.366,5.634 15.870,6.205 15.720 C 6.363 15.678,6.654 15.400,9.190 12.867 L 12.000 10.061 14.810 12.867 C 17.346 15.400,17.637 15.678,17.795 15.720 C 18.366 15.870,18.870 15.366,18.720 14.795 C 18.678 14.637,18.375 14.321,15.567 11.507 C 13.858 9.795,12.411 8.369,12.351 8.337 C 12.184 8.248,11.921 8.232,11.742 8.298 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
|
||||
|
After Width: | Height: | Size: 588 B |
@@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="rgb(255, 148, 25)" xmlns="http://www.w3.org/2000/svg"><path d="M11.289 2.361 C 11.128 2.403,10.867 2.505,10.709 2.589 C 10.403 2.749,9.945 3.150,9.761 3.419 C 9.701 3.507,7.808 6.784,5.556 10.700 C 2.401 16.186,1.433 17.898,1.343 18.160 C 1.236 18.467,1.225 18.548,1.226 19.000 C 1.227 19.431,1.241 19.544,1.332 19.820 C 1.594 20.612,2.220 21.285,2.954 21.563 C 3.483 21.763,3.212 21.757,12.000 21.757 C 20.809 21.757,20.515 21.764,21.056 21.559 C 21.629 21.342,22.222 20.794,22.502 20.221 C 22.714 19.787,22.779 19.489,22.776 18.960 C 22.774 18.559,22.759 18.456,22.657 18.160 C 22.566 17.896,21.623 16.227,18.444 10.700 C 16.192 6.784,14.299 3.507,14.239 3.419 C 14.055 3.150,13.597 2.749,13.292 2.589 C 12.708 2.282,11.928 2.193,11.289 2.361 M12.546 3.894 C 12.653 3.948,12.806 4.062,12.887 4.147 C 13.045 4.311,21.133 18.340,21.232 18.620 C 21.306 18.831,21.278 19.332,21.182 19.520 C 21.056 19.766,20.855 19.979,20.635 20.101 L 20.420 20.220 12.000 20.220 L 3.580 20.220 3.365 20.101 C 3.145 19.979,2.944 19.766,2.818 19.520 C 2.722 19.332,2.694 18.831,2.768 18.620 C 2.867 18.340,10.955 4.311,11.113 4.147 C 11.266 3.986,11.496 3.849,11.700 3.795 C 11.916 3.738,12.336 3.787,12.546 3.894 M11.740 8.300 C 11.540 8.371,11.339 8.585,11.283 8.786 C 11.226 8.993,11.224 13.002,11.282 13.209 C 11.390 13.599,11.802 13.827,12.202 13.719 C 12.422 13.660,12.656 13.432,12.715 13.219 C 12.777 12.999,12.777 9.001,12.715 8.781 C 12.635 8.493,12.285 8.236,11.980 8.242 C 11.936 8.243,11.828 8.269,11.740 8.300 M11.787 16.281 C 11.283 16.432,11.090 17.080,11.429 17.484 C 11.788 17.910,12.448 17.813,12.684 17.300 C 12.948 16.729,12.394 16.099,11.787 16.281 " stroke="none" fill-rule="evenodd" fill="rgb(255, 148, 25)"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -4,7 +4,7 @@
|
||||
|
||||
## Перед началом работы
|
||||
|
||||
- Изучите [типы сетевых адаптеров виртуального дата центра](./about-adapters.md) и определите подходящий для вашего сценария.
|
||||
- Изучите [типы сетевых адаптеров виртуального дата центра](about.md#сетевые-адаптеры) и определите подходящий для вашего сценария.
|
||||
- [Создайте локальную сеть](./create-network.md) в виртуальном дата-центре и [подключите ее к шлюзу](./connect-to-edge-gateway.md).
|
||||
- [Сгенерируйте и сохраните ключ PSK для аутентификации](./create-psk.md).
|
||||
- Согласуйте параметры шифрования и аутентификации IKE и IPSec, которые будут использоваться на обеих сторонах туннеля.
|
||||
|
||||
Reference in New Issue
Block a user