Use less

.gitignore

@@ -12,3 +12,4 @@ mango
 public/css/uikit.css
 public/img/*.svg
 public/js/*.min.js
+public/css/*.css

public/css/mango.css

@@ -1,146 +0,0 @@
-.uk-alert-close {
-    color: black !important;
-}
-
-.uk-card-body {
-    padding: 20px;
-}
-
-.uk-card-media-top {
-    width: 100%;
-    height: 250px;
-}
-
-@media (min-width: 600px) {
-    .uk-card-media-top {
-        height: 300px;
-    }
-}
-
-.uk-card-media-top>img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-}
-
-.uk-card-title {
-    max-height: 3em;
-}
-
-.acard:hover {
-    cursor: pointer;
-}
-
-.reader-bg {
-    background-color: black;
-}
-
-.break-word {
-    word-wrap: break-word;
-}
-
-.uk-logo>img {
-    height: 90px;
-    width: 90px;
-}
-
-.uk-search {
-    width: 100%;
-}
-
-#selectable .ui-selecting {
-    background: #EEE6B9;
-}
-
-#selectable .ui-selected {
-    background: #F4E487;
-}
-
-.uk-light #selectable .ui-selecting {
-    background: #5E5731;
-}
-
-.uk-light #selectable .ui-selected {
-    background: #9D9252;
-}
-
-td>.uk-dropdown {
-    white-space: pre-line;
-}
-
-#edit-modal .uk-grid>div {
-    height: 300px;
-}
-
-#edit-modal #cover {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-}
-
-#edit-modal #cover-upload {
-    height: 100%;
-    box-sizing: border-box;
-}
-
-#edit-modal .uk-modal-body .uk-inline {
-    width: 100%;
-}
-
-.item .uk-card-title {
-    font-size: 1rem;
-}
-
-.grayscale {
-    filter: grayscale(100%);
-}
-
-.uk-light .uk-navbar-dropdown,
-.uk-light .uk-modal-header,
-.uk-light .uk-modal-body,
-.uk-light .uk-modal-footer {
-    background: #222;
-}
-
-.uk-light .uk-dropdown {
-    background: #333;
-}
-
-.uk-light .uk-navbar-dropdown,
-.uk-light .uk-dropdown {
-    color: #ccc;
-}
-
-.uk-light .uk-nav-header,
-.uk-light .uk-description-list>dt {
-    color: #555;
-}
-
-[x-cloak] {
-    display: none;
-}
-
-#select-bar-controls a {
-    transform: scale(1.5, 1.5);
-}
-
-#select-bar-controls a:hover {
-    color: orange;
-}
-
-#main-section {
-    position: relative;
-}
-
-#totop-wrapper {
-    position: absolute;
-    top: 100vh;
-    right: 2em;
-    bottom: 0;
-}
-
-#totop-wrapper a {
-    position: fixed;
-    position: sticky;
-    top: calc(100vh - 5em);
-}

public/css/mango.less

@@ -0,0 +1,124 @@
+// Item cards
+.item .uk-card {
+    cursor: pointer;
+	.uk-card-media-top {
+		width: 100%;
+		height: 250px;
+		@media (min-width: 600px) {
+			height: 300px;
+		}
+
+		img {
+			height: 100%;
+			width: 100%;
+			object-fit: cover;
+
+			&.grayscale {
+				filter: grayscale(100%);
+			}
+		}
+	}
+	.uk-card-body {
+		padding: 20px;
+		.uk-card-title {
+			max-height: 3em;
+			font-size: 1rem;
+		}
+	}
+}
+
+// jQuery selectable
+#selectable {
+	.ui-selecting {
+		background: #EEE6B9;
+	}
+	.ui-selected {
+		background: #F4E487;
+	}
+	.uk-light & {
+		.ui-selecting {
+			background: #5E5731;
+		}
+		.ui-selected {
+			background: #9D9252;
+		}
+	}
+}
+
+// Edit modal
+#edit-modal {
+	.uk-grid > div {
+		height: 300px;
+	}
+	#cover {
+		height: 100%;
+		width: 100%;
+		object-fit: cover;
+	}
+	#cover-upload {
+		height: 100%;
+		box-sizing: border-box;
+	}
+	.uk-modal-body .uk-inline {
+		width: 100%;
+	}
+}
+
+// Dark theme
+.uk-light {
+	.uk-navbar-dropdown,
+	.uk-modal-header,
+	.uk-modal-body,
+	.uk-modal-footer {
+		background: #222;
+	}
+	.uk-navbar-dropdown,
+	.uk-dropdown {
+		color: #ccc;
+	}
+	.uk-nav-header,
+	.uk-description-list > dt {
+		color: #555;
+	}
+}
+
+// Alpine magic
+[x-cloak] {
+    display: none;
+}
+
+// Batch select bar on title page
+#select-bar-controls {
+	a {
+		transform: scale(1.5, 1.5);
+
+		&:hover {
+			color: orange;
+		}
+	}
+}
+
+// Totop button
+#totop-wrapper {
+    position: absolute;
+    top: 100vh;
+    right: 2em;
+    bottom: 0;
+
+	a {
+		position: fixed;
+		position: sticky;
+		top: calc(100vh - 5em);
+	}
+}
+
+// Misc
+.uk-alert-close {
+    color: black !important;
+}
+.break-word {
+    word-wrap: break-word;
+}
+.uk-search {
+    width: 100%;
+}

src/views/download-manager.html.ecr

@@ -43,7 +43,7 @@
             <template x-if="job.status_message.length > 0">
               <div class="uk-inline">
                 <span uk-icon="info"></span>
-                <div uk-dropdown x-text="job.status_message"></div>
+                <div uk-dropdown x-text="job.status_message" style="white-space: pre-line;"></div>
               </div>
             </template>
           </td>

src/views/layout.html.ecr

@@ -37,7 +37,7 @@
           <div class="uk-navbar-toggle" uk-navbar-toggle-icon="uk-navbar-toggle-icon" uk-toggle="target: #mobile-nav"></div>
         </div>
         <div class="uk-navbar-left uk-visible@s">
-          <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png"></a>
+          <a class="uk-navbar-item uk-logo" href="<%= base_url %>"><img src="<%= base_url %>img/icon.png" style="width:90px;height:90px;"></a>
           <ul class="uk-navbar-nav">
             <li><a href="<%= base_url %>">Home</a></li>
             <li><a href="<%= base_url %>library">Library</a></li>
@@ -69,7 +69,7 @@
     </div>
     <div class="uk-section uk-section-small">
     </div>
-    <div class="uk-section uk-section-small" id="main-section">
+    <div class="uk-section uk-section-small" style="position:relative;">
       <div class="uk-container uk-container-small">
         <div id="alert"></div>
         <%= content %>

src/views/reader.html.ecr

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="reader-bg">
+<html style="background-color: black;">
 
   <% page = "Reader" %>
   <%= render_component "head" %>