flyonui/components/chat.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.chat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding-block:.25rem;display:grid;& .chat-avatar{grid-row:span 2/span 2;align-self:flex-end}& .chat-header{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:1;margin-bottom:.25rem}& .chat-footer{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:3;margin-top:.25rem}& .chat-bubble{border-radius:var(--radius-box);width:fit-content;min-width:2.75rem;max-width:90%;min-height:2.75rem;padding:.75rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:1rem;height:1rem;position:absolute;bottom:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}&.chat-receiver{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-avatar{grid-column-start:1}& .chat-bubble{background-color:var(--color-base-100);color:var(--color-base-content);border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}&.chat-sender{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-avatar{grid-column-start:2}& .chat-bubble{background-color:var(--color-primary);text-align:end;color:var(--color-primary-content);border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}@media (width>=640px){.sm\:chat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding-block:.25rem;display:grid;& .chat-avatar{grid-row:span 2/span 2;align-self:flex-end}& .chat-header{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:1;margin-bottom:.25rem}& .chat-footer{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:3;margin-top:.25rem}& .chat-bubble{border-radius:var(--radius-box);width:fit-content;min-width:2.75rem;max-width:90%;min-height:2.75rem;padding:.75rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:1rem;height:1rem;position:absolute;bottom:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}&.chat-receiver{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-avatar{grid-column-start:1}& .chat-bubble{background-color:var(--color-base-100);color:var(--color-base-content);border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}&.chat-sender{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-avatar{grid-column-start:2}& .chat-bubble{background-color:var(--color-primary);text-align:end;color:var(--color-primary-content);border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=768px){.md\:chat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding-block:.25rem;display:grid;& .chat-avatar{grid-row:span 2/span 2;align-self:flex-end}& .chat-header{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:1;margin-bottom:.25rem}& .chat-footer{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:3;margin-top:.25rem}& .chat-bubble{border-radius:var(--radius-box);width:fit-content;min-width:2.75rem;max-width:90%;min-height:2.75rem;padding:.75rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:1rem;height:1rem;position:absolute;bottom:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}&.chat-receiver{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-avatar{grid-column-start:1}& .chat-bubble{background-color:var(--color-base-100);color:var(--color-base-content);border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}&.chat-sender{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-avatar{grid-column-start:2}& .chat-bubble{background-color:var(--color-primary);text-align:end;color:var(--color-primary-content);border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=1024px){.lg\:chat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding-block:.25rem;display:grid;& .chat-avatar{grid-row:span 2/span 2;align-self:flex-end}& .chat-header{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:1;margin-bottom:.25rem}& .chat-footer{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:3;margin-top:.25rem}& .chat-bubble{border-radius:var(--radius-box);width:fit-content;min-width:2.75rem;max-width:90%;min-height:2.75rem;padding:.75rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:1rem;height:1rem;position:absolute;bottom:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}&.chat-receiver{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-avatar{grid-column-start:1}& .chat-bubble{background-color:var(--color-base-100);color:var(--color-base-content);border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}&.chat-sender{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-avatar{grid-column-start:2}& .chat-bubble{background-color:var(--color-primary);text-align:end;color:var(--color-primary-content);border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=1280px){.xl\:chat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding-block:.25rem;display:grid;& .chat-avatar{grid-row:span 2/span 2;align-self:flex-end}& .chat-header{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:1;margin-bottom:.25rem}& .chat-footer{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:3;margin-top:.25rem}& .chat-bubble{border-radius:var(--radius-box);width:fit-content;min-width:2.75rem;max-width:90%;min-height:2.75rem;padding:.75rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:1rem;height:1rem;position:absolute;bottom:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}&.chat-receiver{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-avatar{grid-column-start:1}& .chat-bubble{background-color:var(--color-base-100);color:var(--color-base-content);border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}&.chat-sender{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-avatar{grid-column-start:2}& .chat-bubble{background-color:var(--color-primary);text-align:end;color:var(--color-primary-content);border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}@media (width>=1536px){.\32 xl\:chat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;padding-block:.25rem;display:grid;& .chat-avatar{grid-row:span 2/span 2;align-self:flex-end}& .chat-header{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:1;margin-bottom:.25rem}& .chat-footer{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));grid-row-start:3;margin-top:.25rem}& .chat-bubble{border-radius:var(--radius-box);width:fit-content;min-width:2.75rem;max-width:90%;min-height:2.75rem;padding:.75rem;display:block;position:relative;&:before{background-color:inherit;content:"";width:1rem;height:1rem;position:absolute;bottom:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}&.chat-receiver{grid-template-columns:auto 1fr;place-items:start;& .chat-header,& .chat-footer{grid-column-start:2}& .chat-avatar{grid-column-start:1}& .chat-bubble{background-color:var(--color-base-100);color:var(--color-base-content);border-end-start-radius:0;grid-column-start:2;&:before{inset-inline-start:-.749rem;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}}}&.chat-sender{grid-template-columns:1fr auto;place-items:end;& .chat-header,& .chat-footer{grid-column-start:1}& .chat-avatar{grid-column-start:2}& .chat-bubble{background-color:var(--color-primary);text-align:end;color:var(--color-primary-content);border-end-end-radius:0;grid-column-start:1;&:before{inset-inline-start:99.9%;mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e")}[dir=rtl] &:before{mask-image:url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e")}}}}}}