zc_saas_h5/pages3/static/polyv-sdk/components/trtc-room/trtc-room.wxss

@charset "UTF-8";
/* 1v1 视频电话模式 */
.template-1v1 {
  width: 100vw;
  height: 100%;
  position: relative;
  background-image: linear-gradient(180deg, #000000 22%, #354C57 96%);
  filter: blur(40);
}

.template-1v1.vertical {
  height: 100vh;
}

.template-1v1 .view-container {
  width: 50vw;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
}

.template-1v1.vertical .view-container {
  padding-bottom: 88%;
  height: 0;
  top: 17%;
}

.template-1v1 .pusher-container {
  position: absolute;
  right: 0;
}

.template-1v1 .pusher-container.fullscreen {
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
}

.template-1v1 .loading {
  position: absolute;
  top: 40vh;
  left: 50vw;
  transform: translate(-50%, 0);
  width: 300rpx;
  height: 250rpx;
  border-radius: 12rpx;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.template-1v1 .loading-img {
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotate 2s linear infinite;
}

.template-1v1 .rotate-img {
  width: 160rpx;
  height: 160rpx;
}

.template-1v1 .loading-text {
  width: 100%;
  padding-top: 40rpx;
  text-align: center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* .template-1v1 .player-container:nth-child(1){
  width: 100vw;
  height: 100vh;
} */
.template-1v1 .handle-btns {
  position: absolute;
  z-index: 3;
  bottom: 15vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.template-1v1 .bottom-btns {
  position: absolute;
  z-index: 3;
  bottom: 3vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* .template-1v1 image {
  width: 4vh;
  height: 4vh;
} */
.template-1v1 .btn-normal {
  width: 8vh;
  height: 8vh;
  box-sizing: border-box;
  display: flex;
  background: white;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.template-1v1 .btn-hangup .btn-image,
.template-1v1 .btn-normal .btn-image {
  width: 4vh;
  height: 4vh;
}

.template-1v1 .btn-hangup {
  width: 8vh;
  height: 8vh;
  background: #f75c45;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

/* 9人 会议模版 */
.template-grid {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
}

.column-layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.column-layout .column-1 {
  flex: 1;
}

.column-layout .column-2 {
  position: relative;
  height: 100rpx;
  background-color: #242424;
}

.fullscreen-device-fix .column-layout .column-2 {
  height: 120rpx;
}

.menu {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.menu .menu-item {
  text-align: center;
  height: 100rpx;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu .menu-item .image {
  width: 46rpx;
  height: 46rpx;
}

.more-menu {
  position: absolute;
  top: 0;
}

.more-menu .scroll-container {
  width: 100%;
  height: 100rpx;
  white-space: nowrap;
}

.more-menu .menu-item-container {
  width: 20%;
  display: inline-block;
}

.template-grid .grid-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.template-grid .grid-scroll-container {
  width: 100%;
  height: 100%;
  /* box-sizing: border-box; */
  /* overflow-y: scroll; */
  background-color: #000;
}

.grid-containe.overflow {
  height: auto;
}

.template-grid .view-container {
  position: relative;
}

.stream-0 .view-container {
  width: 100%;
  height: 100%;
}

.stream-1 .view-container {
  width: 100%;
  height: 50%;
}

.stream-2 .view-container {
  width: 50%;
  height: 50%;
}

.stream-2 .view-container:nth-child(1) {
  width: 100%;
  height: 50%;
}

.stream-3 .view-container {
  width: 50%;
  height: 50%;
}

.stream-4 .view-container {
  width: 50%;
  height: 33.3%;
}

.stream-4 .view-container:nth-child(1) {
  width: 100%;
  height: 33.3%;
}

.stream-5 .view-container {
  width: 50%;
  height: 33.3%;
}

.stream-6 .view-container {
  width: 33.3%;
  height: 33.3%;
}

.stream-6 .view-container:nth-child(1) {
  width: 100%;
  height: 33.3%;
}

.stream-7 .view-container {
  width: 33.3%;
  height: 33.3%;
}

.stream-7 .view-container:nth-child(1) {
  width: 50%;
  height: 33.3%;
}

.stream-7 .view-container:nth-child(2) {
  width: 50%;
  height: 33.3%;
}

.stream-8 .view-container {
  width: 33.3%;
  height: 33.3%;
}

.stream-even .view-container {
  width: 50%;
  height: 50%;
}

.stream-odd .view-container {
  width: 50%;
  height: 50%;
}

.stream-odd .view-container:last-child {
  width: 100%;
  height: 50%;
}

.template-grid .operation-bar {
  position: absolute;
  bottom: 6rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.operation-bar .operation-item-container {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10rpx;
}

.template-grid .operation-bar .operation-item {
  width: 64rpx;
  height: 64rpx;
  /* flex-grow: 1; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.operation-item .item-image {
  width: 36rpx;
  height: 36rpx;
}

.template-grid .volume-progress {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.template-grid .btn-normal {
  width: 64rpx;
  height: 64rpx;
  margin: 0 6rpx;
  box-sizing: border-box;
  display: flex;
  background: white;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.template-grid .btn-normal .btn-image {
  width: 36rpx;
  height: 36rpx;
}

.template-grid .btn-hangup {
  background: #f75c45;
}

.template-grid .panel {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  width: 90vw;
  height: auto;
  z-index: 999;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-radius: 10rpx;
  box-sizing: border-box;
  font-size: 14px;
}

.panel .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
}

.panel .panel-header {
  text-align: center;
  padding-bottom: 20rpx;
}

.panel .panel-tips {
  color: #999;
  text-align: center;
}

.panel .panel-body {
  flex: 1;
  max-height: 50vh;
}

.panel .panel-body .scroll-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.memberlist-panel .panel-body {
  height: 50vh;
}

.memberlist-panel .member-item {
  display: flex;
  /* border-bottom: 1px solid #999; */
  margin: 16rpx 16rpx 16rpx 32rpx;
}

.memberlist-panel .member-id {
  width: 30%;
  font-size: 12px;
  line-height: 64rpx;
}

.memberlist-panel .member-btns {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

.memberlist-panel .member-btns .btn-normal {
  margin-left: 0;
}

.memberlist-panel .member-btns .btn {
  margin-right: 0;
}

.setting-panel .panel-body {
  height: 50vh;
}

.setting-panel .setting-option {
  display: flex;
  justify-content: space-between;
  margin: 16rpx 16rpx 16rpx 32rpx;
  /* box-sizing: border-box;
  padding: 12rpx 16rpx 12rpx 32rpx; */
}

.setting-panel .setting-option .label {
  /* line-height: 64rpx; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.setting-panel .setting-switch {
  transform: scale(0.8);
  margin-right: -12rpx;
}

.bgm-panel .panel-body {
  height: auto;
}

.bgm-panel .setting-option {
  height: 60rpx;
  display: flex;
  flex-direction: row;
  margin: 16rpx 16rpx 16rpx 32rpx;
}

.bgm-panel .setting-option .label {
  width: 140rpx;
  line-height: 60rpx;
}

.bgm-panel .setting-option .slider-content {
  flex: 1;
  line-height: 60rpx;
}

.bgm-panel .setting-option .slider-content slider {
  transform: scale(0.9);
  margin: 0;
}

.bgm-panel .setting-option .slider-content progress {
  transform: scale(0.9);
  margin-top: 28rpx;
}

.bgm-panel .menu {
  padding: 16rpx 32rpx 16rpx 32rpx;
  box-sizing: border-box;
}

.bgm-panel .menu .menu-item {
  height: 80rpx;
  background-color: #333;
}

.template-grid .masker {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}

.template-grid .no-stream,
.template-grid .no-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
}

.template-grid .audio-volume,
.template-grid .no-audio {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  width: 36rpx;
  height: 36rpx;
}

.no-stream .image,
.no-video .image {
  width: 60rpx;
  height: 60rpx;
}

.audio-volume .image,
.no-audio .image {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  /*android 的bug ，image absolute后会向上漂移几个像素，如果要对其必须都设置absolute*/
}

.audio-active {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.audio-active .image {
  bottom: 0;
}

.slide-up-tips {
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 200rpx;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 10rpx;
  opacity: 0;
}

.slide-up-tips .image {
  width: 100rpx;
  height: 100rpx;
}

.player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.player-placeholder .image {
  width: 100rpx;
  height: 100rpx;
}

.pages-container {
  width: auto;
  left: 50%;
  transform: translate(-50%, 0);
  height: 20rpx;
  position: absolute;
  bottom: 12%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pages-container .page-item {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin: 0 8rpx;
  background-color: rgba(99, 99, 99, 0.5);
}

.pages-container .page-item.current {
  background-color: #fff;
}

.radio-group-no-box {
  display: inline-block;
  color: #006eff;
  background-color: #ffffff;
  border: 1px solid #006eff;
  border-radius: 4px;
  margin-left: 180rpx;
  font-size: 12px;
}

.radio-group-no-box .radio-item {
  padding: 5px 8px;
  text-align: center;
  border-right: 1px solid #006eff;
  display: inline-block;
}

.radio-group-no-box .radio-item:last-child {
  border-right: none;
}

.radio-group-no-box .radio-item.selected {
  color: #ffffff;
  background-color: #006eff;
}

.radio-group-no-box radio {
  display: none;
}

.picker-label {
  display: inline-block;
  color: #006eff;
  background-color: #ffffff;
  border: 1px solid #006eff;
  border-radius: 4px;
  padding: 5px 8px;
  text-align: center;
  font-size: 12px;
}

/* 通过方法自定义模式 */
.template-custom {
  /* 绝对定位模式 pusher 和 player 都用绝对定位*/
  width: 100vw;
  height: 100vh;
  position: relative;
}

.template-custom .pusher-container,
.template-custom .player-container {
  position: absolute;
}

.plv-rtc-nameplate {
  position: absolute;
  bottom: 50px;
  left: 13%;
  transform: translateX(-13%);
}

.plv-rtc-nameplate.audio {
  top: 0;
  width: 100%;
  height: 100%;
}

.plv-rtc-nameplate__bg__img {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.25) 100%);
  filter: blur(10px);
}

.plv-rtc-nameplate__content {
  position: absolute;
  box-sizing: content-box;
  display: flex;
  justify-items: center;
  align-items: center;
  border-radius: 21px;
}

.plv-rtc-nameplate__content.audio {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  flex-direction: column;
}

.plv-rtc-nameplate__content.video {
  padding: 0 6px 0 2px;
  width: 148px;
  height: 32px;
  background: rgba(0, 0, 0, 0.3);
}

.plv-rtc-nameplate__content__status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plv-rtc-nameplate__content__nickname {
  width: 96px;
  height: 22px;
  font-size: 16px;
  color: #FFFFFF;
  margin: 0 4px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plv-rtc-nameplate__content__avatar {
  width: 28px;
  height: 28px;
  border-radius: 100%;
}

.plv-rtc-nameplate__content__avatar.audio {
  background-color: #FFFFFF;
  width: 80px;
  height: 80px;
  padding: 2px;
  background-color: #fff;
}

.plv-rtc-nameplate__content__avatar.audio image {
  margin-bottom: 6px;
  width: 80px;
  height: 80px;
}

.plv-rtc-nameplate__content__avatar.video image {
  width: 100%;
  height: 100%;
}

.plv-rtc-nameplate__content__mic {
  width: 12px;
  height: 16px;
}

.plv-rtc-nameplate__content__avatar__image {
  border-radius: 100%;
}

.pusher {
  width: 100%;
  height: 100%;
  position: absolute;
}

.player {
  width: 100%;
  height: 100%;
  position: absolute;
}

.debug-info {
  max-width: 100vw;
  max-height: 90vh;
  box-sizing: border-box;
  overflow-y: scroll;
  position: absolute;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  bottom: 20rpx;
  left: 0;
  padding: 10rpx;
  font-size: 12px;
}

.debug-info-btn .debug-btn,
.debug-info .debug-btn {
  padding: 0 8px;
  min-height: 18px;
  width: auto;
  font-size: 12px;
  line-height: 18px;
  display: inline-block;
  color: #06ae56;
  background-color: #f2f2f2;
}

.debug-info .debug-btn.false {
  color: #727272;
}

.debug-info-btn .debug-btn,
.debug-info .button-hover {
  background-color: #dbdbdb;
}

.debug-info .close-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
}

.debug-info .text.true {
  color: #1fff8b;
}

.debug-info .text.false {
  color: #ff2e2e;
}

.debug-info-btn {
  position: absolute;
  z-index: 9998;
  bottom: 160rpx;
  left: 0;
}

.trtc-room-container {
  height: 100%;
  width: 100%;
}

.trtc-room-container .btn {
  display: inline-block;
  width: auto;
  height: 60rpx;
  min-height: 60rpx;
  line-height: 60rpx;
  font-size: 12px;
  font-weight: normal;
  padding: 0 10rpx;
  color: #006eff;
  background-color: #f2f2f2;
  margin: 0 16rpx;
}

.trtc-room-container .btn.active {
  color: #f2f2f2;
  background-color: #006eff;
}

.trtc-room-container .btn-hover {
  background-color: #d1d1d1;
}

.im-panel {
  position: absolute;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90vw;
  height: 320rpx;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  padding: 20rpx 0;
  border-radius: 10rpx;
  font-size: 12px;
  /* bottom: 25vh; */
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
}

.im-panel .close-btn {
  position: absolute;
  top: 0;
  right: -3px;
  padding: 5px 10px;
  z-index: 99;
}

.message-panel-body {
  width: 100%;
  height: 80%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.message-scroll-container {
  height: 100%;
  /* box-sizing: border-box;
  padding: 0 20rpx; */
}

.message-list {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  /* display: flex;
  flex-direction: column; */
}

.message-item {
  width: 100%;
  /* height: 36rpx; */
  /* padding: 0 20rpx; */
  padding-bottom: 10rpx;
  display: flex;
  flex-direction: row;
}

.message-item .user-name {
  width: 20%;
  color: #2483ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-name.mine {
  color: #ff7424;
}

.message-item .separate {
  padding: 0 5px;
  color: #fff;
}

.message-item .message-content {
  word-wrap: break-word;
  word-break: break-all;
  padding-left: 20rpx;
  position: relative;
  max-width: 80%;
  box-sizing: border-box;
}

.message-content::after {
  content: ':';
  position: absolute;
  left: 0;
  top: 0;
}

.message-panel-bottom {
  width: 100%;
  height: 50rpx;
  box-sizing: border-box;
  padding: 0 20rpx 0;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
}

.message-input-container {
  flex-grow: 1;
}

.message-input-container .message-input {
  font-size: 12px;
  padding-left: 20rpx;
  border-radius: 10rpx;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

.message-send-btn .btn {
  margin-right: 0;
  height: 50rpx;
  min-height: 50rpx;
  line-height: 50rpx;
}

.volume-animation {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  left: 0;
  top: initial;
  bottom: 20rpx;
  z-index: 9;
  /* transform: translate(-50%, 0); */
}

.volume-animation .image {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
}

.volume-animation .audio-active {
  animation: viewlinear 1.5s linear infinite;
}

@keyframes viewlinear {
  /** 第一种写法**/
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.none,
.view-container.none,
.template-grid .view-container.none,
.template-1v1 .view-container.none {
  display: none !important;
}