🔧 🎨 Better less, better tools

.stylelintrc

@@ -1,4 +1,7 @@
 {
   "extends": "stylelint-config-standard",
+  "ignoreFiles": [
+    "./src/less/*-vendor.less"
+  ],
   "rules": { }
 }

package.json

@@ -10,7 +10,9 @@
     "package": "electron-forge package",
     "make": "electron-forge make",
     "publish": "electron-forge publish",
-    "style": "lessc --source-map-inline ./src/less/root.less ./static/css/root.css",
+    "tsc": "node ./tools/tsc.js",
+    "less": "node ./tools/lessc.js",
+    "contributors": "node ./tools/contributors.js",
     "lint-ts": "tslint -c tslint.json -p tsconfig.json -e \"node_modules/**/*.ts\"",
     "lint-style": "stylelint ./src/less/*.less"
   },

src/less/commands.less

@@ -5,9 +5,11 @@
   justify-content: space-between;
   height: 40px;
   padding-top: 12px;
-  font-family: var(--default-fonts);
+  font-family: @default-fonts;
 
-  button, input, select {
+  button,
+  input,
+  select {
     -webkit-app-region: no-drag;
   }
 
@@ -20,7 +22,7 @@
     line-height: 15px;
   }
 
-  &>div {
+  & > div {
     display: flex;
 
     &:first-of-type {
@@ -29,7 +31,7 @@
       }
     }
 
-    &::last-of-type {
+    &:last-of-type {
       margin-right: 10px;
 
       button {
@@ -41,17 +43,16 @@
   .address-bar {
     height: 28px;
     width: 360px;
-    transition: width .4s;
+    transition: width 0.4s;
     display: flex;
 
-    &.empty {
-      width: 200px;
-    }
-
-    &::focus-within {
-      span, input {
-        border-color: @electron-bright;
-      }
+    input,
+    span {
+      font-family: @default-fonts;
+      font-weight: 300;
+      font-size: 11px;
+      cursor: auto;
+      -webkit-app-region: no-drag;
     }
 
     input {
@@ -77,7 +78,7 @@
       border-bottom-style: solid;
       border-bottom-left-radius: 4px;
       border-bottom-width: 1px;
-      border-image-outset: 0px;
+      border-image-outset: 0;
       border-image-repeat: stretch;
       border-image-slice: 100%;
       border-image-source: none;
@@ -89,22 +90,28 @@
       border-top-left-radius: 4px;
       border-top-style: solid;
       border-top-width: 1px;
-      color: rgb(0, 0, 0);
-      cursor: auto;
       display: inline-block;
-      font-family: system-ui;
-      font-size: 11px;
       height: 28px;
       letter-spacing: normal;
       line-height: 16px;
-      margin: 0 6px 0 0;
-      padding: 6px 6px 10px 10px;
+      margin: 0;
+      padding: 6px 0 10px 10px;
       user-select: text;
       width: 132px;
-      -webkit-app-region: no-drag;
       text-rendering: auto;
       text-shadow: none;
       text-transform: none;
     }
+
+    &.empty {
+      width: 200px;
+    }
+
+    &:focus-within {
+      span,
+      input {
+        border-color: @electron-bright;
+      }
+    }
   }
 }

src/less/dialogs.less

@@ -18,11 +18,10 @@
 
 .tokenDialog {
   position: absolute;
-  z-index: 2;
   top: 60px;
   width: 300px;
   padding: 10px;
-  z-index: 1000;
+  z-index: 100;
   background-color: var(--electron-background-2);
   border: 1px solid var(--electron-dark);
   color: #f3f3f3;

src/less/main.less

@@ -12,7 +12,8 @@
   src: local('Roboto'), local('Roboto-Light'), url(../fonts/roboto/Roboto-Light.ttf) format('woff2');
 }
 
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
   background: @electron-background-2;
@@ -33,7 +34,7 @@ html, body {
   }
 
   *::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, .4);
+    background: rgba(255, 255, 255, 0.4);
   }
 
   *::-webkit-scrollbar-corner {
@@ -51,7 +52,7 @@ html, body {
     background-color: #9feaf9;
     border: none;
     color: #1e2527;
-    padding: 0px 30px;
+    padding: 0 30px;
     text-align: center;
     text-decoration: none;
     border-radius: 4px;
@@ -128,5 +129,3 @@ html, body {
   text-align: center;
   font-size: 12px;
 }
-
-