fcr-ui-scene 3.8.1-beta → 3.8.1

package/lib/modules/setting/video-settings/index.css

@@ -1,357 +1,357 @@
-.fcr-device-settings-video__header {
-  height: 36px;
-  font-size: 13px;
-  line-height: 1;
-  font-weight: 700;
-  color: var(--fcr_ui_scene_icontext1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.fcr-device-settings-mirror-toggle {
-  border-radius: var(--fcr_cornerradius_xs);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  padding: 2px;
-  background: var(--fcr_web_ui_scene_fill2);
-  backdrop-filter: blur(16.7px);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.fcr-device-settings-mirror-toggle:hover {
-  background: var(--fcr_web_ui_scene_hover);
-}
-
-.fcr-device-settings-video__beauty-slider {
-  /* width: 260px; */
-  height: 28px;
-  background: var(--fcr_mobile_ui_scene_color_popup_block4);
-  border-radius: 8px;
-  display: flex;
-  position: relative;
-  align-items: center;
-  padding: 10px 12px;
-  flex: 1;
-}
-
-.fcr-device-settings-video__beauty-slider-value {
-  color: var(--fcr_ui_scene_icontext1);
-  font-weight: 700;
-  margin-left: 13px;
-  user-select: none;
-}
-
-.fcr-device-settings-video__beauty-slider .fcr-slider {
-  width: 100%;
-}
-
-.fcr-device-settings-video__beauty-reset {
-  z-index: 10;
-  border: none;
-  background: var(--fcr_mobile_ui_scene_color_popup_block4);
-}
-
-.fcr-device-settings-video__video-flip-container {
-  position: absolute;
-  z-index: 10;
-  right: 6px;
-  bottom: 6px;
-  border-radius: var(--fcr_cornerradius_xs);
-  background: var(--fcr_ui_scene_click);
-}
-
-.fcr-device-settings-video__video-flip {
-  background: var(--fcr_mobile_ui_scene_color_popup_block4);
-  border: none;
-}
-
-.fcr-device-settings-video__video-flip:active {
-  background: var(--fcr_ui_scene_click);
-}
-
-.fcr-video-settings-basic__basic-form {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border-radius: var(--fcr_cornerradius_s);
-  width: 100%;
-  padding: 10px;
-  background: var(--fcr_mobile_ui_scene_color_popup_block5);
-}
-
-.fcr-video-settings-basic__basic-form:first-child {
-  margin-top: 12px;
-}
-
-.fcr-video-settings-basic__basic-form .fcr-checkbox {
-  /* min-height: 32px; */
-  align-items: start;
-  padding: 6px 0;
-}
-.fcr-video-settings-basic__checkbox-wrapper {
-  margin-top: 14px;
-}
-.fcr-video-settings-basic__basic-form .fcr-checkbox .fcr-checkbox-label {
-  line-height: 20px;
-}
-.fcr-video-settings-basic__basic-form.fcr-video-settings-basic__max-person-form {
-  padding: 5px 10px;
-}
-
-.fcr-video-settings-basic__max-person-label {
-  min-height: 32px;
-  font-weight: 300;
-  color: var(--fcr_ui_scene_icontext1);
-}
-.fcr-video-settings-basic__spotlight-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.fcr-video-settings-basic__max-person-radio-group {
-  height: 32px;
-  display: flex;
-  column-gap: 30px;
-}
-
-/* 修复没有设备时展示 no device 的样式 */
-.fcr-device-settings-video__device-select-no-device {
-  border-width: 1px;
-  border-style: solid;
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 12px;
-  line-height: 1.5;
-  overflow: hidden;
-  user-select: none;
-  font-weight: 400;
-  border-color: transparent;
-  background: var(--fcr_ui_scene_black3);
-  backdrop-filter: blur(25px);
-  color: var(--fcr_ui_scene_white10);
-  padding: 6px 6px 6px 12px;
-  border-radius: var(--fcr_cornerradius_s);
-  display: flex;
-  align-items: center;
-}
-
-.fcr-device-settings-video__device-select-no-device span {
-  flex: 1;
-}
-
-.fcr-device-settings-video__device-select-no-device .icon {
-  flex-shrink: 0;
-}
-
-.fcr-device-settings-video__tab-wrapper {
-  width: 100%;
-  max-height: 296px;
-  min-height: 279px;
-  position: relative;
-  margin-top: 20px;
-}
-
-.fcr-device-settings-video__tab-wrapper .fcr-fashion-tabs {
-  width: 100%;
-}
-
-.fcr-device-settings-video__active-tab-wrapper {
-  width: 100%;
-  height: 260px;
-  min-height: 260px;
-  overflow-y: scroll;
-  padding-bottom: 20px;
-}
-
-.fcr-virtual-background-setting__container {
-  display: flex;
-  flex-direction: column;
-}
-
-.fcr-device-settings-video__tips {
-  background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
-  border-radius: var(--fcr_cornerradius_s);
-  line-height: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px 0px;
-  color: var(--fcr_ui_scene_icontext7);
-  padding: 8px;
-  font-size: 12px;
-}
-
-.fcr-virtual-background-setting__virtual-list {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 14px;
-}
-
-.fcr-virtual-background-setting__virtual-item {
-  width: 88px;
-  height: 62px;
-  padding: 3px;
-  border: 2px solid transparent;
-  position: relative;
-  border-radius: var(--fcr_cornerradius_s);
-  flex: 25%;
-  max-width: 88px;
-  box-sizing: border-box;
-}
-
-.fcr-virtual-background-setting__virtual-none {
-  color: var(--fcr_web_ui_scene_mainicon1);
-  font-size: 12px;
-}
-.fcr-virtual-background-setting__virtual-item.is-active {
-  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
-}
-.fcr-virtual-background-setting__virtual-item.is-active
-  .fcr-virtual-background-setting__virtual-none {
-  color: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-virtual-background-setting__virtual-source {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--fcr_cornerradius_s);
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--fcr_web_ui_scene_fill4_popup);
-  flex-direction: column;
-  padding: 0 10px;
-}
-
-.fcr-virtual-background-setting__virtual-item:not(:first-child):hover
-  .fcr-virtual-background-setting__virtual-source {
-  transform: scale(1.05);
-}
-
-.fcr-virtual-background-setting__virtual-video-source {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.fcr-virtual-background-setting__virtual-tag {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background-color: var(--fcr_ui_scene_black5);
-  width: 28px;
-  height: 18px;
-  border-radius: 8px 0 8px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fcr-virtual-background-setting__virtual-source img,
-.fcr-virtual-background-setting__virtual-source video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.fcr-beauty-setting__beauty-options {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-.fcr-beauty-setting__card {
-  width: 88px;
-  height: 106px;
-  border: 2px solid transparent;
-  border-radius: var(--fcr_cornerradiu_sm);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.fcr-beauty-setting__card-container {
-  box-sizing: border-box;
-
-  background: var(--fcr_web_ui_scene_fill4_popup);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  border-radius: var(--fcr_cornerradius_s);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4px;
-}
-
-.fcr-beauty-setting__card-container__wrapper {
-  height: 56px;
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  border-radius: var(--fcr_cornerradius_xs);
-  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
-}
-
-.fcr-beauty-setting__card-container__wrapper-highlight {
-  background-color: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-beauty-setting__card-container__wrapper-highlight.fcr-beauty-setting__card-container__wrapper-disable {
-  background-color: var(--fcr_ui_scene_ramp_brand1);
-}
-
-.fcr-beauty-setting__card-title {
-  font-weight: 300;
-  font-size: 12px;
-  line-height: 12px;
-  color: var(--fcr_ui_scene_icontext1);
-  padding: 10px 0px 8px;
-  cursor: default;
-}
-
-.fcr-beauty-setting__card-title-disable {
-  color: var(--fcr_ui_scene_icontext3);
-}
-
-.fcr-beauty-setting__card-container__wrapper .fcr-switch {
-  transform-origin: center;
-}
-
-.fcr-beauty-setting__card.fcr-beauty-setting__card__content-active {
-  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
-  border-radius: var(--fcr_cornerradius_m);
-}
-
-.fcr-beauty-setting__card.fcr-beauty-setting__card__content-disable {
-  cursor: not-allowed;
-}
-
-.fcr-video-settings-basic__device-select .fcr-select.fcr-select--blurred:not(.fcr-select--focused) {
-  background-color: var(--fcr_ui_scene_input2);
-  border: 0.5px solid var(--fcr_web_ui_scene_line4);
-}
-.fcr-video-settings-basic__device-select
-  .fcr-select.fcr-select--blurred:not(.fcr-select--focused)
-  .fcr-select__selected {
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.fcr-video-settings-basic__device-select-title {
-  color: var(--fcr_ui_scene_icontext1);
-  font-weight: 700;
-  size: 14px;
-  margin-bottom: 7px;
-}
-
-.fcr-video-settings-basic__checkbox-item {
-  gap: 8px;
-  color: var(--fcr_ui_scene_icontext1);
-  display: flex;
-  align-items: baseline;
-}
-
-.fcr-video-settings-basic__checkbox-item-with-tooltip {
-  align-items: center;
-}
+.fcr-device-settings-video__header {
+  height: 36px;
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fcr-device-settings-mirror-toggle {
+  border-radius: var(--fcr_cornerradius_xs);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  padding: 2px;
+  background: var(--fcr_web_ui_scene_fill2);
+  backdrop-filter: blur(16.7px);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.fcr-device-settings-mirror-toggle:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-device-settings-video__beauty-slider {
+  /* width: 260px; */
+  height: 28px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+  border-radius: 8px;
+  display: flex;
+  position: relative;
+  align-items: center;
+  padding: 10px 12px;
+  flex: 1;
+}
+
+.fcr-device-settings-video__beauty-slider-value {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 700;
+  margin-left: 13px;
+  user-select: none;
+}
+
+.fcr-device-settings-video__beauty-slider .fcr-slider {
+  width: 100%;
+}
+
+.fcr-device-settings-video__beauty-reset {
+  z-index: 10;
+  border: none;
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+}
+
+.fcr-device-settings-video__video-flip-container {
+  position: absolute;
+  z-index: 10;
+  right: 6px;
+  bottom: 6px;
+  border-radius: var(--fcr_cornerradius_xs);
+  background: var(--fcr_ui_scene_click);
+}
+
+.fcr-device-settings-video__video-flip {
+  background: var(--fcr_mobile_ui_scene_color_popup_block4);
+  border: none;
+}
+
+.fcr-device-settings-video__video-flip:active {
+  background: var(--fcr_ui_scene_click);
+}
+
+.fcr-video-settings-basic__basic-form {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: var(--fcr_cornerradius_s);
+  width: 100%;
+  padding: 10px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+}
+
+.fcr-video-settings-basic__basic-form:first-child {
+  margin-top: 12px;
+}
+
+.fcr-video-settings-basic__basic-form .fcr-checkbox {
+  /* min-height: 32px; */
+  align-items: start;
+  padding: 6px 0;
+}
+.fcr-video-settings-basic__checkbox-wrapper {
+  margin-top: 14px;
+}
+.fcr-video-settings-basic__basic-form .fcr-checkbox .fcr-checkbox-label {
+  line-height: 20px;
+}
+.fcr-video-settings-basic__basic-form.fcr-video-settings-basic__max-person-form {
+  padding: 5px 10px;
+}
+
+.fcr-video-settings-basic__max-person-label {
+  min-height: 32px;
+  font-weight: 300;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-video-settings-basic__spotlight-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fcr-video-settings-basic__max-person-radio-group {
+  height: 32px;
+  display: flex;
+  column-gap: 30px;
+}
+
+/* 修复没有设备时展示 no device 的样式 */
+.fcr-device-settings-video__device-select-no-device {
+  border-width: 1px;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: hidden;
+  user-select: none;
+  font-weight: 400;
+  border-color: transparent;
+  background: var(--fcr_ui_scene_black3);
+  backdrop-filter: blur(25px);
+  color: var(--fcr_ui_scene_white10);
+  padding: 6px 6px 6px 12px;
+  border-radius: var(--fcr_cornerradius_s);
+  display: flex;
+  align-items: center;
+}
+
+.fcr-device-settings-video__device-select-no-device span {
+  flex: 1;
+}
+
+.fcr-device-settings-video__device-select-no-device .icon {
+  flex-shrink: 0;
+}
+
+.fcr-device-settings-video__tab-wrapper {
+  width: 100%;
+  max-height: 296px;
+  min-height: 279px;
+  position: relative;
+  margin-top: 20px;
+}
+
+.fcr-device-settings-video__tab-wrapper .fcr-fashion-tabs {
+  width: 100%;
+}
+
+.fcr-device-settings-video__active-tab-wrapper {
+  width: 100%;
+  height: 260px;
+  min-height: 260px;
+  overflow-y: scroll;
+  padding-bottom: 20px;
+}
+
+.fcr-virtual-background-setting__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.fcr-device-settings-video__tips {
+  background-color: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: var(--fcr_cornerradius_s);
+  line-height: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px 0px;
+  color: var(--fcr_ui_scene_icontext7);
+  padding: 8px;
+  font-size: 12px;
+}
+
+.fcr-virtual-background-setting__virtual-list {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 14px;
+}
+
+.fcr-virtual-background-setting__virtual-item {
+  width: 88px;
+  height: 62px;
+  padding: 3px;
+  border: 2px solid transparent;
+  position: relative;
+  border-radius: var(--fcr_cornerradius_s);
+  flex: 25%;
+  max-width: 88px;
+  box-sizing: border-box;
+}
+
+.fcr-virtual-background-setting__virtual-none {
+  color: var(--fcr_web_ui_scene_mainicon1);
+  font-size: 12px;
+}
+.fcr-virtual-background-setting__virtual-item.is-active {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-virtual-background-setting__virtual-item.is-active
+  .fcr-virtual-background-setting__virtual-none {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-virtual-background-setting__virtual-source {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--fcr_cornerradius_s);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+  flex-direction: column;
+  padding: 0 10px;
+}
+
+.fcr-virtual-background-setting__virtual-item:not(:first-child):hover
+  .fcr-virtual-background-setting__virtual-source {
+  transform: scale(1.05);
+}
+
+.fcr-virtual-background-setting__virtual-video-source {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.fcr-virtual-background-setting__virtual-tag {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: var(--fcr_ui_scene_black5);
+  width: 28px;
+  height: 18px;
+  border-radius: 8px 0 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcr-virtual-background-setting__virtual-source img,
+.fcr-virtual-background-setting__virtual-source video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.fcr-beauty-setting__beauty-options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.fcr-beauty-setting__card {
+  width: 88px;
+  height: 106px;
+  border: 2px solid transparent;
+  border-radius: var(--fcr_cornerradiu_sm);
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.fcr-beauty-setting__card-container {
+  box-sizing: border-box;
+
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_s);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+}
+
+.fcr-beauty-setting__card-container__wrapper {
+  height: 56px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  border-radius: var(--fcr_cornerradius_xs);
+  background-color: var(--fcr_mobile_ui_scene_color_popup_fill2);
+}
+
+.fcr-beauty-setting__card-container__wrapper-highlight {
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-beauty-setting__card-container__wrapper-highlight.fcr-beauty-setting__card-container__wrapper-disable {
+  background-color: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-beauty-setting__card-title {
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 12px;
+  color: var(--fcr_ui_scene_icontext1);
+  padding: 10px 0px 8px;
+  cursor: default;
+}
+
+.fcr-beauty-setting__card-title-disable {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.fcr-beauty-setting__card-container__wrapper .fcr-switch {
+  transform-origin: center;
+}
+
+.fcr-beauty-setting__card.fcr-beauty-setting__card__content-active {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+  border-radius: var(--fcr_cornerradius_m);
+}
+
+.fcr-beauty-setting__card.fcr-beauty-setting__card__content-disable {
+  cursor: not-allowed;
+}
+
+.fcr-video-settings-basic__device-select .fcr-select.fcr-select--blurred:not(.fcr-select--focused) {
+  background-color: var(--fcr_ui_scene_input2);
+  border: 0.5px solid var(--fcr_web_ui_scene_line4);
+}
+.fcr-video-settings-basic__device-select
+  .fcr-select.fcr-select--blurred:not(.fcr-select--focused)
+  .fcr-select__selected {
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-video-settings-basic__device-select-title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 700;
+  size: 14px;
+  margin-bottom: 7px;
+}
+
+.fcr-video-settings-basic__checkbox-item {
+  gap: 8px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  align-items: baseline;
+}
+
+.fcr-video-settings-basic__checkbox-item-with-tooltip {
+  align-items: center;
+}