reader: use flexbox markup, normalize paddings/margins for taps

1 files changed, 36 insertions, 25 deletions

diff --git a/css/read.css b/css/read.css
index 93b1b05..07e4958 100644
--- a/css/read.css
+++ b/css/read.css
@@ -12,58 +12,81 @@
 	font-size : 18px;
 	display : table;
 }
+
 .loading > div {
 	display : table-cell;
 	vertical-align : middle;
 }
+
 .notice {
 	width : 120px;
 	padding-left : 5px;
 }
+
 .header {
 	top : 5px;
 	left : 0px;
 	width : 100%;
 	height : 24px;
 }
+
 .footer {
 	bottom : 5px;
 	left : 0px;
 	width : 100%;
 	height : 24px;
 }
+
 .header, .footer {
 	position : absolute;
 	font-size : 13px;
-	display : table;
+	display : flex;
 	padding-left : 10px;
 	padding-right : 10px;
 	color : #999;
-
-	table-layout : fixed;
+	align-items : center;
 }
-.header > *, .footer > * {
-	display : table-cell;
-	vertical-align : middle;
 
+.header .title, .footer .chapter {
 	overflow : hidden;
 	text-overflow: ellipsis;
 	white-space : nowrap;
 }
+
 .header .title {
-	margin-left : 16px;
+	margin-left : 10px;
+	flex-grow : 2;
 }
+
+.footer .chapter {
+	padding-right : 10px;
+}
+
+.footer .spacer {
+	flex-grow : 2;
+}
+
 .footer .location {
 	cursor : pointer;
 	text-align : right;
 }
+
 .toolbar {
 	text-align : right;
+	display : flex;
+	flex-direction : row;
 }
+
 .toolbar > * {
-	margin-left : 10px;
 	cursor : pointer;
+	margin : 0 4px;
+	padding : 0 2px;
+}
+
+.toolbar > *:last-child {
+	margin-right : 0;
 }
+
 #reader {
 	position : absolute;
 	top : 32px;
@@ -71,36 +94,24 @@
 	left : 32px;
 	right : 32px;
 }
+
 #left, #right {
 	position : absolute;
-	top : 32px;
-	bottom : 32px;
+	top : 48px;
+	bottom : 48px;
 	width : 0px;
 	z-index : 10;
 }
+
 #left {
 	left : 0px;
 }
+
 #right {
 	right : 0px;
 }
 
-@media (max-width: 992px) {
-	.toolbar {
-		width : 128px;
-	}
-}
-
-@media (max-width: 767px) {
-	.toolbar {
-		width : 105px;
-	}
-}
-
 @media (max-width: 576px) {
-	.toolbar {
-		width : 105px;
-	}
 	#reader {
 		left : 24px;
 		right : 24px;