1 line
8.1 KiB
CSS
1 line
8.1 KiB
CSS
.tool-container,.tool-item{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.btn-jq-toolbar{background:#57c7d4;width:38px;height:38px;border:1px solid transparent;text-align:center;padding:8px;line-height:1;border-radius:2px;display:block;-webkit-transition:0.15s linear;transition:0.15s linear}.btn-jq-toolbar > i{color:#fff;font-size:20px}.btn-jq-toolbar:hover{background:#77d2dc;border-color:#77d2dc;cursor:pointer}.btn-jq-toolbar:hover > i{color:#fff}.btn-primary.pressed{background-color:#52d3c7;border-color:#52d3c7}.btn-danger.pressed{border-color:#fa8181;background-color:#fa8181}.btn-warning.pressed{border-color:#fbb264;background-color:#fbb264}.btn-info.pressed{border-color:#65bdf8;background-color:#65bdf8}.btn-success.pressed{border-color:#16d17f;background-color:#16d17f}.btn-purple.pressed{border-color:#a282e3;background-color:#a282e3}.btn-secondary.pressed{border-color:#e4e7ea;background-color:#e4e7ea}.btn-dark.pressed{border-color:#515d70;background-color:#515d70}.tool-container{background-color:#57c7d4;background-size:100% 100%;border-radius:2px;position:absolute}.tool-container.tool-top,.tool-container.tool-bottom{height:40px;border-bottom:0 solid #57c7d4}.tool-container.tool-top .tool-item,.tool-container.tool-bottom .tool-item{float:left;border-right:0;border-left:0}.tool-item{height:100%;display:block;width:20px;height:20px;text-align:center;padding:10px;transition:none}.tool-item > i{color:#fff;}.tool-item>.feather{color:#b2c6cd;font-size:18px}.tool-item.selected,.tool-item:hover{background:#77d2dc}.tool-item.selected>.feather,.tool-item:hover>.feather{color:#fff}.tool-top .tool-item:first-child:hover,.tool-bottom .tool-item:first-child:hover{border-top-left-radius:2px;border-bottom-left-radius:2px}.tool-top .tool-item:last-child:hover,.tool-bottom .tool-item:last-child:hover{border-top-right-radius:2px;border-bottom-right-radius:2px}.tool-vertical-top .tool-item:first-child:hover,.tool-vertical-bottom .tool-item:first-child:hover,.tool-right .tool-item:first-child:hover,.tool-left .tool-item:first-child:hover{border-top-left-radius:2px;border-top-right-radius:2px}.tool-vertical-top .tool-item:last-child:hover,.tool-vertical-bottom .tool-item:last-child:hover,.tool-right .tool-item:last-child:hover,.tool-left .tool-item:last-child:hover{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.tool-container .arrow{width:0;height:0;position:absolute;border-width:7px;border-style:solid}.tool-container.tool-top .arrow{border-color:#57c7d4 transparent transparent;left:50%;bottom:-14px;margin-left:-7px}.tool-container.tool-bottom .arrow{border-color:transparent transparent #57c7d4;left:50%;top:-14px;margin-left:-7px}.tool-container.tool-left .arrow{border-color:transparent transparent transparent #57c7d4;top:50%;right:-14px;margin-top:-7px}.tool-container.tool-right .arrow{border-color:transparent #57c7d4 transparent transparent;top:50%;left:-14px;margin-top:-7px}.toolbar-primary{background-color:#33cabb}.toolbar-primary.tool-top .arrow{border-color:#33cabb transparent transparent}.toolbar-primary.tool-bottom .arrow{border-color:transparent transparent #33cabb}.toolbar-primary.tool-left .arrow{border-color:transparent transparent transparent #33cabb}.toolbar-primary.tool-right .arrow{border-color:transparent #33cabb transparent transparent}.toolbar-primary .tool-item>.feather{color:#fff}.toolbar-primary .tool-item.selected,.toolbar-primary .tool-item:hover{background:#52d3c7;color:#fff}.toolbar-danger{background-color:#f96868}.toolbar-danger.tool-top .arrow{border-color:#f96868 transparent transparent}.toolbar-danger.tool-bottom .arrow{border-color:transparent transparent #f96868}.toolbar-danger.tool-left .arrow{border-color:transparent transparent transparent #f96868}.toolbar-danger.tool-right .arrow{border-color:transparent #f96868 transparent transparent}.toolbar-danger .tool-item>.feather{color:#fff}.toolbar-danger .tool-item.selected,.toolbar-danger .tool-item:hover{background:#fa8181;color:#fff}.toolbar-warning{background-color:#faa64b}.toolbar-warning.tool-top .arrow{border-color:#faa64b transparent transparent}.toolbar-warning.tool-bottom .arrow{border-color:transparent transparent #faa64b}.toolbar-warning.tool-left .arrow{border-color:transparent transparent transparent #faa64b}.toolbar-warning.tool-right .arrow{border-color:transparent #faa64b transparent transparent}.toolbar-warning .tool-item>.feather{color:#fff}.toolbar-warning .tool-item.selected,.toolbar-warning .tool-item:hover{background:#fbb264;color:#fff}.toolbar-info{background-color:#48b0f7}.toolbar-info.tool-top .arrow{border-color:#48b0f7 transparent transparent}.toolbar-info.tool-bottom .arrow{border-color:transparent transparent #48b0f7}.toolbar-info.tool-left .arrow{border-color:transparent transparent transparent #48b0f7}.toolbar-info.tool-right .arrow{border-color:transparent #48b0f7 transparent transparent}.toolbar-info .tool-item>.feather{color:#fff}.toolbar-info .tool-item.selected,.toolbar-info .tool-item:hover{background:#65bdf8;color:#fff}.toolbar-success{background-color:#15c377}.toolbar-success.tool-top .arrow{border-color:#15c377 transparent transparent}.toolbar-success.tool-bottom .arrow{border-color:transparent transparent #15c377}.toolbar-success.tool-left .arrow{border-color:transparent transparent transparent #15c377}.toolbar-success.tool-right .arrow{border-color:transparent #15c377 transparent transparent}.toolbar-success .tool-item>.feather{color:#fff}.toolbar-success .tool-item.selected,.toolbar-success .tool-item:hover{background:#16d17f;color:#fff}.toolbar-purple{background-color:#926dde}.toolbar-purple.tool-top .arrow{border-color:#926dde transparent transparent}.toolbar-purple.tool-bottom .arrow{border-color:transparent transparent #926dde}.toolbar-purple.tool-left .arrow{border-color:transparent transparent transparent #926dde}.toolbar-purple.tool-right .arrow{border-color:transparent #926dde transparent transparent}.toolbar-purple .tool-item>.feather{color:#fff}.toolbar-purple .tool-item.selected,.toolbar-purple .tool-item:hover{background:#a282e3;color:#fff}.toolbar-secondary{background-color:#e4e7ea}.toolbar-secondary.tool-top .arrow{border-color:#e4e7ea transparent transparent}.toolbar-secondary.tool-bottom .arrow{border-color:transparent transparent #e4e7ea}.toolbar-secondary.tool-left .arrow{border-color:transparent transparent transparent #e4e7ea}.toolbar-secondary.tool-right .arrow{border-color:transparent #e4e7ea transparent transparent}.toolbar-secondary .tool-item>.feather{color:#fff}.toolbar-secondary .tool-item.selected,.toolbar-secondary .tool-item:hover{background:#edeff1;color:#fff}.toolbar-dark{background-color:#465161}.toolbar-dark.tool-top .arrow{border-color:#465161 transparent transparent}.toolbar-dark.tool-bottom .arrow{border-color:transparent transparent #465161}.toolbar-dark.tool-left .arrow{border-color:transparent transparent transparent #465161}.toolbar-dark.tool-right .arrow{border-color:transparent #465161 transparent transparent}.toolbar-dark .tool-item>.feather{color:#fff}.toolbar-dark .tool-item.selected,.toolbar-dark .tool-item:hover{background:#515d70;color:#fff}.animate-standard{-webkit-animation:standardAnimate .3s 1 ease}.animate-flyin{-webkit-animation:rotateAnimate .5s 1 ease}.animate-grow{-webkit-animation:growAnimate .4s 1 ease}.animate-flip{-webkit-animation:flipAnimate .4s 1 ease}.animate-bounce{-webkit-animation:bounceAnimate .4s 1 ease-out}@-webkit-keyframes rotateAnimate{from{transform:rotate(180deg) translate(-120px);opacity:0}to{transform:rotate(0deg) translate(0px);opacity:1}}@-webkit-keyframes standardAnimate{from{transform:translateY(20px);opacity:0}to{transform:translateY(0px);opacity:1}}@-webkit-keyframes growAnimate{0%{transform:scale(0) translateY(40px);opacity:0}70%{transform:scale(1.5) translate(0px)}100%{transform:scale(1) translate(0px);opacity:1}}@-webkit-keyframes rotate2Animate{from{transform:rotate(-90deg);transform-origin:0% 100%;opacity:0}to{transform:rotate(0deg);opacity:1}}@-webkit-keyframes flipAnimate{from{transform:rotate3d(2,2,2,180deg);opacity:0}to{transform:rotate3d(0,0,0,0deg);opacity:1}}@-webkit-keyframes bounceAnimate{0%{transform:translateY(40px);opacity:0}30%{transform:translateY(-40px)}70%{transform:translateY(20px)}100%{transform:translateY(0px);opacity:1}} |