css/window-frame-mac.css
/* ==============================
	MAC OS X WINDOW FRAME STYLES
   ==============================
	Specific styles for Mado's window frame on Mac OS X. */

#window-bar li {
	/* Positioning */
	position: absolute;
	top: 50%;
	margin-top: -6px;

	/* Box-model */
	width: 12px;
	height: 12px;

	/* Typography */
	line-height: 12px;
	text-align: left;
	color: transparent;

	/* Visual */
	border-radius: 6px;

	/* Misc */
	transition: color 0.05s linear;
	-webkit-app-region: no-drag; /* Disable drag action */
}

/* These styles make the icons appear centered */
#window-close-button:before,
#window-bar li:before {
	/* Positioning */
	position: relative;
	left: -2px; /* 16px (original font square size) - 12px (actual buttons' width) = 4px, then 4px / 2 (because it's centered) = 2px */
}

#window-close { left: 10px; }

#window-close-button {
	/* Box-model */
	width: 100%;
	height: 100%;

	/* Visual */
	background-color: #f24848;
	border-radius: 10px;
}

#window-minimize {
	/* Positioning */
	left: 30px;

	/* Visual */
	background-color: #f2d048;
}

#window-maximize {
	/* Positioning */
	left: 50px;

	/* Visual */
	background-color: #82cc28;
}

#window-close-button:hover { color: #832727; }

#window-close-button:active { background-color: #d11; }

#window-minimize:hover { color: #814424; }

#window-minimize:active { background-color: #ddb114; }

#window-maximize:hover { color: #273a18; }

#window-maximize:active { background-color: #64b00b; }

/* -------
	Alert
   ------- */
/* When the user clicks the "Close" button with unsaved changes, the displayer is deployed and shows the alert */
#close-alert-displayer {
	/* Positioning */
	top: 16px;
	left: -3px;

	/* Misc */
	-webkit-transform-origin: 20px 1px;
}

/* The arrow is a gray corner for the container */
#close-alert-arrow { margin: 1px 0 0 5px; }

/* --------
	Header
   -------- */
#save-state span {
	/* Box-model */
	height: 18px !important;

	/* Typography */
	line-height: 18px !important;
}
