1 line
3.0 KiB
CSS
1 line
3.0 KiB
CSS
|
@-webkit-keyframes gear-spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-moz-keyframes gear-spin{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes gear-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}#color-switcher{position:fixed;top:110px;right:10px;z-index:999}#color-switcher .btn-switcher{width:47px;height:47px;padding:6px;background:#fff;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05)}#color-switcher .btn-switcher .ico{font-size:28px;line-height:35px;animation:gear-spin 2s infinite linear;-webkit-animation:gear-spin 2s infinite linear;-moz-animation:gear-spin 2s infinite linear}#color-switcher .content{display:none;position:absolute;top:48px;right:0;width:212px;padding:10px 0 2px 10px;z-index:9;font-size:0;background:#fff;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.05)}#color-switcher .content .btn-restore-default{display:inline-block;padding:5px 10px;margin:5px 0 10px;cursor:pointer;font-size:14px;line-height:24px;border:1px solid #ccc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;transition:.4s ease all;-webkit-transition:.4s ease all;-moz-transition:.4s ease all}#color-switcher .content .btn-restore-default:hover{background:#ccc}#color-switcher .content .item{display:inline-block;position:relative;font-size:12px;color:#333;margin-right:8px;margin-bottom:8px;text-align:center}#color-switcher .content .item .color{width:32px;height:32px;display:block;margin:0 auto;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}#color-switcher .content .item .text{display:none;position:absolute;bottom:100%;left:50%;white-space:nowrap;padding:3px 9px;background:#212121;color:#fff;margin-bottom:5px;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0)}#color-switcher .content .item .text:before{content:'';position:absolute;top:100%;left:50%;margin-left:-4px;width:8px;height:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #212211}#color-switcher .content .item:hover .text{display:block}#color-switcher .content .item.active:before{content:'';position:absolute;top:2px;left:2px;width:28px;height:28px;border:2px solid #fff;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}html[dir=rtl] #color-switcher{right:auto;left:20px}html[dir=rtl] #color-switcher .content{right:auto;left:0;padding:10px 10px 2px 2px}html[dir=rtl] #color-switcher .content .item{margin-right:0;margin-left:8px}
|