Spaces:
Running
Running
/* Reset and base styles */ | |
* { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
font-family: 'Inter', sans-serif; | |
background: linear-gradient(135deg, #f0f4f8, #d9e2ec); | |
display: flex; | |
min-height: 100vh; | |
color: #333; | |
overflow: hidden; | |
} | |
/* Sidebar styling */ | |
.sidebar { | |
width: 260px; | |
background: linear-gradient(135deg, #ffffff, #e0f7fa); | |
box-shadow: 2px 0 10px rgba(0,0,0,0.1); | |
flex-shrink: 0; | |
display: flex; | |
flex-direction: column; | |
padding: 30px 20px; | |
position: fixed; | |
height: 100%; | |
overflow-y: auto; | |
transition: width 0.3s ease, background 0.3s ease; | |
} | |
.sidebar h2 { | |
text-align: center; | |
margin-bottom: 40px; | |
font-family: 'Roboto', sans-serif; | |
font-weight: 700; | |
font-size: 1.8em; | |
color: #00796B; | |
background: linear-gradient(90deg, #00796B, #004D40); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
.sidebar a { | |
color: #555555; | |
padding: 12px 15px; | |
text-decoration: none; | |
font-size: 1em; | |
border-radius: 8px; | |
margin-bottom: 10px; | |
transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s; | |
display: flex; | |
align-items: center; | |
background: linear-gradient(135deg, #ffffff, #f9f9f9); | |
} | |
.sidebar a:hover { | |
background: linear-gradient(135deg, #e0f7fa, #ffffff); | |
color: #00796B; | |
transform: translateX(5px); | |
box-shadow: 0 4px 12px rgba(0,0,0,0.05); | |
} | |
.sidebar a.active { | |
background: linear-gradient(135deg, #80deea, #4dd0e1); | |
color: #004d40; | |
font-weight: 600; | |
box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
} | |
.sidebar a::before { | |
content: ''; | |
display: inline-block; | |
width: 8px; | |
height: 8px; | |
background-color: #004d40; | |
border-radius: 50%; | |
margin-right: 12px; | |
opacity: 0; | |
transition: opacity 0.3s; | |
} | |
.sidebar a.active::before { | |
opacity: 1; | |
} | |
/* Main content styling */ | |
.main-content { | |
margin-left: 260px; | |
padding: 30px; | |
flex: 1; | |
background: linear-gradient(135deg, #f9f9f9, #e0f2f1); | |
overflow-y: auto; | |
height: 100vh; | |
transition: margin-left 0.3s ease, background 0.3s ease; | |
} | |
/* Header */ | |
.header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 25px; | |
background: linear-gradient(90deg, #80deea, #4dd0e1); | |
padding: 15px 20px; | |
border-radius: 12px; | |
box-shadow: 0 4px 10px rgba(0,0,0,0.05); | |
} | |
.header h1 { | |
font-family: 'Roboto', sans-serif; | |
font-size: 2em; | |
color: #ffffff; | |
background: linear-gradient(90deg, #ffffff, #e0f7fa); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
/* Hidden Class */ | |
.hidden { | |
display: none; | |
} | |
/* Scrollbar Styling */ | |
#chat-box::-webkit-scrollbar, | |
#logs::-webkit-scrollbar { | |
width: 8px; | |
} | |
/* Responsive Adjustments */ | |
@media (max-width: 768px) { | |
.sidebar { | |
width: 220px; | |
} | |
.main-content { | |
margin-left: 220px; | |
} | |
} | |
@media (max-width: 600px) { | |
.sidebar { | |
position: relative; | |
width: 100%; | |
height: auto; | |
flex-direction: row; | |
overflow-x: auto; | |
padding: 15px 10px; | |
} | |
.sidebar h2 { | |
display: none; | |
} | |
.sidebar a { | |
margin-right: 10px; | |
margin-bottom: 0; | |
padding: 10px 12px; | |
font-size: 0.9em; | |
} | |
.main-content { | |
margin-left: 0; | |
padding: 20px 15px; | |
} | |
.header { | |
flex-direction: column; | |
align-items: flex-start; | |
} | |
.header h1 { | |
margin-bottom: 10px; | |
font-size: 1.5em; | |
} | |
} | |
/* Configuration Info */ | |
#configuration { | |
margin-top: 15px; | |
font-size: 0.9em; | |
color: #555555; | |
} | |
/* Controls Container Styling */ | |
#controls { | |
display: flex; | |
gap: 10px; | |
margin-bottom: 15px; | |
flex-wrap: wrap; | |
} | |
/* Button Styling */ | |
button { | |
background: linear-gradient(135deg, #00796B, #004D40); | |
border: none; | |
color: white; | |
padding: 12px 20px; | |
font-size: 1em; | |
border-radius: 8px; | |
cursor: pointer; | |
transition: background 0.3s, transform 0.2s, box-shadow 0.3s; | |
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
} | |
button:hover { | |
background: linear-gradient(135deg, #005D56, #00332E); | |
transform: translateY(-2px); | |
box-shadow: 0 4px 12px rgba(0,0,0,0.2); | |
} | |
button:disabled { | |
background: linear-gradient(135deg, #A5D6A7, #81C784); | |
cursor: not-allowed; | |
box-shadow: none; | |
} | |
/* Card Styling */ | |
.card { | |
background: linear-gradient(135deg, #ffffff, #f1f8e9); | |
border-radius: 16px; | |
box-shadow: 0 4px 20px rgba(0,0,0,0.05); | |
padding: 25px; | |
margin-bottom: 25px; | |
transition: transform 0.3s, box-shadow 0.3s, background 0.3s; | |
} | |
.card:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 6px 25px rgba(0,0,0,0.1); | |
background: linear-gradient(135deg, #e0f7fa, #ffffff); | |
} | |