.etcd-container.etcd-browser { width: 100%; height: 500px; } .home-container .etcd-container.etcd-browser { height: 400px; } .etcd-container.etcd-browser .etcd-header { height: 37px; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-back { display: block; } .etcd-container.etcd-browser.etcd-preview-hide .etcd-back { display: block; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-add { } .etcd-container.etcd-browser.etcd-preview-hide .etcd-add { } .etcd-container.etcd-browser .etcd-header .etcd-browser-path { position: absolute; left: 72px; right: 0px; top: 0; margin: 6px 5px 6px 5px; } .etcd-container.etcd-browser .etcd-header .etcd-browser-path input { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .etcd-container.etcd-browser .etcd-header .etcd-save { position: absolute; width: 54px; right: -55px; margin: 6px 0; } .etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-save { right: 7px; } .etcd-container.etcd-browser.etcd-save-reveal .etcd-header .etcd-browser-path { right: 62px; } .etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-save { right: -55px; } .etcd-container.etcd-browser.etcd-save-hide .etcd-header .etcd-browser-path { right: 0px; } .etcd-container.etcd-browser .etcd-preview { position: absolute; left: 100%; min-height: 100%; overflow-y: auto; overflow-x: hidden; top: 0px; box-sizing: border-box; -moz-box-sizing: border-box; background-color: #fff; width: 100%; border-left: 1px solid #ddd; } .etcd-container.etcd-browser .etcd-preview pre, .etcd-container.etcd-browser .etcd-preview textarea { padding: 20px 20px 20px 20px; margin: 0px; font-family: Consolas, "Liberation Mono", Courier, monospace; height: 100%; width: 100%; white-space: pre-wrap; position: absolute; font-size: 13px; border: 1px; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview textarea { display: block; } .etcd-container.etcd-browser .etcd-preview .etcd-empty { top: 0px; bottom: 0px; width: 100%; text-align: center; position: absolute; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-empty { display: none; } .etcd-container.etcd-browser .etcd-preview .etcd-empty-message { margin-top: 25%; color: #999; } /* Single Column Positioning */ @media (max-width: 700px) { .etcd-container.etcd-browser .etcd-list { width: 100%; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-list { left: -100%; transition-property: all; transition-duration: 250ms; transition-timing-function: ease-in-out; } .etcd-container.etcd-browser.etcd-preview-hide .etcd-list { left: 0%; transition-property: all; transition-duration: 250ms; transition-timing-function: ease-in-out; } .etcd-container.etcd-browser .etcd-preview { left: 100%; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { left: -1px; transition-property: all; transition-duration: 250ms; transition-timing-function: ease-in-out; } .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview { left: 100%; transition-property: all; transition-duration: 250ms; transition-timing-function: ease-in-out; } } /* Double Column Positioning */ @media (min-width: 700px) { .etcd-container.etcd-browser .etcd-list { width: 50%; } .etcd-container.etcd-browser .etcd-preview { left: 50%; width: 50%; } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview { left: 50%; /* does nothing */ } .etcd-container.etcd-browser.etcd-preview-reveal .etcd-preview .etcd-empty { display: none; } .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview { left: 50%; /* does nothing */ } .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview .etcd-empty { display: block; } .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview pre, .etcd-container.etcd-browser.etcd-preview-hide .etcd-preview textarea { display: none; } }