adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 3.95 kB
CSS
.adui-nav-wrapper{background-color:#fff;overflow:auto}@supports(overflow: overlay){.adui-nav-wrapper{overflow:overlay}}.adui-nav-wrapper::-webkit-scrollbar{width:14px;height:14px}.adui-nav-wrapper::-webkit-scrollbar-thumb{min-width:14px;min-height:14px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:4px solid rgba(0,0,0,0);border-radius:14px}.adui-nav-wrapper::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4)}.adui-nav-wrapper::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.65)}.adui-nav-item{position:relative;display:flex;align-items:center;padding-left:28px;color:var(--transparent-gray-900);cursor:pointer;transition:all var(--motion-duration-base) var(--ease-out)}.adui-nav-item:not(.adui-nav-item_disabled):hover{background-color:var(--transparent-gray-200)}.adui-nav-item:not(.adui-nav-item_disabled):active{background-color:var(--transparent-gray-300)}.adui-nav-item::before{content:"";position:absolute;top:50%;left:0;width:3px;height:20px;background-color:var(--primary-color);transform:translateY(-50%) scaleX(0);transform-origin:0 0;transition:all var(--motion-duration-base) var(--ease-in-out)}.adui-nav-item a{position:absolute;top:0;left:0;display:flex;align-items:center;width:100%;height:100%;padding-left:inherit;color:inherit;text-decoration:none}.adui-nav-icon{flex:none;margin-right:8px;fill:var(--transparent-gray-800)}.adui-nav-item_selected{color:var(--primary-color);font-weight:500}.adui-nav-item_selected::before{transform:translateY(-50%) scaleX(1)}.adui-nav-item_selected .adui-nav-icon{fill:currentColor}.adui-nav-item_disabled{color:var(--transparent-gray-600);cursor:not-allowed}.adui-nav-item_disabled::before{background-color:currentColor}.adui-nav-item_disabled .adui-nav-icon{fill:currentColor}.adui-nav-divider{margin-top:20px;margin-bottom:20px;height:1px;background-color:var(--transparent-gray-200)}.adui-nav-sub .adui-nav-item{padding-left:40px}.adui-nav-sub .adui-nav-sub .adui-nav-subTitle{padding-left:52px}.adui-nav-sub .adui-nav-sub .adui-nav-item{padding-left:64px}.adui-nav-sub .adui-nav-sub .adui-nav-sub .adui-nav-subTitle{padding-left:64px}.adui-nav-group .adui-nav-item{padding-left:40px}.adui-nav-group .adui-nav-group .adui-nav-group-title{padding-left:52px}.adui-nav-group .adui-nav-group .adui-nav-item{padding-left:64px}.adui-nav-group .adui-nav-group .adui-nav-group .adui-nav-group-title{padding-left:64px}.adui-nav-group-title{position:relative;padding-left:28px;line-height:36px;color:var(--transparent-gray-700)}.adui-nav-mini{font-size:var(--font-size-mini)}.adui-nav-mini .adui-nav-item,.adui-nav-mini .adui-nav-subTitle{height:32px}.adui-nav-small{font-size:var(--font-size-small)}.adui-nav-small .adui-nav-item,.adui-nav-small .adui-nav-subTitle{height:36px}.adui-nav-medium{font-size:var(--font-size-medium)}.adui-nav-medium .adui-nav-item,.adui-nav-medium .adui-nav-subTitle{height:40px}.adui-nav-large{font-size:var(--font-size-large)}.adui-nav-large .adui-nav-item,.adui-nav-large .adui-nav-subTitle{height:48px}.adui-nav-subTitle{position:relative;display:flex;align-items:center;padding-left:28px;padding-right:16px;color:var(--transparent-gray-900);transition:all var(--motion-duration-base) var(--ease-out)}.adui-nav-subTitle:not(.adui-nav-subTitle-disabled){cursor:pointer}.adui-nav-subTitle:not(.adui-nav-subTitle-disabled):hover{background-color:var(--transparent-gray-200)}.adui-nav-subTitle:not(.adui-nav-subTitle-disabled):active{background-color:var(--transparent-gray-300)}.adui-nav-subTitle-disabled{cursor:not-allowed;color:var(--transparent-gray-600)}.adui-nav-subTitle-disabled .adui-nav-icon{fill:currentColor}.adui-nav-arrow{flex:none;fill:var(--transparent-gray-600);margin-left:10px;transition:all var(--motion-duration-base) var(--ease-in-out);transform:rotate(180deg)}.adui-nav-subTitleContent{flex:1}.adui-nav-open>.adui-nav-subTitle .adui-nav-arrow{fill:var(--transparent-gray-800);transform:rotate(0deg)}