278 lines
3.6 KiB
CSS
Executable File
278 lines
3.6 KiB
CSS
Executable File
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
overflow: auto;
|
|
display: flex;
|
|
}
|
|
|
|
.griddata {
|
|
display: grid;
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
.modal {
|
|
display:none;
|
|
position: absolute;
|
|
padding: 10px;
|
|
color: #e8e8e8;
|
|
background-color: rgba(0.3, 0.3, 0.3, 1);
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.modal>.title {
|
|
background-color: #a0a0a0;
|
|
}
|
|
|
|
.message {
|
|
padding: 10px;
|
|
width: 30%;
|
|
height: 30%;
|
|
background-color: #f0f0f0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.error {
|
|
padding: 10px;
|
|
width: 30%;
|
|
height: 30%;
|
|
background-color: #f0f0f0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.message>.title {
|
|
background-color: #3030f0;
|
|
}
|
|
|
|
.vscroll {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.hscroll {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.scroll {
|
|
overflow:scroll;
|
|
}
|
|
|
|
.error>.title {
|
|
background-color: #f03030;
|
|
}
|
|
|
|
.vcontainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.vbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hcontainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.hbox {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.fixitem {
|
|
flex:none;
|
|
}
|
|
|
|
.filler, .hfiller, .vfiller {
|
|
flex: auto;
|
|
// overflow:auto;
|
|
}
|
|
|
|
.vfiller .vbox:last-child {
|
|
overflow-x: overlay;
|
|
}
|
|
|
|
.vline {
|
|
width:1px;
|
|
height:100%;
|
|
background-colir:#999;
|
|
}
|
|
|
|
.hline {
|
|
height:1px;
|
|
width:100%;
|
|
background-colir:#999;
|
|
}
|
|
.hfiller::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.flc {
|
|
width: 203px;
|
|
overflow-y: scroll;
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.vtoolbar {
|
|
heigth: 100%;
|
|
background-color: #f1f1f1;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.selected {
|
|
background-color: #d4d4d4;
|
|
}
|
|
|
|
.htoolbar {
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #f1f1f1;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.toolbar-button {
|
|
background-color: inherit;
|
|
float: left;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 14px 16px;
|
|
transition: 0.3s;
|
|
border: 1px solid #888;
|
|
}
|
|
|
|
.toolbar-button-active {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.tabpanel {
|
|
background-color: #ededed;
|
|
border: 3px solid #888;
|
|
}
|
|
|
|
.tabpanel-content {
|
|
background-color: #f8f8f8;
|
|
border: 2px solid #888;
|
|
}
|
|
|
|
.multicolumns {
|
|
column-width: 340px;
|
|
colomn-gap: 10px';
|
|
overflow-x:none;
|
|
}
|
|
|
|
.popup {
|
|
z-index: 1000;
|
|
position: absolution;
|
|
background-color: #f1f1f1;
|
|
border: 1px solid #c1c1c1;
|
|
}
|
|
|
|
.inputbox {
|
|
background-color: #cccccc;
|
|
border: 1px solid #bbbbbb;
|
|
padding: 10px;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
button[tooltip]:hover::after {
|
|
content: attr(tooltip);
|
|
display: block;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
div[tooltip]:hover::after {
|
|
content: attr(tooltip);
|
|
display: block;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
input[tooltip],
|
|
div[tooltip] {
|
|
width: max-content;
|
|
margin: auto;
|
|
}
|
|
|
|
.datagrid {
|
|
display:flex;
|
|
flex-direction:column;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
.datagrid-grid {
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: auto;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.datagrid-left {
|
|
height:100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
}
|
|
.datagrid-left>.scrollbar {
|
|
width:0px;
|
|
opacity:0;
|
|
}
|
|
.datagrid-right {
|
|
flex:1 0 ;
|
|
height:100%;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.grid_header, .grid_footer {
|
|
height: 50px;
|
|
background-color: blue;
|
|
}
|
|
.datagrid-row {
|
|
flex:0 0 150px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.datagrid-body {
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Flex 布局 */
|
|
.accordion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.accordion-item {
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 5px;
|
|
}
|
|
.accordion-item-header {
|
|
padding: 10px;
|
|
background-color: #eeeeee;
|
|
}
|
|
.accordion-item-info {
|
|
padding: 10px;
|
|
background-color: #f0f0f0;
|
|
cursor: pointer;
|
|
}
|
|
.accordion-item-content {
|
|
padding: 10px;
|
|
background-color: #ffffff;
|
|
}
|