keen-dashboard-builder/dist/style.min.css

Dashboard builder for Keen.io

body{margin:0}.dashboard-builder{width:100%;margin:0;height:100vh;position:relative;display:flex;justify-content:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f9f9f9;color:#000;overflow:hidden;box-sizing:border-box}.dashboard-builder.container{width:1200px;min-height:100vh;height:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;background:#f5f5f5}.dashboard-builder .dashboard{position:relative;width:100%;min-height:calc(100vh - 130px);padding:20px;box-sizing:border-box}.dashboard-builder .dashboard-container{width:100%;overflow:auto;padding-left:60px}.dashboard-builder .dashboard-container-viewer{width:100%;overflow:auto}.dashboard-builder .dashboard-container-viewer .dashboard-top-bar{width:100%;z-index:12}.dashboard-builder .dashboard-container-viewer .dashboard-top-bar .export-icon{margin:0 1rem;order:2;flex-shrink:0}.dashboard-builder .dashboard-inner-container{background:#fdfdfd;margin:auto}.dashboard-builder .dashboard-title{height:60px;width:100%;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.5rem}.dashboard-builder .dashboard-title input{border:0;background:inherit;width:100%;font-size:30px;outline:none;padding:5px 5px 5px 0}.dashboard-builder .dashboard-title .title{padding:20px}.dashboard-builder .dashboard-title a{text-decoration:none}.dashboard-builder .dashboard-top-bar{height:50px;width:100%;background:#f9f9f9;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;position:sticky;top:0;left:0;z-index:9}.dashboard-builder .dashboard-top-bar__menu{flex-shrink:0;display:flex;align-items:center}.dashboard-builder .dashboard-top-bar .share{position:relative}.dashboard-builder .dashboard-top-bar .embed,.dashboard-builder .dashboard-top-bar .share{margin:0 1rem;cursor:pointer}.dashboard-builder .dashboard-list-item{width:20%;min-width:180px;height:200px;padding:10px;position:relative}.dashboard-builder .dashboard-list-item:hover>.dashboard-list-item-buttons{visibility:visible}.dashboard-builder .dashboard-list-item-box{background:#fff;display:flex;justify-content:center;align-items:center;border:1px solid #eee;border-radius:5px;width:100%;height:100%;transition:box-shadow .3s;color:#000;padding:10px;text-align:center}.dashboard-builder .dashboard-list-item-box:hover{box-shadow:-6px 6px 8px 0 rgba(0,0,0,.23)}.dashboard-builder .dashboard-list-item-box time{position:absolute;bottom:15px;left:20px;color:#aaa;font-size:12px}.dashboard-builder .dashboard-list-item-buttons{position:absolute;top:15px;right:15px;cursor:pointer;visibility:hidden}.dashboard-builder .dashboard-saved-message{position:absolute;top:.5rem;left:45%;padding:.5rem 1rem;border-radius:5px;background:#333;color:#fff;font-size:.85rem;z-index:11}.dashboard-builder .dashboard img{width:100%;height:100%}.dashboard-builder .toolbar{position:absolute;left:0;top:0;width:60px;height:100%;z-index:10}.dashboard-builder .toolbar-bar{width:100%;height:100%;position:relative;z-index:6;border-right:1px solid #929191;padding:20px;background:#2f97b9;color:#fff;cursor:pointer}.dashboard-builder .toolbar-bar h3{transform:translateY(100%) rotate(-90deg);transform-origin:0 0;white-space:nowrap;overflow:hidden;position:absolute;top:110px;left:15px;color:#fff}.dashboard-builder .toolbar-container{position:absolute;left:-135px;height:100%;border-right:1px solid #929191;background:#fff;box-shadow:3px 3px 6px #eee;border-right:0;overflow-y:auto;transition:left .25s ease-out}.dashboard-builder .toolbar-hidden{width:90px;display:flex;flex-direction:row;flex-wrap:wrap;padding:10px 10px 10px 20px}.dashboard-builder .toolbar-hidden>h4{font-size:.7rem;width:100%;margin:2rem 0 .5rem;font-weight:400;text-transform:uppercase}.dashboard-builder .toolbar-hidden>h4:first-of-type{margin-top:1rem}.dashboard-builder .toolbar-hidden p{cursor:pointer;z-index:5;margin:0;padding:5px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#fff}.dashboard-builder .toolbar-hidden .metric-chart-icon{font-size:20px;font-weight:600}.dashboard-builder .toolbar-visible{left:60px}.dashboard-builder .burger-icon{padding:0 20px;cursor:pointer;position:relative}.dashboard-builder .burger-icon .fa-bars{color:#2f97b9}.dashboard-builder .modal{display:block;position:absolute;background:#fff;border:1px solid #eee;border-radius:5px;z-index:11;top:0;left:20px;right:auto;bottom:auto;font-size:14px;width:250px;box-shadow:-6px 6px 8px 0 rgba(0,0,0,.23)}.dashboard-builder .modal-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #eee;font-size:17px}.dashboard-builder .modal-header .svg-inline--fa{cursor:pointer}.dashboard-builder .modal .dashboards-filter{padding:.25rem 1rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between}.dashboard-builder .modal .dashboards-filter input{font-size:14px}.dashboard-builder .modal-body{padding:15px;max-height:300px;overflow:auto}.dashboard-builder .modal-body .item{padding:1rem;border-bottom:1px solid #eee;display:flex;flex-direction:column}.dashboard-builder .modal-body .item:hover{background:#f3f3f3}.dashboard-builder .modal-body .item .time{color:#aaa;font-size:12px}.dashboard-builder .modal-body .active{background:#f9f9f9}.dashboard-builder .modal-body .active .fa-angle-double-right{color:#2f97b9;padding-right:5px}.dashboard-builder .modal-body .modal-input{padding:8px 4px;margin-bottom:.5em;width:100%}.dashboard-builder .modal-body .prism{margin-bottom:40px;white-space:pre-wrap}.dashboard-builder .modal-button{border-radius:5px;padding:5px 15px;cursor:pointer;color:#fff;background:#2f97b9;border:none;font-size:14px;line-height:1}.dashboard-builder .modal-button .svg-inline--fa{margin-right:.25rem}.dashboard-builder .modal-footer{padding:10px}.dashboard-builder .modal-cover{width:100%;height:100%;opacity:.4;background:#000;position:absolute;top:0;left:0;z-index:10}.dashboard-builder .modal.share-dashboard{width:500px;top:50px;left:50%;transform:translateX(-50%)}.dashboard-builder .modal.embed-dashboard{width:75%;max-width:700px;top:50%;left:50%;transform:translate(-50%,-50%)}.dashboard-builder .modal.embed-dashboard .modal-button{position:fixed;bottom:15px;left:15px}.dashboard-builder .editor-dashboard-switch .modal-body{padding:0}.dashboard-builder .paragraph{padding:0 10px;overflow:hidden;width:100%}.dashboard-builder .paragraph p{margin:0}.dashboard-builder .keen-dataviz{padding:15px;border:1px solid #ccc}.dashboard-builder .keen-dataviz .keen-dataviz{padding:0;border:none}.dashboard-builder .chart-container{background:#fff;justify-content:center;align-items:center;position:absolute;border-radius:5px;display:flex;flex-direction:column;transition:box-shadow .3s;z-index:1}.dashboard-builder .chart-container:hover{box-shadow:-6px 6px 8px 0 rgba(0,0,0,.23);z-index:8}.dashboard-builder .chart-container:hover .config-buttons{visibility:visible}.dashboard-builder .chart-container img{border-radius:5px}.dashboard-builder .chart-container>.keen-dataviz{overflow:auto;width:100%;margin-top:0;border:1px solid #eee}.dashboard-builder .chart-container-viewer{background:#fff;justify-content:center;align-items:center;border-radius:5px;display:flex;flex-direction:column;transition:box-shadow .3s;z-index:1;position:relative}.dashboard-builder .chart-container-viewer .c3-tooltip-container{z-index:10}.dashboard-builder .chart-container-viewer:hover .explorer-button{visibility:visible}.dashboard-builder .chart-container-viewer img{border-radius:5px}.dashboard-builder .chart-container-viewer>.keen-dataviz{overflow:auto;width:100%;margin-top:0;border:1px solid #eee}.dashboard-builder .config-buttons{position:absolute;top:-1px;right:-35px;display:flex;flex-direction:column;visibility:hidden;padding-left:5px;opacity:1}.dashboard-builder .config-buttons div{cursor:pointer;width:30px;height:30px;background:#000;color:#fff;font-size:15px;box-sizing:border-box;margin-bottom:2px;display:flex;align-items:center;justify-content:center;opacity:.7;border-radius:3px}.dashboard-builder .config-buttons div:hover{background:#424242}.dashboard-builder .explorer-button{position:absolute;z-index:4;top:2px;right:2px;cursor:pointer;width:30px;height:30px;background:#000;color:#fff;box-sizing:border-box;opacity:.7;border-radius:3px;padding-left:8px;padding-top:2px;visibility:hidden}.dashboard-builder .explorer-button a{color:#fff}.dashboard-builder .explorer-button:hover{background:#424242}.dashboard-builder .top-left{left:0;top:0;cursor:nwse-resize;width:10px;height:10px;z-index:4}.dashboard-builder .top-right{right:0;top:0;cursor:nesw-resize;width:10px;height:10px;z-index:4}.dashboard-builder .bottom-left{left:0;bottom:0;cursor:nesw-resize;width:10px;height:10px;z-index:4}.dashboard-builder .bottom-right{right:1px;bottom:1px;cursor:nwse-resize;width:12px;height:12px;z-index:4;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent #7c7c7c}.dashboard-builder .left{left:0}.dashboard-builder .left,.dashboard-builder .right{top:0;height:100%;width:5px;cursor:ew-resize;z-index:3}.dashboard-builder .right{right:0}.dashboard-builder .top{top:0}.dashboard-builder .bottom,.dashboard-builder .top{left:0;width:100%;height:5px;cursor:ns-resize;z-index:3}.dashboard-builder .bottom{bottom:0}.dashboard-builder .keen-dataviz-table th{z-index:0}.dashboard-builder .keen-dataviz-title{padding-top:5px}.dashboard-builder .keen-dataviz-metric-subtitle,.dashboard-builder .keen-dataviz-metric-title,.dashboard-builder .keen-dataviz-subtitle,.dashboard-builder .keen-dataviz-title{padding-left:10px;padding-right:10px}.dashboard-builder .chart-draggable{position:absolute;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);z-index:2;cursor:move}.dashboard-builder .search{width:65%;height:100%;display:flex;flex-direction:row;font-size:15px;align-items:center}.dashboard-builder .search svg{margin-right:10px}.dashboard-builder .search input{border:0;background:inherit;width:100%;height:100%;outline:none;font-size:20px}.dashboard-builder .sorting-select{width:200px;margin-top:15px}.dashboard-builder .screen-resize-icon{display:flex;color:hsla(0,0%,44%,.65882);align-items:center;flex:1;justify-content:center}.dashboard-builder .screen-resize-icon svg{margin:0 1rem;cursor:pointer}.dashboard-builder .screen-resize-icon svg:hover{color:#000}.dashboard-builder .save-dashboard-button{border-radius:5px;padding:5px;cursor:pointer;transition:.3s;width:80px;height:31px;margin-right:20px;margin-left:20px;text-align:center;color:#fff;background:#2f97b9;text-transform:uppercase;line-height:1}.dashboard-builder .save-dashboard-button svg{margin-right:.25rem}.dashboard-builder .settings{width:350px;background:#f3f7f9}.dashboard-builder .settings h4{margin-top:2rem;margin-bottom:.5rem;font-weight:400}.dashboard-builder .settings-wrapper{padding:1rem}.dashboard-builder .settings-input{color:#333;font-size:14px;height:38px}.dashboard-builder .settings-input,.dashboard-builder .settings-textarea{width:100%;border-radius:4px;padding:9px;border:1px solid #ccc;outline:none}.dashboard-builder .settings-textarea{color:gray;font-size:16px;height:50%}.dashboard-builder .settings-select>div{width:100%}.dashboard-builder .settings-chart{padding:0}.dashboard-builder .settings-chart-saved-query{padding:1rem}.dashboard-builder .settings-chart #dashboard-builder-explorer .keen-explorer .panel-main{min-width:0;max-width:330px;box-shadow:none}.dashboard-builder .settings-chart .keen-theme-builder{padding:0}.dashboard-builder .settings-chart .keen-theme-builder .builder__header{display:none}.dashboard-builder .settings-chart .keen-theme-builder .keen-theme-builder__row{padding-left:1rem;padding-right:1rem}.dashboard-builder .settings-chart .keen-theme-builder .accordion__item__content .keen-theme-builder__row{padding:0}.dashboard-builder .settings-chart h4:first-child{margin-top:0}.dashboard-builder .react-tabs__tab{width:50%;padding:10px;text-align:center;cursor:pointer;color:#fff;outline:none;border:0;background:#2f97b9}.dashboard-builder .react-tabs__tab:first-of-type{border-right:none}.dashboard-builder .react-tabs__tab--selected{color:#000;border-bottom:none;background:#fff;border-top:1px solid #eee}.dashboard-builder .react-tabs__tab-list{display:flex;flex-direction:row;list-style:none;justify-content:space-between;padding:0;margin-bottom:0}.dashboard-builder .react-tabs__tab-panel{border:0}.dashboard-builder .react-tabs__tab-panel--selected{padding:10px 20px 20px;border:0;visibility:visible;height:calc(100vh - 40px);overflow-y:auto}.dashboard-builder .react-tabs__tab-panel--selected .keen-theme-builder{padding:0}.dashboard-builder .settings-container{min-width:350px;min-height:100%;background:#fff;border-left:1px solid #eee;position:relative;background:#f3f7f9;overflow:auto}.dashboard-builder .settings-container .color-palette__item .color-picker__popover{left:0;right:auto}.dashboard-builder .settings-container .color-palette__item:nth-child(2n) .color-picker__popover{left:auto;right:0}.dashboard-builder .new-dashboard-button{border-radius:5px;padding:1rem;cursor:pointer;color:#fff;background:#2f97b9;text-align:left;white-space:nowrap;display:flex;align-items:center}.dashboard-builder .new-dashboard-button:hover{color:#fff;background:#2f97b9}.dashboard-builder .new-dashboard-button svg{margin-right:.5rem}.dashboard-builder .container{width:1200px;background:#f5f5f5;min-height:100vh;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.dashboard-builder .top-toolbar{flex:1 100%;padding:20px;display:flex;flex-direction:row;justify-content:space-between;width:100%;border-bottom:1px solid #cfcfcf}.dashboard-builder .message{width:100%;text-align:center;padding:20px}.dashboard-builder .new-chart-info,.dashboard-builder .settings-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:hsla(0,0%,98%,.9);border-bottom-left-radius:5px;border-bottom-right-radius:5px}.dashboard-builder .error-message{z-index:1;background:#fff;padding:20px;text-align:center;color:red;border:1px solid red;border-radius:5px}.dashboard-builder .dry-run-message{position:absolute;left:0;bottom:0;padding:1rem;background:hsla(0,0%,44%,.65882);color:#fff;border-radius:0 1rem 0 0}.dashboard-builder .select-palette-button select{margin-right:20px;border-radius:5px;padding:8px;width:100px;height:31px;background:#fff}.dashboard-builder .preview{padding:10px}.dashboard-builder .preview a{color:#000}.dashboard-builder .embed-icon:hover,.dashboard-builder .preview:hover a,.dashboard-builder .share-icon:hover{color:#414141}.dashboard-builder .quill{height:70%}.dashboard-builder .edit-dashboard-button{border-radius:5px;padding:5px 10px;cursor:pointer;width:fit-content;text-align:center;color:#fff;background:#2f97b9;text-decoration:none;flex-shrink:0;margin:0 0 0 .5em}.dashboard-builder .edit-dashboard-button__link{display:block;color:#fff;text-decoration:none}.dashboard-builder .edit-dashboard-button__link:hover{color:#fff;text-decoration:none}.dashboard-builder .big-icon{font-size:50px;color:#eee}.dashboard-builder .loading{font-size:50px;animation:a 1s ease infinite;z-index:13}.dashboard-builder .settings-theme-builder,.dashboard-builder .settings-theme-builder .keen-theme-builder{padding:0}.dashboard-builder .settings-theme-builder .keen-theme-builder .builder__header{display:none}.dashboard-builder .switch-dashboard{width:400px;z-index:10}.dashboard-builder .__react_component_tooltip{padding:3px 5px}.dashboard-builder .keen-theme-builder{background-color:#fff}.dashboard-builder .keen-theme-builder .color-picker__popover{z-index:10}.dashboard-builder .keen-theme-builder .builder__header{display:none}.dashboard-builder .heatmap-container .keen-dataviz-rendering-vertical{height:calc(100% - 50px)}.dashboard-builder .keen-dataviz .rangeable-container{margin:2rem auto;width:75%}.dashboard-builder .keen-dataviz .rangeable-container .rangeable-progress,.dashboard-builder .keen-dataviz .rangeable-container .rangeable-track{height:4px}.dashboard-builder .keen-dataviz .rangeable-container .rangeable-handle{width:16px;height:16px;border-width:4px}.dashboard-builder .keen-dataviz .rangeable-container .rangeable-tooltip{border-radius:0;font-weight:400;padding:3px 9px}.dashboard-builder .c3-circle{fill:currentColor}@media only screen and (max-width:1300px){.dashboard-builder .dashboard{min-height:calc(100vh - 130px)}}@media only screen and (min-width:1800px){.dashboard-builder .toolbar-bar{visibility:hidden}.dashboard-builder .toolbar-container{left:0}.dashboard-builder .dashboard-container{padding-left:90px}}.dashboard-builder .export-icon{cursor:pointer}.dashboard-builder .switcher{margin-bottom:.5rem;display:block;position:relative;overflow:hidden}.dashboard-builder .switcher__input:checked~.switcher__toggle{border-color:#3ed08e;background-color:#dcf9eb}.dashboard-builder .switcher__input:checked~.switcher__toggle .switcher__switch{right:2px;background-color:#3ed08e}.dashboard-builder .switcher__input:checked~.switcher__value .on{display:block}.dashboard-builder .switcher__input:checked~.switcher__value .off{display:none}.dashboard-builder .switcher__toggle{position:relative;width:36px;height:20px;margin-right:.25rem;margin-left:.5rem;border:1px solid #ccc;background-color:#fff;border-radius:10px;display:inline-block}.dashboard-builder .switcher__switch{position:absolute;top:2px;bottom:0;right:18px;width:14px;height:14px;margin:0;background:#ccc;border-radius:50%;flex-shrink:0;transition:right .15s ease-in-out,background-color .15s ease-in-out}.dashboard-builder .switcher__title{font-weight:800}.dashboard-builder .switcher__label{display:flex;align-items:center;cursor:pointer}.dashboard-builder .switcher__input{position:absolute;left:-999px}.dashboard-builder .switcher__value{margin-left:.25rem;color:#b3b5b6}.dashboard-builder .switcher__value .on{display:none}.dashboard-builder .switcher__value .off{display:block}.dashboard-builder .layout.editor .keen-dataviz .c3-chart{pointer-events:none}.dashboard-builder .react-grid-item:hover{z-index:7}.dashboard-builder .react-grid-item:hover .config-buttons{visibility:visible}.dashboard-builder .react-grid-item>.react-resizable-handle{width:16px;height:16px;background-color:transparent;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSI5Mi43MjYzMzE4ODA1ODUzOCA4My45MzgyNjA0OTcxMDkwMSA0NzQuMTIxNzExMjU2OTYxIDQ3NC4xMjM0NzkwMDU3ODIiIHdpZHRoPSI0NzAuMTIiIGhlaWdodD0iNDcwLjEyIj48ZGVmcz48cGF0aCBkPSJNMTg1LjY1IDI0Ny41N0w0MDEuMjEgNDYzLjE0QzM3Ni43OSA0ODcuNTYgMzYzLjIyIDUwMS4xMyAzNjAuNSA1MDMuODVDMzQxLjYgNTIyLjc1IDM1NC45OSA1NTUuMDYgMzgxLjcyIDU1NS4wNkMzOTYuOTMgNTU1LjA2IDUxOC42MyA1NTUuMDYgNTMzLjg1IDU1NS4wNkM1NTAuNDIgNTU1LjA2IDU2My44NSA1NDEuNjMgNTYzLjg1IDUyNS4wNkM1NjMuODUgNTA5Ljg1IDU2My44NSAzODguMTQgNTYzLjg1IDM3Mi45M0M1NjMuODUgMzQ2LjIgNTMxLjUzIDMzMi44MiA1MTIuNjMgMzUxLjcyQzUwOS45MiAzNTQuNDMgNDk2LjM1IDM2OCA0NzEuOTIgMzkyLjQzTDI1Ni4zNiAxNzYuODZDMjgwLjc5IDE1Mi40NCAyOTQuMzYgMTM4Ljg3IDI5Ny4wNyAxMzYuMTVDMzE1Ljk3IDExNy4yNSAzMDIuNTkgODQuOTQgMjc1Ljg2IDg0Ljk0QzI2MC42NSA4NC45NCAxMzguOTQgODQuOTQgMTIzLjczIDg0Ljk0QzEwNy4xNiA4NC45NCA5My43MyA5OC4zNyA5My43MyAxMTQuOTRDOTMuNzMgMTMwLjE1IDkzLjczIDI1MS44NiA5My43MyAyNjcuMDdDOTMuNzMgMjkzLjggMTI2LjA0IDMwNy4xOCAxNDQuOTQgMjg4LjI4QzE1MC4zNyAyODIuODYgMTYzLjk0IDI2OS4yOSAxODUuNjUgMjQ3LjU3WiIgaWQ9ImFYVDAwb2VrQyI+PC9wYXRoPjwvZGVmcz48Zz48Zz48dXNlIHhsaW5rOmhyZWY9IiNhWFQwMG9la0MiIG9wYWNpdHk9IjEiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMSI+PC91c2U+PGc+PHVzZSB4bGluazpocmVmPSIjYVhUMDBvZWtDIiBvcGFjaXR5PSIxIiBmaWxsLW9wYWNpdHk9IjAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMCI+PC91c2U+PC9nPjwvZz48L2c+PC9zdmc+");background-size:contain;cursor:nwse-resize;opacity:0;will-change:opacity;transition:opacity .25s ease-out}.dashboard-builder .react-grid-item>.react-resizable-handle:after{content:none}.dashboard-builder .react-grid-item.react-resizable:hover .react-resizable-handle{opacity:1}.dashboard-builder .react-grid-item.react-grid-placeholder{background:#2f97b9}.dashboard-builder .react-grid-item .keen-dataviz{overflow:auto}.dashboard-builder .react-grid-item img{pointer-events:none}.dashboard-builder .react-grid-layout{min-height:230px}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}