/** * 所有构件样式规则 **/ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-widget { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; color: #000000; line-height: 1.5; font-size: 12px; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; -webkit-font-smoothing: antialiased; outline: none; display: inline-block; vertical-align: top; position: relative; top: 0; left: 0; } .fui-widget.fui-selectable { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; -webkit-user-drag: text; } .fui-widget * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; } .fui-widget.fui-disabled { opacity: 0.3!important; } .fui-widget.fui-hide { display: none!important; } .fui-widget.fui-mask-animate { -webkit-transition: all 0.2s; } .fui-widget.fui-mask-hint { -webkit-transform: perspective(600px) translateZ(30px); } /** * 容器类通用样式 **/ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-container { overflow: hidden; position: relative; top: 0; left: 0; } .fui-container.fui-disabled { opacity: 1!important; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-button-menu { border: 1px solid white; } .fui-button-menu:HOVER { border-color: #d5e1f2; } .fui-button-menu.fui-button-active { border-color: #d5e1f2; background: #d5e1f2; } .fui-button-menu.fui-button-active .fui-button { background: #d5e1f2; } .fui-button-menu.fui-layout-top, .fui-button-menu.fui-layout-bottom { text-align: center; } .fui-button-menu.fui-layout-top .fui-open-btn, .fui-button-menu.fui-layout-bottom .fui-open-btn { display: block; } /** * 通用button */ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-button { overflow: hidden; cursor: default; font-size: 0; } .fui-button ._layout .fui-label { display: block; } .fui-button ._layout .fui-icon { display: block; } .fui-button .fui-icon { display: inline-block; vertical-align: middle; } .fui-button .fui-label { display: inline-block; vertical-align: middle; } .fui-button.fui-button-layout-top .fui-label { display: block; } .fui-button.fui-button-layout-top .fui-icon { display: block; } .fui-button.fui-button-layout-bottom .fui-label { display: block; } .fui-button.fui-button-layout-bottom .fui-icon { display: block; } .fui-button:HOVER { background-color: #d5e1f2 !important; color: #000000 !important; } .fui-button:ACTIVE { background-color: #87a9da !important; color: #000000 !important; } .fui-button.fui-disabled:HOVER { background-color: #ffffff !important; color: #000000 !important; } .fui-button.fui-disabled:ACTIVE { background-color: #ffffff !important; color: #000000 !important; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-colorpicker { background-color: #fff; } .fui-colorpicker-container { border: 1px solid #d3d3d3; } .fui-colorpicker-container .fui-colorpicker-title { background: #eee; padding: 2px 4px; } .fui-colorpicker-container .fui-colorpicker-colors { margin: 0; padding: 0; font-size: 0; line-height: 0; } .fui-colorpicker-container .fui-colorpicker-colors-line0 { margin-bottom: 3px; } .fui-colorpicker-container .fui-colorpicker-item { display: inline-block; margin: 0 2px; width: 13px; height: 13px; border-style: solid; border-width: 1px; } .fui-colorpicker-container .fui-colorpicker-commoncolor, .fui-colorpicker-container .fui-colorpicker-standardcolor { margin: 4px 3px; white-space: nowrap; } .fui-colorpicker-container .fui-colorpicker-toolbar { margin: 4px; height: 27px; } .fui-colorpicker-container .fui-colorpicker-toolbar .fui-colorpicker-preview { display: inline-block; height: 25px; line-height: 25px; width: 120px; border: 1px solid #d3d3d3; } .fui-colorpicker-container .fui-colorpicker-toolbar .fui-colorpicker-clear { display: inline-block; height: 25px; line-height: 25px; width: 60px; border: 1px solid #d3d3d3; font-size: 12px; text-align: center; position: absolute; right: 5px; cursor: pointer; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ /** * 通用button */ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-dialog { position: fixed; top: -1000000px; left: -100000px; border: 1px solid #B1B1B1; background: #fff; } .fui-dialog .fui-panel-content { width: auto!important; height: auto!important; padding: 2px; } .fui-dialog .fui-dialog-caption { margin: 0; padding: 5px; font-size: 16px; font-weight: normal; line-height: 1; display: inline-block; } .fui-dialog .fui-dialog-head .fui-close-button { float: right; } .fui-dialog .fui-dialog-head .fui-close-button .fui-close-button-icon { width: 16px; height: 16px; background: url("images/close.png") no-repeat 0 0; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-drop-panel { border: 1px solid #d3d3d3; overflow: hidden; position: relative; } .fui-drop-panel .fui-drop-panel-content { display: inline-block; } .fui-drop-panel .fui-drop-panel-placeholder { display: none; } .fui-drop-panel .fui-drop-panel-button { border-left: 1px solid #d3d3d3; visibility: visible; } .fui-drop-panel .fui-drop-panel-button:HOVER { border-color: #d5e1f2; } .fui-drop-panel .fui-drop-panel-button:ACTIVE { border-color: #87a9da; } .fui-drop-panel:HOVER { border-color: #d5e1f2; } .fui-drop-panel:HOVER .fui-drop-panel-button { border-left-color: #d5e1f2; } .fui-drop-panel:ACTIVE { border-color: #87a9da; } .fui-drop-panel:ACTIVE .fui-drop-panel-button { border-left-color: #d5e1f2; } .fui-drop-panel.fui-drop-panel-open { overflow: visible; } .fui-drop-panel.fui-drop-panel-open .fui-drop-panel-content { border: 1px solid #d3d3d3; position: absolute; top: -1px; left: -1px; } .fui-drop-panel.fui-drop-panel-open .fui-drop-panel-button { visibility: hidden; } .fui-drop-panel.fui-drop-panel-open .fui-drop-panel-placeholder { display: inline-block; } .fui-drop-panel-popup { border: 1px solid #d3d3d3; } .fui-drop-panel-popup:HOVER { border-color: #d5e1f2; } .fui-drop-panel-popup:HOVER .fui-drop-panel-button { border-left-color: #d5e1f2; } .fui-drop-panel-popup:ACTIVE { border-color: #87a9da; } .fui-drop-panel-popup:ACTIVE .fui-drop-panel-button { border-left-color: #d5e1f2; } .fui-icon { text-align: center; font-size: 0; } .fui-icon img { display: inline-block; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-input-button { border: 1px solid #ababab; } .fui-input-button .fui-input { vertical-align: middle; border: none!important; } .fui-input-button .fui-button { vertical-align: middle; } .fui-input-button:HOVER { border-color: #87a9da; } .fui-input-button:ACTIVE { border-color: #87a9da; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-input { border: 1px solid #d3d3d3; padding: 1px; margin: 0; } .fui-input:HOVER, .fui-input:FOCUS { border-color: #4d90fe!important; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-item { font-size: 0; } .fui-item .fui-icon { vertical-align: middle; } .fui-item .fui-label { vertical-align: middle; } .fui-item.fui-item-selected { background: #87a9da; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-label-panel .fui-label-panel-label { width: 100%; color: #666; } .fui-label-panel.fui-no-position .fui-label-panel-label { position: static!important; } .fui-label-panel.fui-layout-bottom .fui-label-panel-label { position: absolute; bottom: 0; left: 0; top: auto; z-index: 2; } .fui-label { cursor: default; display: inline-block; white-space: nowrap; } /** * 通用button */ .fui-mask { position: fixed; z-index: 99998; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-menu { background-color: #fff; border: 1px solid #d3d3d3; } .fui-menu .fui-item { padding: 2px 5px; display: block!important; } .fui-menu .fui-item:HOVER { background: #d5e1f2; } /** * 通用button */ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-panel { display: inline-block; vertical-align: top; overflow-y: auto; overflow-x: hidden; } .fui-panel .fui-panel-content { position: relative; top: 0; left: 0; } .fui-panel .fui-panel-content { width: 100%; height: 100%; } .fui-panel.fui-container-column { font-size: 0; } .fui-panel.fui-container-column .fui-column { display: block; } /** * 通用button */ .fui-ppanel::-webkit-scrollbar { width: 15px; } .fui-ppanel::-webkit-scrollbar-button:start:decrement, .fui-ppanel::-webkit-scrollbar-button:end:decrement, .fui-ppanel::-webkit-scrollbar-button:start:increment, .fui-ppanel::-webkit-scrollbar-button:end:increment, .fui-ppanel::-webkit-scrollbar-thumb { border: 1px solid #e7e7e7; } .fui-ppanel.fui-ppanel-position { position: fixed; z-index: 99999; } /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-separator { background: #6d6d6d; } /** * Spin-button */ .fui-spin-button .fui-spin-up-btn .fui-icon, .fui-spin-button .fui-spin-down-btn .fui-icon { width: 16px; height: 9px; background: url("images/up.png") no-repeat 3px 1.5px; } .fui-spin-button .fui-spin-down-btn .fui-icon { background-image: url("images/down.png"); } /** * 通用button */ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-tabs .fui-selected { background-color: #d5e1f2; } /** * 可切换Button (ToggleButton) */ /** * FUI 通用样式定义 */ /*------------ var*/ /*------------ mixin*/ .fui-toggle-button.fui-button-pressed { background-color: #aec5e6; } .fui-toggle-button.fui-button-pressed.fui-disabled { background-color: #aec5e6 !important; }