Удаление лишних элементов css
This commit is contained in:
Ellina Sohnenko
parent
28de8921e5
commit
df37ab9e88
108
src/App.css
108
src/App.css
@ -3,7 +3,7 @@ html, body, #root {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; /* Запрещает появление скроллбаров у самого окна браузера */
|
||||
overflow: hidden;
|
||||
background-color: #edeef0;
|
||||
}
|
||||
|
||||
@ -20,11 +20,10 @@ html, body, #root {
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
/* Главный контейнер для тулбара и холста */
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: calc(100vh - 40px); /* Вычитаем высоту панели управления */
|
||||
height: calc(100vh - 40px); /* - высота панели управления */
|
||||
min-height: calc(100vh - 65px);
|
||||
position: relative;
|
||||
}
|
||||
@ -36,7 +35,6 @@ html, body, #root {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Стилизация холста ReactFlow под твой старый дизайн */
|
||||
.canvas-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
@ -45,7 +43,6 @@ html, body, #root {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Твоя старая панель управления */
|
||||
.controlPanel {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
@ -59,7 +56,6 @@ html, body, #root {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* --- ОСТАЛЬНЫЕ ТВОИ КЛАССЫ ОСТАВЛЯЕМ ДЛЯ СЛЕДУЮЩИХ КОМПОНЕНТОВ --- */
|
||||
.toolbar {
|
||||
width: 218px;
|
||||
margin: 4.5px 4px 0px 4px;
|
||||
@ -101,21 +97,20 @@ html, body, #root {
|
||||
|
||||
.toolbarBlocks {
|
||||
width: 100%;
|
||||
max-height: calc((100% - 58px) / 3 * 2);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Пульсация для портов (пригодится далее) */
|
||||
@keyframes pulse {
|
||||
from { r: 4; stroke: rgba(255, 215, 0, 0.4); stroke-width: 0; }
|
||||
to { r: 7; stroke: rgba(255, 215, 0, 1); stroke-width: 3; }
|
||||
}
|
||||
|
||||
|
||||
/* Стили самого контейнера блока */
|
||||
.custom-fbd-block {
|
||||
background-color: whitesmoke;
|
||||
border: 1.5px solid black;
|
||||
@ -126,7 +121,6 @@ html, body, #root {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Стили текста названия внутри блока */
|
||||
.custom-fbd-block .block-title {
|
||||
padding-top: 6px;
|
||||
font-size: 14px;
|
||||
@ -135,23 +129,18 @@ html, body, #root {
|
||||
}
|
||||
|
||||
|
||||
/* Обычное состояние — белый фон */
|
||||
.toolbarLines svg {
|
||||
background-color: white;
|
||||
transition: background-color 0.2s ease; /* Плавное переключение цвета */
|
||||
transition: background-color 0.2s ease;
|
||||
border: 0px solid #e3e8e6;
|
||||
}
|
||||
|
||||
/* Активное состояние — серый фон */
|
||||
.toolbarLines svg.activeLine {
|
||||
background-color: #e3e8e6; /* Можно использовать 'gray', '#808080' или любой оттенок */
|
||||
/*border: 2px solid #fff;*/
|
||||
background-color: #e3e8e6;
|
||||
border: 0px solid #e3e8e6;
|
||||
}*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Родной контейнер сетки линий связи из твоего старого проекта */
|
||||
.toolbarLines {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -159,28 +148,26 @@ html, body, #root {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* Ровно 2 колонки */
|
||||
grid-template-columns: 1fr 1fr;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Общие базовые стили кнопок-линий: без закруглений, без зазоров */
|
||||
.toolbarLines button {
|
||||
margin: 0 !important; /* Убираем любые отступы между кнопками */
|
||||
border: 1px solid #e3e8e6 !important; /* Твоя старая рамка */
|
||||
border-radius: 0 !important; /* Намертво убираем скругления краев */
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid #e3e8e6 !important;
|
||||
border-radius: 0 !important;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Обычное дефолтное состояние кнопок линий — белый фон */
|
||||
.toolbarLines button.notActiveEdgeTab {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
/* Активное состояние — серый фон, жирный текст (теперь цвет будет меняться при клике!) */
|
||||
.toolbarLines button.activeEdgeTab {
|
||||
background-color: #e3e8e6 !important;
|
||||
font-weight: bold;
|
||||
@ -207,7 +194,6 @@ html, body, #root {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Мини-кружочки портов для превью блоков */
|
||||
.preview-port {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
@ -215,74 +201,13 @@ html, body, #root {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* --- Сетка блоков в тулбаре --- */
|
||||
.toolbarBlocks {
|
||||
width: 100%;
|
||||
max-height: calc((100% - 58px) / 3 * 2);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* 2 столбика */
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Настройки оформления мини-блоков в тулбаре */
|
||||
.toolbar-block {
|
||||
background-color: whitesmoke;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
font-family: Arial, sans-serif;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
/* --- Сетка линий связи внизу тулбара --- */
|
||||
.toolbarLines {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* Строго 2 столбика */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Кнопки типов линий: без зазоров, без скруглений */
|
||||
.toolbarLines button {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid #e3e8e6 !important;
|
||||
border-radius: 0 !important;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Векторный SVG внутри кнопки пропускает цвета сквозь себя */
|
||||
.toolbarLines button svg {
|
||||
background: transparent !important; /* Фоном управляет сама кнопка */
|
||||
background: transparent !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Обычное состояние кнопок-линий */
|
||||
.toolbarLines button.notActiveConnectionTab {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
/* Активное состояние кнопок-линий — теперь серая заливка четко видна */
|
||||
.toolbarLines button.activeConnectionTab {
|
||||
background-color: #e3e8e6 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Кнопки в шапке управления */
|
||||
.control-button {
|
||||
font-size: 13px;
|
||||
border: none;
|
||||
@ -306,6 +231,7 @@ html, body, #root {
|
||||
background-color: #D8000A;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clear-button:hover {
|
||||
background-color: #a80007;
|
||||
}
|
||||
}
|
||||
@ -112,7 +112,7 @@ function Toolbar({ activeEdgeType, onChangeEdgeType }) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/*Линии*/}
|
||||
{/*Соединения*/}
|
||||
<div className = "toolbarLines" ref = {containerRef}>
|
||||
{LINES_TYPES.map((line) => (
|
||||
<ToolbarLine
|
||||
|
||||
@ -61,7 +61,6 @@ export const ToolbarBlock = memo(({ block, onDragStart }) => {
|
||||
);
|
||||
})
|
||||
|
||||
// 2. Компонент превью линии связи
|
||||
export function ToolbarLine({ line, caseWidth, isActive, onClick }) {
|
||||
return (
|
||||
<button
|
||||
@ -69,18 +68,18 @@ export function ToolbarLine({ line, caseWidth, isActive, onClick }) {
|
||||
onClick={() => onClick && onClick(line.type)}
|
||||
style={{
|
||||
width: `${caseWidth}px`,
|
||||
height: `${caseWidth / 2.5}px` // Пропорциональная высота
|
||||
height: `${caseWidth / 2.5}px`
|
||||
}}
|
||||
>
|
||||
<svg>
|
||||
<line
|
||||
x1="10%" y1="50%"
|
||||
x2="90%" y2="50%"
|
||||
stroke={line.stroke}
|
||||
strokeWidth="2"
|
||||
strokeDasharray={line.dasharray}
|
||||
x1 = "13%" y1 = "50%"
|
||||
x2 = "87%" y2 = "50%"
|
||||
stroke = {line.stroke}
|
||||
strokeWidth = "2"
|
||||
strokeDasharray = {line.dasharray}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user