Fix style linting issues

maxmilton · Dec 6, 2021 · 913f2f1 · 913f2f1
1 parent a2ecd2f
commit 913f2f1
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 42 deletions.
diff --git a/src/css/newtab.xcss b/src/css/newtab.xcss
@@ -1,29 +1,38 @@
+// TODO: Remove disable comment and remove specificity
+// stylelint-disable no-descending-specificity
+
 /**
  * App styles
  */
 
 body {
   margin: 108px 0;
   overflow-y: scroll; // prevent jump on load
+  color: var(--c3);
   font-size: 18px;
-  /**
-   * Although it's best practice to use a unitless value for line-height, this
-   * is a hack for alignment with the minimum possible style properties. Value
-   * should be the same as as bookmark bar height.
-   */
-  line-height: 42px;
-  text-rendering: optimizeSpeed;
   font-variant: none;
-  color: var(--c3);
+  // Although it's best practice to use a unitless value for line-height, this
+  // is a hack for alignment with the minimum possible style properties. Value
+  // should be the same as as bookmark bar height.
+  line-height: 42px;
   background: var(--b);
+  text-rendering: optimizeSpeed;
+}
+
+a,
+// folder
+.f {
+  display: block;
+  color: var(--t);
+  white-space: nowrap;
 }
 
 a,
 // subfolder
 .sf .f {
   overflow: hidden;
-  text-overflow: ellipsis;
   text-decoration: none;
+  text-overflow: ellipsis;
   cursor: pointer; // for menu settings link (without href)
 
   &:hover,
@@ -32,14 +41,6 @@ a,
   }
 }
 
-a,
-// folder
-.f {
-  display: block;
-  color: var(--t);
-  white-space: nowrap;
-}
-
 // all <img> are favicons
 img {
   width: 16px;
@@ -52,8 +53,8 @@ svg {
   height: 24px;
   fill: none;
   stroke: currentColor;
-  stroke-width: 2px;
   stroke-linecap: round;
+  stroke-width: 2px;
 }
 
 // container
@@ -64,6 +65,14 @@ svg {
   padding: 0 18px;
 }
 
+/* "Load more" button */
+button {
+  width: initial;
+  margin-top: 9px;
+  padding: 11px 20px;
+  font-size: 18px;
+}
+
 button,
 // search input
 #s {
@@ -84,14 +93,6 @@ button,
   }
 }
 
-/* "Load more" button */
-button {
-  width: initial;
-  margin-top: 9px;
-  padding: 11px 20px;
-  font-size: 18px;
-}
-
 // menu icon
 #im,
 // search icon
@@ -101,8 +102,8 @@ button {
 
 #i {
   position: absolute;
-  left: 38px;
   top: 14px;
+  left: 38px;
 }
 
 // overflow bookmark folder icon
@@ -147,10 +148,10 @@ button {
 // subfolder
 .sf {
   position: fixed;
+  z-index: 1;
   overflow-y: auto;
   background: var(--c2);
   box-shadow: var(--s);
-  z-index: 1;
 
   a,
   // folder

diff --git a/src/css/settings.xcss b/src/css/settings.xcss
@@ -1,17 +1,17 @@
 body,
 button,
 select {
-  font-size: 18px;
   color: #293742;
+  font-size: 18px;
 }
 
 svg {
   width: 24px;
   fill: none;
   stroke: currentColor;
-  stroke-width: 2px;
   stroke-linecap: round;
   stroke-linejoin: round;
+  stroke-width: 2px;
 }
 
 label {
@@ -27,7 +27,10 @@ fieldset {
 }
 
 ul {
+  margin-top: 0;
   margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
 }
 
 legend {
@@ -38,12 +41,6 @@ select {
   padding: 0.25em 0.5em;
 }
 
-ul {
-  margin-top: 0;
-  padding-left: 0;
-  list-style: none;
-}
-
 .muted {
   color: #6e6e6e;
 }
@@ -58,8 +55,8 @@ ul {
 
   &::after {
     display: block;
-    content: 'Drag sections here to disable them';
     color: #6e6e6e;
+    content: 'Drag sections here to disable them';
   }
 }
 
@@ -69,20 +66,20 @@ ul {
   align-items: center;
   margin: 0 0 6px;
   padding: 10px;
+  font-weight: bold;
   line-height: 0;
   background: #ffffff8c;
   border: 2px solid currentColor;
   border-radius: 4px;
   cursor: grab;
-  font-weight: bold;
 
   &:last-of-type {
     margin-bottom: 0;
   }
 
   &:hover,
   &:focus {
-    color: rgb(178, 85, 255) !important;
+    color: rgb(178 85 255) !important;
   }
 }
 
@@ -93,8 +90,8 @@ ul {
 
 .dragging {
   border-style: dashed;
-  opacity: 0.4;
   cursor: move;
+  opacity: 0.4;
 
   & > .icon,
   & > .rm {
@@ -107,13 +104,13 @@ ul {
 
   &::before {
     position: absolute;
-    display: block;
     top: -14px;
     left: 0;
+    display: block;
     width: 100%;
     padding-bottom: 8px;
+    border-top: 6px solid rgb(178 85 255);
     content: '';
-    border-top: 6px solid rgb(178, 85, 255);
   }
 }
 

diff --git a/src/css/themes/dark.xcss b/src/css/themes/dark.xcss
@@ -9,5 +9,6 @@
   --c1: #2c313a; // bookmark node hover background, hr, button border, search input border
   --c2: #292d35; // bookmarks bar, menu dropdown, "load more" button
   --c3: #383e4a; // icons, empty folder text, text fallback (headings, etc.)
+
   color-scheme: dark;
 }
diff --git a/src/css/themes/hacker-terminal.xcss b/src/css/themes/hacker-terminal.xcss
@@ -9,6 +9,7 @@
   --c1: #113321; // bookmark node hover background, hr, button border, search input border
   --c2: #0a0000; // bookmarks bar, menu dropdown, "load more" button
   --c3: #26ba3c; // icons, empty folder text, text fallback (headings, etc.)
+
   color-scheme: dark;
 }
 

diff --git a/src/css/themes/rich-black.xcss b/src/css/themes/rich-black.xcss
@@ -9,5 +9,6 @@
   --c1: #1d1616; // bookmark node hover background, hr, button border, search input border
   --c2: #0f0b0b; // bookmarks bar, menu dropdown, "load more" button
   --c3: #392d2d; // icons, empty folder text, text fallback (headings, etc.)
+
   color-scheme: dark;
 }
diff --git a/src/css/themes/tilde-club.xcss b/src/css/themes/tilde-club.xcss
@@ -11,6 +11,7 @@
   --c1: #fb5; // bookmark node hover background, hr, button border, search input border
   --c2: #111; // bookmarks bar, menu dropdown, "load more" button
   --c3: #fb5; // icons, empty folder text, text fallback (headings, etc.)
+
   color-scheme: dark;
 }