mirror of
https://github.com/imfing/hextra.git
synced 2025-06-19 19:21:18 -04:00
chore: migrate to Tailwind CSS v4.0 (#632)
* chore: migrate PostCSS configuration to v4 * chore: update dependencies in package.json and package-lock.json - Bump versions for autoprefixer, postcss, postcss-cli, prettier, and tailwindcss. - Remove unused dependencies to streamline the project. * chore: add @tailwindcss/postcss and update package-lock.json * fix: update import paths in CSS files for consistency * fix: change prefix from `hx-` to `hx:` * chore: migrate primary color theme variables to CSS * fix: remove unnecessary text decoration property from anchor styles in typography CSS * fix: update CSS styles for improved consistency and clarity across components * chore: clean up package.json and package-lock.json, remove unused dependencies, and update CSS imports for better organization * fix: bulk replace prefix `hx-` with `hx:` * fix: update tailwind css prefix * fix: styling consistent issues - steps counter fix in v4 - removed tailwind.css - update hr border colors - fix button cursor in v4 - fix border colors in various places * fix: update class prefixes for consistency in menu and sidebar components * fix: refine CSS classes and transitions for navbar and sidebar components - Updated hamburger menu styles for improved animation and structure. - Adjusted sidebar transition duration for smoother effects. - Standardized class prefixes for consistency across components. * fix: update border color in hero badge component for improved styling consistency * fix: update tab button cursor style for improved user interaction * chore: recompile css * fix: dark mode color not applied for before / after elements * fix: docs navigation * chore: recompile CSS * chore: update Tailwind CSS and PostCSS dependencies to version 4.0.17, recompile CSS, and add safelist * fix: typo in class name and add back decoration-from-font for typography a tags * fix: update class syntax for Tailwind CSS compatibility in mermaid code block
This commit is contained in:
Xin
File diff suppressed because one or more lines are too long
@ -1,3 +1,3 @@
|
||||
.hextra-badge {
|
||||
@apply hx-inline-flex hx-items-center;
|
||||
@apply hx:inline-flex hx:items-center;
|
||||
}
|
||||
@ -2,6 +2,6 @@
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.hextra-code-copy-btn {
|
||||
@apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
|
||||
@apply hx:backdrop-blur-md hx:opacity-85 hx:dark:opacity-80;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
.hextra-jupyter-code-cell {
|
||||
scrollbar-gutter: auto;
|
||||
|
||||
@apply hx-mt-6;
|
||||
@apply hx:mt-6;
|
||||
|
||||
.hextra-jupyter-code-cell-outputs-container {
|
||||
@apply hx-text-xs hx-overflow-hidden;
|
||||
@apply hx:text-xs hx:overflow-hidden;
|
||||
|
||||
.hextra-jupyter-code-cell-outputs {
|
||||
@apply hx-overflow-auto hx-max-h-[50vh];
|
||||
@apply hx:overflow-auto hx:max-h-[50vh];
|
||||
|
||||
pre {
|
||||
@apply hx-text-xs hx-overflow-auto hx-max-w-full;
|
||||
@apply hx:text-xs hx:overflow-auto hx:max-w-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
nav {
|
||||
.search-wrapper {
|
||||
@apply hx-hidden md:hx-inline-block;
|
||||
@apply hx:hidden hx:md:inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,48 +8,43 @@ nav {
|
||||
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
|
||||
) {
|
||||
.nav-container-blur {
|
||||
@apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
|
||||
@apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-menu svg {
|
||||
g {
|
||||
@apply hx-origin-center;
|
||||
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
path {
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
|
||||
opacity 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
&.open {
|
||||
path {
|
||||
transition:
|
||||
transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
|
||||
opacity 0s ease 0.2s;
|
||||
}
|
||||
g {
|
||||
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&.open > {
|
||||
path {
|
||||
@apply hx-opacity-0;
|
||||
}
|
||||
g:nth-of-type(1) {
|
||||
@apply hx-rotate-45;
|
||||
path {
|
||||
transform: translate3d(0, 4px, 0);
|
||||
}
|
||||
}
|
||||
g:nth-of-type(2) {
|
||||
@apply -hx-rotate-45;
|
||||
path {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Hamburger Menu - Flattened Structure */
|
||||
.hamburger-menu svg g {
|
||||
@apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
|
||||
}
|
||||
|
||||
.hamburger-menu svg path {
|
||||
@apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open path {
|
||||
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open g {
|
||||
@apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > path {
|
||||
@apply hx:opacity-0;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(1) {
|
||||
@apply hx:rotate-45;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(1) path {
|
||||
@apply hx:translate-y-1;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(2) {
|
||||
@apply hx:-rotate-45;
|
||||
}
|
||||
|
||||
.hamburger-menu svg.open > g:nth-of-type(2) path {
|
||||
@apply hx:-translate-y-1;
|
||||
}
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
|
||||
scrollbar-gutter: stable;
|
||||
&::-webkit-scrollbar {
|
||||
@apply hx-w-3 hx-h-3;
|
||||
@apply hx:w-3 hx:h-3;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply hx-bg-transparent;
|
||||
@apply hx:bg-transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply hx-rounded-[10px];
|
||||
@apply hx:rounded-[10px];
|
||||
}
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid transparent;
|
||||
background-color: var(--tw-shadow-color);
|
||||
background-clip: content-box;
|
||||
@apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
|
||||
@apply hx:shadow-neutral-500/20 hx:hover:shadow-neutral-500/40;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
.search-wrapper {
|
||||
li {
|
||||
@apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
|
||||
@apply hx:mx-2.5 hx:break-words hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
|
||||
a {
|
||||
@apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
|
||||
@apply hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
|
||||
}
|
||||
|
||||
.title {
|
||||
@apply hx-text-base hx-font-semibold hx-leading-5;
|
||||
@apply hx:text-base hx:font-semibold hx:leading-5;
|
||||
}
|
||||
|
||||
.active {
|
||||
@apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
|
||||
@apply hx:rounded-md hx:bg-primary-500/10 hx:contrast-more:border-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
.no-result {
|
||||
@apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
|
||||
@apply hx:block hx:select-none hx:p-8 hx:text-center hx:text-sm hx:text-gray-400;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
@apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
|
||||
hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
|
||||
contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
|
||||
@apply hx:mx-2.5 hx:mb-2 hx:mt-6 hx:select-none hx:border-b hx:border-black/10 hx:px-2.5 hx:pb-1.5 hx:text-xs hx:font-semibold
|
||||
hx:uppercase hx:text-gray-500 hx:first:mt-0 hx:dark:border-white/20 hx:dark:text-gray-300 hx:contrast-more:border-gray-600
|
||||
hx:contrast-more:text-gray-900 hx:contrast-more:dark:border-gray-50 hx:contrast-more:dark:text-gray-50;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
@apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
|
||||
@apply hx:overflow-hidden hx:text-ellipsis hx:mt-1 hx:text-sm hx:leading-[1.35rem] hx:text-gray-600 hx:dark:text-gray-400 hx:contrast-more:dark:text-gray-50;
|
||||
display: -webkit-box;
|
||||
line-clamp: 1;
|
||||
-webkit-line-clamp: 1;
|
||||
@ -33,6 +33,6 @@
|
||||
}
|
||||
|
||||
.match {
|
||||
@apply hx-text-primary-600;
|
||||
@apply hx:text-primary-600;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@media (max-width: 767px) {
|
||||
@media (max-width: 48rem) {
|
||||
.sidebar-container {
|
||||
@apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
|
||||
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
@apply hx:fixed hx:pt-[calc(var(--navbar-height))] hx:top-0 hx:w-full hx:bottom-0 hx:z-[15] hx:overscroll-contain hx:bg-white hx:dark:bg-dark;
|
||||
transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
|
||||
will-change: transform, opacity;
|
||||
contain: layout style;
|
||||
backface-visibility: hidden;
|
||||
@ -10,12 +10,12 @@
|
||||
|
||||
.sidebar-container {
|
||||
li > div {
|
||||
@apply hx-h-0;
|
||||
@apply hx:h-0;
|
||||
}
|
||||
li.open > div {
|
||||
@apply hx-h-auto hx-pt-1;
|
||||
@apply hx:h-auto hx:pt-1;
|
||||
}
|
||||
li.open > a > span > svg > path {
|
||||
@apply hx-rotate-90;
|
||||
@apply hx:rotate-90;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
.steps h3 {
|
||||
counter-increment: step;
|
||||
|
||||
&:before {
|
||||
@apply hx-absolute hx-w-[33px] hx-h-[33px];
|
||||
@apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
|
||||
@apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
|
||||
@apply hx-mt-[3px] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px];
|
||||
content: counter(step);
|
||||
.steps {
|
||||
:where(h2, h3, h4, h5, h6):not(.no-step-marker) {
|
||||
counter-increment: step;
|
||||
@apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px];
|
||||
/* https://github.com/tailwindlabs/tailwindcss/issues/15597#issuecomment-2582673546 */
|
||||
@apply hx:before:bg-gray-100 hx:dark:before:bg-neutral-800;
|
||||
@apply hx:before:border-4 hx:before:border-white hx:dark:before:border-dark;
|
||||
&:before {
|
||||
content: counter(step);
|
||||
@apply hx:absolute hx:size-[33px];
|
||||
@apply hx:rounded-full hx:text-neutral-400 hx:text-base hx:font-normal hx:text-center hx:-indent-px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:lang(fa) .steps h3 {
|
||||
&:before {
|
||||
content: counter(step, persian);
|
||||
:lang(fa) .steps {
|
||||
:where(h2, h3, h4, h5, h6):not(.no-step-marker) {
|
||||
&:before {
|
||||
content: counter(step, persian);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,53 +1,53 @@
|
||||
/* Code syntax highlight */
|
||||
@import "chroma/light.css";
|
||||
@import "chroma/dark.css";
|
||||
@import "./chroma/light.css";
|
||||
@import "./chroma/dark.css";
|
||||
|
||||
.hextra-code-block {
|
||||
@apply hx-text-[.9em] hx-leading-5;
|
||||
@apply hx:text-[.9em] hx:leading-5;
|
||||
|
||||
pre {
|
||||
@apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
|
||||
@apply hx:text-[.9em] hx:bg-primary-700/5 hx:overflow-x-auto hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40;
|
||||
}
|
||||
|
||||
.filename {
|
||||
@apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
|
||||
@apply hx:absolute hx:top-0 hx:z-[1] hx:w-full hx:truncate hx:rounded-t-xl hx:bg-primary-700/5 hx:py-2 hx:px-4 hx:text-xs hx:text-gray-700 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
|
||||
}
|
||||
|
||||
.filename + pre:not(.lntable pre) {
|
||||
/* Override padding for code blocks with filename but no highlight */
|
||||
@apply hx-pt-12;
|
||||
@apply hx:pt-12;
|
||||
}
|
||||
}
|
||||
|
||||
.hextra-code-block pre:not(.lntable pre) {
|
||||
@apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
|
||||
@apply hx:px-4 hx:mb-4 hx:py-4 hx:rounded-xl;
|
||||
}
|
||||
|
||||
.hextra-code-block div:nth-of-type(2) pre {
|
||||
@apply hx-pt-12 hx-pb-4;
|
||||
@apply hx:pt-12 hx:pb-4;
|
||||
}
|
||||
|
||||
.chroma {
|
||||
.lntable {
|
||||
@apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
|
||||
@apply hx:m-0 hx:block hx:w-auto hx:overflow-auto hx:rounded-xl;
|
||||
|
||||
pre {
|
||||
@apply hx-pt-4 hx-pb-4;
|
||||
@apply hx:pt-4 hx:pb-4;
|
||||
}
|
||||
}
|
||||
.ln,
|
||||
.lnt:not(.hl > .lnt),
|
||||
.hl:not(.line) {
|
||||
@apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
|
||||
@apply hx:pl-4 hx:pr-4 hx:min-w-[2.6rem] hx:text-neutral-600 hx:dark:text-neutral-300;
|
||||
}
|
||||
.lntd {
|
||||
@apply hx-p-0 hx-align-top;
|
||||
@apply hx:p-0 hx:align-top;
|
||||
}
|
||||
.lntd:last-of-type {
|
||||
@apply hx-w-full;
|
||||
@apply hx:w-full;
|
||||
}
|
||||
/* LineHighlight */
|
||||
.hl {
|
||||
@apply hx-block hx-w-full hx-bg-primary-800/10;
|
||||
@apply hx:block hx:w-full hx:bg-primary-800/10;
|
||||
}
|
||||
}
|
||||
|
||||
1
assets/css/safelist.txt
Normal file
1
assets/css/safelist.txt
Normal file
@ -0,0 +1 @@
|
||||
hx:max-w-full
|
||||
@ -1,26 +1,27 @@
|
||||
@import "tailwind.css";
|
||||
@import "tailwindcss" prefix(hx);
|
||||
|
||||
@import "typography.css";
|
||||
@import "highlight.css";
|
||||
@import "components/cards.css";
|
||||
@import "components/steps.css";
|
||||
@import "components/search.css";
|
||||
@import "components/sidebar.css";
|
||||
@import "components/navbar.css";
|
||||
@import "components/scrollbar.css";
|
||||
@import "components/code-copy.css";
|
||||
@import "components/hextra/feature-grid.css";
|
||||
@import "components/jupyter.css";
|
||||
@import "components/badge.css";
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47));
|
||||
--color-primary-100: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44));
|
||||
--color-primary-200: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 36));
|
||||
--color-primary-300: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27));
|
||||
--color-primary-400: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16));
|
||||
--color-primary-500: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
|
||||
--color-primary-600: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45));
|
||||
--color-primary-700: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39));
|
||||
--color-primary-800: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32));
|
||||
--color-primary-900: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24));
|
||||
--color-dark: #111;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply hx-text-base hx-antialiased;
|
||||
font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@apply hx:text-base hx:antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
|
||||
@apply hx:w-full hx:bg-white hx:dark:bg-dark hx:dark:text-gray-100;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -36,3 +37,16 @@ body {
|
||||
--primary-saturation: 100%;
|
||||
--primary-lightness: 50%;
|
||||
}
|
||||
|
||||
@import "./typography.css";
|
||||
@import "./highlight.css";
|
||||
@import "./components/cards.css";
|
||||
@import "./components/steps.css";
|
||||
@import "./components/search.css";
|
||||
@import "./components/sidebar.css";
|
||||
@import "./components/navbar.css";
|
||||
@import "./components/scrollbar.css";
|
||||
@import "./components/code-copy.css";
|
||||
@import "./components/hextra/feature-grid.css";
|
||||
@import "./components/jupyter.css";
|
||||
@import "./components/badge.css";
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -1,126 +1,130 @@
|
||||
.content {
|
||||
:where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
|
||||
@apply hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100;
|
||||
}
|
||||
:where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-10 hx:border-b hx:pb-1 hx:text-3xl hx:border-neutral-200/70 hx:contrast-more:border-neutral-400 hx:dark:border-primary-100/10 hx:contrast-more:dark:border-neutral-400;
|
||||
}
|
||||
:where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-2xl;
|
||||
}
|
||||
:where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-xl;
|
||||
}
|
||||
:where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-lg;
|
||||
}
|
||||
:where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
|
||||
@apply hx:font-semibold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100 hx:mt-8 hx:text-base;
|
||||
}
|
||||
:where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mt-6 hx-leading-7 first:hx-mt-0;
|
||||
@apply hx:mt-6 hx:leading-7 hx:first:mt-0;
|
||||
}
|
||||
:where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
|
||||
@apply hx:text-primary-600 hx:underline hx:decoration-from-font;
|
||||
}
|
||||
:where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
|
||||
@apply hx:mt-6 hx:border-gray-300 hx:italic hx:text-gray-700 hx:dark:border-gray-700 hx:dark:text-gray-400 hx:first:mt-0 hx:ltr:border-l-2 hx:ltr:pl-6 hx:rtl:border-r-2 hx:rtl:pr-6;
|
||||
}
|
||||
:where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
|
||||
@apply hx:bg-primary-700/5 hx:mb-4 hx:overflow-x-auto hx:rounded-xl hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:text-[.9em] hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40 hx:py-4;
|
||||
}
|
||||
:where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
|
||||
@apply hx:block hx:overflow-x-auto hx:mt-6 hx:p-0 hx:first:mt-0;
|
||||
|
||||
tr {
|
||||
@apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
|
||||
@apply hx:m-0 hx:border-t hx:border-gray-300 hx:p-0 hx:dark:border-gray-600 hx:even:bg-gray-100 hx:even:dark:bg-gray-600/20;
|
||||
}
|
||||
th {
|
||||
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
|
||||
@apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:font-semibold hx:dark:border-gray-600;
|
||||
}
|
||||
td {
|
||||
@apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
|
||||
@apply hx:m-0 hx:border hx:border-gray-300 hx:px-4 hx:py-2 hx:dark:border-gray-600;
|
||||
}
|
||||
}
|
||||
:where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
|
||||
@apply hx:mt-6 hx:list-decimal hx:first:mt-0 hx:ltr:ml-6 hx:rtl:mr-6;
|
||||
li {
|
||||
@apply hx-my-2;
|
||||
@apply hx:my-2;
|
||||
}
|
||||
}
|
||||
:where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
|
||||
@apply hx:mt-6 hx:list-disc hx:first:mt-0 hx:ltr:ml-6 hx:rtl:mr-6;
|
||||
li {
|
||||
@apply hx-my-2;
|
||||
@apply hx:my-2;
|
||||
}
|
||||
}
|
||||
/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
|
||||
inside the list item (li) of any parent ul or ol.
|
||||
The rule sets the top margin of the selected list to zero. */
|
||||
:where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mt-0;
|
||||
@apply hx:mt-0;
|
||||
}
|
||||
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
|
||||
@apply hx:border-black/4 hx:bg-black/3 hx:break-words hx:rounded-md hx:border hx:py-0.5 hx:px-[.25em] hx:text-[.9em] hx:dark:border-white/10 hx:dark:bg-white/10;
|
||||
}
|
||||
:where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
|
||||
@apply hx:bg-transparent hx:rounded-none hx:dark:bg-transparent;
|
||||
}
|
||||
:where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
@apply hx-mx-auto hx-my-4 hx-rounded-md;
|
||||
@apply hx:mx-auto hx:my-4 hx:rounded-md;
|
||||
}
|
||||
:where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
figcaption {
|
||||
@apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
|
||||
@apply hx:text-sm hx:text-gray-500 hx:dark:text-gray-400 hx:mt-2 hx:block hx:text-center;
|
||||
}
|
||||
}
|
||||
/* Definition list */
|
||||
:where(dl):not(:where([class~=not-prose],[class~=not-prose] *)) {
|
||||
dt {
|
||||
@apply hx-mt-6 hx-font-semibold;
|
||||
@apply hx:mt-6 hx:font-semibold;
|
||||
}
|
||||
dd {
|
||||
@apply hx-my-2 hx-ps-6;
|
||||
@apply hx:my-2 hx:ps-6;
|
||||
}
|
||||
}
|
||||
.footnotes {
|
||||
@apply hx-mt-12 hx-text-sm;
|
||||
@apply hx:mt-12 hx:text-sm;
|
||||
|
||||
hr {
|
||||
@apply hx:border-gray-200 hx:dark:border-neutral-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subheading-anchor {
|
||||
@apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
|
||||
@apply hx:opacity-0 hx:transition-opacity hx:ltr:ml-1 hx:rtl:mr-1;
|
||||
|
||||
span:target + &,
|
||||
:hover > &,
|
||||
&:focus {
|
||||
@apply hx-opacity-100;
|
||||
@apply hx:opacity-100;
|
||||
}
|
||||
|
||||
span + &,
|
||||
:hover > & {
|
||||
@apply !hx-no-underline;
|
||||
@apply hx:no-underline!;
|
||||
}
|
||||
|
||||
@apply hx:after:text-gray-300 hx:dark:after:text-neutral-700;
|
||||
&:after {
|
||||
@apply hx-content-['#'] hx-px-1;
|
||||
@apply hx-text-gray-300 dark:hx-text-neutral-700;
|
||||
@apply hx:content-['#'] hx:px-1;
|
||||
span:target + & {
|
||||
@apply hx-text-gray-400;
|
||||
@apply dark:hx-text-neutral-500;
|
||||
@apply hx:text-gray-400;
|
||||
@apply hx:dark:text-neutral-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article details > summary {
|
||||
&::-webkit-details-marker {
|
||||
@apply hx-hidden;
|
||||
@apply hx:hidden;
|
||||
}
|
||||
&::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx:h-5 hx:w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
vertical-align: -4px;
|
||||
|
||||
Reference in New Issue
Block a user