EasyUI内部CSS文件解析

 

.panel {
    overflow: hidden;/*溢出*/
    text-align: left;
    margin: 0;
    border: 0;
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
}
.panel-header,
.panel-body {
    border-width: 1px;/*面板边框宽度*/
    border-style: solid;/*面板边框类型*/
}
.panel-header {
    padding: 5px;/*面板头部填充宽度*/
    position: relative;
}

.panel-with-icon {
    padding-left: 18px;/*面板头部文字距离左侧图标的距离*/
}
.panel-icon,
.panel-tool {/*面板右侧工具：收缩 放大*/
    position: absolute;
    top: 50%;/*工具图标距离顶部的位置*/
    margin-top: -8px;/*工具图标向下移动多少*/
    height: 16px;/*图标大小不能大于16，只能缩小*/
    overflow: hidden;
}
.panel-icon {
    left: 5px;/*面板头部图标距离面板左侧的距离*/
    width: 16px;/*两个功能差不多*/
}
.panel-tool {
    right: 5px;/*面板头部右侧工具距离右侧的距离*/
    width: auto;
}
.panel-tool a {
    display: inline-block;
    width: 16px;
    height: 16px;
    opacity: 0.6;/*工具透明度0时就消失了*/
    filter: alpha(opacity=60);
    margin: 0 0 0 2px;/*每个工具之间距离 修改最后一个可以改变间隔  其余的就没间隔了*/
    vertical-align: top;
}
/*面板工具鼠标悬停的样式*/
.panel-tool a:hover {
    opacity: 1;/*鼠标悬停时工具的透明度0时就消失了*/
    filter: alpha(opacity=100);
    background-color: #eaf2ff;/*鼠标悬停时的边框颜色*/
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

.panel-header,
    /*面板所有边框颜色*/
.panel-body {
    border-color: #95B8E7;
}
.panel-header {
    background-color: #E0ECFF;/*面板体部颜色  事先把下面代码扔掉*/
    background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
    background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
    background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
    background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
}
/*面板体部即空白处*/
.panel-body {
    background-color: #ffffff;/*面板空白处颜色即体部*/
    color: #000000;/*字体颜色*/
    font-size: 12px;/*字体大小*/
}
/*面板title*/
.panel-title {
    font-size: 12px;/*字体大小*/
    font-weight: bold;
    color: #0E2D5F;/*字体颜色*/
    height: 16px;/*面板title头部高度*/
    line-height: 16px;/*字距离顶部距离*/
}
.accordion {
    overflow: hidden;
    border-width: 1px;/*边框  只局限于外围边框*/
    border-style: solid;
}
.accordion .accordion-header {
    border-width: 0 0 1px;
    cursor: pointer;
}
.accordion .accordion-body {
    border-width: 0 0 1px;
}
.accordion-noborder {
    border-width: 0;
}
.accordion-noborder .accordion-header {
    border-width: 0 0 1px;
}
.accordion-noborder .accordion-body {
    border-width: 0 0 1px;
}
.accordion-collapse {
    background: url('images/accordion_arrows.png') no-repeat 0 0;
}
.accordion-expand {
    background: url('images/accordion_arrows.png') no-repeat -16px 0;
}
.accordion {
    background: #ffffff;/*背景颜色 只限于标题外*/
    border-color: #95B8E7;/*外围边框颜色*/
}
.accordion .accordion-header {
    background: #E0ECFF;/*头部 标题 头部背景颜色*/
    filter: none;
}
.accordion .accordion-header-selected {
    background: #ffe48d;/*标题选中时的颜色*/
}
.accordion .accordion-header-selected .panel-title {
    color: red;/*标题选中时的字体颜色*/
}

.tabs-header {
    border-width: 1px;/*头部边框宽度top*/
    border-style: solid;
    border-bottom-width: 0;/*头部边框  底边宽度*/
    position: relative;
    padding: 0;
    padding-top: 2px;
    overflow: hidden;
}
.tabs-header-plain {
    border: 0;
    background: transparent;
}
.tabs-scroller-left,
.tabs-scroller-right {
    position: absolute;
    top: auto;
    bottom: 0;
    width: 18px;
    font-size: 1px;
    display: none;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
}
.tabs-scroller-left {
    left: 0;
}
.tabs-scroller-right {
    right: 0;
}
.tabs-tool {
    position: absolute;
    bottom: 0;
    padding: 1px;
    overflow: hidden;
    border-width: 1px;/*头部 右侧工具边框  0 时就没有了*/
    border-style: solid;
}

.tabs-title {
    font-size: 12px;/*标题字体的大小*/
}
.tabs-closable {
    padding-right: 8px;
}
.tabs-panels {
    margin: 0px;
    padding: 0px;
    border-width: 1px;/*选项卡边框宽度  左右下*/
    border-style: solid;
    border-top-width: 0;
    overflow: hidden;
}



/*验证输入框无效状态下的 颜色*/
.validatebox-invalid {
    background-image: url('images/validatebox_warning.png');
    background-repeat: no-repeat;
    background-position: right center;
    border-color: #ffa8a8;/*边框颜色*/
    background-color: #fff3f3;/*验证框输入信息时的颜色  若输入正确符合要求  则变为原来颜色  否则保持现在颜色*/
    color: #000;/*字体颜色*/
}
.tooltip {
    position: absolute;
    display: none;
    z-index: 9900000;
    outline: none;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 5px;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

/*工具提示  提示框  提示信息*/

.tooltip-content {
    font-size: 12px;/*提示信息字体大小*/
}
.tooltip-arrow-outer,
.tooltip-arrow/*箭头*/ {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-style: solid;
    border-width: 6px;
    border-color: transparent;
    _border-color: tomato;
    _filter: chroma(color=tomato);
}



}