*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background:#0e1525;
color:#e3e3e3;
height:100vh;
overflow:hidden;
}
.container{
display:flex;
height:100vh;
}
.sidebar{
width:260px;
background:#1c2333;
border-right:1px solid #2b3245;
display:flex;
flex-direction:column;
}
.sidebar-header{
padding:16px;
border-bottom:1px solid #2b3245;
}
.sidebar-header h2{
font-size:16px;
margin-bottom:12px;
font-weight:600;
color:#e3e3e3;
}
.repl-list{
flex:1;
overflow-y:auto;
padding:8px;
}
.repl-item{
padding:10px 12px;
margin-bottom:4px;
background:transparent;
border-radius:6px;
cursor:pointer;
transition:background 0.15s;
font-size:13px;
color:#c2c8cc;
}
.repl-item:hover{
background:#1f2937;
}
.repl-item.active{
background:#0f62fe;
color:#fff;
}
.main-content{
flex:1;
display:flex;
flex-direction:column;
}
.editor-section{
flex:1;
display:flex;
flex-direction:column;
}
.toolbar{
padding:8px 16px;
background:#1c2333;
border-bottom:1px solid #2b3245;
display:flex;
align-items:center;
gap:12px;
position:relative;
}
.menu-bar{
display:flex;
gap:4px;
}
.menu-item{
position:relative;
}
.menu-button{
padding:6px 12px;
background:transparent;
border:none;
color:#c2c8cc;
cursor:pointer;
font-size:13px;
border-radius:4px;
transition:background 0.15s;
}
.menu-button:hover{
background:#2b3245;
}
.dropdown-menu{
display:none;
position:absolute;
top:100%;
left:0;
background:#1c2333;
border:1px solid #2b3245;
border-radius:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
min-width:200px;
margin-top:0;
z-index:1000;
}
.menu-item:hover .dropdown-menu{
display:block;
}
.menu-option{
padding:10px 16px;
cursor:pointer;
font-size:13px;
color:#c2c8cc;
transition:background 0.15s;
}
.menu-option:hover{
background:#2b3245;
}
.menu-option:first-child{
border-radius:6px 6px 0 0;
}
.menu-option:last-child{
border-radius:0 0 6px 6px;
}
.menu-divider{
height:1px;
background:#2b3245;
margin:4px 0;
}
.menu-danger{
color:#da1e28;
}
.menu-danger:hover{
background:#da1e28;
color:#fff;
}
.current-repl{
flex:1;
font-weight:500;
color:#56d364;
font-size:14px;
}
.btn,.btn-primary,.btn-danger,.btn-icon,.btn-icon-small{
padding:7px 14px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:13px;
font-weight:500;
transition:all 0.15s;
}
.user-info{
margin-top:8px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:#c2c8cc;
font-size:12px;
}
.user-info .btn{
padding:6px 10px;
font-size:12px;
}
.btn{
background:#2b3245;
color:#c2c8cc;
}
.btn:hover{
background:#3d4458;
}
.btn:disabled{
opacity:0.4;
cursor:not-allowed;
}
.btn-primary{
background:#0f62fe;
color:#fff;
}
.btn-primary:hover{
background:#0353e9;
}
.btn-danger{
background:#da1e28;
color:#fff;
}
.btn-danger:hover{
background:#ba1b23;
}
.btn-icon{
padding:6px 12px;
background:transparent;
font-size:18px;
}
.btn-icon:hover:not(:disabled){
background:#2b3245;
}
.btn-icon-small{
padding:4px 8px;
background:transparent;
font-size:16px;
color:#c2c8cc;
}
.btn-icon-small:hover{
background:#2b3245;
}
.file-header{
padding:8px 12px;
background:#1c2333;
border-bottom:1px solid #2b3245;
display:flex;
align-items:center;
justify-content:space-between;
font-size:12px;
font-weight:600;
color:#c2c8cc;
text-transform:uppercase;
letter-spacing:0.5px;
}
.editor-container{
flex:1;
display:flex;
overflow:hidden;
}
.file-tree{
width:220px;
background:#1c2333;
border-right:1px solid #2b3245;
overflow-y:auto;
padding:8px;
}
.file-item,.folder-item{
padding:6px 12px;
margin:2px 0;
cursor:pointer;
border-radius:6px;
font-size:13px;
color:#c2c8cc;
transition:background 0.15s;
}
.file-item:hover,.folder-item:hover{
background:#1f2937;
}
.file-item.active{
background:#0f62fe;
color:#fff;
}
.folder-item{
font-weight:500;
color:#56d364;
}
.file-item.dragging{
opacity:0.5;
}
.folder-item.drag-over{
background:#0f62fe;
color:#fff;
border:2px dashed #56d364;
}
.editor-wrapper{
flex:1;
display:flex;
flex-direction:column;
}
.file-tabs{
display:flex;
background:#1c2333;
border-bottom:1px solid #2b3245;
padding:0 8px;
gap:2px;
}
.file-tab{
padding:10px 16px;
background:transparent;
border-radius:6px 6px 0 0;
cursor:pointer;
font-size:13px;
border:none;
display:flex;
align-items:center;
gap:8px;
color:#c2c8cc;
transition:background 0.15s;
}
.file-tab.active{
background:#0e1525;
color:#fff;
}
.file-tab:hover{
background:#1f2937;
}
.file-tab .close{
color:#7d8590;
font-weight:bold;
font-size:16px;
}
.file-tab .close:hover{
color:#e3e3e3;
}
.unsaved-dot{
color:#56d364;
font-size:16px;
}
#editor{
flex:1;
background:#0e1525;
}
.terminal-section{
height:300px;
background:#0e1525;
border-top:1px solid #2b3245;
display:flex;
flex-direction:column;
position:relative;
}
.terminal-resize-handle{
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:transparent;
cursor:ns-resize;
z-index:10;
}
.terminal-resize-handle:hover{
background:#0f62fe;
}
.terminal-resize-handle:active{
background:#0f62fe;
}
.terminal-header{
padding:10px 16px;
background:#1c2333;
border-bottom:1px solid #2b3245;
font-weight:600;
font-size:13px;
color:#c2c8cc;
display:flex;
align-items:center;
justify-content:space-between;
}
.terminal{
flex:1;
width:100%;
height:100%;
background:#0e1525;
padding:0;
overflow:hidden;
}
#terminal{
width:100%;
height:100%;
}
.context-menu{
position:fixed;
background:#1c2333;
border:1px solid #2b3245;
border-radius:6px;
box-shadow:0 4px 8px rgba(0,0,0,0.3);
z-index:1000;
min-width:150px;
}
.context-menu-item{
padding:10px 16px;
cursor:pointer;
font-size:13px;
color:#c2c8cc;
transition:background 0.15s;
}
.context-menu-item:hover{
background:#0f62fe;
color:#fff;
}
.context-menu-item:first-child{
border-radius:6px 6px 0 0;
}
.context-menu-item:last-child{
border-radius:0 0 6px 6px;
}
.context-menu-danger{
color:#da1e28;
}
.context-menu-danger:hover{
background:#da1e28;
color:#fff;
}
@media(max-width:768px){
.container{
flex-direction:column;
height:auto;
min-height:100vh;
}
.sidebar{
width:100%;
height:auto;
max-height:none;
border-right:none;
border-bottom:1px solid #2b3245;
flex-shrink:0;
}
.sidebar-header{
padding:12px;
}
.repl-list{
max-height:120px;
overflow-y:auto;
}
.main-content{
flex:1;
min-height:0;
overflow:hidden;
}
.editor-container{
flex-direction:column;
}
.file-tree{
width:100%;
max-height:100px;
border-right:none;
border-bottom:1px solid #2b3245;
overflow-x:auto;
white-space:nowrap;
display:flex;
flex-wrap:wrap;
gap:4px;
padding:6px;
}
.file-item,.folder-item{
padding:4px 8px;
font-size:12px;
display:inline-block;
white-space:nowrap;
}
.editor-wrapper{
flex:1;
min-height:200px;
}
.toolbar{
flex-wrap:wrap;
padding:6px 8px;
gap:6px;
}
.menu-bar{
order:-1;
width:100%;
justify-content:flex-start;
overflow-x:auto;
}
.menu-button{
font-size:12px;
padding:6px 10px;
white-space:nowrap;
}
.dropdown-menu{
min-width:180px;
position:fixed;
top:auto;
left:8px;
right:8px;
max-height:60vh;
overflow-y:auto;
}
.menu-option{
padding:10px 12px;
font-size:13px;
}
.current-repl{
width:100%;
font-size:12px;
order:1;
text-align:center;
padding:4px 0;
}
.terminal-section{
height:180px;
min-height:150px;
flex-shrink:0;
transition:height 0.3s ease;
}
.terminal-section.expanded{
height:calc(100vh - 200px)!important;
}
.terminal-section.minimized{
height:50px!important;
}
.terminal-section.minimized .terminal{
display:none;
}
.terminal-toggle-btn,.terminal-expand-btn{
display:none;
}
.terminal-header{
padding:8px 12px;
}
.file-tabs{
overflow-x:auto;
flex-wrap:nowrap;
-webkit-overflow-scrolling:touch;
}
.file-tab{
padding:8px 12px;
font-size:11px;
white-space:nowrap;
flex-shrink:0;
}
.btn,.btn-primary,.btn-danger{
padding:6px 10px;
font-size:11px;
}
.user-info{
flex-wrap:wrap;
justify-content:center;
}
}
@media(max-width:480px){
.sidebar{
padding:0;
}
.sidebar-header{
padding:10px;
}
.sidebar-header h2{
font-size:14px;
margin-bottom:8px;
}
.repl-list{
max-height:100px;
padding:4px;
}
.repl-item{
padding:8px 10px;
font-size:12px;
}
.file-tree{
max-height:80px;
padding:4px;
}
.file-item,.folder-item{
padding:4px 6px;
font-size:11px;
}
.toolbar{
padding:4px 6px;
gap:4px;
}
.toolbar .btn,.toolbar .btn-primary,.toolbar .btn-danger{
padding:5px 8px;
font-size:10px;
}
.menu-button{
padding:5px 8px;
font-size:11px;
}
.terminal-section{
height:250px;
min-height:200px;
}
.terminal-toggle-btn,.terminal-expand-btn{
display:inline-block;
}
.terminal-resize-handle{
height:8px;
background:rgba(15,98,254,0.2);
}
.terminal-resize-handle::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:40px;
height:3px;
background:#0f62fe;
border-radius:2px;
}
.file-tab{
padding:6px 10px;
font-size:10px;
}
.file-tab .close{
font-size:14px;
}
#editor{
font-size:12px;
}
.current-repl{
font-size:11px;
}
.user-info{
font-size:11px;
gap:4px;
}
.user-info .btn{
padding:4px 8px;
font-size:10px;
}
}
@media(max-width:360px){
.menu-bar{
gap:2px;
}
.menu-button{
padding:4px 6px;
font-size:10px;
}
.btn,.btn-primary,.btn-danger{
padding:4px 6px;
font-size:9px;
}
.terminal-section{
height:200px;
min-height:150px;
}
}