89 lines
1.5 KiB
CSS
89 lines
1.5 KiB
CSS
.dashboard-container {
|
||
display: flex;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
/* Запрещаем появление скролла */
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
min-width: 400px;
|
||
max-width: calc(100vw - 250px);
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
/* Добавляем вертикальную прокрутку */
|
||
height: 100vh;
|
||
/* Ограничиваем высоту */
|
||
}
|
||
|
||
|
||
/* Вкладки */
|
||
.tabs {
|
||
display: flex;
|
||
gap: 5px;
|
||
padding: 5px;
|
||
background-color: #222;
|
||
border-bottom: 2px solid #444;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #333;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 5px 5px 0 0;
|
||
cursor: pointer;
|
||
max-width: 250px;
|
||
/* Ограничиваем максимальную ширину */
|
||
min-width: 100px;
|
||
/* Минимальная ширина */
|
||
flex-shrink: 0;
|
||
/* Не позволяет вкладкам сжиматься */
|
||
position: relative;
|
||
}
|
||
|
||
.tab.active {
|
||
background-color: #555;
|
||
}
|
||
|
||
.close-tab {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Контент */
|
||
.content {
|
||
background-color: #f9f9f9;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.default-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 50px;
|
||
}
|
||
|
||
.tab-content {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
h2 {
|
||
color: #444;
|
||
}
|
||
|
||
p {
|
||
color: #333;
|
||
} |