daisyui/components/chat.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.0.34 - MIT License */ @layer utilities{.chat{column-gap:.75rem;padding-block:.25rem;display:grid}.chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:13px}}.chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.chat-image{grid-row:span 2/span 2;align-self:flex-end}.chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}}.chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}@media (width>=640px){.sm\:chat{column-gap:.75rem;padding-block:.25rem;display:grid}.sm\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:13px}}.sm\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.sm\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.sm\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.sm\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.sm\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.sm\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.sm\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.sm\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.sm\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.sm\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.sm\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.sm\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}}.sm\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=768px){.md\:chat{column-gap:.75rem;padding-block:.25rem;display:grid}.md\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:13px}}.md\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.md\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.md\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.md\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.md\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.md\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.md\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.md\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.md\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.md\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.md\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.md\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}}.md\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=1024px){.lg\:chat{column-gap:.75rem;padding-block:.25rem;display:grid}.lg\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:13px}}.lg\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.lg\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.lg\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.lg\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.lg\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.lg\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.lg\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.lg\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.lg\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.lg\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.lg\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.lg\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}}.lg\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=1280px){.xl\:chat{column-gap:.75rem;padding-block:.25rem;display:grid}.xl\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:13px}}.xl\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.xl\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.xl\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.xl\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.xl\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.xl\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.xl\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.xl\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.xl\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.xl\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.xl\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.xl\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}}.xl\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}@media (width>=1536px){.\32 xl\:chat{column-gap:.75rem;padding-block:.25rem;display:grid}.\32 xl\:chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:.75rem;height:.75rem;mask-repeat:no-repeat;mask-image:var(--mask-chat);position:absolute;bottom:0;mask-position:0 -1px;mask-size:13px}}.\32 xl\:chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}.\32 xl\:chat-bubble-secondary{background-color:var(--color-secondary);color:var(--color-secondary-content)}.\32 xl\:chat-bubble-accent{background-color:var(--color-accent);color:var(--color-accent-content)}.\32 xl\:chat-bubble-neutral{background-color:var(--color-neutral);color:var(--color-neutral-content)}.\32 xl\:chat-bubble-info{background-color:var(--color-info);color:var(--color-info-content)}.\32 xl\:chat-bubble-success{background-color:var(--color-success);color:var(--color-success-content)}.\32 xl\:chat-bubble-warning{background-color:var(--color-warning);color:var(--color-warning-content)}.\32 xl\:chat-bubble-error{background-color:var(--color-error);color:var(--color-error-content)}.\32 xl\:chat-image{grid-row:span 2/span 2;align-self:flex-end}.\32 xl\:chat-header{grid-row-start:1;gap:.25rem;font-size:.6875rem;display:flex}.\32 xl\:chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.\32 xl\:chat-start{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-image{grid-column-start:1}& .chat-bubble{border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] &:before{transform:rotateY(180deg)}}}.\32 xl\:chat-end{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-image{grid-column-start:2}& .chat-bubble{border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] &:before{transform:rotateY(0)}}}}}