4214 lines
86 KiB
CSS
4214 lines
86 KiB
CSS
.avatar-console-page {
|
|
--avatar-console-ink: var(--fg-body);
|
|
--avatar-console-muted: var(--fg-muted);
|
|
--avatar-console-faint: var(--bg-inset);
|
|
--avatar-console-border: var(--border-weak);
|
|
--avatar-console-purple: var(--accent);
|
|
--avatar-console-purple-soft: var(--accent-muted, rgba(var(--accent-rgb), 0.13));
|
|
--avatar-console-panel: var(--bg-surface, var(--bg-panel));
|
|
--avatar-console-panel-strong: var(--bg-elevated);
|
|
--avatar-console-inset: var(--bg-inset);
|
|
--avatar-console-hover: var(--bg-hover);
|
|
--avatar-console-line: var(--border-subtle);
|
|
display: grid;
|
|
grid-template-columns: 228px minmax(0, 1fr);
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--bg-base);
|
|
color: var(--avatar-console-ink);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.avatar-console-sidebar {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
padding: 24px 16px 28px;
|
|
border-right: 1px solid var(--avatar-console-border);
|
|
background: var(--avatar-console-panel);
|
|
}
|
|
|
|
.avatar-console-brand,
|
|
.avatar-console-create,
|
|
.avatar-console-nav button,
|
|
.avatar-console-api,
|
|
.avatar-console-titlebar button,
|
|
.avatar-console-explore-hero button,
|
|
.avatar-console-video-hero button,
|
|
.avatar-console-chat-hero button,
|
|
.avatar-console-live-hero button,
|
|
.avatar-console-list-head button,
|
|
.avatar-console-filter-line button,
|
|
.avatar-console-catalog-filters button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-console-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 38px;
|
|
padding: 0 4px;
|
|
color: var(--avatar-console-purple);
|
|
text-align: left;
|
|
}
|
|
|
|
.avatar-console-brand__mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: transparent;
|
|
color: var(--avatar-console-purple);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.avatar-console-brand strong {
|
|
font-size: 17px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-console-create {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
min-height: 34px;
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
box-shadow: none;
|
|
font-size: 14px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-console-nav-group {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.avatar-console-nav-group > span {
|
|
padding: 0 8px;
|
|
color: var(--fg-soft);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-console-nav {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.avatar-console-nav button,
|
|
.avatar-console-api {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
min-height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-xs);
|
|
color: var(--avatar-console-ink);
|
|
font-size: 15px;
|
|
font-weight: 850;
|
|
text-align: left;
|
|
transition: border-color var(--transition-fast, 140ms ease), background var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
|
|
}
|
|
|
|
.avatar-console-nav button .anticon,
|
|
.avatar-console-api .anticon {
|
|
color: var(--avatar-console-muted);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.avatar-console-nav button:hover,
|
|
.avatar-console-nav button.is-selected {
|
|
border-color: var(--avatar-console-line);
|
|
background: var(--avatar-console-hover);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-console-nav button:hover .anticon,
|
|
.avatar-console-nav button.is-selected .anticon {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-console-api {
|
|
margin-top: auto;
|
|
align-self: stretch;
|
|
justify-content: center;
|
|
min-height: 36px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
}
|
|
|
|
.avatar-console-main {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) 32px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background: var(--bg-base);
|
|
}
|
|
|
|
.avatar-console-scroll {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 18px 32px 72px;
|
|
scrollbar-color: rgba(var(--accent-rgb), 0.34) transparent;
|
|
}
|
|
|
|
.avatar-console-view {
|
|
min-width: 0;
|
|
}
|
|
|
|
.avatar-console-view h1,
|
|
.avatar-console-view h2,
|
|
.avatar-console-view p {
|
|
margin: 0;
|
|
}
|
|
|
|
.avatar-console-explore-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.48fr);
|
|
gap: 28px;
|
|
min-height: 264px;
|
|
padding: 46px 36px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel-strong);
|
|
color: var(--avatar-console-ink);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-console-explore-hero h1,
|
|
.avatar-console-video-hero h1,
|
|
.avatar-console-chat-hero h1,
|
|
.avatar-console-live-hero h1 {
|
|
color: inherit;
|
|
font-size: 30px;
|
|
font-weight: 950;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.avatar-console-explore-hero p,
|
|
.avatar-console-video-hero p,
|
|
.avatar-console-chat-hero p,
|
|
.avatar-console-live-hero p {
|
|
margin-top: 12px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 16px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.avatar-console-explore-hero button,
|
|
.avatar-console-video-hero button,
|
|
.avatar-console-chat-hero button,
|
|
.avatar-console-live-hero button,
|
|
.avatar-console-titlebar > button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
margin-top: 66px;
|
|
padding: 0 16px;
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-purple);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-console-hero-person {
|
|
position: relative;
|
|
min-height: 190px;
|
|
}
|
|
|
|
.avatar-console-hero-person .avatar-console-portrait {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: -72px;
|
|
}
|
|
|
|
.avatar-console-hero-bubble {
|
|
position: absolute;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: 999px;
|
|
box-shadow: var(--shadow-tight);
|
|
font-weight: 850;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-console-hero-bubble--yellow {
|
|
top: 34px;
|
|
right: 108px;
|
|
padding: 10px 18px;
|
|
background: rgba(216, 176, 75, 0.18);
|
|
color: var(--fg-body);
|
|
transform: rotate(10deg);
|
|
}
|
|
|
|
.avatar-console-hero-bubble--white {
|
|
top: 82px;
|
|
right: 84px;
|
|
padding: 11px 16px;
|
|
background: var(--avatar-console-panel);
|
|
color: var(--avatar-console-ink);
|
|
}
|
|
|
|
.avatar-console-hero-bubble--blue {
|
|
top: 132px;
|
|
right: 112px;
|
|
padding: 10px 18px;
|
|
background: rgba(39, 188, 205, 0.18);
|
|
color: var(--fg-body);
|
|
}
|
|
|
|
.avatar-console-catalog-head,
|
|
.avatar-console-list-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
margin: 32px 0 18px;
|
|
}
|
|
|
|
.avatar-console-catalog-head.is-compact {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.avatar-console-catalog-head > div:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.avatar-console-catalog-head h2,
|
|
.avatar-console-list-head h2 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-catalog-head h2 span {
|
|
color: var(--fg-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.avatar-console-catalog-head > div:first-child button {
|
|
color: var(--avatar-console-muted);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.avatar-console-catalog-filters,
|
|
.avatar-console-list-head > div,
|
|
.avatar-console-filter-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-console-catalog-filters button,
|
|
.avatar-console-filter-line button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.avatar-console-catalog-filters label,
|
|
.avatar-console-list-head label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 220px;
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--fg-soft);
|
|
}
|
|
|
|
.avatar-console-catalog-filters input,
|
|
.avatar-console-list-head input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: var(--avatar-console-ink);
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-console-mosaic {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, minmax(120px, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.avatar-console-mosaic-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 236px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-faint);
|
|
}
|
|
|
|
.avatar-console-mosaic-card > div:last-child:not(.avatar-console-portrait) {
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 12px;
|
|
background: rgb(8 12 11 / 72%);
|
|
color: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-console-mosaic-card strong {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.avatar-console-mosaic-card span {
|
|
font-size: 12px;
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.avatar-console-titlebar {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
|
|
.avatar-console-titlebar h1 {
|
|
color: var(--avatar-console-ink);
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-titlebar nav {
|
|
display: flex;
|
|
gap: 28px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.avatar-console-titlebar nav button {
|
|
color: var(--avatar-console-muted);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.avatar-console-titlebar nav button.is-current {
|
|
color: var(--accent);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-titlebar > button {
|
|
margin-top: 0;
|
|
min-height: 34px;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.avatar-console-filter-line {
|
|
justify-content: flex-end;
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.avatar-console-filter-line--voices {
|
|
margin-top: -8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.avatar-console-empty-state {
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
min-height: calc(100svh - 260px);
|
|
color: var(--avatar-console-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-console-empty-state > div {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 72px;
|
|
height: 72px;
|
|
margin-bottom: 14px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-md);
|
|
background: var(--avatar-console-panel);
|
|
color: var(--accent);
|
|
box-shadow: var(--shadow-tight);
|
|
transform: rotate(18deg);
|
|
}
|
|
|
|
.avatar-console-empty-state > div::after {
|
|
position: absolute;
|
|
right: 9px;
|
|
bottom: -12px;
|
|
width: 54px;
|
|
height: 12px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: 50%;
|
|
background: var(--avatar-console-inset);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-console-empty-state .anticon {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.avatar-console-empty-state strong {
|
|
color: var(--avatar-console-ink);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-empty-state span {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.avatar-console-empty-state--avatar {
|
|
min-height: calc(100svh - 520px);
|
|
}
|
|
|
|
.avatar-console-empty-state--voice {
|
|
min-height: calc(100svh - 270px);
|
|
}
|
|
|
|
.avatar-console-voice-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, minmax(190px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.avatar-console-voice-card {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-height: 68px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-panel);
|
|
box-shadow: none;
|
|
transition:
|
|
border-color 140ms ease,
|
|
background 140ms ease,
|
|
transform 140ms ease;
|
|
}
|
|
|
|
.avatar-console-voice-card:hover {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-console-panel-strong);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.avatar-console-voice-card > span {
|
|
display: block;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-console-voice-card > button {
|
|
position: absolute;
|
|
left: 48px;
|
|
bottom: 17px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: var(--avatar-console-purple);
|
|
color: rgb(255 255 255);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.avatar-console-voice-card div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.avatar-console-voice-card strong {
|
|
color: var(--avatar-console-ink);
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-voice-card em {
|
|
margin-left: 8px;
|
|
padding: 1px 7px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.avatar-console-voice-card p {
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-voice-clone {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 28px;
|
|
background: rgb(0 0 0 / 58%);
|
|
}
|
|
|
|
.avatar-voice-clone__panel {
|
|
display: grid;
|
|
grid-template-rows: 64px minmax(0, 1fr) 64px;
|
|
width: min(960px, calc(100vw - 56px));
|
|
height: min(620px, calc(100vh - 56px));
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.avatar-voice-clone__head,
|
|
.avatar-voice-clone__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
min-width: 0;
|
|
padding: 0 28px;
|
|
border-bottom: 1px solid var(--avatar-console-border);
|
|
}
|
|
|
|
.avatar-voice-clone__head h2 {
|
|
margin: 0;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 17px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-voice-clone__head button,
|
|
.avatar-voice-clone__foot button,
|
|
.avatar-voice-clone__select button,
|
|
.avatar-voice-clone__refresh,
|
|
.avatar-voice-clone__record-button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-voice-clone__head button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.avatar-voice-clone__body {
|
|
display: grid;
|
|
grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.avatar-voice-clone__form {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 20px;
|
|
min-width: 0;
|
|
padding: 26px 28px;
|
|
overflow: auto;
|
|
background: var(--avatar-console-panel);
|
|
}
|
|
|
|
.avatar-voice-clone__form fieldset {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.avatar-voice-clone__form legend,
|
|
.avatar-voice-clone__input > span,
|
|
.avatar-voice-clone__select > span,
|
|
.avatar-voice-clone__steps strong {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 9px;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-voice-clone__form fieldset label,
|
|
.avatar-voice-clone__foot label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.avatar-voice-clone input[type="radio"],
|
|
.avatar-voice-clone input[type="checkbox"] {
|
|
position: relative;
|
|
display: inline-grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: 0;
|
|
border: 1px solid var(--avatar-console-line);
|
|
background: var(--avatar-console-inset);
|
|
appearance: none;
|
|
}
|
|
|
|
.avatar-voice-clone input[type="radio"] {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-voice-clone input[type="checkbox"] {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.avatar-voice-clone input[type="radio"]::after,
|
|
.avatar-voice-clone input[type="checkbox"]::after {
|
|
display: block;
|
|
content: "";
|
|
}
|
|
|
|
.avatar-voice-clone input[type="radio"]:checked {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.avatar-voice-clone input[type="radio"]:checked::after {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.avatar-voice-clone input[type="checkbox"]:checked {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
}
|
|
|
|
.avatar-voice-clone input[type="checkbox"]:checked::after {
|
|
width: 6px;
|
|
height: 9px;
|
|
border: solid rgb(255 255 255);
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(42deg);
|
|
}
|
|
|
|
.avatar-voice-clone__input,
|
|
.avatar-voice-clone__select {
|
|
display: block;
|
|
min-width: 0;
|
|
}
|
|
|
|
.avatar-voice-clone__input,
|
|
.avatar-voice-clone__select {
|
|
position: relative;
|
|
}
|
|
|
|
.avatar-voice-clone__input input,
|
|
.avatar-voice-clone__select button {
|
|
width: 100%;
|
|
min-height: 34px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-ink);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.avatar-voice-clone__input input {
|
|
padding: 0 58px 0 12px;
|
|
outline: 0;
|
|
}
|
|
|
|
.avatar-voice-clone__input input::placeholder {
|
|
color: var(--fg-soft);
|
|
}
|
|
|
|
.avatar-voice-clone__input em {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 9px;
|
|
color: var(--fg-soft);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.avatar-voice-clone__select button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.avatar-voice-clone__select > button[aria-expanded="true"] {
|
|
border-color: rgba(var(--accent-rgb), 0.5);
|
|
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.24);
|
|
}
|
|
|
|
.avatar-voice-clone__language-list {
|
|
position: absolute;
|
|
top: calc(100% + 5px);
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 4;
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 6px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-panel-strong);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-voice-clone__language-list button {
|
|
justify-content: flex-start;
|
|
min-height: 32px;
|
|
border: 0;
|
|
border-radius: var(--radius-xs);
|
|
background: transparent;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 15px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.avatar-voice-clone__language-list button:hover,
|
|
.avatar-voice-clone__language-list button.is-selected {
|
|
background: var(--avatar-console-hover);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-voice-clone__steps {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-voice-clone__steps div {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--fg-soft);
|
|
font-size: 13px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.avatar-voice-clone__steps b {
|
|
display: inline-grid;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-voice-clone__steps .is-current {
|
|
color: var(--avatar-console-ink);
|
|
}
|
|
|
|
.avatar-voice-clone__steps .is-current b {
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
}
|
|
|
|
.avatar-voice-clone__record {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr auto;
|
|
justify-items: center;
|
|
min-width: 0;
|
|
padding: 32px 48px;
|
|
background: var(--avatar-console-inset);
|
|
}
|
|
|
|
.avatar-voice-clone__script {
|
|
width: min(520px, 100%);
|
|
min-height: 184px;
|
|
padding: 44px 42px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel);
|
|
color: var(--avatar-console-ink);
|
|
font-size: 17px;
|
|
font-weight: 820;
|
|
line-height: 1.72;
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-voice-clone__refresh {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 14px;
|
|
color: var(--accent);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-voice-clone__refresh span {
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid currentColor;
|
|
border-left-color: transparent;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-voice-clone__record-button {
|
|
align-self: end;
|
|
width: 66px;
|
|
height: 66px;
|
|
border: 5px solid rgb(255 229 230);
|
|
border-radius: 50%;
|
|
background: rgb(255 70 74);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-voice-clone__record > span {
|
|
margin-top: 16px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.avatar-voice-clone__foot {
|
|
border-top: 1px solid var(--avatar-console-border);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.avatar-voice-clone__foot label {
|
|
min-width: 0;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.avatar-voice-clone__foot label span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-voice-clone__foot a {
|
|
flex: 0 0 auto;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.avatar-voice-clone__foot > div {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.avatar-voice-clone__foot button {
|
|
min-width: 64px;
|
|
min-height: 34px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-ink);
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-voice-clone__foot button:last-child {
|
|
border-color: var(--avatar-console-border);
|
|
background: var(--bg-hover);
|
|
color: var(--fg-soft);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.avatar-console-video-hero,
|
|
.avatar-console-chat-hero,
|
|
.avatar-console-live-hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(360px, 0.48fr) minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 38px;
|
|
min-height: 350px;
|
|
padding: 36px 40px;
|
|
color: var(--avatar-console-ink);
|
|
}
|
|
|
|
.avatar-console-video-hero p,
|
|
.avatar-console-chat-hero p,
|
|
.avatar-console-live-hero p {
|
|
color: var(--avatar-console-muted);
|
|
}
|
|
|
|
.avatar-console-video-hero button,
|
|
.avatar-console-chat-hero button,
|
|
.avatar-console-live-hero button {
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.avatar-console-live-hero > div:first-child > div {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.avatar-console-live-hero > div:first-child > div button {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.avatar-console-live-hero > div:first-child > div button + button {
|
|
border-color: var(--avatar-console-line);
|
|
background: var(--avatar-console-panel);
|
|
color: var(--avatar-console-ink);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-auth-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 30px;
|
|
}
|
|
|
|
.avatar-auth-modal__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 0;
|
|
background: rgb(0 0 0 / 58%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-auth-modal__panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-rows: 58px minmax(176px, 1fr) 56px;
|
|
width: min(760px, calc(100vw - 60px));
|
|
min-height: 292px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel);
|
|
color: var(--avatar-console-ink);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.avatar-auth-modal__head,
|
|
.avatar-auth-modal__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
padding: 0 22px;
|
|
}
|
|
|
|
.avatar-auth-modal__head {
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--avatar-console-border);
|
|
}
|
|
|
|
.avatar-auth-modal__head h2 {
|
|
margin: 0;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 14px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-auth-modal__head button,
|
|
.avatar-auth-modal__foot button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-auth-modal__head button {
|
|
width: 30px;
|
|
height: 30px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 17px;
|
|
}
|
|
|
|
.avatar-auth-modal__body {
|
|
display: grid;
|
|
grid-template-rows: 44px minmax(0, 1fr);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 18px 22px 0;
|
|
}
|
|
|
|
.avatar-auth-modal__table-head {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr 0.8fr 0.9fr;
|
|
align-items: center;
|
|
min-width: 0;
|
|
padding: 0 14px;
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-muted);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-auth-modal__empty {
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
gap: 8px;
|
|
min-height: 118px;
|
|
color: var(--fg-soft);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.avatar-auth-modal__empty .anticon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 42px;
|
|
height: 34px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-muted);
|
|
font-size: 22px;
|
|
}
|
|
|
|
.avatar-auth-modal__foot {
|
|
border-top: 1px solid var(--avatar-console-border);
|
|
}
|
|
|
|
.avatar-auth-modal__foot button {
|
|
gap: 7px;
|
|
min-height: 34px;
|
|
padding: 0 14px;
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-console-video-showcase,
|
|
.avatar-console-chat-stack,
|
|
.avatar-console-live-stage {
|
|
position: relative;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.avatar-console-video-showcase .avatar-console-portrait--large {
|
|
position: absolute;
|
|
right: 136px;
|
|
top: 0;
|
|
}
|
|
|
|
.avatar-console-video-showcase .avatar-console-portrait--small:nth-child(2) {
|
|
position: absolute;
|
|
right: 346px;
|
|
top: 78px;
|
|
}
|
|
|
|
.avatar-console-video-showcase .avatar-console-portrait--small:nth-child(3) {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 126px;
|
|
}
|
|
|
|
.avatar-console-video-showcase .avatar-console-portrait--tiny {
|
|
position: absolute;
|
|
right: 276px;
|
|
top: 36px;
|
|
}
|
|
|
|
.avatar-console-list-head button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 32px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-ink);
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-console-video-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 306px);
|
|
gap: 22px;
|
|
}
|
|
|
|
.avatar-console-video-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px 10px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-panel);
|
|
}
|
|
|
|
.avatar-console-video-card > div {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
place-items: center;
|
|
height: 172px;
|
|
overflow: hidden;
|
|
background: var(--avatar-console-inset);
|
|
}
|
|
|
|
.avatar-console-video-card strong {
|
|
padding: 8px 0 0 16px;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-video-card span {
|
|
align-self: center;
|
|
justify-self: start;
|
|
margin: 8px 16px 0 0;
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-console-video-card p {
|
|
grid-column: 1 / -1;
|
|
padding: 0 16px 14px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-console-chat-stack .avatar-console-portrait:nth-child(1) {
|
|
position: absolute;
|
|
right: 250px;
|
|
top: 44px;
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
.avatar-console-chat-stack .avatar-console-portrait:nth-child(2) {
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 16px;
|
|
transform: rotate(4deg);
|
|
}
|
|
|
|
.avatar-console-avatar-shelf {
|
|
display: grid;
|
|
grid-template-columns: repeat(9, minmax(150px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.avatar-console-avatar-shelf article {
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-panel);
|
|
}
|
|
|
|
.avatar-console-avatar-shelf strong,
|
|
.avatar-console-avatar-shelf span {
|
|
display: block;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.avatar-console-avatar-shelf strong {
|
|
padding-top: 14px;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-console-avatar-shelf span {
|
|
padding-bottom: 16px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-training-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 30px;
|
|
background: rgb(0 0 0 / 58%);
|
|
}
|
|
|
|
.avatar-training-modal__panel {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
width: min(940px, calc(100vw - 60px));
|
|
min-height: 560px;
|
|
padding: 36px 48px 28px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.avatar-training-modal__close,
|
|
.avatar-training-modal__actions button,
|
|
.avatar-training-scenario {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-training-modal__close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.avatar-training-modal__head h2 {
|
|
margin: 0;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 20px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-training-modal__head p {
|
|
margin: 7px 0 0;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 14px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.avatar-training-scenarios {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
align-items: stretch;
|
|
gap: 14px;
|
|
margin-top: 44px;
|
|
}
|
|
|
|
.avatar-training-scenario {
|
|
display: grid;
|
|
grid-template-rows: 252px auto auto;
|
|
min-width: 0;
|
|
min-height: 366px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel);
|
|
text-align: left;
|
|
}
|
|
|
|
.avatar-training-scenario.is-selected {
|
|
border-color: rgba(var(--accent-rgb), 0.5);
|
|
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.26);
|
|
}
|
|
|
|
.avatar-training-scenario__visual {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
background: rgb(207 224 255);
|
|
}
|
|
|
|
.avatar-training-scenario--chat .avatar-training-scenario__visual {
|
|
background: rgb(253 237 113);
|
|
}
|
|
|
|
.avatar-training-scenario--live .avatar-training-scenario__visual {
|
|
background: rgb(165 148 255);
|
|
}
|
|
|
|
.avatar-training-scenario__visual i {
|
|
position: absolute;
|
|
right: 28px;
|
|
bottom: 0;
|
|
width: 98px;
|
|
height: 190px;
|
|
border: 8px solid rgb(255 255 255 / 92%);
|
|
border-bottom: 0;
|
|
border-radius: 10px 10px 0 0;
|
|
background: rgb(237 239 245);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-training-scenario--chat .avatar-training-scenario__visual i {
|
|
right: 42px;
|
|
width: 118px;
|
|
background: rgb(79 105 84);
|
|
}
|
|
|
|
.avatar-training-scenario--live .avatar-training-scenario__visual i {
|
|
right: 40px;
|
|
background: rgb(255 219 217);
|
|
}
|
|
|
|
.avatar-training-scenario__visual b,
|
|
.avatar-training-scenario__visual em {
|
|
position: absolute;
|
|
display: block;
|
|
border: 1px solid rgb(255 255 255 / 74%);
|
|
border-radius: 8px;
|
|
background: rgb(255 255 255 / 72%);
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.avatar-training-scenario__visual b {
|
|
left: 22px;
|
|
bottom: 54px;
|
|
width: 128px;
|
|
height: 56px;
|
|
}
|
|
|
|
.avatar-training-scenario__visual em {
|
|
right: 12px;
|
|
bottom: 80px;
|
|
width: 104px;
|
|
height: 34px;
|
|
}
|
|
|
|
.avatar-training-scenario--live .avatar-training-scenario__visual b {
|
|
top: 22px;
|
|
left: 18px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
16px 0 0 rgb(255 255 255 / 72%),
|
|
32px 0 0 rgb(255 255 255 / 72%);
|
|
}
|
|
|
|
.avatar-training-scenario--live .avatar-training-scenario__visual em {
|
|
top: 24px;
|
|
right: 26px;
|
|
bottom: auto;
|
|
width: 56px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.avatar-training-scenario > strong {
|
|
padding: 24px 20px 0;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 16px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-training-scenario > span:last-child {
|
|
padding: 10px 20px 22px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.avatar-training-modal__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.avatar-training-modal__actions button {
|
|
min-width: 70px;
|
|
min-height: 34px;
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-training-modal__actions button:first-child:not(:only-child) {
|
|
border-color: var(--avatar-console-line);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-ink);
|
|
}
|
|
|
|
.avatar-training-modal__actions button:disabled {
|
|
border-color: var(--avatar-console-border);
|
|
background: var(--bg-hover);
|
|
color: var(--fg-soft);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.avatar-training-next-step {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 0.9fr) minmax(260px, 1fr);
|
|
align-items: stretch;
|
|
gap: 18px;
|
|
margin-top: 44px;
|
|
}
|
|
|
|
.avatar-training-upload,
|
|
.avatar-training-guides {
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 12px;
|
|
min-height: 260px;
|
|
padding: 28px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-muted);
|
|
}
|
|
|
|
.avatar-training-upload {
|
|
justify-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-training-upload .anticon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 54px;
|
|
height: 54px;
|
|
border: 1px dashed rgba(var(--accent-rgb), 0.5);
|
|
border-radius: 50%;
|
|
color: var(--accent);
|
|
font-size: 22px;
|
|
}
|
|
|
|
.avatar-training-upload strong,
|
|
.avatar-training-guides strong {
|
|
color: var(--avatar-console-ink);
|
|
font-size: 16px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-training-upload span,
|
|
.avatar-training-guides span {
|
|
color: var(--avatar-console-muted);
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.avatar-console-live-stage {
|
|
min-height: 520px;
|
|
}
|
|
|
|
.avatar-console-live-window {
|
|
position: absolute;
|
|
right: 210px;
|
|
top: 0;
|
|
width: 530px;
|
|
height: 520px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-inset);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-console-live-window > span {
|
|
position: absolute;
|
|
top: 11px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--avatar-console-panel);
|
|
}
|
|
|
|
.avatar-console-live-window > span:nth-child(1) {
|
|
left: 20px;
|
|
}
|
|
|
|
.avatar-console-live-window > span:nth-child(2) {
|
|
left: 36px;
|
|
}
|
|
|
|
.avatar-console-live-window > span:nth-child(3) {
|
|
left: 52px;
|
|
}
|
|
|
|
.avatar-console-live-window .avatar-console-portrait {
|
|
position: absolute;
|
|
right: 72px;
|
|
bottom: -20px;
|
|
}
|
|
|
|
.avatar-console-live-window em,
|
|
.avatar-console-live-window strong {
|
|
position: absolute;
|
|
top: 16px;
|
|
padding: 5px 10px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-console-panel);
|
|
color: var(--avatar-console-purple);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.avatar-console-live-window em {
|
|
right: 80px;
|
|
}
|
|
|
|
.avatar-console-live-window strong {
|
|
right: 20px;
|
|
}
|
|
|
|
.avatar-console-live-card {
|
|
position: absolute;
|
|
z-index: 2;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in srgb, var(--avatar-console-panel) 88%, transparent);
|
|
box-shadow: var(--shadow-tight);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.avatar-console-live-card--script {
|
|
left: 10px;
|
|
bottom: 60px;
|
|
width: 430px;
|
|
padding: 34px 38px;
|
|
}
|
|
|
|
.avatar-console-live-card--room {
|
|
right: 0;
|
|
bottom: 22px;
|
|
width: 360px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.avatar-console-live-card b {
|
|
display: block;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 18px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-console-live-card p {
|
|
margin-top: 18px;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 17px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.avatar-console-live-card--room div {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.avatar-console-live-card--room span {
|
|
display: block;
|
|
height: 112px;
|
|
border-radius: 6px;
|
|
background: rgb(238 234 227);
|
|
}
|
|
|
|
.avatar-console-live-card--room span:nth-child(2) {
|
|
background: rgb(244 244 243);
|
|
}
|
|
|
|
.avatar-console-live-card--room span:nth-child(3) {
|
|
border: 1px solid var(--avatar-console-purple);
|
|
background: rgb(245 250 248);
|
|
}
|
|
|
|
.avatar-console-create-card {
|
|
display: grid;
|
|
place-items: center;
|
|
gap: 12px;
|
|
width: 186px;
|
|
height: 248px;
|
|
border: 1px dashed rgba(var(--accent-rgb), 0.36);
|
|
border-radius: 14px;
|
|
background: var(--avatar-console-inset);
|
|
color: var(--avatar-console-purple);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-console-create-card .anticon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 1px solid currentColor;
|
|
border-radius: 50%;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.avatar-console-portrait {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: end center;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.avatar-console-portrait > div {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 11%;
|
|
width: 42%;
|
|
height: 54%;
|
|
border-radius: 42% 42% 14% 14%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.avatar-console-portrait > span:nth-of-type(1) {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 24%;
|
|
width: 28%;
|
|
height: 24%;
|
|
border-radius: 50%;
|
|
background: rgb(255 231 218);
|
|
box-shadow: 0 -8px 0 rgb(45 44 47);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.avatar-console-portrait > span:nth-of-type(2) {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 44%;
|
|
width: 34%;
|
|
height: 5%;
|
|
border-radius: 999px;
|
|
background: rgb(76 70 74 / 18%);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.avatar-console-portrait strong {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-bottom: 18%;
|
|
color: rgb(255 255 255);
|
|
font-size: 22px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-console-portrait--large {
|
|
width: 320px;
|
|
height: 300px;
|
|
}
|
|
|
|
.avatar-console-portrait--medium {
|
|
width: 224px;
|
|
height: 164px;
|
|
border: 5px solid var(--avatar-console-panel);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-console-portrait--small {
|
|
width: 116px;
|
|
height: 82px;
|
|
border: 1px solid var(--avatar-console-border);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-console-portrait--tiny {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 4px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-console-portrait--card {
|
|
width: 96px;
|
|
height: 172px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.avatar-console-portrait--broadcast {
|
|
width: 330px;
|
|
height: 470px;
|
|
}
|
|
|
|
.avatar-console-portrait--mosaic {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.avatar-console-portrait--shelf {
|
|
width: 100%;
|
|
height: 236px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.avatar-console-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 18px;
|
|
min-width: 0;
|
|
color: var(--fg-soft);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-console-foot i {
|
|
width: 1px;
|
|
height: 14px;
|
|
background: var(--avatar-console-line);
|
|
}
|
|
|
|
.avatar-create-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgb(0 0 0 / 58%);
|
|
}
|
|
|
|
.avatar-create-modal__panel {
|
|
position: relative;
|
|
display: grid;
|
|
width: min(638px, calc(100vw - 28px));
|
|
min-height: 542px;
|
|
padding: 34px 26px 20px 36px;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--avatar-console-panel);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.avatar-create-modal__close {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--avatar-console-muted);
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.avatar-create-modal__head h2 {
|
|
margin: 0;
|
|
color: var(--avatar-console-ink);
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-create-modal__head p {
|
|
margin: 8px 0 0;
|
|
color: var(--avatar-console-muted);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.avatar-create-modal__options {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: center;
|
|
gap: 80px;
|
|
padding: 44px 34px 34px;
|
|
}
|
|
|
|
.avatar-create-ratio-card {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 18px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--avatar-console-ink);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 18px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--avatar-console-line);
|
|
border-radius: 15px;
|
|
background: var(--avatar-console-inset);
|
|
background-size: 34px 34px;
|
|
}
|
|
|
|
.avatar-create-ratio-card.is-selected .avatar-create-ratio-card__preview {
|
|
border-color: var(--avatar-console-purple);
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview i {
|
|
display: block;
|
|
border: 1px solid var(--avatar-console-purple);
|
|
border-radius: 4px;
|
|
background: rgba(var(--accent-rgb), 0.24);
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview--wide i {
|
|
width: 158px;
|
|
height: 86px;
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview--tall i {
|
|
width: 86px;
|
|
height: 156px;
|
|
background: var(--avatar-console-panel);
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview em {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 36px;
|
|
height: 17px;
|
|
padding: 0 7px;
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview--wide em {
|
|
right: 27px;
|
|
bottom: 60px;
|
|
background: var(--avatar-console-panel);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview--tall em {
|
|
top: 28px;
|
|
right: 62px;
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview .anticon {
|
|
position: absolute;
|
|
color: var(--accent);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview--wide .anticon {
|
|
left: 30px;
|
|
bottom: 64px;
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
}
|
|
|
|
.avatar-create-ratio-card__preview--tall .anticon {
|
|
right: 62px;
|
|
bottom: 34px;
|
|
}
|
|
|
|
.avatar-create-modal__submit {
|
|
align-self: end;
|
|
justify-self: end;
|
|
min-width: 88px;
|
|
min-height: 32px;
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-editor-page {
|
|
display: grid;
|
|
grid-template-columns: 56px 432px minmax(0, 1fr);
|
|
grid-template-rows: 56px minmax(0, 1fr) 196px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: rgb(255 255 255);
|
|
color: rgb(38 45 74);
|
|
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
|
|
}
|
|
|
|
.avatar-editor-topbar {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
border-bottom: 1px solid rgb(236 238 246);
|
|
background: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-title,
|
|
.avatar-editor-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.avatar-editor-title button,
|
|
.avatar-editor-actions button,
|
|
.avatar-editor-rail button,
|
|
.avatar-editor-speaker button,
|
|
.avatar-editor-script__tools button,
|
|
.avatar-editor-undo button,
|
|
.avatar-editor-layer,
|
|
.avatar-editor-play button,
|
|
.avatar-editor-clip button,
|
|
.avatar-editor-add {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-editor-title button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid rgb(230 233 244);
|
|
border-radius: 50%;
|
|
color: rgb(71 78 109);
|
|
}
|
|
|
|
.avatar-editor-title strong {
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-editor-title span {
|
|
color: rgb(164 171 192);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-editor-actions button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
min-height: 28px;
|
|
padding: 0 14px;
|
|
border: 1px solid rgb(230 233 244);
|
|
border-radius: 6px;
|
|
background: rgb(255 255 255);
|
|
color: rgb(64 70 101);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-actions button:last-child {
|
|
border-color: rgb(75 76 226);
|
|
background: rgb(75 76 226);
|
|
color: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-workspace {
|
|
display: contents;
|
|
}
|
|
|
|
.avatar-editor-rail {
|
|
grid-column: 1;
|
|
grid-row: 2 / 4;
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 8px;
|
|
padding-top: 20px;
|
|
border-right: 1px solid rgb(238 240 247);
|
|
background: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-rail button {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 5px;
|
|
min-height: 48px;
|
|
color: rgb(146 154 180);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-editor-rail button.is-active {
|
|
border-radius: 7px;
|
|
background: rgb(239 239 255);
|
|
color: rgb(75 76 226);
|
|
}
|
|
|
|
.avatar-editor-script {
|
|
grid-column: 2;
|
|
grid-row: 2 / 4;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
|
|
gap: 13px;
|
|
min-width: 0;
|
|
padding: 22px 24px;
|
|
border-right: 1px solid rgb(238 240 247);
|
|
background: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-script__head,
|
|
.avatar-editor-speaker,
|
|
.avatar-editor-script__tools {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar-editor-script__head {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.avatar-editor-script__head h2 {
|
|
margin: 0;
|
|
color: rgb(38 45 74);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-editor-speaker {
|
|
gap: 8px;
|
|
color: rgb(67 73 103);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-speaker b {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: rgb(79 86 229);
|
|
color: rgb(255 255 255);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-editor-speaker > span {
|
|
display: block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: rgb(245 226 213);
|
|
}
|
|
|
|
.avatar-editor-speaker button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.avatar-editor-script textarea {
|
|
width: 100%;
|
|
min-height: 76px;
|
|
padding: 13px 28px;
|
|
border: 0;
|
|
border-bottom: 1px solid rgb(238 240 247);
|
|
outline: 0;
|
|
resize: none;
|
|
background: rgb(255 255 255);
|
|
color: rgb(48 54 82);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.avatar-editor-script textarea::placeholder,
|
|
.avatar-editor-script__count {
|
|
color: rgb(170 177 198);
|
|
}
|
|
|
|
.avatar-editor-script__count {
|
|
justify-self: end;
|
|
margin-top: -18px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-editor-script__tools {
|
|
justify-content: center;
|
|
gap: 16px;
|
|
color: rgb(93 99 241);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-inspector {
|
|
align-content: start;
|
|
overflow: auto;
|
|
}
|
|
|
|
.avatar-editor-picker-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.avatar-editor-picker-head h2 {
|
|
margin: 0;
|
|
color: rgb(34 41 71);
|
|
font-size: 16px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-editor-picker-head > button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: rgb(50 57 91);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-search-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid rgb(229 232 244);
|
|
border-radius: 6px;
|
|
background: rgb(255 255 255);
|
|
color: rgb(153 161 186);
|
|
}
|
|
|
|
.avatar-editor-search-field input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
color: rgb(37 44 74);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.avatar-editor-avatar-pick-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-editor-avatar-pick {
|
|
position: relative;
|
|
height: 140px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border: 1px solid rgb(230 233 244);
|
|
border-radius: 7px;
|
|
background: rgb(247 248 252);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-editor-avatar-pick.is-selected {
|
|
border-color: rgb(87 93 245);
|
|
box-shadow: inset 0 0 0 1px rgb(87 93 245);
|
|
}
|
|
|
|
.avatar-editor-avatar-pick > i,
|
|
.avatar-editor-background-tile > i {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 4px solid rgb(87 93 245);
|
|
border-radius: 50%;
|
|
background: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: rgb(78 86 116);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch label span {
|
|
position: relative;
|
|
width: 34px;
|
|
height: 20px;
|
|
border-radius: 999px;
|
|
background: rgb(231 235 247);
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch label span::after {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: rgb(255 255 255);
|
|
box-shadow: 0 2px 6px rgb(128 137 166 / 28%);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-editor-subtitle-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-editor-subtitle-style {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 74px;
|
|
border: 1px solid rgb(230 233 244);
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-editor-subtitle-style span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 24px;
|
|
padding: 0 6px;
|
|
color: rgb(255 255 255);
|
|
font-size: 16px;
|
|
font-weight: 950;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-subtitle-style.is-blue span {
|
|
background: rgb(0 84 210);
|
|
}
|
|
|
|
.avatar-editor-subtitle-style.is-orange span {
|
|
background: rgb(252 167 52);
|
|
color: rgb(0 0 0);
|
|
}
|
|
|
|
.avatar-editor-subtitle-style.is-pill span {
|
|
padding: 0 16px;
|
|
border-radius: 999px;
|
|
background: rgb(32 31 72);
|
|
}
|
|
|
|
.avatar-editor-subtitle-style.is-underline span {
|
|
border-bottom: 4px solid rgb(91 96 240);
|
|
color: rgb(0 0 0);
|
|
}
|
|
|
|
.avatar-editor-subtitle-style.is-solid span {
|
|
background: rgb(88 83 238);
|
|
}
|
|
|
|
.avatar-editor-subtitle-style.is-black span {
|
|
background: rgb(4 10 14);
|
|
}
|
|
|
|
.avatar-editor-background-palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-editor-background-tile {
|
|
position: relative;
|
|
height: 118px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
border: 1px solid rgb(229 232 244);
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-editor-background-tile.is-selected {
|
|
border-color: rgb(87 93 245);
|
|
box-shadow: inset 0 0 0 1px rgb(87 93 245);
|
|
}
|
|
|
|
.avatar-editor-background-tile span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-1 span {
|
|
background: rgb(238 241 243);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-2 span {
|
|
background: rgb(198 218 222);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-3 span {
|
|
background: rgb(255 247 241);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-4 span {
|
|
background: rgb(220 246 249);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-5 span {
|
|
background: rgb(3 33 101);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-6 span {
|
|
background: rgb(205 225 226);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-7 span {
|
|
background: rgb(7 76 130);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-8 span {
|
|
background: rgb(225 215 200);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-9 span {
|
|
background: rgb(211 228 224);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-10 span {
|
|
background: rgb(246 211 218);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-11 span {
|
|
background: rgb(230 220 196);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-12 span {
|
|
background: rgb(235 216 190);
|
|
background-size: auto, 30px 100%, auto;
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-13 span {
|
|
background: rgb(34 170 255);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-14 span {
|
|
background: rgb(246 246 246);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-15 span {
|
|
background: rgb(229 223 211);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-16 span {
|
|
background: rgb(226 226 226);
|
|
}
|
|
|
|
.avatar-editor-background-tile.bg-17 span {
|
|
background: rgb(177 195 203);
|
|
}
|
|
|
|
.avatar-editor-sticker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar-editor-sticker-card {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 148px;
|
|
border: 1px solid rgb(229 232 244);
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual {
|
|
position: relative;
|
|
display: block;
|
|
width: 98px;
|
|
height: 98px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual i {
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-flower i:nth-child(1),
|
|
.avatar-editor-sticker-visual.is-flower i:nth-child(2) {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
background: rgb(218 244 249);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-flower i:nth-child(1) {
|
|
top: 7px;
|
|
left: 12px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-flower i:nth-child(2) {
|
|
top: 25px;
|
|
right: 4px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-flower i:nth-child(3) {
|
|
right: 30px;
|
|
bottom: 4px;
|
|
width: 38px;
|
|
height: 46px;
|
|
border-radius: 0 0 20px 20px;
|
|
background: rgb(120 171 118);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cone i:nth-child(1) {
|
|
top: 6px;
|
|
left: 22px;
|
|
width: 54px;
|
|
height: 76px;
|
|
clip-path: polygon(50% 0, 100% 88%, 0 88%);
|
|
background: rgb(255 151 92);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cone i:nth-child(2),
|
|
.avatar-editor-sticker-visual.is-cone i:nth-child(3) {
|
|
bottom: 6px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: rgb(171 64 44);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cone i:nth-child(2) {
|
|
left: 28px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cone i:nth-child(3) {
|
|
right: 28px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-globe {
|
|
border-radius: 50%;
|
|
background: rgb(112 221 232);
|
|
box-shadow: inset -8px -10px 0 rgb(57 102 190 / 16%);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-globe i:nth-child(1) {
|
|
left: 36px;
|
|
bottom: -16px;
|
|
width: 26px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
background: rgb(154 204 91);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-headset i:nth-child(1) {
|
|
inset: 10px 16px 22px;
|
|
border: 12px solid rgb(201 171 165);
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
transform: rotate(-12deg);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-headset i:nth-child(2),
|
|
.avatar-editor-sticker-visual.is-headset i:nth-child(3) {
|
|
bottom: 14px;
|
|
width: 36px;
|
|
height: 48px;
|
|
border-radius: 18px;
|
|
background: rgb(138 229 224);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-headset i:nth-child(2) {
|
|
left: 15px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-headset i:nth-child(3) {
|
|
right: 10px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-board,
|
|
.avatar-editor-sticker-visual.is-chart {
|
|
border-radius: 12px;
|
|
background: rgb(70 176 235);
|
|
box-shadow: inset 0 -8px 0 rgb(32 91 168 / 16%);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-chart {
|
|
background: rgb(255 222 121);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-board i,
|
|
.avatar-editor-sticker-visual.is-chart i {
|
|
border-radius: 5px;
|
|
background: rgb(255 255 255 / 82%);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-board i:nth-child(1),
|
|
.avatar-editor-sticker-visual.is-chart i:nth-child(1) {
|
|
top: 18px;
|
|
left: 18px;
|
|
width: 24px;
|
|
height: 18px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-board i:nth-child(2),
|
|
.avatar-editor-sticker-visual.is-chart i:nth-child(2) {
|
|
top: 42px;
|
|
left: 18px;
|
|
width: 58px;
|
|
height: 12px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-board i:nth-child(3),
|
|
.avatar-editor-sticker-visual.is-chart i:nth-child(3) {
|
|
right: 18px;
|
|
bottom: 18px;
|
|
width: 28px;
|
|
height: 20px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cap i:nth-child(1) {
|
|
top: 34px;
|
|
left: 8px;
|
|
width: 84px;
|
|
height: 34px;
|
|
border-radius: 80% 80% 12px 12px;
|
|
background: rgb(232 67 60);
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cap i:nth-child(2) {
|
|
right: 5px;
|
|
bottom: 20px;
|
|
width: 46px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: rgb(97 54 48);
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-cap i:nth-child(3) {
|
|
right: 8px;
|
|
bottom: 8px;
|
|
width: 3px;
|
|
height: 34px;
|
|
background: rgb(131 81 38);
|
|
box-shadow: 7px 24px 0 4px rgb(194 131 51);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-desk i:nth-child(1) {
|
|
left: 8px;
|
|
right: 8px;
|
|
bottom: 32px;
|
|
height: 18px;
|
|
border-radius: 12px;
|
|
background: rgb(169 222 219);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-desk i:nth-child(2),
|
|
.avatar-editor-sticker-visual.is-desk i:nth-child(3) {
|
|
bottom: 4px;
|
|
width: 5px;
|
|
height: 32px;
|
|
border-radius: 999px;
|
|
background: rgb(139 101 54);
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-desk i:nth-child(2) {
|
|
left: 22px;
|
|
}
|
|
|
|
.avatar-editor-sticker-visual.is-desk i:nth-child(3) {
|
|
right: 22px;
|
|
}
|
|
|
|
.avatar-editor-avatar-card {
|
|
display: grid;
|
|
grid-template-columns: 58px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 78px;
|
|
padding: 10px;
|
|
border: 1px solid rgb(232 235 246);
|
|
border-radius: 8px;
|
|
background: rgb(249 250 254);
|
|
}
|
|
|
|
.avatar-editor-avatar-card .avatar-console-portrait--clip {
|
|
width: 50px;
|
|
height: 58px;
|
|
}
|
|
|
|
.avatar-editor-avatar-card div {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
}
|
|
|
|
.avatar-editor-avatar-card strong {
|
|
overflow: hidden;
|
|
color: rgb(38 45 74);
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-avatar-card span {
|
|
color: rgb(142 150 174);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-editor-avatar-card button,
|
|
.avatar-editor-option-grid button,
|
|
.avatar-editor-upload-card,
|
|
.avatar-editor-background-grid button {
|
|
border: 1px solid rgb(229 232 244);
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255);
|
|
color: rgb(62 69 101);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-avatar-card button {
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
color: rgb(91 96 240);
|
|
}
|
|
|
|
.avatar-editor-option-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.avatar-editor-option-grid button {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.avatar-editor-option-grid button.is-selected,
|
|
.avatar-editor-background-grid button.is-selected {
|
|
border-color: rgb(93 99 241);
|
|
background: rgb(242 242 255);
|
|
color: rgb(78 83 225);
|
|
}
|
|
|
|
.avatar-editor-toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 42px;
|
|
padding: 0 12px;
|
|
border: 1px solid rgb(232 235 246);
|
|
border-radius: 8px;
|
|
background: rgb(249 250 254);
|
|
color: rgb(45 52 82);
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-toggle-row input {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: rgb(91 96 240);
|
|
}
|
|
|
|
.avatar-editor-upload-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 70px;
|
|
border-style: dashed;
|
|
color: rgb(91 96 240);
|
|
}
|
|
|
|
.avatar-editor-background-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.avatar-editor-background-grid button {
|
|
height: 72px;
|
|
overflow: hidden;
|
|
padding: 4px;
|
|
}
|
|
|
|
.avatar-editor-background-grid span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
background: rgb(207 226 227);
|
|
}
|
|
|
|
.avatar-editor-background-grid button:nth-child(2) span {
|
|
background: rgb(218 202 175);
|
|
}
|
|
|
|
.avatar-editor-background-grid button:nth-child(3) span {
|
|
background: rgb(232 238 255);
|
|
}
|
|
|
|
.avatar-editor-stage {
|
|
grid-column: 3;
|
|
grid-row: 2;
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: rgb(247 248 252);
|
|
}
|
|
|
|
.avatar-editor-undo {
|
|
position: absolute;
|
|
top: 22px;
|
|
left: 30px;
|
|
z-index: 2;
|
|
display: flex;
|
|
gap: 18px;
|
|
}
|
|
|
|
.avatar-editor-undo button {
|
|
color: rgb(166 173 196);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.avatar-editor-layer {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 20px;
|
|
z-index: 5;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255);
|
|
color: rgb(70 77 108);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.avatar-editor-layer.is-active {
|
|
color: rgb(75 76 226);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-layer-panel {
|
|
position: absolute;
|
|
top: 62px;
|
|
right: 20px;
|
|
z-index: 6;
|
|
display: grid;
|
|
gap: 12px;
|
|
width: 238px;
|
|
padding: 14px;
|
|
border: 1px solid rgb(228 231 244);
|
|
border-radius: 8px;
|
|
background: rgb(255 255 255 / 96%);
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__head strong {
|
|
color: rgb(36 43 73);
|
|
font-size: 14px;
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__head span {
|
|
overflow: hidden;
|
|
color: rgb(134 143 170);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.avatar-editor-layer-row,
|
|
.avatar-editor-layer-panel__actions button,
|
|
.avatar-editor-mini-layers button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.avatar-editor-layer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
padding: 0 10px;
|
|
border: 1px solid rgb(232 235 246);
|
|
border-radius: 7px;
|
|
background: rgb(249 250 254);
|
|
color: rgb(55 63 94);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
text-align: left;
|
|
}
|
|
|
|
.avatar-editor-layer-row.is-selected {
|
|
border-color: rgb(95 101 244);
|
|
background: rgb(242 242 255);
|
|
color: rgb(75 76 226);
|
|
}
|
|
|
|
.avatar-editor-layer-row em {
|
|
color: rgb(150 158 184);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__actions button {
|
|
min-height: 30px;
|
|
border: 1px solid rgb(224 228 243);
|
|
border-radius: 7px;
|
|
background: rgb(255 255 255);
|
|
color: rgb(75 76 226);
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-editor-layer-panel__actions button:disabled {
|
|
cursor: not-allowed;
|
|
color: rgb(174 181 202);
|
|
}
|
|
|
|
.avatar-editor-canvas {
|
|
width: min(73vw, 1500px);
|
|
max-height: calc(100vh - 312px);
|
|
overflow: hidden;
|
|
border: 1px solid rgb(174 176 253);
|
|
background: rgb(205 211 213);
|
|
}
|
|
|
|
.avatar-editor-canvas--landscape {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.avatar-editor-canvas--portrait {
|
|
width: min(380px, 44vw);
|
|
height: min(670px, calc(100vh - 250px));
|
|
aspect-ratio: 9 / 16;
|
|
}
|
|
|
|
.avatar-editor-scene {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
.avatar-editor-scene-layer {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.avatar-editor-scene-layer--solidBackground {
|
|
background: rgb(220 225 225);
|
|
}
|
|
|
|
.avatar-editor-scene-layer--background {
|
|
background: rgb(92 88 82 / 24%);
|
|
background-size: auto, 100% 100%;
|
|
}
|
|
|
|
.avatar-editor-canvas--portrait .avatar-editor-scene-layer--solidBackground {
|
|
background: rgb(218 202 175);
|
|
}
|
|
|
|
.avatar-editor-canvas--portrait .avatar-editor-scene-layer--background {
|
|
background: rgb(196 168 113 / 12%);
|
|
}
|
|
|
|
.avatar-editor-wall-line {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 8%;
|
|
left: 0;
|
|
height: 3px;
|
|
background: rgb(98 91 84 / 44%);
|
|
}
|
|
|
|
.avatar-editor-floor {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 8%;
|
|
background: rgb(188 182 173 / 62%);
|
|
background-size: auto, 58px 100%;
|
|
}
|
|
|
|
.avatar-editor-vase {
|
|
position: absolute;
|
|
left: 8%;
|
|
bottom: 18%;
|
|
width: 7%;
|
|
height: 13%;
|
|
border-radius: 48% 48% 36% 36%;
|
|
background: rgb(238 229 208);
|
|
}
|
|
|
|
.avatar-editor-vase::before {
|
|
position: absolute;
|
|
left: 45%;
|
|
bottom: 82%;
|
|
width: 2px;
|
|
height: 88%;
|
|
background: rgb(125 119 100);
|
|
box-shadow:
|
|
-14px 14px 0 -1px rgb(125 119 100),
|
|
11px 6px 0 -1px rgb(125 119 100);
|
|
content: "";
|
|
transform: rotate(-16deg);
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.avatar-editor-nursery {
|
|
position: absolute;
|
|
right: 6%;
|
|
bottom: 22%;
|
|
width: 22%;
|
|
height: 40%;
|
|
border-radius: 16px;
|
|
background: rgb(222 209 182);
|
|
background-size: auto;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.avatar-editor-plant {
|
|
position: absolute;
|
|
left: 4.2%;
|
|
bottom: 8%;
|
|
width: 11%;
|
|
height: 31%;
|
|
}
|
|
|
|
.avatar-editor-plant::before,
|
|
.avatar-editor-plant::after {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 16%;
|
|
width: 2px;
|
|
height: 74%;
|
|
border-radius: 999px;
|
|
background: rgb(63 88 65);
|
|
content: "";
|
|
transform: rotate(-13deg);
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.avatar-editor-plant::after {
|
|
left: 58%;
|
|
height: 65%;
|
|
transform: rotate(16deg);
|
|
}
|
|
|
|
.avatar-editor-plant {
|
|
background: rgb(64 103 72);
|
|
}
|
|
|
|
.avatar-editor-studio-vase {
|
|
position: absolute;
|
|
bottom: 5.6%;
|
|
border-radius: 48% 48% 44% 44%;
|
|
background: rgb(30 34 36);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-studio-vase--large {
|
|
left: 4.8%;
|
|
width: 6.7%;
|
|
height: 13%;
|
|
}
|
|
|
|
.avatar-editor-studio-vase--small {
|
|
left: 13%;
|
|
width: 4.5%;
|
|
height: 8.5%;
|
|
}
|
|
|
|
.avatar-editor-studio-vase--small::before {
|
|
position: absolute;
|
|
top: -13%;
|
|
left: 35%;
|
|
width: 30%;
|
|
height: 14%;
|
|
border-radius: 4px 4px 0 0;
|
|
background: rgb(43 47 49);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-editor-canvas-watermark {
|
|
position: absolute;
|
|
right: 3%;
|
|
bottom: 3.2%;
|
|
color: rgb(255 255 255 / 46%);
|
|
font-size: clamp(16px, 2.1vw, 34px);
|
|
font-weight: 950;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer {
|
|
position: absolute;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: grab;
|
|
font: inherit;
|
|
touch-action: none;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected {
|
|
border-color: rgb(90 94 255);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected::before,
|
|
.avatar-editor-canvas-layer.is-selected::after {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 1px solid rgb(90 94 255);
|
|
background: rgb(255 255 255);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected::before {
|
|
top: -5px;
|
|
left: -5px;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected::after {
|
|
right: -5px;
|
|
bottom: -5px;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer em {
|
|
position: absolute;
|
|
top: -24px;
|
|
left: 0;
|
|
display: none;
|
|
min-height: 20px;
|
|
padding: 0 8px;
|
|
border-radius: 4px;
|
|
background: rgb(75 76 226);
|
|
color: rgb(255 255 255);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 850;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected em {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer .avatar-console-portrait--editor {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
border-radius: 0;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer--avatar {
|
|
min-width: 220px;
|
|
min-height: 420px;
|
|
}
|
|
|
|
.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--avatar {
|
|
min-width: 128px;
|
|
min-height: 260px;
|
|
}
|
|
|
|
.avatar-editor-figure {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 18px 16px rgb(20 26 32 / 18%));
|
|
}
|
|
|
|
.avatar-editor-figure span {
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
|
|
.avatar-editor-figure__hair {
|
|
top: 5%;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 38%;
|
|
border-radius: 48% 48% 32% 32%;
|
|
background: rgb(45 25 21);
|
|
box-shadow:
|
|
-18px 74px 0 -26px rgb(82 43 29),
|
|
18px 78px 0 -26px rgb(70 38 30);
|
|
}
|
|
|
|
.avatar-editor-figure__head {
|
|
top: 11%;
|
|
left: 37%;
|
|
width: 26%;
|
|
height: 17%;
|
|
border-radius: 44% 44% 48% 48%;
|
|
background: rgb(255 229 214);
|
|
box-shadow:
|
|
-4px 22px 0 -14px rgb(243 193 174),
|
|
4px 22px 0 -14px rgb(243 193 174);
|
|
}
|
|
|
|
.avatar-editor-figure__neck {
|
|
top: 26%;
|
|
left: 45%;
|
|
width: 10%;
|
|
height: 10%;
|
|
border-radius: 0 0 999px 999px;
|
|
background: rgb(233 178 159);
|
|
}
|
|
|
|
.avatar-editor-figure__torso {
|
|
top: 31%;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 40%;
|
|
border-radius: 18% 18% 10% 10%;
|
|
background: rgb(142 10 21);
|
|
box-shadow: inset 0 -18px 0 rgb(103 8 14 / 35%);
|
|
}
|
|
|
|
.avatar-editor-figure__torso::before {
|
|
position: absolute;
|
|
top: -4%;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 12%;
|
|
border-radius: 999px 999px 36% 36%;
|
|
background: rgb(255 255 255);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-editor-figure__pattern {
|
|
left: 27%;
|
|
width: 46%;
|
|
height: 6%;
|
|
background: transparent;
|
|
background-size: 22px 100%;
|
|
}
|
|
|
|
.avatar-editor-figure__pattern--upper {
|
|
top: 44%;
|
|
}
|
|
|
|
.avatar-editor-figure__pattern--lower {
|
|
top: 56%;
|
|
}
|
|
|
|
.avatar-editor-figure__skirt {
|
|
top: 70%;
|
|
left: 30%;
|
|
width: 40%;
|
|
height: 18%;
|
|
clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
|
|
background: rgb(15 17 23);
|
|
}
|
|
|
|
.avatar-editor-figure__arm {
|
|
top: 36%;
|
|
width: 12%;
|
|
height: 45%;
|
|
border-radius: 999px;
|
|
background: rgb(168 16 24);
|
|
}
|
|
|
|
.avatar-editor-figure__arm::after {
|
|
position: absolute;
|
|
right: 10%;
|
|
bottom: -3%;
|
|
left: 10%;
|
|
height: 10%;
|
|
border-radius: 999px;
|
|
background: rgb(255 244 240);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-editor-figure__arm--left {
|
|
left: 18%;
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
.avatar-editor-figure__arm--right {
|
|
right: 18%;
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
.avatar-editor-figure__leg {
|
|
top: 86%;
|
|
width: 8%;
|
|
height: 12%;
|
|
border-radius: 999px 999px 0 0;
|
|
background: rgb(238 184 166);
|
|
}
|
|
|
|
.avatar-editor-figure__leg--left {
|
|
left: 41%;
|
|
}
|
|
|
|
.avatar-editor-figure__leg--right {
|
|
right: 41%;
|
|
}
|
|
|
|
.avatar-editor-sticker-shape {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.avatar-editor-sticker-shape::before {
|
|
position: absolute;
|
|
left: 16%;
|
|
top: 5%;
|
|
width: 70%;
|
|
height: 70%;
|
|
clip-path: polygon(18% 100%, 46% 8%, 95% 100%);
|
|
background: rgb(236 34 47);
|
|
content: "";
|
|
transform: rotate(13deg);
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.avatar-editor-sticker-shape::after {
|
|
position: absolute;
|
|
left: 12%;
|
|
bottom: 18%;
|
|
width: 76%;
|
|
height: 22%;
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255);
|
|
box-shadow: 28px -20px 0 -3px rgb(255 255 255);
|
|
content: "";
|
|
}
|
|
|
|
.avatar-editor-canvas-layer--sticker {
|
|
min-width: 62px;
|
|
min-height: 72px;
|
|
}
|
|
|
|
.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--sticker .avatar-editor-sticker-shape {
|
|
border-radius: 16px;
|
|
background: rgb(222 209 182);
|
|
background-size: auto;
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--sticker .avatar-editor-sticker-shape::before,
|
|
.avatar-editor-canvas--portrait .avatar-editor-canvas-layer--sticker .avatar-editor-sticker-shape::after {
|
|
display: none;
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: calc(100% + 6px);
|
|
z-index: 8;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 38px;
|
|
overflow: hidden;
|
|
border: 1px solid rgb(230 233 244);
|
|
border-radius: 0 7px 7px 0;
|
|
background: rgb(255 255 255);
|
|
box-shadow: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
height: 38px;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-left: 1px solid rgb(232 235 244);
|
|
background: transparent;
|
|
color: rgb(45 53 83);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar button:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar button:hover {
|
|
background: rgb(247 248 255);
|
|
color: rgb(75 76 226);
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar svg {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.avatar-editor-subtitle-preview,
|
|
.avatar-editor-watermark-preview {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: rgb(255 255 255);
|
|
font-weight: 950;
|
|
line-height: 1;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-subtitle-preview {
|
|
border-radius: 999px;
|
|
background: rgb(37 43 89 / 74%);
|
|
font-size: clamp(11px, 1.4vw, 18px);
|
|
}
|
|
|
|
.avatar-editor-watermark-preview {
|
|
position: absolute;
|
|
inset: 0;
|
|
font-size: clamp(13px, 1.6vw, 22px);
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.avatar-editor-selection-readout {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 22px;
|
|
z-index: 4;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255 / 92%);
|
|
color: rgb(132 140 166);
|
|
font-size: 12px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-selection-readout strong {
|
|
color: rgb(64 71 104);
|
|
font-weight: 950;
|
|
}
|
|
|
|
.avatar-editor-timeline {
|
|
grid-column: 3;
|
|
grid-row: 3;
|
|
display: grid;
|
|
grid-template-columns: auto auto minmax(0, 1fr) 40px;
|
|
align-items: center;
|
|
gap: 24px;
|
|
margin-left: 0;
|
|
padding: 24px 18px 24px 64px;
|
|
border-top: 1px solid rgb(235 238 247);
|
|
border-left: 1px solid rgb(235 238 247);
|
|
border-radius: 8px 0 0;
|
|
background: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-play {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.avatar-editor-play button {
|
|
color: rgb(82 88 239);
|
|
font-size: 34px;
|
|
}
|
|
|
|
.avatar-editor-play span {
|
|
color: rgb(160 167 189);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.avatar-editor-clip {
|
|
position: relative;
|
|
width: 214px;
|
|
height: 120px;
|
|
border: 2px solid rgb(110 114 255);
|
|
border-radius: 7px;
|
|
background: rgb(247 248 252);
|
|
}
|
|
|
|
.avatar-editor-clip b {
|
|
position: absolute;
|
|
top: -22px;
|
|
left: -6px;
|
|
color: rgb(100 106 237);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-editor-clip > div {
|
|
position: absolute;
|
|
inset: 4px;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-editor-clip .avatar-console-portrait--clip {
|
|
width: 64px;
|
|
height: 88px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.avatar-editor-clip--landscape > div {
|
|
background: rgb(219 224 224);
|
|
}
|
|
|
|
.avatar-editor-clip--portrait {
|
|
width: 170px;
|
|
}
|
|
|
|
.avatar-editor-clip--portrait > div {
|
|
background: rgb(226 213 190);
|
|
}
|
|
|
|
.avatar-editor-clip em {
|
|
position: absolute;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
background: rgb(104 107 119 / 75%);
|
|
color: rgb(255 255 255);
|
|
font-size: 10px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.avatar-editor-clip > button {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
background: rgb(96 102 117 / 72%);
|
|
color: rgb(255 255 255);
|
|
}
|
|
|
|
.avatar-editor-mini-layers {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
gap: 8px;
|
|
overflow-x: auto;
|
|
padding: 14px 4px;
|
|
}
|
|
|
|
.avatar-editor-mini-layers button {
|
|
flex: 0 0 auto;
|
|
min-height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid rgb(230 233 244);
|
|
border-radius: 999px;
|
|
background: rgb(250 251 255);
|
|
color: rgb(120 129 158);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.avatar-editor-mini-layers button.is-selected {
|
|
border-color: rgb(99 105 244);
|
|
background: rgb(242 242 255);
|
|
color: rgb(75 76 226);
|
|
}
|
|
|
|
.avatar-editor-add {
|
|
grid-column: 4;
|
|
justify-self: end;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 26px;
|
|
height: 120px;
|
|
border: 1px solid rgb(121 126 255);
|
|
border-radius: 8px;
|
|
color: rgb(94 100 241);
|
|
font-size: 20px;
|
|
}
|
|
|
|
.avatar-editor-clip-preview {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-editor-clip-preview .avatar-editor-figure {
|
|
position: absolute;
|
|
right: 23%;
|
|
bottom: -5%;
|
|
width: 33%;
|
|
height: 86%;
|
|
filter: drop-shadow(0 8px 8px rgb(20 26 32 / 18%));
|
|
}
|
|
|
|
.avatar-editor-clip-plant {
|
|
position: absolute;
|
|
left: 6%;
|
|
bottom: 7%;
|
|
width: 18%;
|
|
height: 33%;
|
|
background: rgb(58 100 65);
|
|
}
|
|
|
|
.avatar-editor-clip-plant::before {
|
|
position: absolute;
|
|
left: 52%;
|
|
bottom: 8%;
|
|
width: 1px;
|
|
height: 78%;
|
|
background: rgb(62 85 64);
|
|
box-shadow: 8px 8px 0 rgb(62 85 64);
|
|
content: "";
|
|
transform: rotate(-12deg);
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.avatar-editor-clip-hat {
|
|
position: absolute;
|
|
right: 35%;
|
|
top: 12%;
|
|
z-index: 3;
|
|
width: 13%;
|
|
height: 13%;
|
|
}
|
|
|
|
.avatar-editor-clip-hat::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
clip-path: polygon(18% 100%, 47% 5%, 96% 100%);
|
|
background: rgb(236 34 47);
|
|
content: "";
|
|
transform: rotate(13deg);
|
|
}
|
|
|
|
.avatar-editor-clip-hat::after {
|
|
position: absolute;
|
|
left: 4%;
|
|
bottom: 2%;
|
|
width: 86%;
|
|
height: 26%;
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255);
|
|
box-shadow: 14px -12px 0 -3px rgb(255 255 255);
|
|
content: "";
|
|
}
|
|
|
|
/* Localized digital-human editor skin. Keep layout rules above intact. */
|
|
.avatar-editor-page {
|
|
--avatar-editor-text: var(--fg-body);
|
|
--avatar-editor-muted: var(--fg-muted);
|
|
--avatar-editor-soft: var(--fg-soft);
|
|
--avatar-editor-panel: var(--bg-surface, var(--bg-panel));
|
|
--avatar-editor-panel-strong: var(--bg-elevated);
|
|
--avatar-editor-inset: var(--bg-inset);
|
|
--avatar-editor-hover: var(--bg-hover);
|
|
--avatar-editor-line: var(--border-subtle);
|
|
--avatar-editor-border: var(--border-weak);
|
|
--avatar-editor-accent-soft: var(--accent-muted, rgba(var(--accent-rgb), 0.12));
|
|
background: var(--bg-base);
|
|
color: var(--avatar-editor-text);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.avatar-editor-topbar {
|
|
border-bottom-color: var(--avatar-editor-border);
|
|
background: var(--avatar-editor-panel);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-title > button:not(.avatar-editor-title__name-button) {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-muted);
|
|
}
|
|
|
|
.avatar-editor-title > button:not(.avatar-editor-title__name-button):hover {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-editor-hover);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-title__name-button {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 7px;
|
|
width: auto !important;
|
|
max-width: min(320px, 32vw);
|
|
height: 30px !important;
|
|
min-width: 0;
|
|
padding: 0 8px !important;
|
|
border: 1px solid transparent !important;
|
|
border-radius: var(--radius-xs) !important;
|
|
background: transparent !important;
|
|
color: var(--avatar-editor-text) !important;
|
|
text-align: left;
|
|
}
|
|
|
|
.avatar-editor-title__name-button strong {
|
|
overflow: hidden;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.avatar-editor-title__name-button .anticon {
|
|
flex: 0 0 auto;
|
|
color: var(--avatar-editor-soft);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.avatar-editor-title__name-button:hover {
|
|
border-color: var(--avatar-editor-line) !important;
|
|
background: var(--avatar-editor-inset) !important;
|
|
}
|
|
|
|
.avatar-editor-title__name-button:hover .anticon {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-title__input {
|
|
width: min(260px, 32vw);
|
|
height: 30px;
|
|
min-width: 120px;
|
|
border: 1px solid var(--avatar-editor-line);
|
|
border-radius: var(--radius-xs);
|
|
outline: 0;
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-text);
|
|
padding: 0 10px;
|
|
font: inherit;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.avatar-editor-title__input:focus {
|
|
border-color: rgba(var(--accent-rgb), 0.5);
|
|
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
|
|
}
|
|
|
|
.avatar-editor-title span {
|
|
color: var(--avatar-editor-soft);
|
|
}
|
|
|
|
.avatar-editor-actions button {
|
|
border-color: var(--avatar-editor-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-muted);
|
|
}
|
|
|
|
.avatar-editor-actions button:hover {
|
|
border-color: rgba(var(--accent-rgb), 0.35);
|
|
background: var(--avatar-editor-hover);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-actions button:last-child {
|
|
border-color: rgba(var(--accent-rgb), 0.55);
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-workspace {
|
|
background: var(--bg-base);
|
|
}
|
|
|
|
.avatar-editor-rail {
|
|
border-right-color: var(--avatar-editor-border);
|
|
background: var(--avatar-editor-panel);
|
|
}
|
|
|
|
.avatar-editor-rail button {
|
|
border: 1px solid transparent;
|
|
color: var(--avatar-editor-soft);
|
|
}
|
|
|
|
.avatar-editor-rail button:hover {
|
|
background: var(--avatar-editor-hover);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-rail button.is-active {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-editor-accent-soft);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-script {
|
|
border-right-color: var(--avatar-editor-border);
|
|
background: var(--avatar-editor-panel);
|
|
}
|
|
|
|
.avatar-editor-script__head h2,
|
|
.avatar-editor-picker-head h2,
|
|
.avatar-editor-avatar-card strong,
|
|
.avatar-editor-layer-panel__head strong,
|
|
.avatar-editor-selection-readout strong {
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-script__head > .anticon,
|
|
.avatar-editor-picker-head > button,
|
|
.avatar-editor-speaker,
|
|
.avatar-editor-avatar-card span,
|
|
.avatar-editor-layer-panel__head span,
|
|
.avatar-editor-selection-readout {
|
|
color: var(--avatar-editor-muted);
|
|
}
|
|
|
|
.avatar-editor-speaker b,
|
|
.avatar-editor-avatar-pick > i,
|
|
.avatar-editor-background-tile > i {
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
}
|
|
|
|
.avatar-editor-speaker b {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-script textarea {
|
|
border: 1px solid var(--avatar-editor-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-script textarea::placeholder,
|
|
.avatar-editor-script__count {
|
|
color: var(--avatar-editor-soft);
|
|
}
|
|
|
|
.avatar-editor-script__tools {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-script__tools button {
|
|
min-height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--avatar-editor-line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-script__tools button:hover,
|
|
.avatar-editor-picker-head > button:hover {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-editor-hover);
|
|
}
|
|
|
|
.avatar-editor-search-field,
|
|
.avatar-editor-avatar-card,
|
|
.avatar-editor-toggle-row {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-muted);
|
|
}
|
|
|
|
.avatar-editor-search-field input {
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-avatar-pick,
|
|
.avatar-editor-subtitle-style,
|
|
.avatar-editor-background-tile,
|
|
.avatar-editor-sticker-card,
|
|
.avatar-editor-avatar-card button,
|
|
.avatar-editor-option-grid button,
|
|
.avatar-editor-upload-card,
|
|
.avatar-editor-background-grid button {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-panel-strong);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-avatar-pick:hover,
|
|
.avatar-editor-subtitle-style:hover,
|
|
.avatar-editor-background-tile:hover,
|
|
.avatar-editor-sticker-card:hover,
|
|
.avatar-editor-avatar-card button:hover,
|
|
.avatar-editor-option-grid button:hover,
|
|
.avatar-editor-upload-card:hover,
|
|
.avatar-editor-background-grid button:hover {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-editor-hover);
|
|
}
|
|
|
|
.avatar-editor-avatar-pick.is-selected,
|
|
.avatar-editor-background-tile.is-selected,
|
|
.avatar-editor-option-grid button.is-selected,
|
|
.avatar-editor-background-grid button.is-selected {
|
|
border-color: rgba(var(--accent-rgb), 0.58);
|
|
background: var(--avatar-editor-accent-soft);
|
|
color: var(--accent);
|
|
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch label {
|
|
color: var(--avatar-editor-muted);
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch label span {
|
|
background: var(--avatar-editor-inset);
|
|
box-shadow: inset 0 0 0 1px var(--avatar-editor-line);
|
|
}
|
|
|
|
.avatar-editor-subtitle-switch label span::after {
|
|
background: var(--avatar-editor-panel-strong);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-editor-stage {
|
|
background: rgb(0 0 0);
|
|
}
|
|
|
|
.avatar-editor-undo button {
|
|
color: var(--avatar-editor-soft);
|
|
}
|
|
|
|
.avatar-editor-undo button:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-layer,
|
|
.avatar-editor-layer-panel {
|
|
border: 1px solid var(--avatar-editor-line);
|
|
background: color-mix(in srgb, var(--avatar-editor-panel) 92%, transparent);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-layer {
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-editor-layer.is-active {
|
|
border-color: rgba(var(--accent-rgb), 0.44);
|
|
color: var(--accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-layer-panel {
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.avatar-editor-layer-row {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-layer-row:hover {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-editor-hover);
|
|
}
|
|
|
|
.avatar-editor-layer-row.is-selected {
|
|
border-color: rgba(var(--accent-rgb), 0.52);
|
|
background: var(--avatar-editor-accent-soft);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-layer-row em,
|
|
.avatar-editor-layer-panel__actions button:disabled {
|
|
color: var(--avatar-editor-soft);
|
|
}
|
|
|
|
.avatar-editor-layer-panel__actions button {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-canvas {
|
|
border-color: rgba(var(--accent-rgb), 0.28);
|
|
background: var(--avatar-editor-inset);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected {
|
|
border-color: var(--accent);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-canvas-layer.is-selected::before,
|
|
.avatar-editor-canvas-layer.is-selected::after {
|
|
border-color: var(--accent);
|
|
background: var(--avatar-editor-panel-strong);
|
|
}
|
|
|
|
.avatar-editor-canvas-layer em {
|
|
background: var(--accent);
|
|
color: var(--dg-button-text, rgb(255 255 255));
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-panel);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar button {
|
|
border-left-color: var(--avatar-editor-border);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-selection-toolbar button:hover {
|
|
background: var(--avatar-editor-hover);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-selection-readout {
|
|
border: 1px solid var(--avatar-editor-line);
|
|
background: color-mix(in srgb, var(--avatar-editor-panel) 92%, transparent);
|
|
box-shadow: var(--shadow-tight);
|
|
}
|
|
|
|
.avatar-editor-timeline {
|
|
border-top-color: var(--avatar-editor-border);
|
|
border-left-color: var(--avatar-editor-border);
|
|
background: var(--avatar-editor-panel);
|
|
}
|
|
|
|
.avatar-editor-play button {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-play span {
|
|
color: var(--avatar-editor-soft);
|
|
}
|
|
|
|
.avatar-editor-clip {
|
|
border-color: rgba(var(--accent-rgb), 0.56);
|
|
background: var(--avatar-editor-inset);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.avatar-editor-clip b,
|
|
.avatar-editor-mini-layers button.is-selected {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.avatar-editor-mini-layers button {
|
|
border-color: var(--avatar-editor-line);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--avatar-editor-muted);
|
|
}
|
|
|
|
.avatar-editor-mini-layers button:hover {
|
|
border-color: rgba(var(--accent-rgb), 0.34);
|
|
background: var(--avatar-editor-hover);
|
|
color: var(--avatar-editor-text);
|
|
}
|
|
|
|
.avatar-editor-mini-layers button.is-selected {
|
|
border-color: rgba(var(--accent-rgb), 0.5);
|
|
background: var(--avatar-editor-accent-soft);
|
|
}
|
|
|
|
.avatar-editor-add {
|
|
border-color: rgba(var(--accent-rgb), 0.48);
|
|
background: var(--avatar-editor-inset);
|
|
color: var(--accent);
|
|
}
|
|
|
|
@media (max-width: 1500px) {
|
|
.avatar-console-voice-grid {
|
|
grid-template-columns: repeat(4, minmax(190px, 1fr));
|
|
}
|
|
|
|
.avatar-console-mosaic {
|
|
grid-template-columns: repeat(6, minmax(120px, 1fr));
|
|
}
|
|
|
|
.avatar-console-avatar-shelf {
|
|
grid-template-columns: repeat(5, minmax(150px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.avatar-console-page {
|
|
grid-template-columns: 76px minmax(0, 1fr);
|
|
}
|
|
|
|
.avatar-console-sidebar {
|
|
padding: 18px 10px;
|
|
}
|
|
|
|
.avatar-console-brand strong,
|
|
.avatar-console-create span,
|
|
.avatar-console-nav button span,
|
|
.avatar-console-nav-group > span,
|
|
.avatar-console-api span {
|
|
display: none;
|
|
}
|
|
|
|
.avatar-console-nav button,
|
|
.avatar-console-api {
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar-console-explore-hero,
|
|
.avatar-console-video-hero,
|
|
.avatar-console-chat-hero,
|
|
.avatar-console-live-hero {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.avatar-console-page {
|
|
height: auto;
|
|
min-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.avatar-console-main {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.avatar-console-scroll {
|
|
padding: 14px;
|
|
}
|
|
|
|
.avatar-console-voice-grid,
|
|
.avatar-console-mosaic,
|
|
.avatar-console-avatar-shelf,
|
|
.avatar-console-video-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|