flyonui/components/diff.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.diff{grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.diff-resizer{z-index:1;--tw-translate-x:.335rem;width:25rem;min-width:1rem;max-width:calc(100cqi - 1rem);height:.375rem;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:calc(.18rem*-1);translate:var(--tw-translate-x)var(--tw-translate-y);--tw-scale-y:400%;scale:var(--tw-scale-x)var(--tw-scale-y);resize:horizontal;opacity:0;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));top:50%;overflow:hidden}.diff-resizer,.diff-item-1,.diff-item-2{grid-row-start:1;grid-column-start:1;position:relative}.diff-item-1:after{pointer-events:none;inset-inline-end:1px;z-index:1;border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-base-100);background-color:color-mix(in oklab,var(--color-primary)40%,transparent);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);width:1.25rem;height:1.25rem;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);outline-style:var(--tw-outline-style);outline-offset:calc(2px*-1);outline-width:1px;outline-color:color-mix(in oklab,var(--color-base-content)5%,transparent);--tw-backdrop-blur:blur(8px);backdrop-filter:blur(8px);--tw-content:"";content:var(--tw-content);position:absolute;top:50%;bottom:0;translate:50% -50%;rotate:45deg}.diff-item-2{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:var(--color-base-100);overflow:hidden}.diff-item-1>*,.diff-item-2>*{pointer-events:none;inset-inline-start:0;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0}[dir=rtl] .diff-resizer{transform-origin:0 100%;clip-path:inset(calc(100% - .75rem) calc(100% - .75rem) 0 0);translate:-.29rem .37rem}[dir=rtl] .diff-item-1:after{left:1px;right:auto;translate:-50% -50%}[dir=rtl] .diff-item-1>*,[dir=rtl] .diff-item-2>*{left:auto;right:0}@media (width>=640px){.sm\:diff{grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.sm\:diff-resizer{z-index:1;--tw-translate-x:.335rem;width:25rem;min-width:1rem;max-width:calc(100cqi - 1rem);height:.375rem;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:calc(.18rem*-1);translate:var(--tw-translate-x)var(--tw-translate-y);--tw-scale-y:400%;scale:var(--tw-scale-x)var(--tw-scale-y);resize:horizontal;opacity:0;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));top:50%;overflow:hidden}.sm\:diff-resizer,.sm\:diff-item-1,.sm\:diff-item-2{grid-row-start:1;grid-column-start:1;position:relative}.sm\:diff-item-1:after{pointer-events:none;inset-inline-end:1px;z-index:1;border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-base-100);background-color:color-mix(in oklab,var(--color-primary)40%,transparent);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);width:1.25rem;height:1.25rem;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);outline-style:var(--tw-outline-style);outline-offset:calc(2px*-1);outline-width:1px;outline-color:color-mix(in oklab,var(--color-base-content)5%,transparent);--tw-backdrop-blur:blur(8px);backdrop-filter:blur(8px);--tw-content:"";content:var(--tw-content);position:absolute;top:50%;bottom:0;translate:50% -50%;rotate:45deg}.sm\:diff-item-2{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:var(--color-base-100);overflow:hidden}.sm\:diff-item-1>*,.sm\:diff-item-2>*{pointer-events:none;inset-inline-start:0;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0}[dir=rtl] .diff-resizer{transform-origin:0 100%;clip-path:inset(calc(100% - .75rem) calc(100% - .75rem) 0 0);translate:-.29rem .37rem}[dir=rtl] .diff-item-1:after{left:1px;right:auto;translate:-50% -50%}[dir=rtl] .diff-item-1>*,[dir=rtl] .diff-item-2>*{left:auto;right:0}}@media (width>=768px){.md\:diff{grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.md\:diff-resizer{z-index:1;--tw-translate-x:.335rem;width:25rem;min-width:1rem;max-width:calc(100cqi - 1rem);height:.375rem;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:calc(.18rem*-1);translate:var(--tw-translate-x)var(--tw-translate-y);--tw-scale-y:400%;scale:var(--tw-scale-x)var(--tw-scale-y);resize:horizontal;opacity:0;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));top:50%;overflow:hidden}.md\:diff-resizer,.md\:diff-item-1,.md\:diff-item-2{grid-row-start:1;grid-column-start:1;position:relative}.md\:diff-item-1:after{pointer-events:none;inset-inline-end:1px;z-index:1;border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-base-100);background-color:color-mix(in oklab,var(--color-primary)40%,transparent);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);width:1.25rem;height:1.25rem;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);outline-style:var(--tw-outline-style);outline-offset:calc(2px*-1);outline-width:1px;outline-color:color-mix(in oklab,var(--color-base-content)5%,transparent);--tw-backdrop-blur:blur(8px);backdrop-filter:blur(8px);--tw-content:"";content:var(--tw-content);position:absolute;top:50%;bottom:0;translate:50% -50%;rotate:45deg}.md\:diff-item-2{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:var(--color-base-100);overflow:hidden}.md\:diff-item-1>*,.md\:diff-item-2>*{pointer-events:none;inset-inline-start:0;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0}[dir=rtl] .diff-resizer{transform-origin:0 100%;clip-path:inset(calc(100% - .75rem) calc(100% - .75rem) 0 0);translate:-.29rem .37rem}[dir=rtl] .diff-item-1:after{left:1px;right:auto;translate:-50% -50%}[dir=rtl] .diff-item-1>*,[dir=rtl] .diff-item-2>*{left:auto;right:0}}@media (width>=1024px){.lg\:diff{grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.lg\:diff-resizer{z-index:1;--tw-translate-x:.335rem;width:25rem;min-width:1rem;max-width:calc(100cqi - 1rem);height:.375rem;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:calc(.18rem*-1);translate:var(--tw-translate-x)var(--tw-translate-y);--tw-scale-y:400%;scale:var(--tw-scale-x)var(--tw-scale-y);resize:horizontal;opacity:0;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));top:50%;overflow:hidden}.lg\:diff-resizer,.lg\:diff-item-1,.lg\:diff-item-2{grid-row-start:1;grid-column-start:1;position:relative}.lg\:diff-item-1:after{pointer-events:none;inset-inline-end:1px;z-index:1;border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-base-100);background-color:color-mix(in oklab,var(--color-primary)40%,transparent);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);width:1.25rem;height:1.25rem;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);outline-style:var(--tw-outline-style);outline-offset:calc(2px*-1);outline-width:1px;outline-color:color-mix(in oklab,var(--color-base-content)5%,transparent);--tw-backdrop-blur:blur(8px);backdrop-filter:blur(8px);--tw-content:"";content:var(--tw-content);position:absolute;top:50%;bottom:0;translate:50% -50%;rotate:45deg}.lg\:diff-item-2{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:var(--color-base-100);overflow:hidden}.lg\:diff-item-1>*,.lg\:diff-item-2>*{pointer-events:none;inset-inline-start:0;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0}[dir=rtl] .diff-resizer{transform-origin:0 100%;clip-path:inset(calc(100% - .75rem) calc(100% - .75rem) 0 0);translate:-.29rem .37rem}[dir=rtl] .diff-item-1:after{left:1px;right:auto;translate:-50% -50%}[dir=rtl] .diff-item-1>*,[dir=rtl] .diff-item-2>*{left:auto;right:0}}@media (width>=1280px){.xl\:diff{grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.xl\:diff-resizer{z-index:1;--tw-translate-x:.335rem;width:25rem;min-width:1rem;max-width:calc(100cqi - 1rem);height:.375rem;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:calc(.18rem*-1);translate:var(--tw-translate-x)var(--tw-translate-y);--tw-scale-y:400%;scale:var(--tw-scale-x)var(--tw-scale-y);resize:horizontal;opacity:0;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));top:50%;overflow:hidden}.xl\:diff-resizer,.xl\:diff-item-1,.xl\:diff-item-2{grid-row-start:1;grid-column-start:1;position:relative}.xl\:diff-item-1:after{pointer-events:none;inset-inline-end:1px;z-index:1;border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-base-100);background-color:color-mix(in oklab,var(--color-primary)40%,transparent);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);width:1.25rem;height:1.25rem;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);outline-style:var(--tw-outline-style);outline-offset:calc(2px*-1);outline-width:1px;outline-color:color-mix(in oklab,var(--color-base-content)5%,transparent);--tw-backdrop-blur:blur(8px);backdrop-filter:blur(8px);--tw-content:"";content:var(--tw-content);position:absolute;top:50%;bottom:0;translate:50% -50%;rotate:45deg}.xl\:diff-item-2{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:var(--color-base-100);overflow:hidden}.xl\:diff-item-1>*,.xl\:diff-item-2>*{pointer-events:none;inset-inline-start:0;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0}[dir=rtl] .diff-resizer{transform-origin:0 100%;clip-path:inset(calc(100% - .75rem) calc(100% - .75rem) 0 0);translate:-.29rem .37rem}[dir=rtl] .diff-item-1:after{left:1px;right:auto;translate:-50% -50%}[dir=rtl] .diff-item-1>*,[dir=rtl] .diff-item-2>*{left:auto;right:0}}@media (width>=1536px){.\32 xl\:diff{grid-template-columns:auto 1fr;width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.\32 xl\:diff-resizer{z-index:1;--tw-translate-x:.335rem;width:25rem;min-width:1rem;max-width:calc(100cqi - 1rem);height:.375rem;translate:var(--tw-translate-x)var(--tw-translate-y);--tw-translate-y:calc(.18rem*-1);translate:var(--tw-translate-x)var(--tw-translate-y);--tw-scale-y:400%;scale:var(--tw-scale-x)var(--tw-scale-y);resize:horizontal;opacity:0;clip-path:inset(calc(100% - .75rem) 0 0 calc(100% - .75rem));top:50%;overflow:hidden}.\32 xl\:diff-resizer,.\32 xl\:diff-item-1,.\32 xl\:diff-item-2{grid-row-start:1;grid-column-start:1;position:relative}.\32 xl\:diff-item-1:after{pointer-events:none;inset-inline-end:1px;z-index:1;border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-base-100);background-color:color-mix(in oklab,var(--color-primary)40%,transparent);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);width:1.25rem;height:1.25rem;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);outline-style:var(--tw-outline-style);outline-offset:calc(2px*-1);outline-width:1px;outline-color:color-mix(in oklab,var(--color-base-content)5%,transparent);--tw-backdrop-blur:blur(8px);backdrop-filter:blur(8px);--tw-content:"";content:var(--tw-content);position:absolute;top:50%;bottom:0;translate:50% -50%;rotate:45deg}.\32 xl\:diff-item-2{border-inline-end-style:var(--tw-border-style);border-inline-end-width:2px;border-color:var(--color-base-100);overflow:hidden}.\32 xl\:diff-item-1>*,.\32 xl\:diff-item-2>*{pointer-events:none;inset-inline-start:0;object-fit:cover;object-position:center;width:100cqi;max-width:none;height:100%;position:absolute;top:0;bottom:0}[dir=rtl] .diff-resizer{transform-origin:0 100%;clip-path:inset(calc(100% - .75rem) calc(100% - .75rem) 0 0);translate:-.29rem .37rem}[dir=rtl] .diff-item-1:after{left:1px;right:auto;translate:-50% -50%}[dir=rtl] .diff-item-1>*,[dir=rtl] .diff-item-2>*{left:auto;right:0}}}