Files
xhs-examples/xhs-mini-demos/entry/component/component.skeleton.css
2025-09-14 00:21:54 +08:00

27 lines
18 KiB
CSS

.skeleton-text-block-mark, .skeleton-text-block-mark * { background-origin: content-box; background-clip: content-box; background-repeat: repeat-y; background-color: transparent !important; color: transparent !important; }.sk-pseudo::before, .sk-pseudo::after { background: none rgb(238, 238, 238) !important; color: transparent !important; border-color: transparent !important; border-radius: 0px !important; }.sk-button { box-shadow: none !important; }.sk-transparent::before, .sk-transparent::after { opacity: 0 !important; }.sk-animation-shine-2 { background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 20%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%) 0% 0% / 400% 100%; animation-name: sk-shine-2; animation-duration: 1.4s; animation-timing-function: ease; animation-iteration-count: infinite; }@keyframes sk-shine-2 {
0% { background-position: 100% 50%; }
100% { background-position: 0px 50%; }
}
html { width: 100%; height: 100%; }body { margin: 0px; width: 100%; height: 100%; scroll-behavior: smooth; overflow-x: hidden; }* { text-size-adjust: none; }page { min-width: 100vw; min-height: 100vh; display: block; }
view { display: block; }video { display: inline-block; width: 100%; height: 100%; }.xgplayer div.gradient { background-image: none; }.xgplayer-mobile xg-controls.xgplayer-controls { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)); }.xgplayer .flex-controls xg-inner-controls.xg-inner-controls { bottom: 4px; }.xhs-ios-native-input { overflow: scroll; position: absolute; inset: 0px; }input { position: relative; cursor: auto; display: block; height: 22px; text-overflow: clip; overflow: hidden; white-space: nowrap; margin: 0px; }input .web-input { position: relative; min-height: 22px; text-overflow: inherit; border: none; font-size: inherit; font-weight: inherit; color: inherit; padding: 0px; margin: 0px; outline: none; text-align: inherit; -webkit-tap-highlight-color: transparent; }input .web-input div { position: absolute; inset: 0px; margin: auto; min-height: 22px; white-space: pre; text-align: inherit; overflow: hidden; vertical-align: middle; }input input { position: relative; border: none; height: inherit; width: 100%; font-size: inherit; font-weight: inherit; color: inherit; background: transparent; display: inherit; padding: 0px; margin: 0px; outline: none; vertical-align: middle; text-align: inherit; overflow: inherit; white-space: inherit; text-overflow: inherit; -webkit-tap-highlight-color: transparent; z-index: 1; }.xhs-inner-input-placeholder { color: rgb(153, 153, 153); }map { display: block; position: relative; }map .tmap-scale-text { display: var(--map-showScale, block); }map .tmap-scale-line { display: var(--map-showScale, block); }map .rotate-circle { display: var(--map-showCompass, block); }map img { display: inline; }map .logo-text { display: none; }map a[target="_blank"] { display: none; }map .tmap-zoom-control { display: none; }map > * { z-index: 1099; position: absolute !important; }camera { display: block; position: relative; }.xhs-i-n-c { overflow: scroll; position: absolute; inset: 0px; }
.xhs_0__ma2 { margin: 4px; }.xhs_0__mx2 { margin: 0px 4px; }.xhs_0__my2 { margin: 4px 0px; }.xhs_0__mt2 { margin-top: 4px; }.xhs_0__mb2 { margin-bottom: 4px; }.xhs_0__ml2 { margin-left: 4px; }.xhs_0__mr2 { margin-right: 4px; }.xhs_0__pa2 { padding: 4px; }.xhs_0__px2 { padding: 0px 4px; }.xhs_0__py2 { padding: 4px 0px; }.xhs_0__pt2 { padding-top: 4px; }.xhs_0__pb2 { padding-bottom: 4px; }.xhs_0__pl2 { padding-left: 4px; }.xhs_0__pr2 { padding-right: 4px; }.xhs_0__ma4 { margin: 8px; }.xhs_0__mx4 { margin: 0px 8px; }.xhs_0__my4 { margin: 8px 0px; }.xhs_0__mt4 { margin-top: 8px; }.xhs_0__mb4 { margin-bottom: 8px; }.xhs_0__ml4 { margin-left: 8px; }.xhs_0__mr4 { margin-right: 8px; }.xhs_0__pa4 { padding: 8px; }.xhs_0__px4 { padding: 0px 8px; }.xhs_0__py4 { padding: 8px 0px; }.xhs_0__pt4 { padding-top: 8px; }.xhs_0__pb4 { padding-bottom: 8px; }.xhs_0__pl4 { padding-left: 8px; }.xhs_0__pr4 { padding-right: 8px; }.xhs_0__ma6 { margin: 12px; }.xhs_0__mx6 { margin: 0px 12px; }.xhs_0__my6 { margin: 12px 0px; }.xhs_0__mt6 { margin-top: 12px; }.xhs_0__mb6 { margin-bottom: 12px; }.xhs_0__ml6 { margin-left: 12px; }.xhs_0__mr6 { margin-right: 12px; }.xhs_0__pa6 { padding: 12px; }.xhs_0__px6 { padding: 0px 12px; }.xhs_0__py6 { padding: 12px 0px; }.xhs_0__pt6 { padding-top: 12px; }.xhs_0__pb6 { padding-bottom: 12px; }.xhs_0__pl6 { padding-left: 12px; }.xhs_0__pr6 { padding-right: 12px; }.xhs_0__ma8 { margin: 16px; }.xhs_0__mx8 { margin: 0px 16px; }.xhs_0__my8 { margin: 16px 0px; }.xhs_0__mt8 { margin-top: 16px; }.xhs_0__mb8 { margin-bottom: 16px; }.xhs_0__ml8 { margin-left: 16px; }.xhs_0__mr8 { margin-right: 16px; }.xhs_0__pa8 { padding: 16px; }.xhs_0__px8 { padding: 0px 16px; }.xhs_0__py8 { padding: 16px 0px; }.xhs_0__pt8 { padding-top: 16px; }.xhs_0__pb8 { padding-bottom: 16px; }.xhs_0__pl8 { padding-left: 16px; }.xhs_0__pr8 { padding-right: 16px; }.xhs_0__ma10 { margin: 20px; }.xhs_0__mx10 { margin: 0px 20px; }.xhs_0__my10 { margin: 20px 0px; }.xhs_0__mt10 { margin-top: 20px; }.xhs_0__mb10 { margin-bottom: 20px; }.xhs_0__ml10 { margin-left: 20px; }.xhs_0__mr10 { margin-right: 20px; }.xhs_0__pa10 { padding: 20px; }.xhs_0__px10 { padding: 0px 20px; }.xhs_0__py10 { padding: 20px 0px; }.xhs_0__pt10 { padding-top: 20px; }.xhs_0__pb10 { padding-bottom: 20px; }.xhs_0__pl10 { padding-left: 20px; }.xhs_0__pr10 { padding-right: 20px; }.xhs_0__ui-input { background-color: rgba(51, 51, 51, 0.024); border-radius: 18px; padding: 9px 16px; }.xhs_0__ui-textarea { background-color: rgba(0, 0, 0, 0.04); border-radius: 8px; padding: 14px 12px; }.xhs_0__ui-button { background-color: rgb(255, 36, 66); color: white; }.xhs_0__ui-button-hover { background-color: rgba(255, 36, 66, 0.7); color: white; }.xhs_0__ui-button-hover::after { border: none; }picker { border: 1px solid rgb(238, 238, 238); border-radius: 5px; }button { height: 40px; border-radius: 1000px; font-size: 16px; font-weight: 500; line-height: 40px; }button::after { border: none; }.xhs_0_button-hover::after { border: none; }textarea { padding: 0px; }.xhs_0_xhs-inner-switch-control-switch::after { background-color: aqua; }picker { border: none; }radio * { display: flex; }checkbox * { display: flex; }slider > div > div > div > div:nth-child(2) { width: 16px !important; height: 16px !important; margin-top: -8px !important; margin-left: -8px !important; }:root { --xhs-theme-color: red; }.xhs_0__cred { color: var(--xhs-theme-color); }.xhs_0__bcred { background-color: var(--xhs-theme-color); color: white; }.xhs_0__dflex { display: flex; }.xhs_0__fd_column { flex-direction: column; }.xhs_0__jc_space-around { justify-content: space-around; }.xhs_0__jc_center { justify-content: center; }.xhs_0__jc_space-between { justify-content: space-between; }.xhs_0__ai_center { align-items: center; }.xhs_0__flex_1 { flex: 1 1 0%; }.xhs_0__text_wrap { word-break: break-all; }.xhs_0__end_split { position: relative; border: 0px; }.xhs_0__end_split::after { content: ""; position: absolute; bottom: 0px; height: 1px; background: rgb(235, 235, 235); left: 0px; right: 0px; }.xhs_0__ui-space > * { margin-bottom: 20px; }.xhs_0__ui-space > :last-child { margin-bottom: 0px; }* { box-sizing: border-box; margin: 0px; padding: 0px; }html, body { height: 100%; font-family: -apple-system-font, "Helvetica Neue", Helvetica, sans-serif; font-size: 100px; color: rgb(51, 51, 51); }.xhs_0_container { font-size: 0.14rem; overflow: hidden; }
html, body { background-color: rgb(239, 241, 242); font-size: 100px; }.xhs_0_wrap { padding-bottom: 0.5rem; font-size: 0.16rem; }.xhs_0_container { font-size: 0.16rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }.xhs_0_radio { display: block; margin: 0px 0.17rem; padding: 0.17rem 0px; background-color: rgb(255, 255, 255); }.xhs_0_block { display: block; margin: 0px 0.17rem; padding: 0.17rem 0px; background-color: rgb(255, 255, 255); }.xhs_0_item-scroll { display: flex; margin: 0px 0.17rem; justify-content: space-between; }.xhs_0_card-area { overflow: hidden; margin: 0.17rem 0.17rem 0px; border-radius: 6px; background: rgb(255, 255, 255); }.xhs_0_display-area { display: flex; flex-direction: column; height: 2.18rem; text-align: center; border-radius: 8px; background: rgb(255, 255, 255); align-items: center; justify-content: center; }.xhs_0_display-area-image { width: 100%; height: 2.2rem; text-align: center; border-radius: 8px 8px 0px 0px; }.xhs_0_description { height: 0.46rem; padding-left: 0.17rem; line-height: 0.46rem; }.xhs_0_top-description { display: flex; padding: 0.16rem 0.17rem; font-family: PingFangSC-Medium; justify-content: space-between; }.xhs_0_top-description :first-child { width: 2.93rem; font-size: 0.15rem; }.xhs_0_top-description :nth-child(2) { width: 2.45rem; font-family: PingFangSC-Regular; font-size: 0.13rem; text-align: right; color: rgb(153, 153, 153); }.xhs_0_mode-title { display: flex; font-family: PingFangSC-Medium; font-size: 0.16rem; color: rgb(0, 0, 0); align-items: center; justify-content: center; }.xhs_0_mode-title-first { margin-top: 0.2rem; }.xhs_0_mode-title-text { margin: 0px 0.12rem; }.xhs_0_mode-title-line-left { width: 0.23rem; height: 1px; border-radius: 3px; background-image: linear-gradient(90deg, rgb(245, 245, 245) 0%, rgb(213, 213, 213) 100%); }.xhs_0_mode-title-line-right { width: 0.23rem; height: 1px; border-radius: 3px; background-image: linear-gradient(-90deg, rgb(245, 245, 245) 0%, rgb(213, 213, 213) 100%); }.xhs_0_result-area { display: flex; flex-direction: column; height: 1.3rem; align-items: center; justify-content: center; }.xhs_0_result-area-fail { width: 2.4rem; margin: 0px auto; font-size: 0.24rem; text-align: center; color: rgb(247, 83, 79); }.xhs_0_result-area-default { width: 2.4rem; margin: 0px auto; font-size: 0.24rem; text-align: center; color: rgb(0, 0, 0); }.xhs_0_result-area-succ { width: 2.4rem; margin: 0px auto; font-size: 0.24rem; text-align: center; color: rgb(51, 136, 255); }.xhs_0_result-area-tips { margin-top: 0.08rem; font-size: 0.14rem; color: rgb(153, 153, 153); }.xhs_0_button-group { margin: 0.3rem 0px 0.2rem; }swan-button { margin: 0.2rem 0.23rem; font-size: 0.18rem; line-height: 0.44rem; }.xhs_0_flex-button { position: fixed; bottom: 0px; left: 0px; width: 100%; background-color: rgb(255, 255, 255); }.xhs_0_list-area { margin: 0px 0.17rem; padding: 0.14rem 0px; font-family: PingFangSC-Regular; color: rgb(51, 51, 51); }.xhs_0_list-item-key-4 { display: inline-block; width: 1rem; overflow-wrap: break-word; }.xhs_0_list-item-key-6 { display: inline-block; width: 1.2rem; overflow-wrap: break-word; }.xhs_0_list-item-value { display: inline-block; width: 2.2rem; vertical-align: middle; word-break: break-all; }.xhs_0_option-active { background: rgb(242, 242, 242); }.xhs_0_tip-week { margin: 0px 0.14rem 0.18rem; font-size: 0.12rem; line-height: 0.2rem; text-align: center; color: rgb(153, 153, 153); }.xhs_0_tip-strong { padding: 0.11rem 0.23rem; font-size: 0.1rem; text-align: center; color: rgb(238, 130, 58); border-radius: 8px 8px 0px 0px; background-color: rgb(255, 249, 227); }.xhs_0_result-item { display: flex; align-items: center; }.xhs_0_result-item:not(:last-of-type) { margin-bottom: 0.24rem; }.xhs_0_result-item-key-4 { width: 0.66rem; color: rgb(51, 51, 51); }.xhs_0_result-item-key-6 { width: 0.9rem; color: rgb(51, 51, 51); }.xhs_0_result-item-value { width: 2.5rem; margin-left: 0.19rem; word-break: break-all; }.xhs_0_result-item-value-err { color: rgb(153, 153, 153); }.xhs_0_page-title { margin: 1rem 0px 0.3rem; text-align: center; }.xhs_0_page-title-line { width: 0.83rem; height: 0.02rem; margin: 0px auto; background-color: rgb(230, 230, 230); }.xhs_0_page-title-text { margin-top: 0.07rem; color: rgb(204, 204, 204); }.xhs_0_page-top { margin-top: 0.36rem; text-align: center; }.xhs_0_page-top-line { position: relative; width: 0.54rem; height: 0.01rem; margin: 0px auto; border: 0px; background-color: rgb(151, 151, 151); }.xhs_0_page-top-text { margin-bottom: 0.1rem; color: rgb(153, 153, 153); }.xhs_0_border-top { position: relative; border: 0px; }.xhs_0_border-top::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; background: rgb(230, 230, 230); transform-origin: 0px 0px; }.xhs_0_border-right { position: relative; }.xhs_0_border-right::after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 1px; background: rgb(230, 230, 230); transform-origin: 100% 0px; }.xhs_0_border-bottom { position: relative; border: 0px; }.xhs_0_border-bottom::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 1px; background: rgb(230, 230, 230); transform-origin: 0px 100%; }.xhs_0_border-left { position: relative; border: 0px; }.xhs_0_border-left::before { content: ""; position: absolute; top: 0px; left: 0px; width: 1px; height: 100%; background: rgb(230, 230, 230); transform-origin: left center; }.xhs_0_border-all { position: relative; border: 0px; }.xhs_0_border-all::before { content: ""; position: absolute; inset: 0px; box-sizing: border-box; border: 1px solid rgb(230, 230, 230); font-size: 0px; line-height: 0; border-radius: 0px; background: 0px 0px; transform-origin: 0px 0px; }.xhs_0_title { padding: 0.3rem 0.22rem 0.18rem; font-size: 0.15rem; color: rgb(102, 102, 102); }swan-button[type="primary"] { background: rgb(51, 136, 255); }@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all {
.xhs_0_border-top::before, .xhs_0_border-bottom::after { transform: scaleY(0.666667); }
.xhs_0_border-right::after, .xhs_0_border-left::before { transform: scaleX(0.666667); }
.xhs_0_border-all::before { width: 150%; height: 150%; transform: scale(0.666667); }
}@media only screen and (-webkit-min-device-pixel-ratio: 2), not all {
.xhs_0_border-top::before, .xhs_0_border-bottom::after { transform: scaleY(0.5); }
.xhs_0_border-right::after, .xhs_0_border-left::before { transform: scaleX(0.5); }
.xhs_0_border-all::before { width: 200%; height: 200%; transform: scale(0.48); }
}@media only screen and (-webkit-min-device-pixel-ratio: 3), not all {
.xhs_0_border-top::before, .xhs_0_border-bottom::after { transform: scaleY(0.333333); }
.xhs_0_border-right::after, .xhs_0_border-left::before { transform: scaleX(0.333333); }
.xhs_0_border-all::before { width: 300%; height: 300%; transform: scale(0.3326); }
}@media screen and (min-width: 320px) {
html { font-size: 77.2946px; }
}@media screen and (min-width: 375px) {
html { font-size: 90.5797px; }
}@media screen and (min-width: 414px) {
html { font-size: 100px; }
}.xhs_0_card-area { margin: 0px; }.xhs_0_top-bar view { z-index: 999; background-color: rgb(239, 241, 242); }.xhs_0_fixTopBar { width: 100%; position: fixed; height: 53px; }.xhs_0_fixTopBarBlock { width: 100%; position: fixed; top: 0px; }.xhs_0_fixTopBarText { font-family: PingFangSC-Medium; font-size: 0.18rem; color: rgb(0, 0, 0); text-align: center; line-height: 0.18rem; }.xhs_0_flex { height: 0.53rem; font-size: 0.16rem; display: flex; justify-content: center; align-items: center; }.xhs_0_group { font-size: 0.15rem; padding-bottom: 20px; }.xhs_0_group-hd { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0.58rem; }.xhs_0_group-hd-txt { color: rgb(153, 153, 153); margin-top: 0.1rem; letter-spacing: 0.05rem; }.xhs_0_item-border-bottom::after { content: ""; position: absolute; width: 100%; height: 1px; left: 0px; bottom: 0px; transform-origin: 0px 100%; background: rgb(230, 230, 230); }.xhs_0_group-logo { width: 1.99rem; }.xhs_0_group-desc { text-align: center; color: rgb(153, 153, 153); margin-top: 0.14rem; line-height: 1.6; }.xhs_0_group-bd { border-top: 7px solid rgb(245, 245, 245); background: rgb(255, 255, 255); }.xhs_0_group-bd:last-child { border-bottom: 0.25rem solid rgb(245, 245, 245); }.xhs_0_item { padding: 0.2rem 0px; position: relative; display: flex; align-items: center; }.xhs_0_border-bottom { border: 0px; margin: 0px 0.17rem; }.xhs_0_item-logo { display: inline-block; width: 24px; height: 24px; }.xhs_0_item-desc { font-size: 14px; font-weight: 400; margin-left: 8px; color: rgb(0, 0, 0); }.xhs_0_item-toggle { position: absolute; right: 0px; width: 12px; height: auto; }.xhs_0_item-toggle-extend { position: absolute; right: 0px; width: auto; height: 12px !important; }.xhs_0_sub-item { position: relative; padding: 16px 0px 16px 32px; display: flex; align-items: center; font-size: 13px; color: rgb(68, 68, 68); }.xhs_0_sub-item:last-child::after { height: 0px; }.xhs_0_sub-item-goto { position: absolute; right: 0.23rem; }.xhs_0_sub-item-desc-tra { margin-left: 0.17rem; color: rgb(153, 153, 153); }.xhs_0_sub-item-desc { font-size: 14px; }.xhs_0_search { width: 100%; position: absolute; padding: 0px 16px; z-index: 1; bottom: 0px; }.xhs_0_search-box { position: relative; display: flex; height: 44px; font-size: 0.14rem; color: rgb(204, 204, 204); border-radius: 100px; background-color: rgb(255, 255, 255); align-items: center; }.xhs_0_search-box::before { content: ""; position: absolute; top: 0px; left: 0px; box-sizing: border-box; width: 200%; height: 200%; border: 1px solid rgb(230, 230, 230); border-radius: 100px; transform: scale(0.5); transform-origin: 0px 0px; pointer-events: none; }.xhs_0_search-icon { width: 0.18rem; height: 0.18rem; margin: 0px 0.08rem 0px 0.24rem; background: url("https://b.bdstatic.com/searchbox/icms/searchbox/img/search.png") center center / contain no-repeat; }.xhs_0_search-icon image { width: 100%; height: 100%; }.xhs_0_hover { position: relative; }.xhs_0_hover::after { content: ""; position: absolute; inset: 5px 0px; background-color: rgba(255, 255, 255, 0.7); border-radius: 5px; }.xhs_0_page { position: relative; height: 100vh; width: 100vw; }.xhs_0_head-bg { position: relative; }.xhs_0_head-bg-logo { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; z-index: 1; }.xhs_0_head-bg-logo > view { font-size: 16px; font-weight: 400; line-height: 20px; color: rgba(255, 255, 255, 0.7); margin-top: 12px; }.xhs_0_head-bg-img { width: 100%; }.xhs_0_card-container { padding: 24px 16px 16px; }.xhs_0_card-content { background-color: white; border-radius: 12px; }.xhs_0_card-item { padding: 18px 0px; position: relative; display: flex; align-items: center; margin: 0px 16px; font-size: 14px; font-weight: 400; }.xhs_0_card-item::after { content: ""; position: absolute; bottom: 0px; height: 1px; background: rgb(239, 239, 239); left: 0px; right: 0px; }.xhs_0_card-item-last::after { content: ""; height: 0px; display: none; }.xhs_0_card-item-extend { margin: 0px 16px; }
::-webkit-scrollbar { width: 1px; }::-webkit-scrollbar-track { background: rgb(241, 241, 241); }::-webkit-scrollbar-thumb { background: rgb(136, 136, 136); }