153 lines
2.9 KiB
CSS
153 lines
2.9 KiB
CSS
|
|
|
|
#frame_main {
|
|
display: flex;
|
|
width: 100%;
|
|
position:relative;
|
|
}
|
|
|
|
#frame_main #frame_side_panel {
|
|
position: sticky;
|
|
flex: 0;
|
|
flex-basis: var(--frame_side_panel_width);
|
|
background-color: var(--frame_bgcolor_sidebar);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
z-index: 101;
|
|
}
|
|
|
|
#frame_main #frame_body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
flex:1;
|
|
flex-basis: calc(100vh - var(--frame_side_panel_width));
|
|
}
|
|
|
|
#frame_main #frame_body #frame_top {
|
|
position: sticky;
|
|
top:0;
|
|
left:0;
|
|
width: 100%;
|
|
height: var(--frame_top_height);
|
|
background-color: var(--frame_bgcolor_top);
|
|
z-index: 101;
|
|
}
|
|
|
|
#frame_main #frame_body #frame_contents {
|
|
flex: 1;
|
|
flex-basis: calc(100vh - var(--frame_top_height));
|
|
width: 100%;
|
|
background-color: var(--frame_bgcolor_contents);
|
|
}
|
|
|
|
/*flex*/
|
|
.flexcol {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.flexrow {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flexstart {
|
|
justify-content: flex-start;
|
|
}
|
|
.flexend {
|
|
justify-content: flex-end;
|
|
}
|
|
.flexcenter {
|
|
justify-content: center;
|
|
}
|
|
.flexbetween {
|
|
justify-content: space-between;
|
|
}
|
|
.flexaround {
|
|
justify-content: space-around;
|
|
}
|
|
.flexevenly {
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.flexfillstart {
|
|
align-items: flex-start;
|
|
}
|
|
.flexfillend {
|
|
align-items: flex-end;
|
|
}
|
|
.flexfillcenter {
|
|
align-items: center;
|
|
}
|
|
.flexfillstrech {
|
|
align-items: stretch;
|
|
}
|
|
.flexfillbaseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.flex-auto { flex: auto ;}
|
|
.flex-1 { flex: 1; }
|
|
.flex-2 { flex: 2; }
|
|
.flex-3 { flex: 3; }
|
|
.flex-4 { flex: 4; }
|
|
.flex-5 { flex: 5; }
|
|
.flex-6 { flex: 6; }
|
|
.flex-7 { flex: 7; }
|
|
.flex-8 { flex: 8; }
|
|
.flex-9 { flex: 9; }
|
|
.flex-10 { flex: 10; }
|
|
.flex-11 { flex: 11; }
|
|
.flex-12 { flex: 12; }
|
|
|
|
.grow-0 { flex-grow: 0; }
|
|
.grow-1 { flex-grow: 1; }
|
|
.grow-2 { flex-grow: 2; }
|
|
.grow-3 { flex-grow: 3; }
|
|
.grow-4 { flex-grow: 4; }
|
|
.grow-5 { flex-grow: 5; }
|
|
.grow-6 { flex-grow: 6; }
|
|
.grow-7 { flex-grow: 7; }
|
|
.grow-8 { flex-grow: 8; }
|
|
.grow-9 { flex-grow: 9; }
|
|
.grow-10 { flex-grow: 10; }
|
|
.grow-11 { flex-grow: 11; }
|
|
.grow-12 { flex-grow: 12; }
|
|
|
|
.shrink-0 { flex-shrink: 0; }
|
|
.shrink-1 { flex-shrink: 1; }
|
|
.shrink-2 { flex-shrink: 2; }
|
|
.shrink-3 { flex-shrink: 3; }
|
|
.shrink-4 { flex-shrink: 4; }
|
|
.shrink-5 { flex-shrink: 5; }
|
|
.shrink-6 { flex-shrink: 6; }
|
|
.shrink-7 { flex-shrink: 7; }
|
|
.shrink-8 { flex-shrink: 8; }
|
|
.shrink-9 { flex-shrink: 9; }
|
|
.shrink-10 { flex-shrink: 10; }
|
|
.shrink-11 { flex-shrink: 11; }
|
|
.shrink-12 { flex-shrink: 12; }
|
|
|
|
.gap10 { gap: 10px; }
|
|
.gap20 { gap: 20px; }
|
|
.gap30 { gap: 30px; }
|
|
.gap40 { gap: 40px; }
|
|
.gap50 { gap: 50px; }
|
|
.gap60 { gap: 60px; }
|
|
.gap70 { gap: 70px; }
|
|
.gap80 { gap: 80px; }
|
|
.gap90 { gap: 90px; }
|
|
.gap100 { gap: 100px; }
|
|
.gap120 { gap: 120px; }
|
|
.gap150 { gap: 150px; }
|
|
.gap200 { gap: 200px; }
|
|
.gap250 { gap: 250px; }
|
|
.gap300 { gap: 300px; }
|
|
|
|
.posrel {
|
|
position: relative;
|
|
}
|
|
.posabs {
|
|
position: absolute;
|
|
} |