:root { --van-picker-group-background: var(--van-background-2); } .van-picker-group { background: var(--van-picker-group-background); } .van-picker-group__tabs { margin-top: var(--van-padding-base); } .van-picker-group__tab-title { margin-right: 16px; } :root { --van-picker-background: var(--van-background-2); --van-picker-toolbar-height: 44px; --van-picker-title-font-size: var(--van-font-size-lg); --van-picker-title-line-height: var(--van-line-height-md); --van-picker-action-padding: 0 var(--van-padding-md); --van-picker-action-font-size: var(--van-font-size-md); --van-picker-confirm-action-color: var(--van-primary-color); --van-picker-cancel-action-color: var(--van-text-color-2); --van-picker-option-font-size: var(--van-font-size-lg); --van-picker-option-padding: 0 var(--van-padding-base); --van-picker-option-text-color: var(--van-text-color); --van-picker-option-disabled-opacity: 0.3; --van-picker-loading-icon-color: var(--van-primary-color); --van-picker-loading-mask-color: rgba(255, 255, 255, 0.9); --van-picker-mask-color: linear-gradient( 180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4) ), linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)); } .van-theme-dark { --van-picker-loading-mask-color: rgba(0, 0, 0, 0.6); --van-picker-mask-color: linear-gradient( 180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1) ), linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)); } .van-picker { position: relative; background: var(--van-picker-background); -webkit-user-select: none; user-select: none; } .van-picker__toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--van-picker-toolbar-height); } .van-picker__cancel, .van-picker__confirm { height: 100%; padding: var(--van-picker-action-padding); font-size: var(--van-picker-action-font-size); background-color: transparent; border: none; } .van-picker__confirm { color: var(--van-picker-confirm-action-color); } .van-picker__cancel { color: var(--van-picker-cancel-action-color); } .van-picker__title { position: absolute; left: 50%; color: var(--van-text-color); max-width: 50%; font-weight: var(--van-font-bold); font-size: var(--van-picker-title-font-size); line-height: var(--van-picker-title-line-height); text-align: center; transform: translate(-50%); } .van-picker__columns { position: relative; display: flex; cursor: -webkit-grab; cursor: grab; } .van-picker__loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; color: var(--van-picker-loading-icon-color); background: var(--van-picker-loading-mask-color); } .van-picker__frame { position: absolute; top: 50%; right: var(--van-padding-md); left: var(--van-padding-md); z-index: 2; transform: translateY(-50%); pointer-events: none; } .van-picker__mask { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-image: var(--van-picker-mask-color); background-repeat: no-repeat; background-position: top, bottom; transform: translateZ(0); pointer-events: none; } .van-picker-column { flex: 1; overflow: hidden; font-size: var(--van-picker-option-font-size); } .van-picker-column__wrapper { transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1); } .van-picker-column__item { display: flex; align-items: center; justify-content: center; padding: var(--van-picker-option-padding); color: var(--van-picker-option-text-color); } .van-picker-column__item--disabled { cursor: not-allowed; opacity: var(--van-picker-option-disabled-opacity); } [data-v-fa6bffe7] .van-tab__text { font-weight: 400; }