terminalizer-v2
Version:
Record your terminal and generate animated gif images or share a web player
1 lines • 8.16 kB
CSS
body{background-color:#fff;margin:0}#terminal{font-size:0}#terminal,.terminalizer,.terminalizer-player{display:inline-block}.terminalizer .xterm .xterm-viewport{overflow-y:hidden}.terminalizer-frame{position:relative}.terminalizer div{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}.terminalizer-frame.terminalizer-window{border:1px solid #b3b3b3;border-radius:6px;box-shadow:0 0 18px #b3b3b3;margin:18px;overflow:hidden}.terminalizer-frame.terminalizer-window .terminalizer-titlebar{background:#e8e8e8;border-bottom:1px solid #b1aeb1;border-top:1px solid #f3f1f3;-moz-border-top-left-radius:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-top-right-radius:6px;-webkit-border-top-right-radius:6px;border-top-right-radius:6px;color:#3b4247;font-family:Arial,sans-serif;font-size:14px;height:22px;line-height:22px;position:relative;text-align:center;width:100%}.terminalizer-frame.terminalizer-window .terminalizer-titlebar .buttons{left:8px;line-height:0;position:absolute;top:3.5px}.terminalizer-frame.terminalizer-window .terminalizer-titlebar .close-button{background:#ff5c5c;border:1px solid #e33e41;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:inline-block;height:12px;width:12px}.terminalizer-frame.terminalizer-window .terminalizer-titlebar .minimize-button{background:#ffbd4c;border:1px solid #e09e3e;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:inline-block;height:12px;margin-left:4px;width:12px}.terminalizer-frame.terminalizer-window .terminalizer-titlebar .maximize-button{background:#00ca56;border:1px solid #14ae46;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:inline-block;height:12px;margin-left:4px;width:12px}.terminalizer-frame.terminalizer-window .terminalizer-body{background-color:#1d1d1d;padding:10px}.terminalizer-frame.terminalizer-floating{background-color:#1d1d1d;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:0 0 18px #b3b3b3;margin:18px;overflow:hidden}.terminalizer-frame.terminalizer-floating .terminalizer-titlebar{color:#fff;font-family:Arial,sans-serif;font-size:14px;height:34px;line-height:34px;position:relative;text-align:center;width:100%}.terminalizer-frame.terminalizer-floating .terminalizer-titlebar .buttons{left:13px;line-height:0;position:absolute;top:9px}.terminalizer-frame.terminalizer-floating .terminalizer-titlebar .close-button{background:#ff5c5c;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:inline-block;height:15px;width:15px}.terminalizer-frame.terminalizer-floating .terminalizer-titlebar .minimize-button{background:#ffbd4c;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:inline-block;height:15px;line-height:10px;margin-left:4px;width:15px}.terminalizer-frame.terminalizer-floating .terminalizer-titlebar .maximize-button{background:#00ca56;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;display:inline-block;height:15px;line-height:10px;margin-left:4px;width:15px}.terminalizer-frame.terminalizer-floating .terminalizer-body{padding:20px}.terminalizer-frame.terminalizer-solid{background-color:#1d1d1d;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:0 0 18px #b3b3b3;margin:18px;overflow:hidden}.terminalizer-frame.terminalizer-solid .terminalizer-titlebar{color:#fff;font-family:Arial,sans-serif;font-size:14px;position:relative;text-align:center;width:100%}.terminalizer-frame.terminalizer-solid .terminalizer-titlebar .title{margin:15px}.terminalizer-frame.terminalizer-solid .terminalizer-titlebar .buttons,.terminalizer-frame.terminalizer-solid .terminalizer-titlebar .title:empty{display:none}.terminalizer-frame.terminalizer-solid .terminalizer-body{padding:20px}.terminalizer-player{font-size:0;position:relative}.terminalizer-player .controller{background:#45484d;background:linear-gradient(180deg,#45484d,#000);bottom:0;display:none;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#45484d",endColorstr="#000000",GradientType=0);font-family:Helvetica,Arial,sans-serif;font-size:12px;height:30px;position:absolute;transition:height .2s ease;-webkit-transition:height .2s ease;-moz-transition:height .2s ease;-o-transition:height .2s ease;width:100%;z-index:20}.terminalizer-player.controls .controller{display:block}.terminalizer-player.playing .controller{height:0;overflow:hidden}.terminalizer-player.playing:hover .controller{height:30px;overflow:hidden}.terminalizer-player .pause,.terminalizer-player .play{fill:#cacaca;float:left;height:30px;line-height:30px;text-align:center;width:40px}.terminalizer-player .pause .icon,.terminalizer-player .play .icon{border-color:transparent transparent transparent #cacaca;box-sizing:border-box;cursor:pointer;display:inline-block;height:15px}.terminalizer-player .pause .icon{border-style:double;border-width:0 0 0 12px;margin-top:7px}.terminalizer-player .play .icon{border-style:solid;border-width:8px 0 8px 13px;margin-top:6px}.terminalizer-player .pause,.terminalizer-player.playing .play{display:none}.terminalizer-player.playing .pause{display:inline-block}.terminalizer-player .timer{color:#cacaca;float:right;line-height:30px;padding:0 10px}.terminalizer-player .progressbar-wrapper{height:30px;line-height:28px;overflow:hidden}.terminalizer-player .progressbar{background-color:#424242;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;display:inline-block;height:7px;overflow:hidden;width:100%}.terminalizer-player.started .progressbar{cursor:pointer}.terminalizer-player .progress{background-color:#cacaca;height:7px;position:relative;width:0}.terminalizer-player .cover{cursor:pointer;height:100%;position:absolute;width:100%;z-index:10}.terminalizer-player .start svg{fill:#eaeaea;cursor:pointer;filter:drop-shadow(10px 10px 15px rgba(0,0,0,.4));-webkit-filter:drop-shadow(10px 10px 15px rgba(0,0,0,.4));height:130px;left:50%;margin-left:-65px;margin-top:-65px;position:absolute;top:50%;width:130px;z-index:20}.terminalizer-player.small .start svg{height:60px;margin-left:-30px;margin-top:-30px;width:60px}.terminalizer-player.framed .start svg{transform:translateY(8px);-webkit-transform:translateY(8px);-moz-transform:translateY(8px);-o-transform:translateY(8px);-ms-transform:translateY(8px)}.terminalizer-player .cover:hover+.start svg,.terminalizer-player .start:hover svg{fill:#fff}.terminalizer-player.started .cover,.terminalizer-player.started .start{display:none}.terminalizer-player .terminalizer-watermark{z-index:99999}.xterm{position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{border:0;height:0;left:-9999em;margin:0;opacity:0;overflow:hidden;padding:0;position:absolute;resize:none;top:0;white-space:nowrap;width:0;z-index:-5}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;bottom:0;cursor:default;left:0;overflow-y:scroll;position:absolute;right:0;top:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{left:0;position:absolute;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;left:-9999em;line-height:normal;position:absolute;top:0;visibility:hidden}.xterm{cursor:text}.xterm.enable-mouse-events{cursor:default}.xterm .xterm-cursor-pointer,.xterm.xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{bottom:0;color:transparent;left:0;position:absolute;right:0;top:0;z-index:10}.xterm .live-region{height:1px;left:-9999px;overflow:hidden;position:absolute;width:1px}.xterm-dim{opacity:.5}.xterm-underline{text-decoration:underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{position:absolute;z-index:6}