@import "/imports/ui/stylesheets/mixins/focus"; @import "/imports/ui/stylesheets/variables/_all"; .panel { background-color: var(--color-white); padding: var(--md-padding-x) var(--md-padding-y) var(--md-padding-x) var(--md-padding-x); display: flex; flex-grow: 1; flex-direction: column; justify-content: flex-start; overflow: hidden; height: 100%; :global(.browser-chrome) & { transform: translateZ(0); } @include mq($small-only) { transform: none !important; } } .header { position: relative; top: var(--poll-header-offset); display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .title { @extend %text-elipsis; flex: 1; & > button, button:hover { max-width: var(--toast-content-width); } } .hideBtn { position: relative; background-color: var(--color-white); display: block; margin: var(--border-size-large); margin-bottom: var(--border-size); padding-left: 0; padding-right: inherit; [dir="rtl"] & { padding-left: inherit; padding-right: 0; } > i { color: var(--color-gray-dark); font-size: smaller; [dir="rtl"] & { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); } } &:hover { background-color: var(--color-white); } } .customBtn { width: 100%; padding: .75rem; margin: .3rem 0; font-weight: 400; font-size: var(--font-size-base); } .mainTitle { color: var(--color-gray); } .userAvatar { min-width: 2.25rem; margin: .5rem; } .listItem { display: flex; flex-flow: row; flex-direction: row; align-items: center; border-radius: 5px; cursor: pointer; :global(.animationsEnabled) & { transition: all .3s; } &:first-child { margin-top: 0; } &:focus { background-color: var(--list-item-bg-hover); box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border); outline: none; } &:hover { background-color: var(--list-item-bg-hover); } flex-shrink: 0; } .buttonContainer { display: flex; justify-self: flex-end; align-items: center; color: var(--color-primary); & > button { padding: 0 .25rem 0 .25rem; } } .userContentContainer { display: flex; flex: 1; overflow: hidden; align-items: center; flex-direction: row; } .button { font-weight: 400; &:focus { background-color: var(--list-item-bg-hover) !important; box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border) ; outline: none; } &:hover { background-color: var(--list-item-bg-hover) !important; } } .pendingUsers { display: flex; height: 100%; width: 100%; flex-direction: column; } .noPendingUsers { text-align: center; font-weight: bold; } .usersWrapper { display: flex; height: 100%; width: 100%; flex-direction: column; position: relative; } .users { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; bottom: 0; height: 100%; width: 100%; } .userName { min-width: 0; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobbyMessage { border-bottom: 1px solid var(--color-gray-lightest); p { background-color: var(--color-off-white); box-sizing: border-box; color: var(--color-gray); padding: 1rem; text-align: center; } } .rememberContainer { margin: 1rem 1rem; height: 2rem; display: flex; align-items: center; & > label { height: fit-content; padding: 0; margin: 0; margin-left: .7rem; [dir="rtl"] & { margin: 0; margin-right: .7rem; } } }