import styled, { css, keyframes } from 'styled-components'; import { userIndicatorsOffset, mdPaddingY, indicatorPadding, } from '/imports/ui/stylesheets/styled-components/general'; import { colorPrimary, colorWhite, userListBg, colorSuccess, colorDanger, colorOffWhite, } from '/imports/ui/stylesheets/styled-components/palette'; const Content = styled.div` color: ${colorWhite}; top: 50%; position: absolute; text-align: center; left: 0; right: 0; font-size: 110%; text-transform: capitalize; &, & > * { line-height: 0; // to keep centralized vertically } `; const Image = styled.div` display: flex; height: 2rem; width: 2rem; `; const Img = styled.img` object-fit: cover; overflow: hidden; ${({ moderator }) => moderator && ` border-radius: 3px; `} ${({ moderator }) => !moderator && ` border-radius: 50%; `} `; const pulse = keyframes` 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } `; const Talking = styled.div` position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: currentColor; border-radius: inherit; ${({ talking, animations }) => talking && animations && css` animation: ${pulse} 1s infinite ease-in; `} &::before { ${({ talking, animations }) => talking && !animations && ` content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: currentColor; border-radius: inherit; box-shadow: 0 0 0 4px currentColor; opacity: .5; `} } `; const Avatar = styled.div` position: relative; height: 2.25rem; min-width: 2.25rem; border-radius: 50%; text-align: center; font-size: .85rem; border: 2px solid transparent; ${({ animations }) => animations && ` transition: .3s ease-in-out; `} &:after, &:before { content: ""; position: absolute; width: 0; height: 0; padding-top: .5rem; padding-right: 0; padding-left: 0; padding-bottom: 0; color: inherit; top: auto; left: auto; bottom: ${userIndicatorsOffset}; right: ${userIndicatorsOffset}; border: 1.5px solid ${userListBg}; border-radius: 50%; background-color: ${colorSuccess}; color: ${colorWhite}; opacity: 0; font-family: 'bbb-icons'; font-size: .65rem; line-height: 0; text-align: center; vertical-align: middle; letter-spacing: -.65rem; z-index: 1; [dir="rtl"] & { left: ${userIndicatorsOffset}; right: auto; padding-right: .65rem; padding-left: 0; } ${({ animations }) => animations && ` transition: .3s ease-in-out; `} } ${({ moderator }) => moderator && ` border-radius: 5px; `} ${({ presenter }) => presenter && ` &:before { content: "\\00a0\\e90b\\00a0"; padding: ${mdPaddingY}; opacity: 1; top: ${userIndicatorsOffset}; left: ${userIndicatorsOffset}; bottom: auto; right: auto; border-radius: 5px; background-color: ${colorPrimary}; [dir="rtl"] & { left: auto; right: ${userIndicatorsOffset}; letter-spacing: -.33rem; } } `} ${({ presenter, isChrome, isFirefox, isEdge, }) => presenter && (isChrome || isFirefox || isEdge) && ` &:before { padding: ${indicatorPadding}; } `} ${({ whiteboardAccess }) => whiteboardAccess && ` &:before { content: "\\00a0\\e925\\00a0"; padding: ${mdPaddingY}; border-radius: 50% !important; opacity: 1; top: ${userIndicatorsOffset}; left: ${userIndicatorsOffset}; bottom: auto; right: auto; border-radius: 5px; background-color: ${colorPrimary}; [dir="rtl"] & { left: auto; right: ${userIndicatorsOffset}; letter-spacing: -.33rem; } } `} ${({ whiteboardAccess, isChrome, isFirefox, isEdge, }) => whiteboardAccess && (isChrome || isFirefox || isEdge) && ` &:before { padding: ${indicatorPadding}; } `} ${({ muted }) => muted && ` &:after { content: "\\00a0\\e932\\00a0"; background-color: ${colorDanger}; opacity: 1; width: 1.2rem; height: 1.2rem; } `} ${({ listenOnly }) => listenOnly && ` &:after { content: "\\00a0\\e90c\\00a0"; opacity: 1; width: 1.2rem; height: 1.2rem; } `} ${({ voice }) => voice && ` &:after { content: "\\00a0\\e931\\00a0"; background-color: ${colorSuccess}; top: 1.375rem; left: 1.375rem; right: auto; [dir="rtl"] & { left: auto; right: 1.375rem; } opacity: 1; width: 1.2rem; height: 1.2rem; } `} ${({ noVoice }) => noVoice && ` &:after { content: ""; background-color: ${colorOffWhite}; top: 1.375rem; left: 1.375rem; right: auto; [dir="rtl"] & { left: auto; right: 1.375rem; } opacity: 1; width: 1.2rem; height: 1.2rem; } `} `; export default { Content, Image, Img, Talking, Avatar, };