@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
1,877 lines • 1.3 MB
JavaScript
(function() {
"use strict";
try {
if (typeof document != "undefined") {
var elementStyle = document.createElement("style");
elementStyle.appendChild(document.createTextNode(`.icon-button-container[data-v-d077781b] {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
color: var(--text-color-primary);
}
.icon-button-container .icon-content.disabled[data-v-d077781b] {
cursor: not-allowed;
opacity: 0.4;
}
.icon-button-container .icon-content[data-v-d077781b]:hover {
background: var(--button-color-secondary-hover);
}
.icon-button-container .icon-content-horizontal[data-v-d077781b] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 32px;
padding: 0 5px;
border-radius: 6px;
}
.icon-button-container .icon-content-horizontal .title[data-v-d077781b] {
margin-left: 4px;
font-size: 14px;
font-weight: 500;
line-height: 26px;
}
.icon-button-container .icon-content-vertical[data-v-d077781b] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 56px;
height: 56px;
padding: 5px;
border-radius: 6px;
}
.icon-button-container .icon-content-vertical .title[data-v-d077781b] {
margin-top: 4px;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.icon-button-container .icon-arrow[data-v-d077781b] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 56px;
border-radius: 6px;
}
.icon-button-container .icon-arrow[data-v-d077781b]:hover {
background: var(--bg-color-input);
}
.unsupport-icon[data-v-d077781b] {
position: absolute;
top: 13px;
left: 26px;
}
@media screen and (width <= 600px) {
.icon-box[data-v-d077781b] {
width: 72px;
}
.icon-box.hover-effect[data-v-d077781b]:hover::before {
width: 72px;
}
.icon-box.hover-effect[data-v-d077781b]:hover::after {
width: 72px;
}
}.audio-icon-container[data-v-8f126439] {
position: relative;
width: 24px;
height: 24px;
}
.audio-icon-container.small[data-v-8f126439] {
transform: scale(0.8);
}
.audio-icon-container .audio-level-container[data-v-8f126439] {
position: absolute;
top: 2px;
left: 7px;
display: flex;
flex-flow: column-reverse wrap;
justify-content: space-between;
width: 10px;
height: 14px;
overflow: hidden;
border-radius: 4px;
}
.audio-icon-container .audio-level-container .audio-level[data-v-8f126439] {
width: 100%;
background-color: var(--text-color-success);
transition: height 0.2s;
}
.audio-icon-container .audio-icon[data-v-8f126439] {
position: absolute;
top: 0;
left: 0;
}.select-container[data-v-f799ad33] {
position: relative;
height: 100%;
}
.select-container .select-content[data-v-f799ad33] {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
height: 42px;
padding: 0 16px;
cursor: pointer;
border-radius: 8px;
background-color: var(--bg-color-input);
color: var(--text-color-primary);
border: 1px solid var(--stroke-color-module);
}
.select-container .select-content.disabled[data-v-f799ad33] {
cursor: not-allowed;
border: 1px solid var(--stroke-color-module);
background-color: var(--bg-color-input);
color: var(--text-color-disable);
}
.select-container .select-content .select-text[data-v-f799ad33] {
flex: 1;
width: 0;
overflow: hidden;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 22px;
white-space: nowrap;
}
.select-container .select-content .arrow-icon[data-v-f799ad33] {
margin-left: 10px;
transition: transform 0.2s;
transform: rotate(0deg);
}
.select-container .select-content .arrow-icon.reverse[data-v-f799ad33] {
transform: rotate(-180deg);
}
.select-container .select-dropdown-container[data-v-f799ad33] {
position: absolute;
min-width: 100%;
max-height: 254px;
padding: 7px 0;
overflow: auto;
border-radius: 8px;
background-color: var(--bg-color-input);
color: var(--text-color-primary);
border: 1px solid var(--stroke-color-primary);
}
.select-container .select-dropdown-container.down[data-v-f799ad33] {
top: calc(100% + 6px);
left: 0;
transform-origin: 50% 0;
}
.select-container .select-dropdown-container.up[data-v-f799ad33] {
bottom: calc(100% + 6px);
left: 0;
transform-origin: 50% 100%;
}
.select-fade-enter-active[data-v-f799ad33],
.select-fade-leave-to[data-v-f799ad33] {
opacity: 0;
transition: all 0.2s ease;
transform: scaleY(0);
}
.select-fade-enter-to[data-v-f799ad33],
.select-fade-leave-from[data-v-f799ad33] {
opacity: 1;
transition: all 0.2s ease;
transform: scaleY(1);
}.mask[data-v-9303b85d] {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: var(--uikit-color-black-3);
}
.container[data-v-9303b85d] {
position: fixed;
bottom: 0;
left: 0;
z-index: 1001;
width: 100%;
min-height: 120px;
padding: 20px 12px 36px;
border-radius: 18px 18px 0 0;
background-color: var(--bg-color-operate);
}
.container .container-close[data-v-9303b85d] {
display: flex;
justify-content: center;
padding-bottom: 12px;
text-align: center;
}
.container .container-header[data-v-9303b85d] {
margin-bottom: 12px;
font-size: 18px;
font-weight: 500;
color: var(--text-color-primary);
}.custom-select[data-v-dd236b6e] {
position: relative;
display: flex;
gap: 10px;
align-items: center;
width: 100%;
}
.custom-select .label[data-v-dd236b6e] {
display: inline-block;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
white-space: nowrap;
}
.custom-option-container[data-v-dd236b6e] {
display: flex;
flex-direction: column;
align-items: center;
max-height: 38vh;
overflow: auto;
}.option-container[data-v-0777a593] {
padding: 6px 15px;
overflow: hidden;
color: var(--text-color-primary);
white-space: nowrap;
cursor: pointer;
}
.option-container.active[data-v-0777a593] {
color: var(--text-color-link);
}
.option-container[data-v-0777a593]:hover {
background-color: var(--dropdown-color-hover);
}
.option-container .option-content[data-v-0777a593] {
font-size: 14px;
font-weight: 500;
line-height: 22px;
}.custom-option[data-v-6eac7a5d] {
display: inline-block;
width: 100%;
text-align: center;
}
.custom-option.active[data-v-6eac7a5d] {
font-weight: 700;
color: var(--text-color-link);
}.message-box-overlay[data-v-18873204] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.message-box-overlay.overlay[data-v-18873204] {
background-color: var(--uikit-color-black-3);
}
.tui-message-box[data-v-18873204] {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
width: 480px;
background-color: var(--bg-color-dialog);
border-radius: 20px;
transform: translate(-50%, -50%);
}
.tui-message-box .tui-message-box-header[data-v-18873204] {
position: relative;
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
color: var(--text-color-primary);
border-bottom: 1px solid var(--stroke-color-primary);
}
.tui-message-box .tui-message-box-header .tui-dialog-header-title[data-v-18873204] {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
color: var(--text-color-primary);
}
.tui-message-box .tui-message-box-header .close[data-v-18873204] {
position: absolute;
top: 50%;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--text-color-primary);
cursor: pointer;
transform: translateY(-50%);
}
.tui-message-box .tui-message-box-body[data-v-18873204] {
flex: 1;
padding: 20px 24px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
color: var(--text-color-primary);
}
.tui-message-box .tui-message-box-footer[data-v-18873204] {
display: flex;
justify-content: center;
padding: 20px 30px;
}
.tui-message-box .tui-message-box-footer[data-v-18873204] > :not(:first-child) {
margin-left: 16px;
}
.tui-message-box-h5[data-v-18873204] {
position: fixed;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
min-width: 80vw;
max-width: 80vw;
font-style: normal;
color: var(--text-color-primary);
background-color: var(--bg-color-dialog);
border-radius: 8px;
transform: translate(-50%, -50%);
}
.tui-message-box-h5 .tui-message-box-header[data-v-18873204] {
box-sizing: border-box;
display: inline-block;
padding: 24px 24px 12px;
padding-top: 14px;
font-size: 16px;
font-weight: 500;
text-align: center;
}
.tui-message-box-h5 .tui-message-box-header .close[data-v-18873204] {
display: none;
}
.tui-message-box-h5 .tui-message-box-body[data-v-18873204] {
padding: 0 24px 20px;
font-size: 14px;
font-weight: 400;
color: var(--text-color-secondary);
text-align: center;
}
.tui-message-box-h5 .tui-message-box-footer[data-v-18873204] {
display: flex;
justify-content: space-around;
width: 100%;
border-top: 1px solid var(--stroke-color-module);
}
.tui-message-box-h5 .tui-message-box-footer .button-container[data-v-18873204] {
display: flex;
flex: 1;
justify-content: center;
padding: 11px 0;
}
.tui-message-box-h5 .tui-message-box-footer .button-container[data-v-18873204]:not(:first-child) {
border-left: 1px solid var(--stroke-color-module);
}
.tui-message-box-h5 .tui-message-box-footer .button[data-v-18873204] {
font-size: 16px;
font-weight: 500;
}
.tui-message-box-h5 .tui-message-box-footer .confirm-button[data-v-18873204] {
color: var(--text-color-link);
text-align: center;
background-color: var(--bg-color-dialog);
border: none;
}.select[data-v-dec7b1c3] {
width: 100%;
font-size: 14px;
}.select[data-v-a53d3fcf] {
width: 100%;
font-size: 14px;
}.audio-setting-tab[data-v-6b2505a4] {
width: 100%;
font-size: 14px;
border-radius: 4px;
}
.audio-setting-tab .item-setting[data-v-6b2505a4] {
width: 100%;
}
.audio-setting-tab .item-setting[data-v-6b2505a4]:not(:last-child) {
margin-bottom: 20px;
}
.audio-setting-tab .flex[data-v-6b2505a4] {
display: flex;
align-items: center;
width: 100%;
gap: 10px;
}
.audio-setting-tab .select[data-v-6b2505a4] {
flex: 1;
}
.audio-setting-tab .title[data-v-6b2505a4] {
display: inline-block;
width: 100%;
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: var(--text-color-secondary);
}
.audio-setting-tab .mic-bar-container[data-v-6b2505a4] {
display: flex;
justify-content: space-between;
}
.audio-setting-tab .mic-bar-container .mic-bar[data-v-6b2505a4] {
width: 3px;
height: 6px;
background-color: var(--text-color-secondary);
}
.audio-setting-tab .mic-bar-container .mic-bar.active[data-v-6b2505a4] {
background-color: var(--text-color-link);
}
.audio-setting-tab .audio-level-container[data-v-6b2505a4] {
display: flex;
width: 100%;
height: 20px;
}
.audio-setting-tab .audio-level-container .slider[data-v-6b2505a4] {
height: 20px;
margin-left: 10px;
}.audio-control-container[data-v-f4096ad6] {
position: relative;
display: flex;
}
.audio-control-container .audio-tab[data-v-f4096ad6] {
position: absolute;
bottom: calc(100% + 12px);
left: -5px;
width: 305px;
padding: 20px 20px 24px;
background-color: var(--bg-color-dialog);
border-radius: 8px;
box-shadow: 0 2px 4px -3px var(--uikit-color-black-8), 0 6px 10px 1px var(--uikit-color-black-8), 0 3px 14px 2px var(--uikit-color-black-8);
}
.audio-control-container .audio-tab[data-v-f4096ad6]::before {
position: absolute;
bottom: -10px;
left: 28px;
content: "";
border-top: 5px solid var(--bg-color-dialog);
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
}.overlay-container[data-v-a16aa3ea] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--uikit-color-black-3);
}
.overlay-container .dialog-container[data-v-a16aa3ea] {
position: fixed;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
min-width: 80vw;
font-style: normal;
border-radius: 8px;
transform: translate(-50%, -50%);
background-color: var(--bg-color-dialog);
color: var(--text-color-primary);
}
.overlay-container .dialog-container .dialog-title[data-v-a16aa3ea] {
box-sizing: border-box;
display: inline-block;
padding: 24px 24px 12px;
padding-top: 14px;
font-size: 16px;
font-weight: 500;
text-align: center;
}
.overlay-container .dialog-container .dialog-content[data-v-a16aa3ea] {
padding: 0 24px 20px;
font-size: 14px;
font-weight: 400;
text-align: center;
color: var(--text-color-secondary);
}
.overlay-container .dialog-container .dialog-content-notitle[data-v-a16aa3ea] {
padding: 40px;
font-size: 14px;
text-align: center;
}
.overlay-container .dialog-container .dialog-footer[data-v-a16aa3ea] {
display: flex;
border-top: 1px solid var(--stroke-color-module);
}
.overlay-container .dialog-container .dialog-footer .confirm-button[data-v-a16aa3ea],
.overlay-container .dialog-container .dialog-footer .cancel-button[data-v-a16aa3ea] {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
padding: 14px;
font-size: 16px;
font-weight: 400;
line-height: normal;
text-align: center;
color: var(--text-color-primary);
}
.overlay-container .dialog-container .dialog-footer .confirm-button[data-v-a16aa3ea] {
color: var(--text-color-link);
border-left: 1px solid var(--stroke-color-module);
}.overlay-container[data-v-c627440c] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.overlay-container.overlay[data-v-c627440c] {
background-color: var(--uikit-color-black-3);
}
.tui-dialog-container[data-v-c627440c] {
--tui-dialog-width: 480px;
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
width: var(--tui-dialog-width, 50%);
background-color: var(--bg-color-dialog);
border-radius: 20px;
transform: translate(-50%, -50%);
}
.tui-dialog-container .tui-dialog-header[data-v-c627440c] {
position: relative;
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
border-bottom: 1px solid var(--stroke-color-primary);
}
.tui-dialog-container .tui-dialog-header .tui-dialog-header-title[data-v-c627440c] {
display: flex;
align-items: center;
}
.tui-dialog-container .tui-dialog-header .tui-dialog-header-title .tui-dialog-header-title-content[data-v-c627440c] {
margin-left: 8px;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
color: var(--text-color-primary);
}
.tui-dialog-container .tui-dialog-header .close[data-v-c627440c] {
position: absolute;
top: 50%;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--text-color-primary);
cursor: pointer;
transform: translateY(-50%);
}
.tui-dialog-container .tui-dialog-content[data-v-c627440c] {
flex: 1;
padding: 20px 24px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
color: var(--text-color-primary);
}
.tui-dialog-container .tui-dialog-footer[data-v-c627440c] {
display: flex;
justify-content: center;
padding: 20px 30px;
}.select[data-v-af64040b] {
width: 100%;
font-size: 14px;
}.select[data-v-b7820556] {
width: 100%;
font-size: 14px;
}.svg-icon[data-v-a9f14938] {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}.message-enter-from {
opacity: 0;
transform: translate3d(0, -75px, 0);
}
.message-enter-active {
transition: all 0.3s;
}
.message-enter-to {
opacity: 1;
transform: none;
}
.t-message {
position: absolute;
top: 6%;
left: 50%;
z-index: 9999;
display: inline-block;
max-height: 50px;
padding: 10px;
color: var(--uikit-color-gray-light-5);
white-space: nowrap;
background-color: var(--uikit-color-white-2);
border-radius: 8px;
transform: translateX(-50%);
}
.t-message .t-message-text {
font-size: 0.875rem;
vertical-align: middle;
}
.t-message .t-message-icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 4px;
vertical-align: middle;
background-size: cover;
}
.t-message.t-message-error {
color: var(--text-color-error);
background-color: var(--toast-color-error);
}
.t-message.t-message-success {
color: var(--text-color-success);
background-color: var(--toast-color-success);
}
.t-message.t-message-warning {
color: var(--text-color-warning);
background-color: var(--toast-color-warning);
}
.t-message.t-message-info {
color: var(--text-color-primary);
background-color: var(--toast-color-default);
}.tui-notification .tui-notification-container-mobile[data-v-41a1c81d] {
position: fixed;
top: 8%;
display: flex;
width: 95%;
height: 44px;
margin: 0 10px;
text-align: center;
border-radius: 10px;
background-color: var(--bg-color-dialog);
box-shadow: 0 3px 8px var(--uikit-color-black-8);
}
.tui-notification .tui-notification-container-mobile .tui-notification-mobile-icon[data-v-41a1c81d] {
padding: 0 10px;
margin-left: 4px;
color: var(--text-color-primary);
}
.tui-notification .tui-notification-container-mobile .tui-notification-mobile-content[data-v-41a1c81d] {
margin: 0 auto 0 4px;
font-size: 15px;
font-weight: 400;
line-height: 44px;
color: var(--text-color-secondary);
}
.tui-notification .tui-notification-container-mobile .tui-notification-mobile-check[data-v-41a1c81d] {
padding: 0 12px;
margin: 6px 10px 6px 0;
line-height: 34px;
border-radius: 10px;
color: var(--text-color-primary);
background-color: var(--text-color-link);
}
.tui-notification .tui-notification-container[data-v-41a1c81d] {
position: fixed;
top: 7%;
right: 1%;
display: flex;
flex-direction: column;
width: 400px;
border-radius: 20px;
background-color: var(--bg-color-dialog);
box-shadow: 0 3px 8px var(--uikit-color-black-8);
}
.tui-notification .tui-notification-container .tui-notification-header[data-v-41a1c81d] {
position: relative;
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
font-weight: 500;
color: var(--text-color-primary);
}
.tui-notification .tui-notification-container .tui-notification-header .tui-notification-title[data-v-41a1c81d] {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tui-notification .tui-notification-container .tui-notification-header .close[data-v-41a1c81d] {
position: absolute;
top: 50%;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
cursor: pointer;
transform: translateY(-50%);
color: var(--text-color-primary);
}
.tui-notification .tui-notification-footer[data-v-41a1c81d] {
display: flex;
justify-content: flex-end;
padding: 20px 30px;
}.tui-badge[data-v-1bd3db74] {
position: relative;
display: inline-block;
}
.tui-badge .tui-badge-count[data-v-1bd3db74] {
position: absolute;
top: 0;
right: 15px;
display: inline-block;
padding: 1px 6px;
font-size: 12px;
font-weight: bold;
border-radius: 10px;
transform: translateY(-50%) translateX(100%);
color: var(--uikit-color-white-1);
}
.tui-badge-primary .tui-badge-count[data-v-1bd3db74] {
background-color: var(--text-color-link);
}
.tui-badge-danger .tui-badge-count[data-v-1bd3db74] {
background-color: var(--text-color-error);
}
.tui-badge-isDot .tui-badge-count[data-v-1bd3db74] {
top: 0;
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}.tui-button[data-v-fa0ac453] {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 400;
line-height: 22px;
text-align: center;
white-space: nowrap;
cursor: pointer;
background-color: var(--button-color-primary-default);
border: 1px solid var(--button-color-primary-default);
color: var(--text-color-button);
outline: none;
transition: background-color 0.2s ease-in-out;
}
.tui-button[data-v-fa0ac453]:hover {
border-color: var(--text-color-link);
border: 1px solid var(--text-color-link);
outline: none;
}
.tui-button-plain.tui-button-primary[data-v-fa0ac453] {
background: var(--uikit-color-white-2);
border-color: var(--text-color-link);
color: var(--text-color-link);
}
.tui-button-plain.tui-button-primary[data-v-fa0ac453]:hover {
color: var(--uikit-color-white-1);
background: var(--uikit-color-theme-5);
border-color: var(--uikit-color-theme-5);
}
.tui-button-plain.tui-button-info[data-v-fa0ac453] {
color: var(--uikit-color-gray-7);
background: var(--uikit-color-white-1);
border-color: var(--uikit-color-white-2);
}
.tui-button-plain.tui-button-info[data-v-fa0ac453]:hover {
color: var(--uikit-color-white-1);
background: var(--uikit-color-gray-7);
border-color: var(--uikit-color-gray-7);
}
.tui-button-plain.tui-button-danger[data-v-fa0ac453] {
font-weight: 500;
color: var(--uikit-color-red-6);
background: var(--uikit-color-white-1);
border-color: var(--uikit-color-red-6);
}
.tui-button-plain.tui-button-danger[data-v-fa0ac453]:hover {
color: var(--uikit-color-white-1);
background: var(--uikit-color-red-6);
border-color: var(--uikit-color-red-6);
}
.tui-button-primary[data-v-fa0ac453] {
font-size: 14px;
font-weight: 500;
line-height: 22px;
background-color: transparent;
border: 1px solid var(--text-color-link);
color: var(--text-color-link);
}
.tui-button-primary[data-v-fa0ac453]:hover {
background-color: var(--uikit-color-black-8);
}
.tui-button-large[data-v-fa0ac453] {
padding: 19px 48px;
font-size: 20px;
}
.tui-button-default[data-v-fa0ac453] {
padding: 5px 30px;
font-size: 14px;
}
.tui-button-round[data-v-fa0ac453] {
border-radius: 999999px;
}
.tui-button-disabled[data-v-fa0ac453] {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}
.tui-button-icon[data-v-fa0ac453] {
display: flex;
margin-right: 5px;
}.overlay-container[data-v-bdf808b8] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2007;
}
.overlay-container.overlay[data-v-bdf808b8] {
background-color: var(--uikit-color-black-3);
}
.drawer-container[data-v-bdf808b8] {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
border-radius: 8px 0 0 8px;
background-color: var(--bg-color-operate);
box-shadow: 0px 12px 26px var(--uikit-color-black-8), 0px 8px 12px var(--uikit-color-black-8);
}
.drawer-container .drawer-header[data-v-bdf808b8] {
position: relative;
display: flex;
align-items: center;
height: 64px;
padding: 0 20px;
box-shadow: 0px 1px 0 var(--stroke-color-primary);
}
.drawer-container .drawer-header .drawer-header-title[data-v-bdf808b8] {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
color: var(--text-color-primary);
}
.drawer-container .drawer-header .close[data-v-bdf808b8] {
position: absolute;
top: 50%;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
cursor: pointer;
transform: translateY(-50%);
color: var(--text-color-primary);
}
.drawer-container .drawer-content[data-v-bdf808b8] {
flex: 1;
overflow: auto;
}.tui-input[data-v-7ce82e9e] {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
input[data-v-7ce82e9e] {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px 0 10px 16px;
font-size: 14px;
border-radius: 8px;
background-color: var(--bg-color-input);
color: var(--text-color-primary);
border: 1px solid var(--stroke-color-module);
}
input[data-v-7ce82e9e]:focus {
outline: 0;
border-color: var(--text-color-link);
}
input[data-v-7ce82e9e]:disabled {
background-color: var(--button-color-primary-disable);
}
.tui-input.no-border input[data-v-7ce82e9e] {
padding: 0;
background-color: transparent;
border: none;
}
.suffix-icon[data-v-7ce82e9e] {
position: absolute;
top: 50%;
right: 12px;
display: flex;
align-items: center;
transform: translateY(-50%);
}
.results[data-v-7ce82e9e] {
position: absolute;
z-index: 2;
width: 100%;
max-height: 254px;
padding: 7px 0;
overflow: auto;
border-radius: 4px;
background-color: var(--bg-color-input);
border: 1px solid var(--stroke-color-module);
}
.results-item[data-v-7ce82e9e] {
display: flex;
align-items: center;
padding: 6px 15px;
white-space: nowrap;
cursor: pointer;
}
.results-item[data-v-7ce82e9e]:hover {
background-color: var(--text-color-button-disable);
color: var(--text-color-link);
}.tui-input[data-v-cf85ac3b] {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
input[data-v-cf85ac3b] {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px 0 10px 16px;
font-size: 14px;
border-radius: 8px;
background-color: var(--bg-color-input);
color: var(--text-color-primary);
border: 1px solid var(--stroke-color-module);
}
input[data-v-cf85ac3b]:focus {
outline: 0;
border-color: var(--text-color-link);
}
input[data-v-cf85ac3b]:disabled {
background-color: var(--button-color-primary-disable);
}
.tui-input.no-border input[data-v-cf85ac3b] {
padding: 0;
background-color: transparent;
border: none;
}
.suffix-icon[data-v-cf85ac3b] {
position: absolute;
top: 50%;
right: 12px;
display: flex;
align-items: center;
transform: translateY(-50%);
}
.results[data-v-cf85ac3b] {
position: fixed;
z-index: 2;
width: 100%;
max-width: 12rem;
max-height: 254px;
padding: 7px 0;
overflow: auto;
border-radius: 4px;
background-color: var(--bg-color-input);
border: 1px solid var(--stroke-color-module);
}
.results-item[data-v-cf85ac3b] {
display: flex;
align-items: center;
padding: 6px 15px;
white-space: nowrap;
cursor: pointer;
}
.results-item[data-v-cf85ac3b]:hover {
background-color: var(--uikit-color-gray-7);
color: var(--text-color-link);
}.popup-container[data-v-e30852ce] {
position: static;
flex: 1;
width: 100vw;
height: 100%;
background-color: var(--bg-color-topbar);
}
.popup-container .popup-main-header[data-v-e30852ce] {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
}
.popup-container .popup-main-header .icon-container[data-v-e30852ce] {
position: absolute;
top: 0;
left: 0;
box-sizing: content-box;
width: 10px;
height: 18px;
padding: 20px 25px;
background-size: cover;
}
.popup-container .popup-main-header .sidebar-title[data-v-e30852ce] {
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px;
text-align: center;
color: var(--text-color-primary);
}
.popup-container .popup-main-header .close-icon[data-v-e30852ce] {
background-size: cover;
}
.popup-container .popup-main-content[data-v-e30852ce] {
width: 100%;
height: calc(100% - 130px);
overflow: hidden;
}
.popup-container .popup-main-footer[data-v-e30852ce] {
position: sticky;
bottom: 0;
width: 100%;
height: auto;
padding-top: 10px;
}.switch-container[data-v-791f9c34],
.switch-container-active[data-v-791f9c34] {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
cursor: pointer;
border-radius: 20px;
transition: background-color 0.3s;
background-color: var(--switch-color-on);
}
.switch-container .switch-core[data-v-791f9c34],
.switch-container-active .switch-core[data-v-791f9c34] {
position: absolute;
top: 2px;
left: 2px;
width: 40%;
height: 80%;
border-radius: 50%;
transition: transform 0.3s !important;
transform: translateX(20px);
background-color: var(--switch-color-button);
}
.switch-container-active[data-v-791f9c34] {
background-color: var(--switch-color-off);
}
.switch-container-active .switch-core[data-v-791f9c34] {
transform: translateX(0);
}.tui-checkbox[data-v-eb07d08b] {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.tui-checkbox .tui-checkbox-slot-container[data-v-eb07d08b] {
flex: 1;
overflow: auto;
}
input[data-v-eb07d08b] {
cursor: pointer;
border-radius: 4px;
color: var(--bg-color-secondary);
border: 1px solid var(--stroke-color-module);
}
input[data-v-eb07d08b]:focus {
outline: 0;
border-color: var(--text-color-link);
}
input[data-v-eb07d08b]:disabled {
cursor: not-allowed;
background-color: var(--bg-color-function);
}.dialog-content[data-v-bdc29cb8] {
display: flex;
align-items: center;
}
.dialog-content .dialog-input[data-v-bdc29cb8] {
flex-grow: 1;
}.input-content-container[data-v-686bacb9] {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 9998;
box-sizing: border-box;
width: 100vw;
height: auto;
background-color: var(--uikit-color-black-3);
}
.input-content-container .input-content[data-v-686bacb9] {
position: absolute;
bottom: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 450;
line-height: 4vh;
color: var(--text-color-secondary);
resize: none;
background-color: var(--bg-color-topbar);
border: none;
}
.input-content-container .input[data-v-686bacb9] {
width: 100%;
}.video-preview-container[data-v-253c6282] {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: var(--uikit-color-black-1);
border-radius: 8px;
}
.video-preview-container .video-preview[data-v-253c6282] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-preview-container .attention-info[data-v-253c6282] {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.video-preview-container .attention-info .off-camera-info[data-v-253c6282] {
font-size: 22px;
font-weight: 400;
line-height: 34px;
color: var(--uikit-color-gray-7);
}
.video-preview-container .attention-info .loading[data-v-253c6282] {
animation: loading-rotate-253c6282 2s linear infinite;
}
@keyframes loading-rotate-253c6282 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}.video-tab[data-v-735d4d96] {
font-size: 14px;
border-radius: 8px;
}
.video-tab .item-setting[data-v-735d4d96]:not(:last-child) {
margin-bottom: 20px;
}
.video-tab .title[data-v-735d4d96] {
display: inline-block;
width: 100%;
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: var(--text-color-secondary);
}
.video-tab .video-preview[data-v-735d4d96] {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
overflow: hidden;
}
.video-tab .mirror-container[data-v-735d4d96] {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 2px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
color: var(--text-color-secondary);
}
.video-tab .item[data-v-735d4d96] {
width: 100%;
height: 20px;
color: var(--text-color-secondary);
cursor: pointer;
}.video-control-container[data-v-566259fc] {
position: relative;
display: flex;
}
.video-control-container .video-tab[data-v-566259fc] {
position: absolute;
bottom: calc(100% + 12px);
left: -5px;
width: 305px;
padding: 20px 20px 24px;
background-color: var(--bg-color-dialog);
border-radius: 8px;
box-shadow: 0 2px 4px -3px var(--uikit-color-black-8), 0 6px 10px 1px var(--uikit-color-black-8), 0 3px 14px 2px var(--uikit-color-black-8);
}
.video-control-container .video-tab[data-v-566259fc]::before {
position: absolute;
bottom: -10px;
left: 30px;
content: "";
border-top: 5px solid var(--bg-color-dialog);
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
}.cancel-button[data-v-164c2e99] {
margin-left: 20px;
}
.user-search-content {
&[data-v-03c3126b] {
display: flex;
align-items: center;
height: 32px;
padding: 0 16px;
margin: 23px 20px 0;
color: var(--text-color-primary);
background-color: var(--bg-color-input);
border-radius: 16px;
}
.search-input[data-v-03c3126b] {
width: 100%;
margin-left: 8px;
font-size: 14px;
color: var(--text-color-primary);
background: none;
border: none;
outline: none;
}
}
.avatar-container[data-v-460d4fdf] {
position: relative;
width: 100%;
height: 100%;
}
.avatar-container .avatar[data-v-460d4fdf] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}.member-info[data-v-7577790e],
.member-info-mobile[data-v-7577790e] {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
}
.member-info .member-basic-info[data-v-7577790e],
.member-info .member-basic-info-admin[data-v-7577790e],
.member-info-mobile .member-basic-info[data-v-7577790e],
.member-info-mobile .member-basic-info-admin[data-v-7577790e] {
display: flex;
flex-direction: row;
align-items: center;
}
.member-info .member-basic-info .avatar-url[data-v-7577790e],
.member-info .member-basic-info-admin .avatar-url[data-v-7577790e],
.member-info-mobile .member-basic-info .avatar-url[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .avatar-url[data-v-7577790e] {
display: flex;
align-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
}
.member-info .member-basic-info .user-name[data-v-7577790e],
.member-info .member-basic-info-admin .user-name[data-v-7577790e],
.member-info-mobile .member-basic-info .user-name[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .user-name[data-v-7577790e] {
max-width: 100px;
margin-left: 12px;
overflow: hidden;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: var(--text-color-secondary);
text-overflow: ellipsis;
white-space: nowrap;
}
.member-info .member-basic-info .role-info[data-v-7577790e],
.member-info .member-basic-info-admin .role-info[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info[data-v-7577790e] {
display: flex;
}
.member-info .member-basic-info .role-info .master-icon[data-v-7577790e],
.member-info .member-basic-info .role-info .admin-icon[data-v-7577790e],
.member-info .member-basic-info-admin .role-info .master-icon[data-v-7577790e],
.member-info .member-basic-info-admin .role-info .admin-icon[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info .master-icon[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info .admin-icon[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info .master-icon[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info .admin-icon[data-v-7577790e] {
display: flex;
margin-left: 8px;
color: var(--text-color-link);
}
.member-info .member-basic-info .role-info .admin-icon[data-v-7577790e],
.member-info .member-basic-info-admin .role-info .admin-icon[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info .admin-icon[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info .admin-icon[data-v-7577790e] {
color: var(--text-color-warning);
}
.member-info .member-basic-info .role-info .user-extra-info[data-v-7577790e],
.member-info .member-basic-info .role-info .user-extra-info-admin[data-v-7577790e],
.member-info .member-basic-info-admin .role-info .user-extra-info[data-v-7577790e],
.member-info .member-basic-info-admin .role-info .user-extra-info-admin[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info .user-extra-info[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info .user-extra-info-admin[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info .user-extra-info[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info .user-extra-info-admin[data-v-7577790e] {
padding: 2px;
padding: 0 6px;
margin-left: 4px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--text-color-link);
}
.member-info .member-basic-info .role-info .user-extra-info-admin[data-v-7577790e],
.member-info .member-basic-info-admin .role-info .user-extra-info-admin[data-v-7577790e],
.member-info-mobile .member-basic-info .role-info .user-extra-info-admin[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .role-info .user-extra-info-admin[data-v-7577790e] {
color: var(--text-color-warning);
transition: none;
}
.member-info .member-basic-info-admin .user-name[data-v-7577790e],
.member-info-mobile .member-basic-info-admin .user-name[data-v-7577790e] {
max-width: 40px;
}
.member-info .member-invite[data-v-7577790e],
.member-info-mobile .member-invite[data-v-7577790e] {
display: flex;
align-items: center;
height: 100%;
}
.member-info .member-av-state[data-v-7577790e],
.member-info-mobile .member-av-state[data-v-7577790e] {
display: flex;
align-items: center;
height: 100%;
color: var(--uikit-color-gray-7);
}
.member-info .member-av-state .state-icon[data-v-7577790e],
.member-info-mobile .member-av-state .state-icon[data-v-7577790e] {
margin-left: 16px;
}
.member-info .member-av-state .disable-icon[data-v-7577790e],
.member-info-mobile .member-av-state .disable-icon[data-v-7577790e] {
opacity: 0.4;
}
.member-info-mobile[data-v-7577790e] {
align-items: center;
width: 80vw;
}.member-invite-container[data-v-902e09fb] {
display: flex;
justify-content: end;
width: 100%;
}
.member-invite-container .member-invite-info[data-v-902e09fb] {
display: flex;
align-items: center;
padding-right: 10px;
font-size: 14px;
font-weight: 400;
color: var(--text-color-primary);
}
.member-invite-container .button[data-v-902e09fb] {
width: 68px;
}.member-control-container[data-v-401bddad] {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column !important;
width: 100%;
padding: 22px 16px;
background-color: var(--bg-color-operate);
border-radius: 15px 15px 0 0;
animation-name: popup-401bddad;
animation-duration: 200ms;
}
@keyframes popup-401bddad {
from {
transform: scaleY(0);
transform-origin: bottom;
}
to {
transform: scaleY(1);
transform-origin: bottom;
}
}
.member-control-container .member-title[data-v-401bddad] {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.member-control-container .member-title .avatar-url[data-v-401bddad] {
width: 30px;
height: 30px;
border-radius: 50%;
}
.member-control-container .member-title .member-title-content[data-v-401bddad] {
margin-left: 10px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
color: var(--text-color-primary);
}
.member-control-container .user-operate-item[data-v-401bddad] {
display: flex;
align-items: center;
width: 100%;
padding-top: 10px;
}
.member-control-container .user-operate-item .control-title[data-v-401bddad] {
margin-left: 10px;
}
.cancel-button[data-v-401bddad] {
display: flex;
align-items: center;
width: 50%;
padding: 12px;
}
.tab-cancel[data-v-401bddad] {
flex: 1;
padding-right: 30px;
text-align: end;
}.member-control-container[data-v-6d11d207] {
display: flex;
flex-direction: row;
}
.member-control-container .more-arrow[data-v-6d11d207] {
margin-left: 2px;
}
.member-control-container .more-arrow.down[data-v-6d11d207] {
transform: rotate(180deg);
}
.member-control-container .more-container[data-v-6d11d207] {
position: relative;
margin-left: 10px;
}
.member-control-container .more-container .user-operate-list[data-v-6d11d207] {
position: absolute;
z-index: 1;
min-width: 160px;
padding: 20px;
background-color: var(--dropdown-color-default);
border-radius: 8px;
box-shadow: 0 3px 8px var(--uikit-color-black-8), 0 6px 40px var(--uikit-color-black-8);
}
.member-control-container .more-container .user-operate-list[data-v-6d11d207]::before {
position: absolute;
width: 0;
content: "";
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--dropdown-color-default);
border-left: 10px solid transparent;
}
.member-control-container .more-container .user-operate-list[data-v-6d11d207]::after {
position: absolute;
width: 100%;
height: 20px;
content: "";
background-color: transparent;
}
.member-control-container .more-container .user-operate-list .user-operate-item[data-v-6d11d207] {
display: flex;
align-items: center;
height: 20px;
color: var(--text-color-secondary);
cursor: pointer;
}
.member-control-container .more-container .user-operate-list .user-operate-item .operate-text[data-v-6d11d207] {
margin-left: 10px;
font-size: 14px;
white-space: nowrap;
}
.member-control-container .more-container .user-operate-list .user-operate-item[data-v-6d11d207]:not(:first-child) {
margin-top: 20px;
}
.member-control-container .more-container .down[data-v-6d11d207] {
top: calc(100% + 15px);
right: 0;
}
.member-control-container .more-container .down[data-v-6d11d207]::before {
top: -20px;
right: 20px;
}
.member-control-container .more-container .down[data-v-6d11d207]::after {
top: -20px;
left: 0;
}
.member-control-container .more-container .up[data-v-6d11d207] {
right: 0;
bottom: calc(100% + 15px);
}
.member-control-container .more-container .up[data-v-6d11d207]::before {
right: 20px;
bottom: -20px;
transform: rotate(180deg);
}
.member-control-container .more-container .up[data-v-6d11d207]::after {
bottom: -20px;
left: 0;
}
.dialog-content[data-v-6d11d207] {
display: flex;
align-items: center;
}
.dialog-content .dialog-input[data-v-6d11d207] {
flex-grow: 1;
}.member-item-container[data-v-8bb007dc] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 52px;
padding: 0 20px;
}
.member-item-container[data-v-8bb007dc]:hover {
cursor: pointer;
background-color: var(--list-color-hover);
}.member-item-container[data-v-e322ed07] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 52px;
padding: 0 20px;
}
.member-item-container[data-v-e322ed07]:hover {
cursor: pointer;
background-color: var(--list-color-hover);
}.user-list-content[data-v-08292b46] {
flex: 1;
margin-top: 10px;
overflow-y: scroll;
}
.user-list-content[data-v-08292b46]::-webkit-scrollbar {
display: none;
}.apply-on-stage-info[data-v-212549d1] {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 60px;
padding: 0 20px 0 32px;
background-color: var(--bg-color-operate);
}
.apply-on-stage-info .apply-icon[data-v-212549d1] {
color: var(--text-color-secondary);
}
.apply-on-stage-info .apply-info[data-v-212549d1] {
flex: 1;
padding-left: 4px;
font-size: 14px;
font-weight: 400;
color: var(--text-color-secondary);
}
.apply-on-stage-info .apply-check[data-v-212549d1] {
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: var(--text-color-link);
text-align: center;
cursor: pointer;
}.manage-member-bottom[data-v-bfaaa2bf] {
z-index: 1;
display: flex;
justify-content: space-around;
width: 100%;
}
.manage-member-bottom .manage-member-button[data-v-bfaaa2bf] {
padding: 13px 24px;
font-weight: 400;
color: var(--text-color-primary);
background-color: var(--bg-color-function);
border-radius: 10px;
}
.manage-member-bottom .lift-all[data-v-bfaaa2bf] {
color: var(--text-color-error);
}
.more-control-container[data-v-bfaaa2bf] {
position: fixed;
top: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100vw;
height: auto;
background-color: var(--uikit-color-black-8);
}
.more-control-container .more-control-container-main[data-v-bfaaa2bf] {
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
padding: 50px 25px;
padding-bottom: 4vh;
background-color: var(--bg-color-operate);
border-radius: 15px 15px 0 0;
animation-name: popup-bfaaa2bf;
animation-duration: 200ms;
}
@keyframes popup-bfaaa2bf {
from {
transform: scaleY(0);
transform-origin: bottom;
}
to {
transform: scaleY(1);
transform-origin: bottom;
}
}
.more-control-container .user-operate-item[data-v-bfaaa2bf] {
display: flex;
align-items: center;
height: 20px;
color: var(--text-color-primary);
cursor: pointer;
}
.more-control-container .user-operate-item .operate-text[data-v-bfaaa2bf] {
margin-left: 8px;
font-family: "PingFang SC";
font-size: 14px;
font-weight: 400;
line-height: 22px;
white-space: nowrap;
}
.global-setting[data-v-bfaaa2bf] {
display: flex;
justify-content: space-around;
}
.button-bottom[data-v-bfaaa2bf] {
display: flex;
justify-content: center;
width: 80%;
padding: 13px 24px;
font-weight: 400;
color: var(--text-color-secondary);
background-color: var(--bg-color-operate);
border-radius: 10px;
}.more-container[data-v-d26d0200] {
position: relative;
display: flex;
margin-left: 16px;
}
.more-container .more-arrow[data-v-d26d0200] {
margin-left: 2px;
}
.more-container .more-arrow.down[data-v-d26d0200] {
transform: rotate(180deg);
}
.more-container .drop-down[data-v-d26d0200] {
position: absolute;
right: 3px;
bottom: 40px;
z-index: 1;
padding: 8px 7px;
background-color: var(--dropdown-color-default);
border-radius: 8px;
box-shadow: 0 3px 8px var(--uikit-color-black-8), 0 6px 40px var(--uikit-color-black-8);
}
.more-container .drop-down .user-operate-item[data-v-d26d0200] {
display: flex;
align-items: center;
height: 20px;
margin: 5px 7px;
color: var(--text-color-secondary);
cursor: pointer;
}
.more-container .drop-down .user-operate-item .operate-text[data-v-d26d0200] {
margin-left: 8px;
font-family: "PingFang SC";
font-size: 14px;
font-weight: 400;
line-height: 22px;
white-space: nowrap;
}
.global-setting[data-v-d26d0200] {
display: flex;
justify-content: space-around;
margin: 20px;
cursor: pointer;
}.user-list-container[data-v-15f85791] {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.user-list-container .user-category-content[data-v-15f85791] {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
padding: 3px 4px;
margin: 16px 20px 0;
cursor: pointer;
background-color: var(--bg-color-input);
border-radius: 20px;
}
.user-list-container .user-category-content .user-category[data-v-15f85791] {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 20px;
}
.user-list-container .user-category-content .user-category.user-category-active[data-v-15f85791] {
background-color: var(--bg-color-operate);
}
.user-list-container .user-category-content .user-category-title[data-v-15f85791] {
font-size: 14px;
font-weight: 400;
color: var(--text-color-primary);
filter: drop-shadow(0 2px 4px var(--uikit-color-black-8)) drop-shadow(0 6px 10px var(--uikit-color-black-8)) drop-shadow(0 3px 14px var(--uikit-color-black-8));
border-radius: 20px;
transform: translateX(4px);
}
.user-list-container .global-setting[data-v-15f85791] {
display: flex;
justify-content: space-around;
margin: 20px 0;
cursor: pointer;
}
.user-list-container .button-bottom[data-v-15f85791] {
width: 80%;
}
.cancel-button[data-v-15f85791] {
margin-left: 12px;
}.slider[data-v-88ec7d41] {
position: relative;
width: 160px;
height: 3px;
background-color: var(--uikit-color-white-2);
cursor: pointer;
}
.slider-track[data-v-88ec7d41] {
position: absolute;
height: 100%;
background-color: var(--text-color-link);
}
.slider-thumb[data-v-88ec7d41] {
position: absolute;
top: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: box-shadow 0.2s;
cursor: pointer;
background-color: var(--uikit-color-white-1);
}
.slider-thumb-active[data-v-88ec7d41] {
box-shadow: 0 4px 8px var(--uikit-color-black-5);
}
.slider-thumb-disabled[data-v-88ec7d41] {
background-color: var(--uikit-color-gray-light-5);
cursor: not-allowed;
}.free-beauty .beauty-dialog {
width: 600px;
}.free-beauty .free-beauty-container[data-v-f044dd42] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 600px;
}
.free-beauty .test-preview[data-v-f044dd42] {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 310px;
width: 100%;
overflow: hidden;
border-radius: 8px;
background-color: var(--uikit-color-black-1);
}
.free-beauty .reset[data-v-f044dd42],
.free-beauty .compare[data-v-f044dd42],
.free-beauty .degree[data-v-f044dd42] {
position: absolute;
bottom: 8px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 4px 12px;
cursor: pointer;
border-radius: 6px;
color: var(--uikit-color-white-1);
background-color: var(--uikit-color-black-5);
}
.free-beauty .reset .text[data-v-f044dd42],
.free-beauty .compare .text[data-v-f044dd42],
.free-beauty .degree .text[data-v-f044dd42] {
margin-left: 4px;
}
.free-beauty .degree[data-v-f044dd42] {
left: 50%;
cursor: default;
transform: translateX(-50%);
}
.free-beauty .degree .slider[data-v-f044dd42] {
margin-left: 12px;
}
.free-beauty .degree .text-value[data-v-f044dd42] {
width: 20px;
margin-left: 10px;
}
.free-beauty .reset[data-v-f044dd42] {
left: 8px;
}
.free-beauty .compare[data-v-f044dd42] {
right: 8px;
}
.free-beauty .setting[data-v-f044dd42] {
display: flex;
flex-direction: column;
align-items: