saas-platform/frontend/saas-web/app/view/main/Main.scss

$circle-border-radius: dynamic(50%);
$base-border-color: dynamic(#ddd);
$lightest-color: dynamic(#fff);
$font-weight: dynamic(400);
$font-weight-bold: dynamic(500);

$accordion-header-background-color: dynamic($lightest-color);
$accordion-header-color: dynamic(#333);

$treelist-nav-ui: (
        padding: 0 10px,
        background-color: $panel-navigation-background-color,
        toolstrip-background-color: #32404e,
        tool-float-indicator-color: $panel-header-background-color,
        tool-float-indicator-width: 5px,
        tool-indicator-selected-color: $panel-header-background-color,
        tool-indicator-selected-width: 5px,
        tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
        item-expanded-background-color: #2c3845,
        item-line-height: $panel-navigation-item-line-height,
        row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
        row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
        item-icon-color: $panel-navigation-item-text-color,
        item-expander-color: #fff,
        item-text-color: #ADB3B8,
        item-icon-over-color: #fff,
        item-expander-over-color: #fff,
        item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
        item-text-font-size: 14px,
        item-icon-font-size: 18px,
        //item-icon-width: 44px,
        item-expander-font-size: 16px,
        item-expander-width: 24px,
        row-indicator-width: 5px,
        row-indicator-selected-color: $panel-header-background-color,
        row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
        row-indicator-over-color: transparent
);

.x-treelist-item-text{
    padding-left: 10px;
}

.main-right-tabpanel {
    
    .x-panel-bodyWrap {

        #main-tab-panel-body {
            background: #EEF4F9;
        }
    }
}

.main-logo-wrap {
    background-color: $base-color;
    height: 70px;

    font-size: 16px;
    font-weight: $font-weight-bold;
    color: $lightest-color;
    margin-left: 17px;

    .main-logo {
        background: #34BAF6;

        img {
            width: 54px;
            height: 54px;
            top: 5px;
            left: 16px;
            position: relative;
        }

        .logo-text {
            // font-family: 'pingFangSC-Regular';
            font-size: 18px;
            color: #FFFFFF;
            text-align: left;
            top: 23px;
            position: absolute;
            right: 28px;
        }
    }
}

.main-headerbar {
    padding: 0 30px 0 0;
    position: fixed;
    width: 100%;
    z-index: 10;
    border: none;

    .header-right-profile-image {
        border-radius: 20px;
        background: url(../../../../resources/images/default/user-profile-default.png) 0 0 no-repeat;
        background-position: center;
    }
}
.top-english-button {
    .x-btn-icon-el {
        width: 21px;
        height: 14px;
    }
}
.collapsed {
    .x-tree-elbow-img {
        display: none;
    }

    .x-tree-node-text {
        display: none;
    }
}
.x-grid-cell{
    position: relative;
}

.x-treelist-item-tool {
    height: $panel-navigation-item-line-height;

    &.hot-icon:after,
    &.new-icon:after {
        background: $panel-header-background-color;
        content: '';
    }
}

//Add border around html editor field
.x-html-editor-input {
    border: 1px solid #ccc;
}

.x-query-menu {
    width:68px !important;
}
.x-query-menu .x-menu-item-text-default.x-menu-item-indent-no-separator {
    margin-left: 11px !important;
}
.x-tbar-display  {
    margin-top: 2.5px !important;
}
.x-tbar-display .x-form-display-field-default {
    font: 400 16px/17px 'Microsoft YaHei';
}

.x-gudie-information{
    width: 64px;
    height: 64px;
    background: url(../../../../resources/images/guide/information.png) 0 0 no-repeat;
}

.x-gudie-end{
    width: 64px;
    height: 64px;
    background: url(../../../../resources/images/guide/end.png) 0 0 no-repeat;
}

.x-guide-background{
    background-size: 100% 100% !important;
    background: url(../../../../resources/images/guide/background.png) no-repeat;
}

.x-grid-checkcolumn-btn {
	margin-top: -1px;
    width: 34px;
    height: 21px;
    background: url(../../../../resources/images/grid/uncheck.png) 0 0 no-repeat;
}
.x-grid-checkcolumn-checked-btn {
	margin-top: 0px;
	width: 34px;
    height: 21px;
    background: url(../../../../resources/images/grid/check.png) 0 0 no-repeat;
}
body > .x-mask {
    background-image: none;
    background-color: rgba(142, 141, 141, 0.75);
}
.icon-usoftchina{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/usoftchina.png) 0 0 no-repeat; 
   
}
.icon-userGuite{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/userGuite.png) 0 0 no-repeat;
    background-size: 16px 16px;
    background-position: center;
}
.icon-userBook{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/userBook.png) 0 0 no-repeat; 
    background-size: 16px 16px;
    background-position: center;
}
.icon-commonQuestion{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/commonQuestion.png) 0 0 no-repeat; 
    background-size: 16px 16px;
    background-position: center;
}
.icon-serviceOnline{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/serviceOnline.png) 0 0 no-repeat; 
    background-size: 16px 16px;
    background-position: center;
}
.icon-accountCenter{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/accountCenter.png) 0 0 no-repeat; 
    background-size: 16px 16px;
    background-position: center;
}
.icon-feedback{
    margin-top: 0px;
    background: url(../../../../resources/images/nav/feedback.png) 0 0 no-repeat; 
    background-size: 16px 16px;
    background-position: center;
} 
.x-guide-mask{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}