@charset "UTF-8";

/**
 * 自定义css样式
 * 当然也可以创建一个custom.css文件
 * 然后在app.css中引入
 * @import "./custom.css";
 * npx @tailwindcss/cli -i ./assets/app.css -o ./assets/tailwindcss.css --watch
 */

/* @import "tailwindcss"; */

@plugin "daisyui";

@plugin "daisyui/theme" {
    name: "rice";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: oklch(98% 0.003 247.858);
    --color-base-200: oklch(97% 0.014 308.299);
    --color-base-300: oklch(81% 0.111 293.571);
    --color-base-content: oklch(28% 0.141 291.089);
    --color-primary: oklch(88% 0.059 254.128);
    --color-primary-content: oklch(28% 0.141 291.089);
    --color-secondary: oklch(95% 0.045 203.388);
    --color-secondary-content: oklch(30% 0.056 229.695);
    --color-accent: oklch(80% 0.114 19.571);
    --color-accent-content: oklch(25% 0.092 26.042);
    --color-neutral: oklch(27% 0.033 256.848);
    --color-neutral-content: oklch(98% 0.002 247.839);
    --color-info: oklch(90% 0.058 230.902);
    --color-info-content: oklch(30% 0.056 229.695);
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(26% 0.051 172.552);
    --color-warning: oklch(75% 0.183 55.934);
    --color-warning-content: oklch(26% 0.079 36.259);
    --color-error: oklch(70% 0.191 22.216);
    --color-error-content: oklch(25% 0.092 26.042);
    --radius-selector: 2rem;
    --radius-field: 2rem;
    --radius-box: 2rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 1;
}

@plugin "daisyui/theme" {
    name: "synthwave";
    default: false;
    prefersdark: true;
    color-scheme: "dark";
    --color-base-100: oklch(15% 0.09 281.288);
    --color-base-200: oklch(20% 0.09 281.288);
    --color-base-300: oklch(25% 0.09 281.288);
    --color-base-content: oklch(78% 0.115 274.713);
    --color-primary: oklch(71.0% 0.202 291.4);
    --color-primary-content: oklch(28.0% 0.109 302.7);
    --color-secondary: oklch(82% 0.111 230.318);
    --color-secondary-content: oklch(29% 0.066 243.157);
    --color-accent: oklch(75% 0.183 55.934);
    --color-accent-content: oklch(26% 0.079 36.259);
    --color-neutral: oklch(45% 0.24 277.023);
    --color-neutral-content: oklch(87% 0.065 274.039);
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);
    --color-success: oklch(77% 0.152 181.912);
    --color-success-content: oklch(27% 0.046 192.524);
    --color-warning: oklch(90% 0.182 98.111);
    --color-warning-content: oklch(42% 0.095 57.708);
    --color-error: oklch(73.7% 0.121 32.639);
    --color-error-content: oklch(23.501% 0.096 290.329);
    --radius-selector: 2rem;
    --radius-field: 2rem;
    --radius-box: 2rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

.prose {
    color: var(--color-base-content);
    line-height: 1.85;
    word-break: break-word;
}

.prose a {
    color: var(--color-primary);
    text-decoration: none;
    text-underline-offset: 2px;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.prose a::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4px;
    bottom: -4px;
    left: -7px;
    right: -7px;
    background-color: var(--color-primary);
    border-radius: var(--radius-box);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.prose a:hover {
    color: var(--color-primary-content);
    opacity: 1;
}

.prose a:hover::before {
    transform: scale(1);
    opacity: 1;
}

.prose img {
    border-radius: var(--radius-box);
    display: block;
    margin: 1rem auto;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: var(--color-base-content);
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.prose h2 {
    position: relative;
    padding-left: 0.75rem;
}

.prose h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 8px;
    background-color: var(--color-primary);
    border-radius: 999px;
}

.prose h3 {
    position: relative;
    padding-left: 0.75rem;
}

.prose h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 6px;
    background-color: color-mix(in oklab, var(--color-primary) 70%, #0000);
    border-radius: 999px;
}

.prose h4 {
    position: relative;
    padding-left: 0.75rem;
}

.prose h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 4px;
    background-color: color-mix(in oklab, var(--color-primary) 50%, #0000);
    border-radius: 999px;
}

.prose h1 {
    position: relative;
}


.prose h5 {
    position: relative;
    padding-left: 0.75rem;
}

.prose h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 3px;
    background-color: color-mix(in oklab, var(--color-primary) 35%, #0000);
    border-radius: 999px;
}

.prose h6 {
    position: relative;
    padding-left: 0.75rem;
}

.prose h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 2px;
    background-color: color-mix(in oklab, var(--color-primary) 25%, #0000);
    border-radius: 999px;
}

.prose blockquote {
    padding: 1rem;
    margin: 1rem 0;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
    background-color: color-mix(in oklab, var(--color-neutral) 5%, transparent);
    border-radius: var(--radius-box);
}

.prose pre {
    background: var(--color-neutral);
    color: var(--color-neutral-content);
    border-radius: var(--radius-box);
    padding: 1rem;
    overflow: auto;
}

.prose code {
    background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent);
    padding: 0.2rem 0.35rem;
    border-radius: 0.375rem;
}

.prose ul,
.prose ol {
    padding-left: 1.25rem;
    margin: 0.75rem 0;
}

.prose hr {
    border: none;
    border-top: 1px solid color-mix(in oklch, var(--color-base-content) 10%, #0000);
    margin: 1.5rem 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--radius-box);
    overflow: hidden;
}

.prose thead th {
    background-color: color-mix(in oklch, var(--color-base-200) 70%, #0000);
}

.prose th,
.prose td {
    border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 10%, #0000);
    padding: 0.5rem 0.75rem;
}

.blur-up {
    -webkit-filter: none;
    filter: none;
    transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloading {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.blur-up.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}

.back-to-top-fab {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.95);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.back-to-top-fab.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.prose img.owo-emoji,
.comment_body img.owo-emoji {
    display: inline-block !important;
    vertical-align: text-bottom;
    margin: 0 0.15em;
    height: 2.5em;
    width: auto;
}