Opera Mail-like web UI

mail.css

@@ -0,0 +1,933 @@
+html, body
+{
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background: #f2edeb;
+	font: 18px/24px 'Segoe UI', sans-serif;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+	text-size-adjust: none;
+}
+
+.clear
+{
+	clear: both;
+	height: 0;
+	overflow: hidden;
+}
+
+img
+{
+	border: none;
+	margin: 0 auto;
+	vertical-align: bottom;
+}
+
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
+{
+	vertical-align: middle;
+}
+
+a
+{
+	font: inherit;
+	color: inherit;
+	text-decoration: underline;
+	outline: 0;
+}
+
+a:hover
+{
+	text-decoration: none;
+}
+
+select, input, textarea, button
+{
+	box-sizing: border-box;
+	font: 100% 'Segoe UI', sans-serif;
+	margin: 0;
+}
+
+table
+{
+	border-collapse: collapse;
+}
+
+table, td, th
+{
+	vertical-align: top;
+	font-size: 100%;
+}
+
+button, a.button
+{
+	display: inline-block;
+	outline: 0;
+	text-decoration: none;
+	background: transparent;
+	border-color: transparent;
+	border-style: solid;
+	border-width: 1px;
+	box-sizing: border-box;
+	line-height: 26px;
+	padding: 2px 3px;
+	transition: all 0.2s ease-out;
+	text-overflow: ellipsis;
+	word-wrap: break-word;
+	overflow: hidden;
+	text-align: left;
+	max-width: 600px;
+	/*white-space: nowrap;
+	height: 32px;*/
+}
+
+button img, a.button img
+{
+	vertical-align: middle;
+	margin-top: -3px;
+}
+
+button:hover, a.button:hover
+{
+	/*background: #f2eeec;
+	background: -moz-linear-gradient(top, #f8f6f5 0%, #f2eeec 5%, #e8e5e3 100%);*/
+	background: -moz-linear-gradient(top, #fdfbfa 0%, #efebea 100%);
+	border-color: #cac6c5 #bab7b4 #bab7b4 #cac6c5;
+	border-radius: 3px;
+}
+
+button:active, button.pressed, a.button:active, a.button.pressed
+{
+	/*background: -moz-linear-gradient(top, #e8e5e3 0%, #f2eeec 95%, #f8f6f5 100%);*/
+	box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.2);
+	background: -moz-linear-gradient(top, #efebea 0%, #fdfbfa 100%);
+	border-color: #bab7b4 #cac6c5 #cac6c5 #bab7b4;
+	border-radius: 3px;
+}
+
+button::-moz-focus-inner { border: 0; }
+
+div
+{
+	box-sizing: border-box;
+}
+
+.show-dropdown .down
+{
+	float: right;
+	z-index: 2;
+	display: block;
+	margin: 0 -2px 0 0;
+	height: 26px;
+	width: 15px;
+	background: url(icons/down.png) 4px 11px no-repeat;
+}
+
+.dropdown
+{
+	position: absolute;
+	cursor: default;
+	display: none;
+	left: 0;
+	top: 0;
+	z-index: 10;
+	background: -moz-linear-gradient(top, #ebe9e8 0%, #c2bbb8 100%);
+	padding: 3px;
+	border: 1px solid gray;
+	box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.25);
+}
+
+.dropdown.window
+{
+	background: white;
+	border: 1px solid rgba(0, 0, 0, 0.25);
+	border-radius: 6px;
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
+	padding: 25px;
+}
+
+.dropdown.window .callout-top
+{
+	background: url(icons/callout-top-arrow.png) 0 0 no-repeat;
+	width: 15px;
+	height: 10px;
+	position: absolute;
+	margin-left: -8px;
+	top: -10px;
+	left: 50%;
+}
+
+.dropdown .item
+{
+	border-radius: 3px;
+	white-space: nowrap;
+	border: 1px solid transparent;
+	padding: 0 6px 0 3px;
+	position: relative;
+}
+
+.dropdown .item:hover
+{
+	background: rgba(0, 0, 0, 0.08);
+	border-color: #b7b0ac #cec8c6 #e6e3e2 #cec8c6;
+	border-color: rgba(0, 0, 0, 0.16) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.16);
+}
+
+.dropdown .item:active
+{
+	box-shadow: inset 0 1px 3px 0px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown .item img
+{
+	top: 3px;
+	position: absolute;
+	width: 22px;
+	height: 18px;
+	vertical-align: middle;
+}
+
+.dropdown .item span
+{
+	margin-left: 25px;
+}
+
+.dropdown .item .hotkey
+{
+	float: right;
+	margin: 0 0 0 40px;
+}
+
+.dropdown .split
+{
+	height: 2px;
+	margin: 2px 0;
+	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
+}
+
+.dropdown .split i
+{
+	display: block;
+	height: 1px;
+	background: -moz-linear-gradient(left, rgba(188, 180, 177, 0) 0%, rgba(188, 180, 177, 1) 50%, rgba(188, 180, 177, 0) 100%);
+}
+
+.folder-list
+{
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 20%;
+	/* right border */
+	border-right: 1px solid #aca9a7;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.top-border-gradient
+{
+	position: absolute;
+	right: -1px;
+	width: 1px;
+	top: 0;
+	height: 30px;
+	background: -moz-linear-gradient(top, #f2edeb 0%, #aca9a7 100%);
+}
+
+.bottom-border-gradient
+{
+	position: absolute;
+	right: -1px;
+	width: 1px;
+	bottom: 0;
+	height: 30px;
+	background: -moz-linear-gradient(top, #aca9a7 0%, #f2edeb 100%);
+}
+
+.folder-list .actions
+{
+	padding: 5px;
+	height: 42px;
+	background: -moz-linear-gradient(top, #f2eeec 0%, #e8e5e3 100%);
+	border-bottom: 1px solid #aca9a7;
+}
+
+.folder-list .actions .check-send
+{
+	float: right;
+}
+
+.folder-list .listview
+{
+	background: #f4f3f2;
+	overflow: auto;
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 42px;
+	bottom: 0;
+}
+
+.folder-list .progress-bar
+{
+	display: none;
+}
+
+.folder-list.progress-visible
+{
+	bottom: 25px;
+}
+
+.folder-list.progress-visible .progress-bar
+{
+	display: block;
+	height: 24px;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -24px;
+}
+
+.progress-bar
+{
+	cursor: default;
+}
+
+.folder-list .progress-bar div
+{
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	text-align: center;
+}
+
+.folder-list .progress-bar .pending
+{
+	border-width: 1px;
+	border-style: solid;
+	border-color: #d0ccca #d1cdcb #d3cfcd #d1cdcb;
+	color: black;
+	box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, 0.1);
+}
+
+.folder-list .progress-bar .done
+{
+	border-width: 1px;
+	border-style: solid;
+	border-color: #73a0c2 #547ba0 #33557c #547ba0;
+	background: -moz-linear-gradient(top, #90d7ff 0%, #76baf6 30%, #0098dd 31%, #43aced 100%);
+	color: white;
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+.folder-list .account-header
+{
+	background: -moz-linear-gradient(top, #ffffff 0%, #f3eeec 100%);
+	padding: 1px 10px;
+	position: relative;
+	cursor: default;
+	border-bottom: 1px solid #aca9a7;
+}
+
+.folder-list .account-header .msg-count
+{
+	display: none;
+}
+
+.folder-list .account-header.collapsed .cfg
+{
+	display: none;
+}
+
+.folder-list .account-header.collapsed .icon
+{
+	float: right;
+	position: static;
+	margin: 4px 4px 0 0;
+}
+
+.folder-list .account-header.collapsed .msg-count
+{
+	display: block;
+	color: #626973;
+	float: right;
+	line-height: 22px;
+	font-weight: normal;
+	padding: 0 6px;
+	border-radius: 3px;
+	background: #f2edeb;
+}
+
+.folder-list .account-header:active
+{
+	background: -moz-linear-gradient(top, #f3eeec 0%, #ffffff 100%);
+}
+
+.folder-list .account-header .cfg
+{
+	opacity: 0;
+	position: absolute;
+	right: 10px;
+	top: 50%;
+	margin-top: -8px;
+	transition: all 0.2s ease-out;
+	width: 16px;
+	height: 16px;
+	background: url(icons/config_small.png);
+}
+
+.folder-list .account-header .icon
+{
+	position: absolute;
+	right: 32px;
+	top: 50%;
+	margin-top: -8px;
+	width: 16px;
+	height: 16px;
+}
+
+.folder-list .account-header .icon.warning
+{
+	background: url(icons/warning.png);
+}
+
+@keyframes rotate
+{
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+.folder-list .account-header .icon.loading
+{
+	background: url(icons/reload_static.png); /* reload.png is an APNG, unsupported in Chrome */
+	animation-name: rotate;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+
+.folder-list .account-header:hover .cfg
+{
+	opacity: 1;
+}
+
+.folder-list .account-header .cfg.configuring
+{
+	opacity: 1;
+	background: url(icons/config_small_selected.png);
+}
+
+.folder-list .account-folders
+{
+	overflow: hidden;
+	background: #f4f3f2;
+	transition: all 0.2s ease-out;
+	border-bottom: 1px solid #aca9a7;
+	position: relative;
+}
+
+.folder-list .account-folders:last-child
+{
+	border-bottom: 0;
+}
+
+.folder-list .account-folders.collapsed
+{
+	height: 0;
+	border-bottom: 0;
+}
+
+.folder-list .account-folders .visible-part.animating
+{
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.folder-list .account-folders .folder
+{
+	padding: 1px 4px 1px 14px;
+	cursor: pointer;
+	border: 1px solid transparent;
+	position: relative;
+}
+
+.folder-list .account-folders .folder .msg-count
+{
+	color: #626973;
+	position: absolute;
+	right: 4px;
+	top: 2px;
+	bottom: 2px;
+	line-height: 22px;
+	font-weight: normal;
+	padding: 0 6px;
+	border-radius: 2px;
+}
+
+.folder-list .account-folders .folder:hover span
+{
+	color: #285078;
+	text-decoration: underline;
+}
+
+.folder-list .account-folders .folder.selected
+{
+	background: #9bc7e0;
+	color: white;
+}
+
+.folder-list .account-folders .folder.selected .msg-count
+{
+	background: #b9d8e9;
+}
+
+.folder-list .account-folders .folder:active,
+.folder-list .account-folders .folder.pressed
+{
+	background: #43ace8;
+	border: 1px dotted gray;
+}
+
+.folder-list .account-folders .folder:active .msg-count,
+.folder-list .account-folders .folder.pressed .msg-count
+{
+	background: #7bc5ef;
+}
+
+.folder-list .account-folders .folder img
+{
+	vertical-align: middle;
+	margin-top: -2px;
+}
+
+.folder-list .account-folders .folder.with-unread
+{
+	font-weight: bold;
+}
+
+.message-list
+{
+	position: absolute;
+	left: 20%;
+	top: 0;
+	bottom: 0;
+	width: 35%;
+	/* right border */
+	border-right: 1px solid #aca9a7;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.message-list .actions
+{
+	padding: 5px;
+	height: 42px;
+	background: -moz-linear-gradient(top, #f2eeec 0%, #e8e5e3 100%);
+	border-bottom: 1px solid #aca9a7;
+}
+
+.message-list .actions .searchbox
+{
+	float: left;
+	height: 32px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #bab7b4 #cac6c5 #cac6c5 #bab7b4;
+	border-radius: 3px;
+	background: url(icons/search.png) 5px 6px no-repeat, -moz-linear-gradient(top, #efefef 0%, #ffffff 10%, #ffffff 100%);
+	padding: 1px 4px 1px 24px;
+	margin: 0 4px;
+}
+
+.message-list .actions .searchbox input
+{
+	border: 0;
+	background: transparent;
+}
+
+.message-list .actions .threads
+{
+	float: left;
+}
+
+.message-list .actions .list-sort
+{
+	float: right;
+}
+
+.message-list .listview
+{
+	background: white;
+	overflow: auto;
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 42px;
+	bottom: 0;
+	padding: 30px 0 0 0;
+}
+
+.message-list .listview .day
+{
+	height: 30px;
+	padding-top: 2px;
+	font-weight: bold;
+	text-align: center;
+	background: -moz-linear-gradient(top, #ffffff 0%, #f3eeec 100%);
+	border-top: 1px solid #dadce0;
+	border-bottom: 1px solid #aca9a7;
+}
+
+.message-list .listview .day:active
+{
+	background: -moz-linear-gradient(top, #f3eeec 100%, #ffffff 0%);
+}
+
+.message-list .listview .day.collapsed
+{
+	border-bottom: 0;
+}
+
+.message-list .listview .first-day
+{
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	right: 0;
+	border-top: 0 !important;
+}
+
+.message-list .listview .message
+{
+	height: 60px;
+	position: relative;
+	line-height: 28px;
+	border-bottom: 1px solid #dadce0;
+}
+
+.message-list .listview .message.unread
+{
+	font-weight: bold;
+}
+
+.message-list .listview .message.unseen, .message-list .listview .message.unseen .from
+{
+	font-weight: bold;
+	color: #0059b3;
+}
+
+.message-list .listview .message.unseen .time
+{
+	color: #0059b3;
+}
+
+.message-list .listview .message.selected
+{
+	background: #9bc7e0;
+	color: white;
+}
+
+.message-list .listview:focus .message.selected
+{
+	color: white;
+	background: #43ace8;
+}
+
+.message-list .listview .message:last-child
+{
+	border-bottom: 0;
+}
+
+.message-list .listview .day-list:last-child .message:last-child
+{
+	border-bottom: 1px solid #dadce0;
+}
+
+.message-list .listview .message .subject
+{
+	position: absolute;
+	top: 0;
+	left: 21px;
+	right: 4px;
+	height: 28px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.message-list .listview .message .bullet
+{
+	position: absolute;
+	left: 2px;
+	top: 36px;
+	width: 16px;
+	height: 16px;
+	background: url(icons/bullet_read.png) no-repeat;
+}
+
+.message-list .listview .message.unread .bullet
+{
+	background-image: url(icons/bullet_unread.png);
+}
+
+.message-list .listview .message.replied .bullet
+{
+	background-image: url(icons/bullet_replied_read.png);
+}
+
+.message-list .listview .message.unread.replied .bullet
+{
+	background-image: url(icons/bullet_replied_unread.png);
+}
+
+.message-list .listview .message.unseen .bullet
+{
+	background-image: url(icons/bullet_unseen.png);
+}
+
+.message-list .listview .message.pinned .bullet
+{
+	background-image: url(icons/bullet_pinned.png);
+}
+
+.message-list .listview .message.pinned.replied .bullet
+{
+	background-image: url(icons/bullet_replied_pinned.png);
+}
+
+.message-list .listview .message .from
+{
+	position: absolute;
+	top: 28px;
+	left: 21px;
+	right: 120px;
+	height: 30px;
+	color: #464646;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.message-list .listview .message .attach
+{
+	position: absolute;
+	top: 36px;
+	right: 100px;
+	width: 16px;
+	height: 16px;
+	background: url(icons/mail_attachments.png);
+}
+
+.message-list .listview .message .time
+{
+	position: absolute;
+	top: 28px;
+	right: 6px;
+	height: 30px;
+	color: #6d6d6d;
+	font-weight: normal;
+}
+
+.message-list .listview .message.selected .from,
+.message-list .listview .message.selected .time
+{
+	color: white;
+}
+
+.message-view
+{
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 45%;
+}
+
+.message-view .vert-split
+{
+	display: table;
+	width: 100%;
+	height: 100%;
+}
+
+.message-view .row
+{
+	display: table-row;
+	vertical-align: top;
+}
+
+.message-view .row.full
+{
+	position: relative;
+	height: 100%;
+}
+
+.message-view .nomail
+{
+	display: table-cell;
+	vertical-align: middle;
+	box-shadow: inset 20px 20px 60px 0 rgba(0, 0, 0, 0.1);
+	text-align: center;
+}
+
+.message-view .nomail img
+{
+	/*display: block;*/
+}
+
+.message-view .nomail .txt
+{
+	color: #858a9b;
+	font-weight: bold;
+	font-size: 28px;
+	margin-top: 25px;
+}
+
+.message-view .actions
+{
+	padding: 5px 5px 4px;
+	background: -moz-linear-gradient(top, #f2eeec 0%, #e8e5e3 100%);
+	border-bottom: 1px solid #aca9a7;
+}
+
+.message-view .message
+{
+	display: table-cell;
+}
+
+.message-view .message .flex
+{
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.message-view .message .flex .headers
+{
+	flex: none;
+}
+
+.message-view .message .flex .text
+{
+	flex: 1;
+}
+
+/*.message-view .message .flex
+{
+	display: table;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+}
+
+.message-view .message .flex .top
+{
+	display: table-row;
+}
+
+.message-view .message .flex .headers
+{
+	display: table-row;
+}
+
+.message-view .message .flex .text
+{
+	display: table-row;
+	height: 100%;
+}*/
+
+.message-view .message .headers
+{
+	background: -moz-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
+	padding: 20px;
+	border-bottom: 1px solid #bab7b5;
+	max-height: 50%;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.message-view .message .headers .top
+{
+	margin: 0 0 20px 0;
+}
+
+.message-view .message .headers .top .subject
+{
+	font-weight: bold;
+	font-size: 22px;
+	color: #464646;
+}
+
+.message-view .message .headers .top .time
+{
+	float: right;
+	margin: 1px 0 0 10px;
+	white-space: nowrap;
+}
+
+.message-view .message .headers .top .pin
+{
+	float: right;
+	width: 16px;
+	height: 16px;
+	margin: 4px 0 0 10px;
+	background: url(icons/mail_unpinned.png);
+}
+
+.message-view .message .headers .header-table
+{
+	display: table;
+}
+
+.message-view .message .headers .header
+{
+	display: table-row;
+}
+
+.message-view .message .headers .header > div
+{
+	display: table-cell;
+	line-height: 32px;
+	vertical-align: top;
+}
+
+.message-view .message .headers .header .field
+{
+	font-weight: bold;
+	padding: 0 20px 0 0;
+}
+
+.message-view .message .text
+{
+	background: white;
+	overflow: auto;
+	padding: 20px;
+}
+
+.message-view .message .text p
+{
+	margin: 0 0 16px 0;
+}

mail.htm

@@ -0,0 +1,605 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="mail.css" />
+</head>
+<body>
+<div class="folder-list progress-visible">
+    <div class="top-border-gradient"></div>
+    <div class="bottom-border-gradient"></div>
+    <div class="actions">
+        <button><img src="icons/compose.png" /> Compose</button>
+        <a id="show-dropdown-check-send" class="button show-dropdown check-send">
+            <img src="icons/mail_check_send.png" />
+            <span class="down"></span>
+        </a>
+        <div class="dropdown" id="dropdown-check-send">
+            <div class="item">
+                <div class="hotkey">Ctrl-K</div>
+                <img src="icons/mail_check.png" />
+                <span>Check All</span>
+            </div>
+            <div class="item">
+                <div class="hotkey">Ctrl-Shift-K</div>
+                <img src="icons/mail_send.png" />
+                <span>Send Queued</span>
+            </div>
+            <div class="split"><i></i></div>
+            <div class="item">
+                <img src="icons/mail_check.png" />
+                <span>vitalif@mail.ru</span>
+            </div>
+            <div class="item">
+                <img src="icons/mail_check.png" />
+                <span>vitalif@yourcmc.ru</span>
+            </div>
+            <div class="split"><i></i></div>
+            <div class="item">
+                <span>Resynchronize All Messages</span>
+            </div>
+        </div>
+    </div>
+    <div class="listview">
+        <div class="account-header">
+            All Messages
+            <div class="cfg"></div>
+            <div class="msg-count">65</div>
+        </div>
+        <div class="account-folders">
+        <div class="visible-part">
+            <div class="folder with-unread selected">
+                <img src="icons/mail_unread.png" />
+                <span>Unread</span>
+                <div class="msg-count">65</div>
+            </div>
+            <div class="folder with-unread">
+                <img src="icons/mail_received.png" />
+                <span>Received</span>
+                <div class="msg-count">65</div>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_pinned.png" />
+                <span>Pinned</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_outbox.png" />
+                <span>Outbox</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_sent.png" />
+                <span>Sent</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_drafts.png" />
+                <span>Drafts</span>
+                <div class="msg-count">507</div>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_spam.png" />
+                <span>Spam</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_trash.png" />
+                <span>Trash</span>
+                <div class="msg-count">423</div>
+            </div>
+        </div>
+        </div>
+        <div class="account-header">
+            vitalif@mail.ru
+            <div class="cfg"></div>
+            <div class="msg-count">48</div>
+            <div class="loading icon"></div>
+            <div class="warning icon" style="display: none"></div>
+        </div>
+        <div class="account-folders">
+        <div class="visible-part">
+            <div class="folder with-unread">
+                <img src="icons/mail_unread.png" />
+                <span>Unread</span>
+                <div class="msg-count">48</div>
+            </div>
+            <div class="folder with-unread">
+                <img src="icons/folder.png" />
+                <span>INBOX</span>
+                <div class="msg-count">48</div>
+            </div>
+            <div class="folder">
+                <img src="icons/folder.png" />
+                <span>TODO</span>
+            </div>
+            <div class="folder">
+                <img src="icons/folder.png" />
+                <span>Архив</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_trash.png" />
+                <span>Корзина</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_sent.png" />
+                <span>Отправленные</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_spam.png" />
+                <span>Спам</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_drafts.png" />
+                <span>Черновики</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_pinned.png" />
+                <span>Pinned</span>
+            </div>
+        </div>
+        </div>
+        <div class="account-header collapsed">
+            vitalif@yourcmc.ru
+            <div class="warning" style="display: none"></div>
+            <div class="cfg"></div>
+            <div class="msg-count">16</div>
+        </div>
+        <div class="account-folders collapsed">
+        <div class="visible-part">
+            <div class="folder with-unread">
+                <img src="icons/mail_unread.png" />
+                <span>Unread</span>
+                <div class="msg-count">16</div>
+            </div>
+            <div class="folder">
+                <img src="icons/folder.png" />
+                <span>Drafts</span>
+            </div>
+            <div class="folder">
+                <img src="icons/folder.png" />
+                <span>HAM</span>
+            </div>
+            <div class="folder with-unread">
+                <img src="icons/folder.png" />
+                <span>INBOX</span>
+                <div class="msg-count">16</div>
+            </div>
+            <div class="folder">
+                <img src="icons/folder.png" />
+                <span>intermedia_su</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_sent.png" />
+                <span>Sent</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_spam.png" />
+                <span>SPAM</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_trash.png" />
+                <span>TRASH</span>
+            </div>
+            <div class="folder">
+                <img src="icons/mail_pinned.png" />
+                <span>Pinned</span>
+            </div>
+        </div>
+        </div>
+    </div>
+    <div class="progress-bar">
+        <div class="pending">Loading database (33%)</div>
+        <div class="clip" style="width: 33%; overflow: hidden">
+            <div class="done">Loading database (33%)</div>
+        </div>
+    </div>
+</div>
+<div class="message-list">
+    <div class="top-border-gradient"></div>
+    <div class="bottom-border-gradient"></div>
+    <div class="actions">
+        <div class="searchbox">
+            <input type="text" placeholder="Search mail" />
+        </div>
+        <a id="show-dropdown-threads" class="button show-dropdown threads" title="Show Message Thread">
+            <img src="icons/thread.png" />
+            <span class="down"></span>
+        </a>
+        <div class="dropdown" id="dropdown-threads">
+            <div class="item">
+                <img src="icons/thread.png" />
+                <span>Show Message Thread</span>
+            </div>
+            <div class="item">
+                <span>Follow Thread</span>
+            </div>
+            <div class="item">
+                <span>Ignore Thread</span>
+            </div>
+            <div class="split"><i></i></div>
+            <div class="item">
+                <div class="hotkey">M</div>
+                <img src="icons/read.png" />
+                <span>Mark Thread as Read</span>
+            </div>
+            <div class="item">
+                <div class="hotkey">N</div>
+                <span>Mark Thread and Go to Next Unread</span>
+            </div>
+        </div>
+        <a id="show-dropdown-list-sort" class="button show-dropdown whole list-sort">
+            <img src="icons/list_sort.png" />
+            <span class="down"></span>
+        </a>
+        <div class="dropdown window" id="dropdown-list-sort">
+            <div class="callout-top"></div>
+            <div class="title">Sorting for INBOX</div>
+            <label><input type="checkbox" /> Override default sorting</label>
+            <div class="sorting">
+                <select class="sortby">
+                    <option>Sort by sent date</option>
+                    <option>Sort by status</option>
+                    <option>Sort by label</option>
+                    <option>Sort by size</option>
+                    <option>Sort by subject</option>
+                </select>
+                <select class="group">
+                    <option>Do not group</option>
+                    <option>Group by read status</option>
+                    <option>Group by pinned status</option>
+                    <option>Group by date</option>
+                </select>
+                <label><input type="checkbox" /> Sort ascending</label>
+                <label><input type="checkbox" checked="checked" /> Threaded</label>
+            </div>
+            <div class="show">
+                <a class="button"><img src="icons/right.png" /> Show</a>
+            </div>
+            <div class="sorting">
+                <label><input type="checkbox" checked="checked" /> Show Read</label>
+                <label><input type="checkbox" /> Show Trash</label>
+                <label><input type="checkbox" checked="checked" /> Show Spam</label>
+                <label><input type="checkbox" checked="checked" /> Show Hidden</label>
+                <label><input type="checkbox" checked="checked" /> Show Mailing Lists</label>
+                <label><input type="checkbox" checked="checked" /> Show Sent</label>
+                <label><input type="checkbox" /> Show Duplicates</label>
+            </div>
+        </div>
+        <div class="clear"></div>
+    </div>
+    <div class="listview" tabindex="1" onscroll="this.children[0].style.top = this.scrollTop+'px'">
+        <div class="day first-day">TODAY</div>
+        <div class="day-list">
+            <div class="message unseen">
+                <div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
+                <div class="bullet"></div>
+                <div class="from">Jan Luca Naumann</div>
+                <div class="attach"></div>
+                <div class="time">19:31</div>
+            </div>
+            <div class="message unread">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach"></div>
+                <div class="time">14:03</div>
+            </div>
+            <div class="message selected">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">13:49</div>
+            </div>
+        </div>
+        <div class="day">YESTERDAY</div>
+        <div class="day-list">
+            <div class="message">
+                <div class="subject">интересно про Сингапур</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">Сб 22:09</div>
+            </div>
+        </div>
+        <div class="day">THURSDAY</div>
+        <div class="day-list">
+            <div class="message">
+                <div class="subject">Re: [mediawiki4intranet/IntraACL] Manage Groups (#59)</div>
+                <div class="bullet"></div>
+                <div class="from">Serze</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">Чт 21:10</div>
+            </div>
+            <!-- -->
+            <div class="message">
+                <div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
+                <div class="bullet"></div>
+                <div class="from">Jan Luca Naumann</div>
+                <div class="attach"></div>
+                <div class="time">19:31</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach"></div>
+                <div class="time">14:03</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">13:49</div>
+            </div>
+            <div class="message">
+                <div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
+                <div class="bullet"></div>
+                <div class="from">Jan Luca Naumann</div>
+                <div class="attach"></div>
+                <div class="time">19:31</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach"></div>
+                <div class="time">14:03</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">13:49</div>
+            </div>
+            <div class="message">
+                <div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
+                <div class="bullet"></div>
+                <div class="from">Jan Luca Naumann</div>
+                <div class="attach"></div>
+                <div class="time">19:31</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach"></div>
+                <div class="time">14:03</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">13:49</div>
+            </div>
+            <div class="message">
+                <div class="subject">Bug#827127: ITP: profile-sync-daemon -- Symlinks and syncs browser profile dirs to RAM thus reducing HDD/SDD calls and speeding-up browsers.</div>
+                <div class="bullet"></div>
+                <div class="from">Jan Luca Naumann</div>
+                <div class="attach"></div>
+                <div class="time">19:31</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach"></div>
+                <div class="time">14:03</div>
+            </div>
+            <div class="message">
+                <div class="subject">Re: холод)))</div>
+                <div class="bullet"></div>
+                <div class="from">Margarita Philippova</div>
+                <div class="attach" style="display: none"></div>
+                <div class="time">13:49</div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="message-view">
+    <div class="vert-split">
+        <div class="row">
+            <div class="actions">
+                <button><img src="icons/mail_reply.png" />Reply <img src="icons/down.png" /></button>
+                <button><img src="icons/mail_reply_all.png" />Reply All <img src="icons/down.png" /></button>
+                <button><img src="icons/mail_forward.png" />Forward <img src="icons/down.png" /></button>
+                <button><img src="icons/read.png" />Read</button>
+                <button><img src="icons/spam.png" />Spam</button>
+                <button><img src="icons/delete.png" />Delete <img src="icons/down.png" /></button>
+                <button><img src="icons/label.png" />Tag <img src="icons/down.png" /></button>
+                <button><img src="icons/config.png" />Settings <img src="icons/down.png" /></button>
+            </div>
+        </div>
+        <div class="row full">
+            <div class="nomail" style="display: none">
+                <img src="icons/no_mail.png" />
+                <div class="txt">No message selected</div>
+            </div>
+            <div class="message">
+                <div class="flex">
+                    <div class="headers">
+                        <div class="top">
+                            <div class="pin"></div>
+                            <div class="time">Чт 09 июн 2016 21:10:50</div>
+                            <div class="subject">Re: [mediawiki4intranet/IntraACL] Manage Groups (#59)</div>
+                        </div>
+                        <div class="header-table">
+                            <div class="header">
+                                <div class="field">From</div>
+                                <div class="value"><button>Serze &lt;notifications@github.com&gt;</button></div>
+                            </div>
+                            <div class="header">
+                                <div class="field">To</div>
+                                <div class="value"><button>mediawiki4intranet/IntraACL &lt;IntraACL@noreply.github.com&gt;</button></div>
+                            </div>
+                            <div class="header">
+                                <div class="field">Cc</div>
+                                <div class="value"><button>vitalif@mail.ru</button> <button>Comment &lt;comment@noreply.github.com&gt;</button></div>
+                            </div>
+                            <div class="header">
+                                <div class="field">Reply-to</div>
+                                <div class="value"><button>mediawiki4intranet/IntraACL &lt;reply+000e6cbb7663582057cb5221d288cb49c4366302aa8b038b92cf000000011371732a92a169ce097e4f81@reply.github.com&gt;</button></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text">
+                        <p>Any update on this?</p>
+                        <p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">&mdash;<br />You are receiving this because you commented.<br />Reply to this email directly, <a href="https://github.com/mediawiki4intranet/IntraACL/issues/59#issuecomment-224979690">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe/AA5suyv1q1MukSFruqkkKiGePYCL1Ti0ks5qKFcqgaJpZM4IxZ6X">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/AA5su8dZdGM2S9AObD3rLSBnaRRvUSAkks5qKFcqgaJpZM4IxZ6X.gif" width="1" /></p>
+                        <div itemscope itemtype="http://schema.org/EmailMessage">
+                        <div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
+                            <link itemprop="url" href="https://github.com/mediawiki4intranet/IntraACL/issues/59#issuecomment-224979690"></link>
+                            <meta itemprop="name" content="View Issue"></meta>
+                        </div>
+                        <meta itemprop="description" content="View this Issue on GitHub"></meta>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+<!--
+// TODO: expand/collapse days, handle up/down keys (switch messages -> days -> messages -> scroll)
+// TODO: message multiselect in list
+// TODO: space=read
+// TODO: spam, read on/off button states
+// TODO: threads
+// TODO: quick reply
+// TODO: compose window
+// TODO: async backend with parallel fetch, ssh backdoor for work mail
+function collapseFolders()
+{
+    var h = this, e = this;
+    e = e.nextSibling.nextSibling;
+    if (e.className.indexOf('animating') >= 0)
+        return;
+    var expand = e.className.indexOf('collapsed') >= 0;
+    if (expand)
+    {
+        e.children[0].className = 'visible-part animating';
+        e.style.height = e.children[0].offsetHeight+'px';
+    }
+    else
+    {
+        e.children[0].className = 'visible-part animating';
+        e.style.height = e.children[0].offsetHeight+'px';
+        setTimeout(function()
+        {
+            e.style.height = '0px';
+        }, 50);
+    }
+    setTimeout(function()
+    {
+        h.className = expand ? 'account-header' : 'account-header collapsed';
+        e.className = expand ? 'account-folders' : 'account-folders collapsed';
+        e.children[0].className = 'visible-part';
+        e.style.height = '';
+    }, expand ? 200 : 250);
+}
+(function() {
+    var e = document.getElementsByClassName('account-header');
+    for (var i = 0; i < e.length; i++)
+        e[i].addEventListener('click', collapseFolders);
+
+    e = document.getElementsByClassName('message');
+    var selectedMsg;
+    for (var i = 0; i < e.length; i++)
+    {
+        if (e[i].className.indexOf(' selected') >= 0)
+            selectedMsg = e[i];
+        e[i].addEventListener('mousedown', selectMsg);
+    }
+
+    e = document.getElementsByClassName('cfg');
+    for (var i = 0; i < e.length; i++)
+        e[i].addEventListener('click', setCfg);
+
+    e = document.querySelectorAll('.show-dropdown .down');
+    for (var i = 0; i < e.length; i++)
+    {
+        if (e[i].parentNode.className.indexOf(' whole') >= 0)
+            e[i].parentNode.addEventListener('click', showDropdown);
+        else
+        {
+            e[i].addEventListener('click', showDropdown);
+            e[i].parentNode.addEventListener('click', hideDropdown);
+        }
+    }
+    document.body.addEventListener('click', hideAllDropdowns);
+    function showDropdown(ev)
+    {
+        var b = this.className == 'down' ? this.parentNode : this;
+        if (b.className.indexOf(' pressed') < 0)
+        {
+            hideAllDropdowns();
+            b.className += ' pressed';
+            var m = document.getElementById('dropdown-'+b.id.substr(14));
+            var x = b.offsetLeft, y = b.offsetTop; // FIXME calculate offsets correctly
+            m.style.top = (y+b.offsetHeight)+'px';
+            m.style.left = x+'px';
+            m.style.display = 'block';
+            if (m.className.indexOf(' window') >= 0)
+            {
+                m.style.top = (y+b.offsetHeight+3)+'px';
+                m.style.left = Math.round(x+b.offsetWidth/2-m.offsetWidth/2)+'px';
+            }
+        }
+        else
+            hideDropdown.apply(b);
+        ev.stopPropagation();
+    }
+    function hideDropdown()
+    {
+        if (this.className.indexOf(' pressed') >= 0)
+        {
+            this.className = this.className.replace(/ pressed/g, '');
+            var m = document.getElementById('dropdown-'+this.id.substr(14));
+            m.style.display = '';
+        }
+    }
+    function hideAllDropdowns()
+    {
+        var e = document.querySelectorAll('.dropdown');
+        for (var i = 0; i < e.length; i++)
+        {
+            if (e[i].style.display == 'block')
+            {
+                var m = document.getElementById('show-'+e[i].id);
+                m.className = m.className.replace(/ pressed/g, '');
+                e[i].style.display = '';
+            }
+        }
+    }
+
+    window.addEventListener('resize', resize);
+    resize();
+    function resize()
+    {
+        var f = document.querySelector('.folder-list .progress-bar');
+        var e = document.querySelectorAll('.folder-list .progress-bar .done, .folder-list .progress-bar .pending');
+        for (var i = 0; i < e.length; i++)
+            e[i].style.width = f.offsetWidth+'px';
+    }
+
+    function setCfg(ev)
+    {
+        this.className = this.className == 'cfg' ? 'cfg configuring' : 'cfg';
+        ev.stopPropagation();
+        return false;
+    }
+    function selectMsg()
+    {
+        if (this != selectedMsg)
+        {
+            this.className += ' selected';
+            if (selectedMsg)
+                selectedMsg.className = selectedMsg.className.replace(/ selected/, '');
+            selectedMsg = this;
+        }
+    }
+})();
+-->
+</script>
+</body>
+</html>