Styles.

src/_h5ai/client/css/inc/preview-img.less

@@ -23,8 +23,7 @@
 #pv-img-image {
 	max-width: 100%;
 	max-height: 100%;
-	border: 2px solid #fff;
+	border: 1px solid #fff;
-	border-radius: 4px;
 
 	background-color: @check-white;
 	background-image:
@@ -39,12 +38,13 @@
 
 	#pv-img-image {
 		border: 0;
-		border-radius: 0;
 	}
 }
 
 #pv-img-close {
 	position: fixed;
+	left: 0;
+	top: 0;
 	width: 100%;
 	height: 100%;
 	cursor: pointer;

src/_h5ai/client/css/inc/preview-txt.less

@@ -9,6 +9,7 @@
 	z-index: 100;
 
 	background-color: rgba(0,0,0,0.5);
+	.transition(background-color 0.3s ease-in-out);
 
 	text-align: center;
 }
@@ -18,8 +19,7 @@
 	margin: 0 auto;
 	padding: 10px;
 	background-color: #fff;
-	border: 2px solid #fff;
+	border: 1px solid #fff;
-	border-radius: 4px;
 	text-align: left;
 	overflow: auto;
 	position: relative;

src/_h5ai/client/css/inc/preview.less

@@ -0,0 +1,110 @@
+
+#pv-overlay {
+	display: none;
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 100;
+
+	background-color: rgba(0,0,0,0.5);
+	.transition(background-color 0.3s ease-in-out);
+
+	text-align: center;
+}
+
+#pv-overlay.fullscreen {
+	background-color: #111;
+}
+
+#pv-spinner {
+	position: fixed;
+}
+
+#pv-close {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+}
+
+#pv-prev {
+	position: fixed;
+	cursor: pointer;
+}
+
+#pv-next {
+	position: fixed;
+	cursor: pointer;
+}
+
+#pv-buttons {
+	list-style: none;
+	list-style-image: none;
+	margin: 0;
+	padding: 0;
+
+	img {
+		position: relative;
+		top: -2px;
+		width: 16px;
+		height: 16px;
+	}
+	img + span, img + input {
+		margin-left: 6px;
+	}
+	input {
+		background-color: rgba(255,255,255,0.1);
+		border: none;
+		color: #ccc;
+	}
+
+	.bar-label {
+		display: block;
+		color: #ccc;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+		opacity: 0.7;
+		.transition(all 0.2s ease-in-out);
+	}
+
+	.bar-highlight {
+		background-color: rgba(255,255,255,0.1);
+		opacity: 1.0;
+	}
+
+	@bar-sep-border: 1px solid rgba(255,255,255,0.08);
+
+	.bar-button {
+		.bar-label;
+		cursor: pointer;
+		&:hover, &.hover {
+			.bar-highlight;
+		}
+	}
+
+	.bar-left {
+		float: left;
+		border-right: @bar-sep-border;
+	}
+
+	.bar-right {
+		float: right;
+		border-left: @bar-sep-border;
+	}
+}
+
+#pv-bottombar {
+	position: fixed;
+	z-index: 5;
+	width: 100%;
+	height: 32px;
+	left: 0;
+	bottom: 0;
+	background-color: rgb(27,27,27);
+	border-top: 1px solid rgb(45,45,45);
+}

src/_h5ai/client/css/styles.less

@@ -13,6 +13,7 @@
 @import "inc/l10n";
 @import "inc/tree";
 @import "inc/qrcode";
+@import "inc/preview";
 @import "inc/preview-img";
 @import "inc/preview-txt";
 @import "inc/notify";