Skip to content

Commit

Permalink
feat(theme): refine overall styles (#1049) (#1790)
Browse files Browse the repository at this point in the history 
close #1049
  • Loading branch information
@kiaking
kiaking authored Jan 17, 2023
1 parent 4314b57 commit 471f00a
Show file tree
Hide file tree
Showing 32 changed files with 358 additions and 395 deletions.
2 changes: 1 addition & 1 deletion src/client/theme-default/components/VPBackdrop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ defineProps<{
bottom: 0;
left: 0;
z-index: var(--vp-z-index-backdrop);
background: var(--vp-c-bg-backdrop);
background: var(--vp-backdrop-bg-color);
transition: opacity 0.5s;
}
Expand Down
2 changes: 1 addition & 1 deletion src/client/theme-default/components/VPButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const component = computed(() => {
display: inline-block;
border: 1px solid transparent;
text-align: center;
font-weight: 500;
font-weight: 600;
white-space: nowrap;
transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
Expand Down
23 changes: 11 additions & 12 deletions src/client/theme-default/components/VPCarbonAds.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ if (carbonOptions) {
<div class="VPCarbonAds" ref="container" />
</template>

<style>
<style scoped>
.VPCarbonAds {
display: flex;
justify-content: center;
Expand All @@ -59,38 +59,37 @@ if (carbonOptions) {
line-height: 18px;
font-size: 12px;
font-weight: 500;
background-color: var(--vp-c-bg-soft);
transition: color 0.5s, background-color 0.5s;
background-color: var(--vp-carbon-ads-bg-color);
}
.VPCarbonAds img {
.VPCarbonAds :deep(img) {
margin: 0 auto;
border-radius: 6px;
}
.VPCarbonAds .carbon-text {
.VPCarbonAds :deep(.carbon-text) {
display: block;
margin: 0 auto;
padding-top: 12px;
color: var(--vp-c-text-1);
color: var(--vp-carbon-ads-text-color);
transition: color 0.25s;
}
.VPCarbonAds .carbon-text:hover {
color: var(--vp-c-brand);
.VPCarbonAds :deep(.carbon-text:hover) {
color: var(--vp-carbon-ads-hover-text-color);
}
.VPCarbonAds .carbon-poweredby {
.VPCarbonAds :deep(.carbon-poweredby) {
display: block;
padding-top: 6px;
font-size: 11px;
font-weight: 500;
color: var(--vp-c-text-2);
color: var(--vp-carbon-ads-poweredby-color);
text-transform: uppercase;
transition: color 0.25s;
}
.VPCarbonAds .carbon-poweredby:hover {
color: var(--vp-c-text-1);
.VPCarbonAds :deep(.carbon-poweredby:hover) {
color: var(--vp-carbon-ads-hover-poweredby-color);
}
</style>
6 changes: 3 additions & 3 deletions src/client/theme-default/components/VPDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
.aside-container {
position: sticky;
top: 0;
margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
Expand All @@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
.aside-content {
display: flex;
flex-direction: column;
min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));
padding-bottom: 32px;
}
Expand Down
2 changes: 1 addition & 1 deletion src/client/theme-default/components/VPDocAsideOutline.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function handleClick({ target: el }: Event) {
.content {
position: relative;
border-left: 1px solid var(--vp-c-divider-light);
border-left: 1px solid var(--vp-c-divider);
padding-left: 16px;
font-size: 13px;
font-weight: 500;
Expand Down
8 changes: 2 additions & 6 deletions src/client/theme-default/components/VPDocFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const showFooter = computed(() => {
}
.prev-next {
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-divider);
padding-top: 24px;
}
Expand Down Expand Up @@ -127,7 +127,7 @@ const showFooter = computed(() => {
.pager-link {
display: block;
border: 1px solid var(--vp-c-divider-light);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 11px 16px 13px;
width: 100%;
Expand All @@ -139,10 +139,6 @@ const showFooter = computed(() => {
border-color: var(--vp-c-brand);
}
.pager-link:hover .title {
color: var(--vp-c-brand-dark);
}
.pager-link.next {
margin-left: auto;
text-align: right;
Expand Down
17 changes: 2 additions & 15 deletions src/client/theme-default/components/VPFeature.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,7 @@ defineProps<{
.VPFeature.link:hover {
border-color: var(--vp-c-brand);
background-color: var(--vp-c-bg);
}
.dark .VPFeature.link:hover {
background-color: var(--vp-c-bg-mute);
background-color: var(--vp-c-bg-soft-up);
}
.box {
Expand All @@ -73,17 +69,13 @@ defineProps<{
align-items: center;
margin-bottom: 20px;
border-radius: 6px;
background-color: var(--vp-c-gray-light-4);
background-color: var(--vp-c-bg-soft-down);
width: 48px;
height: 48px;
font-size: 24px;
transition: background-color 0.25s;
}
.dark .icon {
background-color: var(--vp-c-gray-dark-5);
}
.title {
line-height: 24px;
font-size: 16px;
Expand All @@ -109,11 +101,6 @@ defineProps<{
font-size: 14px;
font-weight: 500;
color: var(--vp-c-brand);
transition: color 0.25s;
}
.VPFeature.link:hover .link-text-value {
color: var(--vp-c-brand-dark);
}
.link-text-icon {
Expand Down
24 changes: 3 additions & 21 deletions src/client/theme-default/components/VPFlyout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,33 +91,21 @@ function onBlur() {
display: flex;
align-items: center;
padding: 0 12px;
height: var(--vp-nav-height-mobile);
height: var(--vp-nav-height);
color: var(--vp-c-text-1);
transition: color 0.5s;
}
@media (min-width: 960px) {
.button {
height: var(--vp-nav-height-desktop);
}
}
.text {
display: flex;
align-items: center;
line-height: var(--vp-nav-height-mobile);
line-height: var(--vp-nav-height);
font-size: 14px;
font-weight: 500;
color: var(--vp-c-text-1);
transition: color 0.25s;
}
@media (min-width: 960px) {
.text {
line-height: var(--vp-nav-height-desktop);
}
}
.option-icon {
margin-right: 0px;
width: 16px;
Expand All @@ -141,16 +129,10 @@ function onBlur() {
.menu {
position: absolute;
top: calc(var(--vp-nav-height-mobile) / 2 + 20px);
top: calc(var(--vp-nav-height) / 2 + 20px);
right: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}
@media (min-width: 960px) {
.menu {
top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
}
}
</style>
2 changes: 1 addition & 1 deletion src/client/theme-default/components/VPFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const { hasSidebar } = useSidebar()
.VPFooter {
position: relative;
z-index: var(--vp-z-index-footer);
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-gutter);
padding: 32px 24px;
background-color: var(--vp-c-bg);
}
Expand Down
2 changes: 1 addition & 1 deletion src/client/theme-default/components/VPHomeSponsors.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ defineProps<{
<style scoped>
.VPHomeSponsors {
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-gutter);
padding: 88px 24px 96px;
background-color: var(--vp-c-bg);
}
Expand Down
6 changes: 3 additions & 3 deletions src/client/theme-default/components/VPLocalNav.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ function scrollToTop() {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--vp-c-divider-light);
border-bottom: 1px solid var(--vp-c-gutter);
padding-top: var(--vp-layout-top-height, 0px);
width: 100%;
background-color: var(--vp-c-bg);
background-color: var(--vp-local-nav-bg-color);
transition: border-color 0.5s, background-color 0.5s;
padding-top: var(--vp-layout-top-height, 0px);
}
@media (min-width: 960px) {
Expand Down
20 changes: 5 additions & 15 deletions src/client/theme-default/components/VPMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,21 @@ defineProps<{
border-radius: 12px;
padding: 12px;
min-width: 128px;
border: 1px solid var(--vp-c-divider-light);
background-color: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
background-color: var(--vp-c-bg-elv);
box-shadow: var(--vp-shadow-3);
transition: background-color 0.5s;
max-height: calc(100vh - var(--vp-nav-height-mobile));
max-height: calc(100vh - var(--vp-nav-height));
overflow-y: auto;
}
@media (min-width: 960px) {
.VPMenu {
max-height: calc(100vh - var(--vp-nav-height-desktop));
}
}
.dark .VPMenu {
box-shadow: var(--vp-shadow-2);
}
.VPMenu :deep(.group) {
margin: 0 -12px;
padding: 0 12px 12px;
}
.VPMenu :deep(.group + .group) {
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-divider);
padding: 11px 12px 12px;
}
Expand All @@ -58,7 +48,7 @@ defineProps<{
}
.VPMenu :deep(.group + .item) {
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-divider);
padding: 11px 16px 0;
}
Expand Down
4 changes: 2 additions & 2 deletions src/client/theme-default/components/VPMenuGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ defineProps<{
<style scoped>
.VPMenuGroup {
margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-divider);
padding: 12px 12px 0;
}
Expand All @@ -32,7 +32,7 @@ defineProps<{
.VPMenuGroup + .VPMenuGroup {
margin-top: 12px;
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-divider);
}
.title {
Expand Down
8 changes: 2 additions & 6 deletions src/client/theme-default/components/VPMenuLink.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const { page } = useData()
<style scoped>
.VPMenuGroup + .VPMenuLink {
margin: 12px -12px 0;
border-top: 1px solid var(--vp-c-divider-light);
border-top: 1px solid var(--vp-c-divider);
padding: 12px 12px 0;
}
Expand All @@ -42,11 +42,7 @@ const { page } = useData()
.link:hover {
color: var(--vp-c-brand);
background-color: var(--vp-c-bg-mute);
}
.dark .link:hover {
background-color: var(--vp-c-bg-soft);
background-color: var(--vp-c-bg-elv-mute);
}
.link.active {
Expand Down
Loading

0 comments on commit 471f00a

Please sign in to comment.