bricks/bricks/css/bricks.css
2024-03-13 22:27:09 +08:00

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;
}