daisyui/components/diff.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2{.diff{-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:1fr 1.8rem 1fr;grid-template-columns:auto 1fr;align-items:normal;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.diff:focus-visible,.diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.diff:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content);& .diff-resizer{min-width:95cqi;max-width:95cqi}}.diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;& .diff-resizer{min-width:5cqi;max-width:5cqi}}.diff:hover .diff-item-2:after{height:2.4rem}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.diff:focus .diff-resizer{min-width:5cqi;max-width:5cqi}.diff:has(.diff-item-1:focus) .diff-resizer{min-width:95cqi;max-width:95cqi}}}@layer daisyui.l1.l2.l3{.diff-resizer{isolation:isolate;z-index:2;resize:horizontal;opacity:0;cursor:ew-resize;transform-origin:100% 100%;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));grid-row-start:2;grid-column-start:1;width:50cqi;min-width:1rem;max-width:calc(100cqi - 1rem);height:.75rem;transition:min-width .3s ease-out,max-width .3s ease-out;position:relative;overflow:hidden;transform:scaleY(5)translate(.32rem,50%)}.diff-item-2{grid-row:1/span 3;grid-column-start:1;position:relative}.diff-item-2:after{pointer-events:none;z-index:2;background-color:color-mix(in oklab, var(--color-base-100) 98%, transparent);border:2px solid var(--color-base-100);content:"";outline:2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);outline-offset:-3px;width:1.2rem;height:1.8rem;transition:height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);border-radius:3.40282e38px;position:absolute;top:50%;bottom:0;right:1px;translate:50% -50%;box-shadow:0 0 0 2px #0000002a}.diff-item-2>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.diff-item-2:after{--tw-content:none;content:var(--tw-content)}}.diff-item-1{z-index:1;border-right:2px solid var(--color-base-100);grid-row:1/span 3;grid-column-start:1;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0000002a}.diff-item-1:focus-visible{--tw-outline-style:none;outline-style:none}.diff-item-1>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}}@media (width>=640px){@layer daisyui.l1.l2{.sm\:diff{-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:1fr 1.8rem 1fr;grid-template-columns:auto 1fr;align-items:normal;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.sm\:diff:focus-visible,.sm\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.sm\:diff:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content);& .diff-resizer{min-width:95cqi;max-width:95cqi}}.sm\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;& .diff-resizer{min-width:5cqi;max-width:5cqi}}.sm\:diff:hover .diff-item-2:after{height:2.4rem}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.sm\:diff:focus .diff-resizer{min-width:5cqi;max-width:5cqi}.sm\:diff:has(.diff-item-1:focus) .diff-resizer{min-width:95cqi;max-width:95cqi}}}@layer daisyui.l1.l2.l3{.sm\:diff-resizer{isolation:isolate;z-index:2;resize:horizontal;opacity:0;cursor:ew-resize;transform-origin:100% 100%;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));grid-row-start:2;grid-column-start:1;width:50cqi;min-width:1rem;max-width:calc(100cqi - 1rem);height:.75rem;transition:min-width .3s ease-out,max-width .3s ease-out;position:relative;overflow:hidden;transform:scaleY(5)translate(.32rem,50%)}.sm\:diff-item-2{grid-row:1/span 3;grid-column-start:1;position:relative}.sm\:diff-item-2:after{pointer-events:none;z-index:2;background-color:color-mix(in oklab, var(--color-base-100) 98%, transparent);border:2px solid var(--color-base-100);content:"";outline:2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);outline-offset:-3px;width:1.2rem;height:1.8rem;transition:height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);border-radius:3.40282e38px;position:absolute;top:50%;bottom:0;right:1px;translate:50% -50%;box-shadow:0 0 0 2px #0000002a}.sm\:diff-item-2>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.sm\:diff-item-2:after{--tw-content:none;content:var(--tw-content)}}.sm\:diff-item-1{z-index:1;border-right:2px solid var(--color-base-100);grid-row:1/span 3;grid-column-start:1;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0000002a}.sm\:diff-item-1:focus-visible{--tw-outline-style:none;outline-style:none}.sm\:diff-item-1>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}}}@media (width>=768px){@layer daisyui.l1.l2{.md\:diff{-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:1fr 1.8rem 1fr;grid-template-columns:auto 1fr;align-items:normal;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.md\:diff:focus-visible,.md\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.md\:diff:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content);& .diff-resizer{min-width:95cqi;max-width:95cqi}}.md\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;& .diff-resizer{min-width:5cqi;max-width:5cqi}}.md\:diff:hover .diff-item-2:after{height:2.4rem}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.md\:diff:focus .diff-resizer{min-width:5cqi;max-width:5cqi}.md\:diff:has(.diff-item-1:focus) .diff-resizer{min-width:95cqi;max-width:95cqi}}}@layer daisyui.l1.l2.l3{.md\:diff-resizer{isolation:isolate;z-index:2;resize:horizontal;opacity:0;cursor:ew-resize;transform-origin:100% 100%;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));grid-row-start:2;grid-column-start:1;width:50cqi;min-width:1rem;max-width:calc(100cqi - 1rem);height:.75rem;transition:min-width .3s ease-out,max-width .3s ease-out;position:relative;overflow:hidden;transform:scaleY(5)translate(.32rem,50%)}.md\:diff-item-2{grid-row:1/span 3;grid-column-start:1;position:relative}.md\:diff-item-2:after{pointer-events:none;z-index:2;background-color:color-mix(in oklab, var(--color-base-100) 98%, transparent);border:2px solid var(--color-base-100);content:"";outline:2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);outline-offset:-3px;width:1.2rem;height:1.8rem;transition:height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);border-radius:3.40282e38px;position:absolute;top:50%;bottom:0;right:1px;translate:50% -50%;box-shadow:0 0 0 2px #0000002a}.md\:diff-item-2>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.md\:diff-item-2:after{--tw-content:none;content:var(--tw-content)}}.md\:diff-item-1{z-index:1;border-right:2px solid var(--color-base-100);grid-row:1/span 3;grid-column-start:1;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0000002a}.md\:diff-item-1:focus-visible{--tw-outline-style:none;outline-style:none}.md\:diff-item-1>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}}}@media (width>=1024px){@layer daisyui.l1.l2{.lg\:diff{-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:1fr 1.8rem 1fr;grid-template-columns:auto 1fr;align-items:normal;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.lg\:diff:focus-visible,.lg\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.lg\:diff:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content);& .diff-resizer{min-width:95cqi;max-width:95cqi}}.lg\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;& .diff-resizer{min-width:5cqi;max-width:5cqi}}.lg\:diff:hover .diff-item-2:after{height:2.4rem}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.lg\:diff:focus .diff-resizer{min-width:5cqi;max-width:5cqi}.lg\:diff:has(.diff-item-1:focus) .diff-resizer{min-width:95cqi;max-width:95cqi}}}@layer daisyui.l1.l2.l3{.lg\:diff-resizer{isolation:isolate;z-index:2;resize:horizontal;opacity:0;cursor:ew-resize;transform-origin:100% 100%;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));grid-row-start:2;grid-column-start:1;width:50cqi;min-width:1rem;max-width:calc(100cqi - 1rem);height:.75rem;transition:min-width .3s ease-out,max-width .3s ease-out;position:relative;overflow:hidden;transform:scaleY(5)translate(.32rem,50%)}.lg\:diff-item-2{grid-row:1/span 3;grid-column-start:1;position:relative}.lg\:diff-item-2:after{pointer-events:none;z-index:2;background-color:color-mix(in oklab, var(--color-base-100) 98%, transparent);border:2px solid var(--color-base-100);content:"";outline:2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);outline-offset:-3px;width:1.2rem;height:1.8rem;transition:height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);border-radius:3.40282e38px;position:absolute;top:50%;bottom:0;right:1px;translate:50% -50%;box-shadow:0 0 0 2px #0000002a}.lg\:diff-item-2>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.lg\:diff-item-2:after{--tw-content:none;content:var(--tw-content)}}.lg\:diff-item-1{z-index:1;border-right:2px solid var(--color-base-100);grid-row:1/span 3;grid-column-start:1;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0000002a}.lg\:diff-item-1:focus-visible{--tw-outline-style:none;outline-style:none}.lg\:diff-item-1>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}}}@media (width>=1280px){@layer daisyui.l1.l2{.xl\:diff{-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:1fr 1.8rem 1fr;grid-template-columns:auto 1fr;align-items:normal;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.xl\:diff:focus-visible,.xl\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.xl\:diff:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content);& .diff-resizer{min-width:95cqi;max-width:95cqi}}.xl\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;& .diff-resizer{min-width:5cqi;max-width:5cqi}}.xl\:diff:hover .diff-item-2:after{height:2.4rem}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.xl\:diff:focus .diff-resizer{min-width:5cqi;max-width:5cqi}.xl\:diff:has(.diff-item-1:focus) .diff-resizer{min-width:95cqi;max-width:95cqi}}}@layer daisyui.l1.l2.l3{.xl\:diff-resizer{isolation:isolate;z-index:2;resize:horizontal;opacity:0;cursor:ew-resize;transform-origin:100% 100%;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));grid-row-start:2;grid-column-start:1;width:50cqi;min-width:1rem;max-width:calc(100cqi - 1rem);height:.75rem;transition:min-width .3s ease-out,max-width .3s ease-out;position:relative;overflow:hidden;transform:scaleY(5)translate(.32rem,50%)}.xl\:diff-item-2{grid-row:1/span 3;grid-column-start:1;position:relative}.xl\:diff-item-2:after{pointer-events:none;z-index:2;background-color:color-mix(in oklab, var(--color-base-100) 98%, transparent);border:2px solid var(--color-base-100);content:"";outline:2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);outline-offset:-3px;width:1.2rem;height:1.8rem;transition:height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);border-radius:3.40282e38px;position:absolute;top:50%;bottom:0;right:1px;translate:50% -50%;box-shadow:0 0 0 2px #0000002a}.xl\:diff-item-2>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.xl\:diff-item-2:after{--tw-content:none;content:var(--tw-content)}}.xl\:diff-item-1{z-index:1;border-right:2px solid var(--color-base-100);grid-row:1/span 3;grid-column-start:1;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0000002a}.xl\:diff-item-1:focus-visible{--tw-outline-style:none;outline-style:none}.xl\:diff-item-1>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}}}@media (width>=1536px){@layer daisyui.l1.l2{.\32 xl\:diff{-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:1fr 1.8rem 1fr;grid-template-columns:auto 1fr;align-items:normal;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.\32 xl\:diff:focus-visible,.\32 xl\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content)}.\32 xl\:diff:focus-visible{outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;outline-color:var(--color-base-content);& .diff-resizer{min-width:95cqi;max-width:95cqi}}.\32 xl\:diff:has(.diff-item-1:focus-visible){outline-style:var(--tw-outline-style);outline-offset:1px;outline-width:2px;& .diff-resizer{min-width:5cqi;max-width:5cqi}}.\32 xl\:diff:hover .diff-item-2:after{height:2.4rem}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.\32 xl\:diff:focus .diff-resizer{min-width:5cqi;max-width:5cqi}.\32 xl\:diff:has(.diff-item-1:focus) .diff-resizer{min-width:95cqi;max-width:95cqi}}}@layer daisyui.l1.l2.l3{.\32 xl\:diff-resizer{isolation:isolate;z-index:2;resize:horizontal;opacity:0;cursor:ew-resize;transform-origin:100% 100%;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));grid-row-start:2;grid-column-start:1;width:50cqi;min-width:1rem;max-width:calc(100cqi - 1rem);height:.75rem;transition:min-width .3s ease-out,max-width .3s ease-out;position:relative;overflow:hidden;transform:scaleY(5)translate(.32rem,50%)}.\32 xl\:diff-item-2{grid-row:1/span 3;grid-column-start:1;position:relative}.\32 xl\:diff-item-2:after{pointer-events:none;z-index:2;background-color:color-mix(in oklab, var(--color-base-100) 98%, transparent);border:2px solid var(--color-base-100);content:"";outline:2px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);outline-offset:-3px;width:1.2rem;height:1.8rem;transition:height .3s linear(0, .931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);border-radius:3.40282e38px;position:absolute;top:50%;bottom:0;right:1px;translate:50% -50%;box-shadow:0 0 0 2px #0000002a}.\32 xl\:diff-item-2>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}@supports (-webkit-overflow-scrolling:touch) and (overflow:-webkit-paged-x){.\32 xl\:diff-item-2:after{--tw-content:none;content:var(--tw-content)}}.\32 xl\:diff-item-1{z-index:1;border-right:2px solid var(--color-base-100);grid-row:1/span 3;grid-column-start:1;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0000002a}.\32 xl\:diff-item-1:focus-visible{--tw-outline-style:none;outline-style:none}.\32 xl\:diff-item-1>*{pointer-events:none;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0;left:0}}}}