css -> less

5 files changed, 176 insertions, 93 deletions

diff --git a/.editorconfig b/.editorconfig
index faf611f..51ad127 100755
--- a/.editorconfig
+++ b/.editorconfig
@@ -5,8 +5,11 @@ insert_final_newline = true
 [*.html]
 indent_style = tab
 
+[*.less]
+indent_style = tab
+
 [*.js]
 indent_style = tab
 
 [*.css]
-indent_style = tab
\ No newline at end of file
+indent_style = tab
diff --git a/reader.css b/reader.css
index 1f80468..32922b0 100755..100644
--- a/reader.css
+++ b/reader.css
@@ -1,117 +1,91 @@
-@media (orientation:landscape) {
-    .hidden-landscape {
-        display: none;
-    }
-}
-
-@media (orientation:portrait) {
-    .hidden-portrait {
-        display: none;
-    }
-}
-
+@media (orientation: landscape) {
+  .hidden-landscape {
+    display: none;
+  }
+}
+@media (orientation: portrait) {
+  .hidden-portrait {
+    display: none;
+  }
+}
 .splash {
-	z-index : 999;
-	position : absolute;
-	top : 0;
-	left : 0;
-	width : 100%;
-	height : 100%;
-	background : white;
-	font-size : 21px;
-	display : flex;
-	align-items : center;
-	justify-content : center;
-}
-
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  font-size: 21px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 #reader {
-    position : absolute;
-    top : 0;
-    bottom : 0;
-    left : 0;
-    right : 0;
-    display : flex;
-    justify-content : center;
-    overflow : hidden;
-}
-
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
 #reader.fit-width {
-    overflow-y : auto;
+  overflow-y: auto;
 }
-
 #reader.fit-width .right-page,
 #reader.single-column .right-page {
-    display : none ! important;
+  display: none ! important;
 }
 #reader.flip-columns .right-page {
-    order : -1;
-}
-
-#reader img {
-    opacity : 1;
-    transition : filter 0.25s linear;
+  order: -1;
 }
-
-#reader img.unloading {
-    filter : grayscale(1);
-}
-
 #reader.single-column img {
-    margin : auto;
+  margin: auto;
 }
-
 #reader.fit-width img {
-    max-width : 100%;
-    width : auto;
-    margin: auto;
+  max-width: 100%;
+  width: auto;
+  margin: auto;
 }
-
 #reader.fit-size:not(.single-column) img.limit-width {
-	max-width : 50%;
+  max-width: 50%;
 }
-
 #reader.fit-size img {
-    max-width : 100%;
-    max-height : 100%;
-    margin-top : auto;
-    margin-bottom : auto;
-    width : auto;
-    height : auto;
-}
-
-#left, #right {
-    position : absolute;
-    top : 48px;
-    bottom : 48px;
-    width : 64px;
-    z-index : 10;
-    cursor : pointer;
-    display : flex;
-    align-items : center;
-    justify-content : center;
-    opacity : 0.2;
-}
-
+  max-width: 100%;
+  max-height: 100%;
+  margin-top: auto;
+  margin-bottom: auto;
+  width: auto;
+  height: auto;
+}
+#left,
+#right {
+  position: absolute;
+  top: 48px;
+  bottom: 48px;
+  width: 64px;
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.2;
+}
 #left {
-    left : 0;
+  left: 0;
 }
-
 #right {
-    right : 0;
-}
-
-#left:hover, #right:hover {
-
+  right: 0;
 }
-
 ::-webkit-scrollbar {
-    width: 4px;
+  width: 4px;
 }
-
 ::-webkit-scrollbar-thumb {
-    background-color: #337ab7;
+  background-color: #337ab7;
 }
-
 ::-webkit-scrollbar-track {
-    background-color: #eee;
+  background-color: #eee;
 }
+/*# sourceMappingURL=reader.css.map */
\ No newline at end of file
diff --git a/reader.css.map b/reader.css.map
new file mode 100644
index 0000000..46e3cf0
--- /dev/null
+++ b/reader.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["reader.less"],"names":[],"mappings":"AAAA,QAAgC;EAC/B;IACC,aAAA;;;AAIF,QAA+B;EAC9B;IACC,aAAA;;;AAIF;EACC,YAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;;AAGD;EACC,kBAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;EACA,gBAAA;;AAGD,OAAO;EACN,gBAAA;;AAGD,OAAO,UAAW;AAClB,OAAO,cAAe;EACrB,yBAAA;;AAGD,OAAO,aAAc;EACpB,SAAA;;AAGD,OAAO,cAAe;EACrB,YAAA;;AAGD,OAAO,UAAW;EACjB,eAAA;EACA,WAAA;EACA,YAAA;;AAGD,OAAO,SAAS,IAAI,gBAAiB,IAAG;EACvC,cAAA;;AAGD,OAAO,SAAU;EAChB,eAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;;AAGD;AAAO;EACN,kBAAA;EACA,SAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;;AAGD;EACC,OAAA;;AAGD;EACC,QAAA;;AAGD;EACC,UAAA;;AAGD;EACC,yBAAA;;AAGD;EACC,sBAAA","file":"reader.css"}
\ No newline at end of file
diff --git a/reader.html b/reader.html
index 8312190..1cca6bb 100755
--- a/reader.html
+++ b/reader.html
@@ -16,7 +16,7 @@
 	<link rel="stylesheet" type="text/css" href="reader.css"/>
 	<script type="text/javascript" src="reader.js"></script>
 </head>
-<body>
+<body class="dark">
 
 <div class="modal fade" id="settings-modal" tabindex="-1" role="dialog">
 	<div class="modal-dialog" role="document">
diff --git a/reader.less b/reader.less
new file mode 100644
index 0000000..bdfb8fa
--- /dev/null
+++ b/reader.less
@@ -0,0 +1,105 @@
+@media (orientation: landscape) {
+	.hidden-landscape {
+		display: none;
+	}
+}
+
+@media (orientation: portrait) {
+	.hidden-portrait {
+		display: none;
+	}
+}
+
+.splash {
+	z-index: 999;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: white;
+	font-size: 21px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#reader {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	justify-content: center;
+	overflow: hidden;
+}
+
+#reader.fit-width {
+	overflow-y: auto;
+}
+
+#reader.fit-width .right-page,
+#reader.single-column .right-page {
+	display: none ! important;
+}
+
+#reader.flip-columns .right-page {
+	order: -1;
+}
+
+#reader.single-column img {
+	margin: auto;
+}
+
+#reader.fit-width img {
+	max-width: 100%;
+	width: auto;
+	margin: auto;
+}
+
+#reader.fit-size:not(.single-column) img.limit-width {
+	max-width: 50%;
+}
+
+#reader.fit-size img {
+	max-width: 100%;
+	max-height: 100%;
+	margin-top: auto;
+	margin-bottom: auto;
+	width: auto;
+	height: auto;
+}
+
+#left, #right {
+	position: absolute;
+	top: 48px;
+	bottom: 48px;
+	width: 64px;
+	z-index: 10;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0.2;
+}
+
+#left {
+	left: 0;
+}
+
+#right {
+	right: 0;
+}
+
+::-webkit-scrollbar {
+	width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: #337ab7;
+}
+
+::-webkit-scrollbar-track {
+	background-color: #eee;
+}