windowbar/src/windowbar.html

Emulate window title bar in three different styles.

<div class="windowbar wb-mac">
	<div class="windowbar-title"></div>
	<div class="windowbar-controls">
		<div class="windowbar-close">
			<svg x="0px" y="0px" viewBox="0 0 6 6">
				<polygon fill="#860006" points="6,1 6,0 5,0 3,2 1,0 0,0 0,1 2,3 0,5 0,6 1,6 3,4 5,6 6,6 6,5 4,3"></polygon>
			</svg>
		</div>
		<div class="windowbar-minimize">
			<svg x="0px" y="0px" viewBox="0 0 7 2">
				<rect fill="#9d5615" width="7" height="2"></rect>
			</svg>
		</div>
		<div class="windowbar-maximize">
			<svg class="fullscreen-svg" x="0px" y="0px" viewBox="0 0 6 6">
				<path fill="#006413" d="M0,1.4v3.8c0.4,0,0.8,0.3,0.8,0.8h3.8L0,1.4z"/>
				<path fill="#006413" d="M6,4.6V0.8C5.6,0.8,5.2,0.4,5.2,0H1.4L6,4.6z"/>
			</svg>
			<svg class="exit-fullscreen-svg" x="0px" y="0px" viewBox="0 0 6 6">
				<path fill="#006413" d="M3,0v2.5c0.3,0,0.5,0.2,0.5,0.5H6L3,0z"/>
				<path fill="#006413" d="M3,6V3.5C2.7,3.5,2.5,3.3,2.5,3H0L3,6z"/>
			</svg>
			<svg class="maximize-svg" x="0px" y="0px" viewBox="0 0 7.9 7.9">
				<polygon fill="#006413" points="7.9,4.5 7.9,3.4 4.5,3.4 4.5,0 3.4,0 3.4,3.4 0,3.4 0,4.5 3.4,4.5 3.4,7.9 4.5,7.9 4.5,4.5"></polygon>
			</svg>
		</div>
	</div>
</div>

<div class="windowbar wb-win">
	<div class="windowbar-title"></div>
	<div class="windowbar-controls">
		<div class="windowbar-minimize">
			<svg x="0px" y="0px" viewBox="0 0 10 1">
				<rect fill="#000000" width="10" height="1"></rect>
			</svg>
		</div>
		<div class="windowbar-maximize">
			<svg class="maximize-svg" x="0px" y="0px" viewBox="0 0 10 10">
				<path fill="#000000" d="M 0 0 L 0 10 L 10 10 L 10 0 L 0 0 z M 1 1 L 9 1 L 9 9 L 1 9 L 1 1 z "/>
			</svg>
			<svg class="unmaximize-svg" x="0px" y="0px" viewBox="0 0 10 10">
				<mask id="Mask">
					<rect fill="#FFFFFF" width="10" height="10"></rect>
					<path fill="#000000" d="M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z"/>
					<path fill="#000000" d="M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z"/>
				</mask>
				<path fill="#000000" d="M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z" mask="url(#Mask)"/>
			</svg>
		</div>
		<div class="windowbar-close">
			<svg x="0px" y="0px" viewBox="0 0 12 12">
				<polygon fill="#000000" points="12,1 11,0 6,5 1,0 0,1 5,6 0,11 1,12 6,7 11,12 12,11 7,6"></polygon>
			</svg>
		</div>
	</div>
</div>

<div class="windowbar wb-default">
	<div class="windowbar-title"></div>
	<div class="windowbar-controls">
		<div class="windowbar-minimize">
			<svg x="0px" y="0px" viewBox="0 0 10 10">
				<rect fill="#000000" width="10" height="1" x="0" y="9"></rect>
			</svg>
		</div>
		<div class="windowbar-maximize">
			<svg x="0px" y="0px" viewBox="0 0 10 10">
				<path fill="#000000" d="M 0 0 L 0 10 L 10 10 L 10 0 L 0 0 z M 1 1 L 9 1 L 9 9 L 1 9 L 1 1 z "/>
			</svg>
		</div>
		<div class="windowbar-close">
			<svg x="0px" y="0px" viewBox="0 0 12 12">
				<polygon fill="#000000" points="12,1 11,0 6,5 1,0 0,1 5,6 0,11 1,12 6,7 11,12 12,11 7,6"></polygon>
			</svg>
		</div>
	</div>
</div>