chrome.css

/*
  chrome.css	This file changes the appearance of the window manager
		using css-style declarations.  It is important to note
		that the syntax MUST remain in its provided format. If
		a declaration is undesired,  comment out or remove it.
		So if you see something like "margin: 4px 4px 4px 4px"
		you can not use the shorthand version "margin: 4px"!

		Also all size units, unless otherwise noted, will use
		pixel values (px) regardless of the specified unit.

  created	2015/07/01 by Dave Henderson (dhenderson@cliquesoft.org or support@cliquesoft.org)
  updated	2018/04/21 by Dave Henderson (dhenderson@cliquesoft.org or support@cliquesoft.org)
*/




/* Definitions for the desktop(s) */
.desktop {					/* The desktop(s) */
	display: none;				/*	TODO - enables multiple desktops, disabled means only one desktop (if the ability has been compiled in) */
}

.desktop #cursor {				/* The default cursor value */
	color: #000000;				/* sets the foreground color of the cursor */
	background-color: #ffffff;		/* sets the background color of the cursor */
	cursor: default;			/* 	TODO - pointer, resize, hand, ... */
}




/* Definitions for all windows */
.window {					/* The window itself */
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 2px;
	width: 200px;				/* sets the initial width of the window - remove to let the app decide */
	height: 300px;				/* sets the initial height of the window - remove to let the app decide */
/* TODO - allow for a transparent background; and a background image (like a blur for Vista style background); see the Frame::draw() function in window.cpp */
	background-color: #222222;		/* sets the background color of the window (inactive titlebar color too) - remove to let the app decide */
						/* http://stackoverflow.com/questions/14176499/change-xlib-window-background-color-with-c */
						/* http://stackoverflow.com/questions/23051594/how-to-set-xlib-window-background-transparent?rq=1 */
	border-style: none;			/* sets whether the window has a border, with valid values: none, outset 	DEV NOTE: see the "fl_frame2" line in "Frame::draw()" function of window.cpp */
	border-radius: 4px;			/* 	TODO - sets the border radius of each window				DEV NOTE: requires transparent background of window itself */
}

.window:active {
	background-color: #808080;		/* sets the background color of the titlebar */
}

.window .titlebar {				/* The overall appearance of the titlebar */
	float: none;				/* sets where the titlebar is located on the window, with valid values: left, right, none (top) */
	margin-top: 4px;			/* sets the margin around the app label - does NOT affect the titlebar height (if it is set above) */
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	height: 20px;				/* sets the height of the titlebar */
	background-color: #555555;		/* sets the background color of the titlebar of the window */
	border-style: none;			/* sets the border style of the button, with valid values: none, solid */
	border-color: #ff0000;			/* sets the border color of the button if border-style!=none - can NOT be 'transparent' */
}

.window:active .titlebar {			/* The overall appearance of the titlebar */
	background-color: #555555;		/* sets the background color of the titlebar of the window */
	border-style: none;			/* sets the border style of the button, with valid values: none, solid */
	border-color: #ff0000;			/* sets the border color of the button if border-style!=none - can NOT be 'transparent' */
}

.window .titlebar #label {			/* The application's icon */
	float: left;				/* aligns the window title text, with valid values: left, right, none (centered) */
	margin-top: 4px;			/* sets the margin around the app label - does NOT affect the titlebar height (if it is set above) */
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #666666;				/* sets the font color of the windows title when the window is inactive/unfocused */
	font-size: 12px;			/* sets the font size of the windows title */
	font-family: helvica;			/*	TODO - sets the font of the titlebar label */
	font-style: normal;			/* sets the font style of the window title text, with valid values: normal, italic */
	font-weight: bold;			/* sets the font weight of the window title text, with valid values: normal, bold */
}

.window:active .titlebar #label {
	color: #eeeeee;				/* sets the font color of the windows title */
}
.window .titlebar .icon {			/* The application's icon */
	display: none;				/* toggles whether the icon is shown or not, with valid values: none, block */
	float: left;				/* sets the alignment of the apps icon in the titlebar, with valid values: left, right, none (centered) */
	margin-top: 4px;			/* sets the margin around the app icon - does NOT affect the titlebar height (if it is set above) */
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 16px;				/* sets the icon size */
	height: 16px;
}

.window .titlebar .pin {			/* The 'pin' graphic to keep the window on top of all the others */
	display: none;				/* 	TODO - toggles whether the icon is shown or not, with valid values: none, block */
	float: left;				/*	TODO - sets the alignment of the apps icon in the titlebar, with valid values: left, right */
}




/* Definitions for all the buttons on the titlebar */
.window .button {
	float: none;				/* sets the overall alignment of all the buttons in the titlebar, with valid values: left, right, none (centers) */
	color: #bbbbbb;				/* sets the button color of all the buttons when the window is inactive/unfocused */
	font-size: 12px;			/* sets the size of the button contents */
	background-color: transparent;		/* sets the button background color (for inactive windows), with valid values: any #nnnnnn, transparent */
	border-style: none;			/* sets the border style of the button, with valid values: none, solid, groove, ridge, inset, outset, engraved, embossed */
	border-color: #ff0000;			/* sets the border color of the button if border-style!=none - can NOT be 'transparent' */
	opacity: 1;				/* 	TODO - sets the opacity of all the buttons in the titlebar when the window is inactive/unfocused */
}

.window .button:hover {
	background-color: transparent;		/* 	TODO - sets the background color of any button in the titlebar when the mouse hovers over it when the window is inactive/unfocused, with valid values: transparent, #nnnnnn */
	border-style: none;			/*	TODO - sets the border style of any button in the titlebar when the mouse hovers over it, with valid values: none, solid, ... */
}

.window:active .button:hover {
	background-color: transparent;		/* 	TODO - sets the background color of any button in the titlebar when the mouse hovers over it, with valid values: transparent, #nnnnnn */
	border-style: none;			/*	TODO - sets the border style of any button in the titlebar when the mouse hovers over it, with valid values: none, solid, ... */
}




/* Definitions for individual buttons on the titlebar */
.window .button #close {
	margin-top: 0px;			/* sets the margin around the button - does NOT affect the titlebar height */
	margin-right: 6px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 15px;				/* sets the width and height of this button in the titlebar, with valid values: #px */
	height: 15px;
	color: #ff0000;				/* sets the color of this buttons icon */
	background-color: #0000ff;		/* the background color of this particular button */
	border-style: none;			/* sets the border style of the button, with valid values: none, solid, groove, ridge, inset, outset, engraved, embossed */
	border-color: #ff0000;			/* sets the border color of the button if border-style!=none - can NOT be 'transparent' */
	opacity: 1;				/*	TODO - sets the opacity of the faded portion of the buttons icon, with valid values: 0 -OR- 1		DEV NOTE: this just determines whether we should use fl_darker or fl_lighter in the "FrameButton::draw()" of window.cpp */
}
.window .button #maximize {
	display: block;
	margin-top: 0px;
	margin-right: 6px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 15px;
	height: 15px;
	color: #009700;
	background-color: #ff0000;
	border-style: none;
	border-color: #ff0000;
	opacity: 1;				/*	TODO */
}
.window .button #minimize {
	display: block;
	margin-top: 0px;
	margin-right: 6px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 15px;
	height: 15px;
	color: #0000ff;				/* #ffff00 (yellow); */
	background-color: #ff0000;
	border-style: none;
	border-color: #ff0000;
	opacity: 1;				/*	TODO */
}
.window .button #shade {
	display: none;
	margin-top: 0px;
	margin-right: 6px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 15px;
	height: 15px;
	color: #0000ff;
	background-color: #ff0000;
	border-style: none;
	border-color: #ff0000;
	opacity: 1;				/*	TODO */
}




/* Definitions for alerts */
#alert {
	top: auto;				/* NOTE: only define two of these values for an X and Y coordinate; 'auto' for the other two */
	right: 20px;
	bottom: 50px;
	left: auto;
	width: 250px;
	height: 200px;
	background-color: #555555;		/* sets the background color of the alerts */
	border-style: none;			/* sets the border style of the alerts, with valid values: none, solid */
	border-color: #ff0000;			/* sets the border color of the alerts if border-style!=none - can NOT be 'transparent' */
}

#alert #close {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	width: 50px;
	height: 50px;
	color: #000;
	font-size: 24px;
	font-weight: normal;			/* bold or normal */
	background-color: #555555;		/* sets the background color of the alerts */
	border-style: none;			/* sets the border style of the alerts, with valid values: none, solid */
	border-color: #ff0000;			/* sets the border color of the alerts if border-style!=none - can NOT be 'transparent' */
}

#alert #image {
	display: block;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	width: 32px;
	height: 32px;
	background-image: url("/usr/local/share/icons/unknown.png");
}

#alert #title {
	display: block;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	color: #000;
	font-size: 10px;
	font-style: italic;			/* italic or normal */
	font-weight: bold;			/* bold or normal */
}

#alert #message {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	color: #000;
	font-size: 12px;
	font-style: normal;			/* italic or normal */
	font-weight: normal;			/* bold or normal */
}

#alert #owner {
	display: block;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	color: #000;
	font-size: 10px;
	font-style: italic;			/* italic or normal */
	font-weight: normal;			/* bold or normal */
}




/* Definitions for dialog boxes */
.dialog {					/* NOTE: this is pertaining to common dialog windows */
	background-color: #ff0000;
	box-shadow: none;			/* 	TODO - sets the box shadow of the window */
}

.dialog .titlebar {				/* The overall appearance of the titlebar */
	background-color: #555555;		/* sets the background color of the titlebar of the window */
	border-style: none;			/* sets the border style of the button, with valid values: none, solid */
	border-color: #ff0000;			/* sets the border color of the button if border-style!=none - can NOT be 'transparent' */
}

.dialog .button #close {
	color: #ff0000;				/* sets the color of this buttons icon */
	background-color: #0000ff;		/* the background color of this particular button */
	border-style: none;			/* sets the border style of the button, with valid values: none, solid, groove, ridge, inset, outset, engraved, embossed */
	border-color: #ff0000;			/* sets the border color of the button if border-style!=none - can NOT be 'transparent' */
	opacity: 1;				/*	TODO - sets the opacity of the faded portion of the buttons icon, with valid values: 0 -OR- 1		DEV NOTE: this just determines whether we should use fl_darker or fl_lighter in the "FrameButton::draw()" of window.cpp */
}




/* Definitions for Alt-Tab Menu */		/*	TODO - add an optional overlay behind the popup (need transparency) */
#running {
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	color: #fff;
	background-color: #808080;
	border-style: none;			/* sets whether the window has a border, with valid values: none, solid */
	border-color: #000;
	border-radius: 4px;			/* 	TODO - sets the border radius of the popup */
}

#running .icon {				/* config for each icon shown in the popup */
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
	padding-top: 0;
	padding-right: 5px;
	padding-bottom: 0;
	padding-left: 5px;
	height: 32px;
	width: 32px;
	background-color: #000;
	border-style: none;			/* sets whether the icon has a border, with valid values: none, solid */
	border-color: #000;
}

#running .icon:focus {				/* config for the currently selected icon shown in the popup */
	background-color: #000;
	border-style: none;			/* sets whether the focused icon has a border, with valid values: none, solid */
	border-color: #ff0000;
}