bimain.css

在流览器上仿CS界面的JAVASCRIPT脚本

/*****************************************************************************
 * Tool Bar                                                                  *
 *****************************************************************************/

.bi-tool-bar {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;

	overflow:			hidden;

	border:				2px groove;
	-moz-border-right-colors:	ThreeDHighlight ThreeDShadow;
	-moz-border-left-colors:	ThreeDShadow ThreeDHighlight;
	-moz-border-bottom-colors:	ThreeDHighlight ThreeDShadow;
	-moz-border-top-colors:		ThreeDShadow ThreeDHighlight;
	white-space:		nowrap;
	/*-moz-appearance:	toolbox;*/
	font:				11px Tahoma, Verdana, Arial, Sans-Serif;
}


.bi-tool-bar {
	overflow:			-moz-scrollbars-none;
}


.bi-tool-bar-button {	/* extends label */
	position:			absolute;
	-moz-box-sizing:	border-box;
	text-overflow:		ellipsis;
	text-align:			center;
	cursor:				default;
	/*-moz-appearance:	toolbarbutton;*/
}

.bi-tool-bar-button {
	overflow:			-moz-scrollbars-none;
}

.bi-tool-bar-separator {
	position:			absolute;
	-moz-box-sizing:	border-box;
}


.bi-tool-bar .bi-tool-bar-button,
.bi-tool-bar .bi-tool-bar-separator {
	position:			relative;
	-moz-box-sizing:	border-box;
	display:			inline-block;
	overflow:			hidden;
	vertical-align:		top;
}

/*
	Mozilla does not support inline-block (as of 1.6b)
	we'll have to use float
*/

* > .bi-tool-bar-button,
* > .bi-tool-bar-separator {
	float:				left;
}


.bi-tool-bar-separator-line {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	border-left:		1px solid ThreeDShadow;
	border-right:		1px solid ThreeDHighlight;
}

.bi-tool-bar-separator-line {
	overflow:			-moz-scrollbars-none;
}

/*****************************************************************************
 * Tab Pane                                                                  *
 *****************************************************************************/

.bi-tab-bar {	/* extends ToolBar */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	border:				0;
	white-space:		nowrap;
	height:				22px;
	width:				200px;
	font:				11px Tahoma, Verdana, Arial, Sans-Serif;
}

.bi-tab-bar {
	overflow:			-moz-scrollbars-none;
}

.bi-tab-bar-line {
	-moz-appearance:	tabpanels;
}

.bi-tab-button { /* extends label, tool bar radio button */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	text-overflow:		ellipsis;
	vertical-align:		top;
	text-align:			center;
	cursor:				default;
	-moz-appearance:	tab;
}

.bi-tab-button {
	overflow:			-moz-scrollbars-none;
}

.bi-tab-pane {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	width:				200px;
	height:				200px;
}

.bi-tab-pane {
	overflow:			-moz-scrollbars-none;
}

.bi-tab-page {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;

	border:				2px outset;
	-moz-border-right-colors:	ThreeDDarkShadow ThreeDShadow;
	-moz-border-bottom-colors:	ThreeDDarkShadow ThreeDShadow;
	border-top:			0;
	border-left:		1px solid ThreeDHighlight;

	-moz-appearance:	tabpanels;
}

.bi-tab-page {
	overflow:			-moz-scrollbars-none;
}



/*****************************************************************************
 * Window                                                                    *
 *****************************************************************************/

.bi-window {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	background-color:	ThreeDFace;
	border:				2px outset;
	-moz-border-left-colors:	ThreeDLightShadow ThreeDHighlight;
	-moz-border-right-colors:	ThreeDDarkShadow ThreeDShadow;
	-moz-border-top-colors:		ThreeDLightShadow ThreeDHighlight;
	-moz-border-bottom-colors:	ThreeDDarkShadow ThreeDShadow;

	width:				400px;
	height:				200px;
	z-index:			10000;
	font:				11px Tahoma, Verdana, Arial, Sans-Serif;
}

.bi-window {
	overflow:			-moz-scrollbars-none;
}

.bi-window-caption {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	background-color:	InactiveCaption;
	cursor:				default;
	border-bottom:		1px solid ThreeDFace;
}

.bi-window-caption {
	overflow:			-moz-scrollbars-none;
}

.bi-window.active .bi-window-caption {
	background-color:	ActiveCaption;
}

.bi-window-content-pane {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	cursor:				default;
}

.bi-window-content-pane {
	overflow:			-moz-scrollbars-none;
}

.bi-window-caption .bi-label {
	-moz-box-sizing:	border-box;
	color:				InactiveCaptionText;
	font:				Caption;
	padding:			2px;
	font-size:			11px !important;
	font-weight:		bold;
}

.bi-window.active .bi-window-caption .bi-label {
	color:				CaptionText;
}

.bi-window .bi-window-caption .bi-button {
	-moz-box-sizing:	border-box;
	font-family:		Marlett !important;
	font-weight:		normal !important;
	font-size:			10px !important;
	width:				16px;
	height:				14px;
	overflow:			hidden;
	padding:			0;
	border-width:		2px;
	/* enforce win classic */
	background-color:	ButtonFace;
	cursor:				default !important;
	/*
	-moz-user-select:	none;
	*/
}

.bi-window .bi-window-caption .bi-button {
	overflow:			-moz-scrollbars-none;
}

.bi-window .bi-window-caption .bi-button span {
	-moz-box-sizing:	border-box;
	position:			relative;
	top:				-1px;
	left:				0px;
	cursor:				default !important;
}

/* Mozilla overrides for the buttons */

.bi-window .bi-window-caption > .bi-button {
	-moz-appearance:	none;
	border:				2px outset;
	-moz-border-left-colors:	ThreeDHighlight ThreeDLightShadow;
	-moz-border-right-colors:	ThreeDDarkShadow ThreeDShadow;
	-moz-border-top-colors:		ThreeDHighlight ThreeDLightShadow;
	-moz-border-bottom-colors:	ThreeDDarkShadow ThreeDShadow;
}

.bi-window .bi-window-caption > .bi-button:active {
	border:				2px inset;
	-moz-border-right-colors:	ThreeDHighlight ThreeDLightShadow;
	-moz-border-left-colors:	ThreeDShadow ThreeDDarkShadow;
	-moz-border-bottom-colors:	ThreeDHighlight ThreeDLightShadow;
	-moz-border-top-colors:		ThreeDShadow ThreeDDarkShadow;
}

.bi-window .bi-window-caption .bi-button > span {
	display:			none;
}

.bi-window .bi-window-caption > .bi-button {
	background-position:	1px 0px;
	background-repeat:		no-repeat;
}

.bi-window .bi-window-caption > .bi-button:active {
	background-position:	2px 1px;
}

.bi-window .bi-window-caption > .bi-button[buttontype=minimize] {
	background-image:		url("../images/minimize.gif");
}

.bi-window .bi-window-caption > .bi-button[buttontype=maximize] {
	background-image:		url("../images/maximize.gif");
}

.bi-window .bi-window-caption > .bi-button[buttontype=restore] {
	background-image:		url("../images/restore.gif");
}

.bi-window .bi-window-caption > .bi-button[buttontype=close] {
	background-image:		url("../images/close.gif");
}

.bi-glass-pane {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	cursor:				default;
	background-image:	url("../images/blank.gif");
}

.bi-glass-pane {
	overflow:			-moz-scrollbars-none;
}

/*****************************************************************************
 * Resize handle
 */

.bi-resize-handle {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	cursor:				se-resize;
	width:				12px;
	height:				12px;
	-moz-appearance:	resizer;
}

.bi-resize-handle {
	overflow:			-moz-scrollbars-none;
}

.bi-handle-char {
	position:			absolute;
	-moz-box-sizing:	border-box;
	font-family:		Marlett;
	font-size:			16px;
	width:				16px;
	height:				16px;
}

.bi-handle-char-o {
	color:				ThreeDHighlight;
}

.bi-handle-char-p {
	color:				ThreeDShadow;
}

.bi-resize-handle > .bi-handle-char {
	position:			relative;
	font-size:			1px;
	color:				threedface !important;
}


/*****************************************************************************
 * BiTree                                                                    *
 *****************************************************************************/

.bi-tree {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	width:				300px;
	height:				300px;
	font:				11px Tahoma, Verdana, Arial, Sans-Serif;
	/* win classic */
	border:				2px inset;
	background-color:	Window;
	color:				WindowText;
	-moz-appearance:	treeview;
}

.bi-tree {
	overflow:			-moz-scrollbars-none;
}

.bi-tree-body {
	-moz-box-sizing:	border-box;
	overflow:			auto;
	width:				100%;
	height:				100%;
}

.bi-tree-filler-row {
	-moz-box-sizing:	border-box;
	height:				18px;
	background:			ThreeDFace;
	border-top:			1px solid ThreeDHighlight;
	border-bottom:		1px solid ThreeDShadow ;
}

.bi-tree-row {
	-moz-box-sizing:	border-box;
	line-height:		16px;
	height:				16px;
	white-space:		nowrap;
	overflow-y:			hidden;
}

.bi-tree-cell {
	-moz-box-sizing:	border-box;
	display:			inline-block;
	height:				16px;
	line-height:		16px;
	overflow:			hidden;
	text-overflow:		ellipsis;
	cursor:				default;
	padding:			0 5px;
}

.bi-tree-cell {
	overflow:			-moz-scrollbars-none;
}


.bi-tree-row > .bi-tree-cell {
	display:			-moz-inline-box;
	-moz-user-select:	none;
	vertical-align:		middle;
}

.bi-tree-children {
	background-repeat:	repeat-y;
	background-image:	url("../images/I.gif") !important;
}

.bi-tree-icon {
	position:			relative;
	top:				-1px;
	width:				16px;
	height:				16px;
	vertical-align:		middle;
	margin-right:		3px;
}

.bi-tree-expand-icon {
	position:			relative;
	top:				-1px;
	width:				19px;
	height:				16px;
	vertical-align:		middle;
}


.bi-tree .selected-tree-node {
	background:			ThreeDFace !important;
	color:				WindowText !important;

	/* make relative and decrease z index to allow lines on top */
	position:			relative;
	z-index:			-1;
}

.bi-tree .selected-tree-node-focused {
	background:			Highlight !important;
	color:				HighlightText !important;

	/* make relative and decrease z index to allow lines on top */
	position:			relative;
	z-index:			-1;
}

:root .selected-tree-node,
:root .selected-tree-node-focused {
	position:			static;
	z-index:			auto;
}

.bi-tree-headers {
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	height:				18px;
	width:				296px;
}

.bi-tree-headers {
	overflow:			-moz-scrollbars-none;
}

/*****************************************************************************
 * BiTree                                                                    *
 *                                                                           *
 * TODO: Merge grid and tree?                                                *
 *****************************************************************************/

.bi-grid {	/* extends component */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	width:				300px;
	height:				300px;
	font:				11px Tahoma, Verdana, Arial, Sans-Serif;
	/* win classic */
	border:				2px inset;
	background-color:	Window;
	color:				WindowText;

	-moz-appearance:	treeview;
}

.bi-grid {
	overflow:			-moz-scrollbars-none;
}

.bi-grid-row-headers {
 	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	height:				296px;
	width:				100px;
}

.bi-grid-row-headers {
	overflow:			-moz-scrollbars-none;
}

.bi-grid-body {
	-moz-box-sizing:	border-box;
	overflow:			auto;
	width:				100%;
	height:				100%;
}

.bi-grid-row {
	-moz-box-sizing:	border-box;
	height:				18px;
	line-height:		16px;
	white-space:		nowrap;
	overflow-y:			hidden;
}

.bi-grid-cell {
	-moz-box-sizing:	border-box;
	display:			inline-block;
	height:				18px;
	line-height:		16px;
	overflow:			hidden;
	text-overflow:		ellipsis;
	cursor:				default;
	padding:			1px 5px;
}

.bi-grid-cell {
	overflow:			-moz-scrollbars-none;
}

.bi-grid-row > .bi-grid-cell {
	display:			-moz-inline-box;
	-moz-user-select:	none;
	vertical-align:		middle;
}

.bi-grid-icon {
	position:			relative;
	top:				-1px;
	width:				16px;
	height:				16px;
	vertical-align:		middle;
	margin-right:		3px;
}

.bi-grid .selected-grid-node,
.bi-grid .selected-grid-cell,
.bi-grid .selected-grid-node .bi-grid-cell {
	background:			ThreeDFace !important;
	color:				WindowText !important;
}

.bi-grid .selected-grid-node-focused,
.bi-grid .selected-grid-cell-focused,
.bi-grid .selected-grid-node-focused .bi-grid-cell {
 	background:			Highlight !important;
	color:				HighlightText !important;
}

.bi-grid .lead-grid-node-focused {
	border:				1px solid ThreeDShadow;
	border-left:		0;
	border-right:		0;
}

.bi-grid .lead-grid-node-focused .bi-grid-cell {
	padding:			0 5px
}

.bi-grid .lead-grid-cell-focused {
	border:				1px solid ThreeDShadow;
	padding:			0 4px;
}

.selected-grid-row {
	background:	yellow;
}

.bi-grid-header {	/* extends BiLabel */
	position:			absolute;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
	text-overflow:		ellipsis;
	cursor:				default;
	font:				11px Tahoma, Verdana, Arial, Sans-Serif;
	-moz-appearance:	treeheadercell;
}

.bi-grid-header {
	overflow:			-moz-scrollbars-none;
}

.bi-grid-row-header,
.bi-grid-row-header-filler {
	-moz-box-sizing:	border-box;
	background-color:	ThreeDFace;
	border:				1px solid;
	border-color:		ThreeDHighlight ThreeDShadow
						ThreeDShadow ThreeDHighlight;
	white-space:		nowrap;
	overflow:			hidden;
	text-overflow:		ellipsis;
	height:				18px;
	width:				100%;
	padding:			1px 4px;
	cursor:				default;
	-moz-user-select:	none;
	-moz-appearance:	treeheadercell;
}

.bi-grid-row-header,
.bi-grid-row-header-filler {
	overflow:			-moz-scrollbars-none;
}

.bi-grid-row-header-filler {
	height:				99999px;
}


/* inline components */

.bi-inline-component {
	position:			relative;
	-moz-box-sizing:	border-box;
	overflow:			hidden;
}

.bi-inline-component {
	overflow:			-moz-scrollbars-none;
}