@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
7,435 lines • 192 kB
CSS
@charset "UTF-8";
@keyframes o-rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.o-rotating {
animation: o-rotating var(--o-rotate-duration, 1s) var(--o-easing-linear) infinite;
}
@keyframes o-zoom-fade-in {
0% {
transform: scale(var(--init-scale));
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.o-zoom-fade-enter-active {
--init-scale: 0.95;
animation: o-zoom-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
}
.o-zoom-fade-leave-active {
--init-scale: 0.95;
animation: o-zoom-fade-in var(--o-duration-s) var(--o-easing-standard-out) reverse;
}
.o-zoom-fade2-enter-active {
--init-scale: 0.8;
animation: o-zoom-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
}
.o-zoom-fade2-leave-active {
--init-scale: 0.8;
animation: o-zoom-fade-in var(--o-duration-s) var(--o-easing-standard-out) reverse;
}
@keyframes o-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.o-fade-in-enter-active {
animation: o-fade-in var(--o-duration-m1) var(--o-easing-standard-in);
}
.o-fade-in-leave-active {
animation: o-fade-in var(--o-duration-m1) var(--o-easing-standard-out) reverse;
}
@keyframes o-fade-up {
0% {
transform: translateY(10px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.o-fade-up-enter-active {
animation: o-fade-up var(--o-duration-m1) var(--o-easing-standard-in);
}
.o-fade-up-leave-active {
animation: o-fade-up var(--o-duration-s) var(--o-easing-standard-out) reverse;
}
.o-txt-display1 {
font-size: var(--o-font_size-display1);
line-height: var(--o-line_height-display1);
}
.o-txt-display2 {
font-size: var(--o-font_size-display2);
line-height: var(--o-line_height-display2);
}
.o-txt-display3 {
font-size: var(--o-font_size-display3);
line-height: var(--o-line_height-display3);
}
.o-txt-display4 {
font-size: var(--o-font_size-display4);
line-height: var(--o-line_height-display4);
}
.o-txt-display5 {
font-size: var(--o-font_size-display5);
line-height: var(--o-line_height-display5);
}
.o-txt-h1 {
font-size: var(--o-font_size-h1);
line-height: var(--o-line_height-h1);
}
.o-txt-h2 {
font-size: var(--o-font_size-h2);
line-height: var(--o-line_height-h2);
}
.o-txt-h3 {
font-size: var(--o-font_size-h3);
line-height: var(--o-line_height-h3);
}
.o-txt-h4 {
font-size: var(--o-font_size-h4);
line-height: var(--o-line_height-h4);
}
.o-txt-text1 {
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
}
.o-txt-text2 {
font-size: var(--o-font_size-text2);
line-height: var(--o-line_height-text2);
}
.o-txt-tip1 {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.o-txt-tip2 {
font-size: var(--o-font_size-tip2);
line-height: var(--o-line_height-tip2);
}
.o-hide-scrollbar {
scrollbar-width: none;
}
.o-hide-scrollbar::-webkit-scrollbar {
display: none;
}
.o-svg-icon {
--icon-g1: var(--o-color-info1);
--icon-g2: var(--o-color-primary1);
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.2em;
color: inherit;
font-style: normal;
outline: none;
}
.o-svg-icon.type-stroke {
stroke: currentColor;
}
.o-svg-icon.type-fill {
fill: currentColor;
}
[class^=o-],
[class^=o_] {
box-sizing: border-box;
}
:root {
--o-z-index-base: 100;
--o-z-index-max: 9999;
--o-font-password: Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.o_input {
--color: var(--input-color, var(--o-color-info1));
--color-disabled: var(--input-color-disabled, var(--o-color-info4));
--placeholder: var(--input-placeholder, var(--o-color-info4));
--bg-color: var(--input-bg-color, transparent);
--icon-color: var(--input-icon-color, var(--o-color-info3));
--icon-color-hover: var(--input-icon-color-hover, var(--o-color-info2));
--icon-color-disabled: var(--input-icon-color-disabled, var(--o-color-info4));
--icon-size: var(--input-icon-size, var(--o-icon_size-xs));
--limit-color: var(--input-limit-color, var(--o-color-info4));
--limit-color-error: var(--input-limit-color-error, var(--o-color-danger1));
--limit-text-size: var(--input-limit-text-size, var(--o-font_size-tip2));
--limit-text-height: var(--input-limit-text-height, var(--o-line_height-tip2));
--min-width: var(--input-min-width, 10px);
--max-width: var(--input-max-width);
}
.o_input {
display: inline-flex;
color: var(--color);
cursor: inherit;
}
.o_input-disabled {
color: var(--color-disabled);
}
.o_input-wrap {
width: 100%;
margin-right: auto;
}
.o_input-input {
outline: none;
border: none;
color: inherit;
cursor: inherit;
background-color: transparent;
display: inline-flex;
padding: 0;
line-height: inherit;
height: 100%;
width: 100%;
font-size: inherit;
min-width: 20px;
appearance: none;
}
.o_input-input::-webkit-input-placeholder {
color: var(--placeholder);
}
.o_input-input:autofill {
box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
}
.o_input-invalid .o_input-input {
text-decoration: line-through;
}
.o_input-suffix {
display: flex;
flex-shrink: 0;
align-items: center;
position: relative;
margin-left: 8px;
}
.o_input-prefix {
display: flex;
align-items: center;
margin-right: 8px;
}
.o_input-suffix-icon {
display: flex;
transform: scale(1);
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
}
.o_input-clear {
visibility: hidden;
flex-shrink: 0;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color);
font-size: var(--icon-size);
cursor: pointer;
transform: scale(0.5);
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
.o_input-clear {
overflow: hidden;
}
.o_input-clear svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o_input-clear:hover svg {
transform: rotate(180deg);
}
}
@media (hover: hover) {
.o_input-clear:hover {
color: var(--icon-color-hover);
}
.o_input-suffix-icon + .o_input-clear {
position: absolute;
}
}
@media (hover: hover) {
.o_input-clearable:hover .o_input-suffix-icon {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
.o_input-clearable:hover .o_input-clear {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
@media (hover: none) {
.o_input-clearable .o_input-suffix-icon,
.o_input-clearable .o_input-clear {
visibility: visible;
opacity: 1;
}
}
.o_input-eye {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--icon-size);
color: var(--icon-color);
margin-left: 4px;
cursor: pointer;
}
@media (hover: hover) {
.o_input-eye:hover {
color: var(--icon-color-hover);
}
}
.o_input-eye :first-child {
margin-left: 0;
}
.o_input-disabled .o_input-eye, .o_input-readonly .o_input-eye {
color: var(--icon-color-disabled);
}
.o_input-password {
font-family: var(--o-font-password);
}
.o_input-limit {
margin-left: 4px;
right: 8px;
bottom: 4px;
color: var(--limit-color);
font-size: var(--limit-text-size);
line-height: var(--limit-text-height);
z-index: 0;
}
.o_input-limit b {
font-weight: normal;
}
.o_input-limit-error > b {
color: var(--limit-color-error);
}
/* auto width */
.o_input-auto-width {
width: auto;
max-width: 100%;
}
.o_input-wrap-auto-width {
position: relative;
min-width: 0; /* 修复子元素超出父元素问题 */
}
.o_input-wrap-auto-width::after {
content: attr(date-value) " ";
visibility: hidden;
white-space: pre;
height: 100%;
line-height: inherit;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
min-width: var(--min-width);
max-width: var(--max-width);
}
.o_input-wrap-auto-width .o_input-input {
position: absolute;
top: 0;
left: 0;
}
.o_textarea {
--padding-v: var(--textarea-padding-v, 8px);
--padding-h: var(--textarea-padding-h, 16px);
--min-height: var(--textarea-min-height, 10px);
--min-width: var(--textarea-min-width, 10px);
--color: var(--textarea-color, var(--o-color-info1));
--color-disabled: var(--textarea-color-disabled, var(--o-color-info4));
--placeholder: var(--textarea-placeholder, var(--o-color-info4));
--bg-color: var(--textarea-bg-color);
--icon-size: var(--textarea-icon-size, var(--o-icon_size-xs));
--icon-color: var(--textarea-icon-color, var(--o-color-info3));
--icon-color-hover: var(--textarea-icon-color-hover, var(--o-color-info2));
--icon-color-disabled: var(--textarea-icon-color-disabled, var(--o-color-info4));
--limit-color: var(--textarea-limit-color, var(--o-color-info4));
--limit-color-error: var(--textarea-limit-color-error, var(--o-color-danger1));
--limit-text-size: var(--textarea-limit-text-size, var(--o-font_size-tip2));
--limit-text-height: var(--textarea-limit-text-height, var(--o-line_height-tip2));
}
.o_textarea {
color: var(--color);
max-width: 100%;
max-height: inherit;
min-width: inherit;
min-height: inherit;
cursor: inherit;
position: relative;
display: inline-flex;
flex-direction: column;
}
.o_textarea-disabled {
color: var(--color-disabled);
}
.o_textarea-wrap {
width: 100%;
height: 100%;
position: relative;
}
.o_textarea-textarea {
padding: var(--padding-v) var(--padding-h);
display: block;
outline: none;
border: none;
color: inherit;
cursor: inherit;
background-color: transparent;
line-height: inherit;
height: 100%;
width: 100%;
font-size: inherit;
min-width: 100%;
appearance: none;
z-index: 1;
}
.o_textarea-textarea::-webkit-input-placeholder {
color: var(--placeholder, var(--o-color-info4));
}
.o_textarea-textarea:autofill {
box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
}
.o_textarea-invalid .o_textarea-textarea {
text-decoration: line-through;
}
.o_textarea-disabled {
cursor: not-allowed;
}
.o_textarea-readonly {
cursor: text;
}
.o_textarea-clear {
right: 2px;
top: 50%;
font-size: var(--icon-size);
margin-top: calc(var(--icon-size) / -2);
border-radius: 50%;
visibility: hidden;
flex-shrink: 0;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color);
cursor: pointer;
transform: scale(0.5);
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
z-index: 2;
}
.o_textarea-clear {
overflow: hidden;
}
.o_textarea-clear svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o_textarea-clear:hover svg {
transform: rotate(180deg);
}
}
@media (hover: hover) {
.o_textarea-clear:hover {
color: var(--icon-color-hover);
}
}
@media (hover: hover) {
.o_textarea-clearable:hover .o_textarea-suffix-icon {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
.o_textarea-clearable:hover .o_textarea-clear {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
@media (hover: none) {
.o_textarea-clearable .o_textarea-suffix-icon,
.o_textarea-clearable .o_textarea-clear {
visibility: visible;
opacity: 1;
}
}
.o_textarea-limit .o_textarea-textarea {
padding-bottom: var(--limit-text-height);
padding-bottom: max(var(--limit-text-height), var(--padding-v));
}
.o_textarea-count {
right: 7px;
bottom: 3px;
color: var(--limit-color);
font-size: var(--limit-text-size);
line-height: var(--limit-text-height);
z-index: 0;
}
.o_textarea-count b {
font-weight: normal;
}
.o_textarea-count-error > b {
color: var(--limit-color-error);
}
.o_textarea-icon {
position: absolute;
}
/* auto size */
.o_textarea-auto-size {
height: auto;
width: auto;
}
.o_textarea-wrap-auto-size {
position: relative;
min-width: 0; /* 修复子元素超出父元素问题 */
min-height: 0;
flex: 1;
}
.o_textarea-wrap-auto-size::after {
content: attr(date-value) " ";
padding: var(--padding-v) var(--padding-h);
visibility: hidden;
white-space: pre-wrap;
word-break: break-word;
height: 100%;
width: 100%;
line-height: inherit;
display: block;
box-sizing: border-box;
min-height: var(--min-height, 10px);
min-width: var(--min-width, 10px);
}
.o_textarea-wrap-auto-size .o_textarea-textarea {
position: absolute;
top: 0;
left: 0;
}
.o_box {
--_box-color: var(--o-color-info2);
--_box-color-disabled: var(--o-color-info4);
--icon-color: var(--o-color-info2);
--icon-color-hover: var(--o-color-info2);
--icon-color-disabled: var(--o-color-info4);
--_box-ap-bd: 1px solid var(--_box-ap-bd-color);
--_box-ap-bd-disabled: 1px solid var(--_box-ap-bd-color-disabled);
--_box-bd: 1px solid var(--_box-bd-color);
--_box-bg-color: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
--_box-bg-color-focus: var(--o-color-control-light);
--_box-bg-color-disabled: var(--o-color-control4-light);
--_box-prepend-append-bd: 1px solid var(--o-color-control1);
--_box-prepend-append-bd-color-disabled: var(--o-color-control4-light);
--_box-prepend-append-bg-color: var(--o-color-control-light);
}
.o_box-solid {
--_box-prepend-append-bd: 1px solid var(--o-color-control2-light);
--_box-prepend-append-bg-color: var(--o-color-control1-light);
}
.o_box-text {
--_box-bd-color: transparent;
--_box-bg-color: transparent;
--_box-bd-color-focus: var(--o-color-control-light);
--_box-bd-color-disabled: transparent;
--_box-bg-color-disabled: transparent;
}
.o_box-text.o_box-normal {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-text.o_box-success {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-text.o_box-warning {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-text.o_box-danger {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-outline.o_box-normal {
--_box-bd-color: var(--o-color-control1);
--_box-bd-color-hover: var(--o-color-primary2);
--_box-bd-color-focus: var(--o-color-primary3);
--_box-bd-color-disabled: var(--o-color-control4);
}
.o_box-outline.o_box-success {
--_box-bd-color: var(--o-color-success1-light);
--_box-bd-color-hover: var(--o-color-success2-light);
--_box-bd-color-focus: var(--o-color-success3);
--_box-bd-color-disabled: var(--o-color-success4);
}
.o_box-outline.o_box-warning {
--_box-bd-color: var(--o-color-warning1-light);
--_box-bd-color-hover: var(--o-color-warning2-light);
--_box-bd-color-focus: var(--o-color-warning3);
--_box-bd-color-disabled: var(--o-color-warning4);
}
.o_box-outline.o_box-danger {
--_box-bd-color: var(--o-color-danger1-light);
--_box-bd-color-hover: var(--o-color-danger2-light);
--_box-bd-color-focus: var(--o-color-danger3);
--_box-bd-color-disabled: var(--o-color-danger4);
}
.o_box-outline {
--_box-ap-bd-color: var(--o-color-control1);
--_box-ap-bd-color-disabled: var(--o-color-control4);
}
.o_box-solid.o_box-normal {
--_box-bd-color: var(--o-color-control1-light);
--_box-bd-color-hover: var(--o-color-control2-light);
--_box-bd-color-focus: var(--o-color-primary3-light);
--_box-bd-color-disabled: var(--o-color-control4-light);
--_box-bg-color: var(--o-color-control1-light);
--_box-bg-color-hover: var(--o-color-control2-light);
--_box-bg-color-disabled: var(--o-color-control4-light);
}
.o_box-solid.o_box-success {
--_box-bd-color: var(--o-color-success1-light);
--_box-bd-color-hover: var(--o-color-success2-light);
--_box-bd-color-focus: var(--o-color-success3-light);
--_box-bd-color-disabled: var(--o-color-success4-light);
--_box-bg-color: var(--o-color-success1-light);
--_box-bg-color-hover: var(--o-color-success2-light);
--_box-bg-color-disabled: var(--o-color-success4-light);
}
.o_box-solid.o_box-warning {
--_box-bd-color: var(--o-color-warning1-light);
--_box-bd-color-hover: var(--o-color-warning2-light);
--_box-bd-color-focus: var(--o-color-warning3-light);
--_box-bd-color-disabled: var(--o-color-warning4-light);
--_box-bg-color: var(--o-color-warning1-light);
--_box-bg-color-hover: var(--o-color-warning2-light);
--_box-bg-color-disabled: var(--o-color-warning4-light);
}
.o_box-solid.o_box-danger {
--_box-bd-color: var(--o-color-danger1-light);
--_box-bd-color-hover: var(--o-color-danger2-light);
--_box-bd-color-focus: var(--o-color-danger3-light);
--_box-bd-color-disabled: var(--o-color-danger4-light);
--_box-bg-color: var(--o-color-danger1-light);
--_box-bg-color-hover: var(--o-color-danger2-light);
--_box-bg-color-disabled: var(--o-color-danger4-light);
}
.o_box-small {
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
--_box-radius: var(--o-radius_control-xs);
--icon-size: var(--o-icon_size_control-xs);
}
.o_box-medium {
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
--_box-radius: var(--o-radius_control-s);
--icon-size: var(--o-icon_size_control-xs);
}
.o_box-large {
--_box-text-size: var(--o-font_size-text1);
--_box-text-height: var(--o-line_height-text1);
--_box-radius: var(--o-radius_control-l);
--icon-size: var(--o-icon_size_control-s);
}
.o_box-round-pill {
--_box-radius: var(--o-control_size-l);
}
.o_box {
color: var(--_box-color);
display: flex;
height: var(--_box-height);
font-size: var(--_box-text-size);
line-height: var(--_box-text-height);
}
.o_box-main {
display: flex;
padding: var(--_box-padding);
width: 100%;
overflow: hidden;
position: relative;
border-radius: var(--_box-radius);
border: var(--_box-bd);
background-color: var(--_box-bg-color);
transition: all var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o_box-main:hover {
border-color: var(--_box-bd-color-hover);
background-color: var(--_box-bg-color-hover);
}
}
.o_box-main.o_box-focused {
border-color: var(--_box-bd-color-focus);
background-color: var(--_box-bg-color-focus);
}
.o_box-main.o_box-disabled, .o_box-main.o_box-readonly {
color: var(--_box-color-disabled);
border-color: var(--_box-bd-color-disabled);
background-color: var(--_box-bg-color-disabled);
}
.o_box-main.o_box-disabled {
cursor: not-allowed;
}
.o_box-main.o_box-readonly {
cursor: default;
}
.o_box-main.has-prepend {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.o_box-main.has-append {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.o_box-append,
.o_box-prepend {
display: flex;
align-items: center;
border: var(--_box-prepend-append-bd);
background-color: var(--_box-prepend-append-bg-color);
overflow: hidden;
}
.o_box-readonly .o_box-append, .o_box-disabled .o_box-append,
.o_box-readonly .o_box-prepend,
.o_box-disabled .o_box-prepend {
border-color: var(--_box-prepend-append-bd-color-disabled);
}
.o_box-append {
flex-shrink: 0;
border-top-right-radius: var(--_box-radius);
border-bottom-right-radius: var(--_box-radius);
}
.o_box-prepend {
flex-shrink: 0;
padding: var(--_box-prepend-padding);
border-top-left-radius: var(--_box-radius);
border-bottom-left-radius: var(--_box-radius);
}
.o_box-solid .o_box-prepend {
border-left-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
.o_box-solid .o_box-append {
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
.o_box-outline .o_box-prepend {
border-right-width: 0;
}
.o_box-outline .o_box-append {
border-left-width: 0;
}
.o_box-text .o_box-main {
border-right-width: 0;
border-top-width: 0;
border-left-width: 0;
}
.o-icon {
--icon-btn-color: var(--o-color-info1);
--icon-btn-color-hover: var(--o-color-info2);
--icon-btn-color-active: var(--o-color-info3);
--icon-btn-color-disabled: var(--o-color-info4);
--icon-size: 1em;
}
.o-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--icon-size);
}
.o-icon-btn {
color: var(--icon-btn-color);
cursor: pointer;
}
@media (hover: hover) {
.o-icon-btn:hover {
color: var(--icon-btn-color-hover);
}
}
.o-icon-btn:active, .o-icon-btn:focus-visible {
color: var(--icon-btn-color-active);
}
.o-icon-btn-disabled {
cursor: not-allowed;
}
.o-icon-btn-disabled, .o-icon-btn-disabled:hover, .o-icon-btn-disabled:focus-visible, .o-icon-btn-disabled:active {
color: var(--icon-btn-color-disabled);
}
.o-btn {
--btn-color: var(--o-color-info2);
--btn-color-hover: var(--o-color-info1);
--btn-color-active: var(--o-color-info1);
--btn-bd-color: var(--o-color-control1);
--btn-bd-color-hover: var(--o-color-control2);
--btn-bd-color-active: var(--o-color-control3);
--btn-bd-color-disabled: var(--o-color-control1);
}
.o-btn.o-btn-solid {
--btn-color: var(--o-color-white);
--btn-color-hover: var(--o-color-white);
--btn-color-active: var(--o-color-white);
--btn-color-disabled: var(--o-color-white);
--btn-bg-color: var(--o-color-control1-light);
--btn-bg-color-hover: var(--o-color-control2-light);
--btn-bg-color-active: var(--o-color-control3-light);
--btn-bd-color-disabled: var(--o-color-control4-light);
--btn-bd-color: var(--o-color-control1-light);
--btn-bd-color-hover: var(--o-color-control2-light);
--btn-bd-color-active: var(--o-color-control3-light);
--btn-bg-color-disabled: var(--o-color-control4-light);
}
.o-btn.o-btn-text {
--btn-bg-color-hover: var(--o-color-control1-light);
--btn-bg-color-active: var(--o-color-control2-light);
}
.o-btn-normal {
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-normal.o-btn-solid {
--btn-color: var(--o-color-info2);
--btn-color-hover: var(--o-color-info2);
--btn-color-active: var(--o-color-info2);
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-primary {
--btn-color: var(--o-color-primary1);
--btn-color-hover: var(--o-color-primary2);
--btn-color-active: var(--o-color-primary3);
--btn-color-disabled: var(--o-color-primary4);
--btn-bd-color: var(--o-color-primary1);
--btn-bd-color-hover: var(--o-color-primary2);
--btn-bd-color-active: var(--o-color-primary3);
--btn-bd-color-disabled: var(--o-color-primary4);
}
.o-btn-primary.o-btn-solid {
--btn-bg-color: var(--o-color-primary1);
--btn-bg-color-hover: var(--o-color-primary2);
--btn-bg-color-active: var(--o-color-primary3);
--btn-bg-color-disabled: var(--o-color-primary4);
--btn-bd-color: var(--o-color-primary1);
--btn-bd-color-hover: var(--o-color-primary2);
--btn-bd-color-active: var(--o-color-primary3);
--btn-bd-color-disabled: var(--o-color-primary4);
}
.o-btn-primary.o-btn-text {
--btn-bg-color-hover: var(--o-color-primary1-light);
--btn-bg-color-active: var(--o-color-primary2-light);
}
.o-btn-success {
--btn-color: var(--o-color-success1);
--btn-color-hover: var(--o-color-success2);
--btn-color-active: var(--o-color-success3);
--btn-color-disabled: var(--o-color-success4);
--btn-bd-color: var(--o-color-success1);
--btn-bd-color-hover: var(--o-color-success2);
--btn-bd-color-active: var(--o-color-success3);
--btn-bd-color-disabled: var(--o-color-success4);
}
.o-btn-success.o-btn-solid {
--btn-bg-color: var(--o-color-success1);
--btn-bg-color-hover: var(--o-color-success2);
--btn-bg-color-active: var(--o-color-success3);
--btn-bg-color-disabled: var(--o-color-success4);
--btn-bd-color: var(--o-color-success1);
--btn-bd-color-hover: var(--o-color-success2);
--btn-bd-color-active: var(--o-color-success3);
}
.o-btn-success.o-btn-text {
--btn-bg-color-hover: var(--o-color-success1-light);
--btn-bg-color-active: var(--o-color-success2-light);
}
.o-btn-warning {
--btn-color: var(--o-color-warning1);
--btn-color-hover: var(--o-color-warning2);
--btn-color-active: var(--o-color-warning3);
--btn-color-disabled: var(--o-color-warning4);
--btn-bd-color: var(--o-color-warning1);
--btn-bd-color-hover: var(--o-color-warning2);
--btn-bd-color-active: var(--o-color-warning3);
--btn-bd-color-disabled: var(--o-color-warning4);
}
.o-btn-warning.o-btn-solid {
--btn-bg-color: var(--o-color-warning1);
--btn-bg-color-hover: var(--o-color-warning2);
--btn-bg-color-active: var(--o-color-warning3);
--btn-bg-color-disabled: var(--o-color-warning4);
--btn-bd-color: var(--o-color-warning1);
--btn-bd-color-hover: var(--o-color-warning2);
--btn-bd-color-active: var(--o-color-warning3);
}
.o-btn-warning.o-btn-text {
--btn-bg-color-hover: var(--o-color-warning1-light);
--btn-bg-color-active: var(--o-color-warning2-light);
}
.o-btn-warning.o-btn-disabled {
--btn-color: var(--o-color-warning4);
--btn-bg-color: var(--o-color-warning4);
--btn-bd-color: var(--o-color-warning4);
}
.o-btn-danger {
--btn-color: var(--o-color-danger1);
--btn-color-hover: var(--o-color-danger2);
--btn-color-active: var(--o-color-danger3);
--btn-color-disabled: var(--o-color-danger4);
--btn-bd-color: var(--o-color-danger1);
--btn-bd-color-hover: var(--o-color-danger2);
--btn-bd-color-active: var(--o-color-danger3);
--btn-bd-color-disabled: var(--o-color-danger4);
}
.o-btn-danger.o-btn-solid {
--btn-bg-color: var(--o-color-danger1);
--btn-bg-color-hover: var(--o-color-danger2);
--btn-bg-color-active: var(--o-color-danger3);
--btn-bg-color-disabled: var(--o-color-danger4);
--btn-bd-color: var(--o-color-danger1);
--btn-bd-color-hover: var(--o-color-danger2);
--btn-bd-color-active: var(--o-color-danger3);
}
.o-btn-danger.o-btn-text {
--btn-bg-color-hover: var(--o-color-danger1-light);
--btn-bg-color-active: var(--o-color-danger2-light);
}
.o-btn-small {
--btn-radius: var(--o-radius_control-xs);
--btn-gap: 2px;
--btn-padding: 0 11px;
--btn-icon-size: var(--o-icon_size-xs);
--btn-height: var(--o-control_size-s);
}
.o-btn-medium {
--btn-min-width: 80px;
--btn-radius: var(--o-radius_control-s);
--btn-gap: 8px;
--btn-padding: 0 15px;
--btn-icon-size: var(--o-icon_size-xs);
--btn-height: var(--o-control_size-m);
}
.o-btn-large {
--btn-min-width: 96px;
--btn-radius: var(--o-radius_control-s);
--btn-gap: 8px;
--btn-padding: 0 23px;
--btn-icon-size: var(--o-icon_size-m);
--btn-height: var(--o-control_size-l);
}
.o-btn-icon-only {
--btn-padding: 0;
}
.o-btn-round-pill {
--btn-radius: var(--o-control_size-l);
--btn-gap: 6px;
}
.o-btn-text {
--btn-bd-color-disabled: transparent;
}
.o-btn {
outline: none;
background-color: transparent;
border: 1px solid transparent;
transition: all var(--o-duration-s) var(--o-easing-standard);
white-space: nowrap;
text-decoration: none;
border-radius: var(--btn-radius);
display: inline-flex;
align-items: center;
justify-content: center;
max-width: var(--btn-max-width);
min-width: var(--btn-min-width);
padding: var(--btn-padding);
height: var(--btn-height);
cursor: pointer;
}
.o-btn.o-btn-icon-only {
width: var(--btn-height);
}
.o-btn-outline {
color: var(--btn-color);
border: 1px solid var(--btn-bd-color);
}
@media (hover: hover) {
.o-btn-outline:hover {
color: var(--btn-color-hover);
border: 1px solid var(--btn-bd-color-hover);
}
}
.o-btn-outline:active {
color: var(--btn-color-active);
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-outline:focus-visible {
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-solid {
color: var(--btn-color);
border: 1px solid var(--btn-bd-color);
background-color: var(--btn-bg-color);
}
@media (hover: hover) {
.o-btn-solid:hover {
color: var(--btn-color-hover);
border: 1px solid var(--btn-bd-color-hover);
background-color: var(--btn-bg-color-hover);
}
}
.o-btn-solid:active {
color: var(--btn-color-active);
border: 1px solid var(--btn-bd-color-active);
background-color: var(--btn-bg-color-active);
}
.o-btn-solid:focus-visible {
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-text {
color: var(--btn-color);
background-color: transparent;
}
@media (hover: hover) {
.o-btn-text:hover {
color: var(--btn-color-hover);
background-color: var(--btn-bg-color-hover);
}
}
.o-btn-text:active {
color: var(--btn-color-active);
background-color: var(--btn-bg-color-active);
}
.o-btn-disabled, .o-btn-disabled:active, .o-btn-disabled:hover, .o-btn-disabled:focus-visible {
cursor: not-allowed;
color: var(--btn-color-disabled);
border: 1px solid var(--btn-bd-color-disabled);
background-color: var(--btn-bg-color-disabled);
}
.o-btn-small {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.o-btn-medium {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.o-btn-large {
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
}
.o-btn-prefix {
display: inline-flex;
align-items: center;
margin-right: var(--btn-gap);
font-size: var(--btn-icon-size);
}
.o-btn-icon-only .o-btn-prefix {
margin-right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.o-btn-suffix {
display: inline-flex;
align-items: center;
margin-left: var(--btn-gap);
font-size: var(--btn-icon-size);
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-btn-large {
--btn-padding: 0 15px;
--btn-icon-size: var(--o-icon_size-s);
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
}
.o-switch {
--switch-radius: var(--o-control_size-s);
--switch-color: var(--o-color-info1-inverse);
--switch-bg-color: var(--o-color-control1-light);
--switch-bg-color-hover: var(--o-color-control2-light);
--switch-bg-color-active: var(--o-color-control3-light);
--switch-bg-color-disabled: var(--o-color-control4-light);
--switch-bg-color-checked: var(--o-color-primary1);
--switch-bg-color-checked-hover: var(--o-color-primary2);
--switch-bg-color-checked-active: var(--o-color-primary3);
--switch-bg-color-checked-disabled: var(--o-color-primary4);
--switch-handler-bg-color: var(--o-color-white);
--switch-handler-bg-color-disabled: rgb(var(--o-white), 0.6);
--switch-handler-bg-color-checked-disabled: rgb(var(--o-white), 0.4);
--switch-icon-loading-color: var(--o-color-primary1);
}
.o-switch-medium {
--switch-min-width: 40px;
--switch-size: var(--o-control_size-s);
--switch-text-size: var(--o-font_size-tip1);
--switch-text-height: var(--o-line_height-tip1);
--switch-handler-size: var(--o-control_size-xs);
--switch-handler-offset: 4px;
--switch-label-padding: 6px;
}
.o-switch-small {
--switch-min-width: 28px;
--switch-size: var(--o-control_size-xs);
--switch-text-size: var(--o-font_size-tip2);
--switch-text-height: var(--o-line_height-tip2);
--switch-handler-size: calc(var(--o-control_size-2xs) - 4px);
--switch-handler-offset: 4px;
--switch-label-padding: 4px;
}
.o-switch-round-pill {
--switch-radius: var(--o-control_size-l);
}
.o-switch {
display: inline-block;
height: var(--switch-size);
font-size: var(--switch-text-size);
line-height: var(--switch-text-height);
color: var(--switch-color);
background-color: var(--switch-bg-color);
border-radius: var(--switch-radius);
transition: background-color var(--o-duration-s) var(--o-easing-standard);
cursor: pointer;
min-width: var(--switch-min-width);
}
@media (hover: hover) {
.o-switch:hover {
background-color: var(--switch-bg-color-hover);
}
}
.o-switch:active {
background-color: var(--switch-bg-color-active);
}
.o-switch-wrap {
position: relative;
height: 100%;
}
.o-switch-handler {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--switch-handler-size);
height: var(--switch-handler-size);
border-radius: calc(var(--switch-radius) - 2px);
background-color: var(--switch-handler-bg-color);
transition: left var(--o-duration-s) var(--o-easing-standard);
left: var(--switch-handler-offset);
}
.o-switch-handler .o-switch-icon-loading {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--switch-bg-color);
}
.o-switch-checked {
background-color: var(--switch-bg-color-checked);
}
.o-switch-checked .o-switch-handler {
left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
}
.o-switch-checked .o-switch-label {
padding-left: var(--switch-label-padding);
padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
}
@media (hover: hover) {
.o-switch-checked:hover {
background-color: var(--switch-bg-color-checked-hover);
}
}
.o-switch-checked:active {
background-color: var(--switch-bg-color-checked-active);
}
.o-switch-disabled,
.o-switch-loading {
cursor: not-allowed;
}
.o-switch-disabled, .o-switch-disabled:hover, .o-switch-disabled:active,
.o-switch-loading,
.o-switch-loading:hover,
.o-switch-loading:active {
background-color: var(--switch-bg-color-disabled);
}
.o-switch-disabled .o-switch-handler, .o-switch-disabled:hover .o-switch-handler, .o-switch-disabled:active .o-switch-handler,
.o-switch-loading .o-switch-handler,
.o-switch-loading:hover .o-switch-handler,
.o-switch-loading:active .o-switch-handler {
background-color: var(--switch-handler-bg-color-disabled);
}
.o-switch-disabled .o-switch-handler .o-switch-icon-loading, .o-switch-disabled:hover .o-switch-handler .o-switch-icon-loading, .o-switch-disabled:active .o-switch-handler .o-switch-icon-loading,
.o-switch-loading .o-switch-handler .o-switch-icon-loading,
.o-switch-loading:hover .o-switch-handler .o-switch-icon-loading,
.o-switch-loading:active .o-switch-handler .o-switch-icon-loading {
color: var(--switch-icon-loading-color);
}
.o-switch-disabled.o-switch-checked, .o-switch-disabled.o-switch-checked:hover, .o-switch-disabled.o-switch-checked:active,
.o-switch-loading.o-switch-checked,
.o-switch-loading.o-switch-checked:hover,
.o-switch-loading.o-switch-checked:active {
background-color: var(--switch-bg-color-checked-disabled);
}
.o-switch-disabled.o-switch-checked .o-switch-handler, .o-switch-disabled.o-switch-checked:hover .o-switch-handler, .o-switch-disabled.o-switch-checked:active .o-switch-handler,
.o-switch-loading.o-switch-checked .o-switch-handler,
.o-switch-loading.o-switch-checked:hover .o-switch-handler,
.o-switch-loading.o-switch-checked:active .o-switch-handler {
background-color: var(--switch-handler-bg-color-checked-disabled);
}
.o-switch-label {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
padding-right: var(--switch-label-padding);
}
.o-link {
--link-gap: 4px;
}
.o-link-normal {
--link-color: var(--o-color-info2);
--link-color-hover: var(--o-color-link2);
--link-color-active: var(--o-color-link3);
--link-color-disabled: var(--o-color-info4);
--link-bg-color-hover: var(--o-color-control1-light);
--link-bg-color-active: var(--o-color-control2-light);
}
.o-link-primary {
--link-color: var(--o-color-primary1);
--link-color-hover: var(--o-color-primary2);
--link-color-active: var(--o-color-primary3);
--link-color-disabled: var(--o-color-primary4);
--link-bg-color-hover: var(--o-color-primary1-light);
--link-bg-color-active: var(--o-color-primary2-light);
}
.o-link-success {
--link-color: var(--o-color-success1);
--link-color-hover: var(--o-color-success2);
--link-color-active: var(--o-color-success3);
--link-color-disabled: var(--o-color-success4);
--link-bg-color-hover: var(--o-color-success1-light);
--link-bg-color-active: var(--o-color-success2-light);
}
.o-link-warning {
--link-color: var(--o-color-warning1);
--link-color-hover: var(--o-color-warning2);
--link-color-active: var(--o-color-warning3);
--link-color-disabled: var(--o-color-warning4);
--link-bg-color-hover: var(--o-color-warning1-light);
--link-bg-color-active: var(--o-color-warning2-light);
}
.o-link-danger {
--link-color: var(--o-color-danger1);
--link-color-hover: var(--o-color-danger2);
--link-color-active: var(--o-color-danger3);
--link-color-disabled: var(--o-color-danger4);
--link-bg-color-hover: var(--o-color-danger1-light);
--link-bg-color-active: var(--o-color-danger2-light);
}
.o-link-small {
--link-icon-size: var(--o-icon_size_control-xs);
}
.o-link-medium {
--link-icon-size: var(--o-icon_size_control-xs);
}
.o-link-large {
--link-icon-size: var(--o-icon_size_control-m);
}
.o-link {
cursor: pointer;
padding: 0 2px;
color: var(--link-color);
align-items: center;
text-decoration: none;
border: none;
outline: none;
background-color: transparent;
}
@media (hover: hover) {
.o-link:hover {
color: var(--link-color-hover);
}
.o-link:hover .o-link-icon-arrow {
transform: translate3d(4px, 0, 0);
}
}
.o-link:active {
color: var(--link-color-active);
}
.o-link-icon-arrow {
transition: transform var(--o-easing-standard) var(--o-duration-m2);
}
.o-link-hover-underline {
--link-underline-x: 100%;
}
.o-link-hover-underline .o-link-label {
background: linear-gradient(0deg, var(--link-color-hover), var(--link-color-hover)) no-repeat var(--link-underline-x) bottom;
background-size: 0 1px;
transition: background-size var(--o-easing-standard) var(--o-duration-m2);
}
@media (hover: hover) {
.o-link-hover-underline:hover .o-link-label {
background-size: var(--link-underline-x) 1px;
background-position-x: left;
}
}
.o-link-hover-bg {
transition: background-color var(--o-easing-standard) var(--o-duration-m2);
}
@media (hover: hover) {
.o-link-hover-bg:hover {
color: var(--link-color);
background-color: var(--link-bg-color-hover);
}
}
.o-link-hover-bg:active {
color: var(--link-color);
background-color: var(--link-bg-color-active);
}
.o-link-prefix,
.o-link-suffix {
height: var(--link-icon-size, 1em);
line-height: var(--link-icon-size, 1em);
font-size: var(--link-icon-size);
display: inline-flex;
align-items: center;
vertical-align: var(--link-align);
}
.o-link-prefix::before,
.o-link-suffix::before {
content: "x";
visibility: hidden;
user-select: none;
width: 0;
}
.o-link-prefix .o-svg-icon,
.o-link-suffix .o-svg-icon {
flex-shrink: 0;
}
.o-link-prefix {
margin-right: var(--link-gap);
}
.o-link-suffix {
margin-left: var(--link-gap);
}
.o-link-disabled, .o-link-disabled:hover, .o-link-disabled:active {
cursor: not-allowed;
color: var(--link-color-disabled);
}
@media (hover: hover) {
.o-link-disabled:hover .o-link-icon-arrow {
transform: translate3d(0, 0, 0);
}
.o-link-disabled:hover .o-link-label {
background: none;
}
}
.o-link-disabled.o-link-hover-underline {
background: none;
}
.o-link-small {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
--link-align: -0.08em;
}
.o-link-medium {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
--link-align: -0.08em;
}
.o-link-large {
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
--link-align: -0.1em;
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-link-large {
--link-icon-size: var(--o-icon_size-s);
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
}
.o-popup {
position: absolute;
z-index: var(--popup-z-index);
opacity: 1;
transition: opacity var(--o-duration-m1) var(--o-easing-standard);
max-width: calc(100vw - var(--popup-edge-offset, 0) * 2);
}
.o-popup.out-view {
opacity: 0;
pointer-events: none;
}
.o-popup.animating {
pointer-events: none;
}
.o-popup-anchor {
position: absolute;
z-index: 0;
}
.o-popup-wrap {
box-shadow: var(--popup-shadow);
background-color: var(--popup-bg-color);
border-radius: var(--popup-radius);
}
.o-popup-body {
position: relative;
z-index: 1;
border: var(--popup-bd);
min-width: var(--popup-min-width);
padding: var(--popup-padding);
word-break: break-word;
}
.o-popover {
--popup-bg-color: var(--o-color-fill2);
--popup-shadow: var(--o-shadow-1);
--popup-radius: var(--o-radius_control-s);
--popup-bd: none;
--popup-padding: 8px;
--popover-text-color: var(--o-color-info1);
--popover-text-size: var(--o-font_size-tip1);
--popover-text-height: var(--o-line_height-tip1);
}
.o-popover {
font-size: var(--popover-text-size);
line-height: var(--popover-text-height);
color: var(--popover-text-color);
}
.o-popover-anchor {
border: var(--popup-bd);
border-bottom: none;
border-right: none;
border-top-left-radius: 2px;
width: 8px;
height: 8px;
background-color: var(--popup-bg-color);
}
.o-popup-pos-left .o-popover-anchor,
.o-popup-pos-lb .o-popover-anchor,
.o-popup-pos-lt .o-popover-anchor {
transform: translate(50%, -50%) rotate(135deg);
}
.o-popup-pos-top .o-popover-anchor,
.o-popup-pos-tl .o-popover-anchor,
.o-popup-pos-tr .o-popover-anchor {
transform: translate(-50%, 50%) rotate(225deg);
}
.o-popup-pos-right .o-popover-anchor,
.o-popup-pos-rt .o-popover-anchor,
.o-popup-pos-rb .o-popover-anchor {
transform: translate(-50%, -50%) rotate(-45deg);
}
.o-popup-pos-bottom .o-popover-anchor,
.o-popup-pos-bl .o-popover-anchor,
.o-popup-pos-br .o-popover-anchor {
transform: translate(-50%, -50%) rotate(45deg);
}
@media (max-width: 1440px) {
.o-popover {
--popover-text-size: var(--o-font_size-tip2);
--popover-text-height: var(--o-line_height-tip2);
}
}
.o-input.o_box-small {
--_box-padding: 0 7px;
--_box-height: var(--o-control_size-s);
}
.o-input.o_box-medium {
--_box-padding: 0 15px;
--_box-height: var(--o-control_size-m);
}
.o-input.o_box-large {
--_box-padding: 0 15px;
--_box-height: var(--o-control_size-l);
}
.o-input.o_box-text.o_box-success {
--input-color: var(--o-color-success1);
--input-color-disabled: var(--o-color-success4);
}
.o-input.o_box-text.o_box-warning {
--input-color: var(--o-color-warning1);
--input-color-disabled: var(--o-color-warning4);
}
.o-input.o_box-text.o_box-danger {
--input-color: var(--o-color-danger1);
--input-color-disabled: var(--o-color-danger4);
}
.o-input {
display: inline-flex;
}
.o-input-wrap {
width: 100%;
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-input-large {
--input-icon-size: var(--o-icon_size-s);
--input-text-size: var(--o-font_size-tip1);
--input-text-height: var(--o-line_height-tip1);
}
}
@media (max-width: 600px) {
.o-input.o_box-small {
--_box-padding: 0 5px;
}
.o-input.o_box-medium {
--_box-padding: 0 11px;
}
.o-input.o_box-large {
--_box-padding: 0 11px;
}
}
.o-input-number {
--input-number-btn-color: var(--o-color-info3);
--input-number-btn-color-hover: var(--o-color-info1);
--input-number-btn-color-active: var(--o-color-info1);
--input-number-btn-color-disabled: var(--o-color-info4);
--input-number-btn-bg-color: transparent;
--input-number-btn-bg-color-hover: var(--o-color-control1-light);
--input-number-btn-bg-color-active: var(--o-color-control2-light);
--input-number-btn-bg-color-disabled: var(--o-color-control4-light);
--input-number-btn-pill-fix: 2px;
}
.o-input-number-btn-wrap {
height: 100%;
user-select: none;
justify-content: center;
display: flex;
cursor: pointer;
min-width: var(--_box-height);
font-size: 16px;
flex-wrap: wrap;
color: var(--input-number-btn-color);
}
.o-input-number-btn {
width: 100%;
height: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 16px;
overflow: hidden;
position: relative;
background-color: var(--input-number-btn-bg-color);
}
.o-input-control-left .o-input-number-btn, .o-input-control-right .o-input-number-btn {
height: 100%;
}
@media (hover: hover) {
.o-input-number-btn:hover {
color: var(--input-number-btn-color-hover);
background-color: var(--input-number-btn-bg-color-hover);
}
}
.o-input-number-btn:focus {
color: var(--input-number-btn-color-active);
background-color: var(--input-number-btn-bg-color-active);
}
.o-input-number-btn.is-disabled {
cursor: not-allowed;
color: var(--input-number-btn-color-disabled);
background-color: var(--input-number-btn-bg-color-disabled);
}
.o-input-control-right .o-input-round-pill .o-input-number-btn {
padding-right: var(--input-number-btn-pill-fix);
}
.o-input-control-left .o-input-round-pill .o-input-number-btn {
padding-left: var(--input-number-btn-pill-fix);
}
.o-input-number-icon-minus {
position: absolute;
margin-top: -4px;
}
.o-input-number-icon-plus {
position: absolute;
margin-bottom: -4px;
}
.o-input-number-size-small {
width: 90px;
}
.o-input-number-size-medium {
width: 120px;
}
.o-input-number-size-large {
width: 160px;
}
.o-textarea {
--textarea-min-height: var(--o-control_size-s);
--textarea-min-width: var(--o-control_size-xl);
}
.o-textarea.o_box-small {
--textarea-padding-v: 4px;
--textarea-padding-h: 8px;
}
.o-textarea.o_box-medium {
--textarea-padding-v: 8px;
--textarea-padding-h: 16px;
}
.o-textarea.o_box-large {
--textarea-padding-v: 8px;
--textarea-padding-h: 16px;
}
.o-textarea.o_box-text.o_box-success {
--textarea-color: var(--o-color-success1);
--textarea-color-disabled: var(--o-color-success4);
}
.o-textarea.o_box-text.o_box-warning {
--textarea-color: var(--o-color-warning1);
--textarea-color-disabled: var(--o-color-warning4);
}
.o-textarea.o_box-text.o_box-danger {
--textarea-color: var(--o-color-danger1);
--textarea-color-disabled: var(--o-color-danger4);
}
.o-textarea {
display: inline-flex;
cursor: text;
}
.o-textarea.o_box-round-pill .o_textarea-count {
right: 16px;
}
.o-textarea-textarea {
min-width: 100%;
}
@media (max-width: 1200px) {
.o-textarea {
--textarea-text-size: var(--o-font_size-tip1);
--textarea-text-height: var(--o-line_height-tip1);
}
.o-textarea-size-medium {
--textarea-radius: var(--o-radius_control-m);
--textarea-radius-pill: var(--o-radius_control-m);
}
}
.o-option {
--option-color: var(--o-color-info2);
--option-color-hover: var(--o-color-info2);
--option-color-active: var(--o-color-primary1);
--option-color-disabled: var(--o-color-info4);
--option-bg-color: transparent;
--option-bg-color-hover: var(--o-color-control2-light);
--option-bg-color-active: var(--o-color-control3-light);
--option-bg-color-disabled: transparent;
--option-text-size: var(--o-font_size-text1);
--option-text-height: var(--o-line_height-text1);
--option-padding: 7px 12px;
--option-gap: 2px;
--option-radius: var(--o-radius_control-s);
}
.o-option-multiple {
--option-bg-color-active: transparent;
}
.o-options-popup {
--popup-shadow: var(--o-shadow-2);
--popup-bg-color: var(--o-color-control-light);
--popup-radius: var(--o-radius_control-m);
--popup-bd: none;
--popup-padding: 0;
--popup-min-width: 64px;
}
.o-option-list {
--option-list-padding-default: 3px 4px;
--option-list-max-height-default: 302px;
}
.o-option-group {
--option-group-color: var(--o-color-info3);
--option-group-text-size: var(--o-font_size-tip1);
--option-group-text-height: var(--o-line_height-tip1);
--option-group-gap: 8px;
--option-group-name-padding: 2px 8px;
}
.o-option {
padding: calc(var(--option-gap) / 2) 0;
}
.o-option-item {
display: flex;
align-items: center;
padding: var(--option-padding);
color: var(--option-color);
background-color: var(--option-bg-color);
font-size: var(--option-text-size);
line-height: var(--option-text-height);
border-radius: var(--option-radius);
transition: background-color var(--o-duration-s) var(--o-easing-standard);
cursor: pointer;
}
@media (hover: hover) {
.o-option-item:hover, .o-option-item.o-option-multiple:hover {
background-color: var(--option-bg-color-hover);
color: var(--option-color-hover);
}
}
.o-option-item.active {
font-weight: 500;
color: var(--option-color-active);
background-color: var(--option-bg-color-active);
}
.o-option-disabled, .o-option-disabled:hover, .o-option-disabled:active, .o-option-disabled.o-option-multiple:hover {
cursor: not-allowed;
color: var(--option-color-disabled);
background-color: var(--option-bg-color-disabled);
}
.o-option-list {
padding: var(--option-list-padding, var(--option-list-padding-default));
--scroller-padding: 0;
}
.o-options-container {
max-height: var(--option-list-max-height, var(--option-list-max-height-default));
overflow: auto;
}
.o-option-group {
color: var(--option-group-color);
font-size: var(--option-group-text-size);
line-height: var(--option-group-text-height);
}
.o-option-group + .o-option-group {
margin-top: var(--option-group-gap);
}
.o-option-group-name {
padding: var(--option-group-name-padding);
}
@media (max-width: 1440px) {
.o-option {
--option-text-size: var(--o-font_size-tip1);
--option-text-height: var(--o-line_height-tip1);
--option-padding: 6px 12px;
}
}
.o-select {
--select-text-size: var(--o-font_size-text1);
--select-text-height: var(--o-line_height-text1);
--select-color: var(--o-color-info1);
--select-color-hover: var(--o-color-info1);
--select-color-focus: var(--o-color-info1);
--select-color-disabled: var(--o-color-info4);
--select-placeholder: var(--o-color-info4);
--select-bg-color: var(--o-color-control-light);
--select-bg-color-hover: var(--o-color-control-light);
--select-bg-color-focus: var(--o-color-control-light);
--select-bg-color-disabled: var(--o-color-control4-light);
--select-icon-color: var(--o-color-info3);
--select-icon-color-disabled: var(--o-color-info4);
}
.o-select,
.o-select-tag-popover {
--select-tag-bg-color: var(--o-color-control2-light);
--select-tag-radius: 24px;
--select-tag-text-size: var(--o-font_size-tip2);
--select-tag-text-height: var(--o-line_height-tip2);
--select-tag-padding: 3px 12px;
--select-tag-margin: 2px 4px 2px 0;
}
.o-select-tag-popover {
--popover-min-width: auto;
--select-tag-popover-max-width: 360px;
}
.o-select-normal.o-select-outline {
--select-bd-color: var(--o-color-control1);
--select-bd-color-hover: var(--o-color-control2);
--select-bd-color-focus: var(--o-color-primary3);
--select-bd-color-disabled: var(--o-color-control4);
}
.o-select-normal.o-select-solid {
--select-bd-color: var(--o-color-control1-light);
--select-bd-color-hover: var(--o-color-control2-light);
--select-bd-color-disabled: var(--o-color-control4-light);
--select-bg-color: var(--o-color-control1-light);
--select-bg-color-hover: var(--o-color-control2-light);
--select-bg-color-disabled: var(--o-color-control4-light);
}
.o-select-text {
--select-color: var(--o-color-info1);
--select-color-hover: var(--o-color-info2);
--select-color-focus: var(--o-color-info2);
--select-color-disabled: var(--o-color-info4);
--select-bg-color: transparent;
--select-bg-color-hover: transparent;
--select-bg-color-focus: transparent;
}
.o-select-success.o-select-text {
--select-color: var(--o-color-success1);
--select-color-hover: var(--o-color-success2);
--select-color-focus: var(--o-color-success3);
--select-color-disabled: var(--o-color-success4);
}
.o-select-success.o-select-outline {
--select-bd-color: var(--o-color-success1-light);
--select-bd-color-hover: var(--o-color-success2-light);
--select-bd-color-focus: var(--o-color-success3);
--select-bd-color-disabled: var(--o-color-success4);
}
.o-select-success.o-select-solid {
--select-bd-color: var(--o-color-success1-light);
--select-bd-color-hover: var(--o-color-success2-light);
--select-bd-color-focus: var(--o-color-success3-light);
--select-bd-color-disabled: var(--o-color-success4-light);
--select-bg-color: var(--o-color-success1-light);
--select-bg-color-hover: var(--o-color-success2-light);
--select-bg-color-disabled: var(--o-color-success4-light);
}
.o-select-warning.o-select-text {
--select-color: var(--o-color-warning1);
--select-color-hover: var(--o-color-warning2);
--select-color-focus: var(--o-color-warning3);
--select-color-disabled: var(--o-color-warning4);
}
.o-select-warning.o-select-outline {
--select-bd-color: var(--o-color-warning1-light);
--select-bd-color-hover: var(--o-color-warning2-light);
--select-bd-color-focus: var(--o-color-warning3);
--select-bd-color-disabled: var(--o-color-warning4);
}
.o-select-warning.o-select-solid {
--select-bd-color: var(--o-color-warning1-light);
--select-bd-color-hover: var(--o-color-warning2-light);
--select-bd-color-focus: var(--o-color-warning3-light);
--select-bd-color-disabled: var(--o-color-warning4-light);
--select-bg-color: var(--o-color-warning1-light);
--select-bg-color-hover: var(--o-color-warning2-light);
--select-bg-color-disabled: var(--o-color-warning4-light);
}
.o-select-danger.o-select-text {
--select-color: var(--o-color-danger1);
--select-color-hover: var(--o-color-danger2);
--select-color-focus: var(--o-color-danger3);
--select-color-disabled: var(--o-color-danger4);
}
.o-select-danger.o-select-outline {
--select-bd-color: var(--o-color-danger1-light);
--select-bd-color-hover: var(--o-color-danger2-light);
--select-bd-color-focus: var(--o-color-danger3);
--select-bd-color-disabled: var(--o-color-danger4);
}
.o-select-danger.o-select-solid {
--select-bd-color: var(--o-color-danger1-light);
--select-bd-color-hover: var(--o-color-danger2-light);
--select-bd-color-focus: var(--o-color-danger3-light);
--select-bd-color-disabled: var(--o-color-danger4-light);
--select-bg-color: var(--o-color-danger1-light);
--select-bg-color-hover: var(--o-color-danger2-light);
--select-bg-color-disabled: var(--o-color-danger4-light);
}
.o-select-large {
--select-padding: 0 15px;
--select-icon-size: var(--o-icon_size_control-m);
--select-text-size: var(--o-font_size-text1);
--select-text-height: var(--o-line_height-text1);
--select-radius: var(--o-radius_control-l);
--select-height: var(--o-control_size-l);
--select-multiple-max-height: 64px;
--select-multiple-padding: 3px 15px 3px 7px;
}
.o-select-medium {
--select-padding: 0 15px;
--select-icon-size: var(--o-icon_size_control-xs);
--select-text-size: var(--o-font_size-tip1);
--select-text-height: var(--o-line_height-tip1);
--select-radius: var(--o-radius_control-s);
--select-height: var(--o-control_size-m);
--select-multiple-max-height: 64px;
--select-multiple-padding: 2px 15px 2px 7px;
--select-tag-padding: 2px 8px;
}
.o-select-small {
--select-padding: 0 8px;
--select-height: var(--o-control_size-s);
--select-text-size: var(--o-font_size-tip2);
--select-text-height: var(--o-line_height-tip2);
--select-radius: var(--o-radius_control-xs);
--select-icon-size: var(--o-icon_size_control-xs);
--select-tag-padding: 0 8px;
--select-multiple-max-height: 48px;
--select-multiple-padding: 1px 8px 1px 5px;
--select-tag-margin: 1px 2px 1px 0;
}
.o-select-round-pill {
--select-radius: var(--o-control_size-l);
overflow: hidden;
}
.o-select-options {
--select-empty-padding: 16px;
}
.o-select-dlg {
--dlg-radius: var(--o-radius_control-s);
--dlg-body-padding: 16px 24px;
--option-list-padding: 0;
}
.o-select {
display: inline-flex;
align-items: center;
padding: var(--select-padding);
color: var(--select-color);
height: var(--select-height);
border-radius: var(--select-radius);
border: 1px solid var(--select-bd-color);
background-color: var(--select-bg-color);
cursor: pointer;
background-clip: padding-box;
}
@media (hover: hover) {
.o-select:hover {
color: var(--select-color-hover);
border-color: var(--select-bd-color-hover);
background-color: var(--select-bg-color-hover);
}
}
.o-select.is-selecting {
color: var(--select-color-focus);
border-color: var(--select-bd-color-focus);
background-color: var(--select-bg-color-focus);
}
.o-select.is-multiple {
padding: var(--select-multiple-padding);
min-height: var(--select-height);
height: auto;
}
.o-select-disabled, .o-select-disabled:hover, .o-select-disabled.is-selecting {
cursor: not-allowed;
color: var(--select-color-disabled);
border-color: var(--select-bd-color-disabled);
background-color: var(--select-bg-color-disabled);
}
.o-select-input {
outline: none;
border: none;
padding: 0;
color: inherit;
cursor: inherit;
background-color: transparent;
display: inline-flex;
width: 100%;
font-size: var(--select-text-size);
line-height: var(--select-text-height);
overflow: hidden;
text-overflow: ellipsis;
}
.o-select-input::-webkit-input-placeholder {
color: var(--select-placeholder);
}
.o-select-suffix {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.o-select-suffix-icon {
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
align-items: center;
display: flex;
justify-content: center;
}
.o-select-arrow {
font-size: var(--select-icon-size);
color: var(--select-icon-color);
display: inline-flex;
align-items: center;
transform: rotate(0);
transition: transform var(--o-duration-s) var(--o-easing-standard);
}
.o-select-arrow.active {
transform: rotate(-180deg);
}
.o-select-disabled .o-select-arrow {
color: var(--select-icon-color-disabled);
}
.o-select-clear {
position: absolute;
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--select-icon-color);
background-color: var(--select-clear-bg-color);
border-radius: 50%;
z-index: 1;
}
.o-select-clear {
overflow: hidden;
}
.o-select-clear svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-select-clear:hover svg {
transform: rotate(180deg);
}
}
.o-select-loading {
position: absolute;
font-size: var(--select-icon-size);
}
.o-select-is-loading .o-select-arrow {
visibility: hidden;
opacity: 0;
}
@media (hover: hover) {
.o-select-clearable:hover .o-select-arrow {
visibility: hidden;
opacity: 0;
}
.o-select-clearable:hover .o-select-clear {
visibility: visible;
opacity: 1;
}
}
@media (hover: none) {
.o-select-clearable .o-select-clear {
visibility: visible;
opacity: 1;
}
.o-select-clearable .o-select-arrow {
visibility: hidden;
opacity: 0;
}
}
.o-select-option-wrap {
max-height: var(--option-list-max-height, var(--option-list-max-height-default));
}
.o-select-options-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
font-size: var(--o-icon_size_control-m);
}
.o-select-empty {
padding: var(--select-empty-padding);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
color: var(--o-color-info3);
}
.o-select-actions {
border-top: 1px solid var(--o-color-control4);
}
.o-select-options-dlg .o-select-options-scrollbar {
--scrollbar-y-right: calc(-1 * var(--dlg-edge-gap));
}
.o-select-value-list {
display: flex;
flex-wrap: wrap;
align-items: center;
max-height: var(--select-multiple-max-height);
}
.o-select-tags-scroller {
width: 100%;
}
.o-select-tags-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.o-select-tag {
padding: var(--select-tag-padding);
margin: var(--select-tag-margin);
min-height: var(--select-tag-min-height);
background-color: var(--select-tag-bg-color);
border-radius: var(--select-tag-radius);
font-size: var(--select-tag-text-size);
line-height: var(--select-tag-text-height);
display: inline-flex;
align-items: center;
}
.o-select-tag:last-child {
margin-right: 0;
}
.o-select-tag-remove {
font-size: var(--o-icon_size_control-xs);
margin-left: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.o-select-tag-remove {
overflow: hidden;
}
.o-select-tag-remove svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-select-tag-remove:hover svg {
transform: rotate(180deg);
}
}
.o-select-tag-popover {
max-width: var(--select-tag-popover-max-width);
--popover-padding: 6px 8px;
}
@media (max-width: 1200px) {
.o-select-options-dlg {
--select-options-padding: 0;
}
.o-select-options-dlg .o-option-checkbox {
width: 100%;
}
.o-select-options-dlg .o-checkbox-label {
margin-left: 0;
}
.o-select-options-dlg .o-checkbox-wrap {
width: 100%;
flex-direction: row-reverse;
justify-content: space-between;
}
.o-select-options-dlg .o-option-multiple {
border-radius: 0;
--option-padding: 12px 0;
--option-gap: 0;
position: relative;
}
.o-select-options-dlg .o-option-multiple::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid var(--o-color-control4);
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-select-large {
--select-icon-size: var(--o-icon_size_control-s);
}
}
@media (max-width: 1440px) {
.o-select-large {
--select-text-size: var(--o-font_size-tip1);
--select-text-height: var(--o-line_height-tip1);
}
}
.o-tab {
--tab-nav-btn-icon-size: var(--o-icon_size_control-xs);
--tab-nav-btn-size: 24px;
--tab-nav-color: var(--o-color-info2);
--tab-nav-color-disabled: var(--o-color-info4);
--tab-nav-radius: 2px;
--tab-icon-color: var(--o-color-info2);
--tab-icon-color-hover: var(--o-color-primary1);
--tab-icon-color-disabled: var(--o-color-info4);
--tab-nav-divider: 1px solid var(--o-color-control1);
--tab-nav-anchor-color: var(--o-color-primary1);
--tab-nav-anchor-height: 2px;
--tab-nav-close-size: var(--o-icon_size_control-xs);
--tab-nav-icon-size: var(--o-icon_size_control-m);
}
.o-tab-large {
--tab-nav-text-size: var(--o-font_size-h4);
--tab-nav-text-height: var(--o-line_height-h4);
--tab-nav-gap: 40px;
--tab-nav-icon-size: var(--o-icon_size_control-l);
--tab-nav-padding: 0 0 16px;
}
.o-tab-medium {
--tab-nav-text-size: var(--o-font_size-text2);
--tab-nav-text-height: var(--o-line_height-text2);
--tab-nav-gap: 32px;
--tab-nav-icon-size: var(--o-icon_size_control-m);
--tab-nav-padding: 0 0 14px;
}
.o-tab-small {
--tab-nav-text-size: var(--o-font_size-text1);
--tab-nav-text-height: var(--o-line_height-text1);
--tab-nav-gap: 24px;
--tab-nav-icon-size: var(--o-icon_size_control-xs);
--tab-nav-padding: 0 0 8px;
}
.o-tab-solid {
--tab-nav-bd-color: var(--o-color-control1-light);
--tab-nav-bd-color-hover: var(--o-color-control2-light);
--tab-nav-bd-color-active: var(--o-color-control1-light);
--tab-nav-bd-color-disabled: var(--o-color-control4-light);
--tab-nav-bg-color: var(--o-color-control1-light);
--tab-nav-bg-color-hover: var(--o-color-control2-light);
--tab-nav-bg-color-active: var(--o-color-control-light);
--tab-nav-bg-color-disabled: var(--o-color-control4-light);
--tab-solid-nav-padding: 4px 16px;
--tab-solid-nav-gap: 8px;
}
.o-tab-text {
--tab-nav-color-hover: var(--o-color-primary1);
--tab-nav-color-active: var(--o-color-primary1);
--tab-nav-bd-color: transparent;
--tab-nav-bd-color-hover: transparent;
--tab-nav-bd-color-active: var(--o-color-primary1);
}
.o-tab-navs {
display: flex;
align-items: center;
position: relative;
width: 100%;
justify-content: var(--tab-nav-justify, center);
}
.o-tab-head {
font-size: var(--tab-nav-text-size);
line-height: var(--tab-nav-text-height);
color: var(--tab-nav-color);
position: relative;
}
.o-tab-head.with-act {
display: flex;
align-items: center;
}
.o-tab-head.show-line::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: var(--tab-nav-divider);
}
.o-tab-navs-wrap {
overflow: auto;
flex: 1;
position: relative;
}
.o-tab-navs-scrollable {
display: flex;
position: relative;
align-items: center;
flex: 1;
overflow: hidden;
}
.o-tab-nav-btn {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: var(--tab-nav-btn-icon-size);
margin: 0 8px;
}
@media (hover: hover) {
.o-tab-nav-btn:hover {
color: var(--tab-icon-color-hover);
}
}
.o-tab-nav-btn-disabled, .o-tab-nav-btn-disabled:hover {
color: var(--tab-icon-color-disabled);
cursor: not-allowed;
}
.o-tab-navs-container {
min-width: 0;
}
.o-tab-nav-list {
display: inline-block;
white-space: nowrap;
}
.o-tab-nav {
display: inline-flex;
flex-shrink: 0;
align-items: center;
cursor: pointer;
border: 1px solid var(--tab-nav-bd-color);
border-bottom-width: 0;
background-color: var(--tab-nav-bg-color);
position: relative;
margin-right: var(--tab-nav-gap);
padding: var(--tab-nav-padding);
z-index: 1;
color: var(--tab-icon-color);
}
.o-tab-nav:last-child {
margin-right: 0;
}
@media (hover: hover) {
.o-tab-nav:hover {
color: var(--tab-nav-color-hover);
border-color: var(--tab-nav-bd-color-hover);
background-color: var(--tab-nav-bg-color-hover);
}
}
.o-tab-solid .o-tab-nav {
margin-right: var(--tab-solid-nav-gap);
padding: var(--tab-solid-nav-padding);
}
.o-tab-nav .o-icon {
font-size: var(--tab-nav-icon-size);
margin-right: 8px;
}
.o-tab-nav-active {
font-weight: 500;
}
.o-tab-nav-active, .o-tab-nav-active:hover {
color: var(--tab-nav-color-active);
border-color: var(--tab-nav-bd-color-active);
background-color: var(--tab-nav-bg-color-active);
}
.o-tab-nav-disabled, .o-tab-nav-disabled:hover {
cursor: not-allowed;
color: var(--tab-nav-color-disabled);
border-color: var(--tab-nav-bd-color-disabled);
background-color: var(--tab-nav-bg-color-disabled);
}
.o-tab-nav-closable {
position: relative;
padding-right: 12px;
}
.o-tab-text .o-tab-nav-closable {
padding-right: 0;
}
.o-tab-text .o-tab-nav {
border: none;
}
.o-tab-head-prefix {
flex-shrink: 0;
}
.o-tab-head-suffix {
flex-shrink: 0;
}
.o-tab-nav-anchor {
position: absolute;
left: 0;
bottom: 0;
width: 0;
z-index: 2;
transition: all var(--o-easing-standard-in) var(--o-duration-m1);
display: flex;
justify-content: center;
}
.o-tab-nav-anchor-line {
width: 100%;
height: var(--tab-nav-anchor-height);
background-color: var(--tab-nav-anchor-color);
border-radius: var(--tab-nav-anchor-height);
}
.o-tab-nav-close {
font-size: var(--tab-nav-close-size);
margin-left: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tab-icon-color);
border-radius: 50%;
}
@media (hover: hover) {
.o-tab-nav-close:hover {
color: var(--tab-icon-color-hover);
}
}
.o-tab-nav-close {
overflow: hidden;
}
.o-tab-nav-close svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-tab-nav-close:hover svg {
transform: rotate(180deg);
}
}
.o-tab-nav-add {
margin-left: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--tab-nav-btn-size);
height: var(--tab-nav-btn-size);
cursor: pointer;
color: var(--tab-icon-color);
font-size: var(--tab-nav-btn-icon-size);
border-radius: 50%;
}
@media (hover: hover) {
.o-tab-nav-add:hover {
color: var(--tab-icon-color-hover);
background-color: var(--tab-nav-bg-color-hover);
}
}
.o-tab-body {
display: flex;
}
.o-tab-pane {
flex-shrink: 0;
width: 100%;
display: none;
}
.o-tab-pane-active {
display: block;
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-tab-large {
--tab-nav-text-size: var(--o-font_size-text2);
--tab-nav-text-height: var(--o-line_height-text2);
--tab-nav-icon-size: var(--o-icon_size_control-m);
--tab-nav-gap: 32px;
}
.o-tab-large.o-tab-text {
--tab-nav-padding: 0 0 12px;
}
.o-tab-medium {
--tab-nav-text-size: var(--o-font_size-text1);
--tab-nav-text-height: var(--o-line_height-text1);
}
.o-tab-medium.o-tab-text {
--tab-nav-padding: 0 0 8px;
}
.o-tab-small {
--tab-nav-text-size: var(--o-font_size-tip1);
--tab-nav-text-height: var(--o-line_height-tip1);
--tab-nav-icon-size: var(--o-icon_size_control-s);
--tab-nav-gap: 24px;
}
.o-tab-small.o-tab-text {
--tab-nav-padding: 0 0 4px;
}
}
@media (max-width: 1200px) {
.o-tab-large {
--tab-nav-text-size: var(--o-font_size-tip1);
--tab-nav-text-height: var(--o-line_height-tip1);
--tab-nav-icon-size: var(--o-icon_size_control-s);
--tab-nav-gap: 16px;
--tab-nav-anchor-height: 1px;
}
.o-tab-large.o-tab-text {
--tab-nav-padding: 0 0 8px;
}
.o-tab-medium {
--tab-nav-text-size: var(--o-font_size-tip1);
--tab-nav-text-height: var(--o-line_height-tip1);
--tab-nav-gap: 16px;
}
.o-tab-medium.o-tab-text {
--tab-nav-padding: 0 0 2px;
}
.o-tab-medium .o-tab-nav-anchor-line {
width: 16px;
}
.o-tab-small {
--tab-nav-text-size: var(--o-font_size-tip1);
--tab-nav-text-height: var(--o-line_height-tip1);
--tab-nav-gap: 12px;
}
.o-tab-small.o-tab-text {
--tab-nav-padding: 0 0 2px;
}
.o-tab-small .o-tab-nav-anchor-line {
width: 16px;
}
}
.o-table {
--table-text-size: var(--o-font_size-text1);
--table-text-height: var(--o-line_height-text1);
--table-head-text-size: var(--table-text-size);
--table-head-text-height: var(--table-text-height);
--table-head-color: var(--o-color-info2);
--table-cell-color: var(--o-color-info1);
--table-tip-text-size: var(--o-font_size-tip1);
--table-tip-text-height: var(--o-line_height-tip1);
--table-tip-color: var(--o-color-info3);
--table-head-bg: var(--o-color-control5, var(--o-color-control-light));
--table-row-hover: var(--o-color-control2-light);
--table-row-active: var(--o-color-control3-light);
--table-border: 1px solid var(--o-color-control4);
--table-loading-mask: var(--o-color-mask2);
--table-loading-color: var(--o-color-info2);
--table-body-min-height: 200px;
--table-bg-color: var(--o-color-control5, var(--o-color-control-light));
--table-radius: var(--o-radius_control-m);
--table-head-cell-height: auto;
--table-cell-height: auto;
--table-head-cell-padding-x: 16px;
--table-head-cell-padding-y: 12px;
--table-cell-padding-x: 16px;
--table-cell-padding-y: 12px;
--table-head-cell-padding: var(--table-head-cell-padding-y) var(--table-head-cell-padding-x);
--table-cell-padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
--table-edge-padding: 32px;
}
.o-table-small {
--table-text-size: var(--o-font_size-tip1);
--table-text-height: var(--o-line_height-tip1);
--table-head-text-size: var(--table-text-size);
--table-head-text-height: var(--table-text-height);
--table-radius: var(--o-radius_control-m);
--table-head-cell-padding-y: 8px;
--table-cell-padding-y: 8px;
--table-edge-padding: 16px;
}
.o-table {
position: relative;
}
.o-table table {
width: 100%;
border-spacing: 0;
}
.o-table thead {
position: relative;
}
.o-table thead:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
background-size: 100% 1px;
}
.o-table th,
.o-table td {
box-sizing: border-box;
}
.o-table th {
text-align: left;
font-weight: 600;
background-color: var(--table-head-bg);
padding: var(--table-head-cell-padding);
font-size: var(--table-head-text-size);
line-height: var(--table-head-text-height);
color: var(--table-head-color);
height: var(--table-head-cell-height);
}
.o-table td {
padding: var(--table-cell-padding);
font-size: var(--table-text-size);
line-height: var(--table-text-height);
color: var(--table-cell-color);
height: var(--table-cell-height);
}
.o-table th:first-child, .o-table td:first-child {
padding-left: var(--table-edge-padding);
}
.o-table th:last-child, .o-table td:last-child {
padding-right: var(--table-edge-padding);
}
@media (hover: hover) {
.o-table tbody tr:hover:hover {
background-color: var(--table-row-hover);
}
}
.o-table tbody tr:active {
background-color: var(--table-row-active);
}
.o-table-wrap {
border-radius: var(--table-radius);
overflow: hidden;
background-color: var(--table-bg-color);
}
.o-table-border-all,
.o-table-border-frame {
border: var(--table-border);
}
.o-table-border-all td,
.o-table-border-row td {
border-bottom: var(--table-border);
}
.o-table-border-all tr.last td,
.o-table-border-frame tr.last td,
.o-table-border-row tr.last td {
border-bottom-color: transparent;
}
.o-table-border-all th,
.o-table-border-all td,
.o-table-border-column th,
.o-table-border-column td {
border-right: var(--table-border);
}
.o-table-border-all th.last,
.o-table-border-all td.last,
.o-table-border-column th.last,
.o-table-border-column td.last {
border-right-color: transparent;
}
.o-table-tip-wrap {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--table-tip-text-size);
line-height: var(--table-tip-text-height);
color: var(--table-tip-color);
min-height: var(--table-body-min-height);
}
.o-table-loading-wrap {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--table-tip-text-size);
line-height: var(--table-tip-text-height);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--table-loading-mask);
color: var(--table-loading-color);
border-radius: var(--table-radius);
}
.o-table-loading-label {
margin-left: 8px;
}
@media (min-width: 0px) and (max-width: 1680px) {
.o-table-medium {
--table-text-size: var(--o-font_size-tip1);
--table-text-height: var(--o-line_height-tip1);
--table-head-cell-padding-y: 8px;
--table-cell-padding-y: 8px;
--table-edge-padding: 24px;
}
}
@media (max-width: 1200px) {
.o-table-medium {
--table-radius: var(--o-radius_control-s);
--table-head-cell-padding-x: 12px;
--table-cell-padding-x: 12px;
--table-edge-padding: 20px;
}
}
@media (max-width: 840px) {
.o-table-medium {
--table-text-size: var(--o-font_size-tip2);
--table-text-height: var(--o-line_height-tip2);
--table-head-cell-padding-x: 8px;
--table-cell-padding-x: 8px;
--table-edge-padding: 8px;
}
}
@media (max-width: 1200px) {
.o-table-small {
--table-text-size: var(--o-font_size-tip2);
--table-text-height: var(--o-line_height-tip2);
--table-head-cell-padding-x: 8px;
--table-cell-padding-x: 8px;
--table-edge-padding: 8px;
--table-radius: var(--o-radius_control-s);
}
}
.o-pagination {
--pagination-item-size: var(--o-control_size-m);
--pagination-arrow-size: var(--o-control_size-s);
--pagination-item-gap: 24px;
--pagination-arrow-color: var(--o-color-info2);
--pagination-arrow-color-hover: var(--o-color-info1);
--pagination-arrow-color-active: var(--o-color-info3);
--pagination-arrow-color-disabled: var(--o-color-info4);
--pagination-item-color: var(--o-color-info2);
--pagination-item-color-hover: var(--o-color-primary2);
--pagination-item-color-active: var(--o-color-primary1);
--pagination-item-color-current: var(--o-color-primary1);
--pagination-item-bd-color: transparent;
--pagination-item-bd-color-hover: transparent;
--pagination-item-bd-color-active: transparent;
--pagination-item-bd-color-current: transparent;
--pagination-item-bd-color-disabled: transparent;
--pagination-radius: var(--o-radius_control-s);
}
.o-pagination-outline {
--pagination-arrow-bd-color: var(--o-color-control1);
--pagination-arrow-bd-color-hover: var(--o-color-control2);
--pagination-arrow-bd-color-active: var(--o-color-control3);
--pagination-arrow-bd-color-current: var(--o-color-primary1);
--pagination-arrow-bd-color-disabled: var(--o-color-control4);
}
.o-pagination-solid {
--pagination-item-color-current: var(--o-color-primary1);
--pagination-item-bg-color: transparent;
--pagination-item-bg-color-hover: var(--o-color-control2-light);
--pagination-item-bg-color-active: var(--o-color-control3-light);
--pagination-item-bg-color-current: var(--o-color-primary1-light);
--pagination-arrow-bg-color: transparent;
--pagination-arrow-bg-color-hover: var(--o-color-control2-light);
--pagination-arrow-bg-color-active: var(--o-color-control3-light);
--pagination-arrow-bg-color-current: var(--o-color-primary1-light);
--pagination-arrow-bg-color-disabled: var(--o-color-control4-light);
}
.o-pagination-round-pill {
--pagination-radius: var(--pagination-item-size);
}
.o-pagination {
color: var(--o-color-info2);
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.o-pagination-wrap {
display: flex;
align-items: center;
white-space: nowrap;
}
.o-pagination-wrap > *:not(:first-child) {
margin-left: var(--pagination-item-gap);
}
.o-pagination-pager {
display: flex;
user-select: none;
}
.o-pagination-prev,
.o-pagination-next {
width: var(--pagination-item-size);
height: var(--pagination-item-size);
display: inline-flex;
justify-content: center;
align-items: center;
font-size: var(--pagination-arrow-size);
color: var(--pagination-arrow-color);
border: 1px solid var(--pagination-arrow-bd-color);
background-color: var(--pagination-arrow-bg-color);
cursor: pointer;
user-select: none;
border-radius: var(--pagination-radius);
}
@media (hover: hover) {
.o-pagination-prev:hover,
.o-pagination-next:hover {
color: var(--pagination-arrow-color-hover);
border-color: var(--pagination-arrow-bd-color-hover);
background-color: var(--pagination-arrow-bg-color-hover);
}
}
.o-pagination-prev:active,
.o-pagination-next:active {
color: var(--pagination-arrow-color-active);
border-color: var(--pagination-arrow-bd-color-active);
background-color: var(--pagination-arrow-bg-color-active);
}
.o-pagination-prev.is-disabled,
.o-pagination-next.is-disabled {
cursor: not-allowed;
color: var(--pagination-arrow-color-disabled);
border: 1px solid var(--pagination-arrow-bd-color-disabled);
background-color: var(--pagination-arrow-bg-color-disabled);
}
.o-pagination-pages {
margin-left: 8px;
margin-right: 8px;
display: flex;
align-items: center;
}
.o-pagination-item {
width: var(--pagination-item-size);
height: var(--pagination-item-size);
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: var(--pagination-item-color);
border: 1px solid var(--pagination-item-bd-color);
background-color: var(--pagination-item-bg-color);
border-radius: var(--pagination-radius);
transition: all var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-pagination-item + .o-pagination-item {
margin-left: 8px;
}
@media (hover: hover) {
.o-pagination-item:hover {
color: var(--pagination-item-color-hover);
border: 1px solid var(--pagination-item-bd-color-hover);
background-color: var(--pagination-item-bg-color-hover);
}
}
.o-pagination-item:active {
color: var(--pagination-item-color-active);
border: 1px solid var(--pagination-item-bd-color-active);
background-color: var(--pagination-item-bg-color-active);
font-weight: 500;
}
.o-pagination-item.active {
color: var(--pagination-item-color-current);
border: 1px solid var(--pagination-item-bd-color-current);
background-color: var(--pagination-item-bg-color-current);
font-weight: 500;
}
.o-pagination-more-popup {
min-width: 64px;
max-height: 200px;
overflow: auto;
}
.o-pagination-more-item {
cursor: pointer;
justify-content: center;
}
.o-pagination-input {
width: 60px;
}
.o-pagination-goto .o-pagination-input {
margin-left: 8px;
}
.o-pagination-select {
width: 110px;
}
.o-table + .o-pagination {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
.o-pagination .o-input-input {
text-align: center;
}
.o-pagination-more-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.o-pagination-more-icon {
font-size: var(--o-icon_size_control-xs);
display: inline-flex;
}
.o-pagination-more-icon-wrap:hover .o-pagination-more-icon {
display: none;
}
.o-pagination-more-arrow-icon {
font-size: var(--o-icon_size_control-xs);
display: none;
}
.o-pagination-more-icon-wrap:hover .o-pagination-more-arrow-icon {
display: inline-flex;
}
.o-pagination-virtual-more-list {
max-height: inherit;
}
.o-radio {
--radio-text-size: var(--o-font_size-text1);
--radio-text-height: var(--o-line_height-text1);
--radio-align: center;
--radio-label-gap: 8px;
--radio-color: var(--o-color-info1);
--radio-color-disabled: var(--o-color-info4);
--radio-input-wrap-size: var(--o-control_size-s);
--radio-input-size: var(--o-control_size-xs);
--radio-input-bg-color: var(--o-color-control-light);
--radio-input-bg-color-disabled: var(--o-color-control4-light);
--radio-input-bg-color-checked: var(--o-color-primary1);
--radio-input-bg-color-checked-hover: var(--o-color-primary2);
--radio-input-bg-color-checked-active: var(--o-color-primary3);
--radio-input-bg-color-checked-disabled: var(--o-color-primary4);
--radio-input-bd-color: var(--o-color-control1);
--radio-input-bd-color-hover: var(--o-color-primary2);
--radio-input-bd-color-active: var(--o-color-primary3);
--radio-input-bd-color-disabled: var(--o-color-control4);
--radio-input-bd-color-checked: var(--o-color-primary1);
--radio-input-bd-color-checked-hover: var(--o-color-primary2);
--radio-input-bd-color-checked-active: var(--o-color-primary3);
--radio-input-bd-color-checked-disabled: var(--o-color-primary4);
--radio-input-icon-size: calc(var(--radio-input-size) / 2);
--radio-input-icon-color: var(--o-color-white);
}
.o-radio {
color: var(--radio-color);
font-size: var(--radio-text-size);
line-height: var(--radio-text-height);
cursor: pointer;
}
@media (hover: hover) {
.o-radio:hover .o-radio-input {
border-color: var(--radio-input-bd-color-hover);
}
}
.o-radio:active .o-radio-input {
border-color: var(--radio-input-bd-color-active);
}
.o-radio-wrap {
position: relative;
display: flex;
align-items: var(--radio-align);
height: 100%;
}
.o-radio-wrap input[type=radio] {
position: absolute;
outline: none;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.o-radio-input-wrap {
display: flex;
justify-content: center;
align-items: center;
width: var(--radio-input-wrap-size);
height: var(--radio-input-wrap-size);
}
.o-radio-input {
position: relative;
width: var(--radio-input-size);
height: var(--radio-input-size);
background-color: var(--radio-input-bg-color);
border: 1px solid var(--radio-input-bd-color);
border-radius: 50%;
flex-shrink: 0;
transition: all var(--o-duration-s) var(--o-easing-standard);
}
.o-radio-input::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--radio-input-icon-size);
height: var(--radio-input-icon-size);
border-radius: 50%;
opacity: 0;
background-color: var(--radio-input-icon-color);
transition: opacity var(--o-duration-s) var(--o-easing-standard), opacity var(--o-duration-s) var(--o-easing-standard);
}
.o-radio-label {
margin-left: var(--radio-label-gap);
}
.o-radio-checked .o-radio-input {
background-color: var(--radio-input-bg-color-checked);
border-color: var(--radio-input-bd-color-checked);
}
.o-radio-checked .o-radio-input::after {
opacity: 1;
}
@media (hover: hover) {
.o-radio-checked:hover .o-radio-input {
background-color: var(--radio-input-bg-color-checked-hover);
border-color: var(--radio-input-bd-color-checked-hover);
}
}
.o-radio-checked:active .o-radio-input {
background-color: var(--radio-input-bg-color-checked-active);
border-color: var(--radio-input-bd-color-checked-active);
}
.o-radio-disabled, .o-radio-disabled:hover, .o-radio-disabled.active {
cursor: not-allowed;
color: var(--radio-color-disabled);
}
.o-radio-disabled .o-radio-input, .o-radio-disabled:hover .o-radio-input, .o-radio-disabled.active .o-radio-input {
background-color: var(--radio-input-bg-color-disabled);
border-color: var(--radio-input-bd-color-disabled);
}
.o-radio-checked.o-radio-disabled .o-radio-input, .o-radio-checked.o-radio-disabled:hover .o-radio-input, .o-radio-checked.o-radio-disabled.active .o-radio-input {
background-color: var(--radio-input-bg-color-checked-disabled);
border-color: var(--radio-input-bd-color-checked-disabled);
}
@media (max-width: 1440px) {
.o-radio {
--radio-text-size: var(--o-font_size-tip1);
--radio-text-height: var(--o-line_height-tip1);
}
}
.o-radio-group-h {
--radio-group-gap: 24px;
}
.o-radio-group-v {
--radio-group-gap: 16px;
}
.o-radio-group {
display: inline-flex;
flex-wrap: wrap;
}
.o-radio-group-h .o-radio + .o-radio {
margin-left: var(--radio-group-gap);
}
.o-radio-group-v {
flex-direction: column;
}
.o-radio-group-v .o-radio + .o-radio {
margin-top: var(--radio-group-gap);
}
.o-checkbox {
--checkbox-text-size: var(--o-font_size-text1);
--checkbox-text-height: var(--o-line_height-text1);
--checkbox-label-gap: 8px;
--checkbox-align: center;
--checkbox-color: var(--o-color-info1);
--checkbox-color-disabled: var(--o-color-info4);
--checkbox-radius: var(--o-radius_control-xs);
--checkbox-input-wrap-size: var(--o-control_size-s);
--checkbox-input-size: var(--o-control_size-xs);
--checkbox-input-bg-color: var(--o-color-control-light);
--checkbox-input-bg-color-disabled: var(--o-color-control4-light);
--checkbox-input-bg-color-checked: var(--o-color-primary1);
--checkbox-input-bg-color-checked-hover: var(--o-color-primary2);
--checkbox-input-bg-color-checked-active: var(--o-color-primary3);
--checkbox-input-bg-color-checked-disabled: var(--o-color-primary4);
--checkbox-input-bd-color: var(--o-color-control1);
--checkbox-input-bd-color-hover: var(--o-color-primary2);
--checkbox-input-bd-color-active: var(--o-color-primary3);
--checkbox-input-bd-color-disabled: var(--o-color-control4);
--checkbox-input-bd-color-checked: var(--o-color-primary1);
--checkbox-input-bd-color-checked-hover: var(--o-color-primary2);
--checkbox-input-bd-color-checked-active: var(--o-color-primary3);
--checkbox-input-bd-color-checked-disabled: var(--o-color-primary4);
--checkbox-input-icon-size: calc(var(--checkbox-input-size) / 2);
--checkbox-input-icon-color: var(--o-color-white);
}
.o-checkbox {
color: var(--checkbox-color);
font-size: var(--checkbox-text-size);
line-height: var(--checkbox-text-height);
cursor: pointer;
}
@media (hover: hover) {
.o-checkbox:hover .o-checkbox-input {
border-color: var(--checkbox-input-bd-color-hover);
}
}
.o-checkbox:active .o-checkbox-input {
border-color: var(--checkbox-input-bd-color-active);
}
.o-checkbox-wrap {
display: flex;
align-items: var(--checkbox-align);
position: relative;
height: 100%;
}
.o-checkbox-wrap input[type=checkbox] {
position: absolute;
outline: none;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.o-checkbox-input-wrap {
display: flex;
justify-content: center;
align-items: center;
width: var(--checkbox-input-wrap-size);
height: var(--checkbox-input-wrap-size);
}
.o-checkbox-input {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: var(--checkbox-input-size);
height: var(--checkbox-input-size);
background-color: var(--checkbox-input-bg-color);
font-size: calc(var(--checkbox-input-icon-size) * 2);
border: 1px solid var(--checkbox-input-bd-color);
border-radius: var(--checkbox-radius);
flex-shrink: 0;
transition: border-color var(--o-duration-s) var(--o-easing-standard), background-color var(--o-duration-s) var(--o-easing-standard);
}
.o-checkbox-input svg {
width: 24px;
height: 24px;
color: var(--checkbox-input-icon-color);
}
.o-checkbox-label {
margin-left: var(--checkbox-label-gap);
}
.o-checkbox-checked .o-checkbox-input,
.o-checkbox-indeterminate .o-checkbox-input {
background-color: var(--checkbox-input-bg-color-checked);
border-color: var(--checkbox-input-bd-color-checked);
}
@media (hover: hover) {
.o-checkbox-checked:hover .o-checkbox-input,
.o-checkbox-indeterminate:hover .o-checkbox-input {
background-color: var(--checkbox-input-bg-color-checked-hover);
border-color: var(--checkbox-input-bd-color-checked-hover);
}
}
.o-checkbox-checked:active .o-checkbox-input,
.o-checkbox-indeterminate:active .o-checkbox-input {
background-color: var(--checkbox-input-bg-color-checked-active);
border-color: var(--checkbox-input-bd-color-checked-active);
}
.o-checkbox-input-icon-indeterminate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--checkbox-input-icon-size);
height: var(--checkbox-input-icon-size);
background-color: var(--checkbox-input-icon-color);
border-radius: calc(var(--checkbox-input-icon-size) / 4);
}
.o-checkbox-disabled, .o-checkbox-disabled:hover, .o-checkbox-disabled.active {
cursor: not-allowed;
color: var(--checkbox-color-disabled);
}
.o-checkbox-disabled .o-checkbox-input, .o-checkbox-disabled:hover .o-checkbox-input, .o-checkbox-disabled.active .o-checkbox-input {
background-color: var(--checkbox-input-bg-color-disabled);
border-color: var(--checkbox-input-bd-color-disabled);
}
.o-checkbox-checked.o-checkbox-disabled .o-checkbox-input, .o-checkbox-checked.o-checkbox-disabled:hover .o-checkbox-input, .o-checkbox-checked.o-checkbox-disabled.active .o-checkbox-input,
.o-checkbox-indeterminate.o-checkbox-disabled .o-checkbox-input,
.o-checkbox-indeterminate.o-checkbox-disabled:hover .o-checkbox-input,
.o-checkbox-indeterminate.o-checkbox-disabled.active .o-checkbox-input {
background-color: var(--checkbox-input-bg-color-checked-disabled);
border-color: var(--checkbox-input-bd-color-checked-disabled);
}
@media (max-width: 1440px) {
.o-checkbox {
--checkbox-text-size: var(--o-font_size-tip1);
--checkbox-text-height: var(--o-line_height-tip1);
}
}
.o-checkbox-group-h {
--checkbox-group-gap: 24px;
}
.o-checkbox-group-v {
--checkbox-group-gap: 16px;
}
.o-checkbox-group {
display: inline-flex;
flex-wrap: wrap;
vertical-align: middle;
}
.o-checkbox-group-h .o-checkbox + .o-checkbox {
margin-left: var(--checkbox-group-gap);
}
.o-checkbox-group-v {
flex-direction: column;
}
.o-checkbox-group-v .o-checkbox + .o-checkbox {
margin-top: var(--checkbox-group-gap);
}
.o-rate {
--rate-color: var(--o-color-control1);
}
.o-rate-normal {
--rate-color-selected: rgb(var(--o-yellow-6));
}
.o-rate-primary {
--rate-color-selected: var(--o-color-primary1);
}
.o-rate-success {
--rate-color-selected: var(--o-color-success1);
}
.o-rate-warning {
--rate-color-selected: var(--o-color-warning1);
}
.o-rate-danger {
--rate-color-selected: var(--o-color-danger1);
}
.o-rate-large {
--rate-size: var(--o-icon_size_control-l);
--rate-gap: 12px;
}
.o-rate-medium {
--rate-size: var(--o-icon_size_control-xs);
--rate-gap: 8px;
}
.o-rate-popover {
--rate-popover-color: var(--o-color-info1);
--rate-popover-text-size: var(--o-font_size-tip1);
--rate-popover-text-height: var(--o-line_height-tip2);
--rate-popover-radius: var(--o-radius_control-s);
--rate-popover-padding: 2px 8px;
}
.o-rate {
display: inline-flex;
align-items: center;
user-select: none;
font-size: var(--rate-size);
cursor: pointer;
}
.o-rate-readonly {
cursor: auto;
}
.o-rate-item {
position: relative;
}
.o-rate-item.is-half .o-rate-icon-top svg > *:nth-child(2) {
color: var(--rate-color-selected);
}
.o-rate-item.is-full .o-rate-icon-bottom svg > * {
color: var(--rate-color-selected);
}
.o-rate-item + .o-rate-item {
margin-left: var(--rate-gap);
}
.o-rate-icon svg > * {
transition: all var(--o-duration-m1) var(--o-easing-standard);
}
.o-rate-icon-top {
position: absolute;
top: 0;
left: 0;
width: 50%;
overflow: hidden;
}
.o-rate-icon-top svg {
color: transparent;
}
.o-rate-icon-bottom svg {
color: transparent;
}
.o-rate-icon-bottom svg > *:nth-child(1) {
color: var(--rate-color);
}
.o-rate-popover {
border-radius: var(--rate-popover-radius);
}
.o-rate-popover .o-popover-body {
color: var(--rate-popover-color);
font-size: var(--rate-popover-text-size);
line-height: var(--rate-popover-text-height);
padding: var(--rate-popover-padding);
min-width: auto;
}
.o-tag {
--tag-radius: var(--o-radius_control-xs);
}
.o-tag-normal {
--tag-color: var(--o-color-info1);
--tag-bg-color: var(--o-color-control1-light);
--tag-bd-color: var(--o-color-control1-light);
--tag-icon-close-color: var(--o-color-info2);
--tag-icon-close-color-hover: var(--o-color-info1);
--tag-icon-close-color-active: var(--o-color-info1);
}
.o-tag-normal.o-tag-outline {
--tag-bg-color: transparent;
--tag-bd-color: var(--o-color-control1);
--tag-icon-close-color: var(--o-color-info2);
--tag-icon-close-color-hover: var(--o-color-info1);
--tag-icon-close-color-active: var(--o-color-info1);
}
.o-tag-primary {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-primary1);
--tag-bd-color: var(--o-color-primary1);
--tag-icon-close-color: var(--o-color-white);
--tag-icon-close-color-hover: var(--o-color-white);
--tag-icon-close-color-active: var(--o-color-white);
}
.o-tag-primary.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-primary1);
--tag-icon-close-color: var(--o-color-primary1);
--tag-icon-close-color-hover: var(--o-color-primary2);
--tag-icon-close-color-active: var(--o-color-primary3);
}
.o-tag-success {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-success1);
--tag-bd-color: var(--o-color-success1);
--tag-icon-close-color: var(--o-color-white);
--tag-icon-close-color-hover: var(--o-color-white);
--tag-icon-close-color-active: var(--o-color-white);
}
.o-tag-success.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-success1);
--tag-icon-close-color: var(--o-color-success1);
--tag-icon-close-color-hover: var(--o-color-success2);
--tag-icon-close-color-active: var(--o-color-success3);
}
.o-tag-warning {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-warning1);
--tag-bd-color: var(--o-color-warning1);
--tag-icon-close-color: var(--o-color-white);
--tag-icon-close-color-hover: var(--o-color-white);
--tag-icon-close-color-active: var(--o-color-white);
}
.o-tag-warning.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-warning1);
--tag-icon-close-color: var(--o-color-warning1);
--tag-icon-close-color-hover: var(--o-color-warning2);
--tag-icon-close-color-active: var(--o-color-warning3);
}
.o-tag-danger {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-danger1);
--tag-bd-color: var(--o-color-danger1);
--tag-icon-close-color: var(--o-color-white);
--tag-icon-close-color-hover: var(--o-color-white);
--tag-icon-close-color-active: var(--o-color-white);
}
.o-tag-danger.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-danger1);
--tag-icon-close-color: var(--o-color-danger1);
--tag-icon-close-color-hover: var(--o-color-danger2);
--tag-icon-close-color-active: var(--o-color-danger3);
}
.o-tag-medium {
--tag-padding: 2px 12px;
--tag-text-size: var(--o-font_size-tip2);
--tag-text-height: var(--o-line_height-tip2);
--tag-height: var(--o-control_size-s);
--tag-icon-size: var(--o-icon_size_control-xs);
--tag-icon-gap: 4px;
}
.o-tag-small {
--tag-padding: 0 6px;
--tag-text-size: var(--o-font_size-tip2);
--tag-text-height: var(--o-line_height-tip2);
--tag-height: var(--o-control_size-xs);
--tag-icon-size: var(--o-icon_size_control-xs);
--tag-icon-gap: 2px;
}
.o-tag-round-pill {
--tag-radius: var(--o-control_size-l);
}
.o-tag {
height: var(--tag-height);
border: 1px solid var(--tag-bd-color);
border-radius: var(--tag-radius);
padding: var(--tag-padding);
background-color: var(--tag-bg-color);
color: var(--tag-color);
display: inline-flex;
align-items: center;
justify-content: center;
}
.o-tag-label {
white-space: nowrap;
font-size: var(--tag-text-size);
line-height: var(--tag-text-height);
}
.o-tag-small .o-tag-label,
.o-tag-small .o-tag-icon,
.o-tag-small .o-tag-close {
transform: scale(0.833334);
}
.o-tag-icon {
font-size: var(--tag-icon-size);
margin-right: var(--tag-icon-gap);
}
.o-tag-close {
cursor: pointer;
color: var(--tag-icon-close-color);
font-size: var(--tag-icon-size);
margin-left: var(--tag-icon-gap);
transition: color var(--o-duration-s) var(--o-easing-standard);
}
.o-tag-close {
overflow: hidden;
}
.o-tag-close svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-tag-close:hover svg {
transform: rotate(180deg);
}
}
@media (hover: hover) {
.o-tag-close:hover {
color: var(--tag-icon-close-color-hover);
}
}
.o-tag-close:active {
color: var(--tag-icon-close-color-active);
}
@media (max-width: 1200px) {
.o-tag-medium {
--tag-padding: 0 6px;
--tag-text-size: var(--o-font_size-tip2);
--tag-text-height: var(--o-line_height-tip2);
--tag-height: var(--o-control_size-xs);
--tag-icon-size: var(--o-icon_size_control-xs);
}
.o-tag-medium .o-tag-label,
.o-tag-medium .o-tag-icon,
.o-tag-medium .o-tag-close {
transform: scale(0.833334);
}
}
.o-badge {
--badge-text-size: var(--o-font_size-tip2);
--badge-text-height: var(--o-line_height-tip2);
--badge-radius: var(--o-control_size-l);
--badge-padding: 2px;
--badge-min-width: 12px;
--badge-dot-size: 4px;
--badge-height: 12px;
}
.o-badge-primary {
--badge-color: var(--o-color-white);
--badge-bg-color: var(--o-color-primary1);
}
.o-badge-success {
--badge-color: var(--o-color-white);
--badge-bg-color: var(--o-color-success1);
}
.o-badge-warning {
--badge-color: var(--o-color-white);
--badge-bg-color: var(--o-color-warning1);
}
.o-badge-danger {
--badge-color: var(--o-color-white);
--badge-bg-color: var(--o-color-danger1);
}
.o-badge {
position: relative;
display: inline-block;
}
.o-badge-content {
position: absolute;
top: 0;
right: 0;
transform: translate(100%, -50%);
transform-origin: 100% 0;
min-width: var(--badge-min-width);
font-size: var(--badge-text-size);
line-height: var(--badge-text-height);
text-align: center;
color: var(--badge-color);
background-color: var(--badge-bg-color);
padding-left: var(--badge-padding);
padding-right: var(--badge-padding);
border-radius: var(--badge-radius);
display: flex;
align-items: center;
justify-content: center;
height: var(--badge-height);
}
.o-badge-label {
display: inline-block;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
font-size: var(--badge-text-size);
line-height: var(--badge-text-height);
transform: scale(0.66667);
}
.o-badge-dot .o-badge-content {
height: var(--badge-dot-size);
width: var(--badge-dot-size);
padding: 0;
border-radius: 50%;
min-width: unset;
}
.o-badge-only .o-badge-content {
position: relative;
top: unset;
right: unset;
transform: none;
display: inline-flex;
}
@media (max-width: 1200px) {
.o-badge {
--badge-dot-size: 6px;
}
}
.o-divider {
--o-divider-color: var(--o-color-info1);
--o-divider-text-size: var(--o-font_size-text1);
--o-divider-text-height: var(--o-line_height-text1);
--o-divider-label-gap: 0 12px;
--o-divider-bd-color: var(--o-color-control4);
--o-divider-gap: 12px;
}
.o-divider-h {
--o-divider-gap: 12px;
}
.o-divider-v {
--o-divider-gap: 12px;
}
.o-divider-darker {
--o-divider-bd-color: var(--o-color-control1);
}
.o-divider {
color: var(--o-divider-color);
font-size: var(--o-divider-text-size);
line-height: var(--o-divider-text-height);
font-weight: 500;
}
.o-divider-h {
display: flex;
align-items: center;
width: 100%;
margin: var(--o-divider-gap) 0;
}
.o-divider-line {
width: 100%;
height: 1px;
border-width: 1px 0 0 0;
border-color: var(--o-divider-bd-color);
}
.o-divider-label {
margin: var(--o-divider-label-gap);
white-space: nowrap;
}
.o-divider-label-left .o-divider-line:nth-child(1) {
width: 28px;
}
.o-divider-label-right .o-divider-line:nth-child(3) {
width: 28px;
}
.o-divider-v {
display: inline-block;
width: 1px;
height: 1em;
margin: var(--o-divider-label-gap);
vertical-align: middle;
border-width: 0 0 0 1px;
border-color: var(--o-divider-bd-color);
}
.o-divider-solid.o-divider-v,
.o-divider-solid .o-divider-line {
border-style: solid;
}
.o-divider-dashed.o-divider-v,
.o-divider-dashed .o-divider-line {
border-style: dashed;
}
.o-divider-dotted.o-divider-v,
.o-divider-dotted .o-divider-line {
border-style: dotted;
}
@media (max-width: 1200px) {
.o-divider {
--o-divider-text-size: var(--o-font_size-tip1);
--o-divider-text-height: var(--o-line_height-tip1);
}
.o-divider-line {
transform: scaleY(0.5);
}
.o-divider-v {
transform: scaleX(0.5);
}
}
.o-form {
--form-item-display: flex;
--form-item-gap: 24px;
--form-label-main-gap: 32px;
--form-label-gap-top: 4px;
--form-msg-gap: 4px 0 0 16px;
}
.o-form-layout-h {
--form-label-width: 20%;
--form-label-max-width: 240px;
--form-item-align: flex-start;
}
.o-form-layout-v {
--form-label-width: 100%;
--form-label-justify: flex-start;
}
.o-form-layout-inline {
display: flex;
flex-wrap: wrap;
}
.o-form-layout-inline .o-form-item {
margin: 0 var(--form-item-gap) var(--form-item-gap) 0;
}
.o-form-layout-h.o-form-has-required .o-form-require-symbol {
display: block;
}
.o-form-layout-h .o-form-item,
.o-form-layout-v .o-form-item {
margin-bottom: var(--form-item-gap);
}
.o-form-layout-h .o-form-item:last-child,
.o-form-layout-v .o-form-item:last-child {
margin-bottom: 0;
}
.o-form-item-danger.o-form-item,
.o-form-item-warning.o-form-item {
margin-bottom: 0;
}
.o-form-layout-v .o-form-item {
display: block;
}
.o-form-item {
display: var(--form-item-display, flex);
align-items: var(--form-item-align);
}
.o-form-item-label {
display: inline-flex;
align-items: center;
max-width: var(--form-label-max-width);
justify-content: var(--form-label-justify);
flex: 0 0 var(--form-label-width);
width: var(--form-label-width);
}
.o-form-layout-h .o-form-item-label, .o-form-layout-inline .o-form-item-label {
margin: var(--form-label-gap-top) 0;
}
.o-form-layout-h .o-form-item-label + .o-form-item-main, .o-form-layout-inline .o-form-item-label + .o-form-item-main {
margin-left: var(--form-label-main-gap);
}
.o-form-require-symbol {
color: var(--o-color-danger1);
font-size: var(--o-font_size-tip2);
line-height: 1;
margin-right: 4px;
font-family: monospace;
opacity: 0;
transition: opacity var(--o-easing-linear) var(--o-duration-m3);
display: none;
font-weight: bold;
}
.o-form-require-symbol.visible {
opacity: 1;
display: block;
}
.o-form-item-main {
flex: 1;
}
.o-form-item-main-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 32px;
}
.o-form-item-extra {
margin-top: 4px;
font-size: var(--o-font_size-tip2);
line-height: var(--o-line_height-tip2);
color: var(--o-color-info3);
}
.o-form-item-message {
padding: var(--form-msg-gap);
font-size: var(--o-font_size-tip2);
line-height: var(--o-line_height-tip2);
color: var(--o-color-info3);
min-height: var(--form-item-gap);
}
.o-form-item-message.type-warning {
color: var(--o-color-warning1);
}
.o-form-item-message.type-danger {
color: var(--o-color-danger1);
}
@media (max-width: 600px) {
.o-form {
--form-msg-gap: 4px 0 0 12px;
}
}
.o-menu {
--menu-width: 240px;
--menu-bg-color: transparent;
--menu-indicator-width: 1px;
--menu-indicator-bg-color: var(--o-color-control4);
--menu-max-row: 1;
--menu-color: var(--o-color-info2);
--menu-color-disabled: var(--o-color-info4);
--menu-color-selected: var(--o-color-primary1);
--menu-bg-color-hover: var(--o-color-control2-light);
--menu-bg-color-selected: var(--o-color-control3-light);
--menu-icon-color: currentColor;
--menu-icon-color-selected: currentColor;
--menu-base-indent: calc(var(--menu-icon-size) + var(--menu-icon-gap));
}
.o-menu-medium {
--menu-item-padding-v: 8px;
--menu-padding-h: 8px;
--menu-radius: var(--o-radius_control-xs);
--menu-text-size: var(--o-font_size-tip1);
--menu-text-height: var(--o-line_height-tip1);
--menu-icon-size: var(--o-icon_size_control-m);
--menu-icon-gap: 8px;
--menu-arrow-size: var(--o-icon_size_control-m);
}
.o-menu-medium .o-sub-menu[data-level="0"] > .o-sub-menu-title, .o-menu-medium .o-menu-item[data-level="0"] {
--menu-item-padding-v: 11px;
--menu-text-size: var(--o-font_size-text1);
--menu-text-height: var(--o-line_height-text1);
}
.o-menu-small {
--menu-item-padding-v: 4px;
--menu-padding-h: 4px;
--menu-radius: var(--o-radius_control-xs);
--menu-text-size: var(--o-font_size-tip1);
--menu-text-height: var(--o-line_height-tip1);
--menu-icon-size: var(--o-icon_size_control-xs);
--menu-icon-gap: 4px;
--menu-arrow-size: var(--o-icon_size_control-xs);
}
.o-menu-item,
.o-sub-menu {
--menu-level-indent: calc(var(--menu-padding-h) + (var(--menu-base-indent)) * (var(--menu-level)));
}
.o-menu-arrow-left .o-sub-menu {
--menu-level-indent: calc((var(--menu-base-indent)) * (var(--menu-level)));
}
.o-menu-arrow-left .o-menu-item {
--menu-level-indent: calc((var(--menu-base-indent)) * (var(--menu-level)) + var(--menu-arrow-size) + var(--menu-icon-gap));
}
.o-menu-popover {
--menu-popover-width: 240px;
}
.o-menu-arrow-left {
--menu-max-row: 2;
--sub-menu-base-indent: calc(var(--menu-arrow-size) + var(--menu-icon-gap));
--menu-item-base-indent: calc(20px + var(--menu-icon-gap));
}
.o-menu-arrow-left.o-menu-small {
--menu-item-base-indent: 24px;
}
.o-menu > .o-menu-item {
--menu-item-level-indent: var(--menu-padding-h);
}
.o-menu {
width: var(--menu-width);
background-color: var(--menu-bg-color);
list-style: none;
margin: 0;
padding: 0;
color: var(--menu-color);
}
/* 项目样式 */
.o-sub-menu-title,
.o-menu-item {
font-size: var(--menu-text-size);
line-height: var(--menu-text-height);
padding: var(--menu-item-padding-v) var(--menu-padding-h) var(--menu-item-padding-v) var(--menu-level-indent);
margin: 1px 0;
border-radius: var(--menu-radius);
cursor: pointer;
transition: all var(--o-duration-s) var(--o-easing-standard);
display: flex;
align-items: flex-start;
}
@media (hover: hover) {
.o-sub-menu-title:hover,
.o-menu-item:hover {
background-color: var(--menu-bg-color-hover);
}
}
.o-sub-menu-selected > .o-sub-menu-title,
.o-sub-menu-associated-selected > .o-sub-menu-title,
.o-menu-item-selected {
font-weight: 600;
color: var(--menu-color-selected);
--menu-icon-color: var(--menu-icon-color-selected);
}
.o-menu-item-selected {
background-color: var(--menu-bg-color-selected);
}
@media (hover: hover) {
.o-menu-item-selected:hover {
background-color: var(--menu-bg-color-selected);
}
}
.o-sub-menu-title {
position: relative;
display: flex;
align-items: flex-start;
}
.o-sub-menu-title-icon,
.o-menu-item-icon {
color: var(--menu-icon-color);
margin-right: var(--menu-icon-gap);
font-size: var(--menu-icon-size);
height: var(--menu-text-height);
width: var(--menu-icon-size);
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.o-sub-menu-title-content,
.o-menu-item-content {
margin-right: auto;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--menu-max-row);
}
.o-sub-menu-arrow {
height: var(--menu-text-height);
font-size: var(--menu-arrow-size);
width: var(--menu-arrow-size);
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(0);
transition: transform var(--o-duration-m2) var(--o-easing-standard);
}
.o-sub-menu-expanded > .o-sub-menu-title > .o-sub-menu-arrow {
transform: rotate(-180deg);
}
.o-sub-menu-children {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
display: grid;
grid-template-rows: 0fr;
transition: all var(--o-duration-m2) var(--o-easing-standard);
}
.o-sub-menu-children.expanded {
grid-template-rows: 1fr;
}
.o-sub-menu-children-wrap {
min-height: 0;
min-width: 0;
position: relative;
}
.o-menu-item-disabled {
cursor: not-allowed;
color: var(--menu-color-disabled);
}
/* 层级指示线 */
.o-menu-arrow-left .o-sub-menu:not([data-level="0"]) .o-sub-menu-children.expanded {
position: relative;
}
.o-menu-arrow-left .o-sub-menu:not([data-level="0"]) .o-sub-menu-children.expanded::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--menu-arrow-size) / 2 + var(--menu-level-indent));
width: var(--menu-indicator-width);
background-image: linear-gradient(to right, var(--menu-indicator-bg-color), var(--menu-indicator-bg-color));
background-size: var(--menu-indicator-width) 100%;
z-index: 0;
}
.o-menu-arrow-left .o-sub-menu-arrow + .o-sub-menu-title-icon, .o-menu-arrow-left .o-sub-menu-arrow + .o-sub-menu-title-content {
margin-left: var(--menu-icon-gap);
}
.o-menu-popover {
max-width: var(--menu-popover-width);
word-wrap: break-word;
}
/* 0-1680 */
@media (min-width: 0px) and (max-width: 1680px) {
.o-menu-medium {
--menu-item-padding-v: 4px;
--menu-icon-size: var(--o-icon_size_control-s);
--menu-arrow-size: var(--o-icon_size_control-s);
}
.o-menu-medium .o-sub-menu[data-level="0"] > .o-sub-menu-title, .o-menu-medium .o-menu-item[data-level="0"] {
--menu-item-padding-v: 8px;
--menu-text-size: var(--o-font_size-tip1);
--menu-text-height: var(--o-line_height-tip1);
}
}
/* 0-1200 */
@media (max-width: 1200px) {
.o-menu-small {
--menu-text-size: var(--o-font_size-tip2);
--menu-text-height: var(--o-line_height-tip2);
}
.o-menu-small .o-menu-item[data-level="0"],
.o-menu-small .o-sub-menu[data-level="0"] > .o-sub-menu-title {
--menu-text-size: var(--o-font_size-tip1);
--menu-text-height: var(--o-line_height-tip1);
}
}
.o-breadcrumb {
--breadcrumb-color: var(--o-color-info3);
--breadcrumb-color-hover: var(--o-color-info1);
--breadcrumb-color-active: var(--o-color-info1);
--breadcrumb-color-selected: var(--o-color-info1);
--breadcrumb-text-size: var(--o-font_size-tip1);
--breadcrumb-text-height: var(--o-line_height-tip1);
--breadcrumb-gap: 4px;
--breadcrumb-seperator-size: var(--o-icon_size_control-m);
--breadcrumb-label-max-width: 140px;
}
.o-breadcrumb {
display: inline-flex;
align-items: center;
color: var(--breadcrumb-color);
font-size: var(--breadcrumb-text-size);
line-height: var(--breadcrumb-text-height);
}
.o-breadcrumb a {
color: inherit;
text-decoration: none;
}
.o-breadcrumb-item {
display: inline-flex;
align-items: center;
}
.o-breadcrumb-item:last-child {
color: var(--breadcrumb-color-selected);
font-weight: 500;
}
.o-breadcrumb-item:last-child .o-breadcrumb-item-label {
cursor: auto;
max-width: none;
}
.o-breadcrumb-item:last-child .o-breadcrumb-item-separator {
display: none;
}
.o-breadcrumb-item-label {
cursor: pointer;
max-width: var(--breadcrumb-label-max-width);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o-breadcrumb-item-label:hover {
color: var(--breadcrumb-color-hover);
}
}
.o-breadcrumb-item-label:active {
color: var(--breadcrumb-color-active);
}
.o-breadcrumb-item-separator {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--breadcrumb-seperator-size);
font-size: var(--breadcrumb-seperator-size);
line-height: 1;
transition: color var(--o-duration-s) var(--o-easing-standard);
margin: 0 var(--breadcrumb-gap);
}
@media (max-width: 1440px) {
.o-breadcrumb {
--breadcrumb-text-size: var(--o-font_size-tip2);
--breadcrumb-text-height: var(--o-line_height-tip2);
--breadcrumb-seperator-size: var(--o-icon_size_control-xs);
}
}
.o-dropdown-list {
--dropdown-list-bg-color: var(--o-color-control-light);
--dropdown-list-shadow: var(--o-shadow-2);
--dropdown-list-bd: none;
--dropdown-list-radius: 12px;
--dropdown-list-padding: 4px;
}
.o-dropdown-item {
--dropdown-item-color: var(--o-color-info2);
--dropdown-item-color-hover: var(--o-color-primary2);
--dropdown-item-color-disabled: var(--o-color-info4);
--dropdown-item-bg-color: transparent;
--dropdown-item-bg-color-hover: var(--o-color-control2-light);
--dropdown-item-bg-color-disabled: transparent;
--dropdown-item-text-size: var(--o-font_size-text1);
--dropdown-item-text-height: var(--o-line_height-text1);
--dropdown-item-justify: center;
--dropdown-item-padding: 7px 0px;
--dropdown-item-gap: 2px;
--dropdown-item-radius: var(--o-radius_control-s);
}
.o-dropdown-list {
list-style: none;
margin: 0;
padding: var(--dropdown-list-padding);
background-color: var(--dropdown-list-bg-color);
box-shadow: var(--dropdown-list-shadow);
border-radius: var(--dropdown-list-radius);
border: var(--dropdown-list-bd);
}
.o-dropdown-item {
display: flex;
align-items: center;
justify-content: var(--dropdown-item-justify);
padding: var(--dropdown-item-padding);
background-color: var(--dropdown-item-bg-color);
font-size: var(--dropdown-item-text-size);
line-height: var(--dropdown-item-text-height);
border-radius: var(--dropdown-item-radius);
color: var(--dropdown-item-color);
transition: background-color var(--o-duration-s) var(--o-easing-standard);
cursor: pointer;
}
.o-dropdown-item:hover {
background-color: var(--dropdown-item-bg-color-hover);
color: var(--dropdown-item-color-hover);
}
.o-dropdown-item + .o-dropdown-item {
margin-top: var(--dropdown-item-gap);
}
.o-dropdown-item-disabled, .o-dropdown-item-disabled:hover {
cursor: not-allowed;
color: var(--dropdown-item-color-disabled);
background-color: var(--dropdown-item-bg-color-disabled);
}
.o-progress {
--progress-track-bg-color: var(--o-color-control4);
--progress-color: var(--o-color-info1);
--progress-label-gap: 8px;
--progress-inner-label-color: var(--o-color-white);
--progress-inner-label-gap: 8px;
}
.o-progress-medium {
--progress-text-size: var(--o-font_size-text1);
--progress-text-height: var(--o-line_height-text1);
--progress-icon-size: var(--o-icon_size_control-m);
}
.o-progress-small {
--progress-text-size: var(--o-font_size-tip2);
--progress-text-height: var(--o-line_height-tip2);
--progress-icon-size: var(--o-icon_size_control-xs);
}
.o-progress-primary {
--progress-bar-bg-color: var(--o-color-primary1);
--progress-icon-color: var(--o-color-primary1);
}
.o-progress-success {
--progress-bar-bg-color: var(--o-color-success1);
--progress-icon-color: var(--o-color-success1);
}
.o-progress-warning {
--progress-bar-bg-color: var(--o-color-warning1);
--progress-icon-color: var(--o-color-warning1);
}
.o-progress-danger {
--progress-bar-bg-color: var(--o-color-danger1);
--progress-icon-color: var(--o-color-danger1);
}
.o-progress-line {
width: 100%;
}
.o-progress-line-wrap {
display: flex;
align-items: center;
}
.o-progress-line-track {
width: 100%;
overflow: hidden;
background-color: var(--progress-track-bg-color);
}
.o-progress-line-bar {
max-width: 100%;
height: 100%;
background-color: var(--progress-bar-bg-color);
transition: all var(--o-duration-m1) var(--o-easing-standard);
text-align: right;
}
.o-progress-line-label {
color: var(--progress-color);
font-size: var(--progress-text-size);
line-height: var(--progress-text-height);
margin-left: var(--progress-label-gap);
white-space: nowrap;
}
.o-progress-line-label.is-icon {
color: var(--progress-icon-color);
font-size: var(--progress-icon-size);
}
.o-progress-line-inner-label {
display: inline-block;
color: var(--progress-inner-label-color);
margin-left: var(--progress-inner-label-gap);
margin-right: var(--progress-inner-label-gap);
}
.o-progress-circle {
font-size: 0;
line-height: 0;
}
.o-progress-circle-wrap {
position: relative;
display: inline-block;
}
.o-progress-circle-track {
stroke: var(--progress-track-bg-color);
}
.o-progress-circle-bar {
stroke: var(--progress-bar-bg-color);
transition: all var(--o-duration-m1) var(--o-easing-standard);
}
.o-progress-circle-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--progress-color);
font-size: var(--progress-text-size);
line-height: var(--progress-text-height);
}
.o-progress-circle-label.is-icon {
color: var(--progress-icon-color);
font-size: var(--progress-icon-size);
}
@media (max-width: 1440px) {
.o-progress-medium {
--progress-text-size: var(--o-font_size-tip1);
--progress-text-height: var(--o-line_height-tip1);
}
}
.o-layer {
--layer-position: absolute;
--layer-mask: var(--o-color-mask1);
--layer-align: center;
--layer-justify: center;
--layer-origin: center;
}
.o-layer-to-body {
--layer-position: fixed;
}
.o-layer {
position: var(--layer-position, "fixed");
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: var(--layer-z-index);
display: flex;
align-items: var(--layer-align);
justify-content: var(--layer-justify);
}
.o-layer-mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: var(--layer-mask);
z-index: -1;
}
.o-layer-open {
overflow: hidden !important;
}
.o-layer-main {
transform-origin: var(--layer-origin);
}
.o-layer-close {
position: absolute;
top: 40px;
right: 40px;
}
.o-layer-close-icon {
font-size: var(--o-icon_size-m);
color: var(--o-color-info1-inverse);
background-color: var(--o-color-mask1);
border-radius: 50%;
padding: 8px;
}
.o-layer-close-icon {
overflow: hidden;
}
.o-layer-close-icon svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-layer-close-icon:hover svg {
transform: rotate(180deg);
}
}
@media (hover: hover) {
.o-layer-close-icon:hover {
color: var(--o-color-info2-inverse);
}
}
.o-layer-close-icon:active {
color: var(--o-color-info3-inverse);
transform: scale(0.9);
}
.o-dialog {
--dlg-close-size: var(--o-icon_size_control-m);
--dlg-close-color: var(--o-color-info2);
--dlg-close-color-hover: var(--o-color-primary2);
--dlg-close-color-active: var(--o-color-primary3);
--dlg-color: var(--o-color-info1);
--dlg-header-color: var(--o-color-info1);
--dlg-bg-color: var(--o-color-control-light);
--dlg-radius: var(--o-radius_control-l);
--dlg-shadow: var(--o-shadow-1);
--dlg-max-height: 100%;
--dlg-min-width: 272px;
--dlg-margin: 24px;
--dlg-edge-gap: 32px;
--dlg-inner-gap: 24px;
--actions-justify: var(--dlg-actions-justify, center);
}
.o-dialog-auto {
--dlg-max-height: 80%;
}
.o-dialog-exlarge {
--dlg-width: 1170px;
--dlg-max-height: 780px;
--dlg-min-height: 520px;
}
.o-dialog-large {
--dlg-width: 930px;
--dlg-max-height: 780px;
--dlg-min-height: 424px;
}
.o-dialog-medium {
--dlg-width: 690px;
--dlg-max-height: 480px;
--dlg-min-height: 328px;
}
.o-dialog-small {
--dlg-width: 450px;
--dlg-max-height: 272px;
--dlg-min-height: 224px;
--dlg-header-gap: 16px;
}
.o-dlg-main {
color: var(--dlg-color);
position: relative;
background-color: var(--dlg-bg-color);
box-shadow: var(--dlg-shadow);
border-radius: var(--dlg-radius);
margin: var(--dlg-margin);
width: var(--dlg-width);
min-width: var(--dlg-min-width);
max-height: var(--dlg-max-height);
min-height: var(--dlg-min-height);
display: flex;
flex-direction: column;
padding: var(--dlg-edge-gap);
}
.o-dlg-btn-close {
position: absolute;
right: 8px;
top: 8px;
font-size: var(--dlg-close-size);
color: var(--dlg-close-color);
display: flex;
transition: transform var(--o-easing-standard) var(--o-duration-m2);
cursor: pointer;
z-index: 1;
}
.o-dlg-btn-close {
overflow: hidden;
}
.o-dlg-btn-close svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-dlg-btn-close:hover svg {
transform: rotate(180deg);
}
}
@media (hover: hover) {
.o-dlg-btn-close:hover {
color: var(--dlg-close-color-hover);
}
}
.o-dlg-btn-close:active {
color: var(--dlg-close-color-active);
transform: scale(0.9);
}
.o-dlg-header {
color: var(--dlg-header-color);
text-align: center;
font-size: var(--o-font_size-h2);
line-height: var(--o-line_height-h2);
font-weight: 500;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
overflow: hidden;
flex-shrink: 0;
margin-bottom: var(--dlg-header-gap, var(--dlg-inner-gap));
}
.o-dlg-body {
flex: 1;
display: flex;
overflow: visible;
min-height: 0;
}
.o-dlg-body > .o-scrollbar {
--scrollbar-y-right: calc(-1 * var(--dlg-edge-gap));
}
.o-dlg-body-content {
flex: 1;
}
.o-dlg-footer {
overflow: hidden;
flex-shrink: 0;
margin-top: var(--dlg-inner-gap);
}
.o-dlg-actions {
display: flex;
align-items: center;
justify-content: var(--actions-justify);
}
.o-dlg-btn + .o-dlg-btn {
margin-left: 16px;
}
@media (min-width: 601px) {
.o-dialog-responsive {
--layer-origin: center;
}
}
@media (max-width: 1200px) {
.o-dialog-responsive {
--layer-position: fixed;
}
.o-dialog-responsive .o-dlg-btn + .o-dlg-btn.o-btn-text {
position: relative;
}
.o-dialog-responsive .o-dlg-btn + .o-dlg-btn.o-btn-text::before {
content: "";
border-left: 1px solid var(--o-color-control1-light);
position: absolute;
height: 24px;
left: -8px;
}
}
@media (max-width: 600px) {
.o-dialog-responsive {
--layer-align: flex-end;
--layer-origin: center bottom;
--dlg-min-width: none;
}
.o-dialog-responsive .o-dlg-btn {
flex: 1;
}
.o-dialog-responsive .o-dlg-btn-close {
display: none;
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-dialog {
--dlg-edge-gap: 24px;
--dlg-inner-gap: 16px;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog {
--dlg-edge-gap: 24px;
--dlg-inner-gap: 16px;
}
}
@media (max-width: 840px) {
.o-dialog {
--dlg-edge-gap: 16px;
--dlg-inner-gap: 12px;
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-dlg-header {
font-size: var(--o-font_size-h4);
line-height: var(--o-line_height-h4);
}
}
@media (max-width: 1200px) {
.o-dlg-header {
font-size: var(--o-font_size-text2);
line-height: var(--o-line_height-text2);
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-dialog-exlarge {
--dlg-width: 80%;
--dlg-max-height: 80%;
--dlg-min-height: 65%;
}
}
@media (max-width: 1200px) {
.o-dialog-exlarge {
--dlg-width: 100%;
--dlg-max-height: 100%;
--dlg-radius: 0;
--dlg-margin: 0;
--dlg-edge-gap: 24px;
--dlg-inner-gap: 16px;
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-dialog-large {
--dlg-width: 65%;
--dlg-max-height: 80%;
--dlg-min-height: 50%;
}
}
@media (max-width: 1200px) {
.o-dialog-large {
--dlg-width: 100%;
--dlg-max-height: 100%;
--dlg-radius: 0;
--dlg-margin: 0;
--dlg-edge-gap: 24px;
--dlg-inner-gap: 16px;
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-dialog-medium {
--dlg-width: 50%;
--dlg-max-height: 80%;
--dlg-min-height: 35%;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog-medium {
--dlg-width: 65%;
--dlg-max-height: 80%;
--dlg-min-height: 128px;
--dlg-margin: 24px;
}
}
@media (max-width: 840px) {
.o-dialog-medium {
--dlg-width: calc(100vw - 48px);
--dlg-max-height: 65%;
--dlg-min-height: 128px;
--dlg-margin: 24px;
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-dialog-small {
--dlg-width: 35%;
--dlg-max-height: 50%;
--dlg-min-height: 20%;
}
}
@media (max-width: 1200px) {
.o-dialog-small {
--dlg-min-height: 128px;
--dlg-max-height: 80%;
--dlg-margin: 24px;
--dlg-edge-gap: 16px;
--dlg-inner-gap: 12px;
--dlg-header-gap: 12px;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog-small {
--dlg-width: 50%;
}
}
@media (min-width: 601px) and (max-width: 840px) {
.o-dialog-small {
--dlg-width: 65%;
}
}
@media (max-width: 600px) {
.o-dialog-small {
--dlg-width: calc(100vw - 48px);
--dlg-max-height: 65%;
}
}
@media (max-width: 600px) {
.o-dialog-phone-half-full {
--dlg-width: 100%;
--dlg-margin: 0;
}
.o-dialog-phone-half-full.o-dialog-auto, .o-dialog-phone-half-full.o-dialog-small, .o-dialog-phone-half-full.o-dialog-medium {
--dlg-radius: var(--o-radius_control-l) var(--o-radius_control-l) 0 0;
}
}
.o-loading {
--loading-mask: var(--o-color-mask1);
--loading-icon-size: var(--o-icon_size_control-m);
--loading-icon-color: var(--o-color-info2);
--loading-mask-icon-color: var(--o-color-info2-inverse);
--loading-color: var(--o-color-info2);
--loading-mask-color: var(--o-color-info2-inverse);
--loading-z-index: calc(var(--o-z-index-base) + 10);
}
.o-loading {
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
}
.o-loading-main {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--loading-color);
}
.o-loading-icon {
font-size: var(--loading-icon-size);
color: var(--loading-icon-color);
}
.o-loading-icon + .o-loading-label {
margin-left: 4px;
}
.o-layer-mask + .o-loading-main {
color: var(--loading-mask-color);
}
.o-layer-mask + .o-loading-main .o-loading-icon {
color: var(--loading-mask-icon-color);
}
.o-figure {
--figure-padding-top: 50%;
--figure-fit: cover;
--figure-position: center;
--figure-radius: 0;
--figure-error-color: var(--o-color-control4);
--figure-error-size: var(--o-icon_size_control-l);
--figure-play-icon-size: 64px;
}
.o-figure {
display: inline-flex;
align-items: center;
vertical-align: top;
overflow: hidden;
transition: background-color var(--o-duration-m2);
border-radius: var(--figure-radius);
position: relative;
}
.o-figure.is-loading.is-colorful {
background-color: var(--figure-prest-color);
}
.o-figure.is-loading img {
opacity: 0;
}
.o-figure img {
max-width: 100%;
vertical-align: top;
opacity: 1;
transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) 600ms;
will-change: transform;
border-radius: var(--figure-radius);
}
.o-figure.is-error {
background-color: var(--o-color-control4);
}
.o-figure-main {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: background-color var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-figure-hoverable {
cursor: pointer;
}
@media (hover: hover) {
.o-figure-hoverable:hover img {
transform: scale(1.05);
}
}
.o-figure-hoverable:active img {
transform: scale(1.02);
}
.o-figure-hoverable:active .o-figure-main {
background-color: rgba(var(--o-black), 0.1);
}
.o-figure-wrap {
position: relative;
width: 100%;
height: 100%;
padding-top: var(--figure-padding-top);
}
.o-figure-bg {
background-size: var(--figure-fit);
background-position: var(--figure-position);
background-repeat: no-repeat;
}
.o-figure-img-ratio {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: var(--figure-fit);
object-position: var(--figure-position);
}
.o-figure-img {
width: 100%;
height: 100%;
object-fit: var(--figure-fit);
object-position: var(--figure-position);
}
.o-figure-view {
cursor: zoom-in;
}
.o-figure-view-layer {
width: 100%;
height: 100%;
cursor: zoom-out;
}
.o-figure-preview-wrapper {
position: relative;
}
.o-figure-view-figure {
width: 100%;
height: 100%;
--figure-fit: contain;
}
.o-figure-previewable {
cursor: pointer;
}
.o-figure-preview-img {
position: relative;
}
.o-figure-preview-img img {
vertical-align: top;
max-width: 100vw;
max-height: 100vh;
}
.o-figure-error-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--figure-error-size);
color: var(--figure-error-color);
}
.o-figure-video-poster {
position: relative;
}
.o-figure-mask {
background-color: rgba(var(--o-black), 0.2);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
}
.o-figure-play-icon {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: var(--figure-play-icon-size);
height: var(--figure-play-icon-size);
font-size: calc(var(--figure-play-icon-size) / 64 * 24);
border-radius: 50%;
color: var(--o-color-white);
background-color: rgba(var(--o-white), 0.2);
border: 1px solid rgba(var(--o-white), 0.6);
backdrop-filter: blur(1px);
}
.o-figure-play-icon .o-icon-video-play {
margin-right: -0.2em;
}
.o-figure-title {
font-size: var(--o-font_size-h3);
line-height: var(--o-line_height-h3);
}
.o-figure-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px 24px;
color: var(--o-color-white);
background: linear-gradient(180deg, rgba(var(--o-black), 0) 0%, rgba(var(--o-black), 0.6) 100%);
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-figure {
--figure-play-icon-size: 56px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.o-figure {
--figure-play-icon-size: 48px;
}
}
@media (max-width: 600px) {
.o-figure {
--figure-play-icon-size: 40px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.o-figure-title {
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
}
}
@media (max-width: 600px) {
.o-figure-title {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.o-figure-content {
padding: 12px 16px;
}
}
@media (max-width: 600px) {
.o-figure-content {
padding: 4px 8px;
}
}
@media (max-width: 1200px) {
.o-figure-preview-img img {
max-width: 100vw;
}
}
@media (max-width: 1200px) {
.o-figure-preview-close {
left: 16px;
right: auto;
}
}
@media (max-width: 1200px) {
.o-figure-preview-layer {
--layer-mask: var(--o-color-black);
}
}
.o-card {
--card-bg-color: var(--o-color-fill2);
--card-radius: var(--o-radius_control-l);
--card-shadow: none;
--card-shadow-hover: var(--o-shadow-2);
--card-shadow-active: var(--o-shadow-1);
--card-cover-radius: var(--o-radius_control-s);
--card-h-cover-width: 45%;
--card-h-cover-max-width: 320px;
--card-main-padding: 24px 32px;
--card-icon-gap: 16px;
--card-icon-color: var(--o-color-info1);
--card-icon-size: var(--o-icon_size_control-xl);
--card-title-icon-gap: var(--o-gap-3);
--card-title-icon-color: var(--o-color-info1);
--card-title-icon-size: var(--o-icon_size-l);
--card-header-color: var(--o-color-info1);
--card-header-text-size: var(--o-font_size-h3);
--card-header-text-height: var(--o-line_height-h3);
--card-title-word-break: break-word;
--card-content-gap: 12px;
--card-content-color: var(--o-color-info2);
--card-content-text-size: var(--o-font_size-text1);
--card-content-text-height: var(--o-line_height-text1);
--card-detail-word-break: break-word;
--card-footer-gap: 24px;
--card-footer-color: var(--o-color-info2);
--card-footer-text-size: var(--o-font_size-tip1);
--card-footer-text-height: var(--o-line_height-tip1);
}
.o-card-cover-v {
--card-cover-padding: 8px 8px 0;
}
.o-card-cover-h {
--card-cover-padding: 8px 0 8px 8px;
}
.o-card-cover-hr {
--card-cover-padding: 8px 8px 8px 0;
}
.o-card-only-cover {
--card-cover-padding: 0;
}
.o-card {
background-color: var(--card-bg-color);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
display: flex;
text-decoration: none;
}
.o-card-cover {
flex-shrink: 0;
padding: var(--card-cover-padding);
}
.o-card-cover-img {
max-height: 100%;
width: 100%;
border-radius: var(--card-cover-radius);
}
.o-card-cover-img img {
border-radius: var(--card-cover-radius);
}
.o-card-cover-img.is-full {
height: 100%;
}
.o-card-icon {
color: var(--card-icon-color);
font-size: var(--card-icon-size);
text-align: var(--card-icon-text-align);
}
.o-card-header {
font-size: var(--card-header-text-size);
line-height: var(--card-header-text-height);
color: var(--card-header-color);
}
.o-card-header-with-icon {
position: relative;
}
.o-card-header-with-icon .o-card-title {
text-indent: calc(var(--card-title-icon-size) + var(--card-title-icon-gap));
}
.o-card-title-icon {
width: var(--card-title-icon-size);
height: var(--card-title-icon-size);
position: absolute;
top: calc((var(--card-header-text-height) - var(--card-title-icon-size)) / 2);
font-size: var(--card-title-icon-size);
}
.o-card-title-icon-figure {
width: 100%;
}
.o-card-title {
height: calc(var(--card-title-row) * var(--card-header-text-height));
margin: 0;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
text-align: var(--card-title-text-align);
word-break: var(--card-title-word-break);
display: -webkit-box;
-webkit-line-clamp: var(--card-title-max-row);
-webkit-box-orient: vertical;
}
.o-card-main {
padding: var(--card-main-padding);
height: 100%;
}
.o-card-main-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.o-card-content {
font-size: var(--card-content-text-size);
line-height: var(--card-content-text-height);
color: var(--card-content-color);
}
.o-card-header + .o-card-content {
margin-top: var(--card-content-gap);
}
.o-card-detail {
height: calc(var(--card-detail-row) * var(--card-content-text-height));
max-height: calc(var(--card-detail-max-row) * var(--card-content-text-height));
overflow: hidden;
text-overflow: ellipsis;
text-align: var(--card-detail-text-align);
word-break: var(--card-detail-word-break);
display: -webkit-box;
-webkit-line-clamp: var(--card-detail-max-row);
-webkit-box-orient: vertical;
}
.o-card-hoverable {
position: relative;
transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
}
@media (hover: hover) {
.o-card-hoverable:hover {
box-shadow: var(--card-shadow-hover);
}
}
.o-card-hoverable:active {
box-shadow: var(--card-shadow-active);
}
@media (hover: hover) {
.o-card-hoverable.o-card-cursor-pointer:hover .o-card-cover img {
transform: scale(1.05);
}
}
.o-card-hoverable.o-card-cursor-pointer:active .o-card-cover img {
transform: scale(1.02);
}
.o-card-footer {
margin-top: var(--card-footer-gap);
font-size: var(--card-footer-text-size);
line-height: var(--card-footer-text-height);
color: var(--card-footer-color);
}
.o-card-layout-v {
display: flex;
flex-direction: column;
}
.o-card-layout-v .o-card-main {
display: flex;
flex-direction: column;
}
.o-card-layout-v .o-card-icon {
margin-bottom: var(--card-icon-gap);
}
.o-card-layout-h {
display: flex;
flex-direction: row;
}
.o-card-layout-h .o-card-main {
display: flex;
flex-direction: row;
}
.o-card-layout-h .o-card-icon {
margin-right: var(--card-icon-gap);
width: var(--card-icon-size);
}
.o-card-layout-hr {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.o-card-layout-hr .o-card-main {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.o-card-layout-hr .o-card-icon {
margin-left: var(--card-icon-gap);
width: var(--card-icon-size);
}
.o-card-cover-h,
.o-card-cover-hr {
width: var(--card-h-cover-width);
max-width: var(--card-h-cover-max-width);
display: flex;
align-items: center;
}
.o-card-cursor-pointer {
cursor: pointer;
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-card:not(.o-card-no-responsive) {
--card-radius: var(--o-radius_control-m);
--card-cover-radius: var(--o-radius_control-s);
--card-header-text-size: var(--o-font_size-text2);
--card-header-text-height: var(--o-line_height-text2);
--card-main-padding: 16px 24px;
--card-icon-gap: 12px;
--card-title-icon-gap: var(--o-gap-2);
--card-content-gap: 8px;
--card-content-text-size: var(--o-font_size-tip1);
--card-content-text-height: var(--o-line_height-tip1);
--card-footer-gap: 16px;
--card-footer-text-size: var(--o-font_size-tip2);
--card-footer-text-height: var(--o-line_height-tip2);
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.o-card:not(.o-card-no-responsive) {
--card-radius: var(--o-radius_control-s);
--card-cover-radius: var(--o-radius_control-xs);
--card-header-text-size: var(--o-font_size-text1);
--card-header-text-height: var(--o-line_height-text1);
--card-main-padding: 12px 16px;
--card-icon-gap: 8px;
--card-icon-size: var(--o-icon_size_control-l);
--card-title-icon-gap: var(--o-gap-2);
--card-title-icon-size: var(--o-icon_size-m);
--card-content-gap: 8px;
--card-content-text-size: var(--o-font_size-tip1);
--card-content-text-height: var(--o-line_height-tip1);
--card-footer-gap: 12px;
--card-footer-text-size: var(--o-font_size-tip2);
--card-footer-text-height: var(--o-line_height-tip2);
}
.o-card:not(.o-card-no-responsive) .o-card-cover-v {
--card-cover-padding: 4px 4px 0;
}
.o-card:not(.o-card-no-responsive) .o-card-cover-h {
--card-cover-padding: 4px 0 4px 4px;
}
.o-card:not(.o-card-no-responsive) .o-card-cover-hr {
--card-cover-padding: 4px 4px 4px 0;
}
}
@media (max-width: 600px) {
.o-card:not(.o-card-no-responsive) {
--card-radius: var(--o-radius_control-s);
--card-cover-radius: var(--o-radius_control-xs);
--card-main-padding: 12px 16px;
--card-header-text-size: var(--o-font_size-tip1);
--card-header-text-height: var(--o-line_height-tip1);
--card-icon-gap: 8px;
--card-icon-size: var(--o-icon_size_control-l);
--card-title-icon-gap: var(--o-gap-2);
--card-title-icon-size: var(--o-icon_size-m);
--card-content-gap: 8px;
--card-content-text-size: var(--o-font_size-tip2);
--card-content-text-height: var(--o-line_height-tip2);
--card-footer-gap: 8px;
--card-footer-text-size: 10px;
--card-footer-text-height: 16px;
}
.o-card:not(.o-card-no-responsive) .o-card-cover-v {
--card-cover-padding: 4px 4px 0;
}
.o-card:not(.o-card-no-responsive) .o-card-cover-h {
--card-cover-padding: 4px 0 4px 4px;
}
.o-card:not(.o-card-no-responsive) .o-card-cover-hr {
--card-cover-padding: 4px 4px 4px 0;
}
}
.o-carousel {
--carousel-arrow-size: var(--o-icon_size_control-l);
--carousel-arrow-color: var(--o-color-info1);
--carousel-arrow-color-hover: var(--o-color-info2);
--carousel-arrow-color-active: var(--o-color-info3);
--carousel-indicator-width: 48px;
--carousel-indicator-height: 3px;
--carousel-indicator-gap: 12px;
--carousel-indicator-offset: 19px;
--carousel-indicator-bg-color: var(--o-color-control1);
--carousel-indicator-bg-color-hover: var(--o-color-control2);
--carousel-indicator-bg-color-active: var(--o-color-control3);
--carousel-indicator-bg-color-selected: var(--o-color-primary1);
}
.o-carousel {
position: relative;
visibility: hidden;
background: transparent;
opacity: 0;
transition: opacity var(--o-duration-m1);
}
.o-carousel-visible {
visibility: visible;
opacity: 1;
}
.o-carousel-wrap {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.o-carousel-arrow-prev,
.o-carousel-arrow-next {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
user-select: none;
cursor: pointer;
opacity: 1;
transition: opacity var(--o-duration-m1) var(--o-easing-standard);
}
.o-carousel-hover-arrow .o-carousel-arrow-prev,
.o-carousel-hover-arrow .o-carousel-arrow-next {
opacity: 0;
}
@media (hover: hover) {
.o-carousel-hover-arrow:hover .o-carousel-arrow-prev,
.o-carousel-hover-arrow:hover .o-carousel-arrow-next {
opacity: 1;
}
}
.o-carousel-arrow-prev {
top: 50%;
left: 12px;
transform: translate3d(0, -50%, 0);
}
.o-carousel-arrow-next {
top: 50%;
right: 12px;
transform: translate3d(0, -50%, 0);
}
.o-carousel-arrow-icon {
font-size: var(--carousel-arrow-size);
color: var(--carousel-arrow-color);
background-color: var(--carousel-arrow-bg-color);
border-radius: 50%;
opacity: var(--carousel-arrow-opacity);
}
@media (hover: hover) {
.o-carousel-arrow-icon:hover {
opacity: var(--carousel-arrow-opacity-hover);
color: var(--carousel-arrow-color-hover);
background-color: var(--carousel-arrow-bg-color-hover);
}
}
.o-carousel-indicator-wrap {
position: absolute;
left: 0;
bottom: var(--carousel-indicator-offset);
display: flex;
justify-content: center;
z-index: 2;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
.o-carousel-indicator-item + .o-carousel-indicator-item {
margin-left: var(--carousel-indicator-gap);
}
.o-carousel-indicator-bar {
position: relative;
width: var(--carousel-indicator-width);
height: 12px;
display: flex;
align-items: center;
cursor: pointer;
}
@media (hover: hover) {
.o-carousel-indicator-bar:hover .o-carousel-indicator-line {
background-color: var(--carousel-indicator-bg-color-hover);
}
}
.o-carousel-indicator-bar:active .o-carousel-indicator-line {
background-color: var(--carousel-indicator-bg-color-active);
}
.o-carousel-indicator-line {
position: relative;
overflow: hidden;
width: 100%;
height: var(--carousel-indicator-height);
border-radius: var(--carousel-indicator-height);
background-color: var(--carousel-indicator-bg-color);
transition: background-color var(--o-duration-m2) var(--o-easing-standard);
}
.o-carousel-indicator-line::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: var(--carousel-indicator-height);
border-radius: var(--carousel-indicator-height);
background-color: var(--carousel-indicator-bg-color);
transform-origin: 0 center;
}
@keyframes indicator-grow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(100%);
}
}
.o-carousel-indicator-bar-selected .o-carousel-indicator-line::after {
background-color: var(--carousel-indicator-bg-color-selected);
}
.o-carousel-autoplay .o-carousel-indicator-line::after {
transform: scaleX(100%);
}
.o-carousel-autoplay.is-playing .o-carousel-indicator-bar-selected .o-carousel-indicator-line::after {
animation: indicator-grow var(--carousel-interval, "5000ms") var(--o-easing-linear);
}
.o-carousel-container-gallery {
height: 100%;
position: absolute;
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.o-carousel-container-gallery.is-animating {
will-change: transform;
transition: transform var(--o-duration-l) var(--o-easing-emphasized);
}
.o-carousel-item-gallery {
position: absolute;
left: 0;
flex-shrink: 0;
}
.o-carousel-click-to-switch .o-carousel-item-gallery:not(.o-carousel-toggle-current) {
cursor: pointer;
}
@keyframes carousel-toggle {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.o-carousel-container-toggle {
height: 100%;
position: absolute;
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.o-carousel-item-toggle {
position: absolute;
left: 0;
flex-shrink: 0;
z-index: 0;
opacity: 0;
height: 100%;
width: 100%;
}
.o-carousel-toggle-current {
opacity: 1;
z-index: 2;
}
.o-carousel-toggle-in {
animation: carousel-toggle var(--o-duration-l) var(--o-easing-emphasized) forwards;
z-index: 2;
}
.o-carousel-toggle-out {
animation: carousel-toggle var(--o-duration-l) var(--o-easing-emphasized) reverse forwards;
z-index: 1;
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-carousel {
--carousel-arrow-size: var(--o-icon_size_control-m);
--carousel-indicator-width: 40px;
--carousel-indicator-height: 3px;
--carousel-indicator-gap: 8px;
--carousel-indicator-offset: 11px;
}
}
@media (max-width: 1200px) {
.o-carousel {
--carousel-arrow-size: var(--o-icon_size_control-xs);
--carousel-indicator-width: 24px;
--carousel-indicator-height: 2px;
--carousel-indicator-gap: 4px;
--carousel-indicator-offset: 7px;
}
}
.o-message {
--message-color: var(--o-color-info2);
--message-text-size: var(--o-font_size-tip1);
--message-text-height: var(--o-line_height-tip1);
--message-title-size: var(--o-font_size-tip1);
--message-title-height: var(--o-line_height-tip1);
--message-bg-color: var(--o-color-fill2);
--message-shadow: var(--o-shadow-2);
--message-align: start;
--message-radius: var(--o-radius_control-s);
--message-padding: 8px 16px;
--message-icon-size: var(--o-icon_size_control-m);
--message-icon-gap: 8px;
--message-icon-close-color: var(--o-color-info2);
--message-icon-close-color-hover: var(--o-color-info1);
--message-icon-close-color-active: var(--o-color-info1);
--message-word-break: break-word;
--message-text-align: center;
--message-content-max-row: 0;
--message-gap: 16px;
--message-title-gap: 4px;
}
.o-message-colorful {
--message-shadow: none;
--message-padding: 4px 12px 8px;
--message-align: start;
--message-text-align: left;
}
.o-message-info {
--message-icon-color: var(--o-color-auxiliary5, rgb(var(--o-blue-6)));
}
.o-message-info.o-message-colorful {
--message-bg-color: var(--o-blue-6);
}
.o-message-success {
--message-icon-color: var(--o-color-success1, rgb(var(--o-green-6)));
}
.o-message-success.o-message-colorful {
--message-bg-color: var(--o-green-6);
}
.o-message-warning {
--message-icon-color: var(--o-color-warning1, rgb(var(--o-orange-6)));
}
.o-message-warning.o-message-colorful {
--message-bg-color: var(--o-orange-6);
}
.o-message-danger {
--message-icon-color: var(--o-color-danger1, rgb(var(--o-red-6)));
}
.o-message-danger.o-message-colorful {
--message-bg-color: var(--o-red-6);
}
.o-message-loading {
--message-icon-color: var(--o-color-info1);
}
.o-message-loading.o-message-colorful {
--message-bg-color: var(--o-color-primary4-light);
}
.o-message-list {
--message-list-offset: 32px;
}
.o-message {
display: flex;
align-items: var(--message-align);
padding: var(--message-padding);
background-color: var(--message-bg-color);
border-radius: var(--message-radius);
box-shadow: var(--message-shadow);
width: fit-content;
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
text-align: center;
}
.o-message-colorful:not(.o-message-loading) {
overflow: hidden;
position: relative;
background-color: rgba(var(--message-bg-color), 0.05);
}
.o-message-colorful:not(.o-message-loading):after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: rgb(var(--message-bg-color));
}
.o-message-main {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: var(--message-text-size);
line-height: var(--message-text-height);
color: var(--message-color);
}
.o-message-content {
overflow: hidden;
text-overflow: ellipsis;
text-align: var(--message-text-align);
word-break: var(--message-word-break);
display: -webkit-box;
-webkit-line-clamp: var(--message-content-max-row);
-webkit-box-orient: vertical;
}
.o-message-title {
margin-bottom: var(--message-title-gap);
font-size: var(--message-title-size);
line-height: var(--message-title-height);
font-weight: 600;
}
.o-message-icon {
font-size: var(--message-icon-size);
color: var(--message-icon-color);
margin-right: var(--message-icon-gap);
display: inline-flex;
align-items: center;
}
.o-message-close {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-left: var(--message-icon-gap);
font-size: var(--message-icon-size);
color: var(--message-icon-close-color);
transition: color var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o-message-close:hover {
color: var(--message-icon-close-color-hover);
}
}
.o-message-close:active {
color: var(--message-icon-close-color-active);
}
.o-message-list {
position: fixed;
z-index: 1001;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.o-message-list-top {
top: var(--message-list-offset);
}
.o-message-list-top .o-message + .o-message {
margin-top: var(--message-gap);
}
.o-message-list-bottom {
bottom: var(--message-list-offset);
}
.o-message-list-bottom .o-message + .o-message {
margin-top: var(--message-gap);
}
.o-message-fade-enter-from {
opacity: 0;
}
.o-message-fade-enter-active,
.o-message-fade-leave-active {
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
}
.o-message-fade-leave-to {
opacity: 0;
}
@media (min-width: 841px) and (max-width: 1680px) {
.o-message.o-message-colorful {
--message-padding: 4px 8px 8px;
}
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-message {
--message-padding: 7px 12px;
--message-gap: 12px;
}
}
@media (max-width: 1200px) {
.o-message {
--message-text-size: var(--o-font_size-tip2);
--message-text-height: var(--o-line_height-tip2);
--message-title-size: var(--o-font_size-tip2);
--message-title-height: var(--o-line_height-tip2);
--message-padding: 7px 12px;
--message-gap: 8px;
}
}
@media (max-width: 840px) {
.o-message-colorful {
--message-padding: 4px 12px 8px;
}
}
.o-cascader {
--cascader-height: 200px;
}
.o-cascader-options {
--cascader-options-bd-clor: var(--o-color-control1-light);
--cascader-options-gap: 8px;
}
.o-cascader-option {
--cascader-option-color: var(--o-color-info2);
--cascader-option-color-hover: var(--o-color-info2);
--cascader-option-color-selected: var(--o-color-primary1);
--cascader-option-text-size: var(--o-font_size-text1);
--cascader-option-text-height: var(--o-line_height-text1);
--cascader-option-padding: 7px 12px;
--cascader-option-radius: var(--o-radius_control-s);
--cascader-option-bg-color: transparent;
--cascader-option-bg-color-hover: var(--o-color-control2-light);
--cascader-option-bg-color-selected: var(--o-color-control3-light);
--cascader-option-icon-size: var(--o-icon_size_control-xs);
--cascader-option-gap: 2px;
}
.o-cascader {
height: var(--cascader-height);
}
.o-cascader-panel {
position: relative;
display: inline-flex;
height: calc(var(--cascader-height) - 2 * var(--scroller-padding));
}
.o-cascader-options {
list-style: none;
margin: 0;
padding: 0 calc(var(--cascader-options-gap) / 2);
min-width: 144px;
max-width: 192px;
height: 100%;
overflow-y: auto;
}
.o-cascader-options + .o-cascader-options {
border-left: 1px solid var(--cascader-options-bd-clor);
}
.o-cascader-options:first-child {
padding-left: 0;
}
.o-cascader-options:last-child {
padding-right: 0;
}
.o-cascader-option {
display: flex;
align-items: center;
padding: var(--cascader-option-padding);
color: var(--cascader-option-color);
border-radius: var(--cascader-option-radius);
background-color: var(--cascader-option-bg-color);
transition: background-color var(--o-duration-s) var(--o-easing-standard);
cursor: pointer;
}
@media (hover: hover) {
.o-cascader-option:hover {
color: var(--cascader-option-color-hover);
background-color: var(--cascader-option-bg-color-hover);
}
}
.o-cascader-option + .o-cascader-option {
margin-top: var(--cascader-option-gap);
}
.o-cascader-option-label {
font-size: var(--cascader-option-text-size);
line-height: var(--cascader-option-text-height);
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.o-cascader-option-arrow {
font-size: var(--cascader-option-icon-size);
margin-left: auto;
}
.o-cascader-option-selected {
color: var(--cascader-option-color-selected);
background-color: var(--cascader-option-bg-color-selected);
font-weight: 500;
}
@media (hover: hover) {
.o-cascader-option-selected:hover {
color: var(--cascader-option-color-selected);
background-color: var(--cascader-option-bg-color-selected);
}
}
.o-flex {
--flex-gap-x: 0px;
--flex-gap-y: 0px;
}
.o-row {
display: flex;
--col-gap-x: calc(var(--row-gap-x) / 2);
--col-gap-y: var(--row-gap-y);
--row-shift-x: calc(-1 * var(--col-gap-x));
--row-shift-y: calc(-1 * var(--col-gap-y));
margin-left: var(--row-shift-x);
margin-right: var(--row-shift-x);
margin-bottom: var(--row-shift-y);
}
.o-row > * {
padding-left: var(--col-gap-x);
padding-right: var(--col-gap-x);
margin-bottom: var(--col-gap-y);
flex: 1 0 auto;
}
.o-col {
flex: var(--col-flex);
}
@media (max-width: 1440px) {
.o-row-laptop {
--col-gap-x: calc(var(--row-laptop-gap-x) / 2);
--col-gap-y: var(--row-laptop-gap-y);
}
.o-col-laptop {
flex: var(--col-laptop-flex);
}
}
@media (max-width: 1200px) {
.o-row-pad {
--col-gap-x: calc(var(--row-pad-gap-x) / 2);
--col-gap-y: var(--row-pad-gap-y);
}
.o-col-pad {
flex: var(--col-pad-flex);
}
}
@media (max-width: 840px) {
.o-row-pad-v {
--col-gap-x: calc(var(--row-pad-v-gap-x) / 2);
--col-gap-y: var(--row-pad-v-gap-y);
}
.o-col-pad-v {
flex: var(--col-pad-v-flex);
}
}
@media (max-width: 600px) {
.o-row-phone {
--col-gap-x: calc(var(--row-phone-gap-x) / 2);
--col-gap-y: var(--row-phone-gap-y);
}
.o-col-phone {
flex: var(--col-phone-flex);
}
}
.o-result {
--result-image-width: 320px;
--result-image-height: 280px;
--result-image-gap: 16px;
--result-icon-size: var(--o-icon_size_control-xl);
--result-icon-gap: 12px;
--result-title-color: var(--o-color-info1);
--result-title-text-size: var(--o-font_size-h2);
--result-title-text-height: var(--o-line_height-h2);
--result-desc-color: var(--o-color-info3);
--result-desc-text-size: var(--o-font_size-text1);
--result-desc-text-height: var(--o-line_height-text1);
--result-desc-gap: 12px;
--result-extra-gap: 24px;
}
.o-result-info {
--result-icon-color: var(--o-color-primary1);
}
.o-result-success {
--result-icon-color: var(--o-color-success1);
}
.o-result-warning {
--result-icon-color: var(--o-color-warning1);
}
.o-result-danger {
--result-icon-color: var(--o-color-danger1);
}
.o-result {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.o-result-image {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: var(--result-image-width);
height: var(--result-image-height);
margin-bottom: var(--result-image-gap);
}
.o-result-image > * {
width: 100%;
height: 100%;
}
.o-result-header {
display: flex;
align-items: center;
justify-content: center;
}
.o-result-icon {
width: var(--result-icon-size);
height: var(--result-icon-size);
font-size: var(--result-icon-size);
color: var(--result-icon-color);
margin-right: var(--result-icon-gap);
}
.o-result-title {
color: var(--result-title-color);
font-size: var(--result-title-text-size);
line-height: var(--result-title-text-height);
font-weight: 500;
}
.o-result-description {
color: var(--result-desc-color);
font-size: var(--result-desc-text-size);
line-height: var(--result-desc-text-height);
margin-top: var(--result-desc-gap);
}
.o-result-extra {
margin-top: var(--result-extra-gap);
}
.o-result-icon-custom {
width: auto;
height: auto;
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-result {
--result-image-width: 160px;
--result-image-height: 140px;
--result-image-gap: 8px;
--result-icon-size: var(--o-icon_size_control-l);
--result-title-text-size: var(--o-font_size-text2);
--result-title-text-height: var(--o-line_height-text2);
--result-desc-text-size: var(--o-font_size-tip1);
--result-desc-text-height: var(--o-line_height-tip1);
--result-desc-gap: 8px;
}
}
@media (max-width: 1200px) {
.o-result {
--result-image-width: 160px;
--result-image-height: 140px;
--result-image-gap: 8px;
--result-icon-size: 48px;
--result-icon-gap: 8px;
--result-title-text-size: var(--o-font_size-text2);
--result-title-text-height: var(--o-line_height-text2);
--result-desc-text-size: var(--o-font_size-tip1);
--result-desc-text-height: var(--o-line_height-tip1);
--result-desc-gap: 8px;
}
.o-result-header {
flex-direction: column;
}
.o-result-icon {
margin-right: 0;
margin-bottom: var(--result-icon-gap);
}
}
.o-scrollbar {
--scrollbar-delay: 16ms;
--scrollbar-height: 90%;
--scrollbar-y-top: 0;
--scrollbar-y-bottom: 0;
--scrollbar-y-right: 0;
--scrollbar-y-left: auto;
--scrollbar-x-left: 0;
--scrollbar-x-right: 0;
--scrollbar-x-top: auto;
--scrollbar-x-bottom: 0;
--scrollbar-bg-color: transparent;
--scrollbar-track-bg-color: var(--o-color-control4);
--scrollbar-track-width: 6px;
--scrollbar-thumb-bg-color: var(--o-color-control1);
--scrollbar-thumb-bg-color-hover: var(--o-color-control2);
--scrollbar-thumb-width: 6px;
--scrollbar-thumb-width-hover: 10px;
--scrollbar-thumb-radius: 10px;
--scrollbar-width: 16px;
--scrollbar-thumb-min-size: 10px;
}
.o-scrollbar-hover-show {
--scrollbar-delay: 100ms;
}
.o-scrollbar-both {
--scrollbar-height: min(calc(100% - var(--scrollbar-width) * 2), 90%);
}
.o-scrollbar-small {
--scrollbar-track-width: 3px;
--scrollbar-thumb-width: 3px;
--scrollbar-thumb-width-hover: 6px;
--scrollbar-thumb-radius: 6px;
--scrollbar-width: 12px;
}
/*
* ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+,
* scrollbar-width 兼容firefox 64+
*/
.o-scrollbar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
}
.o-scrollbar > .o-scrollbar-dragging {
opacity: 1;
}
.o-scrollbar.o-scrollbar-visible-x > .o-scrollbar-x {
opacity: 1;
pointer-events: auto;
}
.o-scrollbar.o-scrollbar-visible-y > .o-scrollbar-y {
opacity: 1;
pointer-events: auto;
}
.o-scrollbar.o-scrollbar-visible .o-scrollbar-rail {
opacity: 1;
pointer-events: auto;
}
.o-scrollbar-rail {
opacity: 0;
pointer-events: none;
position: absolute;
background-color: var(--scrollbar-bg-color);
transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
}
@media (hover: hover) {
.o-scrollbar-rail:hover .o-scrollbar-x-thumb-bar {
height: var(--scrollbar-thumb-width-hover);
background-color: var(--scrollbar-thumb-bg-color-hover);
}
.o-scrollbar-rail:hover .o-scrollbar-y-thumb-bar {
width: var(--scrollbar-thumb-width-hover);
background-color: var(--scrollbar-thumb-bg-color-hover);
}
.o-scrollbar-rail:hover .o-scrollbar-track {
opacity: 1;
}
}
.o-scrollbar-y {
top: var(--scrollbar-y-top);
bottom: var(--scrollbar-y-bottom);
margin: auto;
left: var(--scrollbar-y-left);
right: var(--scrollbar-y-right);
width: var(--scrollbar-width);
height: var(--scrollbar-height);
}
.o-scrollbar-x {
left: var(--scrollbar-x-left);
right: var(--scrollbar-x-right);
margin: auto;
top: var(--scrollbar-x-top);
bottom: var(--scrollbar-x-bottom);
width: var(--scrollbar-height);
height: var(--scrollbar-width);
}
.o-scrollbar-dragging .o-scrollbar-track {
opacity: 1;
}
.o-scrollbar-track {
position: relative;
z-index: 0;
border-radius: var(--scrollbar-thumb-radius);
background-color: var(--scrollbar-track-bg-color);
opacity: 0;
transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
}
.o-scrollbar-y-track {
width: var(--scrollbar-track-width);
height: 100%;
left: 50%;
margin-left: calc(var(--scrollbar-track-width) / -2);
}
.o-scrollbar-x-track {
height: var(--scrollbar-track-width);
width: 100%;
top: 50%;
margin-top: calc(var(--scrollbar-track-width) / -2);
}
.o-scrollbar-thumb {
position: absolute;
z-index: 1;
}
.o-scrollbar-y-thumb {
top: 0;
left: 0;
right: 0;
min-height: var(--scrollbar-thumb-min-size);
}
.o-scrollbar-x-thumb {
left: 0;
top: 0;
bottom: 0;
min-width: var(--scrollbar-thumb-min-size);
display: flex;
}
.o-scrollbar-x-thumb-bar,
.o-scrollbar-y-thumb-bar {
background-color: var(--scrollbar-thumb-bg-color);
border-radius: var(--scrollbar-thumb-radius);
transition: all var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
margin: auto;
}
.o-scrollbar-x-thumb-bar.is-dragging,
.o-scrollbar-y-thumb-bar.is-dragging {
background-color: var(--scrollbar-thumb-bg-color-hover);
}
.o-scrollbar-x-thumb-bar {
width: 100%;
height: var(--scrollbar-thumb-width);
}
.o-scrollbar-x-thumb-bar.is-dragging {
height: var(--scrollbar-thumb-width-hover);
}
.o-scrollbar-y-thumb-bar {
width: var(--scrollbar-thumb-width);
height: 100%;
}
.o-scrollbar-y-thumb-bar.is-dragging {
width: var(--scrollbar-thumb-width-hover);
}
.o-scrollbar-wrapper {
position: relative;
}
.o-scrollbar-container {
overflow: auto;
scrollbar-width: none;
}
.o-scrollbar-container::-webkit-scrollbar {
display: none;
}
.o-scroller {
position: relative;
display: flex;
}
.o-scroller-container {
flex: 1;
padding: var(--scroller-padding);
overflow: auto;
scrollbar-width: none;
}
.o-scroller-container::-webkit-scrollbar {
display: none;
}
.o-scroller-container.is-x-disabled {
overflow-x: hidden;
}
.o-scroller-container.is-y-disabled {
overflow-y: hidden;
}
.o-scrollbar-to-body {
position: fixed;
z-index: var(--o-z-index-max);
}
.o-upload {
--upload-icon-size: var(--o-icon_size_control-xs);
--upload-icon-size-l: var(--o-icon_size_control-m);
--upload-icon-size-xl: var(--o-icon_size_control-l);
--upload-color: var(--o-color-info1);
--upload-color-error: var(--o-color-danger1);
--upload-color-disabled: var(--o-color-info4);
--upload-item-bg-hover: var(--o-color-control2-light);
--upload-item-radius: var(--o-radius_control-s);
--upload-progress-height: 1px;
--upload-progress-radius: var(--upload-progress-height);
--upload-progress-bg-color: var(--o-color-control3-light);
--upload-progress-value-bg-color: var(--o-color-primary1);
--upload-drag-padding: 32px 24px;
--upload-drag-width: 100%;
--upload-drag-radius: var(--o-radius_control-s);
--upload-drag-color: var(--o-color-info2);
--upload-drag-color-disabled: var(--o-color-info4);
--upload-drag-bg-color: var(--o-color-control-light);
--upload-drag-bg-color-hover: var(--o-color-control-light);
--upload-drag-bg-color-active: var(--o-color-control-light);
--upload-drag-bg-color-dragging: var(--o-color-primary4-light);
--upload-drag-bg-color-disabled: var(--o-color-control4-light);
--upload-drag-bd: 1px solid var(--o-color-control1);
--upload-drag-bd-hover: 1px dashed var(--o-color-primary2);
--upload-drag-bd-active: 1px dashed var(--o-color-primary3);
--upload-drag-bd-dragging: 1px dashed var(--o-color-primary2);
--upload-drag-bd-disabled: 1px dashed var(--o-color-control4);
--upload-card-radius: var(--o-radius_control-s);
--upload-card-width: 120px;
--upload-card-height: var(--upload-card-width);
--upload-card-gap: 8px;
--upload-card-bd: 1px solid var(--o-color-control1);
--upload-card-bd-hover: 1px solid var(--o-color-control2);
--upload-card-bd-disabled: 1px solid var(--o-color-control4);
--upload-card-bd-error: 1px solid var(--o-color-danger1);
--upload-card-bg-color: var(--o-color-control-light);
--upload-card-bg-color-hover: var(--o-color-control-light);
--upload-card-bg-color-disabled: var(--o-color-control4-light);
--upload-card-img-fit: cover;
--upload-card-mask: var(--o-color-mask1);
--upload-card-icon-color: var(--o-color-info1-inverse);
--upload-card-icon-color-hover: var(--o-color-info2-inverse);
--upload-card-icon-color-active: var(--o-color-info3-inverse);
}
.o-upload-select {
position: relative;
cursor: pointer;
}
.o-upload-select-input {
position: relative;
}
.o-upload-input {
position: absolute;
display: block;
width: 0;
height: 0;
opacity: 0;
}
.o-upload-item {
position: relative;
}
.o-upload-progress {
position: absolute;
height: var(--upload-progress-height);
background-color: var(--upload-progress-bg-color);
border-radius: var(--upload-progress-radius);
overflow: hidden;
}
.o-upload-progress-bar {
width: 0%;
height: 100%;
background-color: var(--upload-progress-value-bg-color);
border-radius: var(--upload-progress-radius);
transition: width var(--o-easing-linear) var(--o-duration-s);
}
.o-upload-row-item {
display: flex;
margin-top: 8px;
padding: 0 4px;
border-radius: var(--upload-item-radius);
color: var(--upload-color);
transition: background-color var(--o-easing-standard-in) var(--o-duration-m1);
}
@media (hover: hover) {
.o-upload-row-item:hover {
background-color: var(--upload-item-bg-hover);
}
.o-upload-row-item:hover .o-upload-icon-hover-in {
opacity: 1;
}
}
.o-upload-row-item.is-error .o-upload-icon-hover-in {
opacity: 1;
}
.o-upload-row-item + .o-upload-item-tip {
padding-left: 24px;
}
.o-upload-row-label {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
margin-right: auto;
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.o-upload-icon-link {
font-size: var(--upload-icon-size);
display: flex;
align-items: center;
margin-right: 8px;
}
.o-upload-row-icons {
display: flex;
margin-left: 16px;
font-size: var(--upload-icon-size);
}
.o-upload-row-icons > * + * {
margin-left: 8px;
}
.o-upload-row-icon {
display: flex;
align-items: center;
justify-content: center;
}
.o-upload-icon-hover-in {
opacity: 0;
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-upload-icon-loading {
margin-left: 8px;
}
.o-upload-select-extra {
font-size: var(--o-font_size-tip2);
line-height: var(--o-line_height-tip2);
color: var(--o-color-info4);
margin-top: 8px;
}
.o-upload-item-tip {
font-size: var(--o-font_size-tip2);
line-height: var(--o-line_height-tip2);
color: var(--o-color-info1);
display: flex;
margin-top: 4px;
}
.o-upload-item-tip.is-error {
color: var(--upload-color-error);
}
.o-upload-row-progress {
left: 4px;
right: 4px;
bottom: 0;
}
.o-upload-card-add {
border: var(--upload-card-bd);
background-color: var(--upload-card-bg-color);
width: var(--upload-card-width);
height: var(--upload-card-height);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--upload-card-radius);
text-align: center;
color: var(--upload-color);
cursor: pointer;
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-text1);
}
@media (hover: hover) {
.o-upload-card-add:hover {
border: var(--upload-card-bd-hover);
background-color: var(--upload-card-bg-color-hover);
}
}
.o-upload-card-add.is-disabled {
cursor: not-allowed;
color: var(--upload-color-disabled);
border: var(--upload-card-bd-disabled);
background-color: var(--upload-card-bg-color-disabled);
}
.o-upload-card-add-icon {
font-size: var(--upload-icon-size-l);
vertical-align: top;
}
.o-upload-card-add-icon + .o-upload-card-label {
margin-top: 8px;
}
.o-upload-card-list {
display: flex;
flex-wrap: wrap;
margin-bottom: calc(var(--upload-card-gap) * -1);
position: relative;
}
.o-upload-card-progress {
left: 8px;
right: 8px;
bottom: 4px;
}
.o-upload-item {
margin-right: var(--upload-card-gap);
margin-bottom: var(--upload-card-gap);
}
.o-upload-card-item.is-error .o-upload-card-file {
border: var(--upload-card-bd-error);
}
.o-upload-card-item-wrap {
position: relative;
border-radius: var(--upload-card-radius);
}
.o-upload-card-file {
border: var(--upload-card-bd);
background-color: var(--upload-card-bg-color);
width: var(--upload-card-width);
height: var(--upload-card-height);
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: inherit;
}
.o-upload-thumbnail {
width: 100%;
height: 100%;
object-fit: var(--upload-card-img-fit);
border-radius: inherit;
}
.o-upload-icon-file {
font-size: var(--upload-icon-size-xl);
}
.o-upload-card-icons {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--upload-card-mask);
border-radius: inherit;
opacity: 0;
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
@media (hover: hover) {
.o-upload-card-icons:hover {
opacity: 1;
}
}
.o-upload-card-icons.is-show {
opacity: 1;
}
.o-upload-card-icons > * + * {
margin-left: 12px;
}
.o-upload-card-icons > .o-upload-icon-btn {
cursor: pointer;
color: var(--o-color-info1-inverse);
font-size: var(--upload-icon-size-l);
}
@media (hover: hover) {
.o-upload-card-icons > .o-upload-icon-btn:hover:hover {
color: var(--upload-card-icon-color-hover);
}
}
.o-upload-card-icons > .o-upload-icon-btn:active {
color: var(--upload-card-icon-color-active);
}
.o-upload-drag {
padding: var(--upload-drag-padding);
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-text1);
color: var(--upload-drag-color);
background-color: var(--upload-drag-bg-color);
border: var(--upload-drag-bd);
text-align: center;
width: var(--upload-drag-width);
border-radius: var(--upload-drag-radius);
text-align: center;
transition: all var(--o-easing-standard) var(--o-duration-m2);
}
@media (hover: hover) {
.o-upload-drag:hover {
border: var(--upload-drag-bd-hover);
background-color: var(--upload-drag-bg-color-hover);
}
}
.o-upload-drag:active {
border: var(--upload-drag-bd-active);
background-color: var(--upload-drag-bg-color-active);
}
.o-upload-drag-dragging, .o-upload-drag-dragging:active {
border: var(--upload-drag-bd-dragging);
background-color: var(--upload-drag-bg-color-dragging);
}
@media (hover: hover) {
.o-upload-drag-dragging:hover {
border: var(--upload-drag-bd-dragging);
background-color: var(--upload-drag-bg-color-dragging);
}
}
.o-upload-drag-disabled {
cursor: not-allowed;
color: var(--upload-drag-color-disabled);
border: var(--upload-drag-bd-disabled);
background-color: var(--upload-drag-bg-color-disabled);
}
@media (hover: hover) {
.o-upload-drag-disabled:hover {
cursor: not-allowed;
color: var(--upload-drag-color-disabled);
border: var(--upload-drag-bd-disabled);
background-color: var(--upload-drag-bg-color-disabled);
}
}
.o-upload-drag-icon {
font-size: var(--upload-icon-size-l);
vertical-align: top;
}
.o-upload-drag-icon + .o-upload-drag-label {
margin-top: 12px;
}
.o-upload-list-picture-card {
display: flex;
flex-wrap: wrap;
margin-bottom: calc(var(--upload-card-gap) * -1);
position: relative;
}
.o-upload-list-picture-card .o-upload-item-tip {
padding-left: 0;
margin-bottom: 8px;
}
.o-upload-list-picture-card .o-upload-item-progress {
left: 0;
right: 0;
}
.o-upload-item-picture-card {
border: var(--upload-card-border);
width: var(--upload-card-width);
height: var(--upload-card-height);
flex-shrink: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--upload-card-radius);
position: relative;
margin-right: var(--upload-card-gap);
margin-bottom: var(--upload-card-gap);
margin-top: 0;
}
.o-upload-item-picture-card.is-error {
border: var(--upload-card-border-error);
}
.o-upload-thumbnail {
width: 100%;
height: 100%;
object-fit: var(--upload-card-img-fit);
border-radius: inherit;
}
.o-upload-icon-file {
font-size: var(--upload-icon-size-xl);
}
.o-upload-card-icons {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--o-color-info1-inverse);
font-size: var(--upload-icon-size-l);
background-color: var(--upload-card-mask);
opacity: 0;
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-upload-card-icons:hover, .o-upload-card-icons.is-show {
opacity: 1;
}
.o-upload-card-icons > * + * {
margin-left: 12px;
}
.o-upload-card-icons > .o-upload-icon-btn {
cursor: pointer;
}
.o-upload-card-icons > .o-upload-icon-btn:hover {
color: var(--upload-card-icon-color-hover);
}
.o-upload-card-icons > .o-upload-icon-btn:active {
color: var(--upload-card-icon-color-active);
}
@media (max-width: 1200px) {
.o-upload-card-icons {
opacity: 1;
}
}
@media (max-width: 1440px) {
.o-upload {
--upload-drag-padding: 16px 8px;
}
}
.o-toggle {
--toggle-size: var(--o-control_size-m);
--toggle-text-size: var(--o-font_size-text1);
--toggle-text-height: var(--o-line_height-text1);
--toggle-radius: var(--o-radius_control-s);
--toggle-gap: 4px;
--toggle-icon-size: var(--o-icon_size_control-m);
--toggle-padding: 0 15px;
--toggle-color: var(--o-color-info1);
--toggle-color-hover: var(--o-color-info1);
--toggle-color-active: var(--o-color-info1);
--toggle-color-disabled: var(--o-color-info4);
--toggle-bg-color: var(--o-color-control2-light);
--toggle-bg-color-hover: var(--o-color-control2-light);
--toggle-bg-color-active: var(--o-color-control3-light);
--toggle-bg-color-disabled: transparent;
--toggle-bd-color: var(--o-color-fill1);
--toggle-bd-color-hover: transparent;
--toggle-bd-color-active: transparent;
--toggle-bd-color-disabled: transparent;
--toggle-color-checked: var(--o-color-primary1);
--toggle-color-checked-hover: var(--o-color-primary2);
--toggle-color-checked-active: var(--o-color-primary3);
--toggle-color-checked-disabled: var(--o-color-primary4);
--toggle-bg-color-checked: transparent;
--toggle-bg-color-checked-hover: transparent;
--toggle-bg-color-checked-active: transparent;
--toggle-bg-color-checked-disabled: transparent;
--toggle-bd-color-checked: var(--o-color-primary1);
--toggle-bd-color-checked-hover: var(--o-color-primary2);
--toggle-bd-color-checked-active: var(--o-color-primary3);
--toggle-bd-color-checked-disabled: var(--o-color-primary4);
}
.o-toggle-round-pill {
--toggle-radius: var(--o-control_size-l);
}
.o-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--toggle-size);
max-width: var(--toggle-max-width);
min-width: var(--toggle-min-width);
padding: var(--toggle-padding);
transition: all var(--o-duration-s) var(--o-easing-standard);
background-color: var(--toggle-bg-color);
border: 1px solid var(--toggle-bd-color);
white-space: nowrap;
border-radius: var(--toggle-radius);
cursor: pointer;
}
@media (hover: hover) {
.o-toggle:hover {
color: var(--toggle-color-hover);
background-color: var(--toggle-bg-color-hover);
border: 1px solid var(--toggle-bd-color-hover);
}
}
.o-toggle:active {
color: var(--toggle-color-active);
background-color: var(--toggle-bg-color-active);
border: 1px solid var(--toggle-bd-color-active);
}
.o-toggle-checked {
background-color: var(--toggle-bg-color-checked);
color: var(--toggle-color-checked);
border: 1px solid var(--toggle-bd-color-checked);
}
@media (hover: hover) {
.o-toggle-checked:hover {
color: var(--toggle-color-checked-hover);
background-color: var(--toggle-bg-color-checked-hover);
border: 1px solid var(--toggle-bd-color-checked-hover);
}
}
.o-toggle-checked:active {
color: var(--toggle-color-checked-active);
background-color: var(--toggle-bg-color-checked-active);
border: 1px solid var(--toggle-bd-color-checked-active);
}
.o-toggle-disabled, .o-toggle-disabled:hover, .o-toggle-disabled.active {
cursor: not-allowed;
color: var(--toggle-color-disabled);
background-color: var(--toggle-bg-color-disabled);
border-color: var(--toggle-bd-color-disabled);
}
.o-toggle-checked.o-toggle-disabled, .o-toggle-checked.o-toggle-disabled:hover, .o-toggle-checked.o-toggle-disabled.active {
color: var(--toggle-color-checked-disabled);
background-color: var(--toggle-bg-color-checked-disabled);
border-color: var(--toggle-bd-color-checked-disabled);
}
.o-toggle-prefix {
display: inline-flex;
align-items: center;
font-size: var(--toggle-icon-size);
margin-right: var(--toggle-gap);
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-toggle {
--toggle-text-size: var(--o-font_size-tip1);
--toggle-text-height: var(--o-line_height-tip1);
--toggle-icon-size: var(--o-icon_size_control-xs);
}
}
@media (max-width: 1200px) {
.o-toggle {
--toggle-padding: 0 11px;
--toggle-text-size: var(--o-font_size-tip2);
--toggle-text-height: var(--o-line_height-tip2);
--toggle-icon-size: var(--o-icon_size_control-xs);
}
}
.o-anchor {
position: relative;
display: inline-flex;
align-items: stretch;
}
.o-anchor-line {
flex-shrink: 0;
position: relative;
width: var(--anchor-line-width);
border-radius: var(--anchor-line-width);
margin-right: var(--anchor-line-gap);
margin-left: calc(var(--anchor-circle-size) / 2);
}
.o-anchor-indicator {
position: absolute;
display: flex;
align-items: center;
width: var(--anchor-indicator-width);
background-color: transparent;
opacity: 0;
transition: top var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-anchor-indicator::after {
content: "";
width: var(--anchor-indicator-width);
height: var(--anchor-indicator-height);
border-radius: var(--anchor-line-width);
background-color: var(--o-color-primary1);
}
.o-anchor-item {
min-width: var(--anchor-item-min-width);
width: var(--anchor-item-width);
}
.o-anchor-item-link {
--anchor-item-link-left-extra-indent: calc(var(--anchor-item-text-indent) * var(--anchor-item-depth));
--anchor-circle-top: calc(var(--anchor-item-link-padding-v) + var(--anchor-item-link-text-height) / 2 - var(--anchor-circle-size) / 2);
cursor: pointer;
display: inline-flex;
text-decoration: none;
width: 100%;
color: var(--anchor-item-link-color, inherit);
font-size: var(--anchor-item-link-text-size);
line-height: var(--anchor-item-link-text-height);
padding: var(--anchor-item-link-padding-v) var(--anchor-item-link-padding-h);
padding-left: calc(var(--anchor-item-link-left-extra-indent) + var(--anchor-item-link-padding-h));
border-radius: var(--anchor-item-link-radius);
transition: background-color var(--o-duration-s) var(--o-easing-standard);
word-break: break-word;
position: relative;
}
@media (hover: hover) {
.o-anchor-item-link:hover {
color: var(--anchor-item-link-color-hover);
}
}
.o-anchor-item-link:active {
color: var(--anchor-item-link-color-press);
}
.o-anchor-item-link.disabled {
color: var(--anchor-item-link-color-disabled);
}
@media (hover: hover) {
.o-anchor-item-link.disabled:hover {
cursor: not-allowed;
}
}
.o-anchor-item:has(.o-anchor-item-link.is-active) > .o-anchor-item-link:not(.disabled),
.o-anchor-item-link.is-active:not(.disabled) {
font-weight: 600;
color: var(--anchor-item-link-color-active);
}
.o-anchor-item:has(.o-anchor-item-link.is-active) > .o-anchor-item-link:not(.disabled) .o-anchor-item-circle,
.o-anchor-item-link.is-active:not(.disabled) .o-anchor-item-circle {
border-color: currentColor;
}
.o-anchor-item-title {
max-height: calc(var(--anchor-item-max-row) * var(--anchor-item-link-text-height));
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--anchor-item-max-row);
}
.o-anchor-item-sub-link {
font-size: var(--anchor-item-sub-link-text-size);
line-height: var(--anchor-item-sub-link-text-height);
padding-top: var(--anchor-item-sub-link-padding-v);
padding-bottom: var(--anchor-item-sub-link-padding-v);
}
.o-anchor-item-lines {
width: var(--anchor-line-width);
position: absolute;
top: 0;
bottom: 0;
left: calc(0px - var(--anchor-line-gap) - var(--anchor-line-width));
}
.o-anchor-item-top-line,
.o-anchor-item-bottom-line {
background-color: var(--anchor-line-bg-color);
position: absolute;
left: 0;
right: 0;
}
.o-anchor-item-top-line {
top: 0;
bottom: 50%;
}
.o-anchor-item-bottom-line {
top: 50%;
bottom: 0;
}
.o-anchor-item-link:not(.o-anchor-item-sub-link) .o-anchor-item-circle {
position: absolute;
height: var(--anchor-circle-size);
width: var(--anchor-circle-size);
top: var(--anchor-circle-top);
left: 50%;
transform: translateX(-50%);
border: var(--anchor-circle-ring-width) solid var(--anchor-line-bg-color);
border-radius: 50%;
}
.o-anchor-item-link:not(.o-anchor-item-sub-link) .o-anchor-item-top-line {
bottom: unset;
height: calc(var(--anchor-circle-top) - var(--anchor-circle-gap));
}
.o-anchor-item-link:not(.o-anchor-item-sub-link) .o-anchor-item-bottom-line {
top: calc(var(--anchor-circle-top) + var(--anchor-circle-size) + var(--anchor-circle-gap));
}
@media (hover: hover) {
.o-anchor-item-link:not(.o-anchor-item-sub-link):hover .o-anchor-item-circle {
border-color: currentColor;
}
}
.o-anchor-items > .o-anchor-item:first-child > .o-anchor-item-link .o-anchor-item-top-line {
display: none;
}
.o-anchor-items > .o-anchor-item:last-child:not(.with-children) > .o-anchor-item-link .o-anchor-item-bottom-line {
display: none;
}
@media (hover: hover) {
.o-anchor-menu .o-anchor-item-sub-link:hover {
background-color: var(--anchor-item-bg-color-hover);
}
}
.o-anchor-menu .o-anchor-item-sub-link:active {
background-color: var(--anchor-item-bg-color-press);
}
.o-anchor-link-popover-wrapper {
max-width: var(--anchor-popover-max-width);
}
.o-anchor {
--anchor-line-width: 1px;
--anchor-line-bg-color: var(--o-color-control4);
--anchor-line-gap: var(--o-gap-2);
--anchor-indicator-width: 2px;
--anchor-indicator-height: 12px;
--anchor-indicator-bg-color: var(--o-color-primary1);
--anchor-circle-size: 8px;
--anchor-circle-ring-width: 1.5px;
--anchor-circle-gap: 8px;
}
.o-anchor-item {
--anchor-item-min-width: 144px;
--anchor-item-link-color: var(--o-color-info2);
--anchor-item-link-color-active: var(--o-color-primary1);
--anchor-item-link-color-hover: var(--o-color-primary2);
--anchor-item-link-color-press: var(--o-color-primary3);
--anchor-item-link-color-disabled: var(--o-color-info4);
--anchor-item-max-row: 2;
--anchor-item-link-text-size: var(--o-font_size-text1);
--anchor-item-link-text-height: var(--o-line_height-text1);
--anchor-item-sub-link-text-size: var(--o-font_size-tip1);
--anchor-item-sub-link-text-height: var(--o-line_height-tip1);
--anchor-item-link-padding-h: 8px;
--anchor-item-link-padding-v: 8px;
--anchor-item-sub-link-padding-v: 5px;
--anchor-item-link-radius: var(--o-radius_control-s);
--anchor-item-text-indent: 12px;
}
.o-anchor-small .o-anchor-item {
--anchor-item-link-text-size: var(--o-font_size-tip1);
--anchor-item-link-text-height: var(--o-line_height-tip1);
--anchor-item-sub-link-text-size: var(--o-font_size-tip2);
--anchor-item-sub-link-text-height: var(--o-line_height-tip2);
--anchor-item-link-padding-v: 5px;
--anchor-item-sub-link-padding-v: 5px;
}
.o-anchor-menu .o-anchor-item {
--anchor-item-link-text-size: var(--o-font_size-tip1);
--anchor-item-link-text-height: var(--o-line_height-tip1);
--anchor-item-sub-link-text-size: var(--o-font_size-tip1);
--anchor-item-sub-link-text-height: var(--o-line_height-tip1);
--anchor-item-link-padding-v: 5px;
--anchor-item-sub-link-padding-v: 5px;
--anchor-item-text-indent: 20px;
--anchor-item-bg-color-hover: var(--o-color-control2-light);
--anchor-item-bg-color-press: var(--o-color-control3-light);
}
.o-anchor-link-popover-wrapper {
--anchor-popover-max-width: 200px;
}
@media (min-width: 0px) and (max-width: 1680px) {
.o-anchor:not(.o-anchor-menu) .o-anchor-item {
--anchor-item-link-text-size: var(--o-font_size-tip1);
--anchor-item-link-text-height: var(--o-line_height-tip1);
--anchor-item-sub-link-text-size: var(--o-font_size-tip2);
--anchor-item-sub-link-text-height: var(--o-line_height-tip2);
--anchor-item-link-padding-v: 5px;
--anchor-item-sub-link-padding-v: 5px;
}
}
@media (max-width: 840px) {
.o-anchor-menu .o-anchor-item {
--anchor-item-sub-link-text-size: var(--o-font_size-tip2);
--anchor-item-sub-link-text-height: var(--o-line_height-tip2);
}
}
.o-collapse {
--collapse-radius: var(--o-radius_control-l);
--collapse-bg-color: var(--o-color-fill2);
--collapse-padding: 8px 32px;
--collapse-division-color: var(--o-color-control4);
}
.o-collapse-item {
--collapse-item-header-padding: 25px 0px;
--collapse-item-title-color: var(--o-color-info1);
--collapse-item-title-text-size: var(--o-font_size-h3);
--collapse-item-title-text-height: var(--o-line_height-h3);
--collapse-item-body-text-size: var(--o-font_size-text1);
--collapse-item-body-text-height: var(--o-line_height-text1);
--collapse-item-icon-color: var(--o-color-info1);
--collapse-item-icon-size: var(--o-icon_size_control-m);
--collapse-item-gap: 16px;
}
.o-collapse {
background-color: var(--collapse-bg-color);
padding: var(--collapse-padding);
border-radius: var(--collapse-radius);
}
.o-collapse-item + .o-collapse-item {
border-top: 1px solid var(--collapse-division-color);
}
.o-collapse-item-header {
padding: var(--collapse-item-header-padding);
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
cursor: pointer;
}
.o-collapse-item-title {
margin: 0;
color: var(--collapse-item-title-color);
font-size: var(--collapse-item-title-text-size);
line-height: var(--collapse-item-title-text-height);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.o-collapse-item-icon {
flex-shrink: 0;
color: var(--collapse-item-icon-color);
font-size: var(--collapse-item-icon-size);
transform: rotate(90deg);
transition: transform var(--o-duration-m2) var(--o-easing-standard);
}
.o-collapse-item-body {
font-size: var(--collapse-item-body-text-size);
line-height: var(--collapse-item-body-text-height);
margin-bottom: var(--collapse-item-gap);
overflow: hidden;
transition: height var(--o-duration-m2) var(--o-easing-standard);
}
.o-collapse-item-expanded .o-collapse-item-title {
font-weight: 500;
}
.o-collapse-item-expanded .o-collapse-item-icon {
transform: rotate(-90deg);
}
@media (min-width: 1201px) and (max-width: 1440px) {
.o-collapse {
--collapse-padding: 8px 24px;
}
.o-collapse-item {
--collapse-item-header-padding: 17px 0px;
--collapse-item-title-text-size: var(--o-font_size-text2);
--collapse-item-title-text-height: var(--o-line_height-text2);
--collapse-item-body-text-size: var(--o-font_size-tip1);
--collapse-item-body-text-height: var(--o-line_height-tip1);
--collapse-item-icon-color: var(--o-color-info1);
--collapse-item-icon-size: var(--o-icon_size_control-m);
--collapse-item-gap: 12px;
}
}
@media (max-width: 1200px) {
.o-collapse {
--collapse-radius: var(--o-radius_control-s);
--collapse-padding: 0px 16px;
}
.o-collapse-item {
--collapse-item-header-padding: 16px 0px;
--collapse-item-title-text-size: var(--o-font_size-text1);
--collapse-item-title-text-height: var(--o-line_height-text1);
--collapse-item-body-text-size: var(--o-font_size-tip1);
--collapse-item-body-text-height: var(--o-line_height-tip1);
--collapse-item-icon-color: var(--o-color-info1);
--collapse-item-icon-size: var(--o-icon_size_control-m);
--collapse-item-gap: 12px;
}
}
.o-skeleton {
--skeleton-bg-color: var(--o-color-control2-light);
}
.o-skeleton-animation {
--skeleton-bg-color: linear-gradient(90deg, var(--o-color-control2-light) 25%, var(--o-color-control3-light) 37%, var(--o-color-control2-light) 63%);
}
.o-skeleton-item {
--skeleton-item-gap: 24px;
}
.o-skeleton-text {
--skeleton-width: 100%;
--skeleton-height: var(--o-font_size-text1);
--skeleton-radius: var(--o-radius_control-xs);
--skeleton-last-line-width: 50%;
--skeleton-line-gap: calc(var(--o-line_height-text1) - var(--o-font_size-text1));
}
.o-skeleton-figure {
--skeleton-width: 320px;
--skeleton-height: 180px;
--skeleton-radius: var(--o-radius_control-xs);
}
.o-skeleton-avatar {
--skeleton-radius: var(--o-radius_control-xs);
}
.o-skeleton-avatar-large {
--skeleton-width: 80px;
--skeleton-height: 80px;
}
.o-skeleton-avatar-medium {
--skeleton-width: 64px;
--skeleton-height: 64px;
}
.o-skeleton-avatar-small {
--skeleton-width: 40px;
--skeleton-height: 40px;
}
.o-skeleton-avatar-mini {
--skeleton-width: 24px;
--skeleton-height: 24px;
}
.o-skeleton-round-pill {
--skeleton-radius: var(--skeleton-height);
}
@keyframes o-skeleton-ani {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.o-skeleton-text {
list-style: none;
margin: 0;
padding: 0;
width: var(--skeleton-width);
}
.o-skeleton-line {
width: 100%;
height: var(--skeleton-height);
border-radius: var(--skeleton-radius);
background: var(--skeleton-bg-color);
}
.o-skeleton-line:last-child:not(:first-child) {
width: var(--skeleton-last-line-width);
}
.o-skeleton-line + .o-skeleton-line {
margin-top: var(--skeleton-line-gap);
}
.o-skeleton-avatar,
.o-skeleton-figure {
width: var(--skeleton-width);
height: var(--skeleton-height);
border-radius: var(--skeleton-radius);
background: var(--skeleton-bg-color);
}
.o-skeleton-animation .o-skeleton-avatar,
.o-skeleton-animation .o-skeleton-figure,
.o-skeleton-animation .o-skeleton-line {
background-size: 400% 100%;
animation: o-skeleton-ani 1.4s var(--o-easing-linear) infinite;
}
.o-skeleton-item + .o-skeleton-item {
margin-top: var(--skeleton-item-gap);
}
@media (max-width: 1440px) {
.o-skeleton-avatar-large {
--skeleton-width: 64px;
--skeleton-height: 64px;
}
.o-skeleton-avatar-medium {
--skeleton-width: 48px;
--skeleton-height: 48px;
}
.o-skeleton-avatar-small {
--skeleton-width: 32px;
--skeleton-height: 32px;
}
}
@media (max-width: 1200px) {
.o-skeleton-avatar-medium {
--skeleton-width: 40px;
--skeleton-height: 40px;
}
}
.o-virtual-list {
display: block;
}
.o-virtual-list-wrapper {
height: 100%;
width: 100%;
max-height: inherit;
min-height: inherit;
max-width: inherit;
min-width: inherit;
overflow: auto;
}
.o-virtual-body {
overflow: hidden;
height: var(--content-height);
}
.o-virtual-render-list {
transform: translate3d(var(--offsetX, 0), var(--offsetY), 0);
}
.o-virtual-render-item {
overflow: auto;
}