hage-desktop/src/temp/syuilo-flat.html

<style>

html {
	background-image: url('./hagedesktop_logo_wallpaper.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}

/* Button
 * ---------------------------------------------------------------- */
button.ui {
	font-family:
		Helvetica,
		Arial,
		'Hiragino Kaku Gothic ProN',
		'ヒラギノ角ゴ ProN W3',
		Meiryo UI,
		Meiryo,
		メイリオ,
		sans-serif;
	
	-webkit-appearance: none;
	appearance: none;
	
	display: inline-block;
	box-sizing: border-box;
	margin: 6px;
	padding: 8px 16px;
	min-width: 5em;
	line-height: 1.2em;
	
	cursor: pointer;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #444;
	background: #eee;
	outline: none;
	border: none;
	border-radius: 2px;

	transition: all 0.2s ease;
}
button.ui:hover {
	background: #ddd;
	
	transition: all 0s ease;
}
button.ui:focus {
	outline: solid 1px #ff006c;
	
	transition: all 0s ease;
}
button.ui:active {
	color: #000;
	background: #ccc;
	
	transition: all 0s ease;
}

/* TextBox
 * ---------------------------------------------------------------- */
input[type=text].ui {
	font-family:
		Helvetica,
		Arial,
		'Hiragino Kaku Gothic ProN',
		'ヒラギノ角ゴ ProN W3',
		Meiryo UI,
		Meiryo,
		メイリオ,
		sans-serif;	
	
	margin: 0;
	padding: 8px 10px;
	line-height: 1.2em;

	-webkit-appearance: none;
	appearance: none;
	
	font-size: 1.2em;
	outline: none;
	border: solid 1px #ddd;
	border-radius: 0;
	box-shadow: none;

	transition: border 0.5s ease, box-shadow 0.1s ease;
}
input[type=text].ui:hover {
	border: solid 1px #ff006c;
	transition: border 0.2s ease, box-shadow 0.1s ease;
}
input[type=text].ui:focus {
	border: solid 1px #ff006c;
	transition: border 0.5s ease, box-shadow 0.05s ease;
}

/* Window
 * ---------------------------------------------------------------- */
window {
	font-family:
		Helvetica,
		Arial,
		'Hiragino Kaku Gothic ProN',
		'ヒラギノ角ゴ ProN W3',
		Meiryo UI,
		Meiryo,
		メイリオ,
		sans-serif;
	
	display: block;
	
	width: 600px;
	margin: 32px;
	
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
	window > header {
		display: block;
		margin: 0;
		padding: 0;
		
		cursor: default;
		
		background: rgba(34, 136, 221, 0.9);
	}
	window > header:after {
		content: "";
		display: block;
		clear: both;
	}
		window > header > title {
			display: inline-block;
			padding: 4px 16px;
			line-height: 32px;
			
			font-size: 1.1em;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.7);
		}
		window > header > .actions {
			float: right;
			font-size: 0;
		}
			window > header > .actions > button {
				-webkit-appearance: none;
				appearance: none;
				
				margin: 0;
				padding: 4px 4px;
				
				outline: none;
				border: none;
				background: transparent;
			}
			window > header > .actions > button:hover {
				background: rgba(0, 0, 0, 0.1);
			}
			window > header > .actions > button:active {
				background: rgba(0, 0, 0, 0.2);
			}
	window > main {
		padding: 8px;
		
		background: #fff;
		border-right: solid 2px rgba(34, 136, 221, 0.9);
		border-bottom: solid 2px rgba(34, 136, 221, 0.9);
		border-left: solid 2px rgba(34, 136, 221, 0.9);
	}

</style>

<window>
	<header>
		<title>ウィンドウ</title>
		<div class=actions>
			<button><img src=./minimum.png alt=最小化></button>
			<button><img src=./maximum.png alt=最大化></button>
			<button><img src=./close.png alt=閉じる></button>
		</div>
	</header>
	<main>
		<p>コンテンツ</p>
		<button class=ui>OK</button><button class=ui>キャンセル</button>
		<input type=text class=ui></input>
	</main>
</window>