72 lines
2.0 KiB
CSS
72 lines
2.0 KiB
CSS
/* src/Style/common.css */
|
||
|
||
/* Контейнер для вкладок */
|
||
.tabs {
|
||
display: flex;
|
||
gap: 5px;
|
||
/* Расстояние между вкладками */
|
||
padding: 5px;
|
||
background-color: #3d74c7;
|
||
/* Цвет фона */
|
||
border-bottom: 2px solid #195fc9;
|
||
/* Линия под вкладками */
|
||
overflow-x: auto;
|
||
/* Прокрутка, если вкладок много */
|
||
border-radius: 5px;
|
||
/* Скругление углов */
|
||
white-space: nowrap;
|
||
/* Запрет переноса текста */
|
||
}
|
||
|
||
/* Стили для отдельной вкладки */
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #3d74c7;
|
||
/* Цвет фона вкладки */
|
||
color: white;
|
||
/* Цвет текста */
|
||
padding: 5px 15px;
|
||
/* Отступы внутри вкладки */
|
||
border-radius: 5px 5px 0 0;
|
||
/* Скругление углов */
|
||
cursor: pointer;
|
||
/* Курсор при наведении */
|
||
flex-shrink: 0;
|
||
/* Запрет сжатия */
|
||
transition: background-color 0.3s ease;
|
||
/* Плавное изменение цвета */
|
||
}
|
||
|
||
/* Активная вкладка */
|
||
.tab.active {
|
||
background-color: #195fc9;
|
||
/* Цвет фона активной вкладки */
|
||
}
|
||
|
||
/* Кнопка закрытия вкладки */
|
||
.close-tab {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
/* Цвет крестика */
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
margin-left: 10px;
|
||
/* Отступ от текста */
|
||
padding: 0;
|
||
transition: color 0.3s ease;
|
||
/* Плавное изменение цвета */
|
||
}
|
||
|
||
/* Эффект при наведении на кнопку закрытия */
|
||
.close-tab:hover {
|
||
color: #ff6b6b;
|
||
/* Цвет крестика при наведении */
|
||
}
|
||
|
||
/* Эффект при наведении на вкладку */
|
||
.tab:hover {
|
||
background-color: #195fc9;
|
||
/* Цвет фона при наведении */
|
||
} |