build: Add Stylelint

.stylelintignore

@@ -0,0 +1 @@
+*.min.css

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard"]
+}

package.json

@@ -34,7 +34,9 @@
     "electron-builder": "25.0.5",
     "husky": "^9.1.5",
     "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3"
+    "prettier": "^3.3.3",
+    "stylelint": "^16.9.0",
+    "stylelint-config-standard": "^36.0.1"
   },
   "scripts": {
     "start": "electron ./ --dev",
@@ -52,9 +54,15 @@
     "postinstall": "electron-builder install-app-deps",
     "pack-win": "cd out/win-unpacked && cp ../windows-install.bat ./ && 7za a sidenoder-$npm_package_version-win.zip  ./* && mv sidenoder-$npm_package_version-win.zip ../",
     "pack-mac": "cd out/mac && tar -czf sidenoder-$npm_package_version-mac.tar.gz  ./* && mv sidenoder-$npm_package_version-mac.tar.gz ../",
-    "prepare": "husky"
+    "prepare": "husky",
+    "stylelint:check": "stylelint \"**/*.css\"",
+    "stylelint:fix": "stylelint --fix \"**/*.css\""
   },
   "lint-staged": {
+    "**/*.css": [
+      "stylelint --fix",
+      "stylelint"
+    ],
     "*.{js,html,twig}": [
       "eslint --fix",
       "eslint"

views/browse_include.twig

@@ -10,12 +10,12 @@
       </a>
       <a
         class="btn btn-md btn-primary"
-        id="shellOpenDirPath"
+        id="shell-open-dir-path"
         title="Open by filebrowser"
       >
         <i class="fa fa-folder-open"></i>
       </a>
-      <a class="btn btn-md btn-primary" id="editDirPath" title="Edit path">
+      <a class="btn btn-md btn-primary" id="edit-dir-path" title="Edit path">
         <i class="fa fa-edit"></i>
       </a>
       <span id="path"></span>
@@ -104,7 +104,7 @@
         class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5"
       ></div>
       <table class="table table-striped-rookie table-hover">
-        <tbody id="listTable"></tbody>
+        <tbody id="list-table"></tbody>
       </table>
     </div>
   </div>
@@ -124,10 +124,10 @@
     id('addBookmark').onclick = () => {
       addBookmark(id('bookmarkName').value, id('path').title);
     };
-    id('shellOpenDirPath').onclick = () => {
+    id('shell-open-dir-path').onclick = () => {
       shell.openPath(id('path').title);
     };
-    id('editDirPath').onclick = () => {
+    id('edit-dir-path').onclick = () => {
       promptDialog(
         'Change directory location',
         '',

views/css/component.css

@@ -13,8 +13,6 @@
 }
 
 .cbp-fwslider ul li {
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
   transform: translateZ(0);
   float: left;
   display: block;
@@ -36,6 +34,16 @@
   max-width: 75%;
 }
 
+.cbp-fwdots span {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: #ddd;
+  margin: 4px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 .cbp-fwslider nav span {
   position: absolute;
   top: 50%;
@@ -51,44 +59,32 @@
   font-weight: normal;
 }
 
+.cbp-fwdots span:hover {
+  background: #999;
+}
+
 .cbp-fwslider nav span:hover {
   background: #378fc3;
 }
 
 .cbp-fwslider nav span.cbp-fwnext {
-  right: 0px;
+  right: 0;
 }
 
 .cbp-fwslider nav span.cbp-fwprev {
-  left: 0px;
+  left: 0;
 }
 
 .cbp-fwdots {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   white-space: nowrap;
   text-align: center;
   width: 100%;
 }
 
-.cbp-fwdots span {
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  background: #ddd;
-  margin: 4px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.cbp-fwdots span:hover {
-  background: #999;
-}
-
 .cbp-fwdots span.cbp-fwcurrent {
   background: #47a3da;
   box-shadow: 0 0 0 2px #47a3da;
-  -webkit-transition: box-shadow 0.2s ease-in-out;
-  -moz-transition: box-shadow 0.2s ease-in-out;
   transition: box-shadow 0.2s ease-in-out;
 }