:root{
font-size:16px;
--font-sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono:'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
--bg-primary:#1c1c1c;
--bg-secondary:#2a2a2a;
--bg-tertiary:#383838;
--border-primary:#4a4a4a;
--text-primary:#e8e8e8;
--text-secondary:#a0a0a0;
--accent-primary:#f59e0b;
--accent-hover:#fbbf24;
--accent-glow:rgba(245, 158, 11, 0.15);
--danger-primary:#ef4444;
--danger-hover:#f87171;
--border-radius-sm:6px;
--border-radius-md:10px;
--border-radius-lg:16px;
--transition-speed:0.2s ease-in-out;
--sidebar-width:250px;
--panel-height:250px;
--status-bar-height:30px;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
body, html{
font-family:var(--font-sans);
background-color:var(--bg-primary);
color:var(--text-primary);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow:hidden;
height:100%;
width:100%;
}
.hidden{
display:none !important;
}
.p-2{
padding:1rem;
}
#dashboard-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 2.5rem;
background:linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary));
border-bottom:1px solid var(--border-primary);
}
#dashboard-header .logo i{
font-size:1.75rem;
color:var(--accent-primary);
}
#dashboard-header .logo h1{
font-size:1.25rem;
font-weight:600;
margin-left:0.75rem;
}
#dashboard-header .main-nav a{
color:var(--text-secondary);
text-decoration:none;
padding:0.5rem 1rem;
border-radius:var(--border-radius-sm);
font-weight:500;
transition:all var(--transition-speed);
display:inline-flex;
align-items:center;
gap:0.5rem;
}
#dashboard-header .main-nav a.active{
background-color:var(--accent-primary);
color:var(--bg-primary);
}
#dashboard-header .main-nav a:not(.active):hover{
background-color:var(--bg-tertiary);
color:var(--text-primary);
}
.btn{
background-color:var(--accent-primary);
color:var(--bg-primary);
border:none;
padding:0.75rem 1.25rem;
font-size:1rem;
font-weight:600;
border-radius:var(--border-radius-sm);
cursor:pointer;
display:inline-flex;
align-items:center;
gap:0.5rem;
transition:all var(--transition-speed);
}
.btn:hover{
background-color:var(--accent-hover);
transform:translateY(-2px);
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.modal-overlay{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:rgba(10, 10, 10, 0.7);
backdrop-filter:blur(5px);
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}
.modal-content{
background:var(--bg-secondary);
padding:2.5rem;
border-radius:var(--border-radius-lg);
width:90%;
max-width:500px;
border:1px solid var(--border-primary);
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.modal-header h2{
font-size:1.8rem;
margin-bottom:1rem;
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
}
.modal-body p{
margin-bottom:1.5rem;
color:var(--text-secondary);
line-height:1.6;
}
#projects-grid-container{
padding:2.5rem;
max-width:1400px;
margin:0 auto;
}
.projects-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:2.5rem;
}
.projects-header h2{
font-size:2rem;
font-weight:600;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
gap:1.5rem;
}
.project-card{
position:relative;
background:linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
border:1px solid var(--border-primary);
border-radius:var(--border-radius-md);
display:flex;
align-items:center;
gap:1.5rem;
padding:1.5rem;
cursor:pointer;
transition:all var(--transition-speed);
z-index:1;
}
.project-card:hover{
transform:translateY(-5px);
border-color:var(--accent-primary);
box-shadow:0 8px 25px rgba(0,0,0,0.4);
z-index:2;
}
.project-card .card-icon i{
font-size:2rem;
color:var(--accent-primary);
}
.project-card h3, .project-card p{
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
.project-card h3{
font-size:1.1rem;
font-weight:500;
margin-bottom:0.25rem;
}
.project-card p{
font-size:0.875rem;
color:var(--text-secondary);
}
#empty-state{
text-align:center;
grid-column:1 / -1;
color:var(--text-secondary);
padding:4rem;
border:2px dashed var(--border-primary);
border-radius:var(--border-radius-md);
display:flex;
flex-direction:column;
align-items:center;
gap:1.5rem;
}
#empty-state i{
font-size:3rem;
}
#settings-container{
padding:2.5rem;
max-width:800px;
margin:0 auto;
}
#settings-container h1{
margin-bottom:2.5rem;
font-size:2rem;
font-weight:600;
}
.settings-card{
background-color:var(--bg-secondary);
border:1px solid var(--border-primary);
border-radius:var(--border-radius-md);
margin-bottom:2rem;
overflow:hidden;
}
.settings-card h2{
padding:1rem 1.5rem;
font-size:1.1rem;
font-weight:500;
display:flex;
align-items:center;
gap:0.75rem;
background-color:var(--bg-tertiary);
}
.setting-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:1.5rem;
border-top:1px solid var(--border-primary);
}
.setting-item label{
font-weight:500;
}
.setting-item p{
color:var(--text-secondary);
max-width:60%;
}
.setting-item select, .setting-item input{
background-color:var(--bg-primary);
color:var(--text-primary);
border:1px solid var(--border-primary);
padding:0.5rem 0.75rem;
border-radius:var(--border-radius-sm);
min-width:150px;
transition:all var(--transition-speed);
}
.setting-item select:focus, .setting-item input:focus{
outline:none;
border-color:var(--accent-primary);
box-shadow:0 0 0 3px var(--accent-glow);
}
.danger-zone{
border-color:var(--danger-primary);
}
.danger-zone h2{
color:var(--danger-primary);
}
.danger-btn{
background-color:var(--danger-primary);
color:var(--text-primary);
}
.danger-btn:hover{
background-color:var(--danger-hover);
}
.project-menu-container{
position:absolute;
top:1rem;
right:1rem;
}
.project-menu-btn{
background:none;
border:none;
color:var(--text-secondary);
font-size:1rem;
padding:0.5rem;
border-radius:var(--border-radius-sm);
cursor:pointer;
transition:all var(--transition-speed);
}
.project-menu-btn:hover{
background-color:var(--bg-tertiary);
color:var(--text-primary);
}
.project-menu{
z-index:20;
position:absolute;
top:100%;
right:0;
background-color:var(--bg-tertiary);
border:1px solid var(--border-primary);
border-radius:var(--border-radius-sm);
box-shadow:0 5px 15px rgba(0,0,0,0.3);
width:180px;
overflow:hidden;
display:none;
}
.project-menu.active{
display:block;
}
.project-menu a{
display:flex;
align-items:center;
gap:0.75rem;
padding:0.75rem 1rem;
color:var(--text-primary);
text-decoration:none;
font-size:0.9rem;
transition:background-color var(--transition-speed);
}
.project-menu a:hover{
background-color:var(--accent-primary);
color:var(--bg-primary);
}
.danger-text{
color:var(--danger-primary) !important;
}
.danger-text:hover{
background-color:var(--danger-primary) !important;
color:var(--text-primary) !important;
}
.ide-container{
display:flex;
height:calc(100vh - var(--status-bar-height));
width:100vw;
position:relative;
}
#activity-bar{
flex-shrink:0;
width:50px;
background-color:var(--bg-primary);
border-right:1px solid var(--border-primary);
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding:0.75rem 0;
z-index:300;
}
#activity-bar a{
color:inherit;
}
#activity-bar i{
font-size:1.5rem;
padding:0.75rem;
color:var(--text-secondary);
transition:all var(--transition-speed);
cursor:pointer;
border-left:3px solid transparent;
width:100%;
text-align:center;
}
#activity-bar i:hover{
color:var(--text-primary);
}
#activity-bar i.active{
color:var(--accent-primary);
border-left-color:var(--accent-primary);
}
#side-bar{
flex-shrink:0;
width:var(--sidebar-width);
background-color:var(--bg-secondary);
border-right:1px solid var(--border-primary);
display:flex;
flex-direction:column;
overflow:hidden;
transition:width var(--transition-speed), min-width var(--transition-speed);
min-width:var(--sidebar-width);
z-index:200;
}
.ide-container.sidebar-collapsed #side-bar{
width:0;
min-width:0;
border-right:none;
}
.sidebar-header{
padding:0.75rem 1rem;
font-size:0.8rem;
color:var(--text-secondary);
font-weight:600;
letter-spacing:0.05em;
display:flex;
justify-content:space-between;
align-items:center;
flex-shrink:0;
text-transform:uppercase;
border-bottom:1px solid var(--border-primary);
}
.sidebar-actions .fa-xmark{
display:none;
}
#sidebar-content{
overflow-y:auto;
flex-grow:1;
min-width:var(--sidebar-width);
}
.sidebar-view{
display:none;
}
.sidebar-view.active{
display:block;
}
.explorer-actions{
display:flex;
justify-content:space-between;
align-items:center;
padding:0.5rem;
font-size:0.8rem;
color:var(--text-secondary);
}
.explorer-actions div i{
margin-left:0.5rem;
cursor:pointer;
}
#file-tree{
padding:0 0.5rem;
}
.file-item{
display:flex;
align-items:center;
gap:0.5rem;
padding:0.4rem 0.5rem;
font-size:0.9rem;
border-radius:var(--border-radius-sm);
cursor:pointer;
transition:background-color var(--transition-speed);
}
#file-tree .file-item span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.file-item:hover{
background-color:var(--bg-tertiary);
}
.file-item.active{
background-color:var(--accent-primary);
color:var(--bg-primary);
}
#main-content-wrapper{
flex-grow:1;
display:flex;
flex-direction:column;
overflow:hidden;
position:relative;
}
#editor-group{
flex-grow:1;
display:flex;
flex-direction:column;
overflow:hidden;
}
.editor-tabs{
display:flex;
flex-shrink:0;
background-color:var(--bg-primary);
overflow-x:auto;
}
.editor-tabs .tab{
background-color:var(--bg-tertiary);
padding:0.6rem 1rem;
border-right:1px solid var(--border-primary);
display:flex;
align-items:center;
gap:0.5rem;
font-size:0.9rem;
cursor:pointer;
color:var(--text-secondary);
white-space:nowrap;
}
.editor-tabs .tab.active{
background-color:var(--bg-secondary);
color:var(--text-primary);
}
.editor-tabs .tab .tab-close{
margin-left:0.5rem;
padding:0.25rem;
border-radius:50%;
line-height:1;
}
.editor-tabs .tab .tab-close:hover{
background-color:rgba(255,255,255,0.2);
}
#editor-container{
height:100%;
overflow:hidden;
}
#panel{
flex-shrink:0;
height:var(--panel-height);
background-color:var(--bg-secondary);
border-top:1px solid var(--border-primary);
display:flex;
flex-direction:column;
transition:height var(--transition-speed);
}
.ide-container.panel-collapsed #panel{
height:30px;
}
.panel-tabs{
display:flex;
gap:1.5rem;
padding:0 1rem;
border-bottom:1px solid var(--border-primary);
flex-shrink:0;
overflow-x:auto;
height:30px;
}
.panel-tabs .tab{
padding:0.6rem 0.25rem;
font-size:0.9rem;
color:var(--text-secondary);
cursor:pointer;
border-bottom:2px solid transparent;
transition:all var(--transition-speed);
text-transform:uppercase;
white-space:nowrap;
}
.panel-tabs .tab.active{
color:var(--text-primary);
border-bottom-color:var(--accent-primary);
}
.panel-content{
flex-grow:1;
position:relative;
}
.panel-view{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
overflow:auto;
}
.panel-view.active{
display:block;
}
#terminal-container div{
height:100%;
}
#terminal-container{
height:100%;
--color:var(--text-primary);
--background:var(--bg-secondary);
--animation-duration:0;
}
#preview-iframe{
width:100%;
height:100%;
border:none;
background-color:white;
border-radius:var(--border-radius-sm);
}
#console-container{
font-family:var(--font-mono);
font-size:0.9rem;
padding:0.5rem;
}
.console-log, .console-error{
padding:0.25rem;
border-bottom:1px solid var(--border-primary);
}
.console-error{
color:var(--danger-primary);
}
#status-bar{
position:fixed;
bottom:0;
left:0;
width:100%;
height:var(--status-bar-height);
background-color:var(--bg-primary);
border-top:1px solid var(--border-primary);
display:flex;
justify-content:space-between;
align-items:center;
padding:0 1rem;
font-size:0.8rem;
color:var(--text-secondary);
z-index:400;
}
.status-left, .status-right{
display:flex;
align-items:center;
gap:1rem;
}
.run-btn{
background:none;
border:none;
color:var(--text-primary);
cursor:pointer;
font-size:0.9rem;
display:flex;
align-items:center;
gap:0.5rem;
padding:0.25rem 0.5rem;
border-radius:var(--border-radius-sm);
transition:background-color var(--transition-speed);
}
.run-btn:hover{
background-color:var(--bg-tertiary);
}
.run-btn i{
color:#22c55e;
}
#panel-toggle-btn{
cursor:pointer;
}
.mobile-overlay{
display:none;
}
.search-container{
padding:1rem;
}
.search-container input{
width:100%;
background-color:var(--bg-primary);
color:var(--text-primary);
border:1px solid var(--border-primary);
padding:0.5rem 0.75rem;
border-radius:var(--border-radius-sm);
}
#search-results{
margin-top:1rem;
}
.runtime-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:1rem;
border-bottom:1px solid var(--border-primary);
}
.runtime-info{
display:flex;
align-items:center;
gap:1rem;
}
.runtime-info i{
font-size:2rem;
color:var(--accent-primary);
width:30px;
text-align:center;
}
.runtime-info h4{
font-size:1rem;
font-weight:500;
}
.runtime-info p{
font-size:0.8rem;
color:var(--text-secondary);
}
.btn-install-runtime{
background-color:var(--bg-tertiary);
color:var(--text-primary);
border:1px solid var(--border-primary);
padding:0.5rem 1rem;
border-radius:var(--border-radius-sm);
cursor:pointer;
}
.btn-install-runtime:hover:not(:disabled){
background-color:var(--accent-primary);
color:var(--bg-primary);
}
.btn-install-runtime:disabled{
cursor:not-allowed;
opacity:0.5;
}
@media (max-width: 800px){
#side-bar{
position:absolute;
height:100%;
left:0;
transform:translateX(-100%);
transition:transform 0.3s ease-in-out;
}
.ide-container.sidebar-visible-mobile #side-bar{
transform:translateX(0);
box-shadow:5px 0 15px rgba(0,0,0,0.4);
}
.sidebar-actions .fa-xmark{
display:inline-block;
}
.mobile-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:150;
display:none;
}
.ide-container.sidebar-visible-mobile .mobile-overlay{
display:block;
}
}