mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 19:22:52 +02:00
89 lines
No EOL
2.4 KiB
CSS
89 lines
No EOL
2.4 KiB
CSS
html {
|
|
--at-apply: 'bg-background c-secondary antialiased';
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
/* Fix Flash Issue On iOS */
|
|
body {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
body::selection {
|
|
--at-apply: 'bg-highlight';
|
|
}
|
|
|
|
/* PhotoSwipe Background Color */
|
|
.pswp .pswp__bg {
|
|
--at-apply: 'bg-background!';
|
|
}
|
|
|
|
/* Fix KaTeX Overflow with Hidden Scrollbar */
|
|
.katex-display {
|
|
--at-apply: 'my-6 overflow-x-auto overflow-y-hidden scrollbar-hidden';
|
|
}
|
|
.katex-display::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Highlight Hover Animation */
|
|
.highlight-static,
|
|
.highlight-hover {
|
|
--at-apply: 'relative inline-block';
|
|
}
|
|
.highlight-static::after,
|
|
.highlight-hover::after {
|
|
content: '';
|
|
--at-apply: 'absolute left-0 z--1 h-0.5em w-full bg-highlight';
|
|
}
|
|
.highlight-static::after,
|
|
.highlight-hover:hover::after {
|
|
--at-apply: 'origin-bottom-left scale-x-100';
|
|
}
|
|
.highlight-hover::after {
|
|
--at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-300';
|
|
}
|
|
|
|
/* Heading Anchor Link */
|
|
.heading-anchor-link {
|
|
--at-apply: 'inline-block translate-y-0.1em';
|
|
}
|
|
h1:hover .heading-anchor-link svg,
|
|
h2:hover .heading-anchor-link svg,
|
|
h3:hover .heading-anchor-link svg,
|
|
h4:hover .heading-anchor-link svg {
|
|
--at-apply: 'op-40';
|
|
}
|
|
.heading-anchor-link svg {
|
|
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90';
|
|
}
|
|
h1:hover .heading-anchor-link svg:hover,
|
|
h2:hover .heading-anchor-link svg:hover,
|
|
h3:hover .heading-anchor-link svg:hover,
|
|
h4:hover .heading-anchor-link svg:hover {
|
|
--at-apply: 'op-80';
|
|
}
|
|
|
|
/* Code Copy Button */
|
|
.code-copy-button {
|
|
--at-apply: 'absolute right-2.2 top-2.2 z-99 aspect-square w-8 cursor-pointer uno-round-border border-secondary/15';
|
|
--at-apply: 'bg-background c-secondary/80 op-100 hover:(border-primary/15 c-primary/80) lg:op-0';
|
|
transition: opacity 300ms ease-out, background-color 150ms ease-out;
|
|
}
|
|
.code-block-wrapper:hover .code-copy-button {
|
|
--at-apply: 'op-100';
|
|
}
|
|
.code-copy-button.copy-success {
|
|
--at-apply: 'border-none bg-emerald-600 c-background';
|
|
}
|
|
html.dark .code-copy-button.copy-success {
|
|
--at-apply: 'bg-emerald-500';
|
|
}
|
|
.code-copy-button svg {
|
|
--at-apply: 'mx-auto aspect-square w-50%';
|
|
}
|
|
.code-copy-button svg,
|
|
.code-copy-button svg path {
|
|
--at-apply: 'pointer-events-none';
|
|
} |