fcr-ui-scene 3.8.1-alpha → 3.8.1

package/lib/modules/state-bar/index.css

@@ -1,706 +1,706 @@
-.fcr-state-bar {
-  width: 100%;
-  height: 34px;
-  padding: 0 15px;
-  background: var(--fcr_web_ui_scene_fill2);
-  backdrop-filter: blur(25px);
-  display: flex;
-  justify-content: space-between;
-  column-gap: 24px;
-}
-
-/* left state-bar */
-.fcr-state-bar__left-nav {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-}
-
-.fcr-state-bar__logo {
-  --logo_height: 28px;
-  height: var(--logo_height);
-  width: auto;
-  min-width: var(--logo_height);
-  max-width: calc(var(--logo_height) * 3.5);
-}
-
-.fcr-state-bar__meeting-lock {
-  border-radius: var(--fcr_cornerradius_xxs);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  height: 28px;
-  padding: 0 6px 0 4px;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--fcr_web_ui_scene_mainicon1);
-  background: var(--fcr_web_ui_scene_fill2);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-}
-
-.fcr-state-bar__meeting-lock:hover {
-  background: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-state-bar__meeting-lock-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon1);
-}
-
-.fcr-state-bar__meeting-info {
-  border-radius: var(--fcr_cornerradius_xxs);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  height: 28px;
-  overflow: hidden;
-  background: var(--fcr_web_ui_scene_fill2);
-  display: flex;
-  align-items: center;
-}
-
-.fcr-state-bar__info-network {
-  height: 100%;
-  padding: 4px;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.fcr-state-bar__info-network:hover,
-.fcr-state-bar__info-network.active {
-  background: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-state-bar__step-divider {
-}
-
-.fcr-state-bar__info-detail {
-  margin-left: 6px;
-  height: 100%;
-  padding: 0 4px 0 3px;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--fcr_web_ui_scene_mainicon1);
-  background: var(--fcr_web_ui_scene_fill2);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-}
-.fcr-state-bar__inwaitingroom-disable-action {
-  pointer-events: none;
-}
-
-.fcr-state-bar__info-detail:hover,
-.fcr-state-bar__info-detail.active {
-  background: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-state-bar__info-detail-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon1);
-}
-
-.fcr-state-bar__info-meeting-id {
-  height: 100%;
-  padding: 0 6px 0 4px;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--fcr_web_ui_scene_mainicon1);
-  background: var(--fcr_web_ui_scene_fill2);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-}
-
-.fcr-state-bar__info-meeting-id:hover {
-  background: var(--fcr_web_ui_scene_hover);
-}
-
-/* right state-bar */
-.fcr-state-bar__right-nav {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-}
-
-.fcr-state-bar__record {
-  height: 28px;
-  border-radius: 4px;
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  color: var(--fcr_ui_scene_icontext1);
-  background-color: var(--fcr_web_ui_scene_fill2);
-  border: 0.5px solid var(--fcr_ui_scene_line1);
-  position: relative;
-  overflow: hidden;
-}
-
-.fcr-state-bar__record-tag {
-  padding: 0 0 0 4px;
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 1;
-  font-weight: 400;
-}
-.fcr-state-bar__record-tag.recording-min {
-  padding: 0 4px;
-}
-
-.fcr-state-bar__record-tag > svg {
-  width: 22px;
-  color: var(--fcr_ui_scene_ramp_red6);
-}
-
-.fcr-state-bar__record-tag.recording-starting > svg {
-  animation: breath 2s linear infinite;
-}
-
-@keyframes breath {
-  from {
-    opacity: 0.2;
-  }
-  50% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-.fcr-state-bar__record-tag.recording-paused {
-  background-color: var(--fcr_ui_scene_ramp_red6);
-}
-
-.fcr-state-bar__record-tag.recording-paused {
-  padding: 0 6px;
-}
-
-.fcr-state-bar__record-tag.recording-paused > svg {
-  display: none;
-}
-
-.fcr-state-bar__record-tag.recording-paused .fcr-state-bar__record-text {
-  color: var(--fcr_ui_scene_white10);
-}
-
-.fcr-state-bar__record-text {
-  padding: 0 6px 0 3px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fcr-state-bar__record-buttons {
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-}
-
-.fcr-state-bar__record-buttons button {
-  outline: 0;
-}
-
-.fcr-state-bar__record-buttons.recording-paused > .fcr-state-bar__record-split:first-child {
-  display: none;
-}
-
-.fcr-state-bar__record-split {
-  display: inline-block;
-  width: 1px;
-  height: 100%;
-  background: linear-gradient(transparent, var(--fcr_ui_scene_icontext1), transparent);
-}
-
-.fcr-state-bar__record-btn {
-  padding: 3px 6px;
-}
-
-.fcr-state-bar__record-btn:focus {
-  outline: 0px;
-}
-
-.fcr-state-bar__record-btn:hover {
-  background-color: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-state-bar__record-btn:hover svg path {
-  fill: var(--fcr_web_ui_scene_mainicon2);
-}
-
-@media (max-width: 575px) {
-  .fcr-state-bar__record-tag {
-    padding-right: 4px;
-  }
-  .fcr-state-bar__record-text {
-    display: none;
-  }
-  .fcr-state-bar__record-buttons {
-    display: none;
-  }
-  .fcr-state-bar__record-tag.recording-paused > svg {
-    display: inline-block;
-    color: var(--fcr_ui_scene_icontext1);
-  }
-  .fcr-layout-config__dropdown-icon {
-    display: none;
-  }
-  .fcr-layout-config div {
-    display: none;
-  }
-}
-
-.fcr-state-bar__time {
-}
-
-.fcr-state-bar__layout {
-}
-
-.fcr-state-bar__full-screen,
-.fcr-sate-bar__subtitles-history-state {
-  border-radius: var(--fcr_cornerradius_xxs);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  padding: 2px;
-  cursor: pointer;
-  background: var(--fcr_web_ui_scene_fill2);
-}
-.fcr-state-bar__full-screen:hover,
-.fcr-sate-bar__subtitles-history-state:hover {
-  background: var(--fcr_web_ui_scene_hover);
-}
-.fcr-state-bar__full-screen:hover .fcr-state-bar__full-screen-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon2);
-}
-
-.fcr-state-bar__full-screen-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon1);
-}
-
-.fcr-sate-bar__subtitles-history-state__animation {
-  animation: fcr-sate-bar__subtitles-history-state__animation 1.5s 0.5s 1 linear;
-}
-
-@keyframes fcr-sate-bar__subtitles-history-state__animation {
-  0% {
-    background: var(--fcr_ui_scene_ramp_brand1);
-  }
-  25% {
-    background: var(--fcr_ui_scene_ramp_brand2);
-  }
-  50% {
-    background: var(--fcr_ui_scene_ramp_brand1);
-  }
-  75% {
-    background: var(--fcr_ui_scene_ramp_brand2);
-  }
-  100% {
-    background: var(--fcr_web_ui_scene_fill2);
-  }
-}
-
-.fcr-subtitles-history-state-panel {
-  padding: 15px;
-  text-align: left;
-  color: var(--fcr_ui_scene_icontext1);
-}
-.fcr-subtitles-history-state-panel__title {
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: var(--fcr_font_weight_m);
-  margin-bottom: 12px;
-}
-.fcr-subtitles-history-state-panel__text {
-  font-size: 12px;
-  line-height: 16px;
-  margin-bottom: 12px;
-}
-.fcr-subtitles-history-state-panel__actions {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-}
-.fcr-subtitles-history-state-panel__actions button {
-  border-radius: var(--fcr_cornerradius_xs);
-}
-.fcr-subtitles-history-state-panel__actions__left.fcr-button {
-  width: 132px;
-  padding: 0 10px;
-  flex-grow: 1;
-  letter-spacing: 4px;
-}
-.fcr-subtitles-history-state-panel__actions__right.fcr-button {
-  min-width: 32px;
-  padding: 0;
-  background: var(--fcr_ui_scene_ramp_red6);
-  /*  fcr-button 上的 border 属性为 important，此处不需要显示borer，故将其覆盖。 */
-  border-color: transparent !important;
-}
-.fcr-subtitles-history-state-panel__actions__right.fcr-button:hover {
-  background: var(--fcr_ui_scene_ramp_red6);
-}
-
-/* network-quality */
-.fcr-network-quality {
-}
-
-/* meeting-time */
-.fcr-meeting-time {
-  border-radius: var(--fcr_cornerradius_xxs);
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12px;
-  line-height: 100%;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  column-gap: 5px;
-}
-.fcr-meeting-time__icon path {
-  transition: all 0.2s ease;
-}
-
-.fcr-meeting-time--normal {
-  border: 1px solid var(--fcr_ui_scene_line2);
-  color: var(--fcr_web_ui_scene_mainicon1);
-  background: var(--fcr_web_ui_scene_fill2);
-}
-.fcr-meeting-time--normal .fcr-meeting-time__icon path {
-  fill: var(--fcr_web_ui_scene_mainicon1);
-}
-.fcr-meeting-time--normal:hover {
-  border: 1px solid var(--fcr_web_ui_scene_hover);
-  background: var(--fcr_web_ui_scene_hover);
-  color: var(--fcr_web_ui_scene_mainicon2);
-}
-.fcr-meeting-time--normal:hover .fcr-meeting-time__icon path {
-  fill: var(--fcr_web_ui_scene_mainicon2);
-}
-
-.fcr-meeting-time--soon2end {
-  border: 1px solid var(--fcr_ui_scene_ramp_yellow6);
-  color: var(--fcr_ui_scene_ramp_yellow6);
-  background: var(--fcr_web_ui_scene_fill2);
-}
-.fcr-meeting-time--soon2end .fcr-meeting-time__icon path {
-  fill: var(--fcr_ui_scene_ramp_yellow6);
-}
-.fcr-meeting-time--soon2end:hover {
-  border: 1px solid var(--fcr_ui_scene_ramp_yellow6);
-  background: var(--fcr_ui_scene_ramp_yellow6);
-  color: var(--fcr_ui_scene_white10);
-}
-.fcr-meeting-time--soon2end:hover .fcr-meeting-time__icon path {
-  fill: var(--fcr_ui_scene_white10);
-}
-
-.fcr-meeting-time--overtime {
-  border: 1px solid var(--fcr_ui_scene_ramp_red6);
-  color: var(--fcr_ui_scene_ramp_red6);
-  background: var(--fcr_web_ui_scene_fill2);
-}
-.fcr-meeting-time--overtime .fcr-meeting-time__icon path {
-  fill: var(--fcr_ui_scene_ramp_red6);
-}
-.fcr-meeting-time--overtime:hover {
-  border: 1px solid var(--fcr_ui_scene_ramp_red6);
-  background: var(--fcr_ui_scene_ramp_red6);
-  color: var(--fcr_ui_scene_white10);
-}
-.fcr-meeting-time--overtime:hover .fcr-meeting-time__icon path {
-  fill: var(--fcr_ui_scene_white10);
-}
-
-/* layout-config */
-.fcr-layout-config {
-  border-radius: var(--fcr_cornerradius_xxs);
-  border: 1px solid var(--fcr_ui_scene_line2);
-  height: 28px;
-  padding: 0 4px;
-  font-size: 12px;
-  line-height: 100%;
-  font-weight: 700;
-  color: var(--fcr_web_ui_scene_mainicon1);
-  cursor: pointer;
-  background: var(--fcr_web_ui_scene_fill2);
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-}
-
-.fcr-layout-config:hover {
-  color: var(--fcr_web_ui_scene_mainicon2);
-  background: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-layout-config:hover .fcr-layout-config__layout-icon path,
-.fcr-layout-config:hover .fcr-layout-config__dropdown-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon2);
-}
-
-.fcr-layout-config__layout-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon1);
-  transition: all 0.2s ease;
-}
-
-.fcr-layout-config__dropdown-icon {
-  transition: all 0.2s ease;
-  transform-origin: center;
-  transform: rotate(0deg);
-}
-
-.fcr-layout-config__dropdown-icon.is-open {
-  transform: rotate(180deg);
-}
-
-.fcr-layout-config__dropdown-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon1);
-  transition: all 0.2s ease;
-}
-
-.fcr-layout-config__popover .fcr-tooltip-inner {
-  border-radius: var(--fcr_cornerradius_l);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  box-shadow: var(--fcr_web_light_dropup_m) !important;
-  width: 120px !important;
-}
-
-.fcr-layout-config-panel {
-  padding: 0 12px;
-}
-
-.fcr-layout-config-panel__option {
-  margin-top: 15px;
-}
-.fcr-layout-config-panel__option.is-active .fcr-layout-config-panel__option-layout-inner {
-  border-color: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-layout-config-panel__option-layout {
-  border-radius: var(--fcr_cornerradius_m);
-  border: 1px solid transparent;
-  padding: 2px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.fcr-layout-config-panel__option:not(.is-active) .fcr-layout-config-panel__option-layout:hover {
-  border-color: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-layout-config-panel__option-layout-inner {
-  border-radius: var(--fcr_cornerradius_s);
-  border: 5px solid var(--fcr_web_ui_scene_fill4_popup);
-  transition: all 0.2s ease;
-}
-
-.fcr-layout-config-panel__option-layout-img-wrapper {
-  border-radius: var(--fcr_cornerradius_xs);
-  padding: 6px 0;
-  background: var(--fcr_web_ui_scene_fill2);
-  display: flex;
-  justify-content: center;
-}
-
-.fcr-layout-config-panel__option-layout-img {
-  width: 68px;
-  height: 38px;
-}
-
-.fcr-layout-config-panel__option-text {
-  margin-top: 3px;
-  font-size: 12px;
-  line-height: 100%;
-  font-weight: 400;
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-layout-config-panel__divider {
-  margin-top: 17px;
-  margin-bottom: 8px;
-  width: 100%;
-  height: 1px;
-  background: var(--fcr_ui_scene_line1, #e3e7ef);
-}
-
-.fcr-layout-config-panel__setting {
-  margin-bottom: 10px;
-  border-radius: var(--fcr_cornerradius_xxs);
-  padding: 9px 0;
-  font-size: 12px;
-  line-height: 100%;
-  font-weight: 400;
-  color: var(--fcr_ui_scene_icontext1);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.fcr-layout-config-panel__setting:hover {
-  background: var(--fcr_web_ui_scene_hover);
-  color: var(--fcr_web_ui_scene_mainicon2);
-}
-
-/*  */
-.fcr-state-bar__popover .fcr-tooltip-inner {
-  border-radius: var(--fcr_cornerradius_l);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  box-shadow: var(--fcr_web_light_dropup_m) !important;
-  width: fit-content !important;
-}
-
-.fcr-state-bar__meeting-info {
-  font-size: 12px;
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-state-bar__live-streaming-info {
-  font-size: 12px;
-  color: var(--fcr_ui_scene_icontext1);
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--fcr_ui_scene_line1);
-  background-color: var(--fcr_web_ui_scene_fill2);
-  border-radius: var(--fcr_cornerradius_xxs);
-  padding-right: 4px;
-  height: 28px;
-  overflow: hidden;
-}
-.fcr-state-bar__live-streaming-info-live-icon {
-  background-color: var(--fcr_ui_scene_ramp_red6);
-  border-radius: var(--fcr_cornerradius_xxs);
-  min-width: 74px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  padding: 4px;
-}
-.fcr-state-bar__live-streaming-info-live-icon.small {
-  min-width: 51px;
-  justify-content: center;
-}
-
-.fcr-state-bar__meeting-info {
-  font-size: 12px;
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-state-bar__meeting-info-drop .fcr-drop-menu {
-  width: 100%;
-  border: 1px solid var(--fcr_ui_scene_line1);
-  box-shadow: var(--fcr_web_light_dropup_m);
-}
-.fcr-state-bar__meeting-info-drop .fcr-drop-menu-option-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.fcr-state-bar__live-streaming-info {
-  font-size: 12px;
-  color: var(--fcr_ui_scene_icontext1);
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--fcr_ui_scene_line1);
-  background-color: var(--fcr_web_ui_scene_fill2);
-  border-radius: var(--fcr_cornerradius_xxs);
-  padding-right: 4px;
-  height: 28px;
-  overflow: hidden;
-}
-.fcr-state-bar__live-streaming-info-live-icon {
-  background-color: var(--fcr_ui_scene_ramp_red6);
-  border-radius: var(--fcr_cornerradius_xxs);
-  min-width: 74px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  padding: 4px;
-}
-.fcr-state-bar__live-streaming-info-text {
-  max-width: 230px;
-  white-space: nowrap;
-  margin-left: 6px;
-  overflow: hidden;
-}
-.fcr-state-bar__live-streaming-info-icon {
-  transform: rotate(180deg);
-}
-.fcr-state-bar__info-detail:hover .fcr-state-bar__lock-meeting-text,
-.fcr-state-bar__info-meeting-id:hover {
-  color: var(--fcr_web_ui_scene_mainicon2);
-}
-.fcr-state-bar__info-detail:hover .fcr-state-bar__info-detail-icon path {
-  fill: var(--fcr_web_ui_scene_mainicon2);
-}
-.fcr-state-bar__lock-meeting-text {
-  min-width: 50px;
-}
-/* .fcr-state-bar__meeting-info {
-  min-width: 120px;
-} */
-.fcr-state-bar__lock-meeting-text {
-  min-width: 50px;
-}
-
-@media (max-width: 825px) {
-  .fcr-state-bar__record-tag {
-    padding-right: 4px;
-  }
-
-  .fcr-state-bar__record-text {
-    display: none;
-  }
-
-  .fcr-state-bar__record-buttons {
-    display: none;
-  }
-
-  .fcr-state-bar__record-tag.recording-paused > svg {
-    display: inline-block;
-    color: var(--fcr_ui_scene_icontext1);
-  }
-
-  .fcr-layout-config__dropdown-icon {
-    display: none;
-  }
-
-  .fcr-layout-config div {
-    display: none;
-  }
-  .fcr-state-bar__info-meeting-id {
-    display: none;
-  }
-  .fcr-meeting-time {
-    display: none;
-  }
-  /* .fcr-state-bar__live-streaming {
-    display: none;
-  } */
-  .fcr-state-bar__live-streaming-info {
-    padding: 0;
-  }
-  .fcr-state-bar__live-streaming-info-live-icon {
-    min-width: 51px;
-    justify-content: center;
-  }
-  .fcr-state-bar__live-streaming-info img,
-  .fcr-state-bar__live-streaming-info [data-label='fcr_dropup4'],
-  .fcr-state-bar__live-streaming-info-text {
-    display: none;
-  }
-}
-
-.layout-set-options-item-disable .fcr-layout-config-panel__option-text {
-  color: var(--fcr_ui_scene_icontext3);
-}
-
-.layout-set-options-item-disable .fcr-layout-config-panel__option-layout-img-wrapper {
-  opacity: 0.5;
-}
+.fcr-state-bar {
+  width: 100%;
+  height: 34px;
+  padding: 0 15px;
+  background: var(--fcr_web_ui_scene_fill2);
+  backdrop-filter: blur(25px);
+  display: flex;
+  justify-content: space-between;
+  column-gap: 24px;
+}
+
+/* left state-bar */
+.fcr-state-bar__left-nav {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+
+.fcr-state-bar__logo {
+  --logo_height: 28px;
+  height: var(--logo_height);
+  width: auto;
+  min-width: var(--logo_height);
+  max-width: calc(var(--logo_height) * 3.5);
+}
+
+.fcr-state-bar__meeting-lock {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  height: 28px;
+  padding: 0 6px 0 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__meeting-lock:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__meeting-lock-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+
+.fcr-state-bar__meeting-info {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  height: 28px;
+  overflow: hidden;
+  background: var(--fcr_web_ui_scene_fill2);
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__info-network {
+  height: 100%;
+  padding: 4px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.fcr-state-bar__info-network:hover,
+.fcr-state-bar__info-network.active {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__step-divider {
+}
+
+.fcr-state-bar__info-detail {
+  margin-left: 6px;
+  height: 100%;
+  padding: 0 4px 0 3px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+.fcr-state-bar__inwaitingroom-disable-action {
+  pointer-events: none;
+}
+
+.fcr-state-bar__info-detail:hover,
+.fcr-state-bar__info-detail.active {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__info-detail-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+
+.fcr-state-bar__info-meeting-id {
+  height: 100%;
+  padding: 0 6px 0 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-state-bar__info-meeting-id:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+/* right state-bar */
+.fcr-state-bar__right-nav {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+
+.fcr-state-bar__record {
+  height: 28px;
+  border-radius: 4px;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border: 0.5px solid var(--fcr_ui_scene_line1);
+  position: relative;
+  overflow: hidden;
+}
+
+.fcr-state-bar__record-tag {
+  padding: 0 0 0 4px;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 400;
+}
+.fcr-state-bar__record-tag.recording-min {
+  padding: 0 4px;
+}
+
+.fcr-state-bar__record-tag > svg {
+  width: 22px;
+  color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-state-bar__record-tag.recording-starting > svg {
+  animation: breath 2s linear infinite;
+}
+
+@keyframes breath {
+  from {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
+.fcr-state-bar__record-tag.recording-paused {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+}
+
+.fcr-state-bar__record-tag.recording-paused {
+  padding: 0 6px;
+}
+
+.fcr-state-bar__record-tag.recording-paused > svg {
+  display: none;
+}
+
+.fcr-state-bar__record-tag.recording-paused .fcr-state-bar__record-text {
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-state-bar__record-text {
+  padding: 0 6px 0 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fcr-state-bar__record-buttons {
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+}
+
+.fcr-state-bar__record-buttons button {
+  outline: 0;
+}
+
+.fcr-state-bar__record-buttons.recording-paused > .fcr-state-bar__record-split:first-child {
+  display: none;
+}
+
+.fcr-state-bar__record-split {
+  display: inline-block;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(transparent, var(--fcr_ui_scene_icontext1), transparent);
+}
+
+.fcr-state-bar__record-btn {
+  padding: 3px 6px;
+}
+
+.fcr-state-bar__record-btn:focus {
+  outline: 0px;
+}
+
+.fcr-state-bar__record-btn:hover {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-state-bar__record-btn:hover svg path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+@media (max-width: 575px) {
+  .fcr-state-bar__record-tag {
+    padding-right: 4px;
+  }
+  .fcr-state-bar__record-text {
+    display: none;
+  }
+  .fcr-state-bar__record-buttons {
+    display: none;
+  }
+  .fcr-state-bar__record-tag.recording-paused > svg {
+    display: inline-block;
+    color: var(--fcr_ui_scene_icontext1);
+  }
+  .fcr-layout-config__dropdown-icon {
+    display: none;
+  }
+  .fcr-layout-config div {
+    display: none;
+  }
+}
+
+.fcr-state-bar__time {
+}
+
+.fcr-state-bar__layout {
+}
+
+.fcr-state-bar__full-screen,
+.fcr-sate-bar__subtitles-history-state {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  padding: 2px;
+  cursor: pointer;
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-state-bar__full-screen:hover,
+.fcr-sate-bar__subtitles-history-state:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-state-bar__full-screen:hover .fcr-state-bar__full-screen-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-state-bar__full-screen-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+
+.fcr-sate-bar__subtitles-history-state__animation {
+  animation: fcr-sate-bar__subtitles-history-state__animation 1.5s 0.5s 1 linear;
+}
+
+@keyframes fcr-sate-bar__subtitles-history-state__animation {
+  0% {
+    background: var(--fcr_ui_scene_ramp_brand1);
+  }
+  25% {
+    background: var(--fcr_ui_scene_ramp_brand2);
+  }
+  50% {
+    background: var(--fcr_ui_scene_ramp_brand1);
+  }
+  75% {
+    background: var(--fcr_ui_scene_ramp_brand2);
+  }
+  100% {
+    background: var(--fcr_web_ui_scene_fill2);
+  }
+}
+
+.fcr-subtitles-history-state-panel {
+  padding: 15px;
+  text-align: left;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-subtitles-history-state-panel__title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: var(--fcr_font_weight_m);
+  margin-bottom: 12px;
+}
+.fcr-subtitles-history-state-panel__text {
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 12px;
+}
+.fcr-subtitles-history-state-panel__actions {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+.fcr-subtitles-history-state-panel__actions button {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+.fcr-subtitles-history-state-panel__actions__left.fcr-button {
+  width: 132px;
+  padding: 0 10px;
+  flex-grow: 1;
+  letter-spacing: 4px;
+}
+.fcr-subtitles-history-state-panel__actions__right.fcr-button {
+  min-width: 32px;
+  padding: 0;
+  background: var(--fcr_ui_scene_ramp_red6);
+  /*  fcr-button 上的 border 属性为 important，此处不需要显示borer，故将其覆盖。 */
+  border-color: transparent !important;
+}
+.fcr-subtitles-history-state-panel__actions__right.fcr-button:hover {
+  background: var(--fcr_ui_scene_ramp_red6);
+}
+
+/* network-quality */
+.fcr-network-quality {
+}
+
+/* meeting-time */
+.fcr-meeting-time {
+  border-radius: var(--fcr_cornerradius_xxs);
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+.fcr-meeting-time__icon path {
+  transition: all 0.2s ease;
+}
+
+.fcr-meeting-time--normal {
+  border: 1px solid var(--fcr_ui_scene_line2);
+  color: var(--fcr_web_ui_scene_mainicon1);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-meeting-time--normal .fcr-meeting-time__icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+}
+.fcr-meeting-time--normal:hover {
+  border: 1px solid var(--fcr_web_ui_scene_hover);
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-meeting-time--normal:hover .fcr-meeting-time__icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-meeting-time--soon2end {
+  border: 1px solid var(--fcr_ui_scene_ramp_yellow6);
+  color: var(--fcr_ui_scene_ramp_yellow6);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-meeting-time--soon2end .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_ramp_yellow6);
+}
+.fcr-meeting-time--soon2end:hover {
+  border: 1px solid var(--fcr_ui_scene_ramp_yellow6);
+  background: var(--fcr_ui_scene_ramp_yellow6);
+  color: var(--fcr_ui_scene_white10);
+}
+.fcr-meeting-time--soon2end:hover .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_white10);
+}
+
+.fcr-meeting-time--overtime {
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_web_ui_scene_fill2);
+}
+.fcr-meeting-time--overtime .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_ramp_red6);
+}
+.fcr-meeting-time--overtime:hover {
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+  background: var(--fcr_ui_scene_ramp_red6);
+  color: var(--fcr_ui_scene_white10);
+}
+.fcr-meeting-time--overtime:hover .fcr-meeting-time__icon path {
+  fill: var(--fcr_ui_scene_white10);
+}
+
+/* layout-config */
+.fcr-layout-config {
+  border-radius: var(--fcr_cornerradius_xxs);
+  border: 1px solid var(--fcr_ui_scene_line2);
+  height: 28px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 700;
+  color: var(--fcr_web_ui_scene_mainicon1);
+  cursor: pointer;
+  background: var(--fcr_web_ui_scene_fill2);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+
+.fcr-layout-config:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-layout-config:hover .fcr-layout-config__layout-icon path,
+.fcr-layout-config:hover .fcr-layout-config__dropdown-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-layout-config__layout-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config__dropdown-icon {
+  transition: all 0.2s ease;
+  transform-origin: center;
+  transform: rotate(0deg);
+}
+
+.fcr-layout-config__dropdown-icon.is-open {
+  transform: rotate(180deg);
+}
+
+.fcr-layout-config__dropdown-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon1);
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config__popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  width: 120px !important;
+}
+
+.fcr-layout-config-panel {
+  padding: 0 12px;
+}
+
+.fcr-layout-config-panel__option {
+  margin-top: 15px;
+}
+.fcr-layout-config-panel__option.is-active .fcr-layout-config-panel__option-layout-inner {
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-layout-config-panel__option-layout {
+  border-radius: var(--fcr_cornerradius_m);
+  border: 1px solid transparent;
+  padding: 2px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config-panel__option:not(.is-active) .fcr-layout-config-panel__option-layout:hover {
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-layout-config-panel__option-layout-inner {
+  border-radius: var(--fcr_cornerradius_s);
+  border: 5px solid var(--fcr_web_ui_scene_fill4_popup);
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config-panel__option-layout-img-wrapper {
+  border-radius: var(--fcr_cornerradius_xs);
+  padding: 6px 0;
+  background: var(--fcr_web_ui_scene_fill2);
+  display: flex;
+  justify-content: center;
+}
+
+.fcr-layout-config-panel__option-layout-img {
+  width: 68px;
+  height: 38px;
+}
+
+.fcr-layout-config-panel__option-text {
+  margin-top: 3px;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-layout-config-panel__divider {
+  margin-top: 17px;
+  margin-bottom: 8px;
+  width: 100%;
+  height: 1px;
+  background: var(--fcr_ui_scene_line1, #e3e7ef);
+}
+
+.fcr-layout-config-panel__setting {
+  margin-bottom: 10px;
+  border-radius: var(--fcr_cornerradius_xxs);
+  padding: 9px 0;
+  font-size: 12px;
+  line-height: 100%;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_icontext1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fcr-layout-config-panel__setting:hover {
+  background: var(--fcr_web_ui_scene_hover);
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+/*  */
+.fcr-state-bar__popover .fcr-tooltip-inner {
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+  width: fit-content !important;
+}
+
+.fcr-state-bar__meeting-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-state-bar__live-streaming-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border-radius: var(--fcr_cornerradius_xxs);
+  padding-right: 4px;
+  height: 28px;
+  overflow: hidden;
+}
+.fcr-state-bar__live-streaming-info-live-icon {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_xxs);
+  min-width: 74px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+.fcr-state-bar__live-streaming-info-live-icon.small {
+  min-width: 51px;
+  justify-content: center;
+}
+
+.fcr-state-bar__meeting-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-state-bar__meeting-info-drop .fcr-drop-menu {
+  width: 100%;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  box-shadow: var(--fcr_web_light_dropup_m);
+}
+.fcr-state-bar__meeting-info-drop .fcr-drop-menu-option-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fcr-state-bar__live-streaming-info {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  background-color: var(--fcr_web_ui_scene_fill2);
+  border-radius: var(--fcr_cornerradius_xxs);
+  padding-right: 4px;
+  height: 28px;
+  overflow: hidden;
+}
+.fcr-state-bar__live-streaming-info-live-icon {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_xxs);
+  min-width: 74px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+.fcr-state-bar__live-streaming-info-text {
+  max-width: 230px;
+  white-space: nowrap;
+  margin-left: 6px;
+  overflow: hidden;
+}
+.fcr-state-bar__live-streaming-info-icon {
+  transform: rotate(180deg);
+}
+.fcr-state-bar__info-detail:hover .fcr-state-bar__lock-meeting-text,
+.fcr-state-bar__info-meeting-id:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-state-bar__info-detail:hover .fcr-state-bar__info-detail-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-state-bar__lock-meeting-text {
+  min-width: 50px;
+}
+/* .fcr-state-bar__meeting-info {
+  min-width: 120px;
+} */
+.fcr-state-bar__lock-meeting-text {
+  min-width: 50px;
+}
+
+@media (max-width: 825px) {
+  .fcr-state-bar__record-tag {
+    padding-right: 4px;
+  }
+
+  .fcr-state-bar__record-text {
+    display: none;
+  }
+
+  .fcr-state-bar__record-buttons {
+    display: none;
+  }
+
+  .fcr-state-bar__record-tag.recording-paused > svg {
+    display: inline-block;
+    color: var(--fcr_ui_scene_icontext1);
+  }
+
+  .fcr-layout-config__dropdown-icon {
+    display: none;
+  }
+
+  .fcr-layout-config div {
+    display: none;
+  }
+  .fcr-state-bar__info-meeting-id {
+    display: none;
+  }
+  .fcr-meeting-time {
+    display: none;
+  }
+  /* .fcr-state-bar__live-streaming {
+    display: none;
+  } */
+  .fcr-state-bar__live-streaming-info {
+    padding: 0;
+  }
+  .fcr-state-bar__live-streaming-info-live-icon {
+    min-width: 51px;
+    justify-content: center;
+  }
+  .fcr-state-bar__live-streaming-info img,
+  .fcr-state-bar__live-streaming-info [data-label='fcr_dropup4'],
+  .fcr-state-bar__live-streaming-info-text {
+    display: none;
+  }
+}
+
+.layout-set-options-item-disable .fcr-layout-config-panel__option-text {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.layout-set-options-item-disable .fcr-layout-config-panel__option-layout-img-wrapper {
+  opacity: 0.5;
+}