.djs-editor { position: absolute; top: 90px; right: 20px; background-color: rgba(255, 255, 255, 0.9); color: rgb(0, 0, 0); border: solid 1px #CCC; border-radius: 2px; box-sizing: border-box; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .djs-editor:not(.enabled) { color: #CCC; pointer-events: none; } .djs-editor:not(.open) { overflow: hidden; } .toolbar { display: none; width: 50%; height: 35px; list-style-type: none; padding: 0; } .djs-editor.open .toolbar { display: block; text-align: left; line-height: 35px; } .toolbar { width: 100%; float: left; margin: 0; padding: 0; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .toolbar > div { float: left; display: block; border-right: 1px solid #ccc; padding: 0px 15px; } .toolbar div { text-decoration: none; font-weight: bold; color: #069; } .toolbar div:hover { color: #c00; background-color: #fff; } .toolbar div.active { background-color: rgb(201, 205, 248); } .dropdown .trigger { border: none; padding: 0px; } .dropdown { position: relative; } .dropdown .dropdown-content { display: none; position: absolute; background-color: #f2f2f2 !important; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content .sub-trigger { text-decoration: none; padding: 0 0 0 15px; border-bottom: 1px solid #ccc; display: block; } .description { display: none; color: #000 !important; min-width: 250px; background-color: #f2f2f2 !important; } .dropdown-content .sub-trigger{ position: relative; } .dropdown-content .sub-trigger:hover .description { top: 0; left: 100%; position: absolute; display: block; } #run_btn { font-family: "Material Icons", sans-serif; } #run_btn:before { content: "build"; } .djs-editor .ide { display: none; width: 100%; min-width: 420px; height: 280px; } .djs-editor.open .ide { display: block; } .djs-editor:not(.open) .toggle { width: 46px; height: 46px; line-height: 46px; content: "dvr" !important; text-align: center; } .djs-editor.open .toggle:before { font-family: "Material Icons", sans-serif; content: "close" !important; font-size: 24px; } .djs-editor:not(.open) .toggle:before { font-family: "Material Icons", sans-serif; content: "dvr" !important; font-size: 24px; } .djs-editor .toggle:before { content: attr(title); } .djs-editor.open .toggle { position: absolute; right: 0; padding: 6px; z-index: 1; }