improve default theme and bug fixes

Author: MS702

css/list.css

@@ -19,6 +19,8 @@
 
 #item #meta {
 		font-size: var(--item-meta-font-size);
+		margin: 0 5px 0 5px;
+		text-align: var(--item-meta-text-align);
 }
 
 #item_list {

css/main.css

@@ -5,8 +5,8 @@
 
 @media (orientation: portrait) {
 	:root {
-		--item_height: max(75px, 27vw);
-		--item_width: max(75px, 27vw);
+		--item-height: var(--item-height-portrait);
+		--item-width: var(--item-width-portrait);
 		--item-title-font-size: max(10px, 4vw);
 		--item-meta-font-size: max(8px, 3vw);
 		--input_scale: max(20px, 10vw);
@@ -17,8 +17,8 @@
 }
 @media (orientation: landscape) {
 	:root {
-		--item_height: max(75px, min(250px, min(22vw, 22vh)));/*min(27vw, 175px);*/
-		--item_width: max(75px, min(250px, min(22vw, 22vh)));/*min(27vw, 175px);*/
+		--item-height: var(--item-height-landscape);
+		--item-width: var(--item-width-landscape);
 		--item-title-font-size: max(10px, min(40px, min(3.5vw, 3.5vh)));
 		--item-meta-font-size: max(8px, min(25px, min(2.5vw, 2.5vh)));
 		--input_scale: max(20px, min(100px, min(10vw, 10vh)));

css/theme.css

@@ -34,22 +34,22 @@
   --list: #49595D;
   --list-text: white;
 
-  --list-active: #AB6A87;
+  --list-active: #AD6A87; /*#F06870;*/
   --list-active-border: 0px;
   --list-active-text: white;
   --list-active-meta: rgb(235, 235, 235);
 
-  --list-active-hover: #f27b81ff;
+  --list-active-hover: #C16A87;
   --list-active-hover-border: 0px;
   --list-active-hover-text: white;
   --list-active-hover-meta: rgb(235, 235, 235);
 
-  --list-last: #6AAB8E;
+  --list-last: #6AAB8E;/*#68B8A8;*/
   --list-last-border: 0px;
   --list-last-text: white;
   --list-last-meta: rgb(235, 235, 235);
 
-  --list-last-hover: #79beb1ff;
+  --list-last-hover: #6ABF8E;
   --list-last-hover-border: 0px;
   --list-last-hover-text: white;
   --list-last-hover-meta: rgb(235, 235, 235);
@@ -78,7 +78,11 @@
   --toast-button-border: 0px;
   --toast-button-text: black;
 
-  --item-height: 27vw;
-  --item-width: 27vw;
+  --item-width-landscape: max(75px, min(250px, min(22vw, 22vh)));
+  --item-width-portrait: max(75px, 27vw);
+  --item-height-landscape: max(75px, min(250px, min(22vw, 22vh)));
+  --item-height-portrait: max(75px, 27vw);
+
   --item-text-align: center;
+  --item-meta-text-align: center;
 }

js/themes.js

@@ -80,9 +80,13 @@ var themes = {
     "toast-button-border": null,
     "toast-button-text": null,
 
-    "item-height": null,
-    "item-width": null,
+    "item-width-landscape": null,
+    "item-width-portrait": null,
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": null,
+    "item-meta-text-align": null,
   },
   oled: {
     "popup": "rgba(20, 20, 20)",
@@ -163,9 +167,13 @@ var themes = {
     "toast-button-border": null,
     "toast-button-text": "white",
 
-    "item-height": null,
-    "item-width": null,
+    "item-width-landscape": null,
+    "item-width-portrait": null,
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": null,
+    "item-meta-text-align": null,
   },
   dark: {
     "popup": "rgba(70, 70, 70)",
@@ -247,9 +255,13 @@ var themes = {
     "toast-button-border": null,
     "toast-button-text": "white",
 
-    "item-height": null,
-    "item-width": null,
+    "item-width-landscape": null,
+    "item-width-portrait": null,
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": null,
+    "item-meta-text-align": null,
   },
   light: {
     "popup": "rgba(220, 220, 220)",
@@ -330,9 +342,13 @@ var themes = {
     "toast-button-border": null,
     "toast-button-text": null,
 
-    "item-height": null,
-    "item-width": null,
+    "item-width-landscape": null,
+    "item-width-portrait": null,
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": null,
+    "item-meta-text-align": null,
   },
   yb: {
     "popup": null,
@@ -413,9 +429,13 @@ var themes = {
     "toast-button-border": null,
     "toast-button-text": null,
 
-    "item-height": null,
-    "item-width": null,
+    "item-width-landscape": null,
+    "item-width-portrait": null,
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": null,
+    "item-meta-text-align": null,
   },
   eink: {
     "popup": "white",
@@ -497,9 +517,13 @@ var themes = {
     "toast-button-border": "5px solid black",
     "toast-button-text": "black",
 
-    "item-height": null,
-    "item-width": null,
+    "item-width-landscape": null,
+    "item-width-portrait": null,
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": null,
+    "item-meta-text-align": null,
   },
   zuflucht: {
     "popup": null,
@@ -537,15 +561,17 @@ var themes = {
     "list": null,
     "list-text": null,
 
-    "list-active": null,
+    "list-active": "rgba(171, 106, 135)",
     "list-active-border": null,
     "list-active-text": null,
     "list-active-meta": null,
 
+    "list-active-hover": null,
     "list-active-hover-border": null,
     "list-active-hover-text": null,
     "list-active-hover-meta": null,
 
+    "list-last": "rgba(106, 171, 142)",
     "list-last-border": null,
     "list-last-text": null,
     "list-last-meta": null,
@@ -578,12 +604,14 @@ var themes = {
 
     "toast-button-border": null,
     "toast-button-text": null,
-    "item-width": "80%",
-    "item-height": "null",
 
-    "list-last": "rgba(106, 171, 142)",
-    "list-active": "rgba(171, 106, 135)",
+    "item-width-landscape": "80%",
+    "item-width-portrait": "80%",
+    "item-height-landscape": null,
+    "item-height-portrait": null,
+
     "item-text-align": "left",
+    "item-meta-text-align": "left",
   },
 }
 
@@ -594,10 +622,12 @@ function changeTheme(theme)
     var value = theme[key];
     if (value != null)
     {
+      console.log("set", key, value);
       document.documentElement.style.setProperty("--"+key, value);
     }
     else
     {
+      console.log("del", key, value);
       document.documentElement.style.removeProperty("--"+key);
     }
   }