Browse Source

css -> less

Andrew Dolgov 1 year ago
parent
commit
0b4987a72c
5 changed files with 176 additions and 93 deletions
  1. 4 1
      .editorconfig
  2. 65 91
      reader.css
  3. 1 0
      reader.css.map
  4. 1 1
      reader.html
  5. 105 0
      reader.less

+ 4 - 1
.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
+indent_style = tab

+ 65 - 91
reader.css

@@ -1,117 +1,91 @@
[email protected] (orientation:landscape) {
-    .hidden-landscape {
-        display: none;
-    }
-}
-
[email protected] (orientation:portrait) {
-    .hidden-portrait {
-        display: none;
-    }
-}
-
[email protected] (orientation: landscape) {
+  .hidden-landscape {
+    display: none;
+  }
+}
[email protected] (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 */

+ 1 - 0
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"}

+ 1 - 1
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">

+ 105 - 0
reader.less

@@ -0,0 +1,105 @@
[email protected] (orientation: landscape) {
+	.hidden-landscape {
+		display: none;
+	}
+}
+
[email protected] (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;
+}