web-code-editor/docs/web-code-editor.css

web code editor

.web-code-editor{--bg:#1e1e1e;--pane1-bg:#252526;--title-tabs-bg:#2d2d2d;--filename:#999;--filenameHover:#fff;--primary:#0c5687;--primaryHover:#17b;--mask-zIndex:4;--create-zIndex:5;--right-menu-zIndex:10;--font-family:consolas;--file-icon:'🗄️';--dir-icon:'📁';--dir-open-icon:'✨';--scrollbar-thumb:#4c4c4c;--scrollbar-thumb-hover:#797575;--err-color:#9f0000}.web-code-editor .pane1{position:relative;width:300px;background:var(--pane1-bg);min-width:200px;max-width:80%;height:100%;overflow-x:hidden;overflow-y:auto;outline-offset:-1px;outline:transparent solid 1px}.web-code-editor .pane1:focus{outline-color:#007fd4}.web-code-editor .pane1::-webkit-scrollbar{width:8px;height:8px}.web-code-editor .pane1::-webkit-scrollbar-track{background:var(--bg);border-radius:1em}.web-code-editor .pane1::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:1em}.web-code-editor .pane1::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.web-code-editor .pane1 .open-dir-btn{position:absolute;z-index:2;left:10%;width:80%;top:10%;color:#fff;background-color:var(--primary);padding:8px 12px;text-align:center;font-size:14px;max-width:400px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;transition:background-color .3s}.web-code-editor .pane1 .open-dir-btn:hover{background-color:var(--primaryHover)}.web-code-editor .pane1 .files{display:flex;flex-direction:column;justify-content:flex-start}.web-code-editor .pane1 .files .files{display:none}.web-code-editor .pane1 .files .files.open{display:block}.web-code-editor .pane1 .files .item{position:relative;cursor:pointer;color:var(--filename);padding-left:2em;white-space:nowrap}.web-code-editor .pane1 .files .item.create{z-index:var(--create-zIndex)}.web-code-editor .pane1 .files .item .field{position:relative}.web-code-editor .pane1 .files .item input{outline:2px solid var(--primaryHover);background-color:var(--bg);color:#fff;border:none;padding:4px;width:99%}.web-code-editor .pane1 .files .item input.new-is-invalid{outline-color:var(--err-color)}.web-code-editor .pane1 .files .item .msg{position:absolute;left:0;top:100%;background:var(--err-color);color:#fff;width:100%;z-index:23;padding:4px 2px;font-size:14px;display:none;white-space:pre-wrap;padding:4px}.web-code-editor .pane1 .files .item::before{position:absolute;content:var(--file-icon);left:8px;top:50%;transform:translateY(-50%)}.web-code-editor .pane1 .files .item.dir::before{top:1em;content:var(--dir-icon)}.web-code-editor .pane1 .files .item.dir.open::before{content:var(--dir-open-icon)}.web-code-editor .pane1 .files .item span{display:inline-block;width:100%;height:100%;padding:8px;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.web-code-editor .pane1 .files .item span:hover{color:var(--filenameHover)}.web-code-editor .pane2{position:relative;width:11px;margin:0 -5px;height:100%}.web-code-editor .pane2:hover{cursor:col-resize}.web-code-editor .pane3{position:relative;flex:1;background:var(--bg);height:100%;display:flex;flex-direction:column;overflow:hidden}.web-code-editor .pane3 .title-tabs{order:1;display:flex;background-color:var(--title-tabs-bg);overflow:hidden}.web-code-editor .pane3 .title-tabs::-webkit-scrollbar{width:4px;height:4px}.web-code-editor .pane3 .title-tabs::-webkit-scrollbar-track{background:var(--bg);border-radius:1em}.web-code-editor .pane3 .title-tabs::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:1em}.web-code-editor .pane3 .title-tabs::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.web-code-editor .pane3 .title-tabs:hover{overflow:auto}.web-code-editor .pane3 .title-tabs .item{position:relative;display:flex;justify-content:space-between;align-items:center;color:var(--filename);width:120px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:8px;padding-left:1.9em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:1px solid var(--pane1-bg)}.web-code-editor .pane3 .title-tabs .item .close-icon{margin-left:8px;opacity:0;font-size:12px}.web-code-editor .pane3 .title-tabs .item:hover > .close-icon{opacity:1}.web-code-editor .pane3 .title-tabs .item.active{background-color:var(--bg);color:var(--filenameHover)}.web-code-editor .pane3 .title-tabs .item.active .close-icon{opacity:1}.web-code-editor .pane3 .title-tabs .item::after{position:absolute;content:'🗄️';left:8px;top:50%;transform:translateY(-50%)}.web-code-editor .pane3 .editor-container{order:2;flex:1;overflow:hidden;position:relative}.web-code-editor .pane3 .editor-container .image-container{position:absolute;left:0;top:0;right:0;bottom:0;display:none;background-color:var(--bg);overflow:hidden}.web-code-editor .pane3 .editor-container .image-container ::-webkit-scrollbar{width:8px;height:8px}.web-code-editor .pane3 .editor-container .image-container ::-webkit-scrollbar-track{background:var(--bg);border-radius:1em}.web-code-editor .pane3 .editor-container .image-container ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:1em}.web-code-editor .pane3 .editor-container .image-container ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.web-code-editor .pane3 .editor-container .image-container .image{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:auto}.web-code-editor .pane3 .editor-container .image-container .image img{max-width:100%;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:-webkit-grabbing;cursor:grabbing}.web-code-editor .pane3 .editor-container .editor-textarea{height:100%;width:100%;font-family:var(--font-family);font-size:16px;background-color:var(--bg);margin:0;display:none}.web-code-editor .pane3 .editor-container .custom-codeMirror{height:100%;font-size:18px}.web-code-editor .pane3 .editor-container .custom-codeMirror ::-webkit-scrollbar{width:8px;height:8px}.web-code-editor .pane3 .editor-container .custom-codeMirror ::-webkit-scrollbar-track{background:var(--bg);border-radius:1em}.web-code-editor .pane3 .editor-container .custom-codeMirror ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:1em}.web-code-editor .pane3 .editor-container .custom-codeMirror ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.web-code-editor .right-menu{position:absolute;display:none;z-index:var(--right-menu-zIndex);font-size:14px;color:#fff;background:var(--pane1-bg);width:300px;padding:8px 0;margin:0;list-style:none;align-items:flex-start;box-shadow:0 3px 1px -2px #000,0 2px 2px 0 #000,0 1px 5px 0 #000}.web-code-editor .right-menu .item{padding:6px 8px;display:flex;width:100%;color:var(--filename)}.web-code-editor .right-menu .item:hover{color:var(--filenameHover);background-color:var(--primary)}.web-code-editor .right-menu .item.divide{border-top:1.5px solid var(--filename)}.web-code-editor .right-menu .text{flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.web-code-editor .mask{position:absolute;left:0;top:0;right:0;bottom:0;z-index:var(--mask-zIndex);display:none}.web-code-editor *{box-sizing:border-box}.web-code-editor{position:relative;display:flex;width:100%;height:100%;background-color:var(--bg);font-family:var(--font-family)}.web-code-editor ul{list-style:none;padding:0;margin:0}