62 lines
2.4 KiB
CSS
62 lines
2.4 KiB
CSS
/* Wrapper for Frontend */
|
|
.app-frontend {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.app-frontend .frontend-topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.8rem 2rem;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
color: #333;
|
|
height: 60px;
|
|
}
|
|
.app-frontend .brand { display: flex; align-items: center; gap: 15px; font-weight: bold; }
|
|
.app-frontend .frontend-app-shell {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.app-frontend .contacts-panel { width: 300px; border-right: 1px solid #e5e7eb; padding: 1rem; background: #fff;}
|
|
.app-frontend .chat-panel { flex: 1; background: #f8f9fa; display: flex; flex-direction: column;}
|
|
.app-frontend .frontend-chat-header { padding: 1rem; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
.app-frontend .frontend-chat-body { flex: 1; padding: 1rem; overflow-y: auto; }
|
|
.app-frontend .frontend-chat-input-wrapper { padding: 1rem; border-top: 1px solid #e5e7eb; background: #fff; }
|
|
|
|
/* Wrapper for Admin */
|
|
.app-admin {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.app-admin .topbar {
|
|
height: 60px;
|
|
background: #25D366;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
}
|
|
.app-admin .brand { display: flex; align-items: center; gap: 15px; }
|
|
.app-admin .admin-shell { display: flex; flex: 1; background: #f3f4f6; }
|
|
.app-admin .admin-sidebar { width: 260px; background: white; padding: 20px; border-right: 1px solid #e5e7eb; }
|
|
.app-admin .admin-sidebar .nav-link {
|
|
color: #374151;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
.app-admin .admin-sidebar .nav-link:hover, .app-admin .admin-sidebar .nav-link.active {
|
|
background: #ecfdf5;
|
|
color: #059669;
|
|
font-weight: 600;
|
|
}
|
|
.app-admin .admin-content { flex: 1; padding: 20px; overflow-y: auto; }
|
|
.app-admin .section-card { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
|
|
.app-admin .stat-card { padding: 20px; border-radius: 12px; background: #f9fafb; border: 1px solid #e5e7eb; }
|
|
.app-admin .btn-success { background-color: #25D366; border-color: #25D366; color: white; }
|
|
.app-admin .btn-success:hover { background-color: #128C7E; border-color: #128C7E; }
|
|
.app-admin .toast-container { position: fixed; bottom: 20px; right: 20px; } |