adui/lib/tag/style/index.css

<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>

.adui-tag-base{position:relative;display:inline-block;margin-right:12px;border-radius:3px;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adui-tag-background,.adui-tag-shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:3px;overflow:hidden}.adui-tag-background{transition:background-color var(--motion-duration-base) var(--ease-in-out),opacity var(--motion-duration-base) var(--ease-in-out)}.adui-tag-shadow{transition:box-shadow var(--motion-duration-base) var(--ease-in-out)}.adui-tag-content{position:relative;z-index:1}.adui-tag-remove{margin-left:4px;fill:currentColor;transition:fill var(--motion-duration-base) var(--ease-in-out),opacity var(--motion-duration-base) var(--ease-in-out);opacity:.4;cursor:pointer}.adui-tag-remove:hover{opacity:.65;fill:currentColor}.adui-tag-remove:hover:active{opacity:.9;fill:currentColor}.adui-tag-large{padding-left:8px;font-size:var(--font-size-large);line-height:36px}.adui-tag-large .adui-tag-remove{vertical-align:calc(-0.125em - (16px - var(--font-size-large))/2)}.adui-tag-large:not(.adui-tag-removable){padding-right:8px}.adui-tag-large.adui-tag-removable{padding-right:4px}.adui-tag-large.adui-tag-round .adui-tag-background,.adui-tag-large.adui-tag-round .adui-tag-shadow{border-radius:36px}.adui-tag-medium{padding-left:8px;font-size:var(--font-size-medium);line-height:30px}.adui-tag-medium .adui-tag-remove{vertical-align:calc(-0.125em - (16px - var(--font-size-medium))/2)}.adui-tag-medium:not(.adui-tag-removable){padding-right:8px}.adui-tag-medium.adui-tag-removable{padding-right:4px}.adui-tag-medium.adui-tag-round .adui-tag-background,.adui-tag-medium.adui-tag-round .adui-tag-shadow{border-radius:30px}.adui-tag-small{padding-left:6px;font-size:var(--font-size-small);line-height:26px}.adui-tag-small .adui-tag-remove{vertical-align:calc(-0.125em - (16px - var(--font-size-small))/2)}.adui-tag-small:not(.adui-tag-removable){padding-right:6px}.adui-tag-small.adui-tag-removable{padding-right:4px}.adui-tag-small.adui-tag-round .adui-tag-background,.adui-tag-small.adui-tag-round .adui-tag-shadow{border-radius:26px}.adui-tag-mini{padding-left:4px;padding-right:4px;font-size:var(--font-size-mini);line-height:22px}.adui-tag-mini .adui-tag-remove{vertical-align:calc(-0.125em - (16px - var(--font-size-mini))/2)}.adui-tag-mini:not(.adui-tag-removable){padding-right:4px}.adui-tag-mini.adui-tag-removable{padding-right:2px}.adui-tag-mini.adui-tag-round .adui-tag-background,.adui-tag-mini.adui-tag-round .adui-tag-shadow{border-radius:22px}.adui-tag-normal{color:var(--gray-900)}.adui-tag-normal .adui-tag-shadow{box-shadow:0 0 0 1px var(--gray-700);opacity:.25}.adui-tag-interactive{transition:all var(--motion-duration-base) var(--ease-in-out);cursor:pointer}.adui-tag-interactive.adui-tag-normal .adui-tag-background{opacity:0}.adui-tag-interactive.adui-tag-normal:hover .adui-tag-background{opacity:.02;background-color:#000}.adui-tag-interactive.adui-tag-normal:hover .adui-tag-shadow{opacity:.35;box-shadow:0 0 0 1px #a3a3a3}.adui-tag-interactive.adui-tag-normal:hover:active .adui-tag-background{opacity:.05;background-color:#000}.adui-tag-interactive.adui-tag-normal:hover:active .adui-tag-shadow{opacity:.35;box-shadow:0 0 0 1px #a3a3a3}.adui-tag-light{margin-right:4px}.adui-tag-light.adui-tag-normal:hover .adui-tag-remove{fill:var(--gray-600)}.adui-tag-light.adui-tag-normal .adui-tag-remove{fill:var(--gray-500);opacity:1}.adui-tag-light.adui-tag-normal .adui-tag-remove:hover{fill:var(--gray-700)}.adui-tag-light .adui-tag-background{background-color:currentColor;opacity:0}.adui-tag-light:hover .adui-tag-background{opacity:.06}.adui-tag-colored:not(.adui-tag-light) .adui-tag-background,.adui-tag-primary:not(.adui-tag-light) .adui-tag-background,.adui-tag-success:not(.adui-tag-light) .adui-tag-background,.adui-tag-warning:not(.adui-tag-light) .adui-tag-background,.adui-tag-danger:not(.adui-tag-light) .adui-tag-background{background-color:currentColor;opacity:.03}.adui-tag-colored:not(.adui-tag-light) .adui-tag-shadow,.adui-tag-primary:not(.adui-tag-light) .adui-tag-shadow,.adui-tag-success:not(.adui-tag-light) .adui-tag-shadow,.adui-tag-warning:not(.adui-tag-light) .adui-tag-shadow,.adui-tag-danger:not(.adui-tag-light) .adui-tag-shadow{box-shadow:0 0 0 1px currentColor;opacity:.25}.adui-tag-colored.adui-tag-interactive:hover .adui-tag-background,.adui-tag-primary.adui-tag-interactive:hover .adui-tag-background,.adui-tag-success.adui-tag-interactive:hover .adui-tag-background,.adui-tag-warning.adui-tag-interactive:hover .adui-tag-background,.adui-tag-danger.adui-tag-interactive:hover .adui-tag-background{opacity:.06}.adui-tag-colored.adui-tag-interactive:hover .adui-tag-shadow,.adui-tag-primary.adui-tag-interactive:hover .adui-tag-shadow,.adui-tag-success.adui-tag-interactive:hover .adui-tag-shadow,.adui-tag-warning.adui-tag-interactive:hover .adui-tag-shadow,.adui-tag-danger.adui-tag-interactive:hover .adui-tag-shadow{opacity:.35}.adui-tag-colored.adui-tag-interactive:hover:active .adui-tag-background,.adui-tag-primary.adui-tag-interactive:hover:active .adui-tag-background,.adui-tag-success.adui-tag-interactive:hover:active .adui-tag-background,.adui-tag-warning.adui-tag-interactive:hover:active .adui-tag-background,.adui-tag-danger.adui-tag-interactive:hover:active .adui-tag-background{opacity:.12}.adui-tag-colored.adui-tag-interactive:hover:active .adui-tag-shadow,.adui-tag-primary.adui-tag-interactive:hover:active .adui-tag-shadow,.adui-tag-success.adui-tag-interactive:hover:active .adui-tag-shadow,.adui-tag-warning.adui-tag-interactive:hover:active .adui-tag-shadow,.adui-tag-danger.adui-tag-interactive:hover:active .adui-tag-shadow{opacity:.35}.adui-tag-primary{color:var(--primary-color)}.adui-tag-success{color:var(--ad-green)}.adui-tag-warning{color:var(--ad-orange)}.adui-tag-danger{color:var(--ad-red)}