:host{display:flex}:host>.browser{flex:1;display:flex;flex-direction:column}.browser>header{padding:0 10px;background:var(--color-normal-fill-weakest);color:var(--color-normal-contrast-weakest)}.browser>header>.left{transform:rotate(90deg)}.browser>header>.right{transform:rotate(-90deg)}.browser>header>.more{float:right}.browser>header>ui-icon{padding:0 4px;margin:0 2px;cursor:pointer}.browser>section{flex:1;display:flex;position:relative}.browser>section>webview{flex:1}.browser>section>.slider{width:260px;height:100%;position:absolute;right:0;transform:translateX(260px);transition:transform .3s;background:var(--color-normal-fill-weakest);color:var(--color-normal-contrast-weakest)}.browser>section>.slider>header{border-bottom:1px solid;padding:0 10px;line-height:30px}.browser>section>.slider>header>span{font-size:16px}.browser>section>.slider>header>ui-icon{float:right;cursor:pointer}.browser>section[slider]>webview{pointer-events:none}.browser>section[slider]>.slider{transform:translateX(0)}.package-item{display:flex;padding:10px 20px;line-height:24px}.package-item>.info{flex:1;overflow:hidden}.package-item>.info>.name{overflow:hidden;text-overflow:ellipsis}.package-item>.info>.date{padding:7px 0}.package-item>.info>.date>ui-progress{width:100%;line-height:10px}.package-item>.buttons{margin-left:6px;padding:12px 0;box-sizing:border-box}.package-item>.buttons>ui-icon{padding:0 4px;cursor:pointer}