mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 19:22:52 +02:00
75 lines
2 KiB
CSS
75 lines
2 KiB
CSS
:root {
|
|
--uno-colors-primary: theme('colors.primary');
|
|
--uno-colors-secondary: theme('colors.secondary');
|
|
--uno-colors-background: theme('colors.background');
|
|
}
|
|
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';
|
|
}
|
|
|
|
/* Fix KaTeX Overflow Issue */
|
|
.katex-display {
|
|
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
|
|
}
|
|
.katex-display::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* 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-80';
|
|
}
|
|
.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';
|
|
}
|
|
|
|
/* Highlight Hover Animation */
|
|
.highlight-static,
|
|
.highlight-hover {
|
|
--at-apply: 'relative inline-block';
|
|
}
|
|
.highlight-static::after,
|
|
.highlight-hover::after {
|
|
--at-apply: 'content-[""] 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-250';
|
|
}
|
|
|
|
/* Fix Highlight Position Issue on iOS */
|
|
@supports (-webkit-touch-callout: none) {
|
|
.navbar-highlight-position-fix {
|
|
--at-apply: 'after:bottom-0.68em';
|
|
}
|
|
.footer-highlight-position-fix {
|
|
--at-apply: 'after:bottom-0.39em';
|
|
}
|
|
}
|