<div role="dialog" aria-labeledby="25% Extracting F:\Downloads\Completed\...iC4TE\syn-2940.rar" draggable resize="both" class="dialog">
	<header class="dialog-header">
		<img src="http://sevenzip.sourceforge.net/logos/7z_rm01.jpg" alt="7zip Logo" class="dialog-logo">
		<h1 id="dialog-heading" class="dialog-heading">25% Extracting F:\Downloads\Completed\...iC4TE\syn-2940.rar</h1>
		<ul class="window-actions">
			<li class="window-action-container"><label for="minimize" class="window-action-icon">&#8212;</label><input type="radio" id="minimize" class="window-action" name="window_action"></li>
			<li class="window-action-container"><label for="maximize" class="window-action-icon">&#128470;</label><input type="radio" id="maximize" class="window-action" name="window_action"></li>
			<li class="window-action-container"><label for="close" class="window-action-icon">&#x2715;</label><input type="radio" id="close" class="window-action" name="window_action"></li>
		</ul>
	</header>
	<div class="dialog-body">
		<header class="overview">
			<dl class="time-meta">
				<dt>Elapsed Time</dt>
				<dd><time>00:02:57</time></dd>
				<dt>Remaining Time</dt>
				<dd><time>00:00:41</time></dd>
				<dt>Files:</dt>
				<dd>2321</dd>
				<dt>Compression Ratio</dt>
				<dd>63%</dd>
			</dl>
			<dl class="size-meta">
				<dt>Total Size</dt>
				<dd>9538 M</dd>
				<dt>Speed</dt>
				<dd>43 MB/<sup>s</sup></dd>
				<dt>Processed</dt>
				<dd>7726 M</dd>
				<dt>Compressed Size</dt>
				<dd>4917 M</dd>
			</dl>
		</header>
		<div class="main-info">
			<dl class="info">
				<dt>Extracting</dt>
				<dd>ISW Momentum\Dryer Wand\DryWand.ogg</dd>
			</dl>
			<progress min="0" max="100" value="25" class="dialog-progress"></progress>
		</div>
		<footer class="dialog-actions">
			<button class="dialog-action">Background</button>
			<button class="dialog-action">Pause</button>
			<button class="dialog-action">Cancel</button>
		</footer>
	</div>
</div>
$image-spacing ?= 0.5em
$dialog-padding ?= 1em
$dialog-body-colour ?= #ccc + 35
$windows-theme-colour ?= #ccc + 25

body
	font-family Segoe UI, Helvetica, system
	display flex
	justify-content center
	margin 4em 0
	font-size 0.9em
.dialog
	border 1px solid transparentify(black, 0.2)
	display inline-block
	&-body
		background $dialog-body-colour
		padding $dialog-padding
		display flex
		flex-direction column
	&-progress
		width 100%
		height 1.5em
		margin 1em 0
	&:focus
		border 0.1em solid blue
.window-action-container
	display inline-block
.window-action
	display none
.window-action-icon
	padding 0.5em
	display block
	opacity 0.7
	transition 0.1s ease background, 0.1s ease opacity, 0.1s ease color
	&:hover
		background $windows-theme-colour
		opacity 1
	&[for="close"]
		&:hover
			background red
			color white
.dialog-header
	display flex
	align-items center
.dialog-heading
	flex 1
.dialog-logo
	max-height 1em
	margin 0 $image-spacing
.dialog-actions
	text-align right
	padding 1em 0 0 0
	align-self flex-end
.dialog-action
	min-width 7em
	padding 0.2em 0
	& + &
		margin-left 0.75em
.overview
	display flex
	dl
		flex 1 0
		flex-wrap wrap
		& + dl
			margin-left 1em
		dt, dd
			line-height 1.5
		dt
			clear right
			float left
		dd
			float right

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.