chore(docs): more style and readability update
This commit is contained in:
@@ -86,10 +86,10 @@ const showFooter = computed(
|
||||
:class="[
|
||||
'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
|
||||
'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
|
||||
'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
|
||||
'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-primary/10',
|
||||
'active:scale-98',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
|
||||
'[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary-600 dark:[&_span,_&_p]:hover:text-primary-400',
|
||||
]"
|
||||
:href="control.prev.link"
|
||||
>
|
||||
@@ -113,10 +113,10 @@ const showFooter = computed(
|
||||
:class="[
|
||||
'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
|
||||
'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
|
||||
'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
|
||||
'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-primary/10',
|
||||
'active:scale-98',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
|
||||
'[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary-600 dark:[&_span,_&_p]:hover:text-primary-400',
|
||||
]"
|
||||
:href="control.next.link"
|
||||
>
|
||||
|
||||
@@ -45,7 +45,7 @@ watch(isActiveLink, () => {
|
||||
>
|
||||
<CollapsibleTrigger
|
||||
:class="[
|
||||
'group w-full inline-flex items-center justify-between rounded-lg py-1 pr-3 text-sm transition-colors duration-150 ease-in-out mb-0.5',
|
||||
'group w-full inline-flex items-center justify-between rounded-lg py-1 pr-3 text-sm transition-colors duration-100 ease-out mb-0.5',
|
||||
hasActiveLink ? 'text-foreground' : 'text-muted-foreground',
|
||||
'hover:bg-primary/10 hover:text-primary',
|
||||
]"
|
||||
@@ -78,7 +78,7 @@ watch(isActiveLink, () => {
|
||||
<div
|
||||
v-else
|
||||
:class="[
|
||||
'flex w-full items-center rounded-lg text-sm transition-colors duration-150 ease-in-out hover:bg-card',
|
||||
'flex w-full items-center rounded-lg text-sm transition-colors duration-100 ease-out hover:bg-card',
|
||||
isActiveLink ? 'is-active !bg-primary/10 !text-primary font-semibold' : '',
|
||||
'hover:bg-primary/10 hover:text-primary',
|
||||
]"
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
.prose kbd,
|
||||
.custom-block kbd {
|
||||
color: inherit;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8rem;
|
||||
padding: 3px 6px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
@@ -88,46 +88,54 @@
|
||||
}
|
||||
|
||||
.custom-block.info {
|
||||
@apply bg-slate-200/20 dark:bg-slate-900/80 border-none;
|
||||
@apply bg-slate-200/20 dark:bg-slate-900/80 border-none text-sm;
|
||||
|
||||
&::before {
|
||||
@apply bg-slate-500/20 dark:bg-slate-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-slate-800 dark:text-slate-300 font-semibold;
|
||||
@apply text-slate-800 dark:text-slate-300 font-semibold text-base;
|
||||
}
|
||||
|
||||
& ul ::marker {
|
||||
@apply text-slate-700;
|
||||
}
|
||||
|
||||
&> :not(p:nth-child(1)) {
|
||||
@apply dark:text-slate-50;
|
||||
@apply text-slate-950 dark:text-slate-50 leading-snug;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.tip {
|
||||
@apply bg-violet-50 dark:bg-violet-900/20 border-none;
|
||||
@apply bg-violet-50 dark:bg-violet-900/20 border-none text-sm;
|
||||
|
||||
&::before {
|
||||
@apply bg-violet-500/20 dark:bg-violet-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-violet-800 dark:text-violet-300 font-semibold;
|
||||
@apply text-violet-800 dark:text-violet-300 font-semibold text-base;
|
||||
}
|
||||
|
||||
& ul ::marker {
|
||||
@apply text-violet-700;
|
||||
}
|
||||
|
||||
&> :not(p:nth-child(1)) {
|
||||
@apply dark:text-violet-50;
|
||||
@apply text-violet-950 dark:text-violet-50 leading-snug;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.warning {
|
||||
@apply bg-yellow-50 dark:bg-yellow-900/20 border-none;
|
||||
@apply bg-yellow-50 dark:bg-yellow-900/20 border-none text-sm;
|
||||
|
||||
&::before {
|
||||
@apply bg-yellow-500/20 dark:bg-yellow-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-yellow-700 dark:text-yellow-300 font-semibold;
|
||||
@apply text-yellow-700 dark:text-yellow-300 font-semibold text-base;
|
||||
}
|
||||
|
||||
& ul ::marker {
|
||||
@@ -135,19 +143,19 @@
|
||||
}
|
||||
|
||||
&> :not(p:nth-child(1)) {
|
||||
@apply text-yellow-950 dark:text-yellow-50 leading-tight;
|
||||
@apply text-yellow-950 dark:text-yellow-50 leading-snug;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.danger {
|
||||
@apply bg-red-100 dark:bg-red-900/20 border-none;
|
||||
@apply bg-red-100 dark:bg-red-900/20 border-none text-sm;
|
||||
|
||||
&::before {
|
||||
@apply bg-red-500/20 dark:bg-red-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-red-800 dark:text-red-300 font-semibold;
|
||||
@apply text-red-800 dark:text-red-300 font-semibold text-base;
|
||||
}
|
||||
|
||||
& ul ::marker {
|
||||
@@ -155,10 +163,15 @@
|
||||
}
|
||||
|
||||
&> :not(p:nth-child(1)) {
|
||||
@apply dark:text-red-50;
|
||||
@apply text-red-950 dark:text-red-50 leading-snug;
|
||||
}
|
||||
}
|
||||
|
||||
article.docs-article .custom-block {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
|
||||
background-color: #f6f9ff;
|
||||
}
|
||||
|
||||
+1
-1
@@ -39,7 +39,7 @@ export default defineConfig({
|
||||
'details': {
|
||||
'margin-top': '0.5rem',
|
||||
'margin-bottom': '0.5rem',
|
||||
'padding': '1rem 1.5rem',
|
||||
'padding': '0.5rem 1rem',
|
||||
'background-color': '#a6ceef1a',
|
||||
},
|
||||
'.dark details': {
|
||||
|
||||
Reference in New Issue
Block a user