moeka-project/docs/.vitepress/theme/style.css

:root {
  --background: 0 0% 100%;
  --foreground: 207 10% 3.9%;

  --card: 207 4% 100%;
  --card-foreground: 0 10% 3.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 207 10% 3.9%;

  --primary: 207 62% 59%;
  --primary-foreground: 355.7 100% 97.3%;

  --secondary: 207 4.8% 95.9%;
  --secondary-foreground: 207 5.9% 10%;

  --muted: 207 0% 91%;
  --muted-foreground: 207 3.8% 46.1%;

  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --code: 24 9.8% 10%; /*  0 0% 4%; */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 207 15% 5%;
  --foreground: 0 0% 95%;

  --card: 207 9.8% 10%;
  --card-foreground: 0 0% 95%;

  --popover: 0 0% 9%;
  --popover-foreground: 207 0% 95%;

  --primary: 207 62% 59%;
  --primary-foreground: 144.9 80.4% 10%;

  --secondary: 207 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;

  --muted: 207 0% 15%;
  --muted-foreground: 207 2.6% 62.9%;

  --accent: 12 6.5% 15.1%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 85.7% 97.3%;

  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;
}

html {
  -webkit-text-size-adjust: 100%;
  font-variation-settings: normal;
}

html.dark {
  color-scheme: dark;
}

body {
  @apply bg-background text-foreground min-h-screen antialiased transition-colors duration-200 ease-in-out;
  /* font-feature-settings: "rlig" 1, "calt" 1; */
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease-in-out;
}

/* Mobile tap highlight */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
html {
  -webkit-tap-highlight-color: transparent;
}

*:focus-visible {
  @apply outline-primary;
}

::selection {
  background: hsl(var(--primary) / 0.3);
}

.step {
		counter-increment: step;
	}

	.step:before {
		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
		@apply -ml-[50px] -mt-1;
		content: counter(step);
	}

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

@media (max-width: 640px) {
	.container {
		@apply px-4;
	}
}

.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:nth-child(2) {
    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 {
  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;
}

.list-box-tips 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 {
  background: #3c3c3c;
  box-shadow: 0 2px 0 2px #292929;
}

/**
https://apple.stackexchange.com/a/123577
*/
.list-box-tips kbd[data-macos-keyboard-key="command"]::before {
  content: "⌘";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-macos-keyboard-key="option"]::before {
  content: "⌥";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-windows-keyboard-key="windows"]::before {
  content: "⊞";
  vertical-align: top;
  margin-right: 4px;
  font-size: 1.4em;
}

.list-box-tips kbd[data-keyboard-key="esc"]::before {
  content: "⎋";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-keyboard-key="shift"]::before {
  content: "⇧";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-keyboard-key="return"]::before {
  content: "⏎";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-keyboard-key="control"]::before {
  content: "⌃";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-keyboard-key="enter"]::before {
  content: "⏎";
  vertical-align: top;
  margin-right: 4px;
}

.list-box-tips kbd[data-keyboard-key="space"]::before {
  content: "␣";
  vertical-align: top;
  margin-right: 4px;
  font-weight: bold;
}

.list-box-tips kbd[data-keyboard-key="up-arrow"]::before {
  content: "↑";
  vertical-align: top;
}

.list-box-tips kbd[data-keyboard-key="down-arrow"]::before {
  content: "↓";
  vertical-align: top;
}

.list-box-tips kbd[data-keyboard-key="left-arrow"]::before {
  content: "←";
  vertical-align: top;
}

.list-box-tips kbd[data-keyboard-key="right-arrow"]::before {
  content: "→";
  vertical-align: top;
}

mark {
  @apply bg-transparent text-foreground font-semibold;
}

[class*="language"] {
  @apply relative mb-4;

  & .lang {
    @apply hidden;
  }

  /* Better impl for custom copy button */
  & .copy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: 50% center;
    background-repeat: no-repeat;
    transition: border-color 0.25s ease 0s, background-color 0.25s ease 0s, opacity 0.25s ease 0s;
    @apply absolute top-2 right-2 w-9 h-9 rounded-lg;
  }

  & .copied {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0yMCA2TDkgMTdsLTUtNSIvPjwvc3ZnPg==");
  }
}

.step {
	counter-increment: step;
}

.step:before {
  @apply absolute w-9 h-9 bg-muted rounded-lg font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
  @apply -ml-[50px] -mt-1;
  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);

  padding: 1.2rem 1.2rem;
  border-radius: 12px;
}

.dark main .prose :where(details):not(:where(.not-prose,.not-prose *)) {
  background-color:rgba(88, 112, 132, 0.06);
}

pre.shiki {
  border-radius: 12px;
  background-color: var(--shiki-light-bg);
}

.dark pre.shiki {
  background-color: var(--shiki-dark-bg);
}

pre.shiki code span {
  color: var(--shiki-light);
}

.dark pre.shiki code span {
  color: var(--shiki-dark);
}

html.dark img.light {
  display: none;
}

html:not(.dark) img.dark {
  display: none;
}

video {
  border-radius: 8px;
}