83 lines
1.4 KiB
CSS
83 lines
1.4 KiB
CSS
.App {
|
|
text-align: center;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #edeef0;
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
.controlPanel {
|
|
width: calc(100% - 20px);
|
|
height: 10px;
|
|
}
|
|
|
|
|
|
|
|
.toolbar {
|
|
float: left;
|
|
width: 204px;
|
|
margin: 4.5px 4px 0px 4px;
|
|
min-height: calc(100vh - 55px);
|
|
padding: 5px;
|
|
border: 2px solid #e3e8e6;
|
|
background-color: white;
|
|
position: sticky;
|
|
}
|
|
|
|
.toolbarElements {
|
|
width: 204px;
|
|
min-height: calc(100vh - 93px);
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.tabButtons {
|
|
display: flex;
|
|
flex-wrap: wrap; /* перенос строк */
|
|
}
|
|
|
|
.tabButtons [data-row='1'] { width: 51px; }
|
|
.tabButtons [data-row="2"] { width: 68px; border-bottom: 1px solid #ccc; }
|
|
|
|
.tabButtons button {
|
|
font-size: 12px;
|
|
padding: 2px 0px 2px 1px;
|
|
border: 1px solid #eee;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; /* троеточие */
|
|
|
|
}
|
|
|
|
.tabButtons button.activeTab {
|
|
background-color: #e0e0e0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.toolbarBlocks {
|
|
width: calc(100% - 21px);
|
|
height: calc(100% - 58px);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
position: sticky;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
|
|
.canvas {
|
|
left: 224px;
|
|
top: 35px;
|
|
border: 2px solid #e3e8e6;
|
|
width: calc(100% - 233px);
|
|
height: calc(100% - 45px);
|
|
position: fixed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dragging {
|
|
opacity: 0.7;
|
|
} |