UNPKG

antd-mobile

Version:
2,536 lines (2,141 loc) 101 kB
:root { --adm-radius-s: 8px; --adm-radius-m: 16px; --adm-radius-l: 24px; --adm-font-size-1: 18px; --adm-font-size-2: 20px; --adm-font-size-3: 22px; --adm-font-size-4: 24px; --adm-font-size-5: 26px; --adm-font-size-6: 28px; --adm-font-size-7: 30px; --adm-font-size-8: 32px; --adm-font-size-9: 34px; --adm-font-size-10: 36px; --adm-color-primary: #1677ff; --adm-color-success: #00b578; --adm-color-warning: #ff8f1f; --adm-color-danger: #ff3141; --adm-color-text: #333333; --adm-color-text-secondary: #666666; --adm-color-weak: #999999; --adm-color-light: #cccccc; --adm-color-border: #eeeeee; --adm-color-background: #ffffff; --adm-color-white: #ffffff; --adm-color-box: #f5f5f5; --adm-color-text-light-solid: var(--adm-color-white); --adm-color-text-dark-solid: #000000; --adm-color-fill-content: var(--adm-color-box); --adm-font-size-main: var(--adm-font-size-5); --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial, roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; --adm-border-color: var(--adm-color-border); } html[data-prefers-color-scheme=dark] { --adm-color-primary: #3086ff; --adm-color-success: #34b368; --adm-color-warning: #ffa930; --adm-color-danger: #ff4a58; --adm-color-text: #e6e6e6; --adm-color-text-secondary: #b3b3b3; --adm-color-weak: #808080; --adm-color-light: #4d4d4d; --adm-color-border: #2b2b2b; --adm-color-box: #0a0a0a; --adm-color-background: #1a1a1a; --adm-border-color: var(--adm-color-border); } :root { -webkit-tap-highlight-color: rgba(0,0,0,0); } body { color: var(--adm-color-text); font-size: var(--adm-font-size-main); font-family: var(--adm-font-family); } a, button { cursor: pointer; } a { color: var(--adm-color-primary); transition: opacity ease-in-out .2s; } a:active { opacity: .8; } .adm-plain-anchor { color: unset; transition: none; } .adm-plain-anchor:active { opacity: unset; } body.adm-overflow-hidden { overflow: hidden!important; } div.adm-px-tester { --size: 1; height: calc(var(--size) / 2 * 4px); width: 0; position: fixed; right: -100vw; bottom: -100vh; -webkit-user-select: none; user-select: none; pointer-events: none; } .adm-action-sheet-popup>.adm-popup-body { border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; } .adm-action-sheet-extra { display: flex; justify-content: center; color: var(--adm-color-weak); font-size: var(--adm-font-size-7); padding: 36px 24px; border-bottom: 2px solid var(--adm-color-border); } .adm-action-sheet-button-list, .adm-action-sheet-button-item-wrapper { border-bottom: 2px solid var(--adm-color-border); } .adm-action-sheet-button-item-wrapper:last-child { border-bottom: none; } .adm-action-sheet-button-item { text-align: center; display: block; background-color: var(--adm-color-background); padding: 32px; } .adm-action-sheet-button-item:active { background-color: #eee; } .adm-action-sheet-button-item-disabled { cursor: not-allowed; pointer-events: none; opacity: .4; } .adm-action-sheet-button-item-name { color: var(--adm-color-text); font-size: var(--adm-font-size-10); } .adm-action-sheet-button-item-description { font-size: var(--adm-font-size-6); color: var(--adm-color-weak); padding-top: 8px; } .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name { color: var(--adm-color-danger); } .adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name { font-weight: 700; } .adm-action-sheet-cancel { background-color: var(--adm-color-fill-content); padding-top: 16px; } .adm-popup { --z-index: var(--adm-popup-z-index, 1000); position: fixed; z-index: var(--z-index); } .adm-popup-body { position: fixed; background-color: var(--adm-color-background); z-index: calc(var(--z-index) + 10); } .adm-popup-body .adm-popup-close-icon { position: absolute; z-index: 100; } .adm-popup-body-position-bottom { width: 100%; bottom: 0; left: 0; } .adm-popup-body-position-bottom .adm-popup-close-icon { right: 16px; top: 16px; } .adm-popup-body-position-top { width: 100%; top: 0; left: 0; } .adm-popup-body-position-top .adm-popup-close-icon { right: 16px; bottom: 16px; } .adm-popup-body-position-left { height: 100%; top: 0; left: 0; } .adm-popup-body-position-left .adm-popup-close-icon { right: 16px; top: 16px; } .adm-popup-body-position-right { height: 100%; top: 0; right: 0; } .adm-popup-body-position-right .adm-popup-close-icon { left: 16px; top: 16px; } .adm-popup-close-icon { cursor: pointer; padding: 8px; font-size: 36px; line-height: 1; color: var(--adm-color-weak); } .adm-mask { --z-index: var(--adm-mask-z-index, 1000); position: fixed; top: 0; left: 0; z-index: var(--z-index); display: block; width: 100%; height: 100%; } .adm-mask-aria-button { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } .adm-mask-content { z-index: 1; } .adm-safe-area { --multiple: var(--adm-safe-area-multiple, 1); display: block; width: 100%; } .adm-safe-area-position-top { padding-top: calc(env(safe-area-inset-top) * var(--multiple)); } .adm-safe-area-position-bottom { padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple)); } .adm-auto-center { display: flex; justify-content: center; } .adm-auto-center-content { flex: 0 1 auto; } .adm-avatar { --size: var(--adm-avatar-size, 88px); --border-radius: var(--adm-avatar-border-radius, 8px); border-radius: var(--border-radius); } .adm-avatar.adm-image { --width: var(--size); --height: var(--size); } .adm-avatar-fallback { height: 100%; width: 100%; display: block; } .adm-image { --width: var(--adm-image-width, auto); --height: var(--adm-image-height, auto); width: var(--width); height: var(--height); display: block; overflow: hidden; } .adm-image-img { width: 100%; height: 100%; } .adm-image-tip { position: relative; background-color: var(--adm-color-fill-content); height: 100%; min-height: 48px; min-width: 48px; } .adm-image-tip>svg { width: 48px; height: 48px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--adm-color-weak); } .adm-badge-wrapper { display: inline-block; position: relative; } .adm-badge { display: inline-flex; vertical-align: middle; box-sizing: content-box; border-radius: 200px; background-color: var(--color); --right: 0; --top: 0; --color: var(--adm-badge-color, #ff411c); } .adm-badge-content { color: var(--adm-color-text-light-solid); box-sizing: border-box; min-width: 16px; padding: 2px 8px; font-size: var(--adm-font-size-1); line-height: 24px; white-space: nowrap; font-weight: 400; text-align: center; } .adm-badge-fixed { position: absolute; right: var(--right); top: var(--top); transform: translate(50%,-50%); } .adm-badge-dot { min-width: 20px; width: 20px; height: 20px; border-radius: 10px; } .adm-badge-bordered { border: solid 2px var(--adm-color-text-light-solid); } .adm-button { --color: var(--adm-color-text-light-solid); --text-color: var(--adm-button-text-color, var(--adm-color-text)); --background-color: var(--adm-button-background-color, var(--adm-color-background)); --border-radius: var(--adm-button-border-radius, 8px); --border-width: var(--adm-button-border-width, 2px); --border-style: var(--adm-button-border-style, solid); --border-color: var(--adm-button-border-color, var(--adm-color-border)); color: var(--text-color); background-color: var(--background-color); position: relative; display: inline-block; box-sizing: border-box; height: auto; padding: 14px 24px; margin: 0; font-size: var(--adm-font-size-9); line-height: 1.4; text-align: center; border: var(--border-width) var(--border-style) var(--border-color); border-radius: var(--border-radius); cursor: pointer; transition: opacity ease .15s; -webkit-user-select: none; user-select: none; } .adm-button:focus { outline: none; } .adm-button:before { position: absolute; top: 0; left: 0; transform: translate(calc(var(--border-width) * -1),calc(var(--border-width) * -1)); width: 100%; height: 100%; background-color: #000; border: var(--border-width) var(--border-style) #000; border-radius: var(--border-radius); opacity: 0; content: " "; box-sizing: content-box; } .adm-button:active:before { opacity: .08; } .adm-button-default.adm-button-fill-outline { --background-color: transparent; --border-color: var(--adm-color-text); } .adm-button-default.adm-button-fill-none { --background-color: transparent; --border-width: 0; } .adm-button:not(.adm-button-default) { --text-color: var(--adm-color-text-light-solid); --background-color: var(--color); --border-color: var(--color); } .adm-button:not(.adm-button-default).adm-button-fill-outline { --text-color: var(--color); --background-color: transparent; } .adm-button:not(.adm-button-default).adm-button-fill-none { --text-color: var(--color); --background-color: transparent; --border-width: 0; } .adm-button-primary { --color: var(--adm-color-primary); } .adm-button-success { --color: var(--adm-color-success); } .adm-button-danger { --color: var(--adm-color-danger); } .adm-button-warning { --color: var(--adm-color-warning); } .adm-button-block { display: block; width: 100%; } .adm-button-disabled { cursor: not-allowed; opacity: .4; } .adm-button-disabled:active:before { display: none; } .adm-button.adm-button-mini { padding-top: 6px; padding-bottom: 6px; font-size: var(--adm-font-size-main); } .adm-button.adm-button-mini.adm-button-shape-rounded { padding-left: 18px; padding-right: 18px; } .adm-button.adm-button-small { padding-top: 6px; padding-bottom: 6px; font-size: var(--adm-font-size-7); } .adm-button.adm-button-large { padding-top: 22px; padding-bottom: 22px; font-size: var(--adm-font-size-10); } .adm-button.adm-button-shape-rounded { --border-radius: 2000px; } .adm-button.adm-button-shape-rectangular { --border-radius: 0; } .adm-button-loading { vertical-align: bottom; } .adm-button-loading-wrapper { display: flex; height: 1.4em; align-items: center; justify-content: center; } .adm-button-loading-wrapper>.adm-loading { opacity: .6; } .adm-dot-loading { display: inline-block; } .adm-calendar .adm-calendar-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 8px; } .adm-calendar .adm-calendar-header a.adm-calendar-arrow-button { padding: 8px 16px; display: block; flex: none; } .adm-calendar .adm-calendar-header a.adm-calendar-arrow-button svg { height: 44px; } .adm-calendar .adm-calendar-header a.adm-calendar-arrow-button.adm-calendar-arrow-button-right svg { transform: rotate(180deg); } .adm-calendar .adm-calendar-header .adm-calendar-title { font-size: var(--adm-font-size-10); flex: auto; text-align: center; } .adm-calendar .adm-calendar-body { display: flex; flex-wrap: wrap; } .adm-calendar-cells { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; padding: 16px 16px 8px; } .adm-calendar-cell { flex: none; box-sizing: border-box; width: calc(100% / 7); height: 96px; margin-bottom: 8px; padding: 4px; color: var(--adm-color-text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .adm-calendar-cell.adm-calendar-cell-today { color: var(--adm-color-primary); } .adm-calendar-cell.adm-calendar-cell-disabled, .adm-calendar-cell.adm-calendar-cell-disabled .adm-calendar-cell-bottom { color: var(--adm-color-light); } .adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected { background: var(--adm-color-primary); color: var(--adm-color-white); } .adm-calendar-cell.adm-calendar-cell-selected .adm-calendar-cell-bottom { color: var(--adm-color-white); } .adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected-begin { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected-end { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected { color: var(--adm-color-light); } .adm-calendar-cell .adm-calendar-cell-top { flex: none; font-size: var(--adm-font-size-10); } .adm-calendar-cell .adm-calendar-cell-bottom { flex: none; font-size: var(--adm-font-size-4); height: 24px; line-height: 24px; color: var(--adm-color-weak); } .adm-calendar-mark { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom: solid 2px var(--adm-color-border); height: 90px; box-sizing: border-box; font-size: var(--adm-font-size-7); padding: 0 16px; } .adm-calendar-mark .adm-calendar-mark-cell { flex: 1; text-align: center; } .adm-capsule-tabs { position: relative; min-width: 0; } .adm-capsule-tabs-header { position: relative; padding: 24px 12px; border-bottom: solid 2px var(--adm-color-border); } .adm-capsule-tabs-tab-list { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; overflow-x: scroll; scrollbar-width: none; } .adm-capsule-tabs-tab-list::-webkit-scrollbar { display: none; } .adm-capsule-tabs-tab-wrapper { flex: auto; padding: 0 12px; } .adm-capsule-tabs-tab { position: relative; padding: 16px 40px; margin: 0 auto; border-radius: 40px; cursor: pointer; font-size: var(--adm-font-size-7); text-align: center; white-space: nowrap; background-color: var(--adm-color-fill-content); } .adm-capsule-tabs-tab-active { color: var(--adm-color-text-light-solid); background-color: var(--adm-color-primary); } .adm-capsule-tabs-tab-disabled { opacity: .5; cursor: not-allowed; } .adm-capsule-tabs-content { padding: 24px; } .adm-scroll-mask { position: absolute; top: 0; bottom: 0; z-index: 1; width: 60px; height: 100%; pointer-events: none; } .adm-scroll-mask-left { left: 0; background: linear-gradient(to right,var(--adm-color-background),rgba(255,255,255,0)); } .adm-scroll-mask-right { right: 0; background: linear-gradient(to left,var(--adm-color-background),rgba(255,255,255,0)); } .adm-card { background: var(--adm-color-background); border-radius: 16px; padding: 0 24px; } .adm-card-header { position: relative; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 24px 0; } .adm-card-header:not(:last-child) { border-bottom: solid .10px var(--adm-color-border); } .adm-card-header-title { font-size: var(--adm-font-size-7); line-height: 1.4; font-weight: 700; } .adm-card-body { padding: 24px 0; } .adm-picker { --header-button-font-size: var(--adm-font-size-7); --title-font-size: var(--adm-font-size-7); --item-font-size: var(--adm-font-size-8); --item-height: 68px; width: 100%; height: 600px; overflow: hidden; position: relative; display: flex; flex-direction: column; ---item-font-size: var(--item-font-size); ---item-height: var(--item-height); } .adm-picker .adm-picker-view.adm-picker-view { --item-font-size: var(---item-font-size); --item-height: var(---item-height); } .adm-picker-header { flex-shrink: 0; border-bottom: solid 2px var(--adm-color-border); display: flex; justify-content: space-between; align-items: center; padding: 8px; } .adm-picker-header-button { font-size: var(--header-button-font-size); display: inline-block; padding: 16px; } .adm-picker-header-button-disabled, .adm-picker-header-button-disabled:active { opacity: .4; cursor: not-allowed; } .adm-picker-header-title { padding: 8px; font-size: var(--title-font-size); color: var(--adm-color-text); text-align: center; flex: 1; } .adm-picker-body { flex: 1; width: 100%; height: 100%; } .adm-picker-body>.adm-picker-view { --height: 100%; } .adm-picker-popup .adm-popup-body { border-top-left-radius: 16px; border-top-right-radius: 16px; } .adm-spin-loading { --color: var(--adm-color-weak); --size: 64px; width: var(--size); height: var(--size); } .adm-spin-loading-svg { width: 100%; height: 100%; animation: adm-spin-loading-rotate .8s infinite linear; } .adm-spin-loading-svg>.adm-spin-loading-fill { stroke: var(--color); } @keyframes adm-spin-loading-rotate { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } .adm-picker-view { --height: 480px; --item-height: 68px; --item-font-size: var(--adm-font-size-8); height: var(--height); width: 100%; display: flex; position: relative; overflow: hidden; background: var(--adm-color-background); } .adm-picker-view-column { height: 100%; flex: 1; -webkit-user-select: none; user-select: none; touch-action: none; position: relative; z-index: 0; } .adm-picker-view-column-wheel { width: 100%; cursor: -webkit-grab; cursor: grab; position: absolute; top: calc(50% - var(--item-height) / 2); left: 0; } .adm-picker-view-column-wheel:before { content: " "; display: block; position: absolute; width: 100%; height: 100vh; top: -100vh; } .adm-picker-view-column-wheel:after { content: " "; display: block; position: absolute; width: 100%; height: 100vh; bottom: -100vh; } .adm-picker-view-column-item { font-size: var(--item-font-size); padding: 0 12px; height: var(--item-height); display: flex; justify-content: center; align-items: center; } .adm-picker-view-column-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-picker-view-column-accessible { width: 100%; height: 100%; pointer-events: none; opacity: 0; display: flex; flex-direction: column; position: relative; top: calc(var(--item-height) * -1); z-index: 0; padding-bottom: 2px; } .adm-picker-view-column-accessible>* { flex: 1; text-overflow: ellipsis; } .adm-picker-view-column-accessible-current { position: absolute; width: 100%; height: 100%; } .adm-picker-view-column-accessible-button { width: 100%; height: 100%; } .adm-picker-view-mask { position: absolute; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; pointer-events: none; } .adm-picker-view-mask-top, .adm-picker-view-mask-bottom { flex: auto; } .adm-picker-view-mask-middle { height: var(--item-height); box-sizing: border-box; flex: none; border-top: solid 2px var(--adm-color-border); border-bottom: solid 2px var(--adm-color-border); } .adm-picker-view-mask-top { background: var(--adm-color-background); -webkit-mask: linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 50%,#000000 100%); mask: linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 50%,#000000 100%); } .adm-picker-view-mask-bottom { background: var(--adm-color-background); -webkit-mask: linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 50%,#000000 100%); mask: linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 50%,#000000 100%); } .adm-picker-view-loading-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .adm-picker-view-item-height-measure { position: relative; left: 0; top: 0; height: var(--item-height); width: 0; pointer-events: none; } .adm-cascader-view { --height: auto; } .adm-cascader-view-tabs.adm-tabs { --title-font-size: var(--adm-font-size-6); --content-padding: none; } .adm-cascader-view-header-title { max-width: 168px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .adm-cascader-view-content { height: var(--height); overflow-y: auto; } .adm-cascader-view-content>.adm-check-list { --border-inner: none; --border-bottom: none; --border-top: none; } .adm-cascader-view-item { font-size: var(--adm-font-size-6); } .adm-cascader-view-item-active { color: var(--adm-color-primary); } .adm-cascader-view .adm-list-inner { margin-bottom: 0; } .adm-cascader-view-skeleton { padding: 32px 24px; } .adm-cascader-view-skeleton .adm-skeleton { margin-bottom: 32px; --height: 36px; --width: 80%; --border-radius: 4px; } .adm-cascader-view-skeleton .adm-skeleton.adm-cascader-view-skeleton-line-3 { --width: 90%; } .adm-cascader-view-skeleton .adm-skeleton.adm-cascader-view-skeleton-line-4 { --width: 60%; } .adm-tabs { --title-font-size: var(--adm-font-size-9); --content-padding: 24px; --active-line-height: 4px; --active-line-border-radius: var(--active-line-height); --active-line-color: var(--adm-color-primary); --active-title-color: var(--adm-color-primary); position: relative; min-width: 0; } .adm-tabs-header { position: relative; border-bottom: solid 2px var(--adm-color-border); } .adm-tabs-tab-list { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; overflow-x: scroll; scrollbar-width: none; } .adm-tabs-tab-list::-webkit-scrollbar { display: none; } .adm-tabs-tab-wrapper { padding: 0 24px; } .adm-tabs-tab-wrapper-stretch { flex: auto; } .adm-tabs-tab { white-space: nowrap; padding: 16px 0 20px; width: -webkit-min-content; width: min-content; margin: 0 auto; font-size: var(--title-font-size); position: relative; cursor: pointer; } .adm-tabs-tab-active { color: var(--active-title-color); } .adm-tabs-tab-disabled { opacity: .5; cursor: not-allowed; } .adm-tabs-tab-line { position: absolute; bottom: 0; height: var(--active-line-height); background: var(--active-line-color); border-radius: var(--active-line-border-radius); } .adm-tabs-content { padding: var(--content-padding); } .adm-tabs-header-mask { position: absolute; top: 0; bottom: 0; z-index: 1; width: 60px; height: 100%; pointer-events: none; } .adm-tabs-header-mask-left { left: 0; background: linear-gradient(to right,var(--adm-color-background),rgba(255,255,255,0)); } .adm-tabs-header-mask-right { right: 0; background: linear-gradient(to left,var(--adm-color-background),rgba(255,255,255,0)); } .adm-check-list-item-extra { font-size: var(--adm-font-size-10); line-height: 1; color: var(--adm-color-primary); } .adm-check-list-item-readonly { cursor: unset; } .adm-list { --header-font-size: var(--adm-font-size-7); --prefix-width: "auto"; --prefix-padding-right: 24px; --align-items: center; --active-background-color: var(--adm-color-border); --border-inner: solid 2px var(--adm-color-border); --border-top: solid 2px var(--adm-color-border); --border-bottom: solid 2px var(--adm-color-border); --padding-left: 24px; --padding-right: 24px; --font-size: var(--adm-font-size-9); --extra-max-width: 70%; } .adm-list-header { color: var(--adm-color-weak); font-size: var(--header-font-size); padding: 16px var(--padding-right) 16px var(--padding-left); } .adm-list-body { background-color: var(--adm-color-background); overflow: hidden; font-size: var(--font-size); } .adm-list-body-inner { margin-top: -2px; } .adm-list-default .adm-list-body { border-top: var(--border-top); border-bottom: var(--border-bottom); } .adm-list-card { margin: 24px; } .adm-list-card .adm-list-body { border-radius: 16px; } .adm-list-card .adm-list-header { padding-left: 0; } .adm-list-item { display: block; padding-left: var(--padding-left); position: relative; background-color: var(--adm-color-background); line-height: 1.5; } .adm-list-item-title, .adm-list-item-description { color: var(--adm-color-weak); font-size: var(--adm-font-size-main); } .adm-list-item-content { display: flex; align-items: var(--align-items); justify-content: flex-start; border-top: var(--border-inner); padding-right: var(--padding-right); } .adm-list-item-content-prefix { width: var(--prefix-width); flex: none; padding-right: var(--prefix-padding-right); } .adm-list-item-content-main { flex: auto; padding: 24px 0; } .adm-list-item-content-extra { flex: none; padding-left: 24px; font-size: var(--adm-font-size-7); color: var(--adm-color-weak); max-width: var(--extra-max-width); } .adm-list-item-content-arrow { flex: none; display: flex; align-items: center; margin-left: 8px; color: var(--adm-color-light); font-size: 38px; } .adm-list-item-disabled { cursor: not-allowed; } .adm-list-item-disabled.adm-list-item-disabled>.adm-list-item-content>* { opacity: .4; pointer-events: none; } a.adm-list-item:active:not(.adm-list-item-disabled) { background-color: var(--active-background-color); } a.adm-list-item:active:not(.adm-list-item-disabled):after { content: " "; display: block; position: absolute; width: 100%; bottom: -2px; left: 0; border-bottom: var(--border-inner); } .adm-skeleton { --width: 100%; --height: 0; --border-radius: 0; background-color: rgba(190,190,190,.2); border-radius: var(--border-radius); width: var(--width); height: var(--height); display: block; } .adm-skeleton.adm-skeleton-animated { background: linear-gradient(90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%); background-size: 400% 100%; animation: adm-skeleton-loading 1.4s ease infinite; } .adm-skeleton.adm-skeleton-title { --width: 45%; --height: 64px; --border-radius: 4px; margin-bottom: 32px; margin-top: 32px; } .adm-skeleton.adm-skeleton-paragraph-line { --height: 36px; --border-radius: 4px; margin-top: 24px; margin-bottom: 24px; } .adm-skeleton.adm-skeleton-paragraph-line:last-child { --width: 65%; } @keyframes adm-skeleton-loading { 0% { background-position: 100% 50%; } to { background-position: 0 50%; } } .adm-cascader { width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; } .adm-cascader-header { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; } .adm-cascader-header-button { font-size: var(--adm-font-size-7); display: inline-block; padding: 8px; } .adm-cascader-header-title { padding: 8px; font-size: var(--adm-font-size-7); color: var(--adm-color-text); text-align: center; flex: 1; } .adm-cascader-body { flex: auto; height: 100%; width: 100%; } .adm-cascader-body>.adm-cascader-view { --height: 620px; } .adm-center-popup { --background-color: var(--adm-center-popup-background-color, var(--adm-color-background)); --border-radius: var(--adm-center-popup-border-radius, 16px); --max-width: var(--adm-center-popup-max-width, 75vw); --min-width: var(--adm-center-popup-min-width, 560px); --z-index: var(--adm-center-popup-z-index, 1000); position: fixed; z-index: var(--z-index); } .adm-center-popup .adm-center-popup-mask { z-index: 0; } .adm-center-popup-wrap { position: fixed; z-index: 1; top: 50%; left: 50%; width: auto; min-width: var(--min-width); max-width: var(--max-width); transform: translate(-50%,-50%); } .adm-center-popup-body { background-color: var(--background-color); border-radius: var(--border-radius); } .adm-center-popup-close { position: absolute; z-index: 100; right: 16px; top: 16px; cursor: pointer; padding: 8px; font-size: 36px; color: var(--adm-color-weak); } .adm-checkbox { --icon-size: 44px; --font-size: var(--adm-font-size-9); --gap: 16px; display: inline-flex; vertical-align: text-bottom; justify-content: flex-start; align-items: center; cursor: pointer; } .adm-checkbox input { display: none; } .adm-checkbox .adm-checkbox-icon { flex: none; border: 2px solid var(--adm-color-light); border-radius: var(--icon-size); box-sizing: border-box; width: var(--icon-size); height: var(--icon-size); color: var(--adm-color-text-light-solid); } .adm-checkbox .adm-checkbox-icon>svg { display: block; width: 100%; height: 100%; } .adm-checkbox.adm-checkbox-block { display: flex; } .adm-checkbox.adm-checkbox-checked .adm-checkbox-icon { border-color: var(--adm-color-primary); background-color: var(--adm-color-primary); } .adm-checkbox.adm-checkbox-disabled { cursor: not-allowed; } .adm-checkbox.adm-checkbox-disabled .adm-checkbox-content { opacity: .4; } .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon { color: #b7b7b7; border-color: var(--adm-color-light); background-color: var(--adm-color-fill-content); } .adm-checkbox .adm-checkbox-custom-icon { font-size: var(--icon-size); } .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon { background-color: var(--adm-color-background); color: var(--adm-color-primary); } .adm-checkbox-content { flex: 0 1 auto; font-size: var(--font-size); padding-left: var(--gap); } .adm-collapse-panel-header .adm-list-item-content-main { padding: 24px 0; } .adm-collapse-arrow { transform: rotate(0); transition: all ease .3s; } .adm-collapse-arrow-active { transform: rotate(-180deg); } .adm-collapse-panel-content { font-size: var(--adm-font-size-main); color: var(--adm-color-weak); overflow: hidden; } .adm-dialog { --z-index: var(--adm-dialog-z-index, 1000); ---z-index: var(--z-index); } .adm-dialog .adm-center-popup { --z-index: var(---z-index); } .adm-dialog-body { width: 100%; max-height: 70vh; font-size: var(--adm-font-size-6); overflow: hidden; display: flex; flex-direction: column; } .adm-dialog-body>* { flex: none; } .adm-dialog-body>.adm-dialog-content { flex: auto; } .adm-dialog-body:not(.adm-dialog-with-image) { padding-top: 40px; } .adm-dialog-image-container { margin-bottom: 24px; max-height: 40vh; } .adm-dialog-header { margin-bottom: 16px; padding: 0 24px; } .adm-dialog-title { margin-bottom: 16px; padding: 0 24px; font-weight: 700; font-size: var(--adm-font-size-10); line-height: 50px; text-align: center; } .adm-dialog-content { padding: 0 24px 40px; max-height: 70vh; overflow-x: hidden; overflow-y: auto; font-size: var(--adm-font-size-7); line-height: 1.4; color: var(--adm-color-text); } .adm-dialog-content-empty { padding: 0; height: 24px; } .adm-dialog-footer { -webkit-user-select: none; user-select: none; } .adm-dialog-footer .adm-dialog-action-row { display: flex; align-items: stretch; border-top: .10px solid var(--adm-color-border); } .adm-dialog-footer .adm-dialog-action-row>* { flex: 1; } .adm-dialog-footer .adm-dialog-action-row>.adm-dialog-button { padding: 20px; font-size: var(--adm-font-size-10); line-height: 50px; border-radius: 0; border-right: solid .10px var(--adm-color-border); } .adm-dialog-footer .adm-dialog-action-row>.adm-dialog-button-bold { font-weight: 700; } .adm-dialog-footer .adm-dialog-action-row>.adm-dialog-button:last-child { border-right: none; } .adm-dialog-image-container { overflow-y: auto; } .adm-divider-horizontal { display: flex; align-items: center; margin: 32px 0; border-width: 0; border-color: var(--adm-color-border); border-style: solid; color: var(--adm-color-weak); font-size: 28px; } .adm-divider-left.adm-divider-horizontal:before { max-width: 10%; } .adm-divider-right.adm-divider-horizontal:after { max-width: 10%; } .adm-divider-horizontal:after, .adm-divider-horizontal:before { flex: auto; display: block; content: ""; border-style: inherit; border-color: inherit; border-width: 2px 0 0; } .adm-divider-horizontal .adm-divider-content { flex: none; padding: 0 32px; } .adm-divider-vertical { position: relative; top: -.06em; display: inline-block; height: .9em; margin: 0 32px; vertical-align: middle; border-top: 0; border-left: 2px solid var(--adm-color-border); } .adm-dropdown { background-color: var(--adm-color-background); } .adm-dropdown .adm-dropdown-nav { display: flex; border-bottom: 2px solid transparent; } .adm-dropdown-open .adm-dropdown-nav { border-bottom-color: var(--adm-color-border); } .adm-dropdown-item { display: flex; flex: 1; justify-content: center; min-width: 0; cursor: pointer; } .adm-dropdown-item .adm-dropdown-item-title { display: flex; align-items: center; position: relative; max-width: 100%; font-size: var(--adm-font-size-main); padding: 24px; } .adm-dropdown-item .adm-dropdown-item-title-text { margin-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .adm-dropdown-item .adm-dropdown-item-title-arrow { color: var(--adm-color-light); font-size: 18px; transform: rotate(0) translateY(2px); transition: all ease .2s; } .adm-dropdown-item .adm-dropdown-item-title-arrow-active { transform: rotate(-180deg) translateY(-2px); } .adm-dropdown-item .adm-dropdown-item-title:active { opacity: .7; } .adm-dropdown-item-highlight { color: var(--adm-color-primary); } .adm-dropdown-item-active .adm-dropdown-item-title:after { margin-top: -2px; transform: rotate(135deg); } .adm-dropdown-item-content { width: 100%; background: var(--adm-color-background); } .adm-dropdown-item-content-hidden { display: none; } .adm-dropdown-popup { position: fixed; overflow: hidden; width: 100%; right: 0; bottom: 0; left: 0; } .adm-dropdown-popup .adm-dropdown-popup-mask, .adm-dropdown-popup .adm-dropdown-popup-body { position: absolute; } .adm-ellipsis { overflow: hidden; line-height: 1.5; } .adm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; } .adm-empty-image-container { display: flex; justify-content: center; } .adm-empty-image-container .adm-empty-image { width: 128px; height: intrinsic; } .adm-empty-description { margin-top: 16px; font-size: var(--adm-font-size-6); color: var(--adm-color-light); } .adm-error-block { --color: var(--adm-color-text); --image-height: var(--adm-error-block-image-height, 200px); --image-height-full-page: var(--adm-error-block-image-height-full-page, 400px); --image-width: var(--adm-error-block-image-width, auto); --image-width-full-page: var(--adm-error-block-image-width-full-page, auto); box-sizing: border-box; text-align: center; } .adm-error-block-image { height: var(--image-height); width: var(--image-width); max-width: 100%; } .adm-error-block-image svg, .adm-error-block-image img { height: 100%; } .adm-error-block-description { font-size: var(--adm-font-size-4); color: #999; line-height: 1.4; margin-top: 24px; } .adm-error-block-description-title { font-size: var(--adm-font-size-7); } .adm-error-block-description-subtitle { margin-top: 16px; } .adm-error-block-content { margin-top: 24px; } .adm-error-block-full-page { padding-top: calc(50vh - var(--image-height-full-page)); } .adm-error-block-full-page .adm-error-block-image { height: var(--image-height-full-page); width: var(--image-width-full-page); } .adm-error-block-full-page .adm-error-block-description { margin-top: 40px; font-size: var(--adm-font-size-main); } .adm-error-block-full-page .adm-error-block-description-title { font-size: 40px; color: var(--adm-color-text); } .adm-floating-bubble { --initial-position-left: var(--initial-position-left); --initial-position-right: var(--initial-position-right); --initial-position-top: var(--initial-position-top); --initial-position-bottom: var(--initial-position-bottom); --z-index: 1; --edge-distance: 0; --size: 96px; --border-radius: 50%; --background: var(--adm-color-primary); } .adm-floating-bubble-boundary-outer { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; padding: var(--edge-distance); box-sizing: border-box; pointer-events: none; } .adm-floating-bubble-boundary { position: relative; width: 100%; height: 100%; } .adm-floating-bubble-button { position: fixed; top: var(--initial-position-top); bottom: var(--initial-position-bottom); left: var(--initial-position-left); right: var(--initial-position-right); box-sizing: border-box; width: var(--size); height: var(--size); display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; transition: opacity ease .15s; -webkit-user-select: none; user-select: none; touch-action: none; background: var(--background); color: var(--adm-color-white); border-radius: var(--border-radius); z-index: var(--z-index); } .adm-floating-panel { --border-radius: 16px; --header-height: 56px; --z-index: var(--adm-floating-panel-z-index, 900); position: fixed; z-index: var(--z-index); bottom: 0; left: 0; width: 100vw; display: flex; flex-direction: column; touch-action: none; } .adm-floating-panel-mask { display: block; width: 100%; height: 100vh; position: absolute; left: 0; top: -100vh; background: transparent; } .adm-floating-panel:after { content: ""; display: block; position: absolute; bottom: -100vh; height: 100vh; width: 100vw; background: var(--adm-color-background); } .adm-floating-panel .adm-floating-panel-header { flex: none; height: var(--header-height); display: flex; justify-content: center; align-items: center; cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; user-select: none; background-color: var(--adm-color-background); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar { height: 6px; width: 40px; border-radius: 20px; background: var(--adm-color-light); } .adm-floating-panel .adm-floating-panel-content { flex: 1; overflow-y: scroll; background: var(--adm-color-background); } .adm-form { --border-inner: solid 2px var(--adm-border-color); --border-top: solid 2px var(--adm-border-color); --border-bottom: solid 2px var(--adm-border-color); --prefix-width: 6.8em; ---border-inner: var(--border-inner); ---border-top: var(--border-top); ---border-bottom: var(--border-bottom); ---prefix-width: var(--prefix-width); } .adm-form .adm-list.adm-list { --padding-left: 32px; --padding-right: 24px; --border-inner: var(---border-inner); --border-top: var(---border-top); --border-bottom: var(---border-bottom); } .adm-form .adm-form-footer { padding: 40px 24px; } .adm-form .adm-form-item-horizontal.adm-list-item { --prefix-width: var(---prefix-width); } .adm-form-list-operation { text-align: center; color: #1677ff; } .adm-form-item+.adm-form-item { border-top: none; } .adm-form-item-label { display: block; height: 100%; line-height: 1.5; box-sizing: border-box; position: relative; color: var(--adm-color-text-secondary); } .adm-form-item-label .adm-form-item-required-asterisk { position: absolute; left: -.6em; top: 0; font-family: SimSun,sans-serif; color: var(--adm-color-danger); -webkit-user-select: none; user-select: none; } .adm-form-item-label .adm-form-item-required-text { margin-left: 8px; color: var(--adm-color-weak); } .adm-form-item-label-help { margin-left: 8px; cursor: pointer; } .adm-form-item-child { display: flex; } .adm-form-item-child-position-normal { justify-content: normal; } .adm-form-item-child-position-normal>* { flex: auto; } .adm-form-item-child-position-right { justify-content: flex-end; } .adm-form-item-child-position-right>* { flex: none; } .adm-form-item-feedback-error { color: var(--adm-color-danger); margin-top: 8px; } .adm-form-item-feedback-warning { color: var(--adm-color-warning); margin-top: 8px; } .adm-form-item.adm-form-item-hidden { display: none; } .adm-form-item.adm-form-item-horizontal.adm-list-item { --align-items: stretch; } .adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix { padding-top: 24px; padding-bottom: 24px; } .adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra { align-self: center; } .adm-form-item.adm-form-item-vertical .adm-form-item-label { font-size: var(--adm-font-size-7); margin-bottom: 8px; } .adm-popover { --z-index: var(--adm-popover-z-index, 1030); --background: #ffffff; --arrow-size: 16px; --content-padding: 16px 24px; color: var(--adm-color-text); position: absolute; top: 0; left: 0; z-index: var(--z-index); white-space: normal; text-align: left; cursor: auto; -webkit-user-select: text; user-select: text; animation: none; } .adm-popover.adm-popover-dark { --background: rgba(0, 0, 0, .75); --adm-color-text: #ffffff; color: #fff; } .adm-popover.adm-popover-dark .adm-popover-inner { box-shadow: none; } .adm-popover:after { position: absolute; background: rgba(255,255,255,.01); content: ""; } .adm-popover-hidden { display: none; } .adm-popover-inner { background-color: var(--background); background-clip: padding-box; border-radius: 16px; box-shadow: 0 0 60px rgba(51,51,51,.2); font-size: var(--adm-font-size-7); width: -webkit-max-content; width: max-content; min-width: 64px; max-width: calc(100vw - 48px); overflow-y: hidden; } .adm-popover-inner-content { padding: var(--content-padding); } .adm-popover-arrow { position: absolute; display: block; height: var(--arrow-size); width: var(--arrow-size); overflow: visible; background: transparent; } .adm-popover-arrow-icon { display: block; height: var(--arrow-size); width: calc(var(--arrow-size) / 8 * 15); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(var(--arrow-icon-rotate)); } .adm-popover .adm-popover-arrow { color: var(--background); } .adm-popover-menu { --border-color: #eeeeee; } .adm-popover-menu.adm-popover { --content-padding: 0; } .adm-popover-menu-list { overflow: hidden; min-width: 240px; } .adm-popover-menu-list-inner { margin-top: -2px; } .adm-popover-menu-item { display: flex; padding-left: 40px; justify-content: flex-start; align-items: center; position: relative; } .adm-popover-menu-item-icon { flex: none; padding-right: 16px; font-size: 40px; } .adm-popover-menu-item-text { flex: auto; padding: 28px 40px 28px 0; border-top: solid 2px var(--border-color); } .adm-popover-menu-item-disabled { cursor: not-allowed; } .adm-popover-menu-item-disabled>* { opacity: .4; } .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) { background-color: var(--border-color); } .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled):after { content: " "; display: block; position: absolute; width: 100%; bottom: -2px; left: 0; border-bottom: solid 2px var(--border-color); } .adm-popover.adm-popover-dark.adm-popover-menu { --border-color: #333333; --background: rgba(0, 0, 0, .9); } .adm-grid { --gap: 0; --gap-horizontal: var(--gap); --gap-vertical: var(--gap); display: grid; grid-gap: 20px; -webkit-column-gap: var(--gap-horizontal); column-gap: var(--gap-horizontal); row-gap: var(--gap-vertical); grid-template-columns: repeat(var(--columns),minmax(0,1fr)); align-items: stretch; } .adm-grid-item { grid-column-end: span var(--item-span); } .adm-image-viewer-content { width: 100vw; height: 100vh; touch-action: none; -webkit-user-select: none; user-select: none; } .adm-image-viewer-footer { position: absolute; width: 100%; bottom: 0; z-index: 1; } .adm-image-viewer-slides { height: 100%; position: relative; z-index: 1; cursor: -webkit-grab; cursor: grab; touch-action: none; } .adm-image-viewer-slides-inner { height: 100%; white-space: nowrap; } .adm-image-viewer-slides-inner>* { margin-right: 32px; } .adm-image-viewer-slide { position: relative; width: 100%; height: 100%; display: inline-block; } .adm-image-viewer-control { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; cursor: -webkit-grab; cursor: grab; touch-action: none; } .adm-image-viewer-image-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .adm-image-viewer-image-wrapper img { display: block; max-width: 100%; max-height: 100%; } .adm-image-viewer-indicator { position: absolute; z-index: 2; left: 50%; top: 24px; transform: translate(-50%); color: #e6e6e6; font-size: var(--adm-font-size-6); } .adm-space-item { flex: none; } .adm-space { display: inline-flex; --gap: 16px; --gap-vertical: var(--gap); --gap-horizontal: var(--gap); } .adm-space-vertical { flex-direction: column; } .adm-space-vertical>.adm-space-item { margin-bottom: var(--gap-vertical); } .adm-space-vertical>.adm-space-item:last-child { margin-bottom: 0; } .adm-space-horizontal { flex-direction: row; } .adm-space-horizontal>.adm-space-item { margin-right: var(--gap-horizontal); } .adm-space-horizontal>.adm-space-item:last-child { margin-right: 0; } .adm-space-horizontal.adm-space-wrap { flex-wrap: wrap; margin-bottom: calc(var(--gap-vertical) * -1); } .adm-space-horizontal.adm-space-wrap>.adm-space-item { padding-bottom: var(--gap-vertical); } .adm-space.adm-space-block { display: flex; } .adm-space-align-center { align-items: center; } .adm-space-align-start { align-items: flex-start; } .adm-space-align-end { align-items: flex-end; } .adm-space-align-baseline { align-items: baseline; } .adm-space-justify-center { justify-content: center; } .adm-space-justify-start { justify-content: flex-start; } .adm-space-justify-end { justify-content: flex-end; } .adm-space-justify-between { justify-content: space-between; } .adm-space-justify-around { justify-content: space-around; } .adm-space-justify-evenly { justify-content: space-evenly; } .adm-space-justify-stretch { justify-content: stretch; } .adm-image-uploader { --cell-size: 160px; --gap: 24px; ---gap: var(--gap); ---gap-horizontal: var(--gap-horizontal, var(--gap)); ---gap-vertical: var(--gap-vertical, var(--gap)); } .adm-image-uploader-grid, .adm-image-uploader-space { --gap: var(---gap); --gap-horizontal: var(---gap-horizontal); --gap-vertical: var(---gap-vertical); } .adm-image-uploader-cell { position: relative; width: var(--cell-size); height: var(--cell-size); border-radius: 8px; overflow: hidden; } .adm-image-uploader-cell-fail { border: red solid 2px; box-sizing: border-box; } .adm-image-uploader-cell-delete { position: absolute; top: 0; right: 0; width: 28px; height: 28px; background-color: rgba(0,0,0,.7); border-radius: 0 0 0 24px; font-size: 16px; color: var(--adm-color-white); cursor: pointer; } .adm-image-uploader-cell-delete-icon { position: absolute; left: 8px; top: 6px; } .adm-image-uploader-cell-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: var(--adm-color-white); background-color: rgba(50,50,51,.88); } .adm-image-uploader-cell-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; padding-top: 16px; } .adm-image-uploader-cell-mask-message { display: inline-block; padding: 12px 8px; font-size: var(--adm-font-size-4); } .adm-image-uploader-cell-image { width: var(--cell-size); height: var(--cell-size); } .adm-image-uploader-upload-button-wrap { position: relative; } .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button { background-color: var(--adm-color-box); text-align: center; line-height: var(--cell-size); display: block; } .adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button-icon { color: #999; font-size: 64px; } .adm-image-uploader-upload-button-wrap .adm-image-uploader-input { cursor: pointer; position: absolute; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; } .adm-image-uploader .adm-image-uploader-gap-measure { position: absolute; left: 0; top: 0; height: var(--gap-horizontal); width: 0; } .adm-index-bar { --color: var(--adm-color-text); overflow: hidden; height: 100%; position: relative; background-color: var(--adm-color-background); --sticky-offset-top: 0; } .adm-index-bar-body { overflow: scroll; height: 100%; width: 100%; } .adm-index-bar-body::-webkit-scrollbar { display: none; } .adm-index-bar-anchor-title { display: flex; flex-direction: column; justify-content: center; height: 70px; padding: 0 24px; color: var(--adm-color-weak); font-size: var(--adm-font-size-main); background-color: var(--adm-color-fill-content); } .adm-index-bar-sidebar { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 910; overflow: visible; color: var(--adm-color-weak); font-size: var(--adm-font-size-4); -webkit-user-select: none; user-select: none; touch-action: none; } .adm-index-bar-sidebar-bubble { position: absolute; top: 50%; right: 120px; width: 94px; height: 94px; color: var(--adm-color-text-light-solid); font-size: 50px; line-height: 94px; text-align: center; background: var(--adm-color-light); border-radius: 50%; transform: translateY(-50%); } .adm-index-b