73 lines
1.7 KiB
CSS
73 lines
1.7 KiB
CSS
/* Основной контейнер */
|
||
.dashboard-container {
|
||
display: flex;
|
||
height: 100vh;
|
||
width: calc(100vw - 20px); /* Учитываем отступ */
|
||
overflow: hidden;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
/* Сайдбар */
|
||
.sidebar {
|
||
height: 100vh;
|
||
background-color: #3d74c7;
|
||
color: white;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
overflow: hidden;
|
||
transition: width 0.2s ease;
|
||
/* Плавное изменение ширины */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Элемент для перетаскивания */
|
||
.sidebar-resizer {
|
||
width: 5px;
|
||
/* Ширина элемента перетаскивания */
|
||
height: 100%;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
cursor: ew-resize;
|
||
/* Курсор "изменить размер" */
|
||
transition: background-color 0.2s ease;
|
||
z-index: 1000;
|
||
/* Убедимся, что элемент поверх других */
|
||
}
|
||
|
||
.sidebar-resizer:hover {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
/* Эффект при наведении */
|
||
}
|
||
|
||
/* Основной контент */
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
margin-left: 50px;
|
||
transition: margin-left 0.2s ease;
|
||
overflow: auto; /* Позволяет прокручивать контент, если он не влезает */
|
||
}
|
||
|
||
/* Контент */
|
||
.content {
|
||
background-color: #f9f9f9;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 5px rgba(29, 1, 1, 0.521);
|
||
max-width: 100%; /* Гарантируем, что контент не выйдет за границы */
|
||
overflow: auto; /* Включаем скролл, если нужно */
|
||
}
|
||
|
||
/* Заголовки */
|
||
h2 {
|
||
color: #444;
|
||
}
|
||
|
||
p {
|
||
color: #333;
|
||
} |