UNPKG

@alicloud/console-components

Version:

Alibaba Cloud React Components

1,796 lines (1,678 loc) 1.45 MB
@charset "UTF-8"; .next-overlay-wrapper .next-overlay-inner::-webkit-scrollbar { width: var(--scrollbar-width, 4px); height: var(--scrollbar-height, 4px); } .next-overlay-wrapper .next-overlay-inner::-webkit-scrollbar-track { opacity: 0.5; background: var(--scrollbar-track-bg, #eaedf0); border-radius: var(--scrollbar-track-border-radius, 3px); } .next-overlay-wrapper .next-overlay-inner::-webkit-scrollbar-thumb { opacity: 0.5; background: var(--scrollbar-thumb-bg, #abb6c0); border-radius: var(--scrollbar-thumb-border-radius, 3px); } body { line-height: 1.66667; } code, kbd, pre, samp { font-family: Consolas, Menlo, Courier, monospace; } a:link, a:visited, a:hover, a:active { text-decoration: none; } .next-range-scale-item.next-range-scale-item.next-range-scale-item.next-range-scale-item { top: var(--range-scale-item-position-top, 0px); width: var(--range-scale-item-width, 1px); } .next-range .next-range-slider-inner:hover { transform: scale(1.38); } .next-range .next-range-slider-moving .next-range-slider-inner.next-range-slider-inner.next-range-slider-inner { transform: scale(1.38); } .next-timeline-item.next-timeline-item-done .next-timeline-item-dot { border-radius: 50%; background: var(--timeline-item-done-background, #C0C6CC); border: var(--timeline-item-done-border); } .next-balloon.next-balloon.next-balloon::after { box-shadow: none; } .next-balloon.next-balloon-bottom-right::after, .next-balloon.next-balloon-bottom-left::after, .next-balloon.next-balloon-bottom::after { border-bottom-right-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon.next-balloon-top-right::after, .next-balloon.next-balloon-top-left::after, .next-balloon.next-balloon-top::after { border-top-left-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon.next-balloon-right-top::after, .next-balloon.next-balloon-right-bottom::after, .next-balloon.next-balloon-right::after { border-top-right-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon.next-balloon-left-top::after, .next-balloon.next-balloon-left-bottom::after, .next-balloon.next-balloon-left::after { border-bottom-left-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon-tooltip.next-balloon-tooltip.next-balloon-tooltip::after { box-shadow: none; } .next-balloon-tooltip.next-balloon-tooltip-bottom-right::after, .next-balloon-tooltip.next-balloon-tooltip-bottom-left::after, .next-balloon-tooltip.next-balloon-tooltip-bottom::after { border-bottom-right-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon-tooltip.next-balloon-tooltip-top-right::after, .next-balloon-tooltip.next-balloon-tooltip-top-left::after, .next-balloon-tooltip.next-balloon-tooltip-top::after { border-top-left-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon-tooltip.next-balloon-tooltip-right-top::after, .next-balloon-tooltip.next-balloon-tooltip-right-bottom::after, .next-balloon-tooltip.next-balloon-tooltip-right::after { border-top-right-radius: var(--balloon-arrow-border-radius, 2px); } .next-balloon-tooltip.next-balloon-tooltip-left-top::after, .next-balloon-tooltip.next-balloon-tooltip-left-bottom::after, .next-balloon-tooltip.next-balloon-tooltip-left::after { border-bottom-left-radius: var(--balloon-arrow-border-radius, 2px); } .next-btn { font-weight: var(--btn-font-weight, 400); transition: all 0.1s; } .next-btn[disabled]:hover { box-shadow: none; } .next-btn-primary:hover, .next-btn-primary:focus-visible { box-shadow: var(--btn-primary-hover-shadow); } .next-btn-primary:active { box-shadow: var(--btn-primary-active-shadow); } .next-btn.next-btn-text { font-weight: 400; } .next-btn.next-btn-text:hover, .next-btn.next-btn-text:focus-visible, .next-btn.next-btn-text:active { box-shadow: none; } .next-btn-normal:hover, .next-btn-normal:focus-visible { box-shadow: var(--btn-normal-hover-shadow); } .next-btn-normal:active { box-shadow: var(--btn-normal-active-shadow); } .next-btn.next-small.isTwoToThreeCNCharBtn:not(.next-btn-loading):not(.next-btn-text) { width: var(--btn-small-cn2-3-width, 62px); padding: 0; } .next-btn.next-small.isFourCNCharBtn:not(.next-btn-loading):not(.next-btn-text) { width: var(--btn-small-cn4-width, 72px); padding: 0; } .next-btn.next-small:not(.is-wind).isOnlyIcon { width: 24px; padding: 0; } .next-btn.next-medium.isTwoToThreeCNCharBtn:not(.next-btn-loading):not(.next-btn-text) { width: var(--btn-medium-cn2-3-width, 62px); padding: 0; } .next-btn.next-medium.isFourCNCharBtn:not(.next-btn-loading):not(.next-btn-text) { width: var(--btn-medium-cn4-width, 80px); padding: 0; } .next-btn.next-medium:not(.is-wind).isOnlyIcon { width: 32px; padding: 0; } .next-btn.next-large.isTwoToThreeCNCharBtn:not(.next-btn-loading):not(.next-btn-text) { width: var(--btn-large-cn2-3-width, 64px); padding: 0; } .next-btn.next-large.isFourCNCharBtn:not(.next-btn-loading):not(.next-btn-text) { width: var(--btn-large-cn4-width, 88px); padding: 0; } .next-btn.next-large:not(.is-wind).isOnlyIcon { width: 36px; padding: 0; } .next-btn-group .next-btn.next-btn.next-btn.next-btn { min-width: unset; } .next-btn-group .next-btn.next-btn-primary { border-style: solid; border-color: rgba(255, 255, 255, 0.2); } .next-btn .teamix-icon { vertical-align: middle; } .next-btn .teamix-icon-first { margin-left: 0; margin-right: 4px; } .next-btn .teamix-icon-last { margin-left: 4px; margin-right: 0; } .next-btn.next-btn-normal.next-btn-text.next-btn-warning:hover { color: var(--color-error-5); } .next-btn.next-btn-normal.next-btn-text.next-btn-warning:active { color: var(--color-error-6); } .next-btn.next-btn-primary.next-btn-text.next-btn-warning { color: var(--color-error-5); } .next-btn.next-btn-primary.next-btn-text.next-btn-warning:hover { color: var(--color-error-4); } .next-btn.next-btn-primary.next-btn-text.next-btn-warning:active { color: var(--color-error-6); } .next-pagination { font-size: inherit; } .next-pagination .next-pagination-item.next-current.next-current.next-current { z-index: 2; } .next-pagination .next-pagination-item:not(.next-current):hover, .next-pagination .next-pagination-item:not(.next-current):focus-visible { background-color: var(--pagination-item-hover-bg, #fff); } .next-pagination .next-pagination-item.next-pagination-item.next-pagination-item.next-btn { min-width: 32px; } .next-pagination .next-pagination-item.next-pagination-item.next-pagination-item.next-btn.next-small { min-width: 24px; } .next-pagination .next-pagination-item.next-pagination-item.next-pagination-item.next-btn.next-prev, .next-pagination .next-pagination-item.next-pagination-item.next-pagination-item.next-btn.next-next { border-color: var(--pagination-item-border-color, transparent); } .next-pagination .next-pagination-item.next-pagination-item.next-pagination-item.next-btn.next-prev[disabled]:hover, .next-pagination .next-pagination-item.next-pagination-item.next-pagination-item.next-btn.next-next[disabled]:hover { background-color: var(--pagination-item-disabled-bg, #fff); } .next-pagination-size-selector-popup .next-select-menu-item.next-select-menu-item.next-select-menu-item.next-select-menu-item.next-select-menu-item { padding-right: 0; } .next-transfer.next-transfer .next-transfer-panel-list { padding: var(--transfer-panel-padding-mb, 0) var(--transfer-panel-padding-lr, 8px); margin: var(--transfer-panel-margin-mb, 8px) 0; } .next-transfer.next-transfer .next-transfer-panel-list::-webkit-scrollbar { width: var(--scrollbar-width, 4px); height: var(--scrollbar-height, 4px); } .next-transfer.next-transfer .next-transfer-panel-list::-webkit-scrollbar-track { opacity: 0.5; background: var(--scrollbar-track-bg, #eaedf0); border-radius: var(--scrollbar-track-border-radius, 3px); } .next-transfer.next-transfer .next-transfer-panel-list::-webkit-scrollbar-thumb { opacity: 0.5; background: var(--scrollbar-thumb-bg, #abb6c0); border-radius: var(--scrollbar-thumb-border-radius, 3px); } .next-transfer-operations .next-transfer-operation.next-transfer-operation.next-transfer-operation { padding: 0; width: var(--transfer-operation-width, 24px); height: var(--transfer-operation-height, 24px); } .next-transfer-operations .next-transfer-operation.next-transfer-operation.next-transfer-operation.next-btn { min-width: unset; } .next-transfer-operations .next-transfer-operation.next-transfer-operation.next-transfer-operation[disabled], .next-transfer-operations .next-transfer-operation.next-transfer-operation.next-transfer-operation[disabled]:hover { color: var(--btn-pure-primary-color-disabled, #ffffff); background-color: var(--btn-pure-primary-bg-disabled, #d1d5d9); border-color: var(--btn-pure-primary-border-color-disabled, transparent); } .next-transfer-operations .next-transfer-move::before { width: var(--transfer-operation-simple-move-size, 16px); height: var(--transfer-operation-simple-move-size, 16px); font-size: var(--transfer-operation-simple-move-size, 16px); } .next-tabs-pure .next-tabs-tab.next-tabs-tab.next-tabs-tab.next-tabs-tab:hover { background-color: var(--tab-pure-hover-bg); } .next-date-picker .next-date-picker-trigger { transition: box-shadow var(--active-transition); } .next-date-picker .next-date-picker-trigger:hover, .next-date-picker .next-date-picker-trigger[aria-expanded=true] { box-shadow: var(--active-shadow); } .next-date-picker .next-date-picker-trigger .next-date-picker-trigger-input { box-shadow: none; } .next-range-picker .next-range-picker-trigger { transition: box-shadow var(--active-transition); } .next-range-picker .next-range-picker-trigger:hover, .next-range-picker .next-range-picker-trigger[aria-expanded=true] { box-shadow: var(--active-shadow); } .next-range-picker .next-range-picker-trigger .next-range-picker-trigger-input { box-shadow: none; } .next-month-picker .next-month-picker-trigger { transition: box-shadow var(--active-transition); } .next-month-picker .next-month-picker-trigger:hover, .next-month-picker .next-month-picker-trigger[aria-expanded=true] { box-shadow: var(--active-shadow); } .next-month-picker .next-month-picker-trigger .next-month-picker-trigger-input { box-shadow: none; } .next-year-picker .next-year-picker-trigger { transition: box-shadow var(--active-transition); } .next-year-picker .next-year-picker-trigger:hover, .next-year-picker .next-year-picker-trigger[aria-expanded=true] { box-shadow: var(--active-shadow); } .next-year-picker .next-year-picker-trigger .next-year-picker-trigger-input { box-shadow: none; } .next-week-picker .next-week-picker-trigger { transition: box-shadow var(--active-transition); } .next-week-picker .next-week-picker-trigger:hover, .next-week-picker .next-week-picker-trigger[aria-expanded=true] { box-shadow: var(--active-shadow); } .next-week-picker .next-week-picker-trigger .next-week-picker-trigger-input { box-shadow: none; } .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn { line-height: 30px; } .next-date-picker-panel-footer, .next-range-picker-panel-footer, .next-month-picker-panel-footer, .next-year-picker-panel-footer, .next-week-picker-panel-footer { --popup-local-border-width: 1px; } .next-date-picker-panel-header, .next-range-picker-panel-header, .next-month-picker-panel-header, .next-year-picker-panel-header, .next-week-picker-panel-header { padding: 8px; } .next-search { transition: box-shadow var(--active-transition); } .next-search.next-search.next-search:hover, .next-search.next-search.next-search.focusing, .next-search.next-search.next-search.visible { box-shadow: var(--active-shadow); } .next-search.next-search.next-search.disabled { box-shadow: none; } .next-search.next-search.next-search .next-input:hover { box-shadow: none; } .next-search.next-search.next-search .next-input-group:hover { box-shadow: none; } .next-search.next-search.next-search .next-btn:hover { box-shadow: none; } .next-search-simple:not(.is-wind) .next-input { display: flex; } .next-search-simple:not(.is-wind) .next-input input { padding-left: 0; } .next-search-simple:not(.is-wind) .next-input .next-input-inner { width: auto; order: -1; display: flex; justify-content: center; align-items: center; } .next-search-simple:not(.is-wind) .next-input .next-input-inner .next-search-icon { margin-right: 0; padding: 0 12px; } .next-search-simple:not(.is-wind) .next-input .next-input-control { width: auto; order: 10; display: flex; justify-content: center; align-items: center; } .next-search-simple:not(.is-wind) .next-input .next-input-control .next-input-hint-wrap { padding-right: 0; width: auto; } .next-search.next-normal.disabled .next-input-group, .next-search.next-search-normal.disabled .next-input-group { border-color: var(--search-simple-normal-color, #dedede); } .next-search.next-normal .next-after .next-btn-normal, .next-search.next-search-normal .next-after .next-btn-normal { padding: 0 8px; } .next-search.next-normal .next-after .next-btn-normal .next-icon-search, .next-search.next-search-normal .next-after .next-btn-normal .next-icon-search { margin-right: 0; } .next-search.next-normal.custom-search-text .next-after .next-btn-normal { padding: 0 16px; } .next-search .next-input.next-disabled * { cursor: not-allowed; } .next-input.next-disabled { cursor: not-allowed; } .next-input.next-disabled > input, .next-input.next-disabled > textarea { cursor: not-allowed; } .next-input:hover, .next-input.next-focus { box-shadow: var(--active-shadow); } .next-input.next-disabled { box-shadow: none; } .next-input-group { transition: box-shadow var(--active-transition); } .next-input-group:hover { box-shadow: var(--active-shadow); } .next-input-group.next-disabled { box-shadow: none; } .next-input-group .next-input { box-shadow: none; } .next-input-group > .next-number-picker:first-child .next-input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .next-input-group > .next-number-picker:first-child .next-input.next-focus { position: relative; z-index: 1; } .next-input-group > .next-number-picker:last-child .next-input { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .next-input-group > .next-number-picker:last-child .next-input.next-focus { position: relative; z-index: 1; } .next-input.next-noborder:hover, .next-input.next-noborder.next-focus { box-shadow: none; } .next-select.next-active .next-select-inner { box-shadow: var(--active-shadow); border-color: var(--input-focus-border-color, #0064c8); } .next-select-menu.next-select-single-menu .next-icon-select, .next-select-menu.next-select-single-menu .next-icon-selected, .next-select-menu.next-select-multiple-menu .next-icon-select, .next-select-menu.next-select-multiple-menu .next-icon-selected, .next-select-menu.next-select-tag-menu .next-icon-select, .next-select-menu.next-select-tag-menu .next-icon-selected { margin-left: var(--select-menu-select-icon-ml, -20px); } .next-select-menu.next-select-single-menu .next-select-menu-item.next-selected, .next-select-menu.next-select-multiple-menu .next-select-menu-item.next-selected, .next-select-menu.next-select-tag-menu .next-select-menu-item.next-selected { font-weight: var(--select-selected-font-weight, 400); } .next-menu.next-menu { padding: var(--menu-padding); } .next-menu.next-menu.next-menu.next-menu.next-menu .next-menu-symbol-icon-selected { width: var(--menu-icon-selected-size, 16px); font-size: var(--menu-icon-selected-size, 16px); height: 100%; overflow: hidden; } .next-menu.next-menu.next-menu.next-menu.next-menu .next-menu-symbol-icon-selected::before { width: var(--menu-icon-selected-size, 16px); font-size: var(--menu-icon-selected-size, 16px); } .next-menu-item { border-radius: var(--corner-1); } .next-menu-selectable-multiple .next-menu-item:not([role=menuitemcheckbox]):not([role=menuitemradio]):not(.next-nav-item), .next-menu-selectable-single .next-menu-item:not([role=menuitemcheckbox]):not([role=menuitemradio]):not(.next-nav-item) { padding: 0 var(--menu-padding-horizontal) 0 var(--menu-padding-horizontal-selectable, var(--menu-padding-horizontal)); } .next-menu-item-inner .next-checkbox, .next-menu-item-inner .next-radio { margin-right: var(--menu-checkbox-mr, 8px); } .next-menu .next-menu-icon-selected.next-icon { margin-left: var(--select-menu-select-icon-ml, -20px); } .next-split-btn.next-split-btn > .next-btn { box-shadow: none; } .next-number-picker > .next-input .next-number-picker-handler:focus-within { opacity: 1; } .next-number-picker > .next-input .next-number-picker-handler .next-btn.next-btn.next-btn.next-btn { min-width: unset; border: var(--number-picker-handler-btn-border, none); } .next-number-picker > .next-input .next-number-picker-handler .next-btn.next-btn.next-btn.next-btn:not(.disabled):hover { border: var(--number-picker-handler-btn-border-hover, none); } .next-number-picker > .next-input .next-number-picker-handler .next-btn.next-btn.next-btn.next-btn.next-btn:first-child { border-right: none; border-top: none; } .next-number-picker > .next-input .next-number-picker-handler .next-btn.next-btn.next-btn.next-btn.next-btn:last-child { border-right: none; border-bottom: none; } .next-number-picker-inline .next-input-group { border: var(--number-picker-inline-group-border, 1px solid #c0c6cc); border-radius: var(--number-picker-border-radius, 2px); padding: var(--number-picker-inline-group-padding, 4px); } .next-number-picker-inline .next-input-group .next-input-group-addon .next-btn { border: var(--number-picker-inline-group-btn-border, none); border-radius: var(--number-picker-border-radius, 2px) !important; min-width: unset; } .next-number-picker-inline .next-input-group .next-input-group-addon .next-btn:not(.disabled):hover { border: var(--number-picker-inline-group-btn-border-hover, none); } .next-number-picker-inline .next-input-group .next-input { border: var(--number-picker-inline-group-btn-border, none); } .next-number-picker-inline .next-input-group .next-input:hover { border: var(--number-picker-inline-group-btn-border-hover, none); } .next-number-picker.next-disabled { background-color: var(--input-disabled-bg-color, #f7f9fa); } .next-number-picker.next-disabled > .next-input { border: var(--number-picker-normal-border, 1px solid #dedede); } .next-number-picker.next-disabled .next-input-group { box-shadow: none; } .next-number-picker.next-disabled .next-input-group:hover { border: var(--number-picker-inline-group-border, 1px solid #c0c6cc); } .next-number-picker.next-disabled .next-input-group .next-input-group-addon .next-btn { background-color: var(--input-disabled-bg-color, #f7f9fa); } .next-number-picker.next-disabled .next-input-group .next-input-group-addon .next-btn:hover { border: var(--number-picker-inline-group-btn-border, none); } .next-number-picker.next-disabled .next-input-group .next-input:hover { border: var(--number-picker-inline-group-btn-border, none); } .next-number-picker-inline.next-medium .next-input-group .next-input-group-addon .next-btn { height: var(--number-picker-final-height-medium, calc(var(--number-picker-height-medium) - 10px)); width: var(--number-picker-final-height-medium, calc(var(--number-picker-height-medium) - 10px)); min-width: unset; } .next-number-picker-inline.next-medium .next-input-group .next-input { display: inline-block; height: var(--number-picker-final-height-medium, calc(var(--number-picker-height-medium) - 10px)); line-height: var(--number-picker-final-height-medium, calc(var(--number-picker-height-medium) - 10px)); } .next-number-picker-inline.next-medium .next-input-group .next-input input { display: inline-block; height: 100%; } .next-number-picker-inline.next-small .next-input-group .next-input-group-addon .next-btn { height: var(--number-picker-final-height-small, calc(var(--number-picker-height-small) - 10px)); width: var(--number-picker-final-height-small, calc(var(--number-picker-height-small) - 10px)); min-width: unset; } .next-number-picker-inline.next-small .next-input-group .next-input { display: inline-block; height: var(--number-picker-final-height-small, calc(var(--number-picker-height-small) - 10px)); line-height: var(--number-picker-final-height-small, calc(var(--number-picker-height-small) - 10px)); } .next-number-picker-inline.next-small .next-input-group .next-input input { display: inline-block; height: 100%; } .next-number-picker-inline.next-large .next-input-group .next-input-group-addon .next-btn { height: var(--number-picker-final-height-large, calc(var(--number-picker-height-large) - 10px)); width: var(--number-picker-final-height-large, calc(var(--number-picker-height-large) - 10px)); min-width: unset; } .next-number-picker-inline.next-large .next-input-group .next-input { display: inline-block; height: var(--number-picker-final-height-large, calc(var(--number-picker-height-large) - 10px)); line-height: var(--number-picker-final-height-large, calc(var(--number-picker-height-large) - 10px)); } .next-number-picker-inline.next-large .next-input-group .next-input input { display: inline-block; height: 100%; } .next-number-picker-normal.next-small.next-small.next-small .next-icon:before, .next-number-picker-normal.next-small.next-small.next-small .next-icon .next-icon-remote { line-height: inherit; } .next-number-picker.next-medium > .next-input .next-number-picker-handler .next-btn.next-btn.next-btn.next-btn { height: calc((var(--form-element-medium-height, 32px) - var(--input-border-width, 1px) * 2) / 2); } .next-card { transition: box-shadow var(--active-transition); } .next-card:hover { box-shadow: var(--card-hover-shadow, 1px 1px 4px 0px rgba(0, 0, 0, 0.13)); background-color: var(--card-hover-background, var(--card-background)); border-color: var(--card-hover-border-color, var(--card-border-color)); } .next-card .next-card-header-extra .next-icon-ellipsis-vertical::before { vertical-align: text-bottom; } .next-card .next-card-collapsable-tail { height: 18px; line-height: 18px; font-size: 12px; padding: 0 var(--card-padding-lr, 16px) var(--card-body-padding-bottom, 16px); margin-bottom: var(--card-body-padding-bottom, 16px); } .next-card .next-card-collapsable-tail:hover { color: var(--color-brand1-6, #0064c8); cursor: pointer; } .next-card .next-card-collapsable-tail .next-icon { margin-left: 4px; } .next-card .next-card-collapsable-tail .next-icon::before { width: 18px; height: 18px; line-height: 18px; } .next-card .next-card-collapsable-head { padding: 0 var(--card-padding-lr, 16px); margin: var(--card-body-padding-bottom, 16px) 0; line-height: 22px; font-size: 14px; font-weight: 500; } .next-card .next-card-collapsable-head:hover { color: var(--color-brand1-6, #0064c8); cursor: pointer; } .next-cascader:not(.multiple) .next-cascader-menu .next-menu-item { --menu-padding-horizontal: var(--menu-padding-horizontal-selectable); padding: 0 var(--menu-padding-horizontal) 0 var(--menu-padding-horizontal); } .next-cascader .next-cascader-menu-wrapper::-webkit-scrollbar { width: var(--scrollbar-width, 4px); height: var(--scrollbar-height, 4px); } .next-cascader .next-cascader-menu-wrapper::-webkit-scrollbar-track { opacity: 0.5; background: var(--scrollbar-track-bg, #eaedf0); border-radius: var(--scrollbar-track-border-radius, 3px); } .next-cascader .next-cascader-menu-wrapper::-webkit-scrollbar-thumb { opacity: 0.5; background: var(--scrollbar-thumb-bg, #abb6c0); border-radius: var(--scrollbar-thumb-border-radius, 3px); } .next-cascader-select-dropdown { background-color: var(--dropdown-bg-color, #fff); } .next-cascader-select-dropdown .next-cascader-menu-wrapper { border-left: none; overflow-y: scroll; } .next-cascader-select-dropdown .next-cascader-menu-wrapper::-webkit-scrollbar { width: var(--scrollbar-width, 4px); height: var(--scrollbar-height, 4px); } .next-cascader-select-dropdown .next-cascader-menu-wrapper::-webkit-scrollbar-track { opacity: 0.5; background: var(--scrollbar-track-bg, #eaedf0); border-radius: var(--scrollbar-track-border-radius, 3px); } .next-cascader-select-dropdown .next-cascader-menu-wrapper::-webkit-scrollbar-thumb { opacity: 0.5; background: var(--scrollbar-thumb-bg, #abb6c0); border-radius: var(--scrollbar-thumb-border-radius, 3px); } .next-cascader-select-dropdown .next-menu { border: none; } .next-table-fix-left, .next-table-fix-right { background-clip: padding-box; } .next-message-title { font-weight: var(--message-title-weight, 500); } .next-message .next-message-close .next-icon-close { display: flex; align-items: center; justify-content: center; } .next-message .next-message-close .next-icon-close:before { width: var(--message-close-icon-size, 12px); height: var(--message-close-icon-size, 12px); font-size: var(--message-close-icon-size, 12px); line-height: var(--message-close-icon-size, 12px); } .next-dialog-footer .next-btn { margin-left: var(--s-2, 8px); } .next-dialog-footer .next-btn:first-child { margin-left: 0; } .next-dialog.next-dialog-quick.quick-show .next-dialog-body { padding: var(--dialog-content-padding-top, 0px) var(--dialog-content-padding-left-right, 24px) var(--dialog-content-padding-bottom, 16px) var(--dialog-content-padding-left-right, 24px); } .next-checkbox-inner.next-checkbox-inner.next-checkbox-inner.next-checkbox-inner.next-checkbox-inner > .next-icon { transform: scale(var(--checkbox-icon-scale, 0.8)); margin-top: 0; } .next-nav.next-nav.next-nav.next-nav.next-menu { padding: 0; } .next-badge .next-badge-count, .next-badge .next-badge-dot { box-shadow: 0 0 0 2px var(--badge-border-color, #fff); } .next-upload-dragable .next-upload-drag { transition: all 100ms linear; } .next-upload-dragable .next-upload-drag-over { background: var(--color-brand1-1); } .next-upload-card { border-radius: var(--corner-1); } .next-upload-list-card .next-upload-list-item-wrapper { border-style: dashed; border-radius: var(--corner-1); } .next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay { border-radius: 0px var(--corner-1) var(--corner-1) var(--corner-1); } .next-calendar-card .next-calendar-cell.next-selected .next-calendar-date, .next-calendar-card .next-calendar-cell.next-selected .next-calendar-month, .next-calendar-card .next-calendar-cell.next-selected .next-calendar-year, .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date, .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month, .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year, .next-calendar-range .next-calendar-cell.next-selected .next-calendar-date, .next-calendar-range .next-calendar-cell.next-selected .next-calendar-month, .next-calendar-range .next-calendar-cell.next-selected .next-calendar-year { animation: none; } .next-drawer-footer { position: absolute; bottom: 0; width: 100%; padding: var(--drawer-footer-padding-top, 10px) var(--drawer-footer-padding-right, 16px) var(--drawer-footer-padding-bottom, 10px) var(--drawer-footer-padding-left, 16px); left: 0; background: var(--drawer-title-bg-color, var(--drawer-bg)); border-radius: 0 0 4px 4px; z-index: 3; } .next-drawer-footer-line { border-top: var(--drawer-footer-border-width, 1px) var(--line-solid, solid) var(--drawer-footer-border-color, var(--color-line1-1)); } .next-drawer-footer-has-shadow { box-shadow: var(--shadow-1-up); border-top: var(--drawer-footer-border-width, 1px) var(--line-solid, solid) var(--drawer-footer-border-color, var(--color-line1-1)); } .next-drawer-footer-right { text-align: right; } .next-drawer-footer-left { text-align: right; } .next-drawer-footer-center { text-align: center; } .next-drawer { overflow: hidden; } .next-drawer .next-drawer-body { height: calc(100% - var(--drawer-has-footer-margin-bottom, 40px)); } .next-drawer-has-footer .next-drawer-body { margin-bottom: var(--drawer-has-footer-margin-bottom, 40px); padding-bottom: calc(var(--drawer-content-padding-bottom, 20px) + var(--drawer-has-footer-margin-bottom, 40px) + var(--drawer-footer-padding-bottom, 10px)); } .next-range-picker2-panel { --color-text1-3: #666; --color-text1-4: #333; } /*! * @alife/theme-xconsole-v4@0.13.8 (https://fusion.design) * @alifd/next@1.26.37 (https://fusion.design) * Copyright 2018-present Alibaba Group, * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) */ .next-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; top: 0; margin: -1px; } /* stylelint-disable */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #FF0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } ul, ol { list-style: none; margin: 0; padding: 0; } li { margin-left: 0; } hr { border: 0 solid #C0C6CC; border: 0 var(--line-solid, solid) var(--color-line1-2, #C0C6CC); border-top-width: 1px; border-top-width: var(--line-1, 1px); } a { text-decoration: none; } a:link { color: #0064C8; color: var(--color-link-1, #0064C8); } a:visited { color: #0064C8; color: var(--color-link-2, #0064C8); } a:hover { color: #0064C8; color: var(--color-link-3, #0064C8); } a:active { text-decoration: underline; color: #0064C8; color: var(--color-link-3, #0064C8); } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.ttf") format("truetype"); font-weight: 200; font-display: swap; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.ttf") format("truetype"); font-weight: 300; font-display: swap; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Roboto"; src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.eot"); src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } html { font-size: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-size: var(--font-size-body-1, 12px); line-height: 1.28571; color: #e5e5e5; color: var(--color-text1-4, #e5e5e5); } button, input, optgroup, select, textarea { font-family: inherit; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { margin-bottom: 10px; margin-bottom: calc(var(--font-size-headline, 20px) * 0.5); font-size: 20px; font-size: var(--font-size-headline, 20px); font-weight: 500; font-weight: var(--font-weight-medium, 500); line-height: 36px; } h2 { margin-bottom: 8px; margin-bottom: calc(var(--font-size-title, 16px) * 0.5); font-size: 16px; font-size: var(--font-size-title, 16px); font-weight: 500; font-weight: var(--font-weight-medium, 500); line-height: 30px; } h3 { margin-bottom: 7px; margin-bottom: calc(var(--font-size-subhead, 14px) * 0.5); font-size: 14px; font-size: var(--font-size-subhead, 14px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 24px; } h4 { margin-bottom: 7px; margin-bottom: calc(var(--font-size-subhead, 14px) * 0.5); font-size: 14px; font-size: var(--font-size-subhead, 14px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 24px; } h5 { margin-bottom: 6px; margin-bottom: calc(var(--font-size-body-1, 12px) * 0.5); font-size: 14px; font-size: var(--font-size-body-2, 14px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 24px; } h6 { margin-bottom: 7px; margin-bottom: calc(var(--font-size-body-2, 14px) * 0.5); font-size: 12px; font-size: var(--font-size-body-1, 12px); font-weight: 500; font-weight: var(--font-weight-medium, 500); line-height: 20px; } p { margin-bottom: 6px; margin-bottom: calc(var(--font-size-body-1, 12px) * 0.5); font-size: 12px; font-size: var(--font-size-body-1, 12px); font-weight: normal; font-weight: var(--font-weight-2, normal); line-height: 20px; } strong { font-weight: 500; } small { font-size: 75%; } /* stylelint-disable-next-line */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInDownSmall { 0% { opacity: 0; -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownSmall { 0% { opacity: 0; -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(24px); -ms-transform: translateY(24px); transform: translateY(24px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(24px); -ms-transform: translateY(24px); transform: translateY(24px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } } @-webkit-keyframes fadeOutUpSmall { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes fadeOutUpSmall { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -we