Urara-Blog/src/app.pcss

/* tailwind */
@import url('http://fonts.cdnfonts.com/css/lato');
@tailwind base;

@tailwind components;

@tailwind utilities;

/* global */

html {
  @apply !bg-base-200 scroll-smooth	overflow-x-hidden overflow-y-scroll;
  font-family: Lato, pingfang sc, microsoft yahei, sans-serif;
}

::selection {
  @apply bg-primary/20;
}

/* .urara-prose */

.urara-prose {
  @apply !max-w-none;
}

/* .urara-prose heading */

.urara-prose > :is(h1, h2, h3, h4, h5) > a {
  @apply no-underline font-bold;
}

.urara-prose > :is(h1, h2, h3, h4, h5) > a::after {
  @apply pl-2 text-base-200 transition-all content-['#'];
}

.urara-prose > :is(h1, h2, h3, h4, h5):hover > a::after {
  @apply text-primary;
}

/* .urara-prose list */

.urara-prose > ul > li > input {
  @apply my-auto;
}

/* .urara-prose table */

.urara-prose div > table > thead {
  @apply border-0;
}

.urara-prose div > table > thead > tr > th {
  @apply !relative;
}

/* .urara-prose a */

.urara-prose :is(p, li) > a {
  @apply bg-[length:100%_0.2em] hover:bg-[length:100%_100%] bg-[position:0_88%] bg-gradient-to-t from-secondary/50 to-secondary/40 bg-no-repeat transition-all ease-in-out !no-underline;
}

/* .urara-prose misc */

.urara-prose > p img {
  @apply w-full;
}

.urara-prose :is(p, li) > code {
  @apply bg-base-200 px-2;
}

.urara-prose li > input {
  @apply checkbox checkbox-xs;
}

.urara-prose kbd {
  @apply kbd;
}

.urara-prose hr {
  @apply border-none divider;
}

/* footer a */

footer a {
  @apply !no-underline hover:text-primary hover:!underline transition-all;
}

.spoiler {
  @apply blur-sm hover:blur-none active:blur-none transition-all select-all;
}

/* .prose pre */

.prose pre {
  @apply mockup-code !bg-neutral min-w-0;
}

.prose pre:not(.shiki) {
  @apply bg-neutral text-neutral-content;
}

.prose pre:not(.shiki)::before {
  @apply sticky -left-5 -ml-5;
}

/* .urara-prose pre */

@media (max-width: 768px) {
  .urara-prose > pre {
    @apply -mx-8 rounded-none;
  }
}

.urara-prose > pre {
  @apply pb-0;
}

.urara-prose > pre > div.code-container {
  @apply pb-5 overflow-x-auto;
}

/* shiki */

pre.shiki {
  @apply px-0;
}

pre.shiki::before {
  @apply sticky;
}

pre.shiki > div.code-title {
  @apply absolute -mt-10 ml-20 pt-1.5 pl-1.5 opacity-50;
}

pre.shiki .language-id {
  @apply hidden;
}

pre.shiki > .code-container {
  @apply overflow-auto;
}

:is(pre.shiki[text='true'], pre.shiki[svelte='true']) > div.code-container {
  @apply mx-5;
}

pre.shiki:not([text='true'], [svelte='true']) > .code-container > code > div.line > span:first-child {
  @apply pl-5;
}

pre.shiki:not([text='true'], [svelte='true']) > .code-container > code > div.line > span:last-child {
  @apply pr-5;
}

pre.shiki div.dim {
  @apply opacity-50 transition-opacity;
}

pre.shiki:hover div.dim {
  @apply opacity-100;
}

pre.shiki div.highlight::before {
  @apply bg-warning/20 absolute content-[''] w-full h-6;
}

pre.twoslash data-lsp {
  @apply border-b border-dashed border-transparent transition-all;
}

pre.twoslash:hover data-lsp {
  @apply border-neutral-content/30;
}

pre.twoslash data-lsp:hover::before {
  @apply content-[attr(lsp)] absolute rounded translate-y-5 bg-neutral-focus text-neutral-content font-mono whitespace-pre-wrap transition-all px-2 py-1 z-50;
}

/* your code here */

.urara-prose blockquote {
  @apply font-normal text-current  not-italic  before:content-['“'];
  border-left: 4px solid rgba(0, 0, 0, 0.05);
}

.urara-prose blockquote:before {
  vertical-align: -0.4em;
  @apply mr-2 text-5xl leading-3 italic font-serif  opacity-25;
}

.urara-prose blockquote p {
  @apply inline opacity-80  before:content-[''] after:content-[''];
}