refactor(docs): split styles
This commit is contained in:
Neko Ayaka
@@ -8,8 +8,13 @@ import Layout from '../custom/Layout.vue'
|
||||
|
||||
import '@unocss/reset/tailwind.css'
|
||||
import 'uno.css'
|
||||
import './nixie.css'
|
||||
import './style.css'
|
||||
import './theme-vitepress.css'
|
||||
import './theme-markdown.css'
|
||||
import './theme-media.css'
|
||||
import './theme-kbd.css'
|
||||
import './theme-animations.css'
|
||||
import './custom-nixie.css'
|
||||
import '@fontsource-variable/quicksand'
|
||||
import '@fontsource-variable/dm-sans'
|
||||
import '@fontsource/dm-mono'
|
||||
|
||||
@@ -122,269 +122,10 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.custom .vp-code {
|
||||
@apply border-none rounded-none;
|
||||
}
|
||||
.vp-code {
|
||||
@apply px-6 py-4 my-0 bg-[hsl(24_9.8%_10%)] border border-[hsl(0_0%_15%)] rounded-lg;
|
||||
|
||||
.diff {
|
||||
@apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6
|
||||
}
|
||||
.diff:before {
|
||||
@apply absolute left-2.5
|
||||
}
|
||||
|
||||
.diff.remove {
|
||||
@apply bg-red-500/20 opacity-70
|
||||
}
|
||||
.diff.remove:before {
|
||||
content: "-";
|
||||
@apply text-red-500/80
|
||||
}
|
||||
|
||||
.diff.add {
|
||||
@apply bg-green-600/15
|
||||
}
|
||||
.diff.add:before {
|
||||
content: "+";
|
||||
@apply text-green-600/80
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
@apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6 bg-[hsl(0_0%_15%)]
|
||||
}
|
||||
|
||||
code {
|
||||
@apply w-fit block min-w-full
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block {
|
||||
@apply rounded-xl px-4 py-3 border border-muted relative overflow-hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.info {
|
||||
@apply bg-slate-200/20 dark:bg-slate-900/80 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-slate-500/20 dark:bg-slate-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-slate-800 dark:text-slate-300 font-semibold;
|
||||
}
|
||||
|
||||
&> p:nth-child(2) {
|
||||
@apply dark:text-slate-50;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.tip {
|
||||
@apply bg-violet-50 dark:bg-violet-900/20 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-violet-500/20 dark:bg-violet-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-violet-800 dark:text-violet-300 font-semibold;
|
||||
}
|
||||
|
||||
& > p:nth-child(2) {
|
||||
@apply dark:text-violet-50;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.warning {
|
||||
@apply bg-yellow-50 dark:bg-yellow-900/20 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-yellow-500/20 dark:bg-yellow-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-yellow-800 dark:text-yellow-300 font-semibold;
|
||||
}
|
||||
|
||||
&> p:nth-child(2) {
|
||||
@apply dark:text-yellow-50;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.danger {
|
||||
@apply bg-neutral-100 dark:bg-neutral-900/20 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-neutral-500/20 dark:bg-neutral-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-neutral-800 dark:text-neutral-300 font-semibold;
|
||||
}
|
||||
|
||||
& > p:nth-child(2) {
|
||||
@apply dark:text-neutral-50;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@apply bg-foreground;
|
||||
}
|
||||
|
||||
.list-box-tips kbd,
|
||||
.prose kbd,
|
||||
.custom-block kbd {
|
||||
color: inherit;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont ,"Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.custom-block kbd {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.list-box-tips kbd::after,
|
||||
.prose kbd::after,
|
||||
.custom-block kbd::after {
|
||||
display: inline;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: hsl(0 0% 94% / 1);
|
||||
box-shadow: 0px 2px 0 2px hsl(0 0% 88% / 1);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dark .list-box-tips kbd::after,
|
||||
.dark .prose kbd::after,
|
||||
.dark .custom-block kbd::after {
|
||||
background: #3c3c3c;
|
||||
box-shadow: 0 2px 0 2px #292929;
|
||||
}
|
||||
|
||||
/**
|
||||
https://apple.stackexchange.com/a/123577
|
||||
*/
|
||||
kbd[data-macos-keyboard-key="command"]::before {
|
||||
content: "⌘";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-macos-keyboard-key="option"]::before {
|
||||
content: "⌥";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-windows-keyboard-key="windows"]::before {
|
||||
content: "⊞";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="esc"]::before {
|
||||
content: "⎋";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="shift"]::before {
|
||||
content: "⇧";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="return"]::before {
|
||||
content: "⏎";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="control"]::before {
|
||||
content: "⌃";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="enter"]::before {
|
||||
content: "⏎";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="space"]::before {
|
||||
content: "␣";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="up-arrow"]::before {
|
||||
content: "↑";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="down-arrow"]::before {
|
||||
content: "↓";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="left-arrow"]::before {
|
||||
content: "←";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="right-arrow"]::before {
|
||||
content: "→";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
ul.task-list-container {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.task-list-container li input.task-list-item-checkbox {
|
||||
display: inline-block;
|
||||
margin: 0 0.25rem 0 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
@apply bg-transparent text-foreground font-semibold;
|
||||
}
|
||||
@@ -421,26 +162,6 @@ mark {
|
||||
content: counter(step);
|
||||
}
|
||||
|
||||
.image-bg {
|
||||
@apply scale-75 !transform !-translate-x-1/2 !-translate-y-1/2;
|
||||
}
|
||||
|
||||
.custom-justify-center:before,
|
||||
.custom-justify-center:after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
main .prose :where(details):not(:where(.not-prose,.not-prose *)) {
|
||||
background-color:rgba(131, 186, 231, 0.1);
|
||||
|
||||
@@ -468,41 +189,3 @@ pre.shiki code span {
|
||||
.dark pre.shiki code span {
|
||||
color: var(--shiki-dark);
|
||||
}
|
||||
|
||||
html.dark img.light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.dark video.light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.dark) img.dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.dark) video.dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docs-article video {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.docs-article img {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (width >= 64rem) {
|
||||
.docs-article video {
|
||||
max-height: 50dvw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 80rem) {
|
||||
.docs-article video {
|
||||
max-height: 40dvw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
|
||||
.list-box-tips kbd,
|
||||
.prose kbd,
|
||||
.custom-block kbd {
|
||||
color: inherit;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont ,"Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.custom-block kbd {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.list-box-tips kbd::after,
|
||||
.prose kbd::after,
|
||||
.custom-block kbd::after {
|
||||
display: inline;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: hsl(0 0% 94% / 1);
|
||||
box-shadow: 0px 2px 0 2px hsl(0 0% 88% / 1);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dark .list-box-tips kbd::after,
|
||||
.dark .prose kbd::after,
|
||||
.dark .custom-block kbd::after {
|
||||
background: #3c3c3c;
|
||||
box-shadow: 0 2px 0 2px #292929;
|
||||
}
|
||||
|
||||
/**
|
||||
https://apple.stackexchange.com/a/123577
|
||||
*/
|
||||
kbd[data-macos-keyboard-key="command"]::before {
|
||||
content: "⌘";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-macos-keyboard-key="option"]::before {
|
||||
content: "⌥";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-windows-keyboard-key="windows"]::before {
|
||||
content: "⊞";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="esc"]::before {
|
||||
content: "⎋";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="shift"]::before {
|
||||
content: "⇧";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="return"]::before {
|
||||
content: "⏎";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="control"]::before {
|
||||
content: "⌃";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="enter"]::before {
|
||||
content: "⏎";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="space"]::before {
|
||||
content: "␣";
|
||||
vertical-align: top;
|
||||
margin-right: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="up-arrow"]::before {
|
||||
content: "↑";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="down-arrow"]::before {
|
||||
content: "↓";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="left-arrow"]::before {
|
||||
content: "←";
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
kbd[data-keyboard-key="right-arrow"]::before {
|
||||
content: "→";
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
ul.task-list-container {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.task-list-container li input.task-list-item-checkbox {
|
||||
display: inline-block;
|
||||
margin: 0 0.25rem 0 0;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
html.dark img.light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.dark video.light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.dark) img.dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.dark) video.dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docs-article video {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.docs-article img {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (width >= 64rem) {
|
||||
.docs-article video {
|
||||
max-height: 50dvw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 80rem) {
|
||||
.docs-article video {
|
||||
max-height: 40dvw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
|
||||
.custom .vp-code {
|
||||
@apply border-none rounded-none;
|
||||
}
|
||||
.vp-code {
|
||||
@apply px-6 py-4 my-0 bg-[hsl(24_9.8%_10%)] border border-[hsl(0_0%_15%)] rounded-lg;
|
||||
|
||||
.diff {
|
||||
@apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6
|
||||
}
|
||||
.diff:before {
|
||||
@apply absolute left-2.5
|
||||
}
|
||||
|
||||
.diff.remove {
|
||||
@apply bg-red-500/20 opacity-70
|
||||
}
|
||||
.diff.remove:before {
|
||||
content: "-";
|
||||
@apply text-red-500/80
|
||||
}
|
||||
|
||||
.diff.add {
|
||||
@apply bg-green-600/15
|
||||
}
|
||||
.diff.add:before {
|
||||
content: "+";
|
||||
@apply text-green-600/80
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
@apply inline-block w-[calc(100%_+_48px)] px-6 -mx-6 bg-[hsl(0_0%_15%)]
|
||||
}
|
||||
|
||||
code {
|
||||
@apply w-fit block min-w-full
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block {
|
||||
@apply rounded-xl px-4 py-3 border border-muted relative overflow-hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.info {
|
||||
@apply bg-slate-200/20 dark:bg-slate-900/80 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-slate-500/20 dark:bg-slate-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-slate-800 dark:text-slate-300 font-semibold;
|
||||
}
|
||||
|
||||
&> p:nth-child(2) {
|
||||
@apply dark:text-slate-50;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.tip {
|
||||
@apply bg-violet-50 dark:bg-violet-900/20 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-violet-500/20 dark:bg-violet-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-violet-800 dark:text-violet-300 font-semibold;
|
||||
}
|
||||
|
||||
& > p:nth-child(2) {
|
||||
@apply dark:text-violet-50;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.warning {
|
||||
@apply bg-yellow-50 dark:bg-yellow-900/20 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-yellow-500/20 dark:bg-yellow-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-yellow-800 dark:text-yellow-300 font-semibold;
|
||||
}
|
||||
|
||||
&> p:nth-child(2) {
|
||||
@apply dark:text-yellow-50;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-block.danger {
|
||||
@apply bg-neutral-100 dark:bg-neutral-900/20 border-none;
|
||||
|
||||
&::before {
|
||||
@apply bg-neutral-500/20 dark:bg-neutral-400/20;
|
||||
}
|
||||
|
||||
& .custom-block-title {
|
||||
@apply text-neutral-800 dark:text-neutral-300 font-semibold;
|
||||
}
|
||||
|
||||
& > p:nth-child(2) {
|
||||
@apply dark:text-neutral-50;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user