/* 主题定制 */
|
page {
|
--td-primary-color-1: #E5F2FF;
|
--td-primary-color-2: #D6EAFF;
|
--td-primary-color-3: #C8E3FF;
|
--td-primary-color-4: #A1CFFF;
|
--td-primary-color-5: #71B6FF;
|
--td-primary-color-6: #53A7FF;
|
--td-primary-color-7: #389AFF;
|
--td-primary-color-8: #2B93FF;
|
--td-primary-color-9: #127CEA;
|
--td-primary-color-10: #076FDB;
|
|
--td-warning-color-1: #FFEEDD;
|
--td-warning-color-2: #FEE2C8;
|
--td-warning-color-3: #FFD4AA;
|
--td-warning-color-4: #FFC388;
|
--td-warning-color-5: #FFB973;
|
--td-warning-color-6: #FFAD5B;
|
--td-warning-color-7: #FD9532;
|
--td-warning-color-8: #FF8710;
|
--td-warning-color-9: #F58212;
|
--td-warning-color-10: #F27904;
|
|
--td-error-color-1: #F9DCDC;
|
--td-error-color-2: #ECAAAA;
|
--td-error-color-3: #EE9797;
|
--td-error-color-4: #F07474;
|
--td-error-color-5: #ED5252;
|
--td-error-color-6: #E83F3F;
|
--td-error-color-7: #D10C0C;
|
--td-error-color-8: #c50606;
|
--td-error-color-9: #900202;
|
--td-error-color-10: #640202;
|
|
--td-success-color-1: #BFF0D6;
|
--td-success-color-2: #A4EAC4;
|
--td-success-color-3: #77DBA3;
|
--td-success-color-4: #4DC986;
|
--td-success-color-5: #25BB6A;
|
--td-success-color-6: #20AD5E;
|
--td-success-color-7: #13A34C;
|
--td-success-color-8: #0ba04e;
|
--td-success-color-9: #078a42;
|
--td-success-color-10: #006428;
|
|
--td-gray-color-1: #f3f3f3;
|
--td-gray-color-2: #eeeeee;
|
--td-gray-color-3: #e7e7e7;
|
--td-gray-color-4: #dcdcdc;
|
--td-gray-color-5: #c5c5c5;
|
--td-gray-color-6: #a6a6a6;
|
--td-gray-color-7: #8b8b8b;
|
--td-gray-color-8: #777777;
|
--td-gray-color-9: #5e5e5e;
|
--td-gray-color-10: #4b4b4b;
|
--td-gray-color-11: #383838;
|
--td-gray-color-12: #2c2c2c;
|
--td-gray-color-13: #242424;
|
--td-gray-color-14: #181818;
|
|
--td-white-color-1: #fff;
|
|
/* 基础颜色 */
|
--td-primary-color: var(--td-primary-color-7);
|
--td-success-color: var(--td-success-color-7);
|
--td-warning-color: var(--td-warning-color-7);
|
--td-error-color: var(--td-error-color-7);
|
|
/* 遮罩 */
|
--td-mask-active: rgba(0, 0, 0, 0.6);
|
--td-mask-disabled: rgba(255, 255, 255, 0.6);
|
|
/* 背景色 */
|
/* 色彩-背景 */
|
--td-bg-color: #f0f2f5;
|
/* 色彩-中层背景 */
|
--td-bg-color-fade: #fbfbfb;
|
/* 色彩-模块 */
|
--td-bg-color-block: #fff;
|
|
/* Spacer */
|
--td-spacer: 16rpx;
|
--td-spacer-1: 24rpx;
|
--td-spacer-2: 32rpx;
|
--td-spacer-3: 48rpx;
|
--td-spacer-4: 64rpx;
|
--td-spacer-5: 96rpx;
|
--td-spacer-6: 160rpx;
|
|
/* Font */
|
--td-font-size-xs: 20rpx;
|
--td-font-size-s: 24rpx;
|
--td-font-size-base: 28rpx;
|
--td-font-size-m: 32rpx;
|
--td-font-size-l: 40rpx;
|
--td-font-size-xl: 72rpx;
|
|
--td-text-line-height: 1.5;
|
|
/* 字体-磅数-常规 */
|
--td-font-family: PingFang SC: Microsoft YaHei: Arial Regular;
|
/* 字体-磅数-粗体 */
|
--td-font-family-medium: PingFang SC: Microsoft YaHei: Arial Medium;
|
|
/* Border Radiusrpx */
|
--td-border-radius: 16rpx;
|
--td-border-radius-50: 50%;
|
|
/* 文字 */
|
--td-font-gray-1: rgba(0, 0, 0, 0.9);
|
--td-font-gray-2: rgba(0, 0, 0, 0.6);
|
--td-font-gray-3: rgba(0, 0, 0, 0.4);
|
--td-font-gray-4: rgba(0, 0, 0, 0.26);
|
|
--td-font-white-1: rgba(255, 255, 255, 1);
|
--td-font-white-2: rgba(255, 255, 255, 0.65);
|
--td-font-white-3: rgba(255, 255, 255, 0.35);
|
--td-font-white-4: rgba(255, 255, 255, 0.22);
|
|
--td-text-color-primary: var(--td-font-gray-1);
|
--td-text-color-secondary: var(--td-font-gray-2);
|
--td-text-color-placeholder: var(--td-font-gray-3);
|
--td-text-color-disabled: var(--td-font-gray-4);
|
--td-text-color-anti: var(--td-font-white-1);
|
--td-text-color-brand: var(--td-primary-color-8);
|
--td-text-color-link: var(--td-primary-color-8);
|
|
/* 阴影 */
|
--td-shadow-1:
|
0 1px 10px rgba(0, 0, 0, 5%),
|
0 4px 5px rgba(0, 0, 0, 8%),
|
0 2px 4px -1px rgba(0, 0, 0, 12%);
|
--td-shadow-2:
|
0 3px 14px 2px rgba(0, 0, 0, 5%),
|
0 8px 10px 1px rgba(0, 0, 0, 6%),
|
0 5px 5px -3px rgba(0, 0, 0, 10%);
|
--td-shadow-3:
|
0 6px 30px 5px rgba(0, 0, 0, 5%),
|
0 16px 24px 2px rgba(0, 0, 0, 4%),
|
0 8px 10px -5px rgba(0, 0, 0, 8%);
|
--td-shadow-4:
|
0 2px 8px 0 rgba(0, 0, 0, 0.06);
|
|
|
/* 主题 */
|
--td-brand-color: var(--td-primary-color-7);
|
--td-brand-color-active: var(--td-primary-color-9);
|
--td-brand-color-disabled: var(--td-primary-color-3);
|
--td-brand-color-focus: var(--td-primary-color-1);
|
--td-brand-color-light: var(--td-primary-color-1);
|
--td-brand-color-light-active: var(--td-primary-color-2);
|
|
--td-error-color: var(--td-error-color-7);
|
--td-error-color-active: var(--td-error-color-8);
|
--td-error-color-disabled: var(--td-error-color-3);
|
--td-error-color-focus: var(--td-error-color-2);
|
--td-error-color-light: var(--td-error-color-1);
|
|
--td-warning-color: var(--td-warning-color-7);
|
--td-warning-color-active: var(--td-warning-color-8);
|
--td-warning-color-disabled: var(--td-warning-color-3);
|
--td-warning-color-focus: var(--td-warning-color-2);
|
--td-warning-color-light: var(--td-warning-color-1);
|
|
--td-success-color: var(--td-success-color-7);
|
--td-success-color-active: var(--td-success-color-8);
|
--td-success-color-disabled: var(--td-success-color-3);
|
--td-success-color-focus: var(--td-success-color-2);
|
--td-success-color-light: var(--td-success-color-1);
|
|
/* 组件样式自定义 */
|
/* 分割线 */
|
--td-divider-content-line-height: 40rpx;
|
|
/* cell单元格 */
|
--td-cell-title-font-size: var(--td-font-size-m);
|
--td-cell-note-font-size: var(--td-cell-title-font-size);
|
--td-cell-title-color: var(--td-font-gray-1)
|
}
|
