【文档记录】支付宝小程序原生ACSS分享

CSS
复制代码
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
.a-page { min-height: 100vh; }
.a-input { display: inline-block; background-color: rgb(255, 255, 255); padding: 2px 5px; color: rgb(0, 0, 0); font-size: 17px; height: 25px; box-sizing: content-box; }
.a-input input:disabled { opacity: 0.4; }
.a-input-wrap { position: relative; text-overflow: inherit; border: 0px; height: 100%; width: auto; font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; background: inherit; padding: 0px; margin: 0px; outline: 0px; text-align: inherit; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.a-input-wrap form { height: inherit; }
.a-input-content, .a-input-placeholder { left: 0px; top: 0px; width: 100%; height: inherit; text-align: inherit; font-family: inherit; }
.a-input-content { border: 0px; font-size: inherit; font-weight: inherit; background: 0px 0px; display: inherit; padding: 0px; margin: 0px; outline: 0px; vertical-align: middle; text-overflow: inherit; -webkit-tap-highlight-color: transparent; position: relative; color: inherit; overflow: inherit; white-space: inherit; }
.a-input-placeholder { position: absolute; white-space: nowrap; overflow: hidden; color: rgb(204, 204, 204); display: flex; -webkit-box-align: center; place-items: center flex-start; user-select: none; }
.a-input-placeholder span { -webkit-box-flex: 1; flex: 1 1 0%; padding-left: 3px; }
.a-label { display: inline-block; line-height: 1.8; }
.a-lifestyle { display: flex; height: 56px; font-size: 16px; -webkit-box-align: center; align-items: center; background-color: rgb(255, 255, 255); }
.a-lifestyle-error.a-lifestyle { background-color: transparent; }
.a-lifestyle-loading { -webkit-box-pack: center; justify-content: center; }
.a-lifestyle-name-wrap { -webkit-box-flex: 1; flex: 1 1 0%; padding-left: 15px; display: flex; overflow: hidden; }
.a-lifestyle-btn.a-button { font-size: 12px; width: 39px; height: 24px; margin-top: 0px; margin-bottom: 0px; line-height: 24px; }
.a-lifestyle-name { line-height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 20px; }
.a-lifestyle-icon { width: 34px; height: 34px; margin-right: 12px; }
.a-lifestyle-btn-wrap { padding-right: 15px; }
.a-lifestyle-btn.a-button-loading { width: 44px; }
.a-lifestyle-high { height: 71px; }
.a-lifestyle-high .a-lifestyle-icon { width: 41px; height: 41px; }
.a-lifestyle-high .a-lifestyle-name-wrap { -webkit-box-align: center; align-items: center; }
.a-lifestyle-high .a-lifestyle-memo { overflow: hidden; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 48px; justify-content: space-around; }
.a-lifestyle-high .a-lifestyle-name { line-height: 24px; color: rgb(0, 0, 0); font-size: 17px; font-weight: 700; }
.a-lifestyle-high .a-lifestyle-desc { font-size: 13px; line-height: 18px; color: rgb(153, 153, 153); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-lottie { width: 100px; height: 100px; overflow: hidden; }
.a-live-player[hidden], .a-live-pusher[hidden], .a-lottie[hidden], .a-movable-area[hidden], .a-movable-view[hidden], .a-switch.a-switch-android .checkbox::before { display: none; }
.a-live-player, .a-live-pusher { width: 300px; height: 225px; display: inline-block; line-height: 0; overflow: hidden; position: relative; background-color: rgb(0, 0, 0); }
.a-map { width: 100vw; height: 100vh; }
.a-movable-area, .a-movable-view { position: relative; width: 10px; height: 10px; }
.a-movable-view { display: inline-block; position: absolute; top: 0px; left: 0px; transform-origin: center center; }
.a-picker-view { display: flex; height: 238px; -webkit-box-align: center; align-items: center; }
.a-picker-view-picker { position: relative; height: 100%; overflow: hidden; width: 100%; -webkit-box-flex: 1; flex: 1 1 0%; text-align: center; }
.a-picker-view-picker-mask { position: absolute; left: 0px; top: 0px; height: 100%; margin: 0px auto; width: 100%; z-index: 3; background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); background-position: center top, center bottom; background-size: 100% 102px; background-repeat: no-repeat; }
.a-picker-view-picker-content { position: absolute; left: 0px; top: 0px; width: 100%; z-index: 1; }
.a-picker-view-picker-item { touch-action: manipulation; text-align: center; font-size: 16px; height: 34px; line-height: 34px; color: rgb(0, 0, 0); white-space: nowrap; text-overflow: ellipsis; }
.a-picker-view-picker-indicator { box-sizing: border-box; width: 100%; height: 34px; position: absolute; left: 0px; top: 102px; z-index: 3; }
.a-picker-view-picker-indicator::after, .a-picker-view-picker-indicator::before { content: " "; position: absolute; left: 0px; right: 0px; height: 0px; transform: scaleY(0.5); }
.a-picker-view-picker-indicator::before { top: 0px; border-top: 1px solid rgb(229, 229, 229); transform-origin: 0px 0px; }
.a-picker-view-picker-indicator::after { bottom: 0px; border-bottom: 1px solid rgb(229, 229, 229); transform-origin: 0px 100%; }
.a-progress { display: flex; -webkit-box-align: center; align-items: center; }
.a-progress-container { -webkit-box-flex: 1; flex: 1 1 0%; }
.a-progress-outer { display: block; background-color: rgb(238, 238, 238); }
.a-progress-bar { height: 0px; border-bottom: 4px solid rgb(16, 142, 233); transition: all 0.3s linear 0s; }
.a-progress-info { margin-left: 10px; }
.a-radio { border-radius: 100vh; }
.a-radio-checked { border-width: 0px; }
.a-slider { display: flex; -webkit-box-align: center; align-items: center; }
.a-slider-wrapper { -webkit-box-flex: 1; flex: 1 1 0%; padding: 0px; }
.a-slider-content { position: relative; margin: 0px; padding: 10px 0px; }
.a-slider-rail { position: absolute; width: 100%; height: 2px; background-color: rgb(221, 221, 221); box-sizing: border-box; }
.a-slider-track { position: absolute; visibility: visible; left: 0px; height: 2px; border-radius: 2px; background-color: rgb(16, 142, 233); }
.a-slider-handle { position: absolute; margin-left: -12px; margin-top: -12px; width: 22px; height: 22px; cursor: pointer; border-radius: 100vh; border: 2px solid rgb(16, 142, 233); background-color: rgb(255, 255, 255); box-sizing: border-box; }
.a-slider-handle:active { background-color: rgb(64, 165, 237); box-shadow: rgb(64, 165, 237) 0px 0px 2px; }
.a-slider-disabled { opacity: 0.3; }
.a-slider-disabled .a-slider-track { height: 2px; }
.a-slider-disabled .a-slider-handle { cursor: not-allowed; box-shadow: none; }
.a-slider-presentation { min-width: 5px; font-size: 14px; color: rgb(153, 153, 153); margin-left: 8px; }
.a-slider-a11y-wrapper { position: relative; width: 100%; z-index: 1; opacity: 0.01; }
.a-slider-a11y-input, .a-switch input[type="checkbox"] { position: absolute; top: 0px; left: 0px; width: 100%; }
.a-swiper { position: relative; display: block; visibility: visible; overflow: hidden; width: 100%; height: 150px; box-sizing: border-box; }
.a-swiper-container { position: absolute; inset: 0px; }
.a-swiper-item, .a-swiper-slides { position: absolute; width: 100%; height: 100%; }
.a-swiper-slides { display: block; top: 0px; left: 0px; transition-timing-function: ease-out; }
.a-swiper-item { will-change: auto; box-sizing: border-box; overflow: hidden; }
.a-swiper-vertical .a-swiper-slides { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }
.a-swiper-indicator { position: absolute; bottom: 0px; height: 14px; width: 100%; text-align: center; -webkit-box-pack: center; justify-content: center; display: flex; transform: translate3d(0px, 0px, 0px); }
.a-swiper-dot { display: inline-block; zoom: 1; width: 4px; height: 3px; margin: 0px 2px; background: rgb(232, 232, 232); }
.a-swiper-dot-active { width: 11px; background: rgb(16, 142, 233); }
.a-switch, .a-switch .checkbox { box-sizing: border-box; z-index: 0; cursor: pointer; position: relative; }
.a-switch { display: inline-block; vertical-align: middle; align-self: center; }
.a-switch .checkbox { width: 51px; height: 31px; border-radius: 100vh; background: rgb(229, 229, 229); margin: 0px; padding: 0px; border: 0px; transition: all 300ms ease 0s; }
.a-switch .checkbox::after, .a-switch .checkbox::before { content: " "; height: 28px; border-radius: 100vh; background: rgb(255, 255, 255); position: absolute; left: 1px; top: 1px; transition: all 200ms ease 0s; }
.a-switch .checkbox::before { box-sizing: border-box; transform: scale(1); width: 48px; z-index: 1; }
.a-switch .checkbox::after { width: 28px; z-index: 2; transform: translateX(0px); box-shadow: rgba(0, 0, 0, 0.21) 2px 2px 4px; }
.a-switch .checkbox.checkbox-disabled { z-index: 3; }
.a-switch input[type="checkbox"] { opacity: 0; height: 100%; z-index: 2; border: 0px; }
.a-switch input[type="checkbox"]:checked + .checkbox, .a-switch.a-switch-android input[type="checkbox"]:checked + .checkbox { background: rgb(16, 142, 233); }
.a-switch input[type="checkbox"]:checked + .checkbox::before, .a-switch.a-switch-android input[type="checkbox"]:checked + .checkbox::before { transform: scale(0); }
.a-switch input[type="checkbox"]:checked + .checkbox::after { transform: translateX(20px); }
.a-switch input[type="checkbox"]:disabled + .checkbox { opacity: 0.3; }
.a-switch.a-switch-android .checkbox { width: 72px; height: 23px; border-radius: 3px; background: rgb(167, 170, 166); }
.a-switch.a-switch-android .checkbox::after { width: 35px; height: 21px; border-radius: 2px; box-shadow: none; left: 1px; top: 1px; }
.a-switch.a-switch-android input[type="checkbox"]:checked + .checkbox::after { transform: translateX(35px); }
.a-text-space { white-space: pre-wrap; }
.a-text-no-space { white-space: pre-line; }
.a-textarea { position: relative; background-color: rgb(255, 255, 255); padding: 2px 5px; color: rgb(0, 0, 0); font-size: 17px; height: 42px; line-height: 1.4; }
.a-textarea-wrap { position: relative; height: 100%; width: inherit; line-height: inherit; font-family: inherit; min-height: inherit; }
.a-textarea-content, .a-textarea-placeholder { height: inherit; vertical-align: middle; text-align: inherit; }
.a-textarea-placeholder { inset: 0px 0px 0px 3px; word-break: break-all; overflow-wrap: break-word; position: absolute; overflow: hidden; color: rgb(204, 204, 204); }
.a-textarea-content { position: relative; line-height: inherit; min-height: inherit; width: 100%; font-size: inherit; font-weight: inherit; color: inherit; background: 0px 0px; display: inherit; border: 0px; padding: 0px; margin: 0px; outline: 0px; overflow: inherit; text-overflow: inherit; -webkit-tap-highlight-color: transparent; resize: none; z-index: 2; }
.a-textarea-show-count { padding-bottom: 16px; }
.a-textarea-count-wrap { position: absolute; bottom: 0px; right: 5px; color: rgb(178, 178, 178); font-size: 14px; margin: 0px; }
.a-video { width: 300px; height: 225px; position: relative; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; overflow: hidden; }
.a-video-poster { position: absolute; inset: 0px; width: 100%; height: 100%; background-image: url("https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; }
.a-video-play { z-index: 1; width: 50px; height: 50px; background-image: url("https://gw.alipayobjects.com/mdn/miniapp_de/afts/img/A*DBiWS4fIefQAAAAAAAAAAABkARQnAQ"); background-size: 50px 50px; }
.a-video-con, .a-video-wrap { position: absolute; inset: 0px; width: 100%; height: 100%; border-radius: inherit; }
.a-web-view-mini { width: 100%; height: 200px; }
.a-rtc-room { width: 100vw; height: 100vh; }
AvatarName