daisyui/components/avatar.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.avatar-group{display:flex;overflow:hidden}.avatar-group .avatar{border:4px solid var(--color-base-100);border-radius:3.40282e38px;overflow:hidden}.avatar{vertical-align:middle;align-self:center;display:inline-flex;position:relative}.avatar>div{aspect-ratio:1;display:block;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}}@layer daisyui.l1.l2{.avatar-placeholder>div{justify-content:center;align-items:center;display:flex}.avatar-online:before{content:"";z-index:1;background-color:var(--color-success);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}.avatar-offline:before{content:"";z-index:1;background-color:var(--color-base-300);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:avatar-group{display:flex;overflow:hidden}.sm\:avatar-group .avatar{border:4px solid var(--color-base-100);border-radius:3.40282e38px;overflow:hidden}.sm\:avatar{vertical-align:middle;align-self:center;display:inline-flex;position:relative}.sm\:avatar>div{aspect-ratio:1;display:block;overflow:hidden}.sm\:avatar img{object-fit:cover;width:100%;height:100%}}@layer daisyui.l1.l2{.sm\:avatar-placeholder>div{justify-content:center;align-items:center;display:flex}.sm\:avatar-online:before{content:"";z-index:1;background-color:var(--color-success);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}.sm\:avatar-offline:before{content:"";z-index:1;background-color:var(--color-base-300);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:avatar-group{display:flex;overflow:hidden}.md\:avatar-group .avatar{border:4px solid var(--color-base-100);border-radius:3.40282e38px;overflow:hidden}.md\:avatar{vertical-align:middle;align-self:center;display:inline-flex;position:relative}.md\:avatar>div{aspect-ratio:1;display:block;overflow:hidden}.md\:avatar img{object-fit:cover;width:100%;height:100%}}@layer daisyui.l1.l2{.md\:avatar-placeholder>div{justify-content:center;align-items:center;display:flex}.md\:avatar-online:before{content:"";z-index:1;background-color:var(--color-success);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}.md\:avatar-offline:before{content:"";z-index:1;background-color:var(--color-base-300);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:avatar-group{display:flex;overflow:hidden}.lg\:avatar-group .avatar{border:4px solid var(--color-base-100);border-radius:3.40282e38px;overflow:hidden}.lg\:avatar{vertical-align:middle;align-self:center;display:inline-flex;position:relative}.lg\:avatar>div{aspect-ratio:1;display:block;overflow:hidden}.lg\:avatar img{object-fit:cover;width:100%;height:100%}}@layer daisyui.l1.l2{.lg\:avatar-placeholder>div{justify-content:center;align-items:center;display:flex}.lg\:avatar-online:before{content:"";z-index:1;background-color:var(--color-success);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}.lg\:avatar-offline:before{content:"";z-index:1;background-color:var(--color-base-300);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:avatar-group{display:flex;overflow:hidden}.xl\:avatar-group .avatar{border:4px solid var(--color-base-100);border-radius:3.40282e38px;overflow:hidden}.xl\:avatar{vertical-align:middle;align-self:center;display:inline-flex;position:relative}.xl\:avatar>div{aspect-ratio:1;display:block;overflow:hidden}.xl\:avatar img{object-fit:cover;width:100%;height:100%}}@layer daisyui.l1.l2{.xl\:avatar-placeholder>div{justify-content:center;align-items:center;display:flex}.xl\:avatar-online:before{content:"";z-index:1;background-color:var(--color-success);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}.xl\:avatar-offline:before{content:"";z-index:1;background-color:var(--color-base-300);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:avatar-group{display:flex;overflow:hidden}.\32 xl\:avatar-group .avatar{border:4px solid var(--color-base-100);border-radius:3.40282e38px;overflow:hidden}.\32 xl\:avatar{vertical-align:middle;align-self:center;display:inline-flex;position:relative}.\32 xl\:avatar>div{aspect-ratio:1;display:block;overflow:hidden}.\32 xl\:avatar img{object-fit:cover;width:100%;height:100%}}@layer daisyui.l1.l2{.\32 xl\:avatar-placeholder>div{justify-content:center;align-items:center;display:flex}.\32 xl\:avatar-online:before{content:"";z-index:1;background-color:var(--color-success);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}.\32 xl\:avatar-offline:before{content:"";z-index:1;background-color:var(--color-base-300);outline:2px solid var(--color-base-100);border-radius:3.40282e38px;width:15%;height:15%;display:block;position:absolute;top:7%;right:7%}}}}