You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
2.3 KiB
141 lines
2.3 KiB
.right_pane_code_wrap{
|
|
position: relative;
|
|
// justify-content: center;
|
|
// background-color: #222;
|
|
height: 100%;
|
|
// height: calc(100vh - 178px);
|
|
.code-title,
|
|
.controller-pane,
|
|
.pane_control_opts{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// padding: 0 30px;
|
|
// background: #000;
|
|
background: rgba(18,28,36,1);
|
|
color: #fff;
|
|
}
|
|
.code-title,
|
|
.pane_control_opts{
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.code-title{
|
|
height: 56px;
|
|
.code-icon{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
// .controller-pane{
|
|
// min-height: 56px;
|
|
// background-color: #222;
|
|
// }
|
|
.code-pane-wrap{
|
|
height: 800px;
|
|
// position: absolute;
|
|
// top: 56px;
|
|
// bottom: 56px;
|
|
// width: 100%;
|
|
}
|
|
|
|
.pane_control_area{
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
// height: 56px;
|
|
.control_tab{
|
|
position: absolute;
|
|
bottom: -325px;
|
|
width: 100%;
|
|
// transition: all .2s;
|
|
opacity: 0;
|
|
// animation: .3s ease-in-out move_up;
|
|
// &.active{
|
|
// bottom: 0;
|
|
// opacity: 1;
|
|
// }
|
|
&.move_up{
|
|
animation: move_up .3s ease-in;
|
|
}
|
|
&.move_up_final {
|
|
bottom: 0;
|
|
opacity: 1;
|
|
}
|
|
&.move_down{
|
|
animation: move_down .3s ease-in-out;
|
|
}
|
|
&.move_down_final{
|
|
bottom: -325px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
.pane_control_opts{
|
|
height: 56px;
|
|
}
|
|
|
|
.ant-tabs-bar{
|
|
padding: 0 10px;
|
|
margin: 0px;
|
|
border-bottom: transparent;
|
|
}
|
|
.ant-tabs-ink-bar{
|
|
bottom: 1px;
|
|
}
|
|
// .tab_ctx_area.pos_center{
|
|
// background: #222;
|
|
// }
|
|
.pane_control_opts{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
|
|
.setting_drawer{
|
|
.setting_h2{
|
|
line-height: 50px;
|
|
}
|
|
.setting_desc{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
.flex_item{
|
|
line-height: 32px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes move_up {
|
|
0%{
|
|
opacity: 0;
|
|
// bottom: -325px;
|
|
}
|
|
90%{
|
|
opacity: 0.5;
|
|
// bottom: 0px;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes move_down{
|
|
0%{
|
|
opacity: 1;
|
|
bottom: 0
|
|
}
|
|
10%{
|
|
opacity: .2;
|
|
}
|
|
20%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 0;
|
|
bottom: -325px;
|
|
}
|
|
}
|