Merge branch 'feature/header#VEGA-4759' into 'main'
VEGA-4759 Адаптация UI шапки портала документации See merge request common/vega/beecloud-docs!20
This commit is contained in:
Речкина Елена Валерьевна
+21
-20
@@ -42,7 +42,7 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
|
|||||||
|
|
||||||
// https://vitepress.dev/reference/site-config
|
// https://vitepress.dev/reference/site-config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
title: "Beeline Cloud",
|
title: "cloud",
|
||||||
description: "Документация Beeline Cloud",
|
description: "Документация Beeline Cloud",
|
||||||
head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
|
head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
|
||||||
base: typeof new_version !== 'undefined' ? '/' : '/docs/',
|
base: typeof new_version !== 'undefined' ? '/' : '/docs/',
|
||||||
@@ -63,7 +63,11 @@ export default defineConfig({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
logo: '/favicon.svg',
|
logo: {
|
||||||
|
light: '/logo-light-theme.svg',
|
||||||
|
dark: '/logo-dark-theme.svg',
|
||||||
|
alt: 'cloud',
|
||||||
|
},
|
||||||
search: {
|
search: {
|
||||||
provider: 'local',
|
provider: 'local',
|
||||||
options: {
|
options: {
|
||||||
@@ -90,30 +94,27 @@ export default defineConfig({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// https://vitepress.dev/reference/default-theme-config
|
// https://vitepress.dev/reference/default-theme-config
|
||||||
// nav: [
|
nav: [
|
||||||
// ],
|
{
|
||||||
|
text: 'Документация',
|
||||||
// socialLinks: [
|
link: '/guide/',
|
||||||
// { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
|
},
|
||||||
// ],
|
{
|
||||||
|
text: 'API',
|
||||||
// editLink: {
|
link: '',
|
||||||
// pattern: 'https://git.vimpelcom.ru/-/ide/project/common/vega/docs/edit/develop/-/src/:path',
|
},
|
||||||
// text: 'Отредактируйте эту страницу на GitLab'
|
{
|
||||||
// },
|
text: 'Terraform',
|
||||||
|
// link: '/terraform/',
|
||||||
|
link: '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
docFooter: {
|
docFooter: {
|
||||||
next: 'Вперед',
|
next: 'Вперед',
|
||||||
prev: 'Назад'
|
prev: 'Назад'
|
||||||
},
|
},
|
||||||
|
|
||||||
// lastUpdated: {
|
|
||||||
// text: 'Обновлена',
|
|
||||||
// formatOptions: {
|
|
||||||
// dateStyle: 'long',
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
|
|
||||||
outline: {
|
outline: {
|
||||||
label: 'Содержание'
|
label: 'Содержание'
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
tag?: string
|
tag?: string
|
||||||
size?: 'medium' | 'big'
|
size?: 'medium' | 'big' | 'small'
|
||||||
theme?: 'brand' | 'alt' | 'sponsor'
|
theme?: 'brand' | 'alt' | 'sponsor'
|
||||||
text: string
|
text: string
|
||||||
href?: string
|
href?: string
|
||||||
@@ -51,6 +51,15 @@ const component = computed(() => {
|
|||||||
transition: color 0.1s, border-color 0.1s, background-color 0.1s;
|
transition: color 0.1s, border-color 0.1s, background-color 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.VPButton.small {
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.VPButton.medium {
|
.VPButton.medium {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNav
|
|||||||
import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
|
import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
|
||||||
import CustomNavBarTitle from './CustomNavBarTitle.vue'
|
import CustomNavBarTitle from './CustomNavBarTitle.vue'
|
||||||
import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
|
import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
|
||||||
|
import CustomButton from './CustomButton.vue'
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
isScreenOpen: boolean
|
isScreenOpen: boolean
|
||||||
@@ -27,6 +28,7 @@ const { hasLocalNav } = useLocalNav()
|
|||||||
const { frontmatter } = useData()
|
const { frontmatter } = useData()
|
||||||
|
|
||||||
const classes = ref<Record<string, boolean>>({})
|
const classes = ref<Record<string, boolean>>({})
|
||||||
|
const loginUrl = import.meta.env.VITE_LOGIN_URL
|
||||||
|
|
||||||
watchPostEffect(() => {
|
watchPostEffect(() => {
|
||||||
classes.value = {
|
classes.value = {
|
||||||
@@ -51,14 +53,9 @@ watchPostEffect(() => {
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="content-body">
|
<div class="content-body">
|
||||||
<slot name="nav-bar-content-before" />
|
<slot name="nav-bar-content-before" />
|
||||||
<VPNavBarSearch class="search" />
|
|
||||||
<VPNavBarMenu class="menu" />
|
<VPNavBarMenu class="menu" />
|
||||||
<VPNavBarTranslations class="translations" />
|
<VPNavBarSearch class="search" />
|
||||||
<VPNavBarAppearance class="appearance" />
|
<CustomButton text="Войти" size="small" :href="loginUrl" />
|
||||||
<VPNavBarSocialLinks class="social-links" />
|
|
||||||
<VPNavBarExtra class="extra" />
|
|
||||||
<slot name="nav-bar-content-after" />
|
|
||||||
<VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -105,7 +102,7 @@ watchPostEffect(() => {
|
|||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding: 0 32px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -187,7 +184,7 @@ watchPostEffect(() => {
|
|||||||
|
|
||||||
.content-body {
|
.content-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: var(--vp-nav-height);
|
height: var(--vp-nav-height);
|
||||||
transition: background-color 0.5s;
|
transition: background-color 0.5s;
|
||||||
@@ -221,6 +218,10 @@ watchPostEffect(() => {
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
background-color: var(--vp-c-divider);
|
background-color: var(--vp-c-divider);
|
||||||
content: "";
|
content: "";
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu + .appearance::before,
|
.menu + .appearance::before,
|
||||||
@@ -251,4 +252,9 @@ watchPostEffect(() => {
|
|||||||
background-color: rgba(255, 255, 255, 0.2);
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,12 +3,16 @@ import type { DefaultTheme } from 'vitepress/theme'
|
|||||||
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
||||||
import { isActive } from 'vitepress/dist/client/shared'
|
import { isActive } from 'vitepress/dist/client/shared'
|
||||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
item: DefaultTheme.NavItemWithLink
|
item: DefaultTheme.NavItemWithLink
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { page } = useData()
|
const { page } = useData()
|
||||||
|
const textRef = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
const wrapperWidth = computed(() => textRef.value?.offsetWidth)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -20,22 +24,32 @@ const { page } = useData()
|
|||||||
page.relativePath,
|
page.relativePath,
|
||||||
item.activeMatch || item.link,
|
item.activeMatch || item.link,
|
||||||
!!item.activeMatch
|
!!item.activeMatch
|
||||||
)
|
),
|
||||||
|
disabled: !isActive(
|
||||||
|
page.relativePath,
|
||||||
|
item.activeMatch || item.link,
|
||||||
|
!!item.activeMatch
|
||||||
|
) && !item.link ? 'disabled' : '',
|
||||||
}"
|
}"
|
||||||
:href="item.link"
|
:href="item.link"
|
||||||
:target="item.target"
|
:target="item.target"
|
||||||
:rel="item.rel"
|
:rel="item.rel"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<span v-html="item.text"></span>
|
<span
|
||||||
|
ref="textRef"
|
||||||
|
v-html="item.text"
|
||||||
|
/>
|
||||||
</VPLink>
|
</VPLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
|
@use '@beeline/design-tokens/scss/tokens/globals/colors';
|
||||||
|
|
||||||
.VPNavBarMenuLink {
|
.VPNavBarMenuLink {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 12px;
|
padding: 0 24px;
|
||||||
line-height: var(--vp-nav-height);
|
line-height: var(--vp-nav-height);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -45,9 +59,32 @@ const { page } = useData()
|
|||||||
|
|
||||||
.VPNavBarMenuLink.active {
|
.VPNavBarMenuLink.active {
|
||||||
color: var(--color-text-active);
|
color: var(--color-text-active);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
content: '';
|
||||||
|
height: 4px;
|
||||||
|
display: none;
|
||||||
|
width: calc(v-bind(wrapperWidth) * 1px);
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
background-color: colors.$color-background-brand;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.VPNavBarMenuLink:hover {
|
.disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPNavBarMenuLink:hover:not(.disabled) {
|
||||||
color: var(--color-text-active);
|
color: var(--color-text-active);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -14,31 +14,22 @@ const $t = createSearchTranslate(defaultTranslations)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button type="button" class="DocSearch DocSearch-Button CustomDocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
|
<svg
|
||||||
<span class="DocSearch-Button-Container">
|
class="DocSearch-Search-Icon"
|
||||||
<svg
|
width="20"
|
||||||
class="DocSearch-Search-Icon"
|
height="20"
|
||||||
width="20"
|
viewBox="0 0 20 20"
|
||||||
height="20"
|
aria-label="search icon"
|
||||||
viewBox="0 0 20 20"
|
>
|
||||||
aria-label="search icon"
|
<path
|
||||||
>
|
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
|
||||||
<path
|
stroke="currentColor"
|
||||||
d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
|
fill="none"
|
||||||
stroke="currentColor"
|
fill-rule="evenodd"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
fill-rule="evenodd"
|
stroke-linejoin="round"
|
||||||
stroke-linecap="round"
|
/>
|
||||||
stroke-linejoin="round"
|
</svg>
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
|
|
||||||
</span>
|
|
||||||
<span class="DocSearch-Button-Keys">
|
|
||||||
<kbd class="DocSearch-Button-Key"></kbd>
|
|
||||||
<kbd class="DocSearch-Button-Key">K</kbd>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -65,156 +56,13 @@ const $t = createSearchTranslate(defaultTranslations)
|
|||||||
--docsearch-hit-shadow: none;
|
--docsearch-hit-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Button {
|
.DocSearch-Search-Icon {
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 48px;
|
|
||||||
height: 55px;
|
|
||||||
background: transparent;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button:hover {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button:focus {
|
|
||||||
outline: 1px dotted;
|
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button:focus:not(:focus-visible) {
|
|
||||||
outline: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.DocSearch-Button {
|
|
||||||
justify-content: flex-start;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 0 10px 0 12px;
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
background-color: var(--vp-c-bg-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button:hover {
|
|
||||||
border-color: var(--vp-c-brand-1);
|
|
||||||
background: var(--vp-c-bg-alt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Search-Icon {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 16px;
|
width: 18px;
|
||||||
height: 16px;
|
height: 18px;
|
||||||
color: var(--vp-c-text-1);
|
color: var(--vp-c-text-1);
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
transition: color 0.5s;
|
transition: color 0.5s;
|
||||||
}
|
margin: 8px;
|
||||||
|
|
||||||
.DocSearch-Button:hover .DocSearch-Search-Icon {
|
|
||||||
color: var(--vp-c-text-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.DocSearch-Button .DocSearch-Search-Icon {
|
|
||||||
top: 1px;
|
|
||||||
margin-right: 8px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
color: var(--vp-c-text-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
|
||||||
display: none;
|
|
||||||
margin-top: 2px;
|
|
||||||
padding: 0 16px 0 0;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--vp-c-text-2);
|
|
||||||
transition: color 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
|
|
||||||
color: var(--vp-c-text-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Keys {
|
|
||||||
/*rtl:ignore*/
|
|
||||||
direction: ltr;
|
|
||||||
display: none;
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.DocSearch-Button .DocSearch-Button-Keys {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Key {
|
|
||||||
display: block;
|
|
||||||
margin: 2px 0 0 0;
|
|
||||||
border: 1px solid var(--vp-c-divider);
|
|
||||||
/*rtl:begin:ignore*/
|
|
||||||
border-right: none;
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
padding-left: 6px;
|
|
||||||
/*rtl:end:ignore*/
|
|
||||||
min-width: 0;
|
|
||||||
width: auto;
|
|
||||||
height: 22px;
|
|
||||||
line-height: 22px;
|
|
||||||
font-family: var(--vp-font-family-base);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: color 0.5s, border-color 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
|
|
||||||
/*rtl:begin:ignore*/
|
|
||||||
border-right: 1px solid var(--vp-c-divider);
|
|
||||||
border-left: none;
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
padding-left: 2px;
|
|
||||||
padding-right: 6px;
|
|
||||||
/*rtl:end:ignore*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
|
||||||
font-size: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
|
||||||
content: 'Ctrl';
|
|
||||||
font-size: 12px;
|
|
||||||
letter-spacing: normal;
|
|
||||||
color: var(--docsearch-muted-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
|
||||||
content: '\2318';
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -38,10 +38,10 @@ const target = computed(() =>
|
|||||||
:target="target"
|
:target="target"
|
||||||
>
|
>
|
||||||
<slot name="nav-bar-title-before" />
|
<slot name="nav-bar-title-before" />
|
||||||
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
|
|
||||||
<template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
|
<template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
|
||||||
<template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
|
<template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
|
||||||
<slot name="nav-bar-title-after" />
|
<slot name="nav-bar-title-after" />
|
||||||
|
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -53,10 +53,13 @@ const target = computed(() =>
|
|||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--vp-nav-height);
|
height: var(--vp-nav-height);
|
||||||
font-size: 16px;
|
font-size: 25px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: var(--vp-c-text-1);
|
line-height: 28px;
|
||||||
|
color: var(--color-text-inactive);
|
||||||
transition: opacity 0.25s;
|
transition: opacity 0.25s;
|
||||||
|
gap: 20px;
|
||||||
|
margin-right: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
@media (min-width: 960px) {
|
||||||
@@ -72,7 +75,6 @@ const target = computed(() =>
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.logo) {
|
:deep(.logo) {
|
||||||
margin-right: 8px;
|
|
||||||
height: var(--vp-nav-logo-height);
|
height: var(--vp-nav-logo-height);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<svg width="104" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M84.04 7.02c2.024 0 3.464-1.063 3.74-3.395h-1.99c-.205.823-.686 1.234-1.747 1.234-1.063 0-1.612-.411-1.783-1.234h-1.99c.272 2.332 1.746 3.395 3.77 3.395zm-40.827 9.485V8.084h-2.502V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.042 8.421zM32.832 8.186c-1.983 0-3.674.924-4.55 2.639.125-2.782.678-4.437 3.898-4.868l5.008-.687-.206-2.743-5.213.72c-4.493.617-5.762 4.082-5.762 9.533 0 4.767 2.161 7.819 6.173 7.819 3.91 0 6.036-3.02 6.036-6.55s-2.365-5.863-5.384-5.863zm-.652 9.704c-2.264 0-3.6-1.645-3.6-4.115v-1.268c.479-.96 1.75-1.715 3.6-1.715 1.956 0 3.463.925 3.463 3.257s-1.199 3.841-3.463 3.841zm67.488-9.806v4.594h-4.87V8.082h-2.502V20.36h2.502v-5.145h4.87v5.145h2.504V8.084h-2.504zm-18.165 8.421V8.084H79V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.04 8.421zm-26.139-.912c-.274 1.372-.652 1.956-1.407 1.956-.411 0-.72-.035-.925-.103v2.846c.308.138.584.24 1.233.24 1.304 0 2.23-.754 2.676-1.92.273-.72.446-1.715.584-2.984.137-1.269.24-2.949.24-4.937h3.327v9.67h2.503V8.085h-7.921c0 3.703-.103 6.138-.31 7.51zm20.044 1.44.035-4.87c.035-3.086-1.853-4.355-4.596-4.355-2.264 0-4.32 1.234-4.629 4.115h2.4c.138-1.131 1.028-1.51 2.229-1.51 1.23 0 2.054.379 2.178 1.642l-3.069 1.24c-2.091.857-3.668 1.817-3.668 3.84 0 2.092 1.166 3.43 3.498 3.43 1.61 0 2.628-.756 3.443-2.234.122 1.478 1.102 2.132 2.798 2.132h.686v-2.367h-.205c-.792 0-1.1-.309-1.1-1.063zm-4.699.96c-1.166 0-2.023-.308-2.023-1.371 0-.926.72-1.337 1.955-1.853l2.39-.994-.025 3.326c-.411.516-1.234.892-2.297.892z"
|
||||||
|
fill="#fff"/>
|
||||||
|
<path
|
||||||
|
d="M10.005 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.48 2.5.002 6.977.002 12.499s4.478 9.999 10.003 9.999z"
|
||||||
|
fill="#FFC800"/>
|
||||||
|
<path
|
||||||
|
d="M14.309 19.948c-3.397 1.96-7.081 2.311-9.434 1.137A10.007 10.007 0 0 0 20.01 12.35c-.16 2.625-2.305 5.64-5.702 7.6zM11.273 3.233c.688 1.191-.976 3.442-3.72 5.023-2.743 1.581-5.523 1.9-6.211.706a1.092 1.092 0 0 1-.076-.182c-.179-.555.035-1.273.549-2.03a9.942 9.942 0 0 1 3.187-2.912 9.958 9.958 0 0 1 4.118-1.3c.912-.068 1.64.107 2.031.537.047.053.088.105.123.16z"
|
||||||
|
fill="#000"/>
|
||||||
|
<path
|
||||||
|
d="M15.525 4.523c1.203 2.082-1.224 5.731-5.418 8.152-4.195 2.421-8.571 2.697-9.772.615a2.535 2.535 0 0 1-.328-1.148 9.895 9.895 0 0 0 1.02 4.77l.014.026c.363.626.898 1.119 1.566 1.476 2.353 1.259 6.332.826 10.053-1.321 3.719-2.148 6.084-5.374 6.171-8.04.025-.752-.132-1.46-.49-2.087a9.936 9.936 0 0 0-3.628-3.29 2.514 2.514 0 0 1 .814.851l-.002-.004z"
|
||||||
|
fill="#000"/>
|
||||||
|
<path
|
||||||
|
d="M10.007 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.482 2.5.004 6.977.004 12.499s4.478 9.999 10.003 9.999z"
|
||||||
|
fill="url(#a)"/>
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(10.006 12.5) scale(10.0025)">
|
||||||
|
<stop offset=".5" stop-color="#fff" stop-opacity="0"/>
|
||||||
|
<stop offset="1" stop-color="#fff" stop-opacity=".35"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg width="104" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M84.04 7.02c2.024 0 3.464-1.063 3.74-3.395h-1.99c-.205.823-.686 1.234-1.747 1.234-1.063 0-1.612-.411-1.783-1.234h-1.99c.272 2.332 1.746 3.395 3.77 3.395zm-40.827 9.485V8.084h-2.502V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.042 8.421zM32.832 8.186c-1.983 0-3.674.924-4.55 2.639.125-2.782.678-4.437 3.898-4.868l5.008-.687-.206-2.743-5.213.72c-4.493.617-5.762 4.082-5.762 9.533 0 4.767 2.161 7.819 6.173 7.819 3.91 0 6.036-3.02 6.036-6.55s-2.365-5.863-5.384-5.863zm-.652 9.704c-2.264 0-3.6-1.645-3.6-4.115v-1.268c.479-.96 1.75-1.715 3.6-1.715 1.956 0 3.463.925 3.463 3.257s-1.199 3.841-3.463 3.841zm67.488-9.806v4.594h-4.87V8.082h-2.502V20.36h2.502v-5.145h4.87v5.145h2.504V8.084h-2.504zm-18.165 8.421V8.084H79V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.04 8.421zm-26.139-.912c-.274 1.372-.652 1.956-1.407 1.956-.411 0-.72-.035-.925-.103v2.846c.308.138.584.24 1.233.24 1.304 0 2.23-.754 2.676-1.92.273-.72.446-1.715.584-2.984.137-1.269.24-2.949.24-4.937h3.327v9.67h2.503V8.085h-7.921c0 3.703-.103 6.138-.31 7.51zm20.044 1.44.035-4.87c.035-3.086-1.853-4.355-4.596-4.355-2.264 0-4.32 1.234-4.629 4.115h2.4c.138-1.131 1.028-1.51 2.229-1.51 1.23 0 2.054.379 2.178 1.642l-3.069 1.24c-2.091.857-3.668 1.817-3.668 3.84 0 2.092 1.166 3.43 3.498 3.43 1.61 0 2.628-.756 3.443-2.234.122 1.478 1.102 2.132 2.798 2.132h.686v-2.367h-.205c-.792 0-1.1-.309-1.1-1.063zm-4.699.96c-1.166 0-2.023-.308-2.023-1.371 0-.926.72-1.337 1.955-1.853l2.39-.994-.025 3.326c-.411.516-1.234.892-2.297.892z"
|
||||||
|
fill="#000"/>
|
||||||
|
<path
|
||||||
|
d="M10.005 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.48 2.5.002 6.977.002 12.499s4.478 9.999 10.003 9.999z"
|
||||||
|
fill="#FFC800"/>
|
||||||
|
<path
|
||||||
|
d="M14.309 19.948c-3.397 1.96-7.081 2.311-9.434 1.137A10.007 10.007 0 0 0 20.01 12.35c-.16 2.625-2.305 5.64-5.702 7.6zM11.273 3.233c.688 1.191-.976 3.442-3.72 5.023-2.743 1.581-5.523 1.9-6.211.706a1.092 1.092 0 0 1-.076-.182c-.179-.555.035-1.273.549-2.03a9.942 9.942 0 0 1 3.187-2.912 9.958 9.958 0 0 1 4.118-1.3c.912-.068 1.64.107 2.031.537.047.053.088.105.123.16z"
|
||||||
|
fill="#000"/>
|
||||||
|
<path
|
||||||
|
d="M15.525 4.523c1.203 2.082-1.224 5.731-5.418 8.152-4.195 2.421-8.571 2.697-9.772.615a2.535 2.535 0 0 1-.328-1.148 9.895 9.895 0 0 0 1.02 4.77l.014.026c.363.626.898 1.119 1.566 1.476 2.353 1.259 6.332.826 10.053-1.321 3.719-2.148 6.084-5.374 6.171-8.04.025-.752-.132-1.46-.49-2.087a9.936 9.936 0 0 0-3.628-3.29 2.514 2.514 0 0 1 .814.851l-.002-.004z"
|
||||||
|
fill="#000"/>
|
||||||
|
<path
|
||||||
|
d="M10.007 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.482 2.5.004 6.977.004 12.499s4.478 9.999 10.003 9.999z"
|
||||||
|
fill="url(#a)"/>
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(10.006 12.5) scale(10.0025)">
|
||||||
|
<stop offset=".5" stop-color="#fff" stop-opacity="0"/>
|
||||||
|
<stop offset="1" stop-color="#fff" stop-opacity=".35"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
Reference in New Issue
Block a user