| | |
| | | display: none; |
| | | } |
| | | .t-navbar__placeholder { |
| | | height: var(--td-navbar-height, 96rpx); |
| | | padding-top: var(--td-navbar-padding-top, 40rpx); |
| | | height: var(--td-navbar-height, 48px); |
| | | padding-top: var(--td-navbar-padding-top, 20px); |
| | | position: relative; |
| | | visibility: hidden; |
| | | box-sizing: content-box; |
| | | } |
| | | .t-navbar__content { |
| | | position: relative; |
| | | z-index: 1; |
| | | height: var(--td-navbar-height, 96rpx); |
| | | width: calc(100% - var(--td-navbar-right, 190rpx)); |
| | | padding-right: var(--td-navbar-right, 190rpx); |
| | | padding-top: var(--td-navbar-padding-top, 40rpx); |
| | | color: var(--td-navbar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); |
| | | background: var(--td-navbar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); |
| | | height: var(--td-navbar-height, 48px); |
| | | width: calc(100% - var(--td-navbar-right, 95px)); |
| | | padding-right: var(--td-navbar-right, 95px); |
| | | padding-top: var(--td-navbar-padding-top, 20px); |
| | | color: var(--td-navbar-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); |
| | | background-color: var(--td-navbar-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); |
| | | display: flex; |
| | | align-items: center; |
| | | box-sizing: content-box; |
| | | } |
| | | .t-navbar__left { |
| | | position: relative; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: var(--td-spacer-1, 24rpx); |
| | | transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
| | | } |
| | | .t-navbar__left-arrow { |
| | | font-size: var(--td-navbar-left-arrow-size, 48rpx); |
| | | font-size: var(--td-navbar-left-arrow-size, 24px); |
| | | } |
| | | .t-navbar__left--hide { |
| | | opacity: 0; |
| | | } |
| | | .t-navbar__capsule { |
| | | box-sizing: border-box; |
| | | width: var(--td-navbar-capsule-width, 176rpx); |
| | | height: var(--td-navbar-capsule-height, 64rpx); |
| | | width: var(--td-navbar-capsule-width, 88px); |
| | | height: var(--td-navbar-capsule-height, 32px); |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | |
| | | transform: scale(0.5); |
| | | transform-origin: 0 0; |
| | | box-sizing: border-box; |
| | | border-radius: calc(var(--td-navbar-capsule-border-radius, 32rpx) * 2); |
| | | border: 2rpx solid var(--td-navbar-capsule-border-color, #e3e6ea); |
| | | border-radius: calc(var(--td-navbar-capsule-border-radius, 16px) * 2); |
| | | border: 2rpx solid var(--td-navbar-capsule-border-color, var(--td-border-level-1-color, var(--td-gray-color-3, #e7e7e7))); |
| | | } |
| | | .t-navbar__capsule:empty { |
| | | display: none; |
| | | } |
| | | .t-navbar__center { |
| | | font-size: 36rpx; |
| | | font-size: 18px; |
| | | text-align: center; |
| | | position: absolute; |
| | | left: var(--td-navbar-right, 190rpx); |
| | | width: calc(100% - var(--td-navbar-right, 190rpx) * 2); |
| | | height: var(--td-navbar-height, 96rpx); |
| | | line-height: var(--td-navbar-height, 96rpx); |
| | | bottom: 0; |
| | | left: var(--td-navbar-right, 95px); |
| | | width: calc(100% - var(--td-navbar-right, 95px) * 2); |
| | | height: var(--td-navbar-height, 48px); |
| | | line-height: var(--td-navbar-height, 48px); |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | overflow: hidden; |
| | | transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
| | | } |
| | | .t-navbar__center:empty { |
| | | display: none; |
| | | } |
| | | .t-navbar__center-title { |
| | | font-size: var(--td-navbar-title-font-size, 36rpx); |
| | | font-size: var(--td-navbar-title-font-size, 18px); |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | font-weight: var(--td-navbar-title-font-weight, 600); |
| | | } |
| | | .t-navbar__center--hide { |
| | | opacity: 0; |
| | | } |