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(34px, 400, 36px, 0.3px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
h3 {
|
||||
@include font_style(26px, 500, 32px, 0.2px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font_style(20px, 700, 28px, 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;
|
||||
}
|
||||
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;
|
||||
// Text
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: list;
|
||||
margin: 0 0 0 50px;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
|
||||
& > * + * {
|
||||
margin-top: 50px;
|
||||
}
|
||||
& > * + * {
|
||||
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;
|
||||
}
|
||||
|
||||
@include generate-numbered-list-styles(2, 50);
|
||||
|
||||
ol li {
|
||||
position: relative;
|
||||
padding: 5px 0 0 0;
|
||||
line-height: 1.4;
|
||||
&:visited {
|
||||
color: #7e00ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 34px;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
// Code
|
||||
.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-color);
|
||||
}
|
||||
|
||||
ul li:nth-last-of-type(n):after {
|
||||
content: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
ol ul li::before {
|
||||
counter-increment: list;
|
||||
content: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.vp-doc a > code {
|
||||
color: var(--vp-code-link-color);
|
||||
}
|
||||
|
||||
ol li:last-child, ul li:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.vp-doc a:hover > code {
|
||||
color: var(--vp-code-link-hover-color);
|
||||
}
|
||||
|
||||
ol li p {
|
||||
margin-top: 0;
|
||||
}
|
||||
.vp-doc h1 > code,
|
||||
.vp-doc h2 > code,
|
||||
.vp-doc h3 > code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 22px;
|
||||
}
|
||||
.vp-doc div[class*='language-'],
|
||||
.vp-block {
|
||||
position: relative;
|
||||
margin: 16px -24px;
|
||||
background-color: transparent;
|
||||
overflow-x: auto;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: #1a73e8;
|
||||
@media (min-width: 640px) {
|
||||
.vp-doc div[class*='language-'],
|
||||
.vp-block {
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus-visible, &:focus, &:active {
|
||||
color: #1a73e8;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.vp-doc li div[class*='language-'] {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #7e00ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user