@opensig/opendesign
Version:
10,828 lines • 286 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;
}
[data-o-theme="e.light"] {
--o-color-control2-light-raw: var(--o-brand-1);
--o-color-fill2-raw: var(--o-grey-1);
}
[data-o-theme="e.dark"] {
--o-color-control2-light-raw: var(--o-grey-5);
--o-color-fill2-raw: var(--o-grey-4);
}
[data-o-theme="g.light"] {
--o-color-control2-light-raw: var(--o-brand-1);
--o-color-fill2-raw: var(--o-grey-1);
}
[data-o-theme="g.dark"] {
--o-color-control2-light-raw: var(--o-grey-5);
--o-color-fill2-raw: var(--o-grey-4);
}
[data-o-theme="u.light"] {
--o-color-control2-light-raw: var(--o-brand-1);
--o-color-fill2-raw: var(--o-grey-1);
}
[data-o-theme="u.dark"] {
--o-color-control2-light-raw: var(--o-grey-5);
--o-color-fill2-raw: var(--o-grey-4);
}
[data-o-theme="m.light"] {
--o-color-control2-light-raw: var(--o-brand-1);
--o-color-fill2-raw: var(--o-grey-1);
}
[data-o-theme="m.dark"] {
--o-color-control2-light-raw: var(--o-grey-5);
--o-color-fill2-raw: var(--o-grey-4);
}
[data-o-theme="a.light"] {
--o-color-control2-light-raw: var(--o-grey-3);
--o-color-fill2-raw: var(--o-grey-1);
}
[data-o-theme="a.dark"] {
--o-color-control2-light-raw: var(--o-grey-5);
--o-color-fill2-raw: var(--o-grey-4);
}
[data-o-theme="k.light"] {
--o-color-control2-light-raw: var(--o-grey-3);
--o-color-fill2-raw: var(--o-grey-1);
}
[data-o-theme="k.dark"] {
--o-color-control2-light-raw: var(--o-grey-5);
--o-color-fill2-raw: var(--o-grey-4);
}
.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-info2));
--icon-color-hover: var(--input-icon-color-hover, var(--o-color-info1));
--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;
text-align: var(--_input-text-align, start);
}
.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;
transform: scale(1);
}
}
.o_input-clearable-focus .o_input-clear {
visibility: visible;
opacity: 1;
transform: scale(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 > span > 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));
--limit-bg-color: var(--_box-bg-color, var(--o-color-control5-light));
}
.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%;
max-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: 4px;
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 (max-width: 1200px) {
.o_textarea-clear {
right: 2px;
}
}
@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);
background-color: var(--limit-bg-color);
z-index: 0;
}
.o_textarea-count b {
font-weight: normal;
}
.o_textarea-count-error > span > 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-fill2);
--_box-bg-color-hover: var(--o-color-fill2);
--_box-bg-color-focus: var(--o-color-fill2);
--_box-bg-color-disabled: var(--o-color-fill2);
--_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-control5-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-control5-light);
--_box-bd-color-disabled: transparent;
--_box-bg-color-disabled: transparent;
}
.o_box-text.o_box-normal {
--_box-bd-color-hover: var(--o-color-control5-light);
--_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-text.o_box-success {
--_box-bd-color-hover: var(--o-color-control5-light);
--_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-text.o_box-warning {
--_box-bd-color-hover: var(--o-color-control5-light);
--_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-text.o_box-danger {
--_box-bd-color-hover: var(--o-color-control5-light);
--_box-bg-color-hover: var(--o-color-control5-light);
}
.o_box-outline.o_box-normal {
--_box-bd-color: var(--o-color-control1);
--_box-bd-color-hover: var(--o-color-control2);
--_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);
--_box-bd-color-hover: var(--o-color-success2);
--_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);
--_box-bd-color-hover: var(--o-color-warning2);
--_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);
--_box-bd-color-hover: var(--o-color-danger2);
--_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 {
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-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);
background-image: var(--btn-bg-image);
}
@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);
background-image: var(--btn-bg-image-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);
background-image: var(--btn-bg-image-active);
}
.o-btn-solid:focus-visible {
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-text {
color: var(--btn-color);
background-color: transparent;
padding: 0;
}
@media (hover: hover) {
.o-btn-text:hover {
color: var(--btn-color-hover);
background-color: transparent;
}
}
.o-btn-text:active {
color: var(--btn-color-active);
background-color: transparent;
}
.o-btn-icon-only {
width: var(--btn-height);
background-color: var(--btn-bg-color);
}
@media (hover: hover) {
.o-btn-icon-only:hover {
color: var(--btn-color-hover);
background-color: var(--btn-bg-color-hover);
}
}
.o-btn-icon-only:active {
color: var(--btn-color-active);
background-color: var(--btn-bg-color-active);
}
.o-btn-brand {
border: none;
}
@media (hover: hover) {
.o-btn-brand:hover {
border: none;
}
}
.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);
background-image: var(--btn-bg-image-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-prefix);
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-suffix);
font-size: var(--btn-icon-size);
}
.o-btn {
--btn-color: var(--o-color-info2);
--btn-color-hover: var(--o-color-control2);
--btn-color-active: var(--o-color-control3);
--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-color-hover: var(--o-color-primary2);
--btn-color-active: var(--o-color-primary3);
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-normal {
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-normal.o-btn-icon-only {
--btn-color-hover: var(--o-color-primary2);
--btn-bd-color-hover: var(--o-color-primary2);
}
.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-color: var(--o-color-info1);
}
.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-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-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-brand.o-btn-solid {
--btn-bg-image: linear-gradient(var(--o-color-primary1));
--btn-bg-image-hover: linear-gradient(var(--o-color-primary2));
--btn-bg-image-active: linear-gradient(var(--o-color-primary3));
--btn-bg-image-disabled: linear-gradient(var(--o-color-primary4));
}
.o-btn-small {
--btn-radius: var(--o-radius_control-xs);
--btn-gap: 4px;
--btn-gap-prefix: var(--btn-gap);
--btn-gap-suffix: var(--btn-gap);
--btn-padding: 0 15px;
--btn-icon-size: var(--o-icon_size-xs);
--btn-height: 28px;
}
.o-btn-medium {
--btn-min-width: 80px;
--btn-radius: var(--o-radius_control-s);
--btn-gap: 8px;
--btn-gap-prefix: var(--btn-gap);
--btn-gap-suffix: var(--btn-gap);
--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-gap-prefix: var(--btn-gap);
--btn-gap-suffix: var(--btn-gap);
--btn-padding: 0 23px;
--btn-icon-size: var(--o-icon_size-m);
--btn-height: var(--o-control_size-l);
}
.o-btn-round-pill {
--btn-radius: var(--o-control_size-l);
}
.o-btn-text {
--btn-bd-color-disabled: transparent;
}
.o-btn-text.o-btn-large {
--btn-gap-prefix: 8px;
--btn-gap-suffix: 4px;
}
.o-btn-text.o-btn-medium {
--btn-gap-prefix: 8px;
--btn-gap-suffix: 4px;
}
.o-btn-text.o-btn-small {
--btn-gap-prefix: 8px;
--btn-gap-suffix: 4px;
}
.o-btn-icon-only {
--btn-padding: 0;
--btn-max-width: none;
--btn-min-width: none;
}
.o-btn-icon-only.o-btn-text {
--btn-color-hover: var(--o-color-primary2);
--btn-color-active: var(--o-color-primary3);
--btn-bg-color-hover: var(--o-color-control2-light);
--btn-bg-color-active: var(--o-color-control3-light);
}
@media (max-width: 1680px) {
.o-btn-large {
--btn-height: 36px;
--btn-padding: 0 15px;
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
--btn-icon-size: var(--o-icon_size-s);
}
.o-btn-medium {
--btn-height: 28px;
--btn-gap: 4px;
}
}
@media (max-width: 840px) {
.o-btn-large {
--btn-height: 32px;
--btn-icon-size: var(--o-icon_size-xs);
}
.o-btn-small {
--btn-padding: 0 11px;
--btn-height: var(--o-control_size-s);
}
.o-btn-text.o-btn-small {
--btn-gap-prefix: 4px;
--btn-gap-suffix: 4px;
}
}
.o-switch {
--switch-radius: var(--o-control_size-s);
--switch-color: var(--o-color-info4);
--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);
--switch-icon-size: var(--o-icon_size-xs);
}
.o-switch-checked {
--switch-color: var(--o-color-info1-inverse);
}
.o-switch.o-switch-custom {
--switch-handler-color: var(--o-color-info1-inverse);
--switch-handler-bg-color: var(--o-color-primary1);
--switch-bg-color-checked: var(--switch-bg-color);
}
.o-switch-medium {
--switch-min-width: 40px;
--switch-size: var(--o-control_size-s);
--switch-text-size: var(--o-font_size-tip2);
--switch-text-height: var(--o-line_height-tip2);
--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 .o-svg-icon {
width: var(--switch-icon-size);
height: var(--switch-icon-size);
}
.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);
color: var(--switch-handler-color);
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-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.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;
--link-icon-size: 1.14em;
}
.o-link-normal {
--link-color: var(--o-color-link1);
--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-medium,
.o-link-small {
--link-icon-size: var(--o-icon_size_control-xs);
--link-text-size: var(--o-font_size-tip1);
--link-text-height: var(--o-line_height-tip1);
--link-icon-align: -0.08em;
}
.o-link-large {
--link-icon-size: var(--o-icon_size_control-s);
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
--link-icon-align: -0.1em;
}
.o-link {
cursor: pointer;
color: var(--link-color);
align-items: center;
text-decoration: none;
border: none;
outline: none;
background-color: transparent;
font-size: var(--link-text-size);
line-height: var(--link-text-height);
}
@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 {
padding: 0 2px;
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);
display: inline-flex;
align-items: center;
}
.o-link-prefix::before,
.o-link-suffix::before {
content: "x";
visibility: hidden;
user-select: none;
width: 0;
font-size: 1em;
flex-grow: 0;
}
.o-link-prefix .o-svg-icon,
.o-link-suffix .o-svg-icon {
flex-grow: 0;
flex-shrink: 0;
font-size: var(--link-icon-size);
}
.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;
}
@media (max-width: 1680px) {
.o-link-large {
--link-icon-size: var(--o-icon_size-xs);
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);
border: var(--popup-bd);
}
.o-popup-body {
position: relative;
z-index: 1;
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: 1px solid var(--o-color-control4);
--popup-padding: 9px 16px;
--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: 1680px) {
.o-popover {
--popover-text-size: var(--o-font_size-tip2);
--popover-text-height: var(--o-line_height-tip2);
--popup-padding: 7px 12px;
}
}
.o-input {
--_box-padding-y: 0;
--_box-padding-x: 15px;
--_box-padding: var(--_box-padding-y) var(--_box-padding-x);
}
.o-input.o_box-small {
--_box-padding-x: 7px;
--_box-height: var(--o-control_size-s);
}
.o-input.o_box-medium {
--_box-height: var(--o-control_size-m);
}
.o-input.o_box-large {
--_box-height: var(--o-control_size-l);
--input-icon-size: var(--o-icon_size-m);
}
.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 (max-width: 1680px) {
.o-input.o_box-large {
--input-icon-size: var(--o-icon_size-s);
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
--_box-height: 36px;
}
.o-input.o_box-medium {
--_box-height: 28px;
}
}
@media (max-width: 840px) {
.o-input.o_box-large {
--input-icon-size: var(--o-icon_size-m);
--_box-height: var(--o-control_size-l);
}
}
@media (max-width: 600px) {
.o-input {
--_box-padding-x: 11px;
}
.o-input.o_box-small {
--_box-padding-x: 5px;
}
}
.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: 126px;
--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;
max-width: 100%;
cursor: text;
}
.o-textarea.o_box-round-pill .o_textarea-count {
right: 16px;
}
.o-textarea-textarea {
min-width: 100%;
}
@media (max-width: 1680px) {
.o-textarea {
--textarea-min-height: 116px;
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
}
}
@media (max-width: 840px) {
.o-textarea.o_box-large {
--textarea-padding-h: 12px;
}
}
@media (max-width: 1200px) {
.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-control5-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 {
color: var(--option-color-active);
background-color: var(--option-bg-color-active);
}
.o-option-item:not(.o-option-multiple).active {
font-weight: 600;
}
.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: 1680px) {
.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-fill2);
--select-bg-color-hover: var(--o-color-fill2);
--select-bg-color-focus: var(--o-color-fill2);
--select-bg-color-disabled: var(--o-color-fill2);
--select-icon-color: var(--o-color-info3);
--select-icon-color-disabled: var(--o-color-info4);
--select-icon-gap: var(--o-gap-2);
}
.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-options-medium .o-option {
--option-text-size: var(--o-font_size-tip1);
--option-text-height: var(--o-line_height-tip1);
--option-padding: 4px 12px;
}
.o-select-options-medium .o-cascader-option {
--cascader-option-text-size: var(--o-font_size-tip1);
--cascader-option-text-height: var(--o-line_height-tip1);
--cascader-option-padding: 3px 12px;
--cascader-option-icon-size: var(--o-icon_size-xs);
}
.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;
}
@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-prefix {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: var(--select-icon-gap);
font-size: var(--select-icon-size);
color: var(--select-icon-color);
}
.o-select-suffix {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
margin-left: var(--select-icon-gap);
}
.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;
font-size: var(--select-icon-size);
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: 1680px) {
.o-select-large {
--select-text-size: var(--o-font_size-tip1);
--select-text-height: var(--o-line_height-tip1);
--select-height: 36px;
--select-icon-size: var(--o-icon_size_control-s);
}
.o-select-medium {
--select-height: 28px;
}
.o-select-options-medium .o-option {
--option-padding: 2px 12px;
}
.o-select-options-medium .o-cascader-option {
--cascader-option-padding: 2px 12px;
}
}
@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 (max-width: 840px) {
.o-select-large {
--select-icon-size: var(--o-icon_size_control-m);
--select-height: var(--o-control_size-l);
}
}
.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);
--tab-nav-icon-gap: 8px;
--tab-nav-ellipsis-padding-x: 16px;
--tab-nav-ellipsis-shadow-width: 8px;
--tab-nav-ellipsis-shadow-color: var(--o-grey-14);
--tab-nav-ellipsis-shadow-gradient:
rgba(var(--tab-nav-ellipsis-shadow-color), 0), rgba(var(--tab-nav-ellipsis-shadow-color), 0.022) 40%, rgba(var(--tab-nav-ellipsis-shadow-color), 0.045) 59%,
rgba(var(--tab-nav-ellipsis-shadow-color), 0.1) 100%;
}
.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 18px;
}
.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 16px;
}
.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-control5-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-button {
--tab-nav-color-hover: var(--o-color-primary1);
--tab-nav-color-active: var(--o-color-primary1);
--tab-nav-bg-color: var(--o-color-fill3);
--tab-nav-bg-color-active: var(--o-color-fill2);
--tab-nav-active-border: 1px solid var(--o-color-control4-light);
--tab-nav-justify: flex-start;
--tab-nav-icon-gap: 4px;
--tab-btn-radius: var(--o-radius_control-s);
}
.o-tab-button.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-m);
--tab-nav-gap: 4px;
--tab-nav-padding: 6px 16px;
--tab-nav-list-padding: 4px;
}
.o-tab-button.o-tab-large .o-tab-nav:has(.o-icon:only-child) {
--tab-nav-padding: 7px 8px;
--tab-nav-icon-gap: 0;
}
.o-tab-button.o-tab-medium, .o-tab-button.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-xs);
--tab-nav-gap: 4px;
--tab-nav-padding: 2px 16px;
--tab-nav-list-padding: 2px;
}
.o-tab-button.o-tab-medium .o-tab-nav:has(.o-icon:only-child), .o-tab-button.o-tab-small .o-tab-nav:has(.o-icon:only-child) {
--tab-nav-padding: 5px 6px;
--tab-nav-icon-gap: 0;
}
.o-tab-button-inverse {
--tab-nav-bg-color: var(--o-color-fill2);
--tab-nav-bg-color-active: var(--o-color-fill3);
}
.o-tab-navs {
display: flex;
align-items: center;
position: relative;
flex-grow: 1;
flex-shrink: 1;
min-width: 0px;
justify-content: var(--tab-nav-justify, center);
}
@media (max-width: 840px) {
.o-tab-navs:has(.o-tab-nav-add) {
--_mb-right-offset: calc(var(--tab-nav-btn-size) + 8px);
}
.o-tab-navs.o-tab-navs-overflown-left:before {
display: block;
content: "";
position: absolute;
width: var(--tab-nav-ellipsis-shadow-width);
left: 0;
top: 1px;
bottom: 1px;
pointer-events: none;
z-index: 2;
background: linear-gradient(270deg, var(--tab-nav-ellipsis-shadow-gradient));
}
.o-tab-navs.o-tab-navs-overflown-right:after {
display: block;
content: "";
position: absolute;
width: var(--tab-nav-ellipsis-shadow-width);
right: var(--_mb-right-offset, 0px);
top: 1px;
bottom: 1px;
pointer-events: none;
z-index: 2;
background: linear-gradient(90deg, var(--tab-nav-ellipsis-shadow-gradient));
}
}
.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-container {
min-width: 0;
overflow-x: hidden;
position: relative;
flex-grow: 1;
}
.o-tab-navs-container:not(.overflown) {
display: grid;
grid-template-columns: 1fr;
justify-items: var(--tab-nav-justify, center);
}
@media (max-width: 840px) {
.o-tab-navs-container {
overflow-x: auto;
scrollbar-width: none;
}
.o-tab-navs-container::-webkit-scrollbar {
display: none;
}
.o-tab-navs-container.o-tab-navs-container-mb-overflown {
justify-items: start;
}
}
.o-tab-nav-list {
display: flex;
justify-content: var(--tab-nav-justify, center);
white-space: nowrap;
width: fit-content;
overflow: hidden;
}
.o-tab-nav-list.width-measurement {
height: 0;
}
.o-tab-navs-container.overflown .o-tab-nav-list {
justify-content: flex-start;
}
.o-tab-nav {
display: 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;
padding: var(--tab-nav-padding);
z-index: 1;
color: var(--tab-icon-color);
}
.o-tab-nav + .o-tab-nav {
margin-left: var(--tab-nav-gap);
}
.o-tab-nav.o-tab-nav-ellipsis {
margin-left: unset;
padding-left: var(--tab-nav-ellipsis-padding-x);
padding-right: var(--tab-nav-ellipsis-padding-x);
position: absolute;
right: 0;
z-index: 1;
}
.o-tab-nav.o-tab-nav-ellipsis:before {
display: block;
content: "";
position: absolute;
width: var(--tab-nav-ellipsis-shadow-width);
left: calc(0px - var(--tab-nav-ellipsis-shadow-width));
top: 0;
bottom: 0;
pointer-events: none;
z-index: 2;
background: linear-gradient(90deg, var(--tab-nav-ellipsis-shadow-gradient));
}
@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: var(--tab-nav-icon-gap);
}
.o-tab-nav-active {
font-weight: 600;
}
.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,
.o-tab-nav-more-arrow {
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%;
transition: transform var(--o-easing-standard-in) var(--o-duration-m1);
}
@media (hover: hover) {
.o-tab-nav-close:hover,
.o-tab-nav-more-arrow:hover {
color: var(--tab-icon-color-hover);
}
}
.o-tab-nav-close,
.o-tab-nav-more-arrow {
overflow: hidden;
}
.o-tab-nav-close svg,
.o-tab-nav-more-arrow svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-tab-nav-close:hover svg,
.o-tab-nav-more-arrow:hover svg {
transform: rotate(180deg);
}
}
.o-tab-nav-more-arrow.active {
transform: rotate(-180deg);
}
.o-tab-more-popup {
min-width: 120px;
}
.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;
}
.o-tab-button .o-tab-nav-list {
background-color: var(--tab-nav-bg-color);
padding: var(--tab-nav-list-padding);
}
.o-tab-button .width-measurement {
padding: 0;
}
.o-tab-button .o-tab-nav-list,
.o-tab-button .o-tab-nav {
border-radius: var(--tab-btn-radius);
}
.o-tab-button .o-tab-nav-active {
border: var(--tab-nav-active-border);
}
@media (max-width: 1680px) {
.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 16px;
}
.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 10px;
}
.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;
}
.o-tab-button.o-tab-large {
--tab-nav-text-size: var(--o-font_size-text1);
--tab-nav-text-height: var(--o-line_height-text1);
--tab-nav-icon-size: var(--o-icon_size-s);
--tab-nav-padding: 4px 16px;
}
.o-tab-button.o-tab-large .o-tab-nav:has(.o-icon:only-child) {
--tab-nav-padding: 6px 6px;
}
.o-tab-button.o-tab-medium, .o-tab-button.o-tab-small {
--tab-nav-padding: 1px 16px;
}
.o-tab-button.o-tab-medium .o-tab-nav:has(.o-icon:only-child), .o-tab-button.o-tab-small .o-tab-nav:has(.o-icon:only-child) {
--tab-nav-padding: 3px 3px;
}
}
@media (max-width: 840px) {
.o-tab {
--tab-nav-ellipsis-shadow-width: 48px;
--tab-nav-ellipsis-shadow-color: var(--o-color-fill2-raw);
--tab-nav-ellipsis-shadow-gradient:
rgba(var(--tab-nav-ellipsis-shadow-color), 0), rgba(var(--tab-nav-ellipsis-shadow-color), 0) 50%, rgba(var(--tab-nav-ellipsis-shadow-color), 1) 100%;
}
.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 3px;
}
.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 4px;
}
.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-tab-button.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-xs);
--tab-nav-padding: 3px 16px;
--tab-nav-list-padding: 2px;
}
.o-tab-button.o-tab-medium .o-tab-nav:has(.o-icon:only-child), .o-tab-button.o-tab-small .o-tab-nav:has(.o-icon:only-child) {
--tab-nav-padding: 4px 4px;
}
}
.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-disabled-cell-color: var(--o-color-info3);
--table-fixed-head-shadow: var(--o-shadow-1);
--table-fixed-col-shadow-size: 16px;
--table-fixed-col-shadow-gradient:
rgba(var(--o-grey-14), 0.1), rgba(var(--o-grey-14), 0.045) 41%, rgba(var(--o-grey-14), 0.022) 60%, rgba(var(--o-grey-14), 0) 100%;
--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);
--table-row-hover: var(--o-color-control2-light);
--table-row-active: var(--o-color-control3-light);
--table-border-width: 1px;
--table-border: var(--table-border-width) 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);
--table-disabled-bg-color: var(--o-color-control4-light);
--table-expand-bg-color: var(--o-color-fill3);
--table-stripe-bg-color: rgba(var(--o-color-control2-light-raw), 0.4);
--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;
--table-expand-cell-padding: 32px;
--table-column-resizer-width: 8px;
--table-row-icon-size: var(--o-icon_size-m);
--table-row-icon-gap: 8px;
}
.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;
--table-expand-cell-padding: 24px;
}
[data-o-theme$=".dark"] .o-table {
--table-fixed-col-shadow-gradient: rgba(var(--o-grey-1), 0.1), rgba(var(--o-grey-1), 0.045) 80%, rgba(var(--o-grey-1), 0.022) 100%;
}
.o-table {
position: relative;
/* 水平外边框宽度 */
--h-frame-border-width: 0px;
/* 垂直外边框宽度 */
--v-frame-border-width: 0px;
/* 水平内边框宽度 */
--h-border-width: 0px;
}
.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;
}
@supports (-webkit-overflow-scrolling: touch) {
.o-table thead:after {
display: none;
}
.o-table thead th {
border-bottom: var(--table-border);
}
}
.o-table th,
.o-table td {
box-sizing: border-box;
}
.o-table th,
.o-table .o-table-column-as-header {
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);
background-color: var(--table-bg-color);
color: var(--table-cell-color);
height: var(--table-cell-height);
}
.o-table .o-table-row-disabled td {
background-color: var(--table-disabled-bg-color);
color: var(--table-disabled-cell-color);
}
.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);
}
.o-table-stripe tbody:not(:has([rowspan])) tr:not(.o-table-highlight):nth-child(even) td {
background-image: linear-gradient(to right, var(--table-stripe-bg-color), var(--table-stripe-bg-color));
}
@media (hover: hover) {
td.o-table-highlight,
.o-table-highlight td {
background-color: var(--table-row-hover);
}
}
@media (hover: none) {
td.o-table-highlight,
.o-table-highlight td {
background-color: var(--table-row-active);
}
}
.o-table-wrap {
border-radius: var(--table-radius);
overflow: hidden;
}
.o-table thead:has([rowspan]),
.o-table thead:has([colspan]) {
--h-border-width: var(--table-border-width);
}
.o-table thead:has([rowspan]) tr:not(:last-child) th:not(.o-table-last-header-row-cell),
.o-table thead:has([colspan]) tr:not(:last-child) th:not(.o-table-last-header-row-cell) {
border-bottom: var(--table-border);
}
.o-table thead:has([rowspan]) th,
.o-table thead:has([colspan]) th {
border-left: var(--table-border);
}
.o-table thead:has([rowspan]) th.o-cell-first-col,
.o-table thead:has([colspan]) th.o-cell-first-col {
border-left: none;
}
.o-table-border-all,
.o-table-border-frame {
border: var(--table-border);
--h-frame-border-width: var(--table-border-width);
--v-frame-border-width: var(--table-border-width);
}
.o-table-border-all,
.o-table-border-row {
--h-border-width: var(--table-border-width);
}
.o-table-border-all td,
.o-table-border-row td {
border-bottom: var(--table-border);
}
.o-table-border-all tr.o-row-last td,
.o-table-border-frame tr.o-row-last td,
.o-table-border-row tr.o-row-last td {
border-bottom-color: transparent;
}
.o-table-border-all td.o-cell-last-row,
.o-table-border-frame td.o-cell-last-row,
.o-table-border-row td.o-cell-last-row {
border-bottom-color: transparent;
}
.o-table-border-all td,
.o-table-border-column td {
border-right: var(--table-border);
}
.o-table-border-all td.o-cell-last-col,
.o-table-border-column td.o-cell-last-col {
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 (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;
--table-expand-cell-padding: 24px;
--table-row-icon-size: var(--o-icon_size-s);
}
}
@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;
--table-expand-cell-padding: 16px;
}
}
@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;
--table-expand-cell-padding: 12px;
--table-row-icon-size: var(--o-icon_size-m);
}
}
@media (max-width: 1680px) {
.o-table-small {
--table-expand-cell-padding: 16px;
}
}
@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-expand-cell-padding: 12px;
--table-radius: var(--o-radius_control-s);
}
}
.o-data-table {
--table-filter-trigger-gap: 4px;
--table-filter-trigger-size: 16px;
}
.o-table-header-fill {
--table-head-bg: var(--o-color-control3-light);
--table-head-border-bottom: var(--table-border-width) solid var(--table-head-bg);
}
.o-data-table-column-filter-popup {
--popup-bg-color: var(--o-color-control5-light);
--popup-radius: var(--o-radius-xs);
--popup-shadow: var(--o-shadow-2);
--table-filter-popup-width: 192px;
}
.o-data-table-column-filter-wrapper {
--table-filter-option-list-max-height-default: 256px;
}
.o-data-table {
border-radius: var(--table-radius);
overflow: hidden;
position: relative;
}
.o-data-table .o-table-scroll-bar .o-scrollbar-x {
width: calc(100% - var(--table-edge-padding) * 2);
}
.o-data-table .o-table-scroll-bar .o-scrollbar-y {
margin: calc(var(--table-header-height) * 1px + var(--table-cell-padding-y)) 0 var(--table-cell-padding-y) 0;
height: calc(100% - var(--table-header-height) * 1px - var(--table-cell-padding-y) * 2);
}
.o-data-table .o-table-scroll-bar .o-scrollbar-rail {
z-index: 4;
}
.o-data-table .o-table-wrap {
height: var(--table-height);
max-height: var(--table-max-height);
overflow: auto;
position: relative;
border-radius: unset;
}
.o-data-table .o-table-header {
position: sticky;
top: 0;
z-index: 2;
transition: box-shadow var(--o-duration-s) var(--o-easing-standard);
background-color: var(--table-head-bg);
}
.o-data-table.o-table-border-all .o-table-header, .o-data-table.o-table-border-frame .o-table-header {
top: 0;
}
.o-data-table.is-overflow-top:not(.o-table-header-split-line) .o-table-header {
box-shadow: var(--table-fixed-head-shadow);
}
.o-data-table .o-table-body-cell {
position: relative;
}
.o-data-table .o-data-table-header-divider-v {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 0;
bottom: calc(0px - var(--table-border-width));
right: calc(0px - var(--table-border-width));
width: 1px;
background-image: var(--o-color-main2, linear-gradient(to right, var(--o-color-control4), var(--o-color-control4)));
background-size: 1px 100%;
}
.o-data-table .o-table-header:after {
display: none;
}
.o-data-table .o-data-table-header-divider-h {
position: sticky;
z-index: 3;
top: calc(var(--table-header-height) * 1px);
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-data-table.o-table-header-fill th {
border-bottom: var(--table-head-border-bottom);
}
.o-data-table.o-table-header-split-line .o-table-column-as-header + .o-table-body-cell {
border-left-color: transparent;
}
.o-data-table .o-table-expand-cell {
background-color: var(--table-expand-bg-color);
}
.o-data-table .o-table-cell__inner {
display: flex;
align-items: center;
word-break: break-word;
}
.o-data-table .o-table-cell-tooltip .o-table-cell__inner-content {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: var(--cell-max-row);
line-clamp: var(--cell-max-row);
-webkit-box-orient: vertical;
}
.o-data-table .o-table-header-cell {
white-space: nowrap;
}
.o-data-table .o-table-header-cell .o-svg-icon {
font-size: var(--o-icon_size-xs);
}
.o-data-table .o-table-cell-wrappable {
white-space: normal;
}
.o-data-table .o-table-header-cell .o-table-cell__inner {
padding: var(--table-head-cell-padding);
}
.o-data-table .o-table-body-cell .o-table-cell__inner {
padding: var(--table-cell-padding);
}
.o-data-table .o-table-cell .o-table-expand-cell__inner {
padding: var(--table-expand-cell-padding);
}
.o-data-table .o-table-cell {
position: relative;
padding: unset !important;
}
.o-data-table .o-table-cell.o-cell-first-col {
padding-left: unset;
}
.o-data-table .o-table-cell.o-cell-first-col .o-table-cell__inner {
padding-left: var(--table-edge-padding);
}
.o-data-table .o-table-cell.o-cell-last-col {
padding-right: unset;
}
.o-data-table .o-table-cell.o-cell-last-col .o-table-cell__inner {
padding-right: var(--table-edge-padding);
}
.o-data-table .o-table-cell.o-cell-last-col .o-table-expand-cell__inner {
padding-right: var(--table-expand-cell-padding);
}
.o-data-table.o-table-border-all td, .o-data-table.o-table-border-column td {
border-left: var(--table-border);
border-right: none;
}
.o-data-table.o-table-border-all td.o-cell-first-col, .o-data-table.o-table-border-column td.o-cell-first-col {
border-left: none;
}
.o-data-table.o-table-border-all.is-overflow-right .o-table-cell-first-right-fixed, .o-data-table.o-table-border-column.is-overflow-right .o-table-cell-first-right-fixed {
border-left: none;
}
.o-data-table .o-table-cell-fixed {
position: sticky;
position: -webkit-sticky;
z-index: 1;
}
.o-data-table .o-data-table-left-shadow,
.o-data-table .o-data-table-right-shadow {
z-index: 3;
}
.o-data-table .o-table-cell-last-left-fixed:after,
.o-data-table .o-table-cell-first-right-fixed:before,
.o-data-table .o-data-table-left-shadow,
.o-data-table .o-data-table-right-shadow {
content: "";
position: absolute;
top: 0;
bottom: calc(0px - var(--h-border-width));
width: var(--table-fixed-col-shadow-size);
display: none;
}
.o-data-table .o-table-cell-last-left-fixed:after,
.o-data-table .o-data-table-left-shadow {
background: linear-gradient(90deg, var(--table-fixed-col-shadow-gradient));
}
.o-data-table .o-table-cell-last-left-fixed:after {
right: 0;
transform: translateX(100%);
}
.o-data-table .o-data-table-left-shadow {
left: 0;
}
.o-data-table .o-table-cell-first-right-fixed:before,
.o-data-table .o-data-table-right-shadow {
background: linear-gradient(-90deg, var(--table-fixed-col-shadow-gradient));
}
.o-data-table .o-table-cell-first-right-fixed:before {
left: 0;
transform: translateX(-100%);
}
.o-data-table .o-data-table-right-shadow {
right: 0;
}
.o-data-table.is-overflow-left .o-table-cell-last-left-fixed:after {
display: block;
}
.o-data-table.is-overflow-left .o-data-table-left-shadow {
display: block;
}
.o-data-table.is-overflow-right .o-table-cell-first-right-fixed:before {
display: block;
}
.o-data-table.is-overflow-right .o-data-table-right-shadow {
display: block;
}
.o-data-table .empty-placeholder {
height: calc(var(--table-height) - var(--table-header-height) * 1px - var(--h-border-width) * 2);
min-height: calc(var(--table-body-min-height) - var(--table-header-height) * 1px - var(--h-border-width) * 2);
}
.o-data-table .o-table-loading-wrap,
.o-data-table .o-table-tip-wrap {
min-height: unset;
position: absolute;
top: calc(var(--table-header-height) * 1px);
left: 0;
right: 0;
bottom: 0;
background-color: var(--table-bg-color);
border-radius: 0;
}
.o-data-table .o-table-column-resizer__indicator {
position: absolute;
left: calc(var(--table-column-resizer-width) / 2 - var(--table-border-width) / 2);
z-index: 3;
width: var(--table-border-width);
height: var(--table-height);
border-left: var(--table-border-width) dashed var(--o-color-info4);
}
.o-data-table .o-table-column-resizer {
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
right: calc(0px - var(--table-column-resizer-width) / 2);
width: var(--table-column-resizer-width);
}
@media (hover: hover) {
.o-data-table .o-table-column-resizer:hover {
cursor: col-resize;
}
}
@media (hover: hover) {
.o-data-table .o-table-header:where(:not(:has([rowspan])):not(:has([colspan]))) .o-table-column-resizer:hover:after {
display: block;
content: "";
position: absolute;
left: calc(var(--table-column-resizer-width) / 2);
top: 0;
bottom: calc(0px - var(--table-border-width));
z-index: 3;
width: var(--table-border-width);
border-left: var(--table-border);
}
}
.o-data-table .o-cell-last-col .o-table-column-resizer {
width: calc(var(--table-column-resizer-width) / 2);
right: 0;
}
.o-data-table-info__trigger,
.o-data-table-column-filter__trigger,
.o-data-table-sorter {
margin-left: var(--table-filter-trigger-gap);
font-size: var(--table-filter-trigger-size);
line-height: var(--table-filter-trigger-size);
width: var(--table-filter-trigger-size);
height: var(--table-filter-trigger-size);
}
@media (hover: hover) {
.o-data-table-info__trigger:hover,
.o-data-table-column-filter__trigger:hover,
.o-data-table-sorter:hover {
cursor: pointer;
}
.o-data-table-info__trigger:hover.disabled,
.o-data-table-column-filter__trigger:hover.disabled,
.o-data-table-sorter:hover.disabled {
cursor: not-allowed;
}
}
.o-data-table-info__trigger.active, .o-data-table-info__trigger.o-data-table-sorter-asc .sort_svg__up-arrow, .o-data-table-info__trigger.o-data-table-sorter-desc .sort_svg__down-arrow,
.o-data-table-column-filter__trigger.active,
.o-data-table-column-filter__trigger.o-data-table-sorter-asc .sort_svg__up-arrow,
.o-data-table-column-filter__trigger.o-data-table-sorter-desc .sort_svg__down-arrow,
.o-data-table-sorter.active,
.o-data-table-sorter.o-data-table-sorter-asc .sort_svg__up-arrow,
.o-data-table-sorter.o-data-table-sorter-desc .sort_svg__down-arrow {
color: var(--o-color-primary1);
}
.o-data-table-column-filter-popup {
width: var(--table-filter-popup-width);
}
.o-data-table-column-filter__input-container {
padding: 16px 16px 4px 16px;
}
@media (max-width: 840px) {
.o-data-table-column-filter__input-container {
padding: 4px 0;
}
}
.o-data-table-column-filter__input-container .o-input {
width: 100%;
}
.o-data-table-column-filter__input-icon {
font-size: var(--table-text-size);
}
.o-data-table-column-filter__options-container .o-option-list {
--option-list-max-height-default: var(--table-filter-option-list-max-height-default);
}
.o-data-table-column-filter__options-container .o-option {
--option-text-size: var(--table-text-size);
--option-text-height: var(--table-text-height);
}
.o-data-table-column-filter__options-container .o-checkbox {
--checkbox-text-size: var(--table-text-size);
--checkbox-text-height: var(--table-text-height);
}
.o-data-table-column-filter__options-container .o-data-table-column-filter__empty {
text-align: center;
color: var(--o-color-info4);
padding: 12px 0;
font-size: var(--table-text-size);
line-height: var(--table-text-height);
}
@media (max-width: 840px) {
.o-data-table-column-filter__options-container .o-option-list {
padding: 0;
}
.o-data-table-column-filter__options-container .o-option-multiple {
border-radius: 0;
--option-padding: 12px 0;
--option-gap: 0;
position: relative;
}
.o-data-table-column-filter__options-container .o-option-multiple:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid var(--o-color-control4);
}
.o-data-table-column-filter__options-container .o-checkbox {
width: 100%;
}
.o-data-table-column-filter__options-container .o-checkbox-wrap {
width: 100%;
flex-direction: row-reverse;
justify-content: space-between;
}
.o-data-table-column-filter__options-container .o-checkbox-label {
margin-left: 0;
}
}
.o-data-table-column-filter__divider {
--o-divider-gap: 4px;
}
.o-data-table-column-filter__footer {
padding: 4px 8px 8px 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: var(--table-text-size);
line-height: var(--table-text-height);
}
.o-table-row-icon-placeholder {
width: var(--table-row-icon-size);
margin-right: var(--table-row-icon-gap);
visibility: hidden;
}
.o-table-row-expand-trigger {
font-size: var(--table-row-icon-size);
margin-right: var(--table-row-icon-gap);
visibility: hidden;
transition: transform var(--o-duration-s) var(--o-easing-standard);
}
.o-table-row-expand-trigger.expandable {
visibility: visible;
}
@media (hover: hover) {
.o-table-row-expand-trigger.expandable:hover {
cursor: pointer;
}
}
.o-table-row-expand-trigger.loading {
visibility: visible;
}
.o-table-row-expand-trigger.expanded {
transform: rotate(90deg);
}
.o-table-row-checkbox {
--checkbox-input-wrap-size: var(--table-row-icon-size);
--checkbox-label-gap: var(--table-row-icon-gap);
}
.o-pagination {
--pagination-item-size: var(--o-control_size-m);
--pagination-arrow-size: var(--o-control_size-s);
--pagination-item-gap: 24px;
--pagination-item-sm-gap: 8px;
--pagination-item-size-gap: 12px;
--pagination-arrow-color: var(--o-color-info2);
--pagination-arrow-color-hover: var(--o-color-control2);
--pagination-arrow-color-active: var(--o-color-control3);
--pagination-arrow-color-disabled: var(--o-color-info4);
--pagination-item-color: var(--o-color-info2);
--pagination-item-bg-color: transparent;
--pagination-item-bg-color-hover: var(--o-color-primary2);
--pagination-item-bg-color-active: var(--o-color-control3);
--pagination-item-bg-color-current: var(--o-color-primary1);
--pagination-item-bd-color: transparent;
--pagination-item-color-hover: var(--o-color-info1-inverse);
--pagination-item-color-active: var(--o-color-info1-inverse);
--pagination-item-color-current: var(--o-color-info1-inverse);
--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-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-select.o-select-medium {
--select-height: var(--pagination-item-size);
}
.o-pagination-input {
--_input-text-align: center;
}
.o-pagination-input.o_box-medium {
--_box-height: 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-total + .o-pagination-size {
margin-left: var(--pagination-item-size-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: var(--pagination-item-sm-gap);
margin-right: var(--pagination-item-sm-gap);
display: flex;
align-items: center;
}
.o-pagination-goto {
display: flex;
align-items: center;
}
.o-pagination-ly-simple .o-pagination-pages {
margin-left: var(--pagination-item-gap);
margin-right: var(--pagination-item-gap);
}
.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: var(--pagination-item-sm-gap);
}
@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: 72px;
}
.o-pagination-goto .o-pagination-input {
margin-left: var(--pagination-item-sm-gap);
}
.o-pagination-select {
width: 116px;
}
.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-virtual-more-list {
max-height: inherit;
}
@media (max-width: 1680px) {
.o-pagination {
--pagination-item-size: 28px;
--pagination-item-gap: 16px;
--pagination-item-size-gap: 8px;
}
}
.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-control5-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-fill2);
}
.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: 1680px) {
.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 {
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);
}
.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-control5-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-fill2);
}
@media (max-width: 1680px) {
.o-checkbox {
--checkbox-text-size: var(--o-font_size-tip1);
--checkbox-text-height: var(--o-line_height-tip1);
}
}
.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-checkbox-group-h {
--checkbox-group-gap: 24px;
}
.o-checkbox-group-v {
--checkbox-group-gap: 16px;
}
.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-main1);
}
.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);
--tag-bd: 1px solid var(--tag-bd-color);
--tag-bg-image: none;
--tag-icon-close-color: inherit;
--tag-icon-close-color-hover: inherit;
--tag-icon-close-color-active: inherit;
}
.o-tag-normal {
--tag-color: var(--o-color-info1);
--tag-bg-color: var(--o-color-control2-light);
--tag-bd-color: var(--o-color-control2-light);
--tag-bg-color-hover: var(--o-color-control3-light);
--tag-bd-color-hover: var(--o-color-control3-light);
}
.o-tag-normal.o-tag-outline {
--tag-bg-color: transparent;
--tag-bd-color: var(--o-color-control4);
--tag-color-hover: var(--o-color-info1);
--tag-bd-color-hover: var(--o-color-control4);
}
.o-tag-primary {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-primary1);
--tag-bd-color: var(--o-color-primary1);
--tag-bg-color-hover: var(--o-color-primary2);
--tag-bd-color-hover: var(--o-color-primary2);
}
.o-tag-primary.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-primary1);
--tag-color-hover: var(--o-color-primary2);
}
[data-o-theme^="a."] .o-tag-solid.o-tag-primary,
[data-o-theme^="k."] .o-tag-solid.o-tag-primary {
--tag-color: var(--o-color-info1-inverse);
}
.o-tag-success {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-success1);
--tag-bd-color: var(--o-color-success1);
--tag-bg-color-hover: var(--o-color-success2);
--tag-bd-color-hover: var(--o-color-success2);
}
.o-tag-success.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-success1);
--tag-color-hover: var(--o-color-success2);
}
.o-tag-warning {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-warning1);
--tag-bd-color: var(--o-color-warning1);
--tag-bg-color-hover: var(--o-color-warning2);
--tag-bd-color-hover: var(--o-color-warning2);
}
.o-tag-warning.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-warning1);
--tag-color-hover: var(--o-color-warning2);
}
.o-tag-danger {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-danger1);
--tag-bd-color: var(--o-color-danger1);
--tag-bg-color-hover: var(--o-color-danger2);
--tag-bd-color-hover: var(--o-color-danger2);
}
.o-tag-danger.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-danger1);
--tag-color-hover: var(--o-color-danger2);
}
.o-tag-pending {
--tag-color: var(--o-color-white);
--tag-bg-color: rgb(var(--o-blue-6));
--tag-bd-color: rgb(var(--o-blue-6));
--tag-bg-color-hover: rgb(var(--o-blue-4));
--tag-bd-color-hover: rgb(var(--o-blue-4));
}
.o-tag-pending.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: rgb(var(--o-blue-6));
--tag-color-hover: rgb(var(--o-blue-4));
}
.o-tag-disabled {
--tag-color: var(--o-color-white);
--tag-bg-color: var(--o-color-info4);
--tag-bd-color: var(--o-color-info4);
}
.o-tag-disabled.o-tag-outline {
--tag-bg-color: transparent;
--tag-color: var(--o-color-info4);
}
.o-tag-large {
--tag-padding: 0 11px;
--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-medium {
--tag-padding: 0 7px;
--tag-text-size: var(--o-font_size-tip2);
--tag-text-height: var(--o-line_height-tip2);
--tag-height: 20px;
--tag-icon-size: var(--o-icon_size_control-xs);
--tag-icon-gap: 4px;
}
.o-tag-small {
--tag-padding: 0 5px;
--tag-text-size: 10px;
--tag-text-height: 14px;
--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: var(--tag-bd);
border-radius: var(--tag-radius);
padding: var(--tag-padding);
background-image: var(--tag-bg-image);
background-color: var(--tag-bg-color);
color: var(--tag-color);
display: inline-flex;
align-items: center;
justify-content: center;
background-clip: padding-box;
}
.o-tag-interactive {
transition: background-color var(--o-duration-s) var(--o-easing-standard), border-color var(--o-duration-s) var(--o-easing-standard), color var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o-tag-interactive:hover {
background-color: var(--tag-bg-color-hover, var(--tag-bg-color));
border-color: var(--tag-bd-color-hover, var(--tag-bd-color));
}
.o-tag-interactive:hover.o-tag-outline {
color: var(--tag-color-hover, var(--tag-color));
background-color: var(--tag-bg-color, transparent);
}
}
.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);
}
.o-tag-main2 {
--tag-color: var(--o-color-white);
--tag-bd: none;
--tag-bg-color: transparent;
--tag-bg-image: var(--o-color-main2);
}
.o-tag-main2.o-tag-outline {
position: relative;
--tag-bg-image: var(--o-color-main2);
--tag-color: transparent;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
--tag-icon-close-color: var(--o-color-main2-end);
--tag-icon-close-color-hover: var(--o-color-main2-end);
--tag-icon-close-color-active: var(--o-color-main2-end);
}
.o-tag-main2.o-tag-outline .o-tag-icon {
color: var(--o-color-main2-start);
}
.o-tag-main2.o-tag-outline::before {
content: "";
position: absolute;
z-index: 0;
inset: 0;
border-radius: inherit;
padding: 1px;
background-image: var(--o-color-main2);
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@media (max-width: 1680px) {
.o-tag-large {
--tag-padding: 0 7px;
--tag-height: 20px;
}
}
@media (max-width: 840px) {
.o-tag-medium {
--tag-padding: 0 5px;
--tag-text-size: 10px;
--tag-text-height: 14px;
--tag-height: var(--o-control_size-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 {
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;
}
.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: 6px;
--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);
}
@media (max-width: 840px) {
.o-badge {
--badge-dot-size: 6px;
}
}
.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);
}
}
@media (max-width: 840px) {
.o-divider-line {
transform: scaleY(0.5);
}
.o-divider-v {
transform: scaleX(0.5);
}
}
.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-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;
/** 标准输入框宽度 */
--form-item-main-box-width-standard: min(var(--o-r-grid-6), 100%);
/** 较宽输入框宽度 */
--form-item-main-box-width-wide: min(var(--o-r-grid-14), 100%);
/** 同域多控件输入框间距 */
--form-item-main-box-inline-gap: var(--o-r-gap-4);
/** 最小输入框宽度，通常在同域多输入框场景下使用 */
--form-item-main-box-width-min: calc((var(--form-item-main-box-width-standard) - var(--form-item-main-box-inline-gap)) / 2);
}
.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;
--form-label-main-gap-v: 8px;
}
.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-layout-v .o-form-item-label {
margin-bottom: var(--form-label-main-gap-v);
}
.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 (min-width: 1201px) and (max-width: 1680px) {
.o-form {
--form-item-gap: 16px;
--form-label-main-gap: 24px;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-form {
--form-item-gap: 12px;
--form-label-main-gap: 16px;
--form-item-main-box-width-standard: min(var(--o-r-grid-4), 100%);
--form-item-main-box-width-wide: min(var(--o-r-grid-8), 100%);
}
}
@media (max-width: 840px) {
.o-form {
--form-item-gap: 12px;
--form-label-main-gap: 8px;
--form-item-main-box-width-standard: min(var(--o-r-grid-6), 100%);
--form-item-main-box-width-wide: min(var(--o-r-grid-6), 100%);
}
}
@media (max-width: 600px) {
.o-form {
--form-msg-gap: 4px 0 0 12px;
--form-item-main-box-width-standard: min(var(--o-r-grid-4), 100%);
--form-item-main-box-width-wide: min(var(--o-r-grid-4), 100%);
}
}
.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-arrow-right:not(:has(.o-sub-menu-title-icon, .o-menu-item-icon)) {
--menu-base-indent: 16px;
}
.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;
}
@media (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);
}
}
@media (max-width: 840px) {
.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 {
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 {
font-weight: 600;
}
.o-breadcrumb-item:last-child .o-breadcrumb-item-label {
color: var(--breadcrumb-color-selected);
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-separator-size);
font-size: var(--breadcrumb-separator-size);
line-height: 1;
transition: color var(--o-duration-s) var(--o-easing-standard);
margin: 0 var(--breadcrumb-gap);
}
.o-breadcrumb {
--breadcrumb-color: var(--o-color-info3);
--breadcrumb-color-hover: var(--o-color-primary2);
--breadcrumb-color-active: var(--o-color-primary3);
--breadcrumb-color-selected: var(--o-color-primary1);
--breadcrumb-text-size: var(--o-font_size-tip1);
--breadcrumb-text-height: var(--o-line_height-tip1);
--breadcrumb-gap: 4px;
--breadcrumb-separator-size: var(--o-icon_size_control-m);
--breadcrumb-label-max-width: 140px;
}
@media (max-width: 1680px) {
.o-breadcrumb {
--breadcrumb-text-size: var(--o-font_size-tip2);
--breadcrumb-text-height: var(--o-line_height-tip2);
--breadcrumb-separator-size: var(--o-icon_size_control-xs);
}
}
.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);
}
.o-dropdown-item + .o-dropdown-item {
margin-top: var(--dropdown-item-gap);
}
.o-dropdown-disabled, .o-dropdown-disabled:hover {
cursor: not-allowed;
color: var(--dropdown-item-color-disabled);
background-color: var(--dropdown-item-bg-color-disabled);
}
.o-dropdown .o-btn-large {
--btn-padding: 0 15px 0 23px;
--btn-gap: 4px;
}
.o-dropdown .o-btn-medium {
--btn-padding: 0 11px 0 15px;
--btn-gap: 4px;
}
.o-dropdown .o-btn-small {
--btn-padding: 0 11px 0 15px;
--btn-gap: 4px;
}
.o-dropdown-list {
--dropdown-list-bg-color: var(--o-color-control5-light);
--dropdown-list-shadow: var(--o-shadow-2);
--dropdown-list-bd: none;
--dropdown-list-radius: var(--o-radius_control-m);
--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: left;
--dropdown-item-padding: 7px 12px;
--dropdown-item-gap: 2px;
--dropdown-item-radius: var(--o-radius_control-s);
}
.o-dropdown-list-small .o-dropdown-item,
.o-dropdown-list-medium .o-dropdown-item {
--dropdown-item-text-size: var(--o-font_size-tip1);
--dropdown-item-text-height: var(--o-line_height-tip1);
--dropdown-item-padding: 4px 12px;
}
@media (max-width: 1680px) {
.o-dropdown .o-btn-large {
--btn-padding: 0 11px 0 15px;
}
}
@media (min-width: 841px) and (max-width: 1680px) {
.o-dropdown-list-large .o-dropdown-item {
--dropdown-item-text-size: var(--o-font_size-tip1);
--dropdown-item-text-height: var(--o-line_height-tip1);
--dropdown-item-padding: 6px 12px;
}
.o-dropdown-list-small .o-dropdown-item,
.o-dropdown-list-medium .o-dropdown-item {
--dropdown-item-padding: 2px 12px;
}
}
@media (max-width: 840px) {
.o-dropdown .o-btn-small {
--btn-padding: 0 7px 0 11px;
}
}
.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-main2);
--progress-circle-bar-bg-color: var(--o-color-primary1);
--progress-icon-color: var(--o-color-primary1);
}
.o-progress-success {
--progress-bar-bg-color: var(--o-color-main2);
--progress-circle-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-circle-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-circle-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: 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-circle-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: 1680px) {
.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-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: var(--dlg-btn-gap);
}
.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-control5-light);
--dlg-radius: var(--o-radius_control-xs);
--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);
--dlg-btn-gap: 16px;
}
.o-dialog-auto {
--dlg-max-height: 80%;
}
.o-dialog-exlarge {
--dlg-width: 65%;
--dlg-max-height: 780px;
--dlg-min-height: 520px;
}
.o-dialog-large {
--dlg-width: 60%;
--dlg-max-height: 780px;
--dlg-min-height: 424px;
}
.o-dialog-medium {
--dlg-width: 40%;
--dlg-max-height: 480px;
--dlg-min-height: 328px;
}
.o-dialog-small {
--dlg-width: 25%;
--dlg-max-height: 272px;
--dlg-min-height: 224px;
--dlg-header-gap: 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: 1680px) {
.o-dialog {
--dlg-edge-gap: 24px;
--dlg-inner-gap: 16px;
}
}
@media (max-width: 1200px) {
.o-dialog {
--dlg-edge-gap: 16px;
--dlg-inner-gap: 12px;
}
}
@media (max-width: 840px) {
.o-dialog {
--dlg-radius: var(--o-radius_control-s);
}
}
@media (min-width: 1201px) and (max-width: 1680px) {
.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: 1680px) {
.o-dialog-exlarge {
--dlg-width: 75%;
--dlg-max-height: 80%;
--dlg-min-height: 65%;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog-exlarge {
--dlg-width: 80%;
--dlg-max-height: 80%;
--dlg-min-height: 65%;
}
}
@media (max-width: 840px) {
.o-dialog-exlarge {
--dlg-width: 100%;
--dlg-max-height: 100%;
--dlg-min-height: 100%;
--dlg-radius: 0;
--dlg-margin: 0;
}
}
@media (min-width: 1201px) and (max-width: 1680px) {
.o-dialog-large {
--dlg-width: 60%;
--dlg-max-height: 80%;
--dlg-min-height: 50%;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog-large {
--dlg-width: 65%;
--dlg-max-height: 80%;
--dlg-min-height: 50%;
}
}
@media (max-width: 840px) {
.o-dialog-large {
--dlg-width: 100%;
--dlg-max-height: 100%;
--dlg-min-height: 100%;
--dlg-radius: 0;
--dlg-margin: 0;
}
}
@media (min-width: 1201px) and (max-width: 1680px) {
.o-dialog-medium {
--dlg-width: 40%;
--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;
}
}
@media (min-width: 601px) and (max-width: 840px) {
.o-dialog-medium {
--dlg-width: 75%;
--dlg-max-height: 80%;
--dlg-min-height: 128px;
}
}
@media (max-width: 600px) {
.o-dialog-medium {
--dlg-width: 100vw;
--dlg-max-height: 65%;
--dlg-min-height: 128px;
--dlg-margin: 24px;
}
}
@media (min-width: 1201px) and (max-width: 1680px) {
.o-dialog-small {
--dlg-width: 25%;
--dlg-max-height: 50%;
--dlg-min-height: 20%;
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.o-dialog-small {
--dlg-width: 32%;
--dlg-min-height: 128px;
--dlg-max-height: 80%;
}
}
@media (min-width: 601px) and (max-width: 840px) {
.o-dialog-small {
--dlg-width: 75%;
--dlg-min-height: 128px;
--dlg-max-height: 80%;
}
}
@media (max-width: 600px) {
.o-dialog-small {
--dlg-width: 100vw;
--dlg-min-height: 128px;
--dlg-max-height: 65%;
--dlg-margin: 24px;
}
}
@media (max-width: 600px) {
.o-dialog-phone-half-full {
--dlg-width: 100%;
--dlg-margin: 0;
}
.o-dialog-phone-half-full.o-dialog-auto .o-dlg-main, .o-dialog-phone-half-full.o-dialog-small .o-dlg-main, .o-dialog-phone-half-full.o-dialog-medium .o-dlg-main {
border-radius: var(--dlg-radius) var(--dlg-radius) 0 0;
}
}
@media (min-width: 1201px) and (max-width: 1680px) {
.o-dialog {
--dlg-btn-gap: 12px;
}
}
@media (max-width: 1200px) {
.o-dialog {
--dlg-btn-gap: 8px;
}
}
.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);
--loading-label-font-size: var(--o-font_size-tip2);
--loading-label-line-height: var(--o-line_height-tip2);
--loading-label-icon-gap: 8px;
--loading-content-direction: column;
}
.o-loading-large {
--loading-icon-size: 96px;
--loading-label-font-size: var(--o-font_size-text1);
--loading-label-line-height: var(--o-line_height-text1);
--loading-label-icon-gap: 16px;
}
.o-loading-medium {
--loading-icon-size: var(--o-icon_size-4xl);
--loading-label-font-size: var(--o-font_size-tip1);
--loading-label-line-height: var(--o-line_height-tip1);
--loading-label-icon-gap: 12px;
}
.o-loading-small {
--loading-icon-size: var(--o-icon_size-xs);
--loading-content-direction: row;
--loading-label-icon-gap: 4px;
}
.o-loading-mini {
--loading-content-direction: row;
--loading-icon-size: var(--o-icon_size_control-xs);
}
.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;
flex-direction: var(--loading-content-direction);
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: var(--loading-label-icon-gap);
}
.o-loading-large .o-loading-icon + .o-loading-label, .o-loading-medium .o-loading-icon + .o-loading-label {
margin-left: 0;
margin-top: var(--loading-label-icon-gap);
}
.o-loading-label {
font-size: var(--loading-label-font-size);
line-height: var(--loading-label-line-height);
}
.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);
}
@media (min-width: 841px) and (max-width: 1680px) {
.o-loading-large {
--loading-icon-size: var(--o-icon_size-4xl);
--loading-label-font-size: var(--o-font_size-tip1);
--loading-label-line-height: var(--o-line_height-tip1);
--loading-label-icon-gap: 12px;
}
.o-loading-medium {
--loading-icon-size: var(--o-icon_size-2xl);
--loading-label-font-size: var(--o-font_size-tip2);
--loading-label-line-height: var(--o-line_height-tip2);
--loading-label-icon-gap: 8px;
}
}
@media (max-width: 840px) {
.o-loading-large {
--loading-icon-size: var(--o-icon_size-2xl);
--loading-label-font-size: var(--o-font_size-tip2);
--loading-label-line-height: var(--o-line_height-tip2);
--loading-label-icon-gap: 8px;
}
.o-loading-medium {
--loading-icon-size: var(--o-icon_size-2xl);
--loading-label-font-size: var(--o-font_size-tip2);
--loading-label-line-height: var(--o-line_height-tip2);
--loading-label-icon-gap: 4px;
}
}
.o-figure {
--figure-padding-top: 0px;
--figure-fit: cover;
--figure-position: center;
--figure-radius: 0;
--figure-error-bk: var(--o-color-control4);
--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);
pointer-events: none;
}
.o-figure.is-error {
background-color: var(--figure-error-bk);
}
.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-bg.o-figure-no-ratio .o-figure-wrap {
position: absolute;
inset: 0;
}
.o-figure-bg.o-figure-no-ratio .o-figure-main {
position: relative;
}
.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: 1680px) {
.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 {
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: var(--card-header-text-weight);
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-detail-limited {
--card-detail-mask-bg-color: var(--o-grey-1);
--card-detail-mask-width: 4em;
position: relative;
display: block;
text-overflow: clip;
}
.o-card-detail-limited::after {
background-image: linear-gradient(90deg, rgba(var(--card-detail-mask-bg-color), 0), rgba(var(--card-detail-mask-bg-color), 0.8) 66%, rgba(var(--card-detail-mask-bg-color)) 100%);
bottom: 0;
content: "";
pointer-events: none;
position: absolute;
right: 0;
width: var(--card-detail-mask-width);
height: var(--card-content-text-height);
}
.o-card-popover {
word-wrap: break-word;
max-width: var(--card-popover-width);
}
[data-o-theme*=dark] .o-card-detail-limited {
--card-detail-mask-bg-color: var(--o-grey-4);
}
.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;
}
.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-v: 24px;
--card-main-padding-h: 32px;
--card-main-padding: var(--card-main-padding-v) var(--card-main-padding-h);
--card-icon-gap: 16px;
--card-icon-color: var(--o-color-info1);
--card-icon-size: var(--o-icon_size-2xl);
--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-header-text-weight: 600;
--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.o-card-cover {
--card-main-padding-h: 24px;
}
.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-popover {
--card-popover-width: auto;
}
@media (min-width: 1201px) and (max-width: 1680px) {
.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-v: 16px;
--card-main-padding-h: 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);
}
.o-card:not(.o-card-no-responsive).o-card-cover {
--card-main-padding-h: 16px;
}
}
@media (min-width: 841px) 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-v: 12px;
--card-main-padding-h: 16px;
--card-icon-gap: 8px;
--card-icon-size: var(--o-icon_size-xl);
--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;
}
.o-card:not(.o-card-no-responsive).o-card-cover {
--card-main-padding-h: 12px;
}
}
@media (max-width: 840px) {
.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-v: 8px;
--card-main-padding-h: 12px;
--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-card:not(.o-card-no-responsive).o-card-cover {
--card-main-padding-h: 8px;
}
}
.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;
}
.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-primary2);
--carousel-indicator-bg-color-active: var(--o-color-primary3);
--carousel-indicator-bg-color-selected: var(--o-color-primary1);
}
@media (min-width: 841px) and (max-width: 1680px) {
.o-carousel {
--carousel-indicator-width: 40px;
--carousel-indicator-height: 3px;
--carousel-indicator-gap: 8px;
--carousel-indicator-offset: 11px;
}
}
@media (max-width: 840px) {
.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;
}
}
@media (max-width: 600px) {
.o-carousel {
--carousel-indicator-width: 16px;
}
}
.o-message {
--message-color: var(--o-color-info2);
--message-text-size: var(--o-font_size-text1);
--message-text-height: var(--o-line_height-text1);
--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-gap-suffix: 16px;
--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;
}
.o-messgage-both {
--message-title-size: var(--o-font_size-tip1);
--message-title-height: var(--o-line_height-tip1);
--message-text-size: var(--o-font_size-tip1);
--message-text-height: var(--o-line_height-tip1);
--message-text-align: left;
--message-title-gap: 5px;
--message-padding: 5px 12px 8px;
}
.o-message-colorful {
--message-shadow: none;
--message-sidebar-width: 4px;
}
.o-message-only-title {
--message-title-size: var(--o-font_size-tip1);
--message-title-height: var(--o-line_height-tip1);
--message-padding: 4px 12px;
}
.o-message-only-content {
--message-text-size: var(--o-font_size-tip1);
--message-text-height: var(--o-line_height-tip1);
--message-text-align: left;
--message-padding: 4px 12px;
}
.o-message-info {
--message-icon-color: var(--o-color-auxiliary5);
}
.o-message-info.o-message-colorful {
--message-bg-color: var(--o-blue-6);
}
.o-message-success {
--message-icon-color: var(--o-color-success1);
}
.o-message-success.o-message-colorful {
--message-bg-color: var(--o-green-6);
}
.o-message-warning {
--message-icon-color: var(--o-color-warning1);
}
.o-message-warning.o-message-colorful {
--message-bg-color: var(--o-orange-6);
}
.o-message-danger {
--message-icon-color: var(--o-color-danger1);
}
.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;
--message-list-top-offset: var(--message-list-offset);
--message-list-bottom-offset: var(--message-list-offset);
--z-index: 1001;
}
.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: var(--message-sidebar-width);
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);
}
.o-message-close {
overflow: hidden;
}
.o-message-close svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-message-close:hover svg {
transform: rotate(180deg);
}
}
@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: var(--z-index);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.o-message-list-top {
top: var(--message-list-top-offset);
}
.o-message-list-top .o-message + .o-message {
margin-top: var(--message-gap);
}
.o-message-list-bottom {
bottom: var(--message-list-bottom-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 (max-width: 1680px) {
.o-message {
--message-padding: 7px 12px;
--message-gap: 12px;
--message-text-size: var(--o-font_size-tip1);
--message-text-height: var(--o-line_height-tip1);
--message-icon-size: var(--o-icon_size_control-s);
}
.o-messgage-both {
--message-text-size: var(--o-font_size-tip2);
--message-text-height: var(--o-line_height-tip2);
--message-padding: 5px 12px 8px;
}
.o-message-only-title {
--message-padding: 5px 12px;
}
.o-message-only-content {
--message-text-size: var(--o-font_size-tip2);
--message-text-height: var(--o-line_height-tip2);
--message-padding: 6px 12px;
}
}
@media (max-width: 1200px) {
.o-message {
--message-gap: 8px;
}
}
@media (max-width: 840px) {
.o-messgage-both {
--message-title-size: var(--o-font_size-tip2);
--message-title-height: var(--o-line_height-tip2);
--message-icon-size: var(--o-icon_size_control-xs);
--message-padding: 4px 12px;
--message-title-gap: 4px;
}
.o-message-colorful {
--message-sidebar-width: 3px;
}
.o-message-only-title {
--message-title-size: var(--o-font_size-tip2);
--message-title-height: var(--o-line_height-tip2);
--message-icon-size: var(--o-icon_size_control-xs);
--message-padding: 4px 12px;
}
.o-message-only-content {
--message-icon-size: var(--o-icon_size_control-xs);
--message-padding: 4px 12px;
}
}
.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: 269px;
height: 100%;
overflow-y: auto;
}
.o-cascader-options + .o-cascader-options {
border-left: 1px solid var(--cascader-options-bd-color);
}
.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 {
display: flex;
align-items: center;
font-size: var(--cascader-option-icon-size);
margin-left: var(--cascader-option-icon-gap);
}
.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-cascader {
--cascader-height: auto;
--option-list-max-height: 378px;
}
.o-cascader-options {
--cascader-options-bd-color: 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-m);
--cascader-option-gap: 2px;
--cascader-option-icon-gap: var(--o-gap-2);
}
@media (max-width: 1680px) {
.o-cascader-option {
--cascader-option-text-size: var(--o-font_size-tip1);
--cascader-option-text-height: var(--o-line_height-tip1);
--cascader-option-padding: 6px 12px;
--cascader-option-icon-size: var(--o-icon_size-s);
}
}
.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: 1680px) {
.o-row-pc-s {
--col-gap-x: calc(var(--row-pc-s-gap-x) / 2);
--col-gap-y: var(--row-pc-s-gap-y);
}
.o-col-pc-s {
flex: var(--col-pc-s-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: 240px;
--result-image-height: 210px;
--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-h3);
--result-title-text-height: var(--o-line_height-h3);
--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: 600;
}
.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: 841px) and (max-width: 1680px) {
.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: 840px) {
.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-text1);
--result-title-text-height: var(--o-line_height-text1);
--result-desc-text-size: var(--o-font_size-tip2);
--result-desc-text-height: var(--o-line_height-tip2);
--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-info3);
--scrollbar-thumb-bg-color-active: var(--o-color-info2);
--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-rail .o-scrollbar-x-thumb-bar,
.o-scrollbar-rail .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-rail .o-scrollbar-x-thumb-bar.is-dragging,
.o-scrollbar-rail .o-scrollbar-y-thumb-bar.is-dragging {
background-color: var(--scrollbar-thumb-bg-color-active);
}
.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-item-picture-size: var(--o-icon_size-2xl);
--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-max-width: 480px;
--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-control2-light);
--upload-drag-bg-color-hover: var(--o-color-control2-light);
--upload-drag-bg-color-active: var(--o-color-control2-light);
--upload-drag-bg-color-dragging: var(--o-color-control2-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 solid var(--o-color-control2);
--upload-drag-bd-active: 1px solid var(--o-color-control3);
--upload-drag-bd-dragging: 1px solid var(--o-color-control3);
--upload-drag-bd-disabled: 1px solid 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-control2-light);
--upload-card-bg-color-hover: var(--o-color-control2-light);
--upload-card-bg-color-disabled: var(--o-color-control4-light);
--upload-card-img-fit: contain;
--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;
width: fit-content;
}
.o-upload-select-drag {
width: auto;
max-width: var(--upload-drag-max-width);
}
.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;
align-items: center;
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 + .o-upload-item-tip {
padding-left: 24px;
}
.o-upload-row-item .o-upload-thumbnail {
width: var(--upload-item-picture-size);
height: var(--upload-item-picture-size);
margin-right: 8px;
}
.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-icons .o-upload-thumbnail {
display: none;
}
.o-upload-row-icon {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
.o-upload-icon-hover-in {
opacity: 0;
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-upload-status-wrap {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.o-upload-status-wrap-error {
color: var(--o-color-danger1);
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
@media (hover: hover) {
.o-upload-status-wrap-error:hover .o-upload-status-upper-layer {
opacity: 0;
}
.o-upload-status-wrap-error:hover .o-upload-status-lower-layer {
opacity: 1;
}
}
.o-upload-status-upper-layer,
.o-upload-status-lower-layer {
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-upload-status-lower-layer {
opacity: 0;
flex-direction: row;
}
.o-upload-status-lower-layer > * + * {
margin-left: 20px;
}
.o-upload-status-wrap-success {
flex-direction: row;
opacity: 0;
background-color: var(--upload-card-mask);
transition: opacity var(--o-easing-standard-in) var(--o-duration-m1);
}
.o-upload-status-wrap-success > * + * {
margin-left: 20px;
}
@media (hover: hover) {
.o-upload-status-wrap-success:hover {
opacity: 1;
}
}
.o-upload-status-wrap-success .o-upload-icon-btn {
color: var(--o-color-info1-inverse);
}
.o-upload-status-icon {
font-size: var(--upload-icon-size-l);
}
.o-upload-icon-loading {
margin-left: 8px;
}
.o-upload-status-info {
margin-top: 12px;
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.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: 4px;
}
.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-tip1);
}
@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: 12px;
}
.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 {
--figure-fit: var(--upload-card-img-fit);
width: 100%;
height: 100%;
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;
border-radius: inherit;
}
.o-upload-card-icons > * + * {
margin-left: 20px;
}
.o-upload-card-icons .o-upload-icon-btn {
--btn-height: 24px;
--btn-icon-size: 24px;
cursor: pointer;
font-size: var(--upload-icon-size-l);
}
.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);
width: var(--upload-drag-width);
max-width: var(--upload-drag-max-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: 4px;
}
.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);
}
@media (max-width: 1200px) {
.o-upload-card-icons {
opacity: 1;
}
.o-upload-status-upper-layer {
opacity: 0;
}
.o-upload-status-lower-layer {
opacity: 1;
}
.o-upload-status-wrap-success {
opacity: 1;
}
.o-upload-row-item {
background-color: var(--upload-item-bg-hover);
}
.o-upload-row-item .o-upload-icon-hover-in {
opacity: 1;
}
}
@media (max-width: 1680px) {
.o-upload {
--upload-drag-padding: 16px 8px;
--upload-card-width: 96px;
--upload-drag-max-width: 400px;
}
.o-upload-card-add,
.o-upload-status-info {
font-size: var(--o-font_size-tip2);
line-height: var(--o-line_height-tip2);
}
}
@media (max-width: 840px) {
.o-upload {
--upload-drag-max-width: 240px;
}
.o-upload-drag-icon + .o-upload-drag-label {
margin-top: 12px;
}
}
.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-fill1);
--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);
font-size: var(--toggle-text-size);
line-height: var(--toggle-text-height);
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 (max-width: 1680px) {
.o-toggle {
--toggle-size: 28px;
--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: 840px) {
.o-toggle {
--toggle-padding: 0 11px;
}
}
.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;
left: 50%;
transform: translateX(-50%);
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);
color: var(--anchor-item-link-color);
}
}
.o-anchor-menu .o-anchor-item-sub-link:active {
background-color: var(--anchor-item-bg-color-press);
color: var(--anchor-item-link-color);
}
.o-anchor-link-popover-wrapper {
max-width: var(--anchor-popover-max-width);
}
.o-anchor-h {
background-color: var(--anchor-bg-color);
position: sticky;
z-index: var(--anchor-z-index);
top: var(--anchor-offset-top);
width: 100%;
justify-content: center;
}
.o-anchor-h .o-anchor-items {
display: flex;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
position: relative;
max-width: var(--anchor-content-max-width);
}
.o-anchor-h .o-anchor-items::-webkit-scrollbar {
display: none;
}
.o-anchor-h .o-anchor-items.left-overflown::before, .o-anchor-h .o-anchor-items.right-overflown::after {
background-image: linear-gradient(var(--gradient-angle), rgba(var(--anchor-x-overflown-bg-color), 0), rgba(var(--anchor-x-overflown-bg-color), 0.8) 66%, rgba(var(--anchor-x-overflown-bg-color)) 100%);
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: var(--anchor-x-overflown-width);
}
.o-anchor-h .o-anchor-items.left-overflown::before {
--gradient-angle: -90deg;
left: calc(var(--o-anchor-ellipsis-left) * 1px);
}
.o-anchor-h .o-anchor-items.right-overflown::after {
--gradient-angle: 90deg;
right: calc(var(--o-anchor-ellipsis-right) * 1px);
}
.o-anchor-h.o-anchor-stickying .o-anchor-items {
width: var(--anchor-content-max-width);
}
.o-anchor-h .o-anchor-item + .o-anchor-item {
margin-left: var(--anchor-item-gap);
}
.o-anchor-h .o-anchor-item-title {
white-space: nowrap;
}
.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;
}
.o-anchor-h {
--anchor-bg-color: var(--o-color-fill2);
--anchor-z-index: initial;
--anchor-offset-top: 0;
--anchor-x-overflown-bg-color: var(--o-grey-1);
--anchor-x-overflown-width: 16px;
--anchor-content-max-width: unset;
}
.o-anchor-h .o-anchor-item {
--anchor-item-link-color: var(--o-color-info3);
--anchor-item-gap: 32px;
--anchor-item-max-row: 1;
--anchor-item-link-padding-h: 0;
--anchor-item-link-padding-v: 12px;
--anchor-item-min-width: unset;
}
[data-o-theme*=dark] .o-anchor-h {
--anchor-x-overflown-bg-color: var(--o-grey-4);
}
@media (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;
}
.o-anchor-h:not(.o-anchor-menu) .o-anchor-item {
--anchor-item-gap: 24px;
--anchor-item-link-padding-v: 9px;
}
}
@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-anchor-h .o-anchor-item {
--anchor-item-gap: 16px;
}
}
.o-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
flex-shrink: 0;
width: var(--avatar-size);
height: var(--avatar-size);
font-size: calc(var(--avatar-size) * 0.4);
line-height: var(--avatar-size);
background: var(--avatar-bg);
color: var(--avatar-color);
}
.o-avatar img,
.o-avatar .o-avatar-default-icon {
width: 100%;
height: 100%;
}
[data-o-theme$=light] .o-avatar-default-icon circle {
filter: invert(1);
}
.o-avatar-circle {
border-radius: 50%;
}
.o-avatar-text {
color: var(--avatar-color);
}
.o-avatar-trigger-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--o-duration-s) var(--o-easing-standard);
cursor: pointer;
font-size: calc(var(--avatar-size) * 0.375);
background-color: var(--avatar-mask);
user-select: none;
}
@media (hover: hover) {
.o-avatar-clickable:hover .o-avatar-trigger-icon {
opacity: 1;
}
}
.o-avatar-group-horizontal {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
}
.o-avatar-group-horizontal .o-avatar {
margin-left: calc(var(--avatar-size) * -4 / 24);
border: var(--avatar-border);
}
.o-avatar-group-horizontal .o-avatar:last-child {
margin-left: 0;
}
.o-avatar-group-symmetric {
display: inline-grid;
gap: 3.5px;
grid-template-columns: 1fr 1fr;
}
.o-avatar-group-symmetric.o-avatar-group-single {
grid-template-columns: 1fr;
}
.o-avatar-group-symmetric.o-avatar-group-triangle .o-avatar:first-child {
grid-area: 1/1/2/3;
justify-self: center;
}
.o-avatar-group-more {
background-color: #cccccc;
}
.o-avatar-group-more .o-avatar-group-more-text {
font-size: calc(var(--avatar-size) * 0.3);
line-height: var(--avatar-size);
max-width: calc(var(--avatar-size) * 0.8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.o-avatar,
.o-avatar-group {
--avatar-color: var(--o-color-white);
--avatar-mask: var(--o-color-mask1);
--avatar-border: 2px solid var(--o-color-fill2);
}
.o-collapse {
background-color: var(--collapse-bg-color);
padding: var(--collapse-padding);
border-radius: var(--collapse-radius);
}
.o-collapse-item {
border-bottom: 1px solid var(--collapse-division-color);
}
.o-collapse-item:last-child {
border-bottom-color: transparent;
}
.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);
transition: max-height var(--o-duration-m2) var(--o-easing-standard), margin-bottom var(--o-duration-m2) var(--o-easing-standard);
}
.o-collapse-item-expanded .o-collapse-item-title {
font-weight: 600;
color: var(--collapse-item-title-color_expanded);
}
.o-collapse-item-expanded .o-collapse-item-icon {
transform: rotate(-90deg);
}
.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);
--collapse-item-header-padding: 25px 0px;
--collapse-item-title-color: var(--o-color-info1);
--collapse-item-title-color_expanded: var(--o-color-primary1);
--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: var(--o-gap-5);
}
@media (max-width: 1680px) {
.o-collapse {
--collapse-padding: 8px 24px;
}
.o-collapse-item {
--collapse-item-header-padding: 19px 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: var(--o-gap-4);
}
}
@media (max-width: 840px) {
.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: var(--o-gap-3);
}
}
.o-skeleton {
--skeleton-bg-color: var(--o-color-control4-light);
}
.o-skeleton-animation {
--skeleton-bg-color: linear-gradient(90deg, var(--o-color-control2-light) 25%, var(--o-color-control4-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: 1680px) {
.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;
}
}
/**
* OVirtualList 组件级 CSS 变量
*
* 以下变量为只读内部变量，由组件 JS 运行时通过内联 style 动态注入，
* 控制虚拟滚动的尺寸和偏移。此处声明的默认回退值仅在 JS 未执行
* （如 SSR 首屏）时生效，确保安全渲染。调用方不应自行覆盖这些变量。
*/
.o-virtual-list {
--_vl-content-height: auto;
--_vl-content-width: auto;
--_vl-offset-y: 0px;
--_vl-offset-x: 0px;
}
.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;
overflow-anchor: none;
}
.o-virtual-body {
overflow: hidden;
height: var(--_vl-content-height, auto);
width: var(--_vl-content-width, auto);
}
.o-virtual-render-list {
transform: translate3d(var(--_vl-offset-x, 0), var(--_vl-offset-y, 0), 0);
}
.o-virtual-render-item {
overflow: auto;
}
.o-horizontal .o-virtual-list-wrapper {
overflow-y: hidden;
overflow-x: auto;
}
.o-horizontal .o-virtual-render-list {
display: flex;
flex-direction: row;
}
.o-horizontal .o-virtual-render-item {
flex-shrink: 0;
}
.o-step {
--step-item-head-size: var(--o-font_size-h4);
--step-item-head-height: var(--o-line_height-h4);
--step-item-title-size: var(--o-font_size-text1);
--step-item-title-height: var(--o-line_height-text1);
--step-item-title-font-weight: normal;
--step-item-desc-size: var(--o-font_size-tip2);
--step-item-desc-height: var(--o-line_height-tip2);
--step-item-head-width: var(--o-icon_size_control-l);
--step-item-icon-size: var(--o-icon_size-m);
--step-item-gap: 8px;
--step-item-main-gap: 8px;
--step-item-desc-gap: 4px;
--step-item-line-gap: 8px;
--step-item-line-height: 1px;
--step-item-align: center;
--step-item-head-bg: var(--o-color-success1);
--step-item-head-color: var(--o-color-white);
--step-item-title-color: var(--o-color-info2);
--step-item-desc-color: var(--o-color-info3);
--step-item-line-bg: var(--o-color-control4);
--step-item-main-padding: 0 12px;
}
.o-step-v {
--step-item-align: left;
--step-item-main-gap: 0;
--step-item-main-padding: 0;
}
.o-step-item-processing {
--step-item-head-bg: var(--o-color-primary1);
--step-item-line-bg: var(--o-color-primary1);
--step-item-title-color: var(--o-color-primary1);
--step-item-title-font-weight: 600;
}
.o-step-item-waiting {
--step-item-head-bg: var(--o-color-primary4);
--step-item-line-bg: var(--o-color-control4);
--step-item-title-color: var(--o-color-info3);
--step-item-desc-color: var(--o-color-info3);
}
.o-step-item-failed {
--step-item-head-bg: var(--o-color-danger1);
--step-item-line-bg: var(--o-color-control4);
}
.o-step {
display: flex;
text-align: var(--step-item-align);
justify-content: space-between;
}
.o-step-item {
display: flex;
flex-direction: column;
align-items: center;
}
.o-step-item-head {
position: relative;
flex-shrink: 0;
font-size: var(--step-item-head-size);
line-height: var(--step-item-head-height);
color: var(--step-item-head-color);
}
.o-step-item-line {
height: unset;
width: unset;
position: absolute;
margin: 0;
right: var(--o-step-item-right);
left: var(--o-step-item-left);
top: var(--o-step-item-top);
bottom: var(--o-step-item-bottom);
background-color: var(--step-item-line-bg);
}
.o-step-item-symbol {
display: flex;
align-items: center;
justify-content: center;
width: var(--step-item-head-width);
height: var(--step-item-head-width);
background-color: var(--step-item-head-bg);
border-radius: 50%;
}
.o-step-item-symbol.o-step-item-symbol-custom {
background-color: unset;
}
.o-step-item-icon {
font-size: var(--step-item-icon-size);
}
.o-step-item-main {
margin-top: var(--step-item-main-gap);
padding: var(--step-item-main-padding);
}
.o-step-item-title {
font-size: var(--step-item-title-size);
line-height: var(--step-item-title-height);
color: var(--step-item-title-color);
word-break: break-word;
font-weight: var(--step-item-title-font-weight);
}
.o-step-item-desc {
margin-top: var(--step-item-desc-gap);
font-size: var(--step-item-desc-size);
line-height: var(--step-item-desc-height);
color: var(--step-item-desc-color);
word-break: break-word;
}
.o-step-v {
flex-direction: column;
}
.o-step-item-v {
flex-direction: row;
align-items: start;
gap: var(--step-item-gap);
}
.o-step-item-v + .o-step-item-v {
margin-top: var(--step-item-gap);
}
.o-step-item-v .o-step-item-title {
line-height: var(--step-item-head-width);
}
@media (max-width: 1680px) {
.o-step {
--step-item-head-width: var(--o-icon_size_control-m);
--step-item-icon-size: var(--o-icon_size-s);
--step-item-head-size: var(--o-font_size-text1);
--step-item-head-height: var(--o-line_height-text1);
--step-item-title-size: var(--o-font_size-tip1);
--step-item-title-height: var(--o-line_height-tip1);
}
}
@media (max-width: 840px) {
.o-step {
--step-item-head-size: var(--o-font_size-tip1);
--step-item-head-height: var(--o-line_height-tip1);
--step-item-title-size: var(--o-font_size-tip2);
--step-item-title-height: var(--o-line_height-tip2);
}
}
.o-toast {
display: flex;
align-items: var(--toast-align);
justify-content: space-between;
width: fit-content;
max-width: var(--toast-max-width);
padding: var(--toast-padding);
font-size: var(--toast-font-size);
line-height: var(--toast-line-height);
text-align: left;
word-break: break-word;
color: var(--toast-color);
background-color: var(--toast-bg-color);
border-radius: var(--toast-radius);
box-shadow: var(--toast-shadow);
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
}
.o-toast-list {
position: fixed;
z-index: var(--z-index);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.o-toast-list-top {
top: var(--toast-list-top-offset);
}
.o-toast-list-top .o-toast + .o-toast {
margin-top: var(--toast-gap);
}
.o-toast-list-center {
top: 50%;
transform: translate(-50%, -50%);
}
.o-toast-list-center .o-toast + .o-toast {
margin-top: var(--toast-gap);
}
.o-toast-list-bottom {
bottom: var(--toast-list-bottom-offset);
}
.o-toast-list-bottom .o-toast + .o-toast {
margin-top: var(--toast-gap);
}
.o-toast-fade-enter-from {
opacity: 0;
}
.o-toast-fade-enter-active,
.o-toast-fade-leave-active {
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
}
.o-toast-fade-leave-to {
opacity: 0;
}
.o-toast {
--toast-padding: 9px 16px;
--toast-bg-color: rgb(var(--o-grey-11));
--toast-color: var(--o-color-info1-inverse);
--toast-radius: 4px;
--toast-font-size: var(--o-font_size-tip1);
--toast-line-height: var(--o-line_height-tip1);
--toast-shadow: var(--o-shadow-3);
--toast-gap: 16px;
--toast-align: center;
--toast-max-width: 100%;
}
.o-toast-list {
--toast-list-offset: 80px;
--toast-list-top-offset: var(--toast-list-offset);
--toast-list-bottom-offset: var(--toast-list-offset);
--z-index: 1001;
}
@media (max-width: 840px) {
.o-toast {
--toast-max-width: 75%;
}
}
@media (max-width: 600px) {
.o-toast {
--toast-max-width: 100%;
}
}
.o-ip-input .o_box-main {
align-items: center;
}
.o-ip-segment {
flex: 1;
}
.o-ip-separator {
flex-shrink: 0;
width: var(--ip-separator-size);
height: var(--ip-separator-size);
margin: 0 var(--ip-separator-gap);
border-radius: 50%;
background-color: var(--ip-separator-bg-color);
user-select: none;
}
.o-ip-input {
--ip-separator-size: 4px;
--ip-separator-gap: 8px;
--ip-separator-bg-color: var(--o-color-info1);
}
.o-ip-input.o_box-small {
--_box-padding: 0 7px;
--_box-height: var(--o-control_size-s);
}
.o-ip-input.o_box-medium {
--_box-padding: 0 15px;
--_box-height: var(--o-control_size-m);
}
.o-ip-input.o_box-large {
--_box-padding: 0 15px;
--_box-height: var(--o-control_size-l);
}
.o-ip-input .o-ip-segment {
--_box-padding: 0;
--_box-bd: none;
--_input-text-align: center;
}
@media (max-width: 1680px) {
.o-ip-input.o_box-large {
--_box-height: 36px;
}
.o-ip-input.o_box-medium {
--_box-height: 28px;
}
}
@media (max-width: 840px) {
.o-ip-input.o_box-large {
--_box-height: var(--o-control_size-l);
}
}
.o-slider {
--_input-text-align: center;
--slider-height: 32px;
--slider-runway-wrap-padding: 0 4px;
--slider-runway-wrap-bg: var(--o-color-control4);
--slider-runway-height: 4px;
--slider-bar-height: 4px;
--slider-bar-bg: var(--o-color-control2);
--slider-btn-wrap-width: 60px;
--slider-btn-width: 16px;
--slider-btn-bg: var(--o-color-info1-inverse);
--slider-btn-border: 4px solid var(--o-color-control4);
--slider-btn-shadow: var(--o-shadow-1);
--slider-btn-cursor: pointer;
--slider-circle-width: 6px;
--slider-circle-bg: var(--o-color-main1);
--slider-stop-width: 2px;
--slider-stop-bg: var(--o-color-info4);
--slider-marks-font-size: var(--o-font_size-tip1);
--slider-marks-line-height: var(--o-line_height-tip1);
--slider-marks-gap: 8px;
--slider-input-width: 60px;
--slider-input-unit-gap: 8px;
--slider-popover-font-size: var(--o-font_size-text1);
--slider-popover-line-height: var(--o-line_height-text1);
--slider-unit-font-size: var(--o-font_size-tip2);
--slider-unit-line-height: var(--o-line_height-tip2);
--sldier-unit-color: var(--o-color-info3);
}
.o-slider-with-input {
--slider-runway-wrap-gap: 12px;
}
.o-slider-with-stops {
--slider-bar-bg-image: var(--o-color-main2);
--slider-btn-width: 20px;
--slider-runway-height: 8px;
--slider-bar-height: 10px;
}
.o-slider-disabled {
--slider-btn-cursor: not-allowed;
--slider-circle-bg: var(--o-color-control4);
}
.o-slider-stop-reached {
--slider-stop-bg: var(--o-color-info1-inverse);
}
.o-slider-btn-wrap-hover {
--slider-btn-width: 24px;
}
.o-slider-popover {
--popup-padding: 2px 6px;
}
.o-slider {
display: flex;
align-items: center;
width: 100%;
height: var(--slider-height);
}
.o-slider-runway-wrap {
width: 100%;
margin-right: var(--slider-runway-wrap-gap);
padding: var(--slider-runway-wrap-padding);
background-color: var(--slider-runway-wrap-bg);
border-radius: calc(var(--slider-runway-height) / 2);
}
.o-slider-runway {
position: relative;
height: var(--slider-runway-height);
cursor: var(--slider-btn-cursor);
}
.o-slider-bar {
position: absolute;
top: calc(var(--slider-runway-height) / 2 - var(--slider-bar-height) / 2);
height: var(--slider-bar-height);
background-color: var(--slider-bar-bg);
background-image: var(--slider-bar-bg-image);
border-top-left-radius: calc(var(--slider-bar-height) / 2);
border-bottom-left-radius: calc(var(--slider-bar-height) / 2);
}
.o-slider-btn-wrap {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
top: calc(var(--slider-runway-height) / 2 - var(--slider-btn-width) / 2);
width: var(--slider-btn-wrap-width);
transform: translateX(-50%);
transition: top var(--o-duration-m1) var(--o-easing-linear);
user-select: none;
outline: none;
}
.o-slider-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--slider-btn-width);
height: var(--slider-btn-width);
background-color: var(--slider-btn-bg);
border-radius: 50%;
box-shadow: var(--slider-btn-shadow);
cursor: var(--slider-btn-cursor);
transition: width var(--o-duration-m1) var(--o-easing-linear), height var(--o-duration-m1) var(--o-easing-linear), border-width var(--o-duration-m1) var(--o-easing-linear), box-shadow var(--o-duration-m1) var(--o-easing-linear);
}
.o-slider-btn-hover {
border: var(--slider-btn-border);
box-shadow: var(--slider-btn-shadow);
}
.o-slider-circle {
width: var(--slider-circle-width);
height: var(--slider-circle-width);
background-color: var(--slider-circle-bg);
border-radius: 50%;
}
.o-slider-popover {
font-size: var(--slider-popover-font-size);
line-height: var(--slider-popover-line-height);
}
.o-slider-stop {
position: absolute;
top: calc(var(--slider-runway-height) / 2 - var(--slider-stop-width) / 2);
height: var(--slider-stop-width);
width: var(--slider-stop-width);
background-color: var(--slider-stop-bg);
border-radius: 50%;
transform: translateX(-50%);
}
.o-slider-marks-text {
position: absolute;
margin-top: var(--slider-marks-gap);
font-size: var(--slider-marks-font-size);
line-height: var(--slider-marks-line-height);
transform: translateX(-50%);
}
.o-slider-input-wrap {
flex-shrink: 0;
display: flex;
align-items: center;
}
.o-slider-input {
width: var(--slider-input-width);
}
.o-slider-input-unit {
margin-left: var(--slider-input-unit-gap);
font-size: var(--slider-unit-font-size);
line-height: var(--slider-unit-line-height);
color: var(--sldier-unit-color);
}
@media (max-width: 1680px) {
.o-slider {
--slider-popover-font-size: var(--o-font_size-tip1);
--slider-popover-line-height: var(--o-line_height-tip1);
}
}
@media (max-width: 840px) {
.o-slider {
--slider-btn-width: 24px;
--slider-stop-width: 3px;
}
.o-slider-with-stops {
--slider-runway-height: 12px;
--slider-bar-height: 16px;
}
}
.o-search {
--search-prefix-width: 136px;
--search-suffix-width: 100px;
--search-input-width: 320px;
--search-icon-size: var(--o-icon_size-m);
}
.o-search-xlarge .o-input.o_box-large {
--_box-padding: 0 15px;
--_box-height: var(--o-control_size-xl);
}
.o-search-xlarge .o-select.o-select-large {
--select-padding: 0 15px;
--select-height: var(--o-control_size-xl);
}
.o-search-medium {
--search-icon-size: var(--o-icon_size-xs);
}
.o-search {
display: flex;
align-items: center;
}
.o-search-prefix {
width: var(--search-prefix-width);
}
.o-search-select {
position: relative;
z-index: 0;
}
.o-search-select.is-selecting {
z-index: 2;
}
.o-search-select:hover {
z-index: 2;
}
.o-search-prefix {
margin-right: -1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.o-search-suffix {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.o-search-input-wrap {
position: relative;
}
.o-search-input {
position: relative;
z-index: 1;
width: var(--search-input-width);
}
.o-search-select-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.o-search-option {
max-width: 100%;
word-break: break-word;
}
.o-search-label {
flex-shrink: 0;
}
.o-search-keyword-highlight {
color: var(--o-color-primary1);
font-weight: 600;
}
.o-search-icon {
width: var(--search-icon-size);
height: var(--search-icon-size);
}
.o-search-with-prefix .o-search-input .o_box-main {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.o-search-with-suffix .o-search-input .o_box-main {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.o-search-suffix {
width: var(--search-suffix-width);
}
@media (max-width: 1680px) {
.o-search-xlarge .o-input.o_box-large {
--_box-height: var(--o-control_size-l);
--_box-text-size: var(--o-font_size-text1);
--_box-text-height: var(--o-line_height-text1);
}
.o-search-xlarge .o-select.o-select-large {
--select-height: var(--o-control_size-l);
--select-text-size: var(--o-font_size-text1);
--select-text-height: var(--o-line_height-text1);
--select-icon-size: var(--o-icon_size_control-m);
}
.o-search-large {
--search-icon-size: var(--o-icon_size-s);
}
}
@media (max-width: 840px) {
.o-search-xlarge {
--search-icon-size: var(--o-icon_size-xs);
}
.o-search-xlarge .o-input.o_box-large {
--_box-height: var(--o-control_size-m);
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
}
.o-search-xlarge .o-select.o-select-large {
--select-height: var(--o-control_size-m);
--select-text-size: var(--o-font_size-tip1);
--select-text-height: var(--o-line_height-tip1);
--select-icon-size: var(--o-icon_size_control-xs);
}
.o-search-large {
--search-icon-size: var(--o-icon_size-m);
}
}
.o-time-range-picker {
--time-range-picker-bg-color-focus: var(--o-color-control2-light);
}
.o-time-panel {
--time-panel-bg: var(--o-color-fill2);
--time-panel-shadow: var(--o-shadow-2);
--time-panel-content-padding: 6px 0;
--time-panel-footer-padding: 8px 16px;
--time-panel-item-height: 24px;
--time-panel-item-width: 40px;
--time-panel-item-color: var(--o-color-info1);
--time-panel-item-color-active: var(--o-color-primary1);
--time-panel-item-color-disabled: var(--o-color-info4);
--time-panel-item-bg-hover: var(--o-color-control2-light);
--time-panel-item-bg-active: var(--o-color-control3-light);
--time-panel-item-today-border: 1px solid var(--o-color-primary1);
--time-panel-item-gap: 4px;
--time-panel-col-width: 96px;
--time-panel-col-show-item-count: 8;
--time-panel-col-height: calc(var(--time-panel-col-show-item-count) * (var(--time-panel-item-height) + var(--time-panel-item-gap)));
--time-panel-text-size: var(--o-font_size-tip1);
--time-panel-text-height: var(--o-line_height-tip1);
--time-panel-item-text-size: var(--o-font_size-tip1);
--time-panel-item-text-height: var(--o-line_height-tip1);
}
.o-time-panel-large {
--time-panel-item-text-size: var(--o-font_size-text1);
--time-panel-item-text-height: var(--o-line_height-text1);
}
.o-time-panel-touch {
--time-panel-content-padding: 0;
--time-panel-item-gap: 0px;
--time-panel-col-show-item-count: 5;
--time-panel-item-text-size: var(--o-font_size-text1);
--time-panel-item-text-height: var(--o-line_height-text1);
--time-panel-item-height: 48px;
--time-panel-item-width: unset;
--time-panel-item-bg-active: unset;
}
.o-time-picker .o_input-suffix-icon {
font-size: var(--icon-size);
color: var(--o-color-info2);
}
.o-time-picker .o-range-start-input-wrap .o_input-suffix {
margin-left: 0;
}
.o-time-picker .o_box-disabled .o_input-suffix-icon {
color: var(--color-disabled);
}
@media (hover: hover) {
.o-time-picker .o_box-focused .o_input-clearable .o_input-suffix-icon {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
.o-time-picker .o_box-focused .o_input-clearable .o_input-clear {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
@media (hover: hover) {
.o-time-picker.o_input-clearable .o_box-focused .o_input-suffix-icon {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
.o-time-picker.o_input-clearable .o_box-focused .o_input-clear {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
.o-time-panel {
user-select: none;
background-color: var(--time-panel-bg);
border-radius: var(--o-radius-m);
box-shadow: var(--time-panel-shadow);
}
.o-time-panel-divider {
--o-divider-gap: 0;
}
.o-time-panel-content {
padding: var(--time-panel-content-padding);
}
.o-time-panel-columns {
display: flex;
position: relative;
width: 100%;
}
.o-time-panel-column-scroller {
flex: 1 1 0;
}
.o-time-panel-column {
flex: 1 1 0;
height: var(--time-panel-col-height);
width: var(--time-panel-col-width);
display: flex;
justify-content: center;
scroll-snap-type: y proximity;
}
.o-time-panel-column-colon-divider {
display: flex;
align-items: center;
}
.o-time-panel-column-divider {
--o-divider-label-gap: 0;
height: var(--time-panel-col-height);
}
.o-time-panel-column-spacer {
height: calc((var(--time-panel-col-show-item-count) - 1) * (var(--time-panel-item-height) + var(--time-panel-item-gap)));
scroll-snap-align: none;
}
.o-time-panel-mask {
z-index: 1;
background-image: linear-gradient(180deg, var(--o-color-info2-inverse), var(--o-color-info4-inverse)), linear-gradient(0deg, var(--o-color-info2-inverse), var(--o-color-info4-inverse));
pointer-events: none;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateZ(0px);
background-position: center top, center bottom;
background-size: 100% calc(var(--time-panel-item-height) * 2);
}
.o-time-panel-indicator {
position: absolute;
z-index: -1;
top: calc(var(--time-panel-item-gap) / 2);
height: var(--time-panel-item-height);
width: var(--time-panel-item-width);
background-color: var(--time-panel-item-bg-active);
border-radius: var(--time-picker-columns-radius, var(--o-radius-l));
}
.o-time-panel-item {
font-size: var(--time-panel-item-text-size);
line-height: var(--time-panel-item-text-height);
color: var(--time-panel-item-color);
padding: calc(var(--time-panel-item-gap) / 2) 0;
user-select: none;
scroll-snap-align: start;
}
.o-time-panel-item .o-time-panel-item__inner {
height: var(--time-panel-item-height);
width: var(--time-panel-item-width);
border-radius: var(--time-picker-columns-radius, var(--o-radius-l));
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--o-duration-s) var(--o-easing-standard);
}
.o-time-panel-item.disabled .o-time-panel-item__inner {
color: var(--time-panel-item-color-disabled);
cursor: not-allowed;
}
@media (hover: hover) {
.o-time-panel-item:hover {
cursor: pointer;
}
.o-time-panel-item:hover:not(.active):not(.disabled) .o-time-panel-item__inner {
background-color: var(--time-panel-item-bg-hover);
}
}
.o-time-panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--time-panel-footer-padding);
}
.o-time-panel-confirm {
font-size: var(--time-panel-text-size);
line-height: var(--time-panel-text-height);
color: var(--time-panel-confirm-color);
cursor: pointer;
padding: 4px 8px;
border-radius: var(--o-radius-xs);
transition: color var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o-time-panel-confirm:hover {
color: var(--time-panel-confirm-color-hover);
background-color: var(--o-color-primary1-light);
}
}
.o-time-panel-touch .o-time-panel-column-scroller + .o-time-panel-column-scroller:before {
content: ":";
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.o-time-panel-touch .o-time-panel-indicator {
z-index: 1;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: var(--time-panel-item-height);
pointer-events: none;
border-top: 1px solid var(--o-color-control4);
border-bottom: 1px solid var(--o-color-control4);
border-radius: 0;
}
.o-time-panel-touch .o-time-panel-column {
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
}
.o-time-panel-touch .o-time-panel-column-spacer {
height: calc(var(--time-panel-item-height) * (var(--time-panel-col-show-item-count) - 1) / 2);
}
.o-time-panel-touch .o-time-panel-item {
scroll-snap-align: center;
}
.o-time-panel-touch .o-time-panel-item.active {
color: var(--time-panel-item-color-active);
}
.o-time-range-panel .o-time-range-panel-body {
display: flex;
align-items: stretch;
}
.o-time-range-panel .o-time-range-panel-side {
flex: 1;
min-width: 0;
}
.o-time-range-picker {
--_box-padding-y: 4px;
}
.o-time-range-picker .o_box-main {
padding-left: 4px;
}
.o-time-range-picker .o-input-wrap {
padding: 0 calc(var(--_box-padding-x) - 4px);
border-radius: var(--_box-radius, var(--o-radius-l));
}
.o-time-range-picker .o-input-wrap-focused {
background-color: var(--time-range-picker-bg-color-focus);
}
.o-time-range-picker .o-time-range-picker-divider {
flex-shrink: 0;
width: 16px;
margin: 0 4px;
display: flex;
justify-content: center;
align-items: center;
color: var(--o-color-info4);
pointer-events: none;
}
.o-time-range-picker .o_input-suffix {
color: var(--o-color-info1);
}
@media (max-width: 1680px) {
.o-time-panel-large:not(.o-time-panel-touch) {
--time-panel-item-text-size: var(--o-font_size-tip1);
--time-panel-item-text-height: var(--o-line_height-tip1);
}
}
.o-date-picker {
--date-range-picker-bg-color-focus: var(--o-color-control2-light);
}
.o-date-panel {
--date-panel-bg: var(--o-color-fill2);
--date-panel-shadow: var(--o-shadow-2);
--date-panel-operation-padding-x: 28px;
--date-panel-operation-height: 40px;
--date-panel-operation-text-size: var(--o-font_size-tip1);
--date-panel-operation-text-height: var(--o-line_height-tip1);
--date-panel-text-size: var(--o-font_size-tip1);
--date-panel-text-height: var(--o-line_height-text1);
--date-panel-shortcut-text-size: var(--o-font_size-tip1);
--date-panel-shortcut-text-height: var(--o-line_height-tip1);
--date-panel-body-padding-date: 16px 16px 8px 16px;
--date-panel-body-padding-month: 12px 28px;
--date-panel-body-padding-year: 12px 32px;
--date-panel-cell-gap-date-x: 0px;
--date-panel-cell-gap-date-y: 8px;
--date-panel-cell-gap-month-x: 32px;
--date-panel-cell-gap-month-y: 12px;
--date-panel-cell-gap-year-x: 40px;
--date-panel-cell-gap-year-y: 12px;
--date-panel-cell-width-date: 40px;
--date-panel-cell-width-month: 64px;
--date-panel-cell-width-year: 56px;
--date-panel-cell-color: var(--o-color-info1);
--date-panel-cell-color-active: var(--o-color-info1-inverse);
--date-panel-cell-color-disabled: var(--o-color-info4);
--date-panel-cell-bg-hover: var(--o-color-control2-light);
--date-panel-cell-bg-active: var(--o-color-primary1);
--date-panel-cell-bg-range: var(--o-color-control2-light);
--date-panel-cell-today-bd-color: var(--o-color-primary1);
}
.o-date-panel-large {
--date-panel-operation-padding-x: 24px;
--date-panel-operation-height: 48px;
--date-panel-operation-text-size: var(--o-font_size-text1);
--date-panel-operation-text-height: var(--o-line_height-text1);
--date-panel-text-size: var(--o-font_size-text1);
--date-panel-body-padding-date: 16px 16px 8px 16px;
--date-panel-body-padding-month: 16px 28px;
--date-panel-body-padding-year: 16px 32px;
--date-panel-cell-gap-date-x: 0px;
--date-panel-cell-gap-date-y: 12px;
--date-panel-cell-gap-month-x: 32px;
--date-panel-cell-gap-month-y: 16px;
--date-panel-cell-gap-year-x: 40px;
--date-panel-cell-gap-year-y: 16px;
--time-panel-col-show-item-count: 9;
}
.o-date-panel-touch {
--date-panel-width: 100%;
--time-panel-col-show-item-count: 5;
}
.o-date-picker .o_input-suffix-icon {
font-size: var(--icon-size);
color: var(--o-color-info2);
}
.o-date-picker .o_box-disabled .o_input-suffix-icon {
color: var(--color-disabled);
}
@media (hover: hover) {
.o-date-picker .o_box-focused .o_input-clearable .o_input-suffix-icon {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
.o-date-picker .o_box-focused .o_input-clearable .o_input-clear {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
@media (hover: hover) {
.o-date-picker.o_input-clearable .o_box-focused .o_input-suffix-icon {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
.o-date-picker.o_input-clearable .o_box-focused .o_input-clear {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
.o-date-panel {
user-select: none;
background-color: var(--date-panel-bg);
color: var(--date-panel-cell-color);
border-radius: var(--o-radius-m);
box-shadow: var(--date-panel-shadow);
font-size: var(--date-panel-text-size);
line-height: var(--date-panel-text-height);
}
.o-date-panel-divider {
--o-divider-gap: 0;
}
.o-date-panel-divider-v {
--o-divider-label-gap: 0px;
height: unset;
}
.o-date-panel-content {
padding: var(--date-panel-content-padding);
}
.o-date-panel-header,
.o-date-panel-footer {
--date-panel-text-size: var(--date-panel-operation-text-size);
--date-panel-text-height: var(--date-panel-operation-text-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding-left: var(--date-panel-operation-padding-x);
padding-right: var(--date-panel-operation-padding-x);
height: var(--date-panel-operation-height);
}
.o-date-panel-footer .o-link:not(:last-child) {
margin-right: 16px;
}
.o-date-panel-shortcut {
font-size: var(--date-panel-shortcut-text-size);
line-height: var(--date-panel-shortcut-text-height);
}
.o-date-panel-shortcut:only-child {
margin: 0 auto;
}
.o-date-panel-shortcut.hidden {
visibility: hidden;
}
.o-date-panel-calendar,
.o-date-panel-months,
.o-date-panel-years {
display: grid;
text-align: center;
font-size: var(--date-panel-text-size);
line-height: var(--date-panel-text-height);
align-items: center;
grid-template-columns: calc(var(--item-width) + var(--item-padding-x) / 2) repeat(calc(var(--item-count-per-row) - 2), calc(var(--item-width) + var(--item-padding-x))) calc(var(--item-width) + var(--item-padding-x) / 2);
}
.o-date-panel-calendar .o-date-panel-cell,
.o-date-panel-months .o-date-panel-cell,
.o-date-panel-years .o-date-panel-cell {
padding-left: calc(var(--item-padding-x) / 2);
padding-right: calc(var(--item-padding-x) / 2);
}
.o-date-panel-calendar {
--item-count-per-row: 7;
--item-width: var(--date-panel-cell-width-date);
--item-padding-x: var(--date-panel-cell-gap-date-x);
padding: var(--date-panel-body-padding-date);
row-gap: var(--date-panel-cell-gap-date-y);
}
.o-date-panel-calendar .o-date-panel-cell:nth-of-type(7n) {
padding-right: unset;
}
.o-date-panel-calendar .o-date-panel-cell:nth-of-type(7n + 1) {
padding-left: unset;
}
.o-date-panel-months {
--item-count-per-row: 3;
--item-width: var(--date-panel-cell-width-month);
--item-padding-x: var(--date-panel-cell-gap-month-x);
padding: var(--date-panel-body-padding-month);
row-gap: var(--date-panel-cell-gap-month-y);
}
.o-date-panel-months .o-date-panel-cell:nth-of-type(3n) {
padding-right: unset;
}
.o-date-panel-months .o-date-panel-cell:nth-of-type(3n + 1) {
padding-left: unset;
}
.o-date-panel-years {
--item-count-per-row: 3;
--item-width: var(--date-panel-cell-width-year);
--item-padding-x: var(--date-panel-cell-gap-year-x);
padding: var(--date-panel-body-padding-year);
row-gap: var(--date-panel-cell-gap-year-y);
}
.o-date-panel-years .o-date-panel-cell:nth-of-type(3n) {
padding-right: unset;
}
.o-date-panel-years .o-date-panel-cell:nth-of-type(3n + 1) {
padding-left: unset;
}
.o-date-panel .o-date-panel-header-direction {
display: flex;
align-items: center;
gap: 4px;
}
.o-date-panel .o-date-panel-header-label-btn,
.o-date-panel .o-data-panel-header-time-label {
--btn-min-width: none;
padding-left: 8px;
padding-right: 8px;
font-weight: 600;
}
.o-date-panel .o-date-panel-btn {
--btn-height: var(--date-panel-text-height);
--btn-color-hover: var(--date-panel-cell-color);
--btn-bg-color: transparent;
--btn-bd-color: var(--btn-bg-color);
--btn-bd-color-hover: var(--btn-bg-color-hover);
--btn-color: var(--date-panel-cell-color);
--btn-bg-color-disabled: transparent;
border: 1px solid var(--btn-bd-color);
font-size: var(--date-panel-text-size);
line-height: calc(var(--date-panel-text-height) - 2px);
}
@media (hover: hover) {
.o-date-panel .o-date-panel-btn:hover {
border: 1px solid var(--btn-bd-color-hover);
}
}
.o-date-panel .o-date-panel-btn.o-btn-disabled {
--btn-bd-color-hover: var(--btn-bg-color-disabled);
}
.o-date-panel .o-date-panel-btn:not(.o-date-panel-header-btn) {
--btn-min-width: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.o-date-panel .o-date-panel-header-btn.hidden {
visibility: hidden;
}
.o-date-panel .is-other-period .o-date-panel-btn {
--btn-color: var(--date-panel-cell-color-disabled);
}
.o-date-panel .is-current .o-date-panel-btn {
--btn-bd-color: var(--date-panel-cell-today-bd-color);
}
.o-date-panel .is-selected .o-date-panel-btn {
--btn-bg-color: var(--date-panel-cell-bg-active);
--btn-bg-color-hover: var(--date-panel-cell-bg-active);
--btn-color: var(--date-panel-cell-color-active);
--btn-color-hover: var(--date-panel-cell-color-active);
}
.o-date-panel .is-in-range {
background-color: var(--date-panel-cell-bg-range);
}
.o-date-panel .is-range-start .o-date-panel-btn,
.o-date-panel .is-range-end .o-date-panel-btn {
--btn-bg-color: var(--date-panel-cell-bg-active);
--btn-bg-color-hover: var(--date-panel-cell-bg-active);
--btn-color: var(--date-panel-cell-color-active);
--btn-color-hover: var(--date-panel-cell-color-active);
font-weight: 500;
}
.o-date-panel .is-range-start {
background: linear-gradient(to right, transparent 0% 50%, var(--date-panel-cell-bg-range) 50% 100%);
border-radius: calc(var(--date-panel-cell-size) / 2) 0 0 calc(var(--date-panel-cell-size) / 2);
}
.o-date-panel .is-range-end {
background: linear-gradient(to right, var(--date-panel-cell-bg-range) 0% 50%, transparent 50% 100%);
border-radius: 0 calc(var(--date-panel-cell-size) / 2) calc(var(--date-panel-cell-size) / 2) 0;
}
.o-date-panel .is-range-start.is-range-end {
border-radius: var(--o-radius-l);
background: none;
}
.o-date-panel-touch .o-date-panel-column-scroller + .o-date-panel-column-scroller:before {
display: none;
}
.o-date-panel-touch .o-tab-button {
--tab-nav-justify: center;
}
.o-date-range-picker .o-input-wrap {
flex: 1;
min-width: 0;
}
.o-date-range-picker .o-input-wrap-focused {
background-color: var(--date-range-picker-bg-color-focus);
}
.o-date-range-picker .o_input-suffix-icon {
font-size: var(--icon-size);
color: var(--o-color-info2);
}
.o-date-range-picker-divider {
flex-shrink: 0;
width: 16px;
margin: 0 4px;
display: flex;
justify-content: center;
align-items: center;
color: var(--o-color-info4);
pointer-events: none;
}
.o-date-range-panel {
width: calc(var(--date-panel-width) * 2 + 1px);
}
.o-date-range-panel-body {
display: flex;
align-items: stretch;
}
.o-date-range-panel-side {
flex: 1;
min-width: 0;
}
.o-date-range-panel-separator {
width: 1px;
background-color: var(--o-color-control2);
flex-shrink: 0;
margin: var(--date-panel-content-padding) 0;
}
.o-date-panel-body {
display: block;
}
.o-date-panel-body-datetime {
display: flex;
align-items: stretch;
}
.o-date-panel-date-side {
flex: 1 0 auto;
min-width: 0;
}
.o-date-panel-time-aside {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.o-date-panel-time-aside .o-date-panel-header {
justify-content: center;
}
@media (min-width: 841px) and (max-width: 1680px) {
.o-date-panel-large:not(.o-date-panel-touch) {
--date-panel-operation-padding-x: 28px;
--date-panel-operation-height: 40px;
--date-panel-operation-text-size: var(--o-font_size-tip1);
--date-panel-operation-text-height: var(--o-line_height-tip1);
--date-panel-text-size: var(--o-font_size-tip1);
--date-panel-body-padding-date: 12px 16px 8px 16px;
--date-panel-body-padding-month: 12px 28px;
--date-panel-body-padding-year: 12px 32px;
--date-panel-cell-gap-date-x: 0px;
--date-panel-cell-gap-date-y: 8px;
--date-panel-cell-gap-month-x: 32px;
--date-panel-cell-gap-month-y: 12px;
--date-panel-cell-gap-year-x: 40px;
--date-panel-cell-gap-year-y: 12px;
}
}
.o-cascader-v2 {
--cascader-v2-text-size: var(--o-font_size-text1);
--cascader-v2-text-height: var(--o-line_height-text1);
--cascader-v2-placeholder: var(--o-color-info4);
--cascader-v2-icon-color: var(--o-color-info3);
--cascader-v2-icon-color-disabled: var(--o-color-info4);
--cascader-v2-icon-color-loading: var(--o-color-primary1);
--cascader-v2-icon-gap: 8px;
}
.o-cascader-v2,
.o-cascader-v2-tag-popover {
--cascader-v2-tag-bg-color: var(--o-color-control2-light);
--cascader-v2-tag-radius: 4px;
--cascader-v2-tag-text-size: var(--o-font_size-tip2);
--cascader-v2-tag-text-height: var(--o-line_height-tip2);
--cascader-v2-tag-padding: 3px 12px;
--cascader-v2-tag-margin: 2px 4px 2px 0;
}
.o-cascader-v2-tag-popover {
--popover-min-width: auto;
--cascader-v2-tag-popover-max-width: 360px;
}
.o-cascader-v2-large {
--_box-padding: 0 0 0 15px;
--_box-height: var(--o-control_size-l);
--cascader-v2-icon-size: var(--o-icon_size_control-m);
--cascader-v2-text-size: var(--o-font_size-text1);
--cascader-v2-text-height: var(--o-line_height-text1);
--cascader-v2-height: var(--o-control_size-l);
--cascader-v2-multiple-max-height: 64px;
--cascader-v2-multiple-padding: 3px 0 3px 7px;
--cascader-v2-suffix-padding-right: 15px;
}
.o-cascader-v2-medium {
--_box-padding: 0 0 0 15px;
--_box-height: var(--o-control_size-m);
--cascader-v2-icon-size: var(--o-icon_size_control-xs);
--cascader-v2-text-size: var(--o-font_size-tip1);
--cascader-v2-text-height: var(--o-line_height-tip1);
--cascader-v2-height: var(--o-control_size-m);
--cascader-v2-multiple-max-height: 64px;
--cascader-v2-multiple-padding: 2px 0 2px 7px;
--cascader-v2-suffix-padding-right: 15px;
--cascader-v2-tag-padding: 2px 8px;
}
.o-cascader-v2-panel-popup {
--popup-shadow: var(--o-shadow-2);
--popup-bg-color: var(--o-color-control5-light);
--popup-radius: var(--o-radius_control-m);
--popup-bd: none;
}
.o-cascader-v2-panel {
--cascader-v2-panel-container-max-height: 388px;
--cascader-v2-panel-container-max-width: 320px;
--cascader-v2-options-gap: 5px;
--cascader-v2-options-max-width: 272px;
--cascader-v2-panel-loading-min-width: 148px;
--cascader-v2-panel-loading-min-height: 212px;
--cascader-v2-options-scroller-bd-color: var(--o-color-control1-light);
--cascader-v2-options-padding: 4px;
--cascader-v2-option-color: var(--o-color-info2);
--cascader-v2-option-color-hover: var(--o-color-info2);
--cascader-v2-option-color-selected: var(--o-color-primary1);
--cascader-v2-option-color-disabled: var(--o-color-info4);
--cascader-v2-option-bg-color: transparent;
--cascader-v2-option-bg-color-hover: var(--o-color-control2-light);
--cascader-v2-option-bg-color-selected: var(--o-color-control3-light);
--cascader-v2-option-bg-color-disabled: transparent;
--cascader-v2-option-text-size: var(--o-font_size-text1);
--cascader-v2-option-text-height: var(--o-line_height-text1);
--cascader-v2-option-padding: 7px 12px;
--cascader-v2-option-icon-size: var(--o-icon_size-m);
--cascader-v2-option-radius: var(--o-radius_control-s);
--cascader-v2-option-gap: 2px;
--cascader-v2-option-icon-gap: 8px;
--cascader-v2-panel-empty-padding: 16px;
--cascader-v2-panel-empty-text-size: var(--o-font_size-tip1);
--cascader-v2-panel-empty-line-height: var(--o-line_height-tip1);
--cascader-v2-panel-empty-color: var(--o-color-info3);
--cascader-v2-panel-empty-min-width: auto;
}
.o-cascader-v2-panel-medium {
--cascader-v2-panel-container-max-height: 293px;
--cascader-v2-option-text-size: var(--o-font_size-tip1);
--cascader-v2-option-text-height: var(--o-line_height-tip1);
--cascader-v2-option-padding: 3px 12px;
--cascader-v2-option-icon-size: var(--o-icon_size-xs);
}
.o-cascader-v2-option-popover {
--cascader-v2-option-popover-max-width: 368px;
--cascader-v2-option-popover-color-selected: var(--o-color-primary1);
}
.o-cascader-v2 {
display: inline-flex;
cursor: pointer;
}
.o-cascader-v2 .o_box-main {
align-items: center;
background-clip: padding-box;
}
.o-cascader-v2.is-multiple {
height: auto;
}
.o-cascader-v2.is-multiple .o_box-main {
padding: var(--cascader-v2-multiple-padding);
min-height: var(--cascader-v2-height);
height: auto;
}
.o-cascader-v2-input {
display: inline-flex;
width: 100%;
height: 100%;
padding: 0;
outline: none;
border: none;
color: inherit;
font-size: var(--cascader-v2-text-size);
line-height: var(--cascader-v2-text-height);
overflow: hidden;
text-overflow: ellipsis;
background-color: transparent;
cursor: inherit;
}
.o-cascader-v2-input:focus {
overflow: visible;
}
.o-cascader-v2-input::-webkit-input-placeholder {
color: var(--cascader-v2-placeholder);
}
.o-cascader-v2-input:disabled {
pointer-events: none;
}
.o-cascader-v2-suffix {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
padding-right: var(--cascader-v2-suffix-padding-right);
z-index: 1;
}
.o-cascader-v2-suffix-icon {
position: relative;
transition: all var(--o-duration-m1) var(--o-easing-standard-out);
align-items: center;
display: flex;
justify-content: center;
}
.o-cascader-v2-arrow {
font-size: var(--cascader-v2-icon-size);
color: var(--cascader-v2-icon-color);
display: inline-flex;
align-items: center;
transform: rotate(0);
transition: transform var(--o-duration-s) var(--o-easing-standard);
}
.o-cascader-v2-arrow.active {
transform: rotate(-180deg);
}
.o_box-disabled .o-cascader-v2-arrow {
color: var(--cascader-v2-icon-color-disabled);
}
.o-cascader-v2-clear {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
font-size: var(--cascader-v2-icon-size);
display: flex;
align-items: center;
justify-content: center;
color: var(--cascader-v2-icon-color);
background-color: var(--cascader-v2-clear-bg-color);
border-radius: 50%;
z-index: 1;
transition: opacity var(--o-duration-m1) var(--o-easing-standard-in);
}
.o-cascader-v2-clear {
overflow: hidden;
}
.o-cascader-v2-clear svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-cascader-v2-clear:hover svg {
transform: rotate(180deg);
}
}
.o-cascader-v2-loading {
position: absolute;
font-size: var(--cascader-v2-icon-size);
color: var(--cascader-v2-icon-color-loading);
}
.o-cascader-v2-is-loading .o-cascader-v2-arrow {
visibility: hidden;
opacity: 0;
}
@media (hover: hover) {
.o-cascader-v2-clearable:hover .o-cascader-v2-arrow {
visibility: hidden;
opacity: 0;
}
.o-cascader-v2-clearable:hover .o-cascader-v2-clear {
opacity: 1;
}
}
.o-cascader-v2-value-list {
display: flex;
flex-wrap: wrap;
align-items: center;
max-height: var(--cascader-v2-multiple-max-height);
padding-right: calc(var(--cascader-v2-icon-size) + var(--cascader-v2-icon-gap) + var(--cascader-v2-suffix-padding-right));
}
.o-cascader-v2-tags-scroller {
flex: 1;
min-width: 0;
}
.o-cascader-v2-tags-wrap {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.o-cascader-v2-tags-wrap .o-cascader-v2-input {
height: auto;
flex-shrink: 0;
}
.o-cascader-v2-input-mirror {
position: absolute;
visibility: hidden;
white-space: pre;
font-size: var(--cascader-v2-text-size);
font-family: inherit;
letter-spacing: inherit;
pointer-events: none;
user-select: none;
}
.o-cascader-v2-tag {
padding: var(--cascader-v2-tag-padding);
margin: var(--cascader-v2-tag-margin);
min-height: var(--cascader-v2-tag-min-height);
background-color: var(--cascader-v2-tag-bg-color);
border-radius: var(--cascader-v2-tag-radius);
font-size: var(--cascader-v2-tag-text-size);
line-height: var(--cascader-v2-tag-text-height);
display: flex;
align-items: center;
min-width: 0;
}
.o-cascader-v2-tag:last-child {
margin-right: 0;
}
.o-cascader-v2-tag-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
cursor: text;
}
.o-cascader-v2-tag-remove {
flex-shrink: 0;
margin-left: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--o-icon_size_control-xs);
cursor: pointer;
}
.o-cascader-v2-tag-remove {
overflow: hidden;
}
.o-cascader-v2-tag-remove svg {
transition: all var(--o-duration-m1) var(--o-easing-standard-in);
}
@media (hover: hover) {
.o-cascader-v2-tag-remove:hover svg {
transform: rotate(180deg);
}
}
.o-cascader-v2-tag-remove-disabled {
pointer-events: none;
}
@media (hover: hover) {
.o-cascader-v2-tag-remove-disabled:hover svg {
transform: none;
}
}
.o-cascader-v2-tag-popover {
max-width: var(--cascader-v2-tag-popover-max-width);
--popup-padding: 6px 8px;
}
.o-cascader-v2-tags {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.o-cascader-v2-tags .o-cascader-v2-tag {
max-width: 100%;
}
/* cascader-v2-panel */
.o-cascader-v2-panel {
position: relative;
display: inline-flex;
}
.o-cascader-v2-panel-container {
padding: var(--cascader-v2-options-gap) 0;
max-height: var(--cascader-v2-panel-container-max-height);
max-width: var(--cascader-v2-panel-container-max-width);
}
.o-cascader-v2-panel-loading {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--cascader-v2-panel-loading-min-width);
min-height: var(--cascader-v2-panel-loading-min-height);
font-size: var(--cascader-v2-option-icon-size);
color: var(--o-color-primary1);
}
.o-cascader-v2-panel-divider {
margin: 0;
align-self: stretch;
height: auto;
}
.o-cascader-v2-options {
max-width: var(--cascader-v2-options-max-width);
padding: 0 var(--cascader-v2-options-padding);
list-style: none;
}
.o-cascader-v2-options-filterable {
max-width: none;
}
.o-cascader-v2-option {
display: flex;
align-items: center;
padding: var(--cascader-v2-option-padding);
color: var(--cascader-v2-option-color);
background-color: var(--cascader-v2-option-bg-color);
border-radius: var(--cascader-v2-option-radius);
transition: background-color var(--o-duration-s) var(--o-easing-standard);
cursor: pointer;
}
@media (hover: hover) {
.o-cascader-v2-option:hover {
color: var(--cascader-v2-option-color-hover);
background-color: var(--cascader-v2-option-bg-color-hover);
}
}
.o-cascader-v2-option-selected {
font-weight: 600;
color: var(--cascader-v2-option-color-selected);
background-color: var(--cascader-v2-option-bg-color-selected);
}
@media (hover: hover) {
.o-cascader-v2-option-selected:hover {
color: var(--cascader-v2-option-color-selected);
background-color: var(--cascader-v2-option-bg-color-selected);
}
}
.o-cascader-v2-option-disabled {
font-weight: normal;
color: var(--cascader-v2-option-color-disabled);
background-color: var(--cascader-v2-option-bg-color-disabled);
cursor: not-allowed;
}
@media (hover: hover) {
.o-cascader-v2-option-disabled:hover {
color: var(--cascader-v2-option-color-disabled);
background-color: var(--cascader-v2-option-bg-color-disabled);
}
}
.o-cascader-v2-option + .o-cascader-v2-option {
margin-top: var(--cascader-v2-option-gap);
}
.o-cascader-v2-panel-empty {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--cascader-v2-panel-empty-min-width);
padding: var(--cascader-v2-panel-empty-padding);
font-size: var(--cascader-v2-panel-empty-text-size);
line-height: var(--cascader-v2-panel-empty-line-height);
color: var(--cascader-v2-panel-empty-color);
}
.o-cascader-v2-option-checkbox {
max-width: 100%;
flex: 1;
}
.o-cascader-v2-option-checkbox .o-checkbox-input-wrap {
flex-shrink: 0;
}
.o-cascader-v2-option-checkbox .o-checkbox-label {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.o-cascader-v2-option-popover {
max-width: var(--cascader-v2-option-popover-max-width);
}
.o-cascader-v2-option-label {
font-size: var(--cascader-v2-option-text-size);
line-height: var(--cascader-v2-option-text-height);
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.o-cascader-v2-option-arrow {
display: flex;
align-items: center;
margin-left: var(--cascader-v2-option-icon-gap);
font-size: var(--cascader-v2-option-icon-size);
}
.o-cascader-v2-option-highlight {
color: var(--cascader-v2-option-color-selected);
font-weight: 600;
}
.o-cascader-v2-option-popover-highlight {
color: var(--cascader-v2-option-popover-color-selected);
font-weight: 600;
}
@media (min-width: 841px) and (max-width: 1680px) {
.o-cascader-v2-large {
--_box-height: 36px;
--cascader-v2-icon-size: var(--o-icon_size_control-s);
--cascader-v2-text-size: var(--o-font_size-tip1);
--cascader-v2-text-height: var(--o-line_height-tip1);
--cascader-v2-height: 36px;
}
.o-cascader-v2-panel-large {
--cascader-v2-option-padding: 6px 12px;
--cascader-v2-option-text-size: var(--o-font_size-tip1);
--cascader-v2-option-text-height: var(--o-line_height-tip1);
--cascader-v2-option-icon-size: var(--o-icon_size-s);
}
.o-cascader-v2-medium {
--_box-height: 28px;
--cascader-v2-icon-size: var(--o-icon_size_control-xs);
--cascader-v2-text-size: var(--o-font_size-tip1);
--cascader-v2-text-height: var(--o-line_height-tip1);
--cascader-v2-height: 28px;
}
.o-cascader-v2-panel-medium {
--cascader-v2-option-padding: 2px 12px;
--cascader-v2-option-text-size: var(--o-font_size-tip1);
--cascader-v2-option-text-height: var(--o-line_height-tip1);
--cascader-v2-option-icon-size: var(--o-icon_size-xs);
}
}
.o-btn-brand.o-btn-disabled {
border: none;
}
.c-card-openeuler.o-card {
--card-radius: 4px;
--card-cover-radius: 4px;
--card-icon-size: 48px;
}
.c-card-openeuler .o-card-cover-v.o-card-cover-v,
.c-card-openeuler .o-card-cover-h.o-card-cover-h,
.c-card-openeuler .o-card-cover-hr.o-card-cover-hr {
--card-cover-padding: 0px;
}
.c-card-openeuler.o-card-hoverable.o-card-cursor-pointer .o-card-title {
transition: color var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.c-card-openeuler.o-card-hoverable.o-card-cursor-pointer:hover .o-card-title {
color: var(--o-color-main1);
}
}
@media (min-width: 841px) and (max-width: 1200px) {
.c-card-openeuler.o-card:not(.o-card-no-responsive) {
--card-icon-size: var(--o-icon_size_control-xl);
}
}
.c-card-openeuler.o-card .o-card-cover-v .o-card-cover-img {
border-top-left-radius: var(--card-cover-radius);
border-top-right-radius: var(--card-cover-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.c-card-openeuler.o-card .o-card-cover-v .o-card-cover-img img {
border-top-left-radius: var(--card-cover-radius);
border-top-right-radius: var(--card-cover-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.c-card-openeuler.o-card .o-card-cover-h .o-card-cover-img {
border-top-left-radius: var(--card-cover-radius);
border-top-right-radius: 0;
border-bottom-left-radius: var(--card-cover-radius);
border-bottom-right-radius: 0;
}
.c-card-openeuler.o-card .o-card-cover-h .o-card-cover-img img {
border-top-left-radius: var(--card-cover-radius);
border-top-right-radius: 0;
border-bottom-left-radius: var(--card-cover-radius);
border-bottom-right-radius: 0;
}
.c-card-openeuler.o-card .o-card-cover-hr .o-card-cover-img {
border-top-left-radius: 0;
border-top-right-radius: var(--card-cover-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--card-cover-radius);
}
.c-card-openeuler.o-card .o-card-cover-hr .o-card-cover-img img {
border-top-left-radius: 0;
border-top-right-radius: var(--card-cover-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--card-cover-radius);
}
@media (max-width: 840px) {
.c-card-openeuler.o-card:not(.o-card-no-responsive) {
--card-radius: 8px;
--card-cover-radius: 8px;
--card-icon-size: var(--o-icon_size_control-l);
}
}