cmps/static/style/appWhite.less

cmps is not only a server tool but also a powerful tool to design & make your component/UI quickly and best.

 @import "./lib/animate.min.less";
 @import "./qpf/css-vendor.less";
 ::-webkit-scrollbar {
     height: 4px;
     width: 4px;
     background: #fff;
     transition: all 0.3s ease-in-out;
     border-radius: 5px;
 }
 
 ::-webkit-scrollbar-button {
     display: none;
 }
 
 ::-webkit-scrollbar-thumb {
     width: 4px;
     min-height: 15px;
     background: #aaa !important;
     transition: all 0.3s ease-in-out;
     border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: #aaa !important;
 }
 
 body {
     margin: 0px;
     background-image: url(images/dark_dotted.png);
     overflow: hidden;
 }
 
 .qpf-ui-application>div>.qpf-container-item {
     width: 100%;
     height: 100%;
 }
 
 #CMP {
     font-family: "Microsoft YaHei","黑体" !important;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
     .qpf-ui-panel {
         border-radius: 0px;
         .qpf-panel-header {
             border-radius: 0px;
             box-shadow: none;
         }
     }
     .qpf-ui-icon-button {
         width: 30px;
         height: 30px;
         padding: 0px;
         .qpf-icon {
             background-size: 18px 18px;
             width: 30px;
             height: 30px;
             background-position: 50% 50%;
             background-repeat: no-repeat;
         }
     }
     .qpf-tab-tabs {
         padding: 0px;
         li {
             border-radius: 0px;
             margin-right: 0px;
             box-sizing: border-box;
             &.actived {
                 border-right: none;
                 border-left: none;
             }
         }
     }
     .qpf-ui-color {
         display: inline-block;
         height: 20px;
         .qpf-color-hex {
             border: none;
             color: #B6B6B6;
             float: left;
             height: 20px;
             line-height: 20px;
             margin-right: 10px;
         }
         .qpf-color-preview {
             width: 20px;
             height: 20px;
             cursor: pointer;
             float: left;
         }
     }
     .qpf-ui-label {
         color: #868686;
         text-shadow: 0px 0px 3px #000;
     }
     .qpf-panel-body {
         padding: 0px;
     }
     .qpf-ui-gradient {
         .qpf-gradient-preview {
             height: 20px;
             box-shadow: inset 0px 0px 5px #000;
         }
         .qpf-gradient-stops {
             height: 10px;
             position: relative;
             .qpf-gradient-stop {
                 position: absolute;
                 width: 0px;
             }
             .qpf-gradient-stop-inner {
                 margin-left: -6px;
                 width: 12px;
                 height: 14px;
                 background-image: url(images/slider-control-up.png);
             }
         }
     }
     .qpf-mask {
         position: absolute;
         z-index: 99;
         left: 0px;
         top: 0px;
         right: 0px;
         bottom: 0px;
         background: rgba(188, 188, 188, 0.41);
     }
     .qpf-modal {
         z-index: 100;
         .qpf-panel-body {
             padding: 10px;
             background: #323234;
         }
         .qpf-ui-inline {
             margin-top: 10px;
         }
     }
 }
 
 #Toolbar {
     background-color: #323234;
     box-shadow: 0px 0px 10px black;
     .qpf-ui-toolbar-group {
         margin: 0px 5px;
     }
     .qpf-ui-icon-button {
         width: 30px;
         height: 30px;
         margin: 0px 5px;
         box-shadow: none;
         border: none;
         background: none;
         .qpf-icon {
             width: 30px;
             height: 30px;
             background-size: 20px 20px;
             &.save {
                 background-image: url(images/save.svg);
             }
             &.load {
                 background-image: url(images/load.svg);
             }
             &.element {
                 background-image: url(images/element.svg);
             }
             &.image {
                 background-image: url(images/image.svg);
             }
             &.text {
                 background-image: url(images/text.svg);
             }
             &.function {
                 background-image: url(images/function.svg);
             }
             &.shell {
                 background-image: url(images/keyboard.svg);
             }
             &.module {
                 background-image: url(images/tree.svg);
             }
             &.timeline {
                 background-image: url(images/tab.svg);
             }
             &.embed {
                 background-image: url(images/embed.svg);
             }
             &.shuffle {
                 background-image: url(images/shuffle.svg);
             }
             &.changeBack {
                 background-image: url(images/delicious.svg);
             }
             &.zoom-in {
                 background-image: url(images/zoom-in.svg);
             }
             &.zoom-out {
                 background-image: url(images/zoom-out.svg);
             }
         }
         &:hover {
             background-color: #E7E7E7;
         }
     }
     .viewport-scale {
         line-height: 30px;
         height: 30px;
     }
     .viewport-size {
         padding-left: 20px;
         background-image: url(images/screen.svg);
         background-size: 15px 15px;
         background-repeat: no-repeat;
         background-position: 0% 50%;
         .qpf-ui-spinner {
             margin: 2px 3px;
         }
         input {
             width: 50px;
         }
     }
     .divider {
         width: 0px;
         height: 30px;
         border-left: 1px solid #444;
         border-right: 1px solid #222;
     }
 }
 
 #Viewport {
     background-color: white;
     box-shadow: 0px 0px 20px black;
     text-align: center;
     position: relative;
     overflow: scroll;
     #ViewportMain {
        //----网格背景
        //  background-image: -webkit-linear-gradient(rgb(200, 200, 200) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgb(200, 200, 200) 1px, transparent 1px), -webkit-linear-gradient(rgba(200, 200, 200, .3) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgba(200, 200, 200, .3) 1px, transparent 1px);
        //  background-image: -moz-linear-gradient(rgb(200, 200, 200) 1px, transparent 1px), -moz-linear-gradient(0deg, rgb(200, 200, 200) 1px, transparent 1px), -moz-linear-gradient(rgba(200, 200, 200, .3) 1px, transparent 1px), -moz-linear-gradient(0deg, rgba(200, 200, 200, .3) 1px, transparent 1px);
        // background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
        //----
        background-image: -webkit-linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
         // background-image: linear-gradient(rgb(200, 200, 200) 1px, transparent 1px),
         // linear-gradient(0deg, rgb(200, 200, 200) 1px, transparent 1px),
         // linear-gradient(rgba(200,200,200,.3) 1px, transparent 1px),
         // linear-gradient(0deg, rgba(200,200,200,.3) 1px, transparent 1px);
         background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
         background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
         position: absolute;
         -webkit-transform-origin: 0% 0%;
         -moz-transform-origin: 0% 0%;
         transform-origin: 0% 0%;
         -webkit-transition: -webkit-transform 0.4s ease-out;
         -moz-transition: -moz-transform 0.4s ease-out;
         transition: transform 0.4s ease-out;
     }
    //  .qpf-viewport-ruler-h{
    //      background-image : -webkit-linear-gradient(0deg, #645D5D 1px, transparent 1px);
    //      background-size: 100px 20px;
    //      background-position: -1px -1px;
    //      background-color:rgba(0, 0, 0, 0.79);
    //      position: absolute;
    //      height:20px;
    //      left:0px;
    //      right:0px;
    //      top:-20px;
    //  }
    //  .qpf-viewport-ruler-v{
    //      background-image : -webkit-linear-gradient(rgb(200, 200, 200) 1px, transparent 1px);
    //      background-size: 20px 100px;
    //      background-position: -1px -1px;
    //      background-color:rgba(0, 0, 0, 0.79);
    //      position: absolute;
    //      width:20px;
    //      left:-20px;
    //      bottom:0px;
    //      top:0px;
    //  }
     .element-select-outline {
         position: absolute;
         left: 0px;
         top: 0px;
         bottom: 0px;
         right: 0px;
         border: 1px solid #4e8ad7;
     }
     .resize-control {
         position: absolute;
         width: 6px;
         height: 6px;
         background-color: white;
         box-sizing: border-box;
         border: 1px solid #4e8ad7;
         // Control points of each direction
         &.tl {
             left: 0px;
             top: 0px;
             margin-left: -3px;
             margin-top: -3px;
         }
         &.tc {
             left: 50%;
             top: 0px;
             margin-left: -3px;
             margin-top: -3px;
         }
         &.tr {
             right: 0px;
             top: 0px;
             margin-right: -3px;
             margin-top: -3px;
         }
         &.lc {
             left: 0px;
             top: 50%;
             margin-left: -3px;
             margin-top: -3px;
         }
         &.rc {
             right: 0px;
             top: 50%;
             margin-right: -3px;
             margin-top: -3px;
         }
         &.bl {
             left: 0px;
             bottom: 0px;
             margin-left: -3px;
             margin-bottom: -3px;
         }
         &.bc {
             left: 50%;
             bottom: 0px;
             margin-left: -3px;
             margin-bottom: -3px;
         }
         &.br {
             right: 0px;
             bottom: 0px;
             margin-right: -3px;
             margin-bottom: -3px;
         }
     }
 }
 
 #Property {
     .qpf-panel-body {
         overflow-y: auto;
         overflow-x: hidden;
     }
     
     .qpf-ui-property {
         padding: 6px 3px;
         border-top: 1px solid #444;
         border-bottom: 1px solid #000;
         position: relative;
         .qpf-property-left {
             width: 60px;
             text-align: center;
             position: absolute;
            //  top: 50%;
            //  margin-top: -8px;
         }
         .qpf-property-right {
             margin-left: 70px;
             margin-right: 10px;
         }
     }
     .qpf-ui-spinner {
         input {
             width: 100px;
         }
     }
 }
 #Template,#Pool{
    background-color: #EBEBEB;
 }
 #Hierarchy,
 #Component,
 #Template,
 #Pool,
 #Page {
     .qpf-ui-list {
         height: 100%;
         width: 100%;
         background-color: #EBEBEB;
         // box-shadow: 0px 4px 5px #000;
         padding-top: 1px;
     }
     .qpf-ui-element {
         padding: 6px;
         padding-left: 10px;
         box-sizing: border-box;
         cursor: pointer;
         &.selected {
             background-color: #354C75;
             color: white;
         }
     }
     .qpf-page-desc {
         color: #999;
         margin-top: 3px;
         font-size: 12px;
     }
     .qpf-page-img {
         width: 100px;
     }
     .qpf-ui-list {
         overflow-y: auto;
         overflow-x: hidden;
         
     }
 }
 
 #Palette {
     box-shadow: 0px 0px 10px black;
     z-index: 10000;
     .qpf-panel-body {
         padding: 10px;
     }
 }
 
 .qpf-context-menu {
     position: absolute;
     z-index: 10001;
     padding: 5px 0px;
     background-color: rgba(255, 255, 255, 0.9);
     border-radius: 5px;
     box-shadow: 0px 0px 20px #3A3A3A;
     min-width: 100px;
     .qpf-ui-context-menu-item {
         padding: 5px 10px;
         cursor: pointer;
         &:hover {
             background-color: #356cf7;
             color: white;
         }
     }
     &:focus {
         outline: none;
     }
 }
 
 .qpf-ui-checkbox {
     label {
         vertical-align: text-top;
         color: #868686;
         font-size: 12px;
     }
 }
 
 .qpf-combobox-items {
     overflow-y: scroll;
     max-height: 200px;
 }
 
 .flexBox .qpf-children {
     display: box;
     display: -webkit-box;
     display: flex;
 }
 
 .mainContent,
 .propContent {
     position: relative !important;
     left: 0px !important;
 }
 
 .mainContent .switchDesign{
    width: 60px;
    position: absolute;
    right: 20px;
    top: 3px;
    z-index: 999;
    opacity: 0.8;
    span{
        background: #009688;
        color: #fff;
        padding: 5px;
        cursor: pointer;
        margin: 1px 0px;
        display: inline-block;
        width: 60px;
        text-align: center;
        &.cur{
            background: #00695C;
        }
    }
 }
 .mainContent{
    .cmp-umi, .cmp-cache{
        display: none;
    }
    #drawArrow{
        display: none;
    }
    #drawDiagram{
        opacity: 0;
    }
    // 隐藏timeline元素
    .cmp-timeline{
        display: none !important;
    }
    .cmp-func{
        text-align: left;
        &:before{
            background: #ff0039;
            content: '';
            height: 1px;
            width: 100%;
            position: absolute;
            left: 0px;
            z-index: -1;
        }
        &:after{
            background: #ff0039;
            content: '';
            height: 1px;
            width: 100%;
            position: absolute;
            left: 0px;
            z-index: -1;
        }
    }
 }
 #Viewport {
     width: auto !important;
     background: #191919;
 }
.f-fr{
    float: right;
}
.f-dn, .cmp-dn{
    display: none !important;
}
.CodeMirror-lint-tooltip {
    z-index: 999 !important;
}
.dataModal{
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 5px;
}
// base css
.f-fl {
    float: left;
}

.f-fr {
    float: right;
}

.f-line,
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f-cb:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: ".";
}

.f-2lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.f-3lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.f-4lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.leftTabContent{
    position: relative !important;
    left: 0px !important;
    & > .qpf-tab-header{
        float: left;
        width: 30px;
    }
    & > .qpf-tab-body{
        float: right;
        width: 200px;
        border: none;
        height: 100%;
        & > .qpf-tab-views{
            height: 100%;
            & > .qpf-ui-panel{
                height: 100% !important;
                 & > .qpf-panel-body{
                    height: 100% !important;
                }
            }
        }
    }
}

.leftTabContent > .qpf-tab-header > .qpf-tab-tabs > li{
    padding: 5px 0;
    line-height: 20px;
     a{
        margin: 0px auto;
        word-break: break-all; 
    }
}
.leftTabContent > .qpf-tab-header > .qpf-tab-tabs > li.actived{
    padding: 5px 0;
    line-height: 20px;
    background-color: #eee;
}