/*
----------------------------------------
UI Theme file for Mybase Server 8.x
DONOT remove the following 2 attributes
----------------------------------------
App.UiTheme.DisplayName = Default
App.UiTheme.Contributor =
----------------------------------------
*/

:root {

	/* common font settings of the ui theme */
	--mainFontSize: small;
	--mainFontFamily: system-ui, "Helvetica Neue", "Segoe UI", "Microsoft Yahei", "Trebuchet MS", Helvetica, Tahoma, Verdana, Arial, Sans-serif;
	--mainFontColor: #333;

	/* main color of the ui theme */
	--mainBgColor: #f5f5f5;

	/* fixed pitch for source code, event logs ... */
	--codeFontFamily: Monaco, Consolas, "Courier New", Monospace;

	/* colors for visible areas/blocks in page or dlgbox */
	--popupBgColor: #fafafa;
	--paneBgColor: #fbfbfb;
	--viewBgColor: #fefefe;
	--shadowColor: #ddd;
	--selectionColor: royalblue;

	/* border colors of elements in normal or hover or special */
	--borderColor: lightgrey;
	--vipBorderColor: slategrey;
	--hoverBorderColor: var(--selectionColor);

	/* colors for items in different states, e.g. list-items, menu-items, tool-buttons */
	--itemHoverBgColor: whitesmoke;
	--itemHoverBorderColor: var(--hoverBorderColor);
	--itemSelFontColor: white;
	--itemSelBgColor: var(--selectionColor);
	--itemSeparatorColor: lightslategrey;
	--itemDisabledFontColor: silver;
	--itemHilitedBgColor: Beige;
	--itemHilitedBorderColor: grey;
	--itemFocusedBorderColor: yellow;

	/* colors for general field names, e.g. tab-items, header-items listed in a row*/
	--fieldNameBgColor: var(--mainBgColor);
	--fieldNameFontColor: var(--mainFontColor);

	/* colors for table header columns <th> */
	--listHeaderBgColor: var(--fieldNameBgColor);
	--listHeaderFontColor: var(--fieldNameFontColor);

	/* colors for <a> links */
	--anchorColor: auto;
	--anchorHoverColor: limegreen;

	/* colors for <input> controls in forms */
	--inputReadonlyBgColor: var(--popupBgColor);
	--inputBgColor: var(--viewBgColor);
	--inputBorderColor: var(--borderColor);
	--inputHoverBorderColor: var(--hoverBorderColor);
	--inputDisabledFontColor: var(--itemDisabledFontColor);

	/* colors for forms in login pages */
	--loginPageBgColor: var(--viewBgColor);
	--loginPageFontColor: var(--mainFontColor);
	--loginFormBgColor: var(--mainBgColor);
	--loginFormBorderColor: var(--borderColor);

	/* colors for header/footer/splitter/docBar... */
	--splitterHoriColor: transparent;
	--splitterVertColor: transparent;
	--appHeaderBgColor: transparent;
	--appFooterBgColor: transparent;
	--docBarBgColor: var(--mainBgColor);

	/* colors for tool buttons in specific panels/views */
	--btnOnTopBarBgColor: var(--popupBgColor);
	--btnOnTopBarBorderColor: var(--borderColor);
	--btnOnToolBarBgColor: transparent;
	--btnOnToolBarBorderColor: transparent;
	--btnOnStatusBarBgColor: transparent;
	--btnOnStatusBarBorderColor: transparent;
	--btnOnLoginPageBgColor: var(--loginPageBgColor);

	/* colors for doc-formt-picker controls in /edit */
	--docFmtBgColor: var(--viewBgColor);
	--docFmtFontColor: #555;
	--docFmtBorderColor: #ccc;
	--docFmtHoverColor: var(--hoverBorderColor);
	--docFmtOpacity: 1.0;

	/* colors for results list in /edit */
	--resultsListPaneColor: var(--paneBgColor);
	--resultsListHeaderBgColor: var(--listHeaderBgColor);
	--resultsListHeaderFontColor: var(--listHeaderFontColor);
	--resultsListSelFontColor: var(--itemSelFontColor);
	--resultsListSelBgColor: var(--itemSelBgColor);
	--resultsAnchorHoverFontColor: var(--anchorHoverColor);

	/* colors for relation list in /edit */
	--relationListItemBgColor: var(--mainBgColor);
	--relationListItemHoverBgColor: var(--itemHoverBgColor);
	--relationAttachmentsBgColor: var(--paneBgColor);
	--relationAppliedLabelsBgColor: var(--paneBgColor);
	--relationItemLinksBgColor: var(--paneBgColor);
	--relationTocItemsBgColor: var(--paneBgColor);

	/* colors for general tool-buttons in /edit & /admin */
	--btnBgColor: var(--popupBgColor);
	--btnFontColor: var(--mainFontColor);
	--btnBorderColor: var(--borderColor);
	--btnDefaultBorderColor: var(--borderColor);
	--btnHoverBgColor: var(--viewBgColor);
	--btnHoverBorderColor: var(--hoverBorderColor);
	--btnCheckedBorderColor: var(--btnBorderColor);
	--btnCheckedBgColor: var(--btnHoverBgColor);
	--btnDisabledColor: var(--itemDisabledFontColor);

	/* colors for tabsheet controls in /edit & /admin */
	--tabItemBgColor: var(--fieldNameBgColor);
	--tabItemFontColor: var(--fieldNameFontColor);
	--tabItemBorderColor: var(--borderColor);
	--tabItemHoverBgColor: var(--viewBgColor);
	--tabItemHoverBorderColor: var(--hoverBorderColor);
	--tabItemSelBgColor: var(--viewBgColor);
	--tabPagesBgColor: var(--tabItemSelBgColor);

	/* colors for popup menus in /edit & /admin */
	--menuBgColor: var(--popupBgColor);
	--menuBorderColor: var(--borderColor);
	--menuItemBgColor: transparent;
	--menuItemFontColor: var(--mainFontColor);
	--menuItemSelFontColor: var(--itemSelFontColor);
	--menuItemSelBgColor: var(--itemSelBgColor);
	--menuItemDisabledFontColor: var(--itemDisabledFontColor);
	--menuItemGroupBgColor: transparent;
	--menuItemGroupFontColor: var(--itemSeparatorColor);
	--menuItemSepColor: var(--itemSeparatorColor);

	/* colors for dialog boxes in /edit & /admin */
	--dlgBgColor: var(--popupBgColor);
	--dlgBorderColor: var(--borderColor);
	--dlgHeaderBgColor: var(--mainBgColor);
	--dlgHeaderFontColor: var(--mainFontColor);
	--dlgViewBgColor: var(--viewBgColor);
	--dlgBtnBgColor: var(--mainBgColor);
	--dlgBtnBorderColor: var(--borderColor);
	--dlgBtnHoverBgColor: var(--viewBgColor);
	--dlgBtnHoverBorderColor: var(--hoverBorderColor);
	--dlgBtnDefaultBorderColor: var(--vipBorderColor);
	--dlgInputReadonlyBgColor: var(--inputReadonlyBgColor);
	--dlgInputBgColor: var(--inputBgColor);
	--dlgInputBorderColor: var(--inputBorderColor);
	--dlgInputHoverBorderColor: var(--inputHoverBorderColor);
	--dlgSelectBgColor: var(--viewBgColor);
	--dlgSelectBorderColor: var(--borderColor);
	--dlgNotifyBgColor: gray;
	--dlgNotifyFontColor: yellow;

	/* colors for treeview controls in /edit */
	--treeItemFontColor: var(--mainFontColor);
	--treeItemHoverFontColor: var(--mainFontColor);
	--treeItemHoverBgColor: var(--itemHoverBgColor);
	--treeItemSelFontColor: var(--itemSelFontColor);
	--treeItemSelBgColor: var(--itemSelBgColor);

	/* colors for listview controls in /edit & /admin */
	--listViewBgColor: var(--viewBgColor);
	--listViewBorderColor: var(--borderColor);
	--listViewHeaderBgColor: var(--listHeaderBgColor);
	--listViewHeaderFontColor: var(--listHeaderFontColor);
	--listItemSelFontColor: var(--itemSelFontColor);
	--listItemSelBgColor: var(--itemSelBgColor);
	--listItem2ndBgColor: var(--popupBgColor);
	--listItemHoverBgColor: var(--itemHoverBgColor);
	--listItemSepColor: var(--borderColor);

	--rainbow-gradient_0: linear-gradient(to right, blue,orangered,darkcyan,mediumpurple,hotpink,orange);
	--rainbow-gradient: linear-gradient(to right, lightgrey, grey);

}