MyBlog-Next/src/styles/base.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root,
  html[data-theme="light"] {
    --color-fill: 251, 254, 251;
    --color-text-base: 40, 39, 40;
    --color-accent: 0, 108, 172;
    --color-card: 230, 230, 230;
    --color-card-muted: 205, 205, 205;
    --color-border: 236, 233, 233;
  }
  html[data-theme="dark"] {
    --color-fill: 33, 39, 55;
    --color-text-base: 234, 237, 243;
    --color-accent: 255, 107, 1;
    --color-card: 52, 63, 96;
    --color-card-muted: 138, 51, 2;
    --color-border: 171, 75, 8;
  }
  #sun-svg,
  html[data-theme="dark"] #moon-svg {
    display: none;
  }
  #moon-svg,
  html[data-theme="dark"] #sun-svg {
    display: block;
  }
  body {
    @apply flex min-h-[100svh] flex-col bg-skin-fill font-mono text-skin-base selection:bg-skin-accent/70 selection:text-skin-inverted;
  }
  section,
  footer {
    @apply mx-auto max-w-3xl px-4;
  }
  a {
    @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
  }
  svg {
    @apply inline-block h-6 w-6 fill-skin-base group-hover:fill-skin-accent;
  }
  svg.icon-tabler {
    @apply inline-block h-6 w-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110;
  }
  .prose {
    @apply prose-headings:!mb-3 prose-headings:!text-skin-base prose-h3:italic prose-p:!text-skin-base prose-a:!text-skin-base prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-skin-accent prose-blockquote:!border-l-skin-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-skin-base prose-figcaption:opacity-70 prose-strong:!text-skin-base prose-code:rounded prose-code:bg-skin-card/75 prose-code:p-1 prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-skin-base prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent prose-table:text-skin-base prose-th:border prose-th:border-skin-line prose-td:border prose-td:border-skin-line prose-img:!my-2 prose-img:mx-auto prose-img:border-2 prose-img:border-skin-line prose-hr:!border-skin-line;
  }
  .prose a {
    @apply break-words hover:!text-skin-accent;
  }
  .prose thead th:first-child,
  tbody td:first-child,
  tfoot td:first-child {
    padding-left: 0.5714286em;
  }
  .prose h2#table-of-contents {
    @apply mb-2;
  }
  .prose details {
    @apply inline-block cursor-pointer select-none text-skin-base;
  }
  .prose summary {
    @apply focus-outline;
  }
  .prose h2#table-of-contents + p {
    @apply hidden;
  }

  /* ===== scrollbar ===== */
  html {
    overflow-y: scroll;
  }

  /* width */
  ::-webkit-scrollbar {
    @apply w-3;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-skin-fill;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-skin-card;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-skin-card-muted;
  }

  /* ===== Code Blocks & Syntax Highlighting ===== */
  pre:has(code) {
    @apply border border-skin-line;
  }
  code,
  blockquote {
    word-wrap: break-word;
  }

  pre > code {
    white-space: pre;
  }

  /* Apply Dark Theme (if multi-theme specified) */
  html[data-theme="dark"] pre:has(code),
  html[data-theme="dark"] pre:has(code) span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

@layer components {
  .display-none {
    @apply hidden;
  }
  .focus-outline {
    @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
  }
}