fixed button hover for files added fontsize and font

css/w3-colors-flat.css

@@ -33,8 +33,11 @@
 .w3-flat-pumpkin
 {color:#fff;background-color:#d35400}
 .w3-flat-pomegranate
-{color:#fff;background-color:#c0392b}
+{color:#fff;background-color:#c0392b !important}
 .w3-flat-silver
 {color:#000;background-color:#bdc3c7}
 .w3-flat-asbestos
 {color:#fff;background-color:#7f8c8d}
+
+.w3-hover-flat-pomegranate:hover
+{color:#fff !important;background-color:#c0392b !important}

css/w3.css

@@ -145,7 +145,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
 .w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
 .w3-left{float:left!important}.w3-right{float:right!important}
-.w3-button:hover{color:#000!important;background-color:#ccc!important}
+.w3-button:hover{color:#000;background-color:#ccc}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
 /* Colors */

index.html

@@ -13,8 +13,11 @@
 
       //settings
       window.settings = {
-        lineBreak: 150,
         localOnly: true,
+        lineBreak: 150,
+        font: "Arial",
+        fontSize: 9,
+        
       };
 
       let script = document.createElement("script");

js/9.9.9/files.js

@@ -11,7 +11,6 @@ import { modalNotifier } from "./evts.js";
 function buildFile() {
   createStorageObj();
 
-
   //set current page value in activeState object
   activeState.activePage = "files";
 
@@ -24,7 +23,6 @@ function buildFile() {
     return;
   }
 
-
   if (screen.width > 992) {
     document.getElementById("siteTitle").innerHTML = "Saved files";
   } else {
@@ -114,7 +112,7 @@ function loadFileDivCallBack() {
   deleteButton.setAttribute("type", "submit");
   deleteButton.setAttribute("value", "Delete");
   deleteButton.classList.add("w3-button");
-  deleteButton.classList.add("w3-red");
+  deleteButton.classList.add("w3-flat-pomegranate");
   document.getElementById("submitContainer").appendChild(deleteButton);
 
   if (screen.width > 992) {
@@ -123,7 +121,6 @@ function loadFileDivCallBack() {
     document.getElementById("siteTitle").innerHTML = "TG";
   }
 
-
   let title = document.createElement("div");
   title.classList.add("w3-panel");
   let titleText = document.createElement("h2");
@@ -192,13 +189,15 @@ function loadFileSidebar(tF) {
     sidebarListItem.style.borderBottom = "1px solid #ddd";
     sidebarListItem.id = "sb-" + obj.fileName.replace(/:/g, "_");
 
+    //handle to many files on screen and display hidden files amount
     if (c > sidebarItemsAmount) {
-      sidebarListItem.setAttribute("data-template", '_overflow');
+      sidebarListItem.setAttribute("data-template", "_overflow");
-      sidebarListItem.setAttribute("data-file", '_overflow');
+      sidebarListItem.setAttribute("data-file", "_overflow");
       sidebarListItem.classList.add("w3-flat-clouds");
       sidebarListItem.classList.remove("w3-button");
-      sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)"
+      sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)";
-      sidebarListItem.innerHTML = tF.length - sidebarItemsAmount + " files not shown";
+      sidebarListItem.innerHTML =
+        tF.length - sidebarItemsAmount + " files not shown";
       sidebarList.appendChild(sidebarListItem);
       break;
     }
@@ -209,16 +208,13 @@ function loadFileSidebar(tF) {
     c++;
   }
 
+  //clear all files button
   sidebarListItem = document.createElement("li");
-  sidebarListItem.classList.add(
+  sidebarListItem.classList.add("w3-bar-item", "w3-padding-large", "w3-button");
-    "w3-bar-item",
-    "w3-padding-large",
-    "w3-button"
-  );
   sidebarListItem.style.borderBottom = "1px solid #ddd";
-  sidebarListItem.setAttribute("data-template", '_clearAll');
+  sidebarListItem.setAttribute("data-template", "_clearAll");
-  sidebarListItem.setAttribute("data-file", '_clearAll');
+  sidebarListItem.setAttribute("data-file", "_clearAll");
-  sidebarListItem.classList.add("w3-flat-pomegranate", "w3-bottom");
+  sidebarListItem.classList.add("w3-hover-flat-pomegranate", "w3-bottom");
   sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)";
   sidebarListItem.style.width = "300px";
   sidebarListItem.innerHTML = "Clear all files";
@@ -228,7 +224,11 @@ function loadFileSidebar(tF) {
 }
 
 function mainFormPlaceholder(msg = "Select a file") {
-  return "<div class='w3-row-padding w3-padding-24 w3-container w3-flat-clouds'><div class='w3-code notranslate w3-border-white' style='font-family: Arial, Helvetica, sans-serif;'><p>" + msg + "</p><br><br><br><br><br><br><br><br><br><br><br></div></div>";
+  return (
+    "<div class='w3-row-padding w3-padding-24 w3-container w3-flat-clouds'><div class='w3-code notranslate w3-border-white' style='font-family: Arial, Helvetica, sans-serif;'><p>" +
+    msg +
+    "</p><br><br><br><br><br><br><br><br><br><br><br></div></div>"
+  );
 }
 
 function copyFileToClipboard() {
@@ -238,7 +238,6 @@ function copyFileToClipboard() {
   } else {
     console.log("error file not found");
   }
-
 }
 
 function copyToClipBoard(html) {
@@ -288,10 +287,16 @@ function formEvts(storageName) {
           break;
         case "Copy":
           copyFileToClipboard();
-          e.target.className = e.target.className.replace(" w3-grey", " w3-flat-carrot");
+          e.target.className = e.target.className.replace(
+            " w3-grey",
+            " w3-flat-carrot"
+          );
           e.target.style.pointerEvents = "none";
           const timeoutCopy = setTimeout(() => {
-            e.target.className = e.target.className.replace(" w3-flat-carrot"," w3-grey");
+            e.target.className = e.target.className.replace(
+              " w3-flat-carrot",
+              " w3-grey"
+            );
             e.target.style.pointerEvents = "auto";
           }, 250);
           break;
@@ -302,7 +307,8 @@ function formEvts(storageName) {
           if (previousFile) {
             loadFileDiv(previousFile.fileName, previousFile.template);
           } else {
-            document.getElementById("mainForm").innerHTML = mainFormPlaceholder("No file yet");
+            document.getElementById("mainForm").innerHTML =
+              mainFormPlaceholder("No file yet");
           }
 
           break;
@@ -325,7 +331,6 @@ function loadSpecificTemplate(storageName) {
 }
 
 function getPreviousFile(storageName) {
-
   let orgFileName = storageName.split("_m21_")[0];
   let tF = JSON.parse(retrieveData("templateFiles"));
   let i = 0;
@@ -333,17 +338,17 @@ function getPreviousFile(storageName) {
 
   for (let obj of tF) {
     if (obj.fileName == orgFileName) {
-      previousFile = tF[i-1];
+      previousFile = tF[i - 1];
       if (previousFile === undefined) {
         //get the next one if there is no previous one
-        previousFile = tF[i+1];
+        previousFile = tF[i + 1];
       }
       break;
     }
     i++;
   }
 
-  return (previousFile != undefined) ?  previousFile : false;
+  return previousFile != undefined ? previousFile : false;
 }
 
 function clickClearAllFiles() {
@@ -362,17 +367,18 @@ function clickClearAllFiles() {
           e.preventDefault;
       }
     }
-  })
+  });
   modalNotifier(
     "<div class='w3-container'> \
     <p>Would you really like to delete all stored files?</p> \
     <button class='w3-button w3-border w3-flat-pomegranate' >Delete</button>",
-  0);
+    0
+  );
 }
 function clearAllFiles() {
   let tF = JSON.parse(retrieveData("templateFiles"));
   if (tF == null || tF.length == 0) {
-    modalNotifier("there are no saved texts yet",2);
+    modalNotifier("there are no saved texts yet", 2);
     return;
   }
   for (let storageName of tF) {

js/9.9.9/parseForm.js

@@ -131,7 +131,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) {
     bHtml = bHtml.replace(/ /g, " ");
   
     bHtml =
-      "<div style='font-family: Arial, Helvetica, sans-serif;'>" +
+      "<div style='font-family: " + activeState.font + ", Helvetica, sans-serif; font-size: " + activeState.fontSize + "px;'>" +
       bHtml +
       "</div>";