marquee on large file names; beta feature

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

scripts/fileview/load/render.js

@@ -31,8 +31,14 @@ module.exports = (dir) => {
         cfc.appendChild(im);
         let cf = document.createElement('b');
         cf.className = 'file-name';
+        if (file.name.length > 20) {
+            cf.classList.add('large-file-name');
+            let lfnc = document.createElement('div');
+            lfnc.className = 'large-file-name-container';
+            cfc.appendChild(lfnc);
+            lfnc.appendChild(cf);
+        } else {cfc.appendChild(cf);}
         cf.innerHTML = file.name;
-        cfc.appendChild(cf);
         let isd = document.createElement('p');
         isd.className = 'file-type';
         isd.innerHTML = file.type;

styles/files.css

@@ -71,4 +71,26 @@
     background: linear-gradient(to right, #5d60ca78 20%, #17171778 35%, #17171778 35%, #5d60ca99 50%, #5d60ca99 50%, #af218878 75%, #5d60ca78 90%);
     background-size: 200% auto;
     animation: shine 10s linear infinite;
+}
+
+@keyframes scroll-text {
+    from {transform: translateX(100%);}
+    to {transform: translateX(-100%);}
+}
+
+.large-file-name {
+    position: absolute;
+    animation: scroll-text 10s linear infinite;
+    width: max-content;
+    height: max-content;
+    margin: 0 0;
+}
+
+.large-file-name-container {
+    overflow: hidden;
+    position: relative;
+    margin: 0 0;
+    padding: 0 0;
+    width: 27%;
+    height: 100%;
 }